What Ships In The shadcn/ui Vite Starter
Clone, Install, Run
From an empty folder to a running Vite dev server, with your first shadcn/ui block already in.
$ git clone https://github.com/7ovr/shadcn-vite-starter
Cloning into 'shadcn-vite-starter'...
$ cd shadcn-vite-starter && pnpm install
Packages: +545
Done in 15.5s using pnpm v12.5.1
$ pnpm dlx shadcn@latest add @7ovr/hero-1
✔ Checking registry.
✔ Created 1 file:
- src/components/blocks/hero-1.tsx
ℹ Skipped 3 files (already in the starter)
$ pnpm dev
VITE v8.3.0 ready in 838 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
In The Repo
React, TypeScript, Vite, shadcn/ui and TanStack, installed and configured together.
- ReactUI Runtime
- TypeScriptStrict Mode
- ViteDev Server, Build
- Tailwind CSSTheme Tokens
- shadcn/uiComponents
- Base UIPrimitives
- TanStack RouterType-Safe Routes
- TanStack QueryServer State
- TanStack FormValidation
- TanStack TableSorting, Paging
Theme Tokens
Tailwind CSS v4 tokens drive every colour, in light and dark mode.
- Primary
- Success
- Warning
- Info
- Danger
Tested From Day One
Vitest and Testing Library cover routes, data, forms and theme, locally and in CI.
- Routes And Shell29 Tests
- Data And Tables22 Tests
- Forms14 Tests
- Theme And UI10 Tests
Guarded Commits
Lefthook lints and formats staged files before every commit.
- Staged
- Lint
- Format
- Commit
From Clone To Shipped Page
The starter is a standard shadcn/ui project, so all 540+ free and Pro 7Ovr blocks install straight into it with their full source.
Clone The Starter
One repo with TanStack routing, server state, forms, Vitest and git hooks already set up.
7ovr/shadcn-vite-starterCloned And InstalledAdd A Block
Install any free or Pro 7Ovr block with the shadcn CLI. The source lands in your repo, ready to edit.
pnpm dlx shadcn@latest add @7ovr/hero-1Make It Yours
Blocks read the theme tokens the starter already ships, so they match from the start.
Theme Tokens AppliedShip The Page
Run a Vite production build and deploy the output to Vercel, Netlify or any static host.
Production Build Readypnpm build
Frequently Asked Questions
What ships in the shadcn/ui Vite starter, what is free, and how it fits your stack.
pnpm create vite stops at the bundler. The starter adds the app-level plumbing on top: shadcn/ui components, typed routes, server state, forms, tests and git hooks, configured to work together.src/routes, TanStack Query for server state and caching, TanStack Form for validated forms and TanStack Table for sorting, filtering and pagination. All four share the app's TypeScript types.render prop instead of asChild, and the starter ships already set up for it.shadcn add installs any free or Pro block straight into src/components/blocks, source included.pnpm build outputs a Vite production build you can deploy to Vercel, Netlify, Cloudflare or your own server.Yours To Read, Yours To Change
Everything lives in the repository: components, routes, tokens and the tooling around them. Read it, change it, or open a pull request and improve it for everyone.