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

Pick any component and run the install command from its docs page. 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).

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.