---
name: "@smoothui"
slug: "smoothui"
description: "A collection of 50+ animated React UI components and blocks built with Tailwind CSS v4, Motion (Framer Motion), and optionally GSAP. Focuses on microinteractions: smooth transitions, gesture feedback, and delightful hover/reveal effects. Categories include UI Components, Interactive Components, Layout Components, and Utility Components. Compatible with shadcn/ui, installable via shadcn CLI or a dedicated SmoothUI CLI. Supports dark/light mode; fully typed in TypeScript. Free (Vercel OSS). Use for: layering polished motion design onto a shadcn/ui project's interactive elements — buttons, modals, cards, text reveals — without building animations from scratch."
category: "Animated components"
tags: ["aesthetic", "ai", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "forms", "gaming", "hooks", "icons", "loaders", "marketing", "media", "mobile", "navigation", "overlays", "pro-available", "retro", "text-effects"]
framework: "react"
license: "MIT"
author: "educlopez"
website: "https://smoothui.dev"
github: "https://github.com/educlopez/smoothui"
registry: "https://smoothui.dev/r/registry.json"
pro: true
pro_url: "https://smoothui.dev/docs/blocks/pricing"
github_stars: 843
component_count: 246
generated_at: "2026-09-21T01:50:16.753Z"
---

# @smoothui

A collection of 50+ animated React UI components and blocks built with Tailwind CSS v4, Motion (Framer Motion), and optionally GSAP. Focuses on microinteractions: smooth transitions, gesture feedback, and delightful hover/reveal effects. Categories include UI Components, Interactive Components, Layout Components, and Utility Components. Compatible with shadcn/ui, installable via shadcn CLI or a dedicated SmoothUI CLI. Supports dark/light mode; fully typed in TypeScript. Free (Vercel OSS). Use for: layering polished motion design onto a shadcn/ui project's interactive elements — buttons, modals, cards, text reveals — without building animations from scratch.

## Links

- Website: https://smoothui.dev
- GitHub: https://github.com/educlopez/smoothui
- Registry JSON: https://smoothui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/smoothui
- This file: https://sh4dcn.vercel.app/md/smoothui.md
- Pro / pricing: https://smoothui.dev/docs/blocks/pricing

## Install

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

## Components (246)

| name | type | description | install |
| --- | --- | --- | --- |
| cli | registry:ui | CLI to install SmoothUI components - beautifully designed React components with smooth animations | `npx shadcn@latest add https://smoothui.dev/r/cli.json` |
| data | registry:lib | Data | `npx shadcn@latest add https://smoothui.dev/r/data.json` |
| cta-1 | registry:block | Centered CTA block with radial glow background | `npx shadcn@latest add https://smoothui.dev/r/cta-1.json` |
| cta-2 | registry:block | Split layout CTA block with text and illustration | `npx shadcn@latest add https://smoothui.dev/r/cta-2.json` |
| cta-3 | registry:block | Compact banner CTA block | `npx shadcn@latest add https://smoothui.dev/r/cta-3.json` |
| faq-1 | registry:block | FAQ grid block with categorized tabs and icons | `npx shadcn@latest add https://smoothui.dev/r/faq-1.json` |
| faq-2 | registry:block | FAQ accordion block with expandable questions | `npx shadcn@latest add https://smoothui.dev/r/faq-2.json` |
| faq-3 | registry:block | Searchable FAQ section with filter animations | `npx shadcn@latest add https://smoothui.dev/r/faq-3.json` |
| faq-4 | registry:block | Categorized FAQ section with tab navigation | `npx shadcn@latest add https://smoothui.dev/r/faq-4.json` |
| features-1 | registry:block | Feature grid block with animated cards | `npx shadcn@latest add https://smoothui.dev/r/features-1.json` |
| features-2 | registry:block | Bento grid features block with asymmetric layout | `npx shadcn@latest add https://smoothui.dev/r/features-2.json` |
| features-3 | registry:block | Alternating features block with side-by-side layout | `npx shadcn@latest add https://smoothui.dev/r/features-3.json` |
| footer-1 | registry:block | Simple footer block with links and social icons | `npx shadcn@latest add https://smoothui.dev/r/footer-1.json` |
| footer-2 | registry:block | Complex footer block with newsletter and extended links | `npx shadcn@latest add https://smoothui.dev/r/footer-2.json` |
| footer-3 | registry:block | Mega footer with newsletter and social links | `npx shadcn@latest add https://smoothui.dev/r/footer-3.json` |
| footer-4 | registry:block | Minimal single-row footer | `npx shadcn@latest add https://smoothui.dev/r/footer-4.json` |
| header-1 | registry:block | Modern header block with navigation and mobile menu | `npx shadcn@latest add https://smoothui.dev/r/header-1.json` |
| header-2 | registry:block | Premium header block with gradient logo and smooth animations | `npx shadcn@latest add https://smoothui.dev/r/header-2.json` |
| header-3 | registry:block | Premium header block with gradient logo and smooth animations | `npx shadcn@latest add https://smoothui.dev/r/header-3.json` |
| header-4 | registry:block | Interactive 3D grid hero header inspired by rauno.me 2024 | `npx shadcn@latest add https://smoothui.dev/r/header-4.json` |
| header-5 | registry:block | Spotlight hero block with dark theme and gradient text | `npx shadcn@latest add https://smoothui.dev/r/header-5.json` |
| header-6 | registry:block | Minimal hero block with clean typography | `npx shadcn@latest add https://smoothui.dev/r/header-6.json` |
| logo-cloud-1 | registry:block | Simple logo cloud block with grid layout | `npx shadcn@latest add https://smoothui.dev/r/logo-cloud-1.json` |
| logo-cloud-2 | registry:block | Animated logo cloud block with infinite scroll | `npx shadcn@latest add https://smoothui.dev/r/logo-cloud-2.json` |
| logo-cloud-3 | registry:block | Infinite scrolling logo marquee | `npx shadcn@latest add https://smoothui.dev/r/logo-cloud-3.json` |
| logo-cloud-4 | registry:block | Interactive logo grid with hover effects | `npx shadcn@latest add https://smoothui.dev/r/logo-cloud-4.json` |
| pricing-1 | registry:block | Simple pricing block with single plan | `npx shadcn@latest add https://smoothui.dev/r/pricing-1.json` |
| pricing-2 | registry:block | Modern pricing block with three tiers | `npx shadcn@latest add https://smoothui.dev/r/pricing-2.json` |
| pricing-3 | registry:block | Creative pricing block with two plans | `npx shadcn@latest add https://smoothui.dev/r/pricing-3.json` |
| shared | registry:component | Shared components for SmoothUI blocks | `npx shadcn@latest add https://smoothui.dev/r/shared.json` |
| stats-1 | registry:block | Grid stats section block with hover effects | `npx shadcn@latest add https://smoothui.dev/r/stats-1.json` |
| stats-2 | registry:block | Cards stats section block with icons and trends | `npx shadcn@latest add https://smoothui.dev/r/stats-2.json` |
| team-1 | registry:block | Grid team section block with hover effects | `npx shadcn@latest add https://smoothui.dev/r/team-1.json` |
| team-2 | registry:block | Carousel team section block with auto-play | `npx shadcn@latest add https://smoothui.dev/r/team-2.json` |
| testimonials-1 | registry:block | Simple testimonials block with auto-rotating cards | `npx shadcn@latest add https://smoothui.dev/r/testimonials-1.json` |
| testimonials-2 | registry:block | Grid testimonials block with navigation arrows | `npx shadcn@latest add https://smoothui.dev/r/testimonials-2.json` |
| testimonials-3 | registry:block | Star testimonials block with grid layout | `npx shadcn@latest add https://smoothui.dev/r/testimonials-3.json` |
| agent-avatar | registry:ui | Canvas-based generative pixel avatar for AI agents, unique per seed. | `npx shadcn@latest add https://smoothui.dev/r/agent-avatar.json` |
| ai-approval | registry:ui | Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away. | `npx shadcn@latest add https://smoothui.dev/r/ai-approval.json` |
| ai-artifact | registry:ui | Generated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading. | `npx shadcn@latest add https://smoothui.dev/r/ai-artifact.json` |
| ai-branch | registry:ui | An interactive AI branch component for displaying conversation flows. | `npx shadcn@latest add https://smoothui.dev/r/ai-branch.json` |
| ai-citation | registry:ui | Inline citation pill that opens an origin-aware source card, anchored to the pill it came from. | `npx shadcn@latest add https://smoothui.dev/r/ai-citation.json` |
| ai-context-meter | registry:ui | Context window meter whose ring fills and shifts hue at the warning threshold, never changing size. | `npx shadcn@latest add https://smoothui.dev/r/ai-context-meter.json` |
| ai-conversation | registry:ui | Thread scroll container that follows the bottom only while the reader is already there, offering a jump-to-latest pill when it stops. | `npx shadcn@latest add https://smoothui.dev/r/ai-conversation.json` |
| ai-core | registry:ui | Shared AI state contract, per-state motion presets and microphone amplitude hooks for SmoothUI AI components. | `npx shadcn@latest add https://smoothui.dev/r/ai-core.json` |
| ai-diff | registry:ui | Proposed code or data edit where added lines wipe in from the left and rejected lines collapse to nothing. | `npx shadcn@latest add https://smoothui.dev/r/ai-diff.json` |
| ai-input | registry:ui | Deprecated alias for morph-surface. Kept for one release so existing installs keep resolving. | `npx shadcn@latest add https://smoothui.dev/r/ai-input.json` |
| ai-loader | registry:ui | Family of AI waiting indicators — dots, sweep bar and pixel grid — sharing one cycle length, with an optional elapsed counter. | `npx shadcn@latest add https://smoothui.dev/r/ai-loader.json` |
| ai-message | registry:ui | Chat message bubble whose action row slides out of the bubble's own edge, revealed on hover and on focus. | `npx shadcn@latest add https://smoothui.dev/r/ai-message.json` |
| ai-orb-face | registry:ui | Cartoon character orb whose expression carries the AI state — cursor-following gaze, natural blinks, thinking saccades, happy arcs and spiral eyes. | `npx shadcn@latest add https://smoothui.dev/r/ai-orb-face.json` |
| ai-prompt-input | registry:ui | AI prompt composer with autogrowing textarea, attachment chips and a send-to-stop path morph. | `npx shadcn@latest add https://smoothui.dev/r/ai-prompt-input.json` |
| ai-reasoning | registry:ui | Collapsible AI reasoning trace that shimmers only while the model works, reports how long it took and gets out of the way. | `npx shadcn@latest add https://smoothui.dev/r/ai-reasoning.json` |
| ai-response | registry:ui | Streaming assistant text where words animate in as they arrive, with a caret that rides the last glyph and inline citation pills. | `npx shadcn@latest add https://smoothui.dev/r/ai-response.json` |
| ai-sources | registry:ui | Favicon stack that fans out on hover and expands into a source list, with each favicon morphing into its row. | `npx shadcn@latest add https://smoothui.dev/r/ai-sources.json` |
| ai-suggestions | registry:ui | Prompt suggestion chips that radiate in from the centre of the row rather than sweeping left to right. | `npx shadcn@latest add https://smoothui.dev/r/ai-suggestions.json` |
| ai-task-list | registry:ui | Live agent plan with nested steps, a drawn checkmark on completion and a travelling underline on whatever is running. | `npx shadcn@latest add https://smoothui.dev/r/ai-task-list.json` |
| ai-tool-call | registry:ui | Collapsible tool invocation whose status badge is one ring that evolves — breathing, spinning, then drawing a check or a cross. | `npx shadcn@latest add https://smoothui.dev/r/ai-tool-call.json` |
| animated-avatar-group | registry:ui | Stack of overlapping avatars with smooth expand/collapse animation | `npx shadcn@latest add https://smoothui.dev/r/animated-avatar-group.json` |
| animated-file-upload | registry:ui | Animated drag-and-drop file upload component | `npx shadcn@latest add https://smoothui.dev/r/animated-file-upload.json` |
| animated-input | registry:ui | A AnimatedInput component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/animated-input.json` |
| animated-list | registry:ui | A list that animates additions, removals and reordering, with an optional auto-feed mode. | `npx shadcn@latest add https://smoothui.dev/r/animated-list.json` |
| animated-number-input | registry:ui | A numeric field with rolling digits, keyboard stepping and horizontal scrub-to-change. | `npx shadcn@latest add https://smoothui.dev/r/animated-number-input.json` |
| animated-o-t-p-input | registry:ui | A AnimatedOTPInput component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/animated-o-t-p-input.json` |
| animated-progress-bar | registry:ui | A AnimatedProgressBar component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/animated-progress-bar.json` |
| animated-stepper | registry:ui | Animated stepper/wizard component with step transitions | `npx shadcn@latest add https://smoothui.dev/r/animated-stepper.json` |
| animated-tabs | registry:ui | Animated tabs component with sliding indicator | `npx shadcn@latest add https://smoothui.dev/r/animated-tabs.json` |
| animated-tags | registry:ui | A AnimatedTags component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/animated-tags.json` |
| animated-toggle | registry:ui | Animated toggle switch with morph and icon variants | `npx shadcn@latest add https://smoothui.dev/r/animated-toggle.json` |
| animated-tooltip | registry:ui | Spring-animated tooltip with multiple placement options | `npx shadcn@latest add https://smoothui.dev/r/animated-tooltip.json` |
| aperture-blur-transition | registry:ui | Persistent WebGL shader transition wrapper that swaps content behind a cinematic aperture bloom. | `npx shadcn@latest add https://smoothui.dev/r/aperture-blur-transition.json` |
| app-download-stack | registry:ui | A AppDownloadStack component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/app-download-stack.json` |
| apple-invites | registry:ui | A AppleInvites component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/apple-invites.json` |
| arcade-pixel | registry:ui | An ArcadePixel component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/arcade-pixel.json` |
| ascii-render | registry:ui | An AsciiRender component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/ascii-render.json` |
| aurora-curtain | registry:ui | An AuroraCurtain background component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/aurora-curtain.json` |
| auth-form | registry:ui | A presentation-only sign-in / sign-up form that reveals fields progressively and stays fully accessible. | `npx shadcn@latest add https://smoothui.dev/r/auth-form.json` |
| basic-accordion | registry:ui | A BasicAccordion component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/basic-accordion.json` |
| basic-dropdown | registry:ui | A BasicDropdown component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/basic-dropdown.json` |
| basic-modal | registry:ui | A BasicModal component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/basic-modal.json` |
| basic-toast | registry:ui | A BasicToast component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/basic-toast.json` |
| blur-out-up | registry:ui | A BlurOutUp text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/blur-out-up.json` |
| book | registry:ui | A 3D CSS book component with perspective transforms and hover animation | `npx shadcn@latest add https://smoothui.dev/r/book.json` |
| border-beam | registry:ui | A BorderBeam component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/border-beam.json` |
| bottom-up-letters | registry:ui | A BottomUpLetters text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/bottom-up-letters.json` |
| breadcrumb | registry:ui | Animated breadcrumb navigation with stagger-in animation | `npx shadcn@latest add https://smoothui.dev/r/breadcrumb.json` |
| breakpoint-indicator | registry:ui | A BreakpointIndicator component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/breakpoint-indicator.json` |
| button-copy | registry:ui | A ButtonCopy component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/button-copy.json` |
| card-swipe-deck | registry:ui | A CardSwipeDeck component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/card-swipe-deck.json` |
| checkbox | registry:ui | An animated Checkbox component for SmoothUI with checkmark and indeterminate state animations. | `npx shadcn@latest add https://smoothui.dev/r/checkbox.json` |
| chroma-blur-transition | registry:ui | Persistent WebGL shader transition wrapper that swaps content under a soft chromatic blur wash. | `npx shadcn@latest add https://smoothui.dev/r/chroma-blur-transition.json` |
| clip-corners-button | registry:ui | A ClipCornersButton component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/clip-corners-button.json` |
| code-block | registry:ui | A CodeBlock component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/code-block.json` |
| combobox | registry:ui | An animated Combobox component for SmoothUI with text filtering, async search, and keyboard navigation. | `npx shadcn@latest add https://smoothui.dev/r/combobox.json` |
| context-menu | registry:ui | An animated Context Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation. | `npx shadcn@latest add https://smoothui.dev/r/context-menu.json` |
| contribution-graph | registry:ui | A ContributionGraph component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/contribution-graph.json` |
| country-dialog | registry:ui | A CountryDialog component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/country-dialog.json` |
| coverflow-carousel | registry:ui | A CoverflowCarousel component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/coverflow-carousel.json` |
| cursor-follow | registry:ui | A CursorFollow component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/cursor-follow.json` |
| cursor-image-trail | registry:ui | A CursorImageTrail component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/cursor-image-trail.json` |
| depth-parallax-words | registry:ui | A DepthParallaxWords text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/depth-parallax-words.json` |
| dialog | registry:ui | Animated Dialog and AlertDialog components for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/dialog.json` |
| dither-chart | registry:ui | A DitherChart component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/dither-chart.json` |
| dither-image | registry:ui | A DitherImage component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/dither-image.json` |
| dock | registry:ui | A Dock component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/dock.json` |
| dot-morph-button | registry:ui | A DotMorphButton component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/dot-morph-button.json` |
| drawer | registry:ui | An animated Drawer component for SmoothUI that slides from any side. | `npx shadcn@latest add https://smoothui.dev/r/drawer.json` |
| drawing-cursor | registry:ui | A DrawingCursor component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/drawing-cursor.json` |
| dropdown-menu | registry:ui | An animated Dropdown Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation. | `npx shadcn@latest add https://smoothui.dev/r/dropdown-menu.json` |
| duration-picker | registry:ui | A DurationPicker component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/duration-picker.json` |
| dynamic-island | registry:ui | A DynamicIsland component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/dynamic-island.json` |
| emboss-surface | registry:ui | An EmbossSurface component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/emboss-surface.json` |
| emoji-reaction | registry:ui | A reaction bar with particle bursts, a rolling odometer count, and a hover/focus emoji picker. | `npx shadcn@latest add https://smoothui.dev/r/emoji-reaction.json` |
| expandable-cards | registry:ui | A ExpandableCards component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/expandable-cards.json` |
| expandable-navbar | registry:ui | An ExpandableNavbar component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/expandable-navbar.json` |
| exposure-slider | registry:ui | iOS-style exposure slider with draggable ticker and progress ring | `npx shadcn@latest add https://smoothui.dev/r/exposure-slider.json` |
| fade-through | registry:ui | A FadeThrough text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/fade-through.json` |
| favicon-search | registry:ui | A keyboard-driven search field that shows each result's favicon, with a combobox listbox and highlighted matches. | `npx shadcn@latest add https://smoothui.dev/r/favicon-search.json` |
| figma-comment | registry:ui | A FigmaComment component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/figma-comment.json` |
| file-tree | registry:ui | A FileTree component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/file-tree.json` |
| floating-navbar | registry:ui | A FloatingNavbar component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/floating-navbar.json` |
| focus-blur-resolve | registry:ui | A FocusBlurResolve text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/focus-blur-resolve.json` |
| folder-reveal | registry:ui | A FolderReveal component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/folder-reveal.json` |
| form | registry:ui | A lightweight, composable Form component with animated error messages and full accessibility support. | `npx shadcn@latest add https://smoothui.dev/r/form.json` |
| github-stars-animation | registry:ui | A GitHubStarsAnimation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/github-stars-animation.json` |
| glass-card | registry:ui | A GlassCard component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/glass-card.json` |
| glow-hover-card | registry:ui | A GlowHoverCards component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/glow-hover-card.json` |
| gooey-filter | registry:ui | A GooeyFilter component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/gooey-filter.json` |
| gooey-popover | registry:ui | A GooeyPopover component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/gooey-popover.json` |
| gravity-letters | registry:ui | A GravityLetters component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/gravity-letters.json` |
| gravity-stars | registry:ui | A GravityStars particle background component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/gravity-stars.json` |
| grid-loader | registry:ui | 3x3 grid-based loading animation with preset patterns | `npx shadcn@latest add https://smoothui.dev/r/grid-loader.json` |
| holographic-foil | registry:ui | A HolographicFoil component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/holographic-foil.json` |
| hover-expand | registry:ui | A HoverExpand component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/hover-expand.json` |
| hover-image-list | registry:ui | A HoverImageList component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/hover-image-list.json` |
| image-generation-panel | registry:ui | A text-to-image generation console — prompt and settings up top, a full-width 2x2 batch resolving from low-res mosaic to sharp below. | `npx shadcn@latest add https://smoothui.dev/r/image-generation-panel.json` |
| image-metadata-preview | registry:ui | A ImageMetadataPreview component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/image-metadata-preview.json` |
| infinite-slider | registry:ui | A InfiniteSlider component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/infinite-slider.json` |
| inline-testimonials | registry:ui | Testimonial quotes woven into a paragraph that expand inline on hover or focus. | `npx shadcn@latest add https://smoothui.dev/r/inline-testimonials.json` |
| interactive-image-selector | registry:ui | A InteractiveImageSelector component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/interactive-image-selector.json` |
| job-listing-component | registry:ui | A JobListingComponent component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/job-listing-component.json` |
| kinetic-center-build | registry:ui | A KineticCenterBuild text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/kinetic-center-build.json` |
| kinetic-type-scroll | registry:ui | A KineticTypeScroll text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/kinetic-type-scroll.json` |
| line-by-line-slide | registry:ui | A LineByLineSlide text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/line-by-line-slide.json` |
| liquid-metal | registry:ui | A LiquidMetal component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/liquid-metal.json` |
| mac-terminal | registry:ui | A MacTerminal component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/mac-terminal.json` |
| magnetic-button | registry:ui | Button that subtly follows the cursor with magnetic effect | `npx shadcn@latest add https://smoothui.dev/r/magnetic-button.json` |
| magnetic-field | registry:ui | A MagneticField component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/magnetic-field.json` |
| mask-reveal-up | registry:ui | A MaskRevealUp text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/mask-reveal-up.json` |
| micro-scale-fade | registry:ui | A MicroScaleFade text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/micro-scale-fade.json` |
| morph-icon | registry:ui | A MorphIcon component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/morph-icon.json` |
| morph-surface | registry:ui | Feedback dock that morphs from a compact pill into a panel and back, with a spring layout transition. | `npx shadcn@latest add https://smoothui.dev/r/morph-surface.json` |
| motion-loader | registry:ui | A MotionLoader component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/motion-loader.json` |
| music-toggle | registry:ui | A play/pause control shaped like a spinning record, with a live waveform and seekable progress ring. | `npx shadcn@latest add https://smoothui.dev/r/music-toggle.json` |
| notification-badge | registry:ui | Animated notification badge with count and status variants | `npx shadcn@latest add https://smoothui.dev/r/notification-badge.json` |
| number-flow | registry:ui | A NumberFlow component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/number-flow.json` |
| orb | registry:ui | An Orb component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/orb.json` |
| orbital-image-wheel | registry:ui | An OrbitalImageWheel component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/orbital-image-wheel.json` |
| organic-merge-transition | registry:ui | A soft-min SDF merge transition with two organic expanding shapes. | `npx shadcn@latest add https://smoothui.dev/r/organic-merge-transition.json` |
| page-preloader | registry:ui | A page-preloader curtain that plays once and then uncovers the page. | `npx shadcn@latest add https://smoothui.dev/r/page-preloader.json` |
| pagination | registry:ui | Animated pagination with spring-based active page indicator | `npx shadcn@latest add https://smoothui.dev/r/pagination.json` |
| parallax-layers | registry:ui | Multi-layer depth parallax for hero sections, with optional pointer-driven parallax. | `npx shadcn@latest add https://smoothui.dev/r/parallax-layers.json` |
| per-character-rise | registry:ui | A PerCharacterRise text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/per-character-rise.json` |
| per-word-crossfade | registry:ui | A PerWordCrossfade text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/per-word-crossfade.json` |
| perspective-text-3d | registry:ui | A PerspectiveText3D text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/perspective-text-3d.json` |
| photo-stack | registry:ui | A PhotoStack component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/photo-stack.json` |
| phototab | registry:ui | A Phototab component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/phototab.json` |
| pinned-list | registry:ui | A list where selected items pin to the top and animate out of the flow into a pinned section. | `npx shadcn@latest add https://smoothui.dev/r/pinned-list.json` |
| pixel-brush-canvas | registry:ui | A PixelBrushCanvas component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/pixel-brush-canvas.json` |
| pixel-flow-field | registry:ui | A PixelFlowField background component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/pixel-flow-field.json` |
| power-off-slide | registry:ui | A PowerOffSlide component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/power-off-slide.json` |
| price-flow | registry:ui | A PriceFlow component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/price-flow.json` |
| prism-sweep-transition | registry:ui | A persistent WebGL prism sweep transition wrapper for route and state changes. | `npx shadcn@latest add https://smoothui.dev/r/prism-sweep-transition.json` |
| product-card | registry:ui | Animated product card component for ecommerce | `npx shadcn@latest add https://smoothui.dev/r/product-card.json` |
| progressive-blur | registry:ui | A ProgressiveBlur component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/progressive-blur.json` |
| radial-circles-transition | registry:ui | A radial SDF circle pattern transition inspired by the Codrops radial circles step. | `npx shadcn@latest add https://smoothui.dev/r/radial-circles-transition.json` |
| radio-group | registry:ui | An animated Radio Group component for SmoothUI with selection indicator spring animation. | `npx shadcn@latest add https://smoothui.dev/r/radio-group.json` |
| ransom-note | registry:ui | A RansomNote component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/ransom-note.json` |
| reveal-text | registry:ui | A RevealText component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/reveal-text.json` |
| reviews-carousel | registry:ui | A ReviewsCarousel component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/reviews-carousel.json` |
| rich-popover | registry:ui | A RichPopover component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/rich-popover.json` |
| rolling-text | registry:ui | A RollingText text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/rolling-text.json` |
| scale-down-fade | registry:ui | A ScaleDownFade text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/scale-down-fade.json` |
| scramble-hover | registry:ui | A ScrambleHover component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/scramble-hover.json` |
| scroll-image-reveal | registry:ui | An image revealed by an animated mask as it scrolls into view, with a counter-parallax on the image. | `npx shadcn@latest add https://smoothui.dev/r/scroll-image-reveal.json` |
| scroll-progress | registry:ui | A reading-progress indicator with bar, ring, number and segmented variants. | `npx shadcn@latest add https://smoothui.dev/r/scroll-progress.json` |
| scroll-reveal-paragraph | registry:ui | A ScrollRevealParagraph component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/scroll-reveal-paragraph.json` |
| scrollable-card-stack | registry:ui | A ScrollableCardStack component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/scrollable-card-stack.json` |
| scrubber | registry:ui | Design-tool style scrubber slider with animated thumb and built-in label | `npx shadcn@latest add https://smoothui.dev/r/scrubber.json` |
| sdf-blob-transition | registry:ui | A persistent WebGL SDF blob transition wrapper for route and state changes. | `npx shadcn@latest add https://smoothui.dev/r/sdf-blob-transition.json` |
| sdf-circle-transition | registry:ui | A clean SDF circle reveal based on the first Codrops shader step. | `npx shadcn@latest add https://smoothui.dev/r/sdf-circle-transition.json` |
| searchable-dropdown | registry:ui | A SearchableDropdown component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/searchable-dropdown.json` |
| select | registry:ui | An animated Select dropdown component for SmoothUI wrapping Radix Select with smooth animations. | `npx shadcn@latest add https://smoothui.dev/r/select.json` |
| shader-reveal-circle-transition | registry:ui | Demo 3 adaptation: noisy circular reveal with radial interpolation. | `npx shadcn@latest add https://smoothui.dev/r/shader-reveal-circle-transition.json` |
| shader-reveal-luma-transition | registry:ui | Demo 5 adaptation: luminance-style vertical displacement translated into a shader overlay. | `npx shadcn@latest add https://smoothui.dev/r/shader-reveal-luma-transition.json` |
| shader-reveal-noise-transition | registry:ui | Demo 1 adaptation: 4D-noise threshold transition with an organic shader gate. | `npx shadcn@latest add https://smoothui.dev/r/shader-reveal-noise-transition.json` |
| shader-reveal-planetary-transition | registry:ui | Demo 6 adaptation: rotated displacement vectors with a planetary swirl feel. | `npx shadcn@latest add https://smoothui.dev/r/shader-reveal-planetary-transition.json` |
| shader-reveal-push-transition | registry:ui | Demo 8 adaptation: procedural noise push/pull displacement. | `npx shadcn@latest add https://smoothui.dev/r/shader-reveal-push-transition.json` |
| shader-reveal-stripes-transition | registry:ui | Demo 7 adaptation: divided UV stripe displacement with diagonal motion. | `npx shadcn@latest add https://smoothui.dev/r/shader-reveal-stripes-transition.json` |
| shader-reveal-transition | registry:ui | A shared WebGL transition engine with eight shader-driven reveal variants. | `npx shadcn@latest add https://smoothui.dev/r/shader-reveal-transition.json` |
| shader-reveal-wipe-transition | registry:ui | Demo 4 adaptation: displacement-noise horizontal wipe with a sharp eased edge. | `npx shadcn@latest add https://smoothui.dev/r/shader-reveal-wipe-transition.json` |
| shader-reveal-zoom-transition | registry:ui | Demo 2 adaptation: vertical-progress zoom mix translated into a UI frame transition. | `npx shadcn@latest add https://smoothui.dev/r/shader-reveal-zoom-transition.json` |
| shared-axis-x | registry:ui | A SharedAxisX text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/shared-axis-x.json` |
| shared-axis-y | registry:ui | A SharedAxisY text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/shared-axis-y.json` |
| shared-axis-z | registry:ui | A SharedAxisZ text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/shared-axis-z.json` |
| shimmer-sweep | registry:ui | A ShimmerSweep text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/shimmer-sweep.json` |
| shine-text | registry:ui | A ShineText light-sweep text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/shine-text.json` |
| short-slide-down | registry:ui | A ShortSlideDown text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/short-slide-down.json` |
| short-slide-right | registry:ui | A ShortSlideRight text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/short-slide-right.json` |
| siri-orb | registry:ui | A beautiful animated orb component inspired by Siri's visual design. | `npx shadcn@latest add https://smoothui.dev/r/siri-orb.json` |
| skeleton-loader | registry:ui | Animated skeleton loading placeholders | `npx shadcn@latest add https://smoothui.dev/r/skeleton-loader.json` |
| smooth-button | registry:ui | A polished button component with gradient variants and press animation | `npx shadcn@latest add https://smoothui.dev/r/smooth-button.json` |
| social-hover-card | registry:ui | A profile hover card: avatar/handle trigger that expands into a preview with stats, bio and a follow action. | `npx shadcn@latest add https://smoothui.dev/r/social-hover-card.json` |
| social-selector | registry:ui | A SocialSelector component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/social-selector.json` |
| soft-blur-in | registry:ui | A SoftBlurIn text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/soft-blur-in.json` |
| spring-scale-in | registry:ui | A SpringScaleIn text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/spring-scale-in.json` |
| squircle | registry:ui | A Squircle component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/squircle.json` |
| stagger-from-center | registry:ui | A StaggerFromCenter text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/stagger-from-center.json` |
| stagger-from-edges | registry:ui | A StaggerFromEdges text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/stagger-from-edges.json` |
| svg-clip-mask | registry:ui | Reveals any children through a custom SVG shape mask that can morph on a loop, on scroll, or on hover. | `npx shadcn@latest add https://smoothui.dev/r/svg-clip-mask.json` |
| svg-draw-on-scroll | registry:ui | An SVG path that draws itself as you scroll, optionally with a marker riding the tip. | `npx shadcn@latest add https://smoothui.dev/r/svg-draw-on-scroll.json` |
| swap-panel | registry:ui | A SwapPanel component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/swap-panel.json` |
| switchboard-card | registry:ui | A SwitchboardCard component with light grid illustration for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/switchboard-card.json` |
| text-morph | registry:ui | A TextMorph text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/text-morph.json` |
| theme-toggle | registry:ui | A light/dark/system theme switch with sun-moon, pill, switch and orb visual treatments. | `npx shadcn@latest add https://smoothui.dev/r/theme-toggle.json` |
| tilt-card | registry:ui | A TiltCard component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/tilt-card.json` |
| time-machine-stack | registry:ui | A TimeMachineStack component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/time-machine-stack.json` |
| top-down-letters | registry:ui | A TopDownLetters text animation component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/top-down-letters.json` |
| tweet-card | registry:ui | A beautiful tweet card component for displaying Twitter/X posts. | `npx shadcn@latest add https://smoothui.dev/r/tweet-card.json` |
| typewriter-text | registry:ui | A TypewriterText component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/typewriter-text.json` |
| unlock-face-id | registry:ui | An UnlockFaceId component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/unlock-face-id.json` |
| user-account-avatar | registry:ui | A UserAccountAvatar component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/user-account-avatar.json` |
| vector-editor-toolbar | registry:ui | A Figma-style floating vector toolbar with tool selection, nested flyouts and a contextual properties bar. | `npx shadcn@latest add https://smoothui.dev/r/vector-editor-toolbar.json` |
| video-ambient | registry:ui | A video with a two-pass Ambilight-style glow sampled live from its own frames, with a CORS-safe static fallback. | `npx shadcn@latest add https://smoothui.dev/r/video-ambient.json` |
| video-modal | registry:ui | A video thumbnail that morphs into a full accessible player inside a modal, with a custom keyboard-operable control bar. | `npx shadcn@latest add https://smoothui.dev/r/video-modal.json` |
| wallet-card | registry:ui | A WalletCard component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/wallet-card.json` |
| warped-circle-transition | registry:ui | A wavy perimeter circle reveal inspired by the Codrops circle warping step. | `npx shadcn@latest add https://smoothui.dev/r/warped-circle-transition.json` |
| wave-text | registry:ui | A WaveText component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/wave-text.json` |
| lib | registry:lib | Shared animation constants (springs, easing curves, durations) for SmoothUI components | `npx shadcn@latest add https://smoothui.dev/r/lib.json` |
| chat-template | registry:block | Full ChatGPT-style chat surface — sidebar, transcript and composer — wired to a simulated agent so every AI component is on screen. | `npx shadcn@latest add https://smoothui.dev/r/chat-template.json` |
| theme-candy | registry:theme | SmoothUI Candy theme: smooth neutral scale with a candy accent, light and dark mode included. | `npx shadcn@latest add https://smoothui.dev/r/theme-candy.json` |
| theme-indigo | registry:theme | SmoothUI Indigo theme: smooth neutral scale with a indigo accent, light and dark mode included. | `npx shadcn@latest add https://smoothui.dev/r/theme-indigo.json` |
| theme-blue | registry:theme | SmoothUI Blue theme: smooth neutral scale with a blue accent, light and dark mode included. | `npx shadcn@latest add https://smoothui.dev/r/theme-blue.json` |
| theme-red | registry:theme | SmoothUI Red theme: smooth neutral scale with a red accent, light and dark mode included. | `npx shadcn@latest add https://smoothui.dev/r/theme-red.json` |
| theme-orange | registry:theme | SmoothUI Orange theme: smooth neutral scale with a orange accent, light and dark mode included. | `npx shadcn@latest add https://smoothui.dev/r/theme-orange.json` |
| theme-green | registry:theme | SmoothUI Green theme: smooth neutral scale with a green accent, light and dark mode included. | `npx shadcn@latest add https://smoothui.dev/r/theme-green.json` |
| skill | registry:item | Teaches AI coding assistants how to install SmoothUI components, blocks, and themes, and how to follow SmoothUI animation conventions. | `npx shadcn@latest add https://smoothui.dev/r/skill.json` |

## For AI agents

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