shadcn/ui is a set of accessible React components you copy into your project and own outright. This workspace has it wired up with Vite, React, TypeScript and Tailwind, so you can start composing UI in a live preview the moment it boots.
The project ships with shadcn configured and a few components, like button, card and badge, already in src/components/ui. Add more with npx shadcn@latest add.
Run npm run dev and Vite serves your app on port 3000 with hot reload. Tailwind runs through its Vite plugin, so utility classes work out of the box.
The full cloud editor with an integrated terminal, extensions and a .vscode folder already configured for the workspace.
Clone, commit and push from the terminal, or connect a GitHub repo whenever you're ready.
shadcn/ui is a collection of React components built on Radix UI primitives and styled with Tailwind CSS. It's different from a typical component library: instead of installing a package, you copy each component's source into your project, so you own the code and can change anything. The components are accessible by default and styled with a clean look you can theme.
This workspace gives you that setup ready to go. It's a Vite project with React and TypeScript, Tailwind wired in through its Vite plugin, lucide-react for icons, and the shadcn CLI configured so you can pull in more components on demand.
It's a Vite project using React with TypeScript. The entry point is src/main.tsx, which mounts App.tsx, and a starter page shows a few shadcn components in action. The button, card and badge components live in src/components/ui, a cn helper sits in src/lib/utils.ts, and an @ alias points at the src folder.
A components.json file configures shadcn so the CLI knows where to place new components and which style and icon set to use. Tailwind and its theme tokens are set up in src/index.css.
Run npm run dev to start Vite on port 3000, and Studio opens your app in a built-in browser preview that hot-reloads as you edit. To add more components, run npx shadcn@latest add followed by the component name, for example button or dialog, and the source drops into src/components/ui ready to use. npm run build type-checks and bundles the app for production.
Dashboards, admin panels, marketing pages, SaaS front ends or any React app where you want polished, accessible components that you fully control and can restyle to match your brand.
You don't install components as a black-box package. The shadcn CLI copies each component's source into your project, so the code lives in src/components/ui and you can edit it however you like. This workspace already has that wiring set up.
Run npx shadcn@latest add followed by the component name in the terminal, for example npx shadcn@latest add dialog. The component's source is added under src/components/ui, ready to import.
Yes. The project is React with TypeScript, and the included components and the cn utility are typed. The build step runs the TypeScript compiler before bundling.
Port 3000. Running npm run dev starts Vite there, and Studio opens it in the built-in browser preview automatically.
Yes. npm is the default, but you can use pnpm, yarn or bun instead. Install dependencies with your tool of choice and run the matching dev command.
Yes. The shadcn workspace runs on the free tier with no credit card required, so you can launch it and start building right away.
