Installation

You need a project that already has shadcn/ui initialised. If you don't, run npx shadcn@latest init first and pick neutral as the base color so our tokens line up.

1. Add the registry

Open your project's components.json and add Campus One under registries:

{
	"$schema": "https://ui.shadcn.com/schema.json",
	"style": "new-york",
	"tailwind": {
		"baseColor": "neutral",
		"cssVariables": true
	},
	"aliases": {
		"components": "@/components",
		"ui": "@/components/ui",
		"lib": "@/lib",
		"hooks": "@/hooks",
		"utils": "@/lib/utils"
	},
	"registries": {
		"@campus-one": "https://docs.campusone.com.ng/r/{name}.json"
	}
}

2. Install items

Once the registry is registered, you can refer to items with the @campus-one/ prefix:

npx shadcn@latest add @campus-one/theme
npx shadcn@latest add @campus-one/button
npx shadcn@latest add @campus-one/card @campus-one/dialog @campus-one/dropdown-menu

Or you can skip step 1 and reference the full URL directly:

npx shadcn@latest add https://docs.campusone.com.ng/r/button.json

3. Install the theme first

Most components depend on CSS variables from the theme. Install it once before adding components:

npx shadcn@latest add @campus-one/theme

This drops our globals.css into your project (defaulting to app/globals.css) and pulls in the cn() helper. After that, components will style themselves correctly out of the box.

Verifying

After installing a component, you can render it as you would any shadcn component:

import { Button } from "@/components/ui/button";

export default function Demo() {
	return <Button variant="default">Sign in</Button>;
}

The component file lives in your repo — edit it freely; you're not locked into our version.

Updating

shadcn doesn't auto-update installed components. Re-run npx shadcn@latest add @campus-one/<name> to pull the latest version (it'll ask before overwriting).