SkillsU components registry
Every shadcn component on Base UI, styled by the SkillsU design system (Design.md v1.72) through CSS variables. A project installs the components it needs with the shadcn CLI and changes the look in its own brand.css, without editing a component.
1. Start a project
Clear the starter styles first, or they override the theme. Init sets up components.json with this registry, the theme, the configured cn, Base UI and Hugeicons.
npx create-next-app@latest my-app # app/globals.css: keep only @import "tailwindcss"; npx shadcn@latest init https://components-registry-preview.pages.dev/r/su-base.json
2. Add components
Components are copied into your project. Dependencies on other components come along.
npx shadcn@latest add @su/button @su/dialog
3. Change the look in brand.css
Your own file, imported after the theme and never overwritten. Override a primitive, a component token or, as a last resort, a [data-slot] rule.
:root {
--primary-base: #0f766e;
--button-radius-md: 999px;
}4. Take an update
Nothing tracks versions: --diff shows what changed, --overwrite replaces the files. A local edit to a component is lost, so keep changes in brand.css.
npx shadcn@latest add @su/su-base @su/button --diff npx shadcn@latest add @su/su-base @su/button --overwrite
Three levels of styling
The registry owns the components, the theme and lib/utils.ts and overwrites them on update. The project owns brand.css.
Level 1Global tokensPrimitives and Design.md semantic tokens, with a Dark remap. A brand colour changes here.
Level 2Component tokensSizes and radii a component reads, such as --button-radius-md. Never colours.
Level 3Escape hatchA rule on the component's data-slot in brand.css, for what tokens do not cover.