Quick tips for using shadcn/ui

  • Avoid referring to colours directly. Create bg-success instead of bg-green-500.
  • Use CSS variables for design tokens. Create --color-success instead of #22c55e.
  • Use shadcn/ui's semantic classnames. Prefer bg-primary over bg-gray-500.
  • Don't override the 'ui' folder. Create wrapper components instead.