playbooks

home / skills / andrelandgraf / fullstackrecipes / shadcn-ui-setup

shadcn-ui-setup skill

/.agents/skills/shadcn-ui-setup

This skill helps you set up Shadcn UI with dark mode support using next-themes, including theme provider and CSS variables configuration.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill shadcn-ui-setup

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
504 B
---
name: shadcn-ui-setup
description: Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.
---

# Shadcn UI & Theming

To set up Shadcn UI & Theming, refer to the fullstackrecipes MCP server resource:

**Resource URI:** `recipe://fullstackrecipes.com/shadcn-ui-setup`

If the MCP server is not configured, fetch the recipe directly:

```bash
curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup
```

Overview

This skill adds Shadcn UI components and configures app-level theming with dark mode support using next-themes. It wires a ThemeProvider, sets up CSS variables for tokens, and provides a clear integration path for TypeScript Next.js projects. The goal is production-ready UI patterns that work with server and client rendering.

How this skill works

The skill installs and configures Shadcn UI components, then injects a ThemeProvider wrapper to manage theme state via next-themes. It also generates or updates a CSS variables file and applies theme-aware styles so components automatically respond to light and dark modes. Integration points include app layout, global styles, and a simple toggle component for switching themes.

When to use it

  • You want consistent light/dark theming across a Next.js app using Shadcn UI components.
  • You need a central ThemeProvider and CSS variable strategy for design tokens.
  • You are building a TypeScript Next.js app and require server/client friendly theme handling.
  • You want production-ready patterns and step-by-step guidance for UI theming.

Best practices

  • Wrap your root layout with the ThemeProvider so theme state is available to all components.
  • Keep design tokens in CSS variables and reference them in component styles for easy theme swaps.
  • Prefer a small client-only theme toggle component that updates next-themes to avoid hydration issues.
  • Test both SSR and client navigation flows to ensure theme preference persists and renders correctly.

Example use cases

  • Add dark mode support to an existing Shadcn UI-based dashboard with minimal changes.
  • Bootstrap a new Next.js TypeScript app with theme-aware components and a theme toggle.
  • Standardize theming across multiple pages and shared UI primitives in a monorepo.
  • Provide designers and engineers a shared token file (CSS variables) for quick theme iterations.

FAQ

Does this require next-themes?

Yes. next-themes manages theme state and persistence; the skill configures it with a ThemeProvider wrapper.

Will themes work with server-side rendering?

The setup is SSR-aware. Use the ThemeProvider at the root and a client-only toggle to avoid hydration mismatches.