Installation

Prerequisites

knot-ui components work with any React or Next.js project using Tailwind CSS v4 and React 19. If you don't have a project yet, scaffold a Next.js app with:

npx create-next-app@latest my-app --typescript --tailwind
cd my-app

1 — Initialise shadcn

knot-ui uses the shadcn registry to distribute components. If you haven't already initialised shadcn in your project, run:

npx shadcn@latest init

Follow the prompts to configure your project. This only needs to be done once.

2 — Install via CLI

Each component is published to the knot-ui registry at https://knot-ui.trupal.me/r. Use the shadcn CLI to add any component:

npx shadcn@latest add "https://knot-ui.trupal.me/r/<component-name>"

Replace <component-name> with the registry slug shown on each component's page. For example:

# Install the Winter Button
npx shadcn@latest add "https://knot-ui.trupal.me/r/button"

# Install the Navbar
npx shadcn@latest add "https://knot-ui.trupal.me/r/navbar"

# Install Orbiting Avatars
npx shadcn@latest add "https://knot-ui.trupal.me/r/orbiting-avatars"

3 — Manual installation

Prefer to copy the source yourself? Every component page has a Manual tab in the install section with the full source. Just paste it into your project and install any missing dependencies:

# 1. Copy the component source from its docs page
#    e.g. components/library/button.tsx

# 2. Place it in your project
mkdir -p components/library
# paste the file there

# 3. Install any required peer dependencies (see below)

Peer dependencies

Most components are dependency-free beyond React and Tailwind. A few animated components rely on the packages below. The CLI will prompt you to install them automatically; for manual installs, use these commands.

npm install motion

npm install next-themes

Next steps

Head over to the components section to browse what's available. Each page includes a live preview, usage examples, props reference, and both CLI and manual install instructions.