shadcn/ui Theme Customization Guide

shadcn/ui is a component library built on top of Radix UI and Tailwind CSS. Here's how we can customize the theme.

Color System

We use the following colors as our primary design language:

const colors = {
  primary: {
    DEFAULT: "#2563eb",
    foreground: "#ffffff",
  },
  secondary: {
    DEFAULT: "#6b7280",
    foreground: "#ffffff",
  },
  // ... other colors
};

Component Styles

Button

Our button component uses the following custom styles:

const Button = {
  baseStyle: {
    fontWeight: "medium",
    borderRadius: "md",
  },
  variants: {
    solid: {
      bg: "primary",
      color: "white",
    },
    outline: {
      border: "1px solid",
      borderColor: "primary",
    },
  },
};

Usage

1. Install necessary dependencies in your project
2. Configure tailwind.config.js
3. Create global style file
4. Apply the theme

For more details, please refer to our design specification documentation.