A CMS Built on shadcn/ui
50 shadcn/ui components. 183 admin pages. Tailwind v4. Three switchable themes. The admin UI you'd actually want to fork.
Why shadcn/ui Changes What a CMS Admin Can Be
Traditional CMS admins ship a sealed UI you fight with. shadcn/ui flips that — components are copied into your codebase, not imported from a black box. That philosophy maps exactly to what developers want from a CMS: ownership, not dependency.
Your Admin. Your Code.
Every component lives in resources/js/components/ui/. Change a Button variant, tweak a DataTable, fork an entire page — no vendor approval, no plugin API to fight.
CSS-First Theming
Tailwind v4 + OKLCH color space + data-theme attribute. Swap the entire admin palette by editing a CSS variable. No PostCSS plugins, no theme config files.
Accessibility Built In
Radix UI primitives handle keyboard navigation, focus traps, ARIA attributes, and screen reader announcements. You get WCAG-grade admin UX without writing a line of accessibility code.
50 Components. Actually Used in Production.
Not a parts bin. Every component below is composed into real admin pages editors and developers use every day.
… plus 30 more components including Accordion, Alert, Calendar, Checkbox, Context Menu, OTP Input, Pagination, Popover, Progress, Radio Group, Scroll Area, Separator, Skeleton, Textarea, Toggle, Tooltip, and Context Menu.
One Attribute. Three Themes.
Set data-theme on the document root. Every shadcn component — every button, every card, every chart axis — re-themes instantly. No rebuilds.
Brand Blue
The default. Vivid blue for clean admin UIs.
Deep Purple
Bold accent for creative and editorial sites.
Unfold Soft
Signature Unfold soft purple (#938DE5).
All three themes are defined in a single CSS file using OKLCH. Adding a fourth theme is ~20 lines of CSS — no JavaScript changes, no component updates, no rebuild.
Fork the Admin. Seriously.
Need a Button variant your client demands? Open the file. Edit the CVA config. Save. Done.
In a traditional CMS, "customize the admin" means wrestling with theme APIs, hooks, filters, or a plugin marketplace. In Unfold, it means editing TypeScript.
- Every component is in your repo — no package to upgrade, no breaking changes
- Standard React + TypeScript — any React dev can extend it on day one
- TailwindCSS v4 class-based styling — design tokens in CSS, not runtime JS
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md font-medium",
{
variants: {
variant: {
primary: "bg-primary text-white hover:bg-primary/90",
destructive: "bg-red-600 text-white hover:bg-red-700",
outline: "border border-input bg-background",
ghost: "hover:bg-accent hover:text-accent-foreground",
// Add your own. It's just a file.
brand: "bg-[#938DE5] text-white shadow-lg",
},
size: {
sm: "h-8 px-3 text-xs",
md: "h-9 px-4 text-sm",
lg: "h-10 px-6 text-base",
},
},
}
)How Unfold Compares
Every major CMS has its own admin UI. Most were built before shadcn/ui existed. Here's the honest comparison.
| Platform | Built on shadcn/ui | Frontend Stack | Theme System | Fork-Friendly |
|---|---|---|---|---|
| Unfold CMS | ✓ 50 components | React 19 + TypeScript + Inertia 2 | Tailwind v4 + 3 themes | ✓ Full source access |
| WordPress | No (custom PHP UI) | PHP + jQuery + React (Gutenberg) | Child themes + hooks | Plugin API only |
| Strapi | No (custom design system) | React + styled-components | Design token overrides | Plugin system |
| Payload CMS | No (custom React UI) | Next.js + React + SCSS | Custom CSS variables | Component overrides |
| Directus | No (Vue 3 + custom UI) | Vue 3 + SCSS | App-level theming | Extensions API |
| Contentful | No (proprietary SaaS UI) | React + Forma 36 (custom DS) | Not customizable | App Framework only |
Comparison reflects public documentation and admin source code inspection as of April 2026. Unfold is the only CMS in the category built natively on shadcn/ui.
The Stack
Modern, maintained, boring in the best way. Every piece is a tool your team probably already knows.
See It Running in 30 Seconds
No signup. No credit card. Full admin access to a live demo with 50+ shadcn components in action.
Frequently Asked Questions
resources/js/components/ui/ as standard shadcn files. Run pnpm dlx shadcn@latest add [component] or drop in a custom file. They work like any other TypeScript component — no CMS-specific API.
resources/css/theme.css. Set data-theme="name" on the document root to switch. Zero JavaScript, zero rebuild.