Introduction
Animated, copy-paste UI components built for Next.js and Tailwind CSS.
What is knot-ui?
knot-ui is a free, open-source component library focused on distinctive micro-interactions and motion design. Unlike traditional UI kits, knot-ui components are not wrapped in an npm package — you own the source. Every component is designed to drop directly into your codebase with minimal dependencies.
Components are distributed through the shadcn registry, so you can add any individual piece with a single CLI command and edit it freely. There is no runtime abstraction between you and the code.
Why knot-ui?
Handcrafted animations
Every component ships with bespoke motion — no generic fade-ins, only purposeful detail.
Copy-paste ready
Zero abstraction layers. Grab the source and drop it straight into your project.
shadcn CLI support
Install any component in one command via the shadcn registry. No wrappers, no lock-in.
Tailwind & React 19
Built on Tailwind CSS v4 and React 19. Works seamlessly with Next.js app router.
Browse components
Folder
Open, fan, and lift variants with smooth spring physics.
Winter Button
Cinematic snowflake particle effects on a canvas.
Navbar
Pill-shrink navbar that reacts to scroll position.
Flip Card
Book-spine reveal with accent color customisation.
Orbiting Avatars
Continuous avatar orbit ring around a CTA button.
Tailwind Buttons
Pure-CSS animated button collection, no JS needed.
Quick start
Follow the installation guide to set up your project, then browse any component to copy its source or install it via the CLI.