shadcn-impl-theming-custom

What problem does it solve?

It prevents broken or flickering dark-mode theming in shadcn ui by giving an end-to-end, framework-specific workflow for updating CSS tokens, wiring the ThemeProvider, and applying safe per-component overrides.

Core Features & Use Cases

• Theme-builder-driven token pasting: Build a theme from ui.shadcn.com and correctly paste only the :root and .dark blocks into the right globals.css target for your stack (Next.js or Vite) without breaking the @theme inline mapping.
• Framework-accurate dark mode wiring: Mount the correct ThemeProvider configuration (next-themes for Next.js; custom Context for Vite) with the required props to ensure Tailwind dark variants work.
• Deterministic styling overrides: Override brand primary and single component instances using the stable v4 data-slot hooks instead of fragile class hacks.

Quick Start

Ask the AI: “I’m using shadcn ui evergreen-2026 on Next.js—generate the exact steps to customize my brand primary color and enable the light/dark/system toggle without theme flash, using ui.shadcn.com theme builder output and correct ThemeProvider wiring.”