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

Copy the source code from the Manual tab on any component page.

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