Design System (Overview)
Last Updated: 2026-06-28
The platform standardizes on a single UI stack: shadcn/ui (Radix + CVA +
Tailwind v4), promoted into libs/ui (@rocket-club/ui) as the shared
component library and source of design tokens.
What libs/ui provides
- Components (
@rocket-club/ui/components/*) — the shadcn primitives (button, card, dialog, table, select, dropdown-menu, badge, …). - Tokens (
@rocket-club/ui/styles/theme.css) — the semantic colour set (background,foreground,primary,muted,accent,destructive,success,border, …), a chart palette and a radius scale, with light and dark values. Apps import this sheet so a brand or dark-mode change is made once. cn()— the Tailwind class-merge helper.
How apps consume it
Apps reference components by path (@rocket-club/ui/components/button) and
import the shared token sheet in their global stylesheet. The web app is the
reference implementation; the admin and docs apps are being migrated onto the
shared library, retiring the older Catalyst and template component sets.