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.
Physics-tuned springs & gestural physics
Install with npx shadcn@latest add
Copy, paste, customize and own the code
Server Component & App Router safe
Keyboard navigable & prefers-reduced-motion
MIT licensed for personal and commercial apps
Explore by Category
Organized into 8 focused kinetic categories. Copy single primitives or compose them seamlessly into production interfaces.
Apple device frames, Dynamic Island physics, macOS frosted windows, and terminal chrome.
Real interactive primitives.
Test live spring physics, cursor tracking, holographic tilting, and OTP inputs before copying. Zero fake mockups—every card renders the true production component.
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 watch the cursor ring smoothly transition into a dynamic pill badge.
Zero custom state needed—just attach data-cursor-label to any HTML element.
Gracefully degrades to native OS pointer when prefers-reduced-motion is active or on touch screens.
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 your preferred package manager with zero runtime lock-in.
You Own the Code
The source code drops right into your codebase. Tweak Tailwind styles, Framer Motion spring curves, or TypeScript props however you like.
Deterministic Sync Pipeline
Build custom components with companion .meta.ts manifests, then run our CLI sync generator to publish docs, SEO, and JSON manifests automatically.
Everything you need to know.
Have questions about how BoseUI fits into your React stack? Here are the answers.
BoseUI is an open-source, animation-first component library for modern React applications. It provides over 142 production-grade UI primitives built with Framer Motion, Tailwind CSS, and TypeScript, engineered to make interfaces feel tactile and alive with fluid spring mechanics.