{"id":13604780,"url":"https://github.com/agustinusnathaniel/vite-react-chakra-starter","last_synced_at":"2026-04-04T00:48:27.217Z","repository":{"id":38358038,"uuid":"346320551","full_name":"agustinusnathaniel/vite-react-chakra-starter","owner":"agustinusnathaniel","description":"template to initialize react-router app with Chakra UI setup :sparkles:","archived":false,"fork":false,"pushed_at":"2026-03-26T07:56:14.000Z","size":2434,"stargazers_count":122,"open_issues_count":1,"forks_count":24,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-04T00:48:19.037Z","etag":null,"topics":["chakra-ui","react","react-typescript-boilerplate","starter-template","typescript","vite"],"latest_commit_sha":null,"homepage":"https://vrts-chakra.sznm.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agustinusnathaniel.png","metadata":{"funding":{"github":"sozonome","patreon":null,"open_collective":null,"ko_fi":"sozonome","tidelift":null,"community_bridge":null,"liberapay":"sozonome","issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://buymeacoff.ee/sozonome","https://www.nihbuatjajan.com/sozonome","https://trakteer.id/sozonome/tip?utm_source=github_sozonome"]},"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2021-03-10T10:42:00.000Z","updated_at":"2026-03-26T07:56:18.000Z","dependencies_parsed_at":"2023-12-08T12:26:11.422Z","dependency_job_id":"9c02f8d7-6f7a-4e98-91dc-976f9e0936b4","html_url":"https://github.com/agustinusnathaniel/vite-react-chakra-starter","commit_stats":null,"previous_names":["agustinusnathaniel/vite-react-chakra-starter","sozonome/vite-react-chakra-starter"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/agustinusnathaniel/vite-react-chakra-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agustinusnathaniel%2Fvite-react-chakra-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agustinusnathaniel%2Fvite-react-chakra-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agustinusnathaniel%2Fvite-react-chakra-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agustinusnathaniel%2Fvite-react-chakra-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agustinusnathaniel","download_url":"https://codeload.github.com/agustinusnathaniel/vite-react-chakra-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agustinusnathaniel%2Fvite-react-chakra-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31383635,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-03T23:20:52.058Z","status":"ssl_error","status_checked_at":"2026-04-03T23:20:51.675Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra-ui","react","react-typescript-boilerplate","starter-template","typescript","vite"],"created_at":"2024-08-01T19:00:51.192Z","updated_at":"2026-04-04T00:48:27.212Z","avatar_url":"https://github.com/agustinusnathaniel.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sozonome","https://ko-fi.com/sozonome","https://liberapay.com/sozonome","https://buymeacoff.ee/sozonome","https://www.nihbuatjajan.com/sozonome","https://trakteer.id/sozonome/tip?utm_source=github_sozonome"],"categories":["Get Started"],"sub_categories":["Templates"],"readme":"# Vite React Chakra Starter\n\n\u003cimg src=\"https://og.sznm.dev/api/generate?heading=vite-react-chakra-starter\u0026text=React+vite+template+with+Chakra-UI+and+TypeScript+setup.\u0026template=color\u0026center=true\u0026height=330\" /\u003e\n\nA production-ready starter template for building React applications with Vite, TypeScript, Chakra UI v3, and TanStack Router. This template provides a modern development setup with file-based routing, state management, and comprehensive tooling.\n\n[**Live Demo**](https://vite-react-chakra-starter.sznm.dev/)\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/agustinusnathaniel/vite-react-chakra-starter) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/agustinusnathaniel/vite-react-chakra-starter)\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/agustinusnathaniel/vite-react-chakra-starter)\n\n## Purpose and Scope\n\nThis template solves the problem of quickly bootstrapping a new React application with:\n- Modern build tooling (Vite with Rolldown)\n- Type-safe routing (TanStack Router)\n- Component library (Chakra UI v3)\n- Development tooling (Biome, Vitest, TypeScript)\n- PWA capabilities (optional, disabled by default)\n\n**What this template does not provide:**\n- Backend API integration patterns\n- Authentication/authorization flows\n- Database or data persistence layer\n- Complex state management (beyond React Query)\n- Deployment pipelines (only configuration files)\n\n## Tech Stack\n\n| Category | Technology | Version | Purpose |\n|----------|-----------|---------|---------|\n| Build Tool | Vite (Rolldown) | 7.1.20 | Fast dev server and optimized builds |\n| Framework | React | 19.2.0 | UI library |\n| Language | TypeScript | 5.9.3 | Type safety |\n| Routing | TanStack Router | 1.139.12 | File-based routing with type safety |\n| UI Library | Chakra UI | 3.30.0 | Component system |\n| State Management | TanStack Query | 5.90.11 | Server state management |\n| Testing | Vitest | 4.0.14 | Unit and integration testing |\n| Linting/Formatting | Biome | 2.3.2 | Code quality and formatting |\n| Package Manager | pnpm | 10.24.0 | Fast, disk-efficient package management |\n\n## Architecture Overview\n\n```mermaid\ngraph TB\n    subgraph \"Entry Point\"\n        A[index.html] --\u003e B[main.tsx]\n    end\n    \n    subgraph \"Application Bootstrap\"\n        B --\u003e C[Provider - Chakra UI Theme]\n        C --\u003e D[QueryClientProvider]\n        D --\u003e E[RouterProvider]\n    end\n    \n    subgraph \"Routing Layer\"\n        E --\u003e F[__root.tsx - Layout Wrapper]\n        F --\u003e G[Route Tree - Auto-generated]\n        G --\u003e H[Page Components]\n    end\n    \n    subgraph \"Component Architecture\"\n        F --\u003e I[Layout Component]\n        I --\u003e J[Header]\n        I --\u003e K[Footer]\n        I --\u003e L[Page Content]\n        L --\u003e M[UI Components]\n        M --\u003e N[Chakra UI Primitives]\n    end\n    \n    subgraph \"Supporting Systems\"\n        O[Theme System] --\u003e C\n        P[Color Mode Provider] --\u003e C\n        Q[Query Client] --\u003e D\n        R[Route Generation] --\u003e G\n    end\n    \n    style A fill:#e1f5ff\n    style B fill:#e1f5ff\n    style F fill:#fff4e1\n    style I fill:#fff4e1\n    style O fill:#e8f5e9\n    style P fill:#e8f5e9\n```\n\n## Repository Structure\n\n```\nvite-react-chakra-starter/\n├── src/\n│   ├── main.tsx                 # Application entry point\n│   ├── routes/                  # TanStack Router route definitions\n│   │   ├── __root.tsx           # Root layout route with meta tags\n│   │   └── index.tsx            # Home page route\n│   ├── routeTree.gen.ts         # Auto-generated route tree (DO NOT EDIT)\n│   └── lib/                     # Application code\n│       ├── components/          # Reusable UI components\n│       │   └── ui/              # Base UI components (button, color-mode, provider)\n│       ├── layout/              # Layout components\n│       │   ├── index.tsx        # Main layout wrapper\n│       │   └── components/      # Header, Footer, Meta\n│       ├── pages/               # Page-level components\n│       │   ├── home/            # Home page and its components\n│       │   └── 404/             # 404 error page\n│       ├── services/            # Services and shared constants\n│       │   └── constants.ts     # Query client instance\n│       ├── styles/              # Theme configuration\n│       │   └── theme/           # Chakra UI theme setup\n│       └── utils/               # Utility functions\n│           ├── sample.ts        # Example utility\n│           └── sample.test.ts   # Example test\n├── public/                      # Static assets\n├── vite.config.ts               # Vite configuration\n├── vitest.config.ts             # Test configuration\n├── tsconfig.json                # TypeScript configuration\n├── biome.json                   # Linting and formatting rules\n└── package.json                 # Dependencies and scripts\n```\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js ^24.11.x\n- pnpm 10.24.0\n\n### Installation\n\n```bash\n# Clone or use template\nnpx degit agustinusnathaniel/vite-react-chakra-starter \u003capp_name\u003e\ncd \u003capp_name\u003e\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n```\n\nThe development server runs on `http://localhost:3000` and opens automatically.\n\n## Development Workflows\n\n### Running the Application\n\n```bash\n# Development server with hot reload\npnpm dev\n\n# Production build preview\npnpm build\npnpm serve\n```\n\n### Code Quality\n\n```bash\n# Check code style and linting\npnpm biome:check\n\n# Auto-fix issues\npnpm biome:fix\n\n# Type checking\npnpm type:check\n\n# Run all checks (lint, type, test)\npnpm check:turbo\n```\n\n### Testing\n\n```bash\n# Run tests once\npnpm test\n\n# Run tests with UI\npnpm test:ui\n\n# Run tests with coverage\npnpm test:coverage\n```\n\n### Building\n\n```bash\n# Production build\npnpm build\n\n# Output directory: build/client\n```\n\n## Key Dependencies and Their Roles\n\n### Core Framework\n\n- **@tanstack/react-router**: File-based routing with type safety. Routes are defined in `src/routes/` and automatically generate a type-safe route tree.\n- **@tanstack/react-query**: Server state management. Configured in `src/lib/services/constants.ts`.\n- **@chakra-ui/react**: Component library with design tokens. Theme configured in `src/lib/styles/theme/`.\n\n### Development Tools\n\n- **@tanstack/router-plugin**: Vite plugin that generates route trees and enables code splitting.\n- **@tanstack/devtools-vite**: Development tools for debugging Router and Query.\n- **vite-plugin-checker**: TypeScript type checking during development (disabled in production).\n- **vite-tsconfig-paths**: Enables TypeScript path aliases (`@/*`) in Vite.\n\n### Build Configuration\n\n- **rolldown-vite**: Experimental Vite build using Rolldown (Rust-based bundler) for faster builds.\n- **vite-plugin-pwa**: PWA support (currently disabled, see `vite.config.ts`).\n\n## Configuration Files\n\n| File | Purpose |\n|------|---------|\n| `vite.config.ts` | Vite build configuration, plugins, dev server settings |\n| `vitest.config.ts` | Test runner configuration, coverage settings |\n| `tsconfig.json` | TypeScript compiler options, path aliases |\n| `biome.json` | Linting rules, formatting preferences, file patterns |\n| `commitlint.config.ts` | Commit message conventions (Conventional Commits) |\n| `turbo.json` | Task dependencies and caching for CI/CD |\n\n## Path Aliases\n\nThe project uses TypeScript path aliases configured in `tsconfig.json`:\n\n- `@/*` → `src/*`\n\nExample: `import { Button } from '@/lib/components/ui/button'`\n\n## Deployment\n\n### Build Output\n\n- **Command**: `pnpm build`\n- **Output Directory**: `build/client`\n\n### Platform-Specific Configuration\n\n- **Vercel**: `vercel.json` - React Router preset configuration\n- **Netlify**: `netlify.toml` - React Router framework configuration\n- **Nixpacks**: `nixpacks.toml` - Container build configuration\n\nSee platform-specific documentation:\n- [Vercel React Router Guide](https://vercel.com/docs/frameworks/react-router#vercel-react-router-preset)\n- [Netlify React Router Guide](https://docs.netlify.com/frameworks/react-router/)\n\n## Common Development Tasks\n\n### Adding a New Route\n\n1. Create a file in `src/routes/` (e.g., `src/routes/about.tsx`)\n2. Use `createFileRoute` to define the route\n3. The route tree is auto-generated on save\n\n```tsx\nimport { createFileRoute } from '@tanstack/react-router';\n\nexport const Route = createFileRoute('/about')({\n  component: About,\n});\n```\n\n### Adding a New Page Component\n\n1. Create a directory in `src/lib/pages/`\n2. Create `index.tsx` with the page component\n3. Import and use in route file\n\n### Adding a New UI Component\n\n1. Create component in `src/lib/components/ui/` or appropriate subdirectory\n2. Follow existing patterns (forwardRef for DOM components, proper TypeScript types)\n3. Export from component file\n\n### Modifying Theme\n\nEdit `src/lib/styles/theme/index.ts` to customize Chakra UI tokens, colors, and design system values.\n\n## References\n\n- [Vite Documentation](https://vitejs.dev)\n- [Chakra UI Documentation](https://chakra-ui.com/)\n- [TanStack Router Documentation](https://tanstack.com/router)\n- [TanStack Query Documentation](https://tanstack.com/query)\n- [TypeScript Documentation](https://www.typescriptlang.org)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagustinusnathaniel%2Fvite-react-chakra-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagustinusnathaniel%2Fvite-react-chakra-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagustinusnathaniel%2Fvite-react-chakra-starter/lists"}