Installation

How to install and set up Knot UI in your project.

Prerequisites

Knot UI components are designed for Next.js projects using Tailwind CSS and TypeScript.

Make sure you have these dependencies:

bash

bun add clsx tailwind-merge motion

Add the cn() utility

Create a lib/utils.ts file in your project:

bash

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

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

Using the CLI

You can install Knot UI components directly via our CLI.

To add a component, simply use the knot-ui add command. For example, to install the Animated Button:

bash

bunx knot-ui add button

(Note: We provide a compatible registry schema so you can always build your own CLI tooling around it!)

Manual Installation (Copy & Paste)

If you prefer full control, you can simply browse the Components section and copy the raw source code into your project.