Installation

Prisma UI components are installed individually via the shadcn CLI . Each component is a self-contained registry JSON — the CLI handles downloading, placing files, and installing dependencies automatically.

Prerequisites

Your project needs shadcn/ui initialized. If you have not done so yet:

npx shadcn@latest init

Adding a component

Install any component from its registry URL. For example, to add the Button:

npx shadcn@latest add https://prismaui.com/components/button.json

The CLI will:

1. Download the component source files into your components/ui directory.
2. Install any npm dependencies (e.g. class-variance-authority).
3. Resolve registry dependencies (e.g. card components required by card effects).

Automatic theme detection (optional)

Direct URLs always serve the radix-vega variant. The style-aware components (Button, Badge, and Floating Label Input) also ship variants for every shadcn style — to have the CLI pick the one matching your theme automatically, add the @prisma namespace to the registries block of your project’s components.json once:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "radix-vega",
  "registries": {
    "@prisma": "https://prismaui.com/components/{style}/{name}.json"
  }
}

Then install by name:

npx shadcn@latest add @prisma/button

The {style} placeholder is replaced by the CLI with the style field already present in your components.json, so every component arrives sized and shaped for your theme. See Styles & Themes for the supported styles and the details.

You can also pin a style manually without the namespace by including the style folder in the direct URL: https://prismaui.com/components/radix-nova/button.json.

Shared styles

Several components (Button, Badge, Flip Card, Rainbow Border, Shine Border) rely on a shared style.css file that ships alongside them. It defines keyframe animations and [data-variant] CSS custom properties used by effects like shine, pulsating, and rainbow.

The CLI installs this file automatically at components/ui/style.css.

Custom variant colors

Prisma UI uses data-variant attributes to drive per-variant animation colors. The default style.css maps each variant to a CSS custom property:

[data-variant='default'] {
  --pulse-color: var(--primary);
}
[data-variant='destructive'] {
  --pulse-color: var(--destructive);
}
[data-variant='secondary'] {
  --pulse-color: var(--secondary-foreground);
}
[data-variant='outline'] {
  --pulse-color: var(--ring);
}
[data-variant='ghost'] {
  --pulse-color: var(--ring);
}

You can extend this pattern for your own custom variants by adding a new [data-variant='...'] selector in the same file:

[data-variant='success'] {
  --pulse-color: var(--success);
}

Then use it with any component that supports the variant prop and effects.