---
name: "@knot-ui"
slug: "knot-ui"
description: "A registry of animated, cinematic React components and UI blocks for shadcn — buttons, cards, folders, navbars and more, built with Tailwind CSS v4 and Motion."
category: "Animated components"
tags: ["animation", "blocks", "buttons", "cards", "glassmorphism", "media", "navigation"]
framework: "react"
license: null
author: null
website: "https://knot-ui.trupal.me"
github: null
registry: "https://knot-ui.trupal.me/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 15
generated_at: "2026-09-21T01:50:16.753Z"
---

# @knot-ui

A registry of animated, cinematic React components and UI blocks for shadcn — buttons, cards, folders, navbars and more, built with Tailwind CSS v4 and Motion.

## Links

- Website: https://knot-ui.trupal.me
- Registry JSON: https://knot-ui.trupal.me/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/knot-ui
- This file: https://sh4dcn.vercel.app/md/knot-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://knot-ui.trupal.me/r/registry.json
pnpm dlx shadcn@latest add https://knot-ui.trupal.me/r/registry.json
bunx shadcn@latest add https://knot-ui.trupal.me/r/registry.json
# fetch the raw registry index
curl -s https://knot-ui.trupal.me/r/registry.json
```

## Components (15)

| name | type | description | install |
| --- | --- | --- | --- |
| button | registry:component | A cinematic button with realistic snowflake particle effects rendered on a canvas. | `npx shadcn@latest add https://knot-ui.trupal.me/r/button.json` |
| rise-button | registry:component | A button with a rising overlay animation on hover. | `npx shadcn@latest add https://knot-ui.trupal.me/r/rise-button.json` |
| glare-button | registry:component | A dark button with a sweeping glare highlight on hover. | `npx shadcn@latest add https://knot-ui.trupal.me/r/glare-button.json` |
| flip-button | registry:component | A button that flips between a light front face and dark back face in 3D on hover. | `npx shadcn@latest add https://knot-ui.trupal.me/r/flip-button.json` |
| glass-button | registry:component | A frosted-glass morphism button with backdrop blur and inset highlights. | `npx shadcn@latest add https://knot-ui.trupal.me/r/glass-button.json` |
| slide-button | registry:component | A button with a sliding color overlay revealing from one side on hover. | `npx shadcn@latest add https://knot-ui.trupal.me/r/slide-button.json` |
| slide-link-button | registry:component | A minimal link-style button with a sliding underlay on hover. | `npx shadcn@latest add https://knot-ui.trupal.me/r/slide-link-button.json` |
| square-button | registry:component | A sharp-cornered button with decorative corner brackets. | `npx shadcn@latest add https://knot-ui.trupal.me/r/square-button.json` |
| flip-card | registry:component | A book-style flip card with a spine tab that reveals on hover. | `npx shadcn@latest add https://knot-ui.trupal.me/r/flip-card.json` |
| navbar | registry:component | A floating navbar that shrinks and collapses to a pill shape on scroll. | `npx shadcn@latest add https://knot-ui.trupal.me/r/navbar.json` |
| orbiting-avatars | registry:component | A circular orbit of avatar images that spin around a central CTA button. | `npx shadcn@latest add https://knot-ui.trupal.me/r/orbiting-avatars.json` |
| fan-folder | registry:component | Cards fan out and spread behind the folder on hover. | `npx shadcn@latest add https://knot-ui.trupal.me/r/fan-folder.json` |
| open-folder | registry:component | Lid opens with 3D perspective and floating cards emerge on hover. | `npx shadcn@latest add https://knot-ui.trupal.me/r/open-folder.json` |
| lift-folder | registry:component | Lid lifts up in 3D while stacked cards reveal behind it on hover. | `npx shadcn@latest add https://knot-ui.trupal.me/r/lift-folder.json` |
| hand-toggle | registry:component | A dithered 'hand of god' dark-mode toggle with a circular view-transition reveal. | `npx shadcn@latest add https://knot-ui.trupal.me/r/hand-toggle.json` |

## For AI agents

```text
You are adding components from @knot-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/knot-ui.md) for the component list.
2. Fetch the machine-readable index: https://knot-ui.trupal.me/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: knot-ui).
```