Installation
Point your project at the registry, then install the theme before any components. No token or auth setup — the registry is public and read-only.
1. Configure the registry
Add the @kickresume registry to your project's components.json:
{
"registries": {
"@kickresume": {
"url": "https://kickresume-ui-registry.vercel.app/r/{name}.json"
}
}
}2. Install the theme first, then components
# Design tokens (colors, fonts, radii) — do this once, first.
npx shadcn@latest add @kickresume/theme
# Then any components. Their dependencies (incl. the theme) are pulled in automatically.
npx shadcn@latest add @kickresume/button
npx shadcn@latest add @kickresume/cardPreview an item before installing:
npx shadcn@latest view @kickresume/buttonNon-Next.js apps (Vite, …)
Components are framework-clean (plain React + Base UI — no next/* imports);
verified to build in a plain Vite app. Prerequisites are the standard
shadcn-on-Vite setup: Tailwind v4, a @/* path alias, and
npx shadcn@latest init to generate components.json — then add the registry
as above. Files root under src/ (src/components/ui/, CSS in
src/index.css).
The theme's companion fonts file installs at the project root
(kickresume-fonts.css), imported as @import "../kickresume-fonts.css" from
your Tailwind CSS file — one directory up from app/globals.css (Next.js) and
src/index.css (Vite) alike, so no manual moves are needed.
Notes
- Fonts (Graphik, Henk-Work) are hosted by this app;
@kickresume/theme@imports them by absolute URL, so they work out of the box. To self-host, copy/public/fontsinto your app and change the@importin the theme. - Components are Base UI–based (
@base-ui/react) and pull the npm deps they need (lucide-react,class-variance-authority,recharts,cmdk,sonner, …) — the CLI installs them for you.