React
Shadcnblocks is a React UI library. Every block, component, page and template is a React component built on shadcn/ui and Tailwind CSS, and works with Next.js, Vite, Astro, Remix and any other React framework.
Shadcnblocks is a React UI library. Every block, component, example, page and template is a React component written in TypeScript, styled with Tailwind CSS, and built on the shadcn/ui wrappers. There is no framework-specific runtime: the code you install is plain React that you own.
Frameworks
Blocks are framework-agnostic React. They are developed and previewed with React 19 and tested in:
| Framework | Notes |
|---|---|
| Next.js (App Router and Pages Router) | The most common setup. Blocks that use browser APIs or hooks include the "use client" directive where needed. |
| Vite + React | Works with npx shadcn@latest create or an existing Vite project. |
| Astro | Use the React integration; blocks render as islands with client:* directives. shadcnblocks.com itself is an Astro site rendering these blocks. |
| Remix / React Router | Standard React components; no server-only dependencies. |
| TanStack Start | Same as above. |
If a block needs a framework-specific piece (an <Image> or <Link> component, for example), it uses the plain <img> or <a> element instead so it drops into any framework. Swap in your framework’s component if you want the extra behaviour.
Primitive libraries
shadcn/ui components are thin Tailwind wrappers around a headless primitive library. Shadcnblocks publishes every block for the three React primitive libraries shadcn/ui supports:
- Radix UI, what shadcn/ui was built on and our recommendation
- Base UI, from the MUI team and now the shadcn/ui default for new projects
- React Aria, Adobe’s accessibility-first components (beta)
The style in your components.json picks the library; the block id is the same for all three. See the Overview for how the registry resolves it.
Dependencies
A typical block depends on:
reactandreact-dom(18.3 or 19)tailwindcssv4 with the shadcn/ui CSS variables- the shadcn/ui wrappers it uses, installed by the CLI into
components/ui lucide-reactfor icons- occasionally
motion(for animated blocks),recharts(charts) or a third-party component from Kibo UI, Magic UI or DiceUI
The CLI installs all of these when you add a block. Nothing is bundled or minified; every file lands in your project as readable source.
Not using React?
Vue versions of the blocks live on the sister site shadcnblocksvue.com, built on shadcn-vue. See the Vue section for what is available.