Installation
Add Columbus components to your app with the shadcn CLI.
Columbus is distributed as a shadcn registry. Components are copied into your project as source code, so you own them and can change anything.
Set up shadcn
Your project needs Tailwind CSS v4 and a components.json. If you don't
have one yet, run:
pnpm dlx shadcn@latest initAdd the Columbus registry
Add the @columbus namespace to your components.json:
{
"registries": {
"@columbus": "http://localhost:3000/r/{name}.json"
}
}Add components
pnpm dlx shadcn@latest add @columbus/buttonThe CLI writes components/ui/button.tsx (and its dependencies) into your
project and installs the npm packages it needs.
import { Button } from "@/components/ui/button";
export default function Page() {
return <Button>Get started</Button>;
}Theme
Columbus uses the same token names as shadcn/ui (--primary, --border,
--radius, …), so components pick up your existing theme. To use the Columbus
colors instead, add the theme. It writes the light and dark variables into
your global CSS:
pnpm dlx shadcn@latest add @columbus/themeDark mode
Tokens switch when a dark class is on an ancestor, usually <html>. Tools
like next-themes with attribute="class" work out of the box.
Updating components
Because the code lives in your project, updates are opt-in. To pull the latest version of a component, overwrite it and review the diff in git:
pnpm dlx shadcn@latest add @columbus/button --overwrite