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. Unlike traditional component libraries, Componentry gives you the actual source code - just copy, paste, and customize to match your brand.

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.

Featured Components

Component	Description
Flight Status Card	Premium flight tracker with dot-matrix display and progress animation
Spotlight Card	Interactive cards with cursor-following spotlight and 3D tilt effects

Quick Start

Installation via CLI

The fastest way to add components is using the shadcn CLI:

npx shadcn@latest add https://componentry.harshjdhv.com/r/spotlight-card.json

Manual Installation

1. Copy the component source code from the documentation
2. Paste it into your project's components directory
3. Install any required dependencies
4. Import and use the component

import { SpotlightCard } from "@/components/ui/spotlight-card"

export default function Page() {
  return (
    <SpotlightCard className="w-96">
      <h2>Hello World</h2>
      <p>This card has a spotlight effect!</p>
    </SpotlightCard>
  )
}

Development

This project uses Turborepo for monorepo management.

Prerequisites

• Node.js 20+
• pnpm 10+

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-component)
3. Commit your changes (git commit -m 'Add amazing component')
4. Push to the branch (git push origin feature/amazing-component)
5. 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

• Framework: Next.js 16
• Styling: Tailwind CSS 4
• Components: React 19
• Build: Turborepo
• Package Manager: pnpm

License

MIT License - feel free to use these components in personal and commercial projects.

See LICENSE for more information.

Acknowledgments

• Inspired by shadcn/ui
• Built with Tailwind CSS
• Powered by Vercel

---

Made with care by Harsh Jadhav