---
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", "backgrounds", "blocks", "buttons", "cards", "charts", "forms", "hooks", "icons", "loaders", "marketing", "media", "mobile", "navigation", "overlays", "pro-available", "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: 158
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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 (158)

| name | type | description | install |
| --- | --- | --- | --- |
| 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-branch | registry:ui | An interactive AI branch component for displaying conversation flows. | `npx shadcn@latest add https://smoothui.dev/r/ai-branch.json` |
| ai-input | registry:ui | A AiInput component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/ai-input.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-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` |
| 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` |
| 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` |
| button-copy | registry:ui | A ButtonCopy component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/button-copy.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` |
| 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` |
| cursor-follow | registry:ui | A CursorFollow component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/cursor-follow.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` |
| 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` |
| 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` |
| dynamic-island | registry:ui | A DynamicIsland component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/dynamic-island.json` |
| expandable-cards | registry:ui | A ExpandableCards component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/expandable-cards.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` |
| figma-comment | registry:ui | A FigmaComment component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/figma-comment.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` |
| 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` |
| glow-hover-card | registry:ui | A GlowHoverCards component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/glow-hover-card.json` |
| gooey-popover | registry:ui | A GooeyPopover component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/gooey-popover.json` |
| grid-loader | registry:ui | 3x3 grid-based loading animation with preset patterns | `npx shadcn@latest add https://smoothui.dev/r/grid-loader.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` |
| 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` |
| 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` |
| magnetic-button | registry:ui | Button that subtly follows the cursor with magnetic effect | `npx shadcn@latest add https://smoothui.dev/r/magnetic-button.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` |
| 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` |
| 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` |
| pagination | registry:ui | Animated pagination with spring-based active page indicator | `npx shadcn@latest add https://smoothui.dev/r/pagination.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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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-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-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` |
| 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` |
| switchboard-card | registry:ui | A SwitchboardCard component with light grid illustration for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/switchboard-card.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` |
| user-account-avatar | registry:ui | A UserAccountAvatar component for SmoothUI. | `npx shadcn@latest add https://smoothui.dev/r/user-account-avatar.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` |
| 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).
```