Modern React components built to copy and ship.
A clean collection of animated UI components built with Framer Motion, Tailwind CSS, and TypeScript. Install any component in one command and customize the code however you want.
Smooth Animations
Built with Framer Motion so every hover, click, and transition feels smooth and natural out of the box.
Easy to Customize
Written in clean TypeScript and styled with Tailwind CSS. Edit colors, sizes, or styles right in your code.
One-Command Setup
Run a single npx shadcn command to copy the component directly into your project—no extra packages to manage.
Accessible & Responsive
Supports keyboard navigation, screen readers, reduced motion, and both Light and Dark mode by default.
Try the components right here.
Interact with each component below before adding it to your project. Click “View Code” to inspect the full TypeScript source and props.
Soft cursor spotlight & border glow
Move your cursor over the card to see the spotlight follow your mouse with an optional 3D tilt effect.
Hover this card to see the cursor ring turn into a pill label.
Just add data-cursor-label to any element.
Automatically switches back to normal cursor if reduced motion is on.
Simple to install. Easy to edit.
Every component is built with Framer Motion, Tailwind CSS, and TypeScript—no complex setup or extra dependencies required.
Install in One Command
Add any component directly into your React or Next.js project using the shadcn CLI, or simply copy and paste the code.
You Own the Code
Components are saved right inside your project folder. Tweak the Tailwind classes, TypeScript props, or Framer Motion animations anytime.
Add New Components Easily
Building a new component? Create <Name>.tsx + <Name>.meta.ts and run npm run sync to update the docs and CLI registry automatically.