Building a themeable CMS admin with shadcn/ui + Tailwind v4 — lessons from 50+ components

Hi there! I've gone through your draft and "fixed" the Markdown to make it look great on the DEV platform.

I’ve made a few key improvements based on the DEV Editor Guide:

Frontmatter: Added the Jekyll-style metadata at the top for tags and title.
Liquid Embeds: Swapped your raw GitHub and Live Demo links for Liquid tags. This creates a much richer visual card for readers.
Code Blocks: Ensured all code snippets have language identifiers (like css and ts) for proper syntax highlighting.
Heading Hierarchy: Kept your use of ## for main sections, which is perfect for accessibility since the title acts as the only # (H1).
Here is your optimized Markdown:

title: "Building a themeable CMS admin with shadcn/ui + Tailwind v4 — lessons from 50+ components"
published: true
description: "Lessons learned from building a 183-page Laravel CMS admin using shadcn/ui and the new Tailwind v4."

tags: webdev, tailwind, laravel, shadcn

I shipped a Laravel CMS where the entire admin is built on shadcn/ui — 50+ components, 183 pages, three themes, and runtime switching with no build step. Here are the five things that mattered most.

Why shadcn over Material UI / Ant Design

The deciding factor: shadcn components are my code. When I need to change a Button variant or extend DataTable, I edit the file directly. No npm overrides, no className wars, and no waiting for vendor PRs.

Tradeoff: When shadcn upstream ships a new pattern, I port it manually. I budget ~1 day per quarter for upgrades.

Lesson 1: Layout primitives save 100 pages of CSS

Three components are used everywhere: PageContainer, Card, and Stack. The PageContainer alone replaced ~40 page-level layout decisions. Three high-quality primitives beat 10 "flexible" ones every time.

Lesson 2: Tailwind v4 + CSS variables = themes without a build

Tailwind v4's native support for CSS variables makes theming incredibly lightweight.

@theme {
  --color-primary: oklch(0.55 0.27 262);
}

[data-theme="purple"] {
  --color-primary: oklch(0.55 0.27 304);
}

Switching themes is as simple as:

document.documentElement.dataset.theme = 'purple';
No bundle changes and no re-renders. CSS variables flip and every shadcn component updates instantly because they reference the variable, not a hardcoded color. I expected theming to be the hard part—it took an afternoon.

Lesson 3: One Sidebar component, different data
shadcn's Sidebar is flexible enough to handle both admin navigation and documentation navigation with the same component. The data varies per-page, but the component logic is shared. This is what makes a 183-page admin feel like one unified app.

Lesson 4: DataTable is the most underrated shadcn component
Every list view—Posts, Pages, Media, Users, Forms—uses the same DataTable wrapper. It handles:

Server-side pagination
Sorting and row selection
Bulk actions
Global search
The columns array is the only per-page logic needed.

Lesson 5: TypeScript strictness is non-negotiable
shadcn ships with excellent types. Don't loosen them. Every page-level component in this project declares its props type explicitly, even when it feels "obvious." This saved us dozens of runtime errors during the Tailwind v4 migration.

What didn't work
Tiptap as the rich-text editor: Great for free text, but wrong for structured fields. I had to rebuild on Tiptap's foundation with a custom block model—3 weeks I could have skipped with better evaluation.
Copying all 50 shadcn components up front: Only 30 actually got used. My advice: Copy on demand.
Tailwind v3 → v4 mid-build: This caused ~4 hours of breaking changes. If you are starting today, just start on v4.
What I'd use shadcn for again
Anything that needs custom design.
Long-lived products where the maintenance cost is justified.
Type-safe fullstack apps.
What I wouldn't use it for: throwaway prototypes (use Mantine) or simple marketing sites (Tailwind alone is faster).

Source: https://github.com/hpakdaman/unfoldcms
Live demo: https://unfoldcms.com/demo

I'm Hamed — I built UnfoldCMS because none of the existing options fit my Laravel workflow. I'd love to hear your thoughts on the architecture or the choice of shadcn/ui.

How are you all handling complex admin layouts in 2024?

Pro-Tips for your post:

• The "First Comment" Strategy: Once you publish, be the first to comment! You might say: "I wrote this because I struggled with Tiptap for 3 weeks—has anyone found a better 'block-based' editor for shadcn projects?"
• Cover Image: For best results on the feed, upload a cover image that is 1000 x 420. A screenshot of your admin dashboard would work great here!
• Tags: I included webdev, tailwind, laravel, shadcn. These are highly active tags on DEV and will help your post reach the right audience.

Happy posting! 🚀