127 Components
Documentation
BoseUI is an open-source React component library built with Framer Motion, Tailwind CSS, and TypeScript by Rishabh Bose. Install components in seconds using the shadcn CLI or copy the source code directly into your project.
1. Install with CLI
Run the command below in your React or Next.js project to download the component and its dependencies automatically:
terminalbash
| 1 | # Install any BoseUI component directly via the official shadcn CLI: |
| 2 | npx shadcn@latest add "https://boseui.site/r/drawer.json" |
| 3 | npx shadcn@latest add "https://boseui.site/r/autocomplete.json" |
| 4 | npx shadcn@latest add "https://boseui.site/r/toast-stack.json" |
2. Manual Setup (src/lib/utils.ts)
If you prefer copying code manually instead of using the CLI, add this cn() helper for merging Tailwind classes:
src/lib/utils.tsts
| 1 | import { type ClassValue, clsx } from "clsx"; |
| 2 | import { twMerge } from "tailwind-merge"; |
| 3 | |
| 4 | export function cn(...inputs: ClassValue[]) { |
| 5 | return twMerge(clsx(inputs)); |
| 6 | } |
3. Contributing a Component
Every component consists of two files in src/components/ui/: the component (.tsx) and its metadata (.meta.ts). Read our dedicated Contributing Guide → for complete guidelines, prop schemas, and preview integration.
terminalbash
| 1 | # 1. Create a new component + metadata pair in src/components/ui/ |
| 2 | npm run component:new TiltCard |
| 3 | |
| 4 | # 2. Edit your two files: |
| 5 | # - src/components/ui/TiltCard.tsx (Component code) |
| 6 | # - src/components/ui/TiltCard.meta.ts (Title, description, props) |
| 7 | |
| 8 | # 3. Sync the catalog and registry JSON files |
| 9 | npm run sync |
Ready to explore?
Try every component live and copy the code in one click.