---
name: "@keyframeui"
slug: "keyframeui"
description: "Animated React components built with Tailwind CSS, Motion and GSAP, installable with the shadcn CLI."
category: "Animated components"
tags: ["ai", "animation", "audio", "blocks", "cards", "dashboard", "developer-tools", "e-commerce", "editor", "forms", "loaders", "marketing", "media", "onboarding"]
framework: "react"
license: null
author: null
website: "https://keyframeui.com"
github: null
registry: "https://keyframeui.com/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 97
generated_at: "2026-10-13T06:38:00.276Z"
---

# @keyframeui

Animated React components built with Tailwind CSS, Motion and GSAP, installable with the shadcn CLI.

## Links

- Website: https://keyframeui.com
- Registry JSON: https://keyframeui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/keyframeui
- This file: https://sh4dcn.vercel.app/md/keyframeui.md

## Install

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

## Components (97)

| name | type | description | install |
| --- | --- | --- | --- |
| tilt-card | registry:ui | A card that leans toward the pointer and catches the light with a soft moving glare. | `npx shadcn@latest add https://keyframeui.com/r/tilt-card.json` |
| tilt-card-demo | registry:block | A single card with the default tilt and glare. | `npx shadcn@latest add https://keyframeui.com/r/tilt-card-demo.json` |
| tilt-card-pricing-demo | registry:block | Three plan cards, with the featured plan leaning harder. | `npx shadcn@latest add https://keyframeui.com/r/tilt-card-pricing-demo.json` |
| tilt-card-feature-grid-demo | registry:block | A grid of subtle tiles with a gentler tilt and no glare. | `npx shadcn@latest add https://keyframeui.com/r/tilt-card-feature-grid-demo.json` |
| arc-scroll | registry:ui | Cards that travel along a semicircle as you scroll, entering at the bottom right and leaving at the bottom left. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll.json` |
| arc-scroll-demo | registry:block | Eight cards on an arc, driven by scrolling inside the box. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll-demo.json` |
| arc-scroll-case-studies-demo | registry:block | A portfolio hero: project cards on the arc, with a pinned headline and a caption for the project at the top. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll-case-studies-demo.json` |
| arc-scroll-timeline-demo | registry:block | A company history with tighter spacing, the current year highlighted and a year rail that follows along. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll-timeline-demo.json` |
| arc-scroll-testimonials-demo | registry:block | Wide quote cards with tilt turned off so the text stays level, plus page dots. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll-testimonials-demo.json` |
| pluck-string | registry:ui | A divider that catches on the pointer as it crosses, bends with it, then slips free and twangs back on a bouncy spring. | `npx shadcn@latest add https://keyframeui.com/r/pluck-string.json` |
| pluck-string-demo | registry:block | A divider between two blocks of text, with the default pull and spring. | `npx shadcn@latest add https://keyframeui.com/r/pluck-string-demo.json` |
| pluck-string-strum-demo | registry:block | Six strings tuned like a guitar: thicker strings are softer and ring longer. Sweep down across all of them. | `npx shadcn@latest add https://keyframeui.com/r/pluck-string-strum-demo.json` |
| pluck-string-changelog-demo | registry:block | Faded strings between release notes, with a softer highlight. | `npx shadcn@latest add https://keyframeui.com/r/pluck-string-changelog-demo.json` |
| zoom-lightbox | registry:ui | A thumbnail that grows into a full-screen photo, pages sideways, and shrinks back into its tile when you drag it down, like Apple Photos. | `npx shadcn@latest add https://keyframeui.com/r/zoom-lightbox.json` |
| zoom-lightbox-demo | registry:block | A photo grid. Tap a photo, swipe or use the arrow keys to page, then drag it down and it lands back in its tile. | `npx shadcn@latest add https://keyframeui.com/r/zoom-lightbox-demo.json` |
| zoom-lightbox-products-demo | registry:block | A storefront grid with portrait tiles and rounder corners. Captions carry the name, colorway and price. | `npx shadcn@latest add https://keyframeui.com/r/zoom-lightbox-products-demo.json` |
| zoom-lightbox-case-study-demo | registry:block | Shots spread through an article, in different grids. The viewer pages through them in reading order and scrolls each one into view so it has a tile to land in. | `npx shadcn@latest add https://keyframeui.com/r/zoom-lightbox-case-study-demo.json` |
| morph-search | registry:ui | A search button that stretches into a search field, with results unfolding underneath as one shape, and shrinks back into the button when it closes. | `npx shadcn@latest add https://keyframeui.com/r/morph-search.json` |
| morph-search-demo | registry:block | A search button in a site header. It grows into a field with popular pages underneath; pick one to go there. | `npx shadcn@latest add https://keyframeui.com/r/morph-search-demo.json` |
| morph-search-command-demo | registry:block | An app's command menu. The trigger travels to the middle of the screen, with grouped commands and their shortcuts. Opens with ⌘K. | `npx shadcn@latest add https://keyframeui.com/r/morph-search-command-demo.json` |
| morph-search-docs-demo | registry:block | A docs header with a fake search field that becomes the real one. Press / to open it from anywhere. | `npx shadcn@latest add https://keyframeui.com/r/morph-search-docs-demo.json` |
| spotlight-tour | registry:ui | A guided tour that dims the page and cuts a hole around one element at a time. The hole glides to each next element and takes its shape, with the explanation c… | `npx shadcn@latest add https://keyframeui.com/r/spotlight-tour.json` |
| spotlight-tour-demo | registry:block | A first tour of a dashboard: the avatar, the toolbar, the New button and the sidebar. The hole goes from a circle to a long pill to a button to a tall panel. C… | `npx shadcn@latest add https://keyframeui.com/r/spotlight-tour-demo.json` |
| spotlight-tour-whats-new-demo | registry:block | Three new features spread down a page. Each one scrolls into view while the spotlight travels to it. The Live switch stays usable while it's highlighted. | `npx shadcn@latest add https://keyframeui.com/r/spotlight-tour-whats-new-demo.json` |
| spotlight-tour-form-demo | registry:block | A sign-up form that explains each field in turn. You can type into each field while it's highlighted. | `npx shadcn@latest add https://keyframeui.com/r/spotlight-tour-form-demo.json` |
| expand-card | registry:ui | A card that opens into a full article, growing from its place in the page to fill the screen, and shrinks back into its slot when you pull it down, like the Ap… | `npx shadcn@latest add https://keyframeui.com/r/expand-card.json` |
| expand-card-demo | registry:block | Three stories in different styles: a full-bleed photo, a top-five list and a bold card on a gradient. Tap one, then pull it down from the top, or press Esc, an… | `npx shadcn@latest add https://keyframeui.com/r/expand-card-demo.json` |
| expand-card-changelog-demo | registry:block | Each post has its own link. Opening one updates the URL, the back button closes it, and loading a post's link opens it directly. The notes load while the cover… | `npx shadcn@latest add https://keyframeui.com/r/expand-card-changelog-demo.json` |
| expand-card-shop-demo | registry:block | Product cards that open into a product page with close-ups and a size picker. Add something to the bag, then pull the page down to watch the count behind it ch… | `npx shadcn@latest add https://keyframeui.com/r/expand-card-shop-demo.json` |
| counter-curtain | registry:ui | A curtain that covers the page while it loads, counting from 0 to 100 with the fonts and hero images, then lifts as the headline rises out of its masks underne… | `npx shadcn@latest add https://keyframeui.com/r/counter-curtain.json` |
| counter-curtain-demo | registry:block | The default counter over a studio's home page. The nav, headline, links and photo each rise as the curtain clears them. Press reload in the address bar to play… | `npx shadcn@latest add https://keyframeui.com/r/counter-curtain-demo.json` |
| counter-curtain-launch-demo | registry:block | A custom counter in the drop's colors, with a padded number and a progress bar, on a curtain that falls away. `onComplete` starts the countdown as it goes, so … | `npx shadcn@latest add https://keyframeui.com/r/counter-curtain-launch-demo.json` |
| counter-curtain-editorial-demo | registry:block | The default counter set in serif on a stone curtain that slides off to the left. It waits for the three photos to load and decode, so they're sharp from the fi… | `npx shadcn@latest add https://keyframeui.com/r/counter-curtain-editorial-demo.json` |
| expanding-hero | registry:ui | A headline with a small video set between its words. As you scroll, the window opens until it fills the screen, pushing the words off its edges. | `npx shadcn@latest add https://keyframeui.com/r/expanding-hero.json` |
| expanding-hero-demo | registry:block | A motion studio's showreel opens out of the headline. Once it fills the box, a button plays the film full screen. | `npx shadcn@latest add https://keyframeui.com/r/expanding-hero-demo.json` |
| expanding-hero-product-demo | registry:block | An app screenshot instead of a video, built in markup so it stays sharp full screen. A "Watch the demo" button appears once it fills the box. | `npx shadcn@latest add https://keyframeui.com/r/expanding-hero-product-demo.json` |
| expanding-hero-event-demo | registry:block | A conference hero with an aftermovie and a bolder headline. The date and city chips live inside the halves, so they fly off with the words. | `npx shadcn@latest add https://keyframeui.com/r/expanding-hero-event-demo.json` |
| intro-loader | registry:ui | A page-load intro that counts to 100 with the real loading while a flipbook of your work plays in a small frame, then grows the last image into its place on th… | `npx shadcn@latest add https://keyframeui.com/r/intro-loader.json` |
| intro-loader-demo | registry:block | A studio's home page. Four projects flip past in the frame, then the fifth grows into the full-bleed hero, and the headline rises over it. Press reload in the … | `npx shadcn@latest add https://keyframeui.com/r/intro-loader-demo.json` |
| intro-loader-lookbook-demo | registry:block | A season label instead of a number, and a tall frame for the looks. The last look lands as the half of the page beside the headline. | `npx shadcn@latest add https://keyframeui.com/r/intro-loader-lookbook-demo.json` |
| intro-loader-wordmark-demo | registry:block | No images. The wordmark rises a letter at a time as the count runs, then shrinks and flies into the logo's spot in the header. The target can be anything. | `npx shadcn@latest add https://keyframeui.com/r/intro-loader-wordmark-demo.json` |
| exploded-ui | registry:ui | A product screenshot that comes apart into its layers as you scroll, explains each one, then clicks back together. The layers are real HTML, so text stays shar… | `npx shadcn@latest add https://keyframeui.com/r/exploded-ui.json` |
| exploded-ui-demo | registry:block | A dashboard comes apart into its shell, sidebar, live cards, command menu and a teammate's cursor, walks through each one, then lands back as the screenshot it… | `npx shadcn@latest add https://keyframeui.com/r/exploded-ui-demo.json` |
| exploded-ui-architecture-demo | registry:block | The layers don't have to be UI. Four plain planes, from your app down to the database, that stay open at the end. Each carries its name on its front edge, the … | `npx shadcn@latest add https://keyframeui.com/r/exploded-ui-architecture-demo.json` |
| exploded-ui-design-system-demo | registry:block | A page lifts off the components it's built from, which lift off the tokens under them. Numbered labels, with the active layer's description under the stack. | `npx shadcn@latest add https://keyframeui.com/r/exploded-ui-design-system-demo.json` |
| odometer | registry:ui | A number that rolls each digit on its own wheel, up when the value grows and down when it shrinks, and slides new digits in as the number gets longer. | `npx shadcn@latest add https://keyframeui.com/r/odometer.json` |
| odometer-demo | registry:block | Step the number up and down. Wheels roll the way the value moves, only the digits that change turn, and 999 → 1,000 widens as the new digit and comma roll in. … | `npx shadcn@latest add https://keyframeui.com/r/odometer-demo.json` |
| odometer-pricing-demo | registry:block | Monthly and yearly plans. Prices roll down to the yearly rate and back up, the yearly total rolls down from a year of monthly bills, and Starter's $0 never mov… | `npx shadcn@latest add https://keyframeui.com/r/odometer-pricing-demo.json` |
| odometer-dashboard-demo | registry:block | Currency with cents, a count, a percentage and milliseconds. The range switcher makes big jumps in both directions; between them the numbers drift live while t… | `npx shadcn@latest add https://keyframeui.com/r/odometer-dashboard-demo.json` |
| odometer-grouping-demo | registry:block | A rupee fundraiser that keeps ticking up. Switch between the Indian system of lakhs and crores (₹2,45,67,890) and international thousands (₹24,567,890): the co… | `npx shadcn@latest add https://keyframeui.com/r/odometer-grouping-demo.json` |
| odometer-stats-demo | registry:block | A band of headline numbers that roll up from 0 the first time they scroll into view, one after another. | `npx shadcn@latest add https://keyframeui.com/r/odometer-stats-demo.json` |
| hover-preview | registry:ui | A list of names that opens a photo at the pointer. It trails the cursor with a little weight, leans as it moves, and wipes to the next photo from the direction… | `npx shadcn@latest add https://keyframeui.com/r/hover-preview.json` |
| hover-preview-demo | registry:block | A studio's work index. Point at a project: its photo opens at the pointer and trails it. Move down the list and each photo wipes in from the top; move up and i… | `npx shadcn@latest add https://keyframeui.com/r/hover-preview-demo.json` |
| hover-preview-team-demo | registry:block | Names and roles, with a portrait on hover. The frame is taller and rounder, and leans a little less. | `npx shadcn@latest add https://keyframeui.com/r/hover-preview-team-demo.json` |
| hover-preview-journal-demo | registry:block | An archive of essays with dates and reading times. Each title shows its cover image in a wide 3:2 frame. | `npx shadcn@latest add https://keyframeui.com/r/hover-preview-journal-demo.json` |
| playhead-reel | registry:ui | A whole archive in one thin strip, with a playhead that walks along it as you scroll. Whatever's under the playhead opens into a loose collage, and the ruler b… | `npx shadcn@latest add https://keyframeui.com/r/playhead-reel.json` |
| playhead-reel-demo | registry:block | A studio's archive: six projects, forty images. Scroll and the playhead walks the reel while each project opens into a collage under it, and the title rolls to… | `npx shadcn@latest add https://keyframeui.com/r/playhead-reel-demo.json` |
| playhead-reel-changelog-demo | registry:block | Six releases as live UI mockups rather than screenshots, so they stay sharp and follow your theme. The header shows the version and date, and a caption for the… | `npx shadcn@latest add https://keyframeui.com/r/playhead-reel-changelog-demo.json` |
| playhead-reel-journal-demo | registry:block | A year of trips, one group each, in portrait and landscape. Each photo has its own caption, and the trip's dates and a day count sit above. | `npx shadcn@latest add https://keyframeui.com/r/playhead-reel-journal-demo.json` |
| sync-grid | registry:ui | A grid of videos on one clock. Scrub any card and the rest follow it to the same moment. Stack them to flip between versions of a single frame, or drop one ont… | `npx shadcn@latest add https://keyframeui.com/r/sync-grid.json` |
| sync-grid-demo | registry:block | One motion played with four easings. Each card plots its curve with a dot riding it, and moves a card into its slot with the same value. Hover to scrub and wat… | `npx shadcn@latest add https://keyframeui.com/r/sync-grid-demo.json` |
| sync-grid-models-demo | registry:block | One prompt, four fictional video models. The clips run 7 to 21 seconds and line up by percentage, so halfway is halfway in all of them. Stack them and move up … | `npx shadcn@latest add https://keyframeui.com/r/sync-grid-models-demo.json` |
| sync-grid-render-demo | registry:block | One clip in four cards at 1/8, 1/4, 1/2 and full resolution. It decodes once and is drawn into each card, so all four always show the same frame. Drag Final on… | `npx shadcn@latest add https://keyframeui.com/r/sync-grid-render-demo.json` |
| sync-grid-redesign-demo | registry:block | Three versions of one product's site, built from markup, each scrolling with the clock while the same visitor moves and clicks through it. Drag 2026 onto 2019 … | `npx shadcn@latest add https://keyframeui.com/r/sync-grid-redesign-demo.json` |
| thought-trail | registry:ui | An agent's steps as they happen. The step at work shimmers and streams its details; when the next one starts, it folds up into a one-line summary and the rail … | `npx shadcn@latest add https://keyframeui.com/r/thought-trail.json` |
| thought-trail-demo | registry:block | A coding agent works through four steps. Each opens while it runs and folds into its summary as the next begins; the edit's diff scrolls inside its step, pinne… | `npx shadcn@latest add https://keyframeui.com/r/thought-trail-demo.json` |
| thought-trail-chat-demo | registry:block | A chat reply that thinks first. The message's parts are shaped like the AI SDK's, and each reasoning or tool part becomes a step. The trail folds into "Thought… | `npx shadcn@latest add https://keyframeui.com/r/thought-trail-chat-demo.json` |
| thought-trail-deploy-demo | registry:block | A CI pipeline with every step listed up front as pending. Logs stream into the running step, pinned to the newest line, and each step keeps its time. Turn on B… | `npx shadcn@latest add https://keyframeui.com/r/thought-trail-deploy-demo.json` |
| thought-trail-research-demo | registry:block | Steps with their own icons. Sources collect as chips while the agent searches, pages tick off as it reads, and the answer cites what it found once the trail fo… | `npx shadcn@latest add https://keyframeui.com/r/thought-trail-research-demo.json` |
| slice-gallery | registry:ui | Tall photo slices that share one width. The one you open widens into a full card while the others squeeze to make room; its title swings upright and the detail… | `npx shadcn@latest add https://keyframeui.com/r/slice-gallery.json` |
| slice-gallery-demo | registry:block | An architecture studio's selected work. Move across the row: a slice opens once the pointer settles, so a quick sweep doesn't make the row ripple. Each project… | `npx shadcn@latest add https://keyframeui.com/r/slice-gallery-demo.json` |
| slice-gallery-team-demo | registry:block | Six portraits in black and white, with the open one in color through `imageClassName`. The role takes the person's accent. On a phone the portraits stack; on a… | `npx shadcn@latest add https://keyframeui.com/r/slice-gallery-team-demo.json` |
| slice-gallery-hero-demo | registry:block | A travel hero that plays on its own: the open slice's strip fills like a story timer, then the next place opens. Hovering pauses it. The counter above follows … | `npx shadcn@latest add https://keyframeui.com/r/slice-gallery-hero-demo.json` |
| stretch-index | registry:ui | A list of rows that open in place. The row you're on grows taller, its tab widens into a photo, the title slides over to make room and the details rise out fro… | `npx shadcn@latest add https://keyframeui.com/r/stretch-index.json` |
| stretch-index-demo | registry:block | A product site's customer stories. Move down the list: a row opens once the pointer settles, so a quick sweep doesn't make the list ripple. Each company's tab … | `npx shadcn@latest add https://keyframeui.com/r/stretch-index-demo.json` |
| stretch-index-careers-demo | registry:block | A careers page with `openOn="click"` and `numbered={false}`: rows open like an accordion, a second click closes them, and the Apply link inside stays clickable… | `npx shadcn@latest add https://keyframeui.com/r/stretch-index-careers-demo.json` |
| stretch-index-episodes-demo | registry:block | A podcast's latest episodes on a dark panel, with square covers through `imageAspect={1}` and episode numbers through `number`. With `collapseOnLeave`, the lis… | `npx shadcn@latest add https://keyframeui.com/r/stretch-index-episodes-demo.json` |
| redline | registry:ui | Figma-style redlines for any layout. Point at an element to see its size, padding and gaps, with lines and labels that glide from one element to the next. Pin … | `npx shadcn@latest add https://keyframeui.com/r/redline.json` |
| redline-demo | registry:block | A studio's "we sweat the details" section around a product card. Left alone, it tours the card's padding, the gap between the title and the price, the button's… | `npx shadcn@latest add https://keyframeui.com/r/redline-demo.json` |
| redline-tokens-demo | registry:block | A settings panel where every spacing label reads as a token through `tokens`, and `selector="[data-redline]"` keeps the pointer on named parts. Pin a row, hold… | `npx shadcn@latest add https://keyframeui.com/r/redline-tokens-demo.json` |
| redline-handoff-demo | registry:block | A design tool's handoff mode. `onSelect` fills the panel on the right with the CSS and the Tailwind classes of whatever layer is selected, and it swaps as you … | `npx shadcn@latest add https://keyframeui.com/r/redline-handoff-demo.json` |
| autopilot | registry:ui | A cursor that uses your product on its own. It glides to buttons and presses them, types and drags across real markup on a script you write, and steps aside th… | `npx shadcn@latest add https://keyframeui.com/r/autopilot.json` |
| autopilot-demo | registry:block | An AI agent books a meeting in a calendar built from plain markup. It opens a new event, names it, finds a free slot, picks a guest from the autocomplete and s… | `npx shadcn@latest add https://keyframeui.com/r/autopilot-demo.json` |
| autopilot-multiplayer-demo | registry:block | Two teammates on a design canvas, with their steps running at the same time. Maya drags the Features frame into place, and its snap guides show through `data-a… | `npx shadcn@latest add https://keyframeui.com/r/autopilot-multiplayer-demo.json` |
| autopilot-onboarding-demo | registry:block | A SaaS app sets up a project in three clicks, one chapter each, with `chapterStrip` showing Create, Invite and Ship underneath. Click a chapter to jump there, … | `npx shadcn@latest add https://keyframeui.com/r/autopilot-onboarding-demo.json` |
| blueprint | registry:ui | A finished layout that builds itself. It starts as a wireframe measured from your real markup, then fills in block by block: text streams in, photos come into … | `npx shadcn@latest add https://keyframeui.com/r/blueprint.json` |
| blueprint-demo | registry:block | An AI site builder's hero. A prompt types itself into the field, Enter goes down, and the field docks in the corner as the page builds beneath it. Each loop is… | `npx shadcn@latest add https://keyframeui.com/r/blueprint-demo.json` |
| blueprint-process-demo | registry:block | A case study that goes from an annotated blueprint to the finished design as you scroll, with `play="manual"` following `useScroll`. `data-blueprint-order` gro… | `npx shadcn@latest add https://keyframeui.com/r/blueprint-process-demo.json` |
| blueprint-dashboard-demo | registry:block | An analytics assistant answers with a dashboard card. KPIs count up through `data-blueprint-count`, chart bars grow from even placeholders into their real heig… | `npx shadcn@latest add https://keyframeui.com/r/blueprint-dashboard-demo.json` |
| sentence-form | registry:ui | A contact form written as a sentence. Blanks stretch as you type, picked options fly up into place while the words make room, and on send the form settles into… | `npx shadcn@latest add https://keyframeui.com/r/sentence-form.json` |
| sentence-form-demo | registry:block | A design studio's inquiry in large serif type. Type your name and the words after it make room; pick services and each one flies up from the tray while the lis… | `npx shadcn@latest add https://keyframeui.com/r/sentence-form-demo.json` |
| sentence-form-agent-demo | registry:block | An AI startup's demo request on a dark panel. Each team option brings its own grammar ("for just me", "for a company of 500+") and the tools are a pick-any lis… | `npx shadcn@latest add https://keyframeui.com/r/sentence-form-agent-demo.json` |
| sentence-form-rsvp-demo | registry:block | An invitation reply with a clause that depends on an answer. Pick "with a guest" and " named ___" rises in after it while the words after it glide aside; switc… | `npx shadcn@latest add https://keyframeui.com/r/sentence-form-rsvp-demo.json` |
| release-pill | registry:ui | The "New" badge above your headline, made useful. Hover it and the pill grows into a small changelog with your last few releases, then folds back into the pill… | `npx shadcn@latest add https://keyframeui.com/r/release-pill.json` |
| release-pill-demo | registry:block | An AI startup's hero with the pill above the headline. Hover it and the changelog opens over the headline; a couple of seconds after it scrolls into view it pe… | `npx shadcn@latest add https://keyframeui.com/r/release-pill-demo.json` |
| release-pill-launch-demo | registry:block | The closed pill cycles through the week's announcements. Opened, it lists the days and ends on a dimmed, locked Day 4 row with a live countdown. | `npx shadcn@latest add https://keyframeui.com/r/release-pill-launch-demo.json` |
| release-pill-devtool-demo | registry:block | A dark developer-tool hero: monospace versions with a Feature, Fix or Breaking tag on each row, and a last row with the upgrade command whose copy button turns… | `npx shadcn@latest add https://keyframeui.com/r/release-pill-devtool-demo.json` |

## For AI agents

```text
You are adding components from @keyframeui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/keyframeui.md) for the component list.
2. Fetch the machine-readable index: https://keyframeui.com/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: keyframeui).
```