Shadcn Components

Production-ready shadcn/ui components for React and Tailwind — accessible, themeable, and yours to keep. Copy-paste or install in one command. Free & premium.

Free & premium shadcn components, built on shadcn/ui

DesignRevision is a library of shadcn components for React — built on shadcn/ui and Tailwind CSS v4, then extended with patterns the official registry doesn't ship yet. Every component is copy-paste first: the code lands directly in your project, with no wrapper library and no runtime dependency, so you own and control every line.

Each entry covers the variants you actually need — sizes, states, and visual styles — alongside a ready-to-paste snippet and a typed props reference. Free components are available without an account; premium components unlock with a single licence that covers every future addition.

Accessible and themeable by default

Accessibility isn't an afterthought here. Every component ships with full keyboard navigation, visible focus rings, and the ARIA roles screen readers expect — the same standard the Button and every other primitive is held to. Because they're styled with your CSS variable tokens (--primary, --background, and friends), they follow your theme automatically, including dark mode and any palette from a shadcn-compatible theme generator.

Add a component in two ways

You can drop any shadcn component into your project two ways:

  • Copy and paste — grab the code from the component page and paste it in. No npm install, no CLI setup.
  • shadcn CLI / registry — for supported items, run npx shadcn@latest add designrevision/button to pull the component straight from our registry into your components/ directory.

Either way you end up with plain React and Tailwind you can read, edit, and extend.

Works with your existing shadcn/ui project

These components follow the same conventions as shadcn/ui — the same CSS variables, the same Tailwind config, the same file structure — so they slot in alongside your existing components without conflicts. Starting fresh? They make a complete shadcn UI component library. Already using shadcn/ui? Treat DesignRevision as an extension of it.

Browse the full catalogue above, or explore blocks, effects, and templates for larger, composed sections.

Frequently asked questions

Shadcn components are reusable UI components built on shadcn/ui — an open, copy-paste approach to React and Tailwind CSS where the component code lives in your project instead of a node_modules package. DesignRevision extends that model with extra variants, sizes, and components the official library doesn't cover yet, available free or premium.
Yes. Every component marked Free is available without an account and carries no usage restrictions — personal or commercial. Premium components require a single one-time licence.
Two ways. Copy the code from any component page and paste it into your project — no npm install or CLI setup needed. Or, for supported items, run `npx shadcn@latest add designrevision/button` to pull it from our registry straight into your components/ directory.
Yes. DesignRevision components follow the same conventions as shadcn/ui — same CSS variables, same Tailwind config, same file structure — so they slot in alongside your existing components without conflicts.
Yes. Components are built for Tailwind CSS v4 and styled entirely with CSS variable tokens, so they adopt your theme automatically — including dark mode and any palette from a shadcn-compatible theme generator — with zero overrides.
Accessibility is built in. Every component ships with full keyboard navigation, visible focus rings, and the ARIA roles and labels screen readers rely on, following the same standards as the underlying Radix primitives.
A single Premium licence gives you access to all current and future premium components, for unlimited projects including commercial use. There is no per-seat or per-project fee.
Absolutely. Once the code is in your project it's yours. Rename props, change styles, extend behaviour — the components are a starting point, not a black box.
DesignRevision