Prisma UI is a production-ready component library that ships accessible, animated, and fully typed React components. Every component is individually installable via the shadcn CLI, meaning you copy only what you need directly into your project — no runtime dependency, just your code.
- Accessible by default — Built on Radix UI primitives with keyboard navigation, ARIA attributes, and focus management included.
- Rich visual effects — Shimmer, rainbow, pulsating, border-beam, confetti, and more — expressive animations with zero extra configuration.
- Fully typed API — Every prop, variant, and effect is typed with TypeScript for better autocomplete and fewer bugs.
| Component | Description |
|---|---|
| Animated Background | Sliding highlight background for tabs, menus, and card grids. |
| Backlight | Animated backlight glow behind elements. |
| Badge | Compact status labels with size and variant support. |
| Border Beam | Animated glowing-beam border effect card. |
| Button | Multiple variants, sizes, loading state, and animated effects (pulsating, rainbow, shine, ringHover). |
| Confetti Wrapper | Triggers a canvas-confetti burst on any action. |
| Flip Card | 3D flip animation with configurable front and back faces. |
| Floating Label Input | Floating label input using a compound component pattern. |
| Infinite Slider | Smooth infinite-loop slider with horizontal and vertical support. |
| Magnetic | Magnetic cursor-attraction wrapper for interactive elements. |
| Progressive Blur | Layered gradient blur with backdrop-filter. |
| Rainbow Border | Cycling rainbow gradient border. |
| Scroll Progress | Scroll progress indicator bar. |
| Shine Border | Sweeping shine animation around a card border. |
| Border Glow Card | Cursor-proximity border glow card — a colorful gradient follows the pointer along the card edges. |
| Depth Media | Parallax depth image — splits a single image into multiple layers that shift at different rates inside a Tilt card. |
| Tilt Card | 3D perspective tilt wrapper for cards and elements. |
| Tracing Beam | SVG beam that traces scroll position alongside content. |
| Transition Panel | Animated step panel with direction-aware enter/exit transitions. |
Components require shadcn/ui to be initialized in your project:
npx shadcn@latest initThen add any component individually with:
npx shadcn@latest add https://prismaui.com/components/<component-name>.jsonExample — adding the Button:
npx shadcn@latest add https://prismaui.com/components/button.jsonThe CLI automatically downloads the source file into your components/ui/ directory and installs any required dependencies.
| Tool | Role |
|---|---|
| Next.js 16 | Framework |
| React 19 | UI library |
| Radix UI | Accessible primitives |
| Tailwind CSS v4 | Utility-first styling |
| shadcn/ui | Component distribution via CLI |
| Motion | Animations |
| TypeScript 5 | Type safety |
| Nextra | Documentation |
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build- Documentation & Demo: prisma-ui-xi.vercel.app
- Docs — Installation: prisma-ui-xi.vercel.app/docs
- Components reference: prisma-ui-xi.vercel.app/docs/references
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.