Installation

Getting started with uselayouts is easy. Since we use a copy-paste model (inspired by Shadcn UI), you just need to set up a few core dependencies to ensure everything works as expected.

1. Prerequisites

Our components are built on a modern stack. Make sure your project is running:

• React
• Next.js (Recommended)
• Tailwind CSS
• Motion (Formerly Framer Motion)

2. Install Dependencies

Most components rely on motion for animations and a few small utilities for class merging. Run the following command in your terminal:

npm install motion clsx tailwind-merge @hugeicons/react @hugeicons/core-free-icons

3. Add Utility Helper

We use a standard cn tool to manage Tailwind classes smoothly. If you don't have it yet, create a lib/utils.ts file:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

4. Add a Component

That's it! You're ready to go.

1. Browse the Components gallery.
2. Click on the component you want to use.
3. Copy the source code or install via Shadcn CLI.

Common Questions

Do I need a CLI? Not yet. We believe in providing the code first. A CLI is in the works to make adding components even faster, but manual copy-pasting gives you the best understanding of how things work.

Can I use this with plain CSS? The components are deeply integrated with Tailwind CSS 4. While you could convert them, it's designed to work best within the Tailwind ecosystem.

Is it free? Yes, uselayouts is open-source and free to use for both personal and commercial projects.

Need help? Feel free to reach out or open an issue on GitHub.