---
name: "@fancy-ui"
slug: "fancy-ui"
description: "145 animated React components with motion, glow and sound effects, built with Tailwind CSS v4."
category: "Animated components"
tags: ["3d", "ai", "animation", "audio", "backgrounds", "buttons", "cards", "editor", "forms", "glassmorphism", "icons", "loaders", "marketing", "media", "navigation", "overlays", "retro", "tables"]
framework: "react"
license: "MIT"
author: "RamaHerbin"
website: "https://fancy-ui.rama.app"
github: "https://github.com/RamaHerbin/fancy-ui"
registry: "https://fancy-ui.rama.app/r/registry.json"
pro: false
pro_url: null
github_stars: 24
component_count: 161
generated_at: "2026-10-27T06:34:08.542Z"
---

# @fancy-ui

145 animated React components with motion, glow and sound effects, built with Tailwind CSS v4.

## Links

- Website: https://fancy-ui.rama.app
- GitHub: https://github.com/RamaHerbin/fancy-ui
- Registry JSON: https://fancy-ui.rama.app/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/fancy-ui
- This file: https://sh4dcn.netlify.app/md/fancy-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://fancy-ui.rama.app/r/registry.json
pnpm dlx shadcn@latest add https://fancy-ui.rama.app/r/registry.json
bunx shadcn@latest add https://fancy-ui.rama.app/r/registry.json
# clone the source repo
git clone https://github.com/RamaHerbin/fancy-ui.git
# fetch the raw registry index
curl -s https://fancy-ui.rama.app/r/registry.json
```

## Components (161)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | A stack of headed sections where one or several open at a time, with a collapse that animates without measuring, arrow-key navigation between headers and label… | `npx shadcn@latest add https://fancy-ui.rama.app/r/accordion.json` |
| agent-plan | registry:ui | Glanceable checklist of an agent's plan: a done/total count and completion bar over one row per step, with a status glyph, an optional detail line, and substep… | `npx shadcn@latest add https://fancy-ui.rama.app/r/agent-plan.json` |
| ai-data-table | registry:ui | Compact comparison table for a model's structured answer: real table semantics, tabular numeric columns, check-or-dash booleans, and one tintable column — rend… | `npx shadcn@latest add https://fancy-ui.rama.app/r/ai-data-table.json` |
| alert-dialog | registry:ui | A confirmation dialog for consequential, hard-to-undo actions — fixed confirm/cancel actions, never dismissed by an outside click | `npx shadcn@latest add https://fancy-ui.rama.app/r/alert-dialog.json` |
| animated-beam | registry:ui | Fibre-optic connector between two elements: a light packet with a dispersing chromatic tail runs along a glass fibre and blooms behind the destination on arriv… | `npx shadcn@latest add https://fancy-ui.rama.app/r/animated-beam.json` |
| animated-testimonials | registry:ui | Testimonial carousel with smooth slide animations and optional autoplay | `npx shadcn@latest add https://fancy-ui.rama.app/r/animated-testimonials.json` |
| animated-tooltip | registry:ui | Presence stack of overlapping avatars with a thin, dimmed ring each that lights up on hover or focus while the avatar lifts, its neighbours part to make room, … | `npx shadcn@latest add https://fancy-ui.rama.app/r/animated-tooltip.json` |
| apple-card-carousel | registry:ui | Horizontal card carousel where the focused card expands into a spring-animated full-screen view | `npx shadcn@latest add https://fancy-ui.rama.app/r/apple-card-carousel.json` |
| approval-card | registry:ui | A human-in-the-loop gate before a side effect: the agent states what it is about to do, and the footer swaps its approve and deny buttons for a one-line verdic… | `npx shadcn@latest add https://fancy-ui.rama.app/r/approval-card.json` |
| artifact-card | registry:ui | A generated document as a tangible object: title, kind, a version navigator, and the first six lines of the text itself streaming in behind a fade | `npx shadcn@latest add https://fancy-ui.rama.app/r/artifact-card.json` |
| autocomplete | registry:ui | A free-text field with a portalled panel of matching suggestions — any typed value is valid; the panel only ever helps finish it faster. | `npx shadcn@latest add https://fancy-ui.rama.app/r/autocomplete.json` |
| avatar | registry:ui | A person or account as an image that shows a skeleton while it loads and falls back to one or two initials on a colour fixed by the name, as a circle or a roun… | `npx shadcn@latest add https://fancy-ui.rama.app/r/avatar.json` |
| badge | registry:ui | A short pill of status text in five treatments and two sizes, with native span attributes passed through | `npx shadcn@latest add https://fancy-ui.rama.app/r/badge.json` |
| bento-grid | registry:ui | Grid of framed tiles, each a hairline frame around a softly top-lit panel, where an accent glow rises from below on hover while the content lifts and the call … | `npx shadcn@latest add https://fancy-ui.rama.app/r/bento-grid.json` |
| bg-falling-stars | registry:ui | Canvas-based 3D starfield with perspective projection, motion trails, and glow | `npx shadcn@latest add https://fancy-ui.rama.app/r/bg-falling-stars.json` |
| bg-stars | registry:ui | Three-layer starfield background that scrolls continuously while parallax-shifting in response to cursor movement via spring physics, with stars rendered as bo… | `npx shadcn@latest add https://fancy-ui.rama.app/r/bg-stars.json` |
| blur-reveal | registry:ui | Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-chi… | `npx shadcn@latest add https://fancy-ui.rama.app/r/blur-reveal.json` |
| book | registry:ui | 3D book component with cover, spine, and back face that opens on hover | `npx shadcn@latest add https://fancy-ui.rama.app/r/book.json` |
| border-beam | registry:ui | A single comet of light riding a container's border: a white-hot head, a long feathered tail fading between two colours, a dim hairline that lights up only wit… | `npx shadcn@latest add https://fancy-ui.rama.app/r/border-beam.json` |
| box-reveal | registry:ui | Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered on… | `npx shadcn@latest add https://fancy-ui.rama.app/r/box-reveal.json` |
| breadcrumb | registry:ui | A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech. | `npx shadcn@latest add https://fancy-ui.rama.app/r/breadcrumb.json` |
| button | registry:ui | The foundational push-button: six variants, three sizes, a loading state, and a polymorphic href/anchor mode | `npx shadcn@latest add https://fancy-ui.rama.app/r/button.json` |
| button-group | registry:ui | Joins a row of adjacent actions into one seamless control — one border, one divider, no doubled edges | `npx shadcn@latest add https://fancy-ui.rama.app/r/button-group.json` |
| card-3d | registry:ui | Interactive 3D perspective card with depth effects on child elements | `npx shadcn@latest add https://fancy-ui.rama.app/r/card-3d.json` |
| card-spotlight | registry:ui | Card whose radial-gradient spotlight tracks the cursor as it moves inside, fading in on hover and parking itself off-canvas when the pointer leaves, with confi… | `npx shadcn@latest add https://fancy-ui.rama.app/r/card-spotlight.json` |
| chat-error | registry:ui | Quiet inline failure banner for a chat turn: the error, an optional detail line, and a retry button that disables itself while the retry is in flight | `npx shadcn@latest add https://fancy-ui.rama.app/r/chat-error.json` |
| chat-message | registry:ui | One conversation turn, aligned and dressed by its role, streaming its body while the answer arrives, with an action rail that fades in on hover and a version n… | `npx shadcn@latest add https://fancy-ui.rama.app/r/chat-message.json` |
| chat-panel | registry:ui | The shell a conversation lives in: a sticky header, a transcript that pins itself to the bottom while an answer arrives and offers the way back once you scroll… | `npx shadcn@latest add https://fancy-ui.rama.app/r/chat-panel.json` |
| checkbox | registry:ui | A tri-look checkbox — unchecked, checked, indeterminate and disabled — built on a native checkbox input | `npx shadcn@latest add https://fancy-ui.rama.app/r/checkbox.json` |
| code-diff | registry:ui | Unified diff tuned for chat width: one foldable card per file, tinted add/delete rows, and a copy-safe gutter | `npx shadcn@latest add https://fancy-ui.rama.app/r/code-diff.json` |
| collapsible | registry:ui | A single disclosure: a trigger that expands and collapses a region, animated without measuring so an interrupted toggle simply reverses, with the closed conten… | `npx shadcn@latest add https://fancy-ui.rama.app/r/collapsible.json` |
| colourful-text | registry:ui | Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically eve… | `npx shadcn@latest add https://fancy-ui.rama.app/r/colourful-text.json` |
| combobox | registry:ui | A single-choice text field over a closed set of options — typing filters a portalled listbox, and a value outside the list can never be selected. | `npx shadcn@latest add https://fancy-ui.rama.app/r/combobox.json` |
| command-menu | registry:ui | A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation wit… | `npx shadcn@latest add https://fancy-ui.rama.app/r/command-menu.json` |
| compare | registry:ui | Before/after image comparison slider split by a blade of light: a white-hot seam with a chromatic fringe, pulses running along it and a trail that stretches wi… | `npx shadcn@latest add https://fancy-ui.rama.app/r/compare.json` |
| composer | registry:ui | The input at the bottom of a chat, taken apart: a root that owns the draft and eight parts that read it — a growing textarea, a send button that becomes a stop… | `npx shadcn@latest add https://fancy-ui.rama.app/r/composer.json` |
| confetti | registry:ui | Confetti celebration effect powered by canvas-confetti with button trigger support | `npx shadcn@latest add https://fancy-ui.rama.app/r/confetti.json` |
| container-scroll | registry:ui | Scroll-driven aperture: the card opens from a bright seam as it enters the viewport while its content settles into focus and the title blurs away, with no 3D t… | `npx shadcn@latest add https://fancy-ui.rama.app/r/container-scroll.json` |
| container-text-flip | registry:ui | Text container that cycles through words with per-character blur animation | `npx shadcn@latest add https://fancy-ui.rama.app/r/container-text-flip.json` |
| context-menu | registry:ui | A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigg… | `npx shadcn@latest add https://fancy-ui.rama.app/r/context-menu.json` |
| context-ring | registry:ui | How much of the context window is gone, in the space of a favicon: a donut that fills as the conversation grows, the compact count beside it, and an optional p… | `npx shadcn@latest add https://fancy-ui.rama.app/r/context-ring.json` |
| copy-button | registry:ui | Button preset wired to the clipboard, morphing its icon and label to a success or failure state for a moment after each copy attempt | `npx shadcn@latest add https://fancy-ui.rama.app/r/copy-button.json` |
| datamosh-transition | registry:ui | Page-transition overlay that looks like a corrupted video decode: a fixed grid of columns, narrow on the left and wide on the right, fills with flat blocks of … | `npx shadcn@latest add https://fancy-ui.rama.app/r/datamosh-transition.json` |
| date-picker | registry:ui | A field that opens a floating month grid, with full keyboard navigation (arrow keys across days, Page Up/Down across months, Shift for years), min/max and per-… | `npx shadcn@latest add https://fancy-ui.rama.app/r/date-picker.json` |
| dialog | registry:ui | A modal panel with a title, description, body and free-form footer — portals out, traps focus, and locks the page's scroll while open | `npx shadcn@latest add https://fancy-ui.rama.app/r/dialog.json` |
| dim-siblings | registry:ui | Wraps a group of cards, links, or list items so hovering or keyboard-focusing one dims (or blurs) every other one — a pure CSS :has() affordance with zero poin… | `npx shadcn@latest add https://fancy-ui.rama.app/r/dim-siblings.json` |
| direction-aware-hover | registry:ui | Image card with overlay that slides in from the mouse entry direction | `npx shadcn@latest add https://fancy-ui.rama.app/r/direction-aware-hover.json` |
| displacement-text | registry:ui | 3D text with WebGL displacement that follows the cursor using Three.js shaders | `npx shadcn@latest add https://fancy-ui.rama.app/r/displacement-text.json` |
| dock | registry:ui | Icon dock on a lit glass shelf: icons swell on a smooth cosine curve toward the pointer, a soft pool of light and a brightening edge follow it across the shelf… | `npx shadcn@latest add https://fancy-ui.rama.app/r/dock.json` |
| drawer | registry:ui | A modal bottom sheet with a grab handle, draggable shut with a downward swipe — for filters, quick actions, or any touch-first task | `npx shadcn@latest add https://fancy-ui.rama.app/r/drawer.json` |
| dropdown-menu | registry:ui | A menu of actions or options that opens from a trigger button, with full keyboard navigation, submenus and real DOM focus on every item. | `npx shadcn@latest add https://fancy-ui.rama.app/r/dropdown-menu.json` |
| editorial-engine | registry:ui | Live magazine layout: multi-column text flowing around draggable orbs with zero DOM reads, powered by pretext | `npx shadcn@latest add https://fancy-ui.rama.app/r/editorial-engine.json` |
| file-upload | registry:ui | A drop zone backed by a native file input, with per-file progress, JS-side validation and a removable file list | `npx shadcn@latest add https://fancy-ui.rama.app/r/file-upload.json` |
| fireworks-hdr | registry:ui | GPU fireworks background with a deterministic, DOM-free physics core (rockets, peony/willow/ring/glyph shells, sparks, embers, smoke) rendered by a WebGPU engi… | `npx shadcn@latest add https://fancy-ui.rama.app/r/fireworks-hdr.json` |
| flickering-grid | registry:ui | Canvas grid of squares that flicker in and out of opacity at random each frame, pausing automatically via IntersectionObserver when scrolled off-screen and res… | `npx shadcn@latest add https://fancy-ui.rama.app/r/flickering-grid.json` |
| flip-card | registry:ui | Card that flips in 3D to reveal its back, on hover (plus focus and tap) or as a click toggle; it lifts and lands with a slight overshoot, keeps turning the way… | `npx shadcn@latest add https://fancy-ui.rama.app/r/flip-card.json` |
| flip-words | registry:ui | Cycling word animation with per-letter fade-in and blur effects | `npx shadcn@latest add https://fancy-ui.rama.app/r/flip-words.json` |
| fluid-cursor | registry:ui | Full Navier-Stokes fluid simulation that swirls color in response to cursor and touch movement, running on WebGL2 with a WebGL1 fallback and an optional WebGPU… | `npx shadcn@latest add https://fancy-ui.rama.app/r/fluid-cursor.json` |
| focus | registry:ui | Text component that cycles focus through words with blur and corner frame | `npx shadcn@latest add https://fancy-ui.rama.app/r/focus.json` |
| follow-button | registry:ui | A follow toggle that shows the result at once, then commits when the server agrees or rolls back and says so, with the width held steady across every label | `npx shadcn@latest add https://fancy-ui.rama.app/r/follow-button.json` |
| form-field | registry:ui | Wraps a control with a label, help/error text and id wiring, so a screen reader gets the full picture without manual aria plumbing | `npx shadcn@latest add https://fancy-ui.rama.app/r/form-field.json` |
| frosted-glass | registry:ui | Frosted glass surface with organic turbulence-noise refraction, an alternative to LiquidGlass | `npx shadcn@latest add https://fancy-ui.rama.app/r/frosted-glass.json` |
| glare-card | registry:ui | Holographic trading card effect with mouse-tracking glare and rainbow foil | `npx shadcn@latest add https://fancy-ui.rama.app/r/glare-card.json` |
| glow-border | registry:ui | Liquid-metal ring for a container's edge: two metallic conic fields turning against each other make iridescent reflections flow along a dark chrome border, whi… | `npx shadcn@latest add https://fancy-ui.rama.app/r/glow-border.json` |
| glowing-effect | registry:ui | Mouse-proximity based glowing border effect with animated conic gradient | `npx shadcn@latest add https://fancy-ui.rama.app/r/glowing-effect.json` |
| gradient-button | registry:ui | Dark button with a beam of light that travels around its border and casts a soft coloured glow inside the face; the glow brightens on hover | `npx shadcn@latest add https://fancy-ui.rama.app/r/gradient-button.json` |
| hover-card | registry:ui | An anchored panel that opens on hover or focus with a short delay, for richer previews than a tooltip — a profile card, a link preview | `npx shadcn@latest add https://fancy-ui.rama.app/r/hover-card.json` |
| hyper-text | registry:ui | Text that scrambles into random uppercase letters and resolves character-by-character back to the original on hover, with a staggered per-letter reveal and an … | `npx shadcn@latest add https://fancy-ui.rama.app/r/hyper-text.json` |
| icon-button | registry:ui | Square or circular icon-only button built on Button, with a required accessible label | `npx shadcn@latest add https://fancy-ui.rama.app/r/icon-button.json` |
| image-generation | registry:ui | Fixed frame that holds its place while a model draws: an empty outline, then a pixel grid working over a drifting dot field, then the finished image easing out… | `npx shadcn@latest add https://fancy-ui.rama.app/r/image-generation.json` |
| image-trail-cursor | registry:ui | Trail of images that spawn and animate along the cursor's path, powered by GSAP timelines, with 18 selectable variants: fades, momentum drift, rotation flings,… | `npx shadcn@latest add https://fancy-ui.rama.app/r/image-trail-cursor.json` |
| inline-citation | registry:ui | A numbered reference that sits inside a sentence and reveals the document behind it — title, domain and snippet — in a floating card on hover or focus | `npx shadcn@latest add https://fancy-ui.rama.app/r/inline-citation.json` |
| input | registry:ui | A single-line text field with resting, focus, error and disabled looks, built on a native input | `npx shadcn@latest add https://fancy-ui.rama.app/r/input.json` |
| interactive-grid-pattern | registry:ui | SVG grid of squares that highlight on hover with smooth fade transitions | `npx shadcn@latest add https://fancy-ui.rama.app/r/interactive-grid-pattern.json` |
| interactive-hover-button | registry:ui | Button whose dot opens into a circle that fills it on hover, while the label rolls up and out and returns with an arrow | `npx shadcn@latest add https://fancy-ui.rama.app/r/interactive-hover-button.json` |
| internals | registry:lib | Hooks and helpers the components share: positioning, focus, dismissal, ids, text streaming and portals. | `npx shadcn@latest add https://fancy-ui.rama.app/r/internals.json` |
| internals-dom | registry:lib | Ref, context and server-rendering helpers for DOM-bound components. | `npx shadcn@latest add https://fancy-ui.rama.app/r/internals-dom.json` |
| internals-markdown | registry:lib | The streaming-safe markdown renderer and its styles. | `npx shadcn@latest add https://fancy-ui.rama.app/r/internals-markdown.json` |
| internals-motion | registry:lib | Animation primitives: easing, presence, stagger, in-view and motion tokens. | `npx shadcn@latest add https://fancy-ui.rama.app/r/internals-motion.json` |
| label | registry:ui | A form label with a decorative required asterisk, wired to a FormField's context when it has one | `npx shadcn@latest add https://fancy-ui.rama.app/r/label.json` |
| letter-pullup | registry:ui | Staggered letter pull-up animation with wave entrance effect | `npx shadcn@latest add https://fancy-ui.rama.app/r/letter-pullup.json` |
| line-hover-link | registry:ui | Link component with 12 animated underline hover effects — pure CSS, no JS on hover | `npx shadcn@latest add https://fancy-ui.rama.app/r/line-hover-link.json` |
| line-reveal | registry:ui | Staggered line-by-line text reveal with lines computed by pretext instead of DOM splitting | `npx shadcn@latest add https://fancy-ui.rama.app/r/line-reveal.json` |
| line-shadow-text | registry:ui | Text with animated diagonal line shadow pattern that scrolls continuously | `npx shadcn@latest add https://fancy-ui.rama.app/r/line-shadow-text.json` |
| link | registry:ui | Inline text link with a muted variant, configurable underline, and a safe external-link mode with a new-tab arrow | `npx shadcn@latest add https://fancy-ui.rama.app/r/link.json` |
| liquid-glass | registry:ui | Glass-like visual effect using SVG filters for chromatic displacement | `npx shadcn@latest add https://fancy-ui.rama.app/r/liquid-glass.json` |
| liquid-text | registry:ui | Big text that liquefies along the cursor's path via a raw-WebGL fluid solver, with chromatic-aberration fringing that relaxes back over time | `npx shadcn@latest add https://fancy-ui.rama.app/r/liquid-text.json` |
| logo-cloud | registry:ui | Logo display with animated marquee, static grid, and icon variants | `npx shadcn@latest add https://fancy-ui.rama.app/r/logo-cloud.json` |
| magnetic | registry:ui | A generic wrapper that pulls its child toward the pointer once it enters an activation field larger than the child's own box, and springs back to rest the inst… | `npx shadcn@latest add https://fancy-ui.rama.app/r/magnetic.json` |
| magnetic-field | registry:ui | Items are pulled toward a magnet and lean toward it, light ones more than heavy ones, then spring home. The magnet is the pointer or a draggable puck. | `npx shadcn@latest add https://fancy-ui.rama.app/r/magnetic-field.json` |
| marquee | registry:ui | An eased conveyor of repeated content that dissolves into soft edge fades and, on hover or focus, brakes smoothly to a stop and pulls away again instead of fre… | `npx shadcn@latest add https://fancy-ui.rama.app/r/marquee.json` |
| matrix-rain | registry:ui | Canvas-based falling glyph rain with configurable color, speed, and density | `npx shadcn@latest add https://fancy-ui.rama.app/r/matrix-rain.json` |
| meteors | registry:ui | Meteor shower in depth: seeded meteors with glowing heads and tapering tails fall diagonally in parallax (near ones larger, brighter and faster), fading in and… | `npx shadcn@latest add https://fancy-ui.rama.app/r/meteors.json` |
| mosaic-glow | registry:ui | Canvas mosaic of small tiles on a dark surface where a soft halo follows the cursor with a lag, lighting tiles to random gold intensities that decay into a com… | `npx shadcn@latest add https://fancy-ui.rama.app/r/mosaic-glow.json` |
| navbar | registry:ui | A horizontal top-of-page bar with a brand mark, navigation links, and actions on the right. | `npx shadcn@latest add https://fancy-ui.rama.app/r/navbar.json` |
| navigation-menu | registry:ui | A horizontal row of triggers that each open a rich, multi-column panel below the row — disclosure-pattern site navigation, not an application menu. | `npx shadcn@latest add https://fancy-ui.rama.app/r/navigation-menu.json` |
| neon-border | registry:ui | Two-colour neon tube around its content: two beams with white-hot cores chase each other along a faint tube, their glow spilling inside and outside the edge, h… | `npx shadcn@latest add https://fancy-ui.rama.app/r/neon-border.json` |
| noise-reveal | registry:ui | WebGL image reveal with a Perlin-noise dissolve mask, contracting radial gradient, and wave displacement | `npx shadcn@latest add https://fancy-ui.rama.app/r/noise-reveal.json` |
| number-input | registry:ui | Numeric field with decrement/increment buttons that clamp to min/max, disable themselves at the bounds, and step fractional values without float drift | `npx shadcn@latest add https://fancy-ui.rama.app/r/number-input.json` |
| number-ticker | registry:ui | Animated number counter with easing, triggered on viewport entry | `npx shadcn@latest add https://fancy-ui.rama.app/r/number-ticker.json` |
| pagination | registry:ui | A page-number control with Previous/Next, ellipsis collapsing for long runs, and optional First/Last jump buttons; the current-page pill slides between numbers… | `npx shadcn@latest add https://fancy-ui.rama.app/r/pagination.json` |
| password-input | registry:ui | A password field with a show/hide reveal toggle and an optional strength meter that never relies on colour alone | `npx shadcn@latest add https://fancy-ui.rama.app/r/password-input.json` |
| pixel-loader | registry:ui | Grid of pixels pulsing in a diagonal wave as a pre-token loading indicator for AI responses | `npx shadcn@latest add https://fancy-ui.rama.app/r/pixel-loader.json` |
| pixel-scene | registry:ui | An animated pixel-art landscape on a dot grid: sparse ink dots at rest, full colour under a round lens that follows the pointer, separate day and night palette… | `npx shadcn@latest add https://fancy-ui.rama.app/r/pixel-scene.json` |
| popover | registry:ui | An anchored panel that opens next to a trigger and holds interactive content — quick settings, a small form, more than a tooltip can carry | `npx shadcn@latest add https://fancy-ui.rama.app/r/popover.json` |
| presence | registry:ui | Mounts and unmounts content with a real entrance and exit through one direction-aware transition, tracking opening/open/closing state, marking the panel inert … | `npx shadcn@latest add https://fancy-ui.rama.app/r/presence.json` |
| pressable | registry:ui | A wrapper that gives any interactive child a consistent, cross-browser press animation — scale down on pointerdown/keydown, back to rest on release, with a sta… | `npx shadcn@latest add https://fancy-ui.rama.app/r/pressable.json` |
| prompt-suggestions | registry:ui | Row of prompt pills that cascade in after a reply lands, offering the user a next turn without composing one | `npx shadcn@latest add https://fancy-ui.rama.app/r/prompt-suggestions.json` |
| pulse-beam | registry:ui | Breathing border glow that wraps any card: colour blobs drift along the edges as a crisp 1px ring, a feathered inner glow and a blurred bloom, with slow hue ro… | `npx shadcn@latest add https://fancy-ui.rama.app/r/pulse-beam.json` |
| radio-group | registry:ui | A set of mutually exclusive options, built on real input type=radio elements sharing one name so the browser gives the roving tab stop and keyboard navigation … | `npx shadcn@latest add https://fancy-ui.rama.app/r/radio-group.json` |
| rainbow-button | registry:ui | Animated button with a rainbow gradient border; on hover or focus a rainbow beam rides around the border with a soft halo. Other native attributes are forwarde… | `npx shadcn@latest add https://fancy-ui.rama.app/r/rainbow-button.json` |
| reasoning-panel | registry:ui | Collapsible reasoning trace that streams while the model thinks, then folds itself into a one-line summary | `npx shadcn@latest add https://fancy-ui.rama.app/r/reasoning-panel.json` |
| recommendation-card | registry:ui | An agent's proposal awaiting an answer: a kicker, the recommendation, a confidence figure counted up beside a ring that fills to match, and two buttons that co… | `npx shadcn@latest add https://fancy-ui.rama.app/r/recommendation-card.json` |
| reveal | registry:ui | Content-agnostic entrance animation triggered by scroll, mount, or a manual switch, with six directional/scale presets and an arbitrary-length JS-computed stag… | `npx shadcn@latest add https://fancy-ui.rama.app/r/reveal.json` |
| ripple | registry:ui | Set of concentric circles that pulse in a staggered wave, each ring larger, more transparent, and more delayed than the last, with the outermost ring rendered … | `npx shadcn@latest add https://fancy-ui.rama.app/r/ripple.json` |
| ripple-button | registry:ui | Button that answers each click with a ripple of light from the click point, a soft glow and two fine rings spreading out like a wave; on hover a glow follows t… | `npx shadcn@latest add https://fancy-ui.rama.app/r/ripple-button.json` |
| scroll-anchor | registry:ui | A scroll region that stays pinned to its last line while content streams in, lets go when the reader scrolls up, and floats a pill offering the way back down | `npx shadcn@latest add https://fancy-ui.rama.app/r/scroll-anchor.json` |
| scroll-progress | registry:ui | Thin reading-progress bar that fills as the page — or a target element — scrolls, driven by a zero-JS CSS scroll-timeline where supported and a throttled scrol… | `npx shadcn@latest add https://fancy-ui.rama.app/r/scroll-progress.json` |
| search-input | registry:ui | A pill-shaped search field with a leading icon, a clear button once there's something to clear, and optional debounced search | `npx shadcn@latest add https://fancy-ui.rama.app/r/search-input.json` |
| select | registry:ui | A single-choice dropdown built on a real button and a portalled listbox panel, with full keyboard navigation, typeahead and focus that never leaves the trigger. | `npx shadcn@latest add https://fancy-ui.rama.app/r/select.json` |
| sheet | registry:ui | A modal panel that slides in from an edge of the viewport, for settings, filters, or any focused task that doesn't need a full page | `npx shadcn@latest add https://fancy-ui.rama.app/r/sheet.json` |
| shimmer-button | registry:ui | Pill button with a satin sheen: a soft band of light sweeps across the face and lifts the label, then rests; on hover the highlight follows the pointer | `npx shadcn@latest add https://fancy-ui.rama.app/r/shimmer-button.json` |
| sidebar | registry:ui | A collapsible, grouped navigation rail with labelled sections, a current-item accent, and badges folded into each item's accessible name. | `npx shadcn@latest add https://fancy-ui.rama.app/r/sidebar.json` |
| skeleton | registry:ui | Placeholder bones — a block, one or more text lines, or a circular avatar — with a phase-synced shimmer sweep or opacity pulse, that swaps to real content once… | `npx shadcn@latest add https://fancy-ui.rama.app/r/skeleton.json` |
| slider | registry:ui | Restyled native range input with a purple-to-cyan gradient fill that tracks the current value and a glowing thumb | `npx shadcn@latest add https://fancy-ui.rama.app/r/slider.json` |
| smooth-cursor | registry:ui | Multiplayer-style cursor: an upright coloured arrow with a white rim follows the pointer on a spring, and a name pill trails it on a softer spring and dims whe… | `npx shadcn@latest add https://fancy-ui.rama.app/r/smooth-cursor.json` |
| sound | registry:lib | The opt-in interface sound engine, its themes, hooks and toggle. | `npx shadcn@latest add https://fancy-ui.rama.app/r/sound.json` |
| sources | registry:ui | The citations under an answer: a pill carrying a stack of domain monograms and a count, expanding into scannable source cards with title, host, and the line wo… | `npx shadcn@latest add https://fancy-ui.rama.app/r/sources.json` |
| sparkles | registry:ui | Canvas-based floating particle sparkle effect with configurable density and colors | `npx shadcn@latest add https://fancy-ui.rama.app/r/sparkles.json` |
| sparkles-text | registry:ui | Text overlaid with small SVG star sparkles that scale, rotate, and fade in a continuous loop, each one regenerating at a random position once its lifespan expi… | `npx shadcn@latest add https://fancy-ui.rama.app/r/sparkles-text.json` |
| status-morph | registry:ui | A 1em SVG status icon that morphs between idle, loading, success, and error, closing its spinning ring into a drawn check or cross with a portalled live region… | `npx shadcn@latest add https://fancy-ui.rama.app/r/status-morph.json` |
| stepper | registry:ui | A multi-step progress indicator on light rails: each completed step sends a single sweep of light down the rail to the next, the current bullet breathes a soft… | `npx shadcn@latest add https://fancy-ui.rama.app/r/stepper.json` |
| sticky-scroll | registry:ui | Two-column scroll narrative with a scrolling item list and a sticky panel that swaps its content to the item centred in view, stacking to a single top-sticky p… | `npx shadcn@latest add https://fancy-ui.rama.app/r/sticky-scroll.json` |
| story-thread | registry:ui | A narrative thread for scroll stories: the page pans sideways through your sections while a dotted line draws itself from node to node, a glowing head rides it… | `npx shadcn@latest add https://fancy-ui.rama.app/r/story-thread.json` |
| streaming-text | registry:ui | Renders a growing string as a live token stream: the appended delta lands tinted and settles, with an optional block cursor while the response is in flight | `npx shadcn@latest add https://fancy-ui.rama.app/r/streaming-text.json` |
| subagent-list | registry:ui | Fan-out panel for parallel workers: one row per delegated agent with its status dot, model badge, task, and its own progress bar | `npx shadcn@latest add https://fancy-ui.rama.app/r/subagent-list.json` |
| sun-switch | registry:ui | A theme switch drawn as a pixel sun. Hover it for a lens on its true colours; click it and the new theme spreads from the sun in a dithered, grid-aligned wave. | `npx shadcn@latest add https://fancy-ui.rama.app/r/sun-switch.json` |
| switch | registry:ui | A sliding on/off control that takes effect immediately, built on a native checkbox input | `npx shadcn@latest add https://fancy-ui.rama.app/r/switch.json` |
| tabs | registry:ui | A tablist compound with roving-tabindex keyboard navigation, automatic or manual activation, and an accent-underline or segmented visual style. | `npx shadcn@latest add https://fancy-ui.rama.app/r/tabs.json` |
| terminal-block | registry:ui | Live command transcript: the prompt line, output as it streams in with its ANSI colours read, a block cursor while it runs, and an exit-status footer when it s… | `npx shadcn@latest add https://fancy-ui.rama.app/r/terminal-block.json` |
| terminal-text | registry:ui | Terminal-style text streamer with per-character animation, blinking cursor, and glitch effect | `npx shadcn@latest add https://fancy-ui.rama.app/r/terminal-text.json` |
| text-generate-effect | registry:ui | Typewriter-style text reveal that fades in words one by one with optional blur | `npx shadcn@latest add https://fancy-ui.rama.app/r/text-generate-effect.json` |
| text-reveal-card | registry:ui | Card that reveals text on horizontal mouse drag with animated star particles | `npx shadcn@latest add https://fancy-ui.rama.app/r/text-reveal-card.json` |
| text-roll | registry:ui | Single-line text that rolls to its new value per grapheme, odometer-style, whenever the value prop changes — while the real, unsplit text stays selectable and … | `npx shadcn@latest add https://fancy-ui.rama.app/r/text-roll.json` |
| textarea | registry:ui | A multi-line text field with an optional live character counter and auto-growing height, built on a native textarea | `npx shadcn@latest add https://fancy-ui.rama.app/r/textarea.json` |
| thinking-indicator | registry:ui | Live agent status line with a shimmering activity label and an elapsed timer, as a bare inline row or a bordered status pill | `npx shadcn@latest add https://fancy-ui.rama.app/r/thinking-indicator.json` |
| thread-list | registry:ui | Conversation history for a chat sidebar: one row per thread with an unread dot, its last message, and a relative timestamp, plus selection and per-row delete | `npx shadcn@latest add https://fancy-ui.rama.app/r/thread-list.json` |
| tick-nav | registry:ui | A navigation list on a ruler of tick marks: every line the pointer crosses plucks like a string, neighbouring lines and ticks stretch and light up on springs, … | `npx shadcn@latest add https://fancy-ui.rama.app/r/tick-nav.json` |
| time-picker | registry:ui | A field that opens a floating listbox of time slots generated at a configurable step, fully keyboard-navigable, with the highlighted slot always scrolled into … | `npx shadcn@latest add https://fancy-ui.rama.app/r/time-picker.json` |
| timeline | registry:ui | Vertical timeline drawn as a light rail: a glowing head travels a hairline track as you scroll, leaving a soft trail and igniting each entry's dot as it arrive… | `npx shadcn@latest add https://fancy-ui.rama.app/r/timeline.json` |
| toast | registry:ui | A notification system: call toast() from anywhere to queue one, mount <Toaster /> once to render the stack — success, error, info and loading variants, an opti… | `npx shadcn@latest add https://fancy-ui.rama.app/r/toast.json` |
| toggle | registry:ui | Two-state button carrying aria-pressed, for a single on/off option like a formatting mark or a filter | `npx shadcn@latest add https://fancy-ui.rama.app/r/toggle.json` |
| toggle-group | registry:ui | A segmented row of toggle buttons with roving-tabindex keyboard navigation and single or multiple selection. | `npx shadcn@latest add https://fancy-ui.rama.app/r/toggle-group.json` |
| tool-call | registry:ui | One tool invocation in a disclosure card: status dot, tool name, duration, and the request and result payloads pretty-printed on expand | `npx shadcn@latest add https://fancy-ui.rama.app/r/tool-call.json` |
| tool-timeline | registry:ui | Compact session summary of an agent's tool calls: one row per action on a vertical rail, with the target it touched, its diff stats, and when it ran | `npx shadcn@latest add https://fancy-ui.rama.app/r/tool-timeline.json` |
| tooltip | registry:ui | A small anchored label that explains a control on hover or focus — plain text only, never interactive content | `npx shadcn@latest add https://fancy-ui.rama.app/r/tooltip.json` |
| tracing-beam | registry:ui | A reading lamp on a rail beside long-form content: it trails the reader's eye on a spring, leaves what has been read softly lit, and ticks off each heading as … | `npx shadcn@latest add https://fancy-ui.rama.app/r/tracing-beam.json` |
| typing-indicator | registry:ui | Animated three-dot presence indicator with a staggered CSS wave, tuned to signal activity without pulling focus | `npx shadcn@latest add https://fancy-ui.rama.app/r/typing-indicator.json` |
| utils | registry:lib | The class-name merge helper every component styles itself with. | `npx shadcn@latest add https://fancy-ui.rama.app/r/utils.json` |
| voice-input | registry:ui | A mic button that opens into a recording panel: a live waveform painted from amplitude levels you supply, a stopwatch, the transcript as it arrives, and a cros… | `npx shadcn@latest add https://fancy-ui.rama.app/r/voice-input.json` |
| web-search | registry:ui | A search the agent ran: the query in a search-bar header, an indeterminate scanning bar while it runs, and results that land one row at a time | `npx shadcn@latest add https://fancy-ui.rama.app/r/web-search.json` |

## For AI agents

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