Vital React Template

Create modern React apps with Vital^(speed)

🐙 GitHub • 🐛 Issues • ⭐ Stars

• 🧩 Full Atomic Component Library — Production-ready atoms and organisms with consistent design tokens
• ⚡️ React 19 — Latest React with modern patterns
• 🦾 TypeScript 6 — Strict typing throughout
• 🎨 Tailwind CSS 4 — CSS-first configuration with custom properties
• 🚀 Vite 8 — Lightning-fast builds
• 👑 Atomic Design — Scalable component architecture
• 🗂 Path Aliases — Clean, consistent imports
• 🎨 SVG Sprites — 84-icon optimized sprite system with caching
• 🧪 Vitest — Fast unit testing
• ☁️ Netlify — Zero-config deployment

All components live under src/components/ and follow Atomic Design. A live showcase is available at the /components route when running the app.

<Button variant="primary" size="sm">Primary</Button>
<Button variant="secondary" size="md">Secondary</Button>
<Button variant="outline" size="lg">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="link">Link</Button>
// Icon button
<Button size="icon" icon="settings" aria-label="Settings" />
// Loading state
<Button isLoading>Saving...</Button>

<Toggle size="sm" label="Small" />
<Toggle size="md" label="Medium" defaultChecked /> {/* default */}
<Toggle size="lg" label="Large" />

CSS custom properties are defined in src/index.css and used across all components:

:root {
 --color-brand: #10b981; /* brand fill (bg-brand-gradient) */
 --color-brand-hover: #059669; /* brand hover */
}

The primary interactive color (buttons, focus rings, active tabs) uses blue-600 / blue-500 from Tailwind's palette. Override in src/index.css to rebrand the entire system at once.

84 icons are bundled in public/sprites/app-icons.svg. Regenerate from icons/ at any time:

npm run generate-sprite

Then bump the version prop in src/app/app.tsx to invalidate browser cache. See SVG_SPRITE_GUIDE.md for full documentation.

import { SvgIcon } from 'components/atoms/svg-sprite-loader';
<SvgIcon name="home" width="24" height="24" className="text-blue-600" />

npx degit asif7774/vital my-awesome-app
cd my-awesome-app
npm install
npm run dev

Visit http://localhost:5200/ and http://localhost:5200/components for the component showcase.

• Update name and author in package.json
• Change <title> in index.html
• Replace favicon in public/favicon.svg
• Update public/manifest.webmanifest
• Adjust --color-brand in src/index.css
• Update this README

• ESLint 10 — Strict React + TypeScript rules
• Prettier 3.9 — Opinionated code formatting
• TypeScript ESLint 8 — TypeScript-specific linting
• Lint-staged 17 — Pre-commit quality gates via Husky
• PostCSS — CSS processing

1. Go to Netlify
2. Connect your repository
3. Deploy — zero configuration required

The dist/ folder is self-contained static files deployable to Vercel, GitHub Pages, Cloudflare Pages, or any CDN.

Vital eliminates the boilerplate tax on every new React project.

• ⚡️ Zero-config — Everything works out of the box
• 🧩 Real component library — Not just scaffolding; production-ready UI components included
• 🎨 Design system ready — CSS variables, consistent tokens, primary color applied globally
• 🚀 Latest tooling — React 19, TypeScript 6, Vite 8, Tailwind 4
• 📦 One command — npx degit asif7774/vital my-app

Perfect for rapid prototyping, internal tools, and production web apps.

MIT License — see LICENSE for details.

Contributions are welcome! Please open a Pull Request.

If Vital saved you time, a star goes a long way. ⭐