Free And Open Source
The shadcn/ui and Vite starter that skips the setup. Start on the product.
A free React frontend template with shadcn/ui on Base UI, TanStack Router, Query, Form and Table, strict TypeScript, Vitest and git hooks, all working from the first pnpm dev. Clone it, then install 7Ovr blocks straight into it.
git clone https://github.com/7ovr/shadcn-vite-starter
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
Your Agent Already Knows The Rules
Claude Code, Codex and Cursor read the same conventions, so a page they add is typed, tested and on the design system like the rest.
One Rulebook
CLAUDE.mdholds every convention, from data fetching to the design-system variants, andAGENTS.mdpoints every other agent to it.Skills Included
Four vendored skills, from
shadcntovercel-react-best-practices, ship for Claude Code and every other agent.Checks That Catch Drift
Lint, format, types, tests and the build run on every push, and
@shadcn/lintfails any style that leaves the design system.
Building The Landing Page Behind Your App?
Give it a fast, findable home with the 7Ovr Landing Starter: a free Next.js starter on the same shadcn/ui and Base UI stack, with static pages, complete SEO, preset theming and a full test suite already wired.
- One preset styles the landing page and its app alike
- Static pages, metadata and structured data tested for SEO
- Free, MIT licensed and ready to deploy on Vercel
Questions & Answers
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.src/index.css, with a light and a dark set. Change them there and every component and 7Ovr block follows.src/components/blocks, source included: free ones with pnpm dlx shadcn@latest add @7ovr/<name>, Pro ones from @7ovr-pro with a license key.CLAUDE.md holds every convention and AGENTS.md points to it, so Claude Code, Codex and Cursor keep new pages and features on the same patterns.index.html, which the client-side router needs. 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.