Carles Andres' avatarHomeBlogReference
Back to blog

Quick tips for using shadcn/ui

Updated on 1/27/2026
This is a draft post.
Expect this to be incomplete, inaccurate or both.
  • Use CSS variables for design tokens. It makes it easier to reskin your site. Create --color-success instead of #22c55e.
  • Avoid referring to colours directly. Use semantic names. For example, use bg-success instead of bg-green-500. For the same reason as above, if you ever decide that green is no longer the best colour to convey "success", you can change it in one place. Plus, semantic names are easier to remember.
  • Prefer shadcn/ui's semantic class names, i.e. use bg-primary instead of bg-gray-900. shadcn/ui embeds a design philosophy. Embrace it and your websites will look more consistent.
  • Use a monorepo structure and place components in a shared library. This will allow you to create different rules (such as linting rules) for shadcn components. It will keep your main app structure cleaner.
  • Avoid updating the libraries that shadcn/ui depends on manually. This is prone to errors since not transitive dependencies can get out of sync with shadcn/ui components. Instead dedicate an alias to updating shadcn/ui components quickly.