Introduction
The Country Club UI Kit is a dashboard component library built on Base UI primitives and Tailwind CSS v4, styled with the Country Club design system.
What is the Country Club UI Kit?
It's the component library — @countryclub/ui-react — extracted from the Central Dashboard. It ships 96 documented components, everything from buttons and form fields to sidebars, charts, command palettes and toasts. Every component is accessible, themable through CSS variables, and works in light and dark mode out of the box.
Unlike a copy-paste starter, the kit is a real package you install once and import from. The design system lives in a single stylesheet, so the whole kit stays visually consistent and updates together — there's no per-component code to keep in sync.
Tech stack
The stack is deliberately small, so you can focus on building. The kit is powered by:
Accessibility
Accessibility isn't optional — it's the baseline. Every interactive component is built on Base UI, a library of unstyled primitives that handle keyboard navigation, focus management and ARIA semantics for you. You get accessible behaviour by default, then style it with the Country Club tokens.
Design tokens first
Colors, radii and typography come from CSS variables defined in a single stylesheet. Change a token once and every component follows — including dark mode, which is driven entirely by the same variables. Components expose small composable parts (Trigger, Popup, Header, Panel…) instead of monolithic prop bags, so you assemble exactly the UI you need.
Next steps
Head to the installation guide to add the kit to your app, then browse the components to start building. The demo dashboards in the sidebar show the kit assembled into full pages.