การปรับแต่ง

props ด้านข้อความและ class มีอธิบายในหน้าของแต่ละคอมโพเนนต์แล้ว (locale, texts และ slot *ClassName) หน้านี้อธิบาย design tokens และกรณีที่ควรแก้ซอร์สเอง

Design tokensCopy Anchor Link

init เพิ่ม token block ลง global stylesheet คอมโพเนนต์อ่าน CSS custom properties เหล่านี้: --background, --foreground, --popover, --primary, --muted, --accent, --destructive, --border, --input, --ring และ --radius

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
  /* … */
}

.dark ใน block เดียวกันจะ override สีเหล่านี้ แก้ค่าเพื่อเปลี่ยนธีมของทุกคอมโพเนนต์ โปรเจกต์ shadcn/ui มี tokens เหล่านี้อยู่แล้ว

Tailwind v4Copy Anchor Link

block นี้มี @theme inline ที่ map properties ไปเป็น classes อย่าง bg-background, border-input และ ring-ring ให้แล้ว ไม่ต้องทำอะไรเพิ่ม

Tailwind v3Copy Anchor Link

Tailwind v3 ไม่มี @theme inline ดังนั้น init จะพิมพ์ snippet นี้ให้เพิ่มเองใต้ theme.extend ใน tailwind.config.{js,ts} ถ้ายังไม่เพิ่ม token classes จะไม่มี style:

colors: {
  background: 'hsl(var(--background))',
  foreground: 'hsl(var(--foreground))',
  popover: { DEFAULT: 'hsl(var(--popover))', foreground: 'hsl(var(--popover-foreground))' },
  primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' },
  muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' },
  accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))' },
  destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))' },
  border: 'hsl(var(--border))',
  input: 'hsl(var(--input))',
  ring: 'hsl(var(--ring))',
},
borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)' },

แก้ซอร์สCopy Anchor Link

ถ้าต้องการเปลี่ยน layout, markup หรือพฤติกรรม ให้แก้ไฟล์คอมโพเนนต์ที่ add สร้างไว้โดยตรง คง import ของ utils และ hooks ไว้ การรัน add ซ้ำจะไม่เขียนทับสิ่งที่แก้ เว้นแต่ส่ง --overwrite