shadcn/ui 2026 — 테마와 애니메이션 커스터마이징

테마 커스터마이징

// globals.css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}

애니메이션 추가

// components/ui/button.tsx에 직접 추가
const buttonVariants = cva(
  "transition-all duration-200 active:scale-95",
  {
    variants: {
      variant: {
        default: "bg-primary hover:bg-primary/90 shadow-sm hover:shadow",
      },
    },
  }
);