Installation

untld/ui is not a package you install. It is code you own.

Every component lives directly in your project, which means no version mismatches, no black-box updates, and no library holding your UI hostage. Just copy, paste, and make it yours.

1. Prerequisites

untld/ui is built on the shadcn ecosystem. Before adding any component, make sure your project has these running:

• Next.js (recommended)
• Tailwind CSS
• shadcn/ui (initialized)

Not set up yet? Follow the shadcn/ui installation guide first, then come back here.

2. Install Dependencies

A handful of components use small utilities for class merging and animations. Install them once and you are covered:

npm install clsx tailwind-merge

3. Utility Helper

untld/ui uses a standard cn helper to keep Tailwind classes clean. If your project already has one from shadcn, you are good. If not, create lib/utils.ts:

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

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

4. Add Your First Component

That is genuinely it for setup.

1. Browse the Components gallery.
2. Find something that catches your eye.
3. Copy the source code into your project.
4. Start making it your own.

Common Questions

Do I need to install anything else?

Some components have their own small dependencies listed at the top of their page. Install those as needed. There is no global bundle to worry about.

Will this conflict with my existing shadcn components?

No. untld/ui extends shadcn, it does not replace it. Everything is designed to sit alongside what you already have.

Is it free?

Yes. No license friction, free for personal and commercial projects.

Running into something? Open an issue on GitHub and we will sort it out.