Componentry
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
Introduction
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.
Why Componentry?
- 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.
Quick Start
Installation via CLI
The fastest way to add components is using the shadcn CLI:
npx shadcn@latest add @componentry/spotlight-card
Development
This project uses Turborepo for monorepo management.
Prerequisites
Setup
# Clone the repository
git clone https://github.com/harshjdhv/componentry.git
cd componentry
# Install dependencies
pnpm install
# Start development server
pnpm dev
Project Structure
componentry/
├── apps/
│ └── web/ # Documentation site (Next.js)
├── packages/
│ ├── ui/ # Component library
│ ├── eslint-config/ # Shared ESLint configuration
│ └── typescript-config/ # Shared TypeScript configuration
└── turbo.json # Turborepo configuration
Available Scripts
| Command | Description |
|---|
pnpm dev | Start development server |
pnpm build | Build all packages |
pnpm lint | Run linting |
pnpm format | Format code with Prettier |
Contributing
We welcome contributions! Whether it's:
- Reporting a bug
- Submitting a fix
- Proposing new features
- Creating new components
How to Contribute
- 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
Component Guidelines
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
Tech Stack
License
MIT License - feel free to use these components in personal and commercial projects.
Third-Party Licenses
Some components use third-party dependencies with separate license terms.
image-trail and layered-stack require gsap (GSAP).- If you use or redistribute those components, you are responsible for complying with GSAP's license terms.
- GSAP license: https://gsap.com/licensing/
See LICENSE for more information.
Acknowledgments
Made with care by Harsh Jadhav
