Installation

• shadcn/ui on Radix, Tailwind 4 and CSS variables. The components and blocks use Radix's asChild; shadcn's Base UI components (the CLI's default base) have another API.
• The theme, installed first and by its address. Added that way, the CLI replaces the project's color variables, font and radius scale. Anything added without it finds no --brand, --success or elevations.
• React 19 and a framework shadcn supports. The examples here use Next.js; Vite, React Router and the rest work the same way.

In a new or existing project:

Keep CSS variables on (the default). Your components.json should say "cssVariables": true and a radix-* style.

This adds pixi-base first (what Tailwind needs to read a theme: the brand, success, warning and sidebar utilities, the display font, the radius scale, shadows mapped to two elevations, and a dark variant that .light turns back off), then writes the theme's colors for light and dark, radius, fonts and elevations into your CSS, and installs its font packages.

Add any free item by its address. The CLI pulls in what it depends on:

shadcn's own components are never republished: our items depend on them by name (button, alert-dialog), so the CLI adds them from shadcn if you don't have them. The full list is on Components, and the index is at /r/registry.json.

Name the registry once in components.json, then add items by name:

{
  "registries": {
    "@pixikit": "https://pixikit.com/r/{name}.json"
  }
}

Items never write into components/ui or the top of components and lib, where your own files live.

Imports are written as @/components/ui/…, @/components/pixikit/… and @/lib/utils; the CLI rewrites them to your project's aliases. Icons come from lucide-react.

The theme sets its dark values on .dark. Put the class on <html> yourself, or let next-themes do it with attribute="class". A .light class inside a dark page turns dark styles back off for that part, which is how a preview shows both modes at once.

Or use the free theme-switcher, which brings theme-provider: wrap the app in its ThemeProvider, put ThemeScript in <head> so the page never flashes the wrong mode, and place ModeToggle or ThemeSwitcher where people can reach it.

The theme is design tokens written as CSS variables with shadcn's names (--background, --primary, --sidebar-*, --chart-*, --radius) plus a few of ours (--brand, --success, --warning, --elevation-card, --elevation-popover). Change them in your CSS, in :root for light and .dark for dark, and every component and block follows. Keep text on fills at WCAG AA contrast.

The free theme-customizer turns one brand color into fills, an accessible text shade, focus rings and the sidebar tint, for people who should pick their own.

Application and marketing blocks install the same way and land in components/blocks and components/marketing. They are props-driven: content, links and labels are props, never written inside. Blocks that navigate take link and pathname: pass Link from next/link and usePathname().

Every block is in PixiKit Pro, a one-time $149 for a private repository with all of them, or in MakeV1 with a full-stack backend. You can also browse the previews.