templates/react-shadcn-starter
Template
1
Fork 0
Code Activity
Vite 8 + React 19 + TypeScript + Tailwind CSS v4 with shadcn/ui set up the way the shadcn CLI does it today: the radix-nova style, OKLCH CSS-variable theming (dark by default), the @/ import alias, and three components you own as source — Button, Card, https://devai.io/templates/react-shadcn-starter
2 commits 1 branch 0 tags 125 KiB
  • TypeScript 66.5%
  • CSS 29.4%
  • HTML 2.2%
  • Dockerfile 1.9%
Find a file Use this template
Exact
Leonardo Devai e5bee0fb4c Review and modernize all 42 projects to the updated standard 
Pinned 2026 toolchains (Go 1.26, Rust 1.98/edition 2024, Python 3.14 + uv, Node 24,
Zig 0.16, NixOS 26.05), postgres 18 / mongo 8, lockfiles built from, non-root
runtimes, .dockerignore, per-project LICENSE, READMEs with the git.devai.io clone
line, checkout@v7 CI. Security fixes in the legacy Rust APIs (any-password login,
self-assigned admin, hard-coded JWT secret), JWT alg/exp/sub enforcement across the
blog series, safe markdown links in the frontends, and many smaller bugs — every
project was built, run and exercised end to end.

Adds scripts/publish.sh + a CI publish job that splits every folder into its own
repo at git.devai.io/templates/<folder>.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01128fhuZbgivaSJvtMf4s1G
2026-09-27 21:10:38 +02:00
.github/workflows Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
src Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
.dockerignore Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
.gitignore Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
components.json Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
compose.yaml Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
Dockerfile Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
index.html Add the devai.io boilerplate library: 42 runnable projects 2026-07-19 16:31:48 +02:00
LICENSE Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
nginx.conf Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
package-lock.json Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
package.json Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
README.md Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
tsconfig.json Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00
vite.config.ts Review and modernize all 42 projects to the updated standard 2026-09-27 21:10:38 +02:00

README.md

react-shadcn-starter

Vite 8 + React 19 + TypeScript + Tailwind CSS v4 with shadcn/ui set up the way the shadcn CLI does it today: the radix-nova style, OKLCH CSS-variable theming (dark by default), the @/ import alias, and three components you own as source — Button, Card, Input.

Run

Get it: git clone https://git.devai.io/templates/react-shadcn-starter.git

docker compose up --build

Open http://localhost:8080 — the production build, served by nginx.

Hot-reload dev server (Node 24):

npm ci
npm run dev        # http://localhost:5173

How it works

shadcn/ui is not a component package: components.json tells the CLI where components live, and each add copies real source into src/components/ui/.

npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu tabs badge

Edit the files freely — there is nothing to stay in sync with. Components are built on the radix-ui primitives and merge class names with cn.

Theming is CSS-first (Tailwind v4 — no tailwind.config.js): colors are OKLCH variables in src/index.css (:root for light, .dark for dark), mapped to utilities by the @theme inline block. Dark mode is class-based and index.html ships class="dark" on <html> — remove it (or toggle it at runtime) for light mode. To change the palette, generate a theme at ui.shadcn.com and paste its variables over the ones in src/index.css.

Layout

components.json        shadcn CLI config (style radix-nova, base color neutral)
vite.config.ts         React + Tailwind plugins; @/ alias read from tsconfig.json
src/index.css          Tailwind, shadcn base styles, theme variables
src/lib/utils.ts       cn() — class-name merging
src/components/ui/     button.tsx, card.tsx, input.tsx
src/App.tsx            demo screen using all three
nginx.conf             SPA fallback + long-lived caching for hashed /assets/

Deploy

Push to your own GitHub repo and the shipped workflow (.github/workflows/ci.yml) tests the compose stack, publishes the image to GHCR, and — once you set the DEPLOY_HOST / DEPLOY_USER variables and DEPLOY_KEY secret — deploys it to your server over ssh.

Part of devai.io — UI starters: react-tailwind-starter and react-shadcn-starter.