Beautiful, interactive UI components you can copy and paste into your apps.
Crafted with React, Tailwind CSS, and Framer Motion. Open source. Free forever.
Documentation · Components · Report Bug · Request Feature
Componentry is a collection of beautifully designed, interactive UI components built with React and Tailwind CSS. Just run the CLI command, add the component to your project, and start building.
- Copy & Paste - Not a dependency. You own the code.
- Interactive - Cursor-following effects, 3D transforms, and smooth animations.
- Customizable - Built with Tailwind CSS. Easy to modify.
- Accessible - WAI-ARIA compliant components.
- Dark Mode - All components support light and dark modes.
- TypeScript - Fully typed for the best developer experience.
The fastest way to add components is using the shadcn CLI:
npx shadcn@latest add https://componentry.fun/r/spotlight-card.jsonThis project uses Turborepo for monorepo management.
- Node.js 20+
- pnpm 10+
# Clone the repository
git clone https://github.com/harshjdhv/componentry.git
cd componentry
# Install dependencies
pnpm install
# Start development server
pnpm devcomponentry/
├── apps/
│ └── web/ # Documentation site (Next.js)
├── packages/
│ ├── ui/ # Component library
│ ├── eslint-config/ # Shared ESLint configuration
│ └── typescript-config/ # Shared TypeScript configuration
└── turbo.json # Turborepo configuration
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build all packages |
pnpm lint |
Run linting |
pnpm format |
Format code with Prettier |
We welcome contributions! Whether it's:
- Reporting a bug
- Submitting a fix
- Proposing new features
- Creating new components
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-component) - Commit your changes (
git commit -m 'Add amazing component') - Push to the branch (
git push origin feature/amazing-component) - Open a Pull Request
When creating new components:
- Use TypeScript with proper type definitions
- Support both light and dark modes
- Include comprehensive props with sensible defaults
- Add smooth transitions and animations
- Write clear documentation with examples
- Follow existing code style and patterns
- Framework: Next.js 16
- Styling: Tailwind CSS 4
- Components: React 19
- Build: Turborepo
- Package Manager: pnpm
MIT License - feel free to use these components in personal and commercial projects.
See LICENSE for more information.
- Inspired by shadcn/ui
- Built with Tailwind CSS
- Powered by Vercel
Made with care by Harsh Jadhav