Quick tips for using shadcn/ui

Updated on 1/27/2026

This is a quick post.

Quick posts are... well quickly drafted.

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.

bash

# This is the one I use:# y: skip confirmation prompt# o: overwrite existing files# a: add all available componentsalias sh2='bunx --bun shadcn@latest add -yoa'