uicomponents.dev

Documentation

Installation

Get started with uicomponents.dev in minutes

uicomponents.dev takes a different approach to UI libraries. Instead of installing packages, you simply copy and paste components directly into your project. This gives you full control and eliminates dependencies.

1

Choose your component

Browse our library and find the component you need

2

Copy the code

Click the copy button to get the component code

3

Paste into your project

Add the component to your components directory

4

Install dependencies

Add any required dependencies to your project

React Setup

For React projects, components are written in TypeScript with Tailwind CSS styling.

Note

Make sure you have Tailwind CSS configured in your project before using components.

1. Install Tailwind CSS

bash
-yellow-400">npm install -D tailwindcss postcss autoprefixer
-yellow-400">npx tailwindcss init

2. Configure tailwind.config.js

javascript
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add Tailwind directives to your CSS

css
@tailwind base;
@tailwind components;
@tailwind utilities;

Manual Installation

For components that require additional dependencies, install them manually:

bash
# For components using Lucide icons
-yellow-400">npm install lucide-react

# For form components
-yellow-400">npm install react-hook-form

# For date pickers
-yellow-400">npm install date-fns

Recommended Project Structure

Organize your components in a clear structure:

bash
your-project/
├── app/
│   └── globals.css
├── components/
│   ├── ui/           # Primitive components (Button, Card, etc.)
│   └── feature/      # Feature-specific components
├── lib/
│   └── utils.ts      # Utility functions
└── public/

Tip

We recommend keeping a separate components/ui/ directory for primitive components that you'll reuse across your application.

Next Steps

Now that you have everything set up, learn how to use components effectively in your project.

PreviousIntroductionNextUsing Components