Theming & Styling

Learn how to customize colors, themes, and styling with Tailwind CSS and shadcn/ui.

The starter kit uses Tailwind CSS for styling and shadcn/ui for components. This gives you complete control over the visual appearance of your application.

Color System

The color system is based on CSS variables defined in app/globals.css:

app/globals.css

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... dark mode colors */
}

Tailwind Configuration

The starter kit uses Tailwind CSS v4, which uses CSS-based configuration instead of a config file. All configuration is done in app/globals.css:

app/globals.css

@import 'tailwindcss';
@import 'tw-animate-css';

/* Specify content paths */
@source "./**/*.{ts,tsx}";
@source "../components/**/*.{ts,tsx}";
@source "../lib/**/*.{ts,tsx}";
@source "../hooks/**/*.{ts,tsx}";

/* Custom dark mode variant */
@custom-variant dark (&:is(.dark *));

/* Define theme values */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
}

To add new content paths, add more @source directives. To customize theme values, add them to the @theme inline block.

shadcn/ui Components

The starter kit uses shadcn/ui, which is a set of Tailwind CSS-styled components based on Radix UI.

Installing Components

You can install additional components using the shadcn CLI:

Terminal

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog

Customizing Components

Components are located in components/ui/ and can be customized directly:

components/ui/button.tsx

import * as React from 'react';

import { cn } from '@/lib/utils';

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?:
    | 'default'
    | 'destructive'
    | 'outline'
    | 'secondary'
    | 'ghost'
    | 'link';
  size?: 'default' | 'sm' | 'lg' | 'icon';
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
    return (
      <button
        className={cn(
          'inline-flex items-center justify-center rounded-md text-sm font-medium',
          // Add your custom styles here
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = 'Button';

export { Button };

Dark Mode

Dark mode is automatically handled by the theme system. Users can toggle between light and dark themes:

components/theme-toggle.tsx

'use client';

import { useTheme } from 'next-themes';

import { Button } from '@/components/ui/button';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <Button
      variant="outline"
      size="icon"
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      {/* Toggle icon */}
    </Button>
  );
}

Global Styles

Customize global styles in app/globals.css:

app/globals.css

@import 'tailwindcss';

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

Custom Themes

You can create custom themes by modifying the CSS variables:

app/globals.css

[data-theme='custom'] {
  --primary: 142 76% 36%;
  --primary-foreground: 355 100% 97%;
  /* ... other custom colors */
}

Then apply the theme:

app/layout.tsx

<html
  lang="en"
  data-theme="custom"
>
  {/* ... */}
</html>