Kickresume UI

Command Palette

Search for a command to run...

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/card

Preview an item before installing:

npx shadcn@latest view @kickresume/button

Non-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/fonts into your app and change the @import in 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.