Getting Started

Introduction

MeetUI is a collection of beautifully designed, copy-paste ready components built with React, Tailwind CSS, and Framer Motion. It is not a traditional component library—you own the code and can customize everything to fit your needs.

Installation

Install the core dependencies that most MeetUI components require:

npm install framer-motion clsx tailwind-merge lucide-react

For 3D components (like fluid toggles or particle effects), also install:

npm install @react-three/fiber @react-three/drei three

Project Structure

We recommend placing MeetUI components in a dedicated ui folder:

src/
├── components/
│   └── ui/           # MeetUI components go here
│       ├── glow-card.tsx
│       ├── splash-button.tsx
│       └── ...
├── lib/
│   └── utils.ts      # Utility functions (cn helper)
└── app/
    └── ...

Usage

Using a MeetUI component is simple—browse the component you need, copy the code, and import it into your project:

1import { GlowCard } from "@/components/ui/glow-card"
2 
3export default function Example() {
4    return (
5        <GlowCard>
6            <h2>Hello World</h2>
7            <p>This card has a beautiful glow effect.</p>
8        </GlowCard>
9    )
10}

Each component page includes a live preview, editable props playground, full source code, and usage examples.

Theming

MeetUI uses Tailwind CSS for styling. Customize colors and design tokens in your globals.css or tailwind.config:

1@theme {
2    --color-primary: oklch(0.637 0.237 311);
3    --color-secondary: oklch(0.541 0.281 293);
4    --color-accent: oklch(0.685 0.169 237);
5 
6    --font-heading: "Inter", sans-serif;
7    --font-mono: "JetBrains Mono", monospace;
8}