@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.

246 components pro available react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗ pro ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://smoothui.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://smoothui.dev/r/registry.json

bun bunx shadcn@latest add https://smoothui.dev/r/registry.json

fetch registry curl -s https://smoothui.dev/r/registry.json

Components

246 total

Cli ui

CLI to install SmoothUI components - beautifully designed React components with smooth animations

npx shadcn@latest add https://smoothui.dev/r/cli.json

Data lib

npx shadcn@latest add https://smoothui.dev/r/data.json

Cta 1 block

Centered CTA block with radial glow background

npx shadcn@latest add https://smoothui.dev/r/cta-1.json

Cta 2 block

Split layout CTA block with text and illustration

npx shadcn@latest add https://smoothui.dev/r/cta-2.json

Cta 3 block

Compact banner CTA block

npx shadcn@latest add https://smoothui.dev/r/cta-3.json

Faq 1 block

FAQ grid block with categorized tabs and icons

npx shadcn@latest add https://smoothui.dev/r/faq-1.json

Faq 2 block

FAQ accordion block with expandable questions

npx shadcn@latest add https://smoothui.dev/r/faq-2.json

Faq 3 block

Searchable FAQ section with filter animations

npx shadcn@latest add https://smoothui.dev/r/faq-3.json

Faq 4 block

Categorized FAQ section with tab navigation

npx shadcn@latest add https://smoothui.dev/r/faq-4.json

Features 1 block

Feature grid block with animated cards

npx shadcn@latest add https://smoothui.dev/r/features-1.json

Features 2 block

Bento grid features block with asymmetric layout

npx shadcn@latest add https://smoothui.dev/r/features-2.json

Features 3 block

Alternating features block with side-by-side layout

npx shadcn@latest add https://smoothui.dev/r/features-3.json

Footer 1 block

Simple footer block with links and social icons

npx shadcn@latest add https://smoothui.dev/r/footer-1.json

Footer 2 block

Complex footer block with newsletter and extended links

npx shadcn@latest add https://smoothui.dev/r/footer-2.json

Footer 3 block

Mega footer with newsletter and social links

npx shadcn@latest add https://smoothui.dev/r/footer-3.json

Footer 4 block

Minimal single-row footer

npx shadcn@latest add https://smoothui.dev/r/footer-4.json

Header 1 block

Modern header block with navigation and mobile menu

npx shadcn@latest add https://smoothui.dev/r/header-1.json

Header 2 block

Premium header block with gradient logo and smooth animations

npx shadcn@latest add https://smoothui.dev/r/header-2.json

Header 3 block

Premium header block with gradient logo and smooth animations

npx shadcn@latest add https://smoothui.dev/r/header-3.json

Header 4 block

Interactive 3D grid hero header inspired by rauno.me 2024

npx shadcn@latest add https://smoothui.dev/r/header-4.json

Header 5 block

Spotlight hero block with dark theme and gradient text

npx shadcn@latest add https://smoothui.dev/r/header-5.json

Header 6 block

Minimal hero block with clean typography

npx shadcn@latest add https://smoothui.dev/r/header-6.json

Logo Cloud 1 block

Simple logo cloud block with grid layout

npx shadcn@latest add https://smoothui.dev/r/logo-cloud-1.json

Logo Cloud 2 block

Animated logo cloud block with infinite scroll

npx shadcn@latest add https://smoothui.dev/r/logo-cloud-2.json

Logo Cloud 3 block

Infinite scrolling logo marquee

npx shadcn@latest add https://smoothui.dev/r/logo-cloud-3.json

Logo Cloud 4 block

Interactive logo grid with hover effects

npx shadcn@latest add https://smoothui.dev/r/logo-cloud-4.json

Pricing 1 block

Simple pricing block with single plan

npx shadcn@latest add https://smoothui.dev/r/pricing-1.json

Pricing 2 block

Modern pricing block with three tiers

npx shadcn@latest add https://smoothui.dev/r/pricing-2.json

Pricing 3 block

Creative pricing block with two plans

npx shadcn@latest add https://smoothui.dev/r/pricing-3.json

Shared component

Shared components for SmoothUI blocks

npx shadcn@latest add https://smoothui.dev/r/shared.json

Stats 1 block

Grid stats section block with hover effects

npx shadcn@latest add https://smoothui.dev/r/stats-1.json

Stats 2 block

Cards stats section block with icons and trends

npx shadcn@latest add https://smoothui.dev/r/stats-2.json

Team 1 block

Grid team section block with hover effects

npx shadcn@latest add https://smoothui.dev/r/team-1.json

Team 2 block

Carousel team section block with auto-play

npx shadcn@latest add https://smoothui.dev/r/team-2.json

Testimonials 1 block

Simple testimonials block with auto-rotating cards

npx shadcn@latest add https://smoothui.dev/r/testimonials-1.json

Testimonials 2 block

Grid testimonials block with navigation arrows

npx shadcn@latest add https://smoothui.dev/r/testimonials-2.json

Testimonials 3 block

Star testimonials block with grid layout

npx shadcn@latest add https://smoothui.dev/r/testimonials-3.json

Agent Avatar 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 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 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 ui

An interactive AI branch component for displaying conversation flows.

npx shadcn@latest add https://smoothui.dev/r/ai-branch.json

Ai Citation 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 ui

Animated drag-and-drop file upload component

npx shadcn@latest add https://smoothui.dev/r/animated-file-upload.json

Animated Input ui

A AnimatedInput component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/animated-input.json

Animated List 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 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 ui

A AnimatedOTPInput component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/animated-o-t-p-input.json

Animated Progress Bar ui

A AnimatedProgressBar component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/animated-progress-bar.json

Animated Stepper ui

Animated stepper/wizard component with step transitions

npx shadcn@latest add https://smoothui.dev/r/animated-stepper.json

Animated Tabs ui

Animated tabs component with sliding indicator

npx shadcn@latest add https://smoothui.dev/r/animated-tabs.json

Animated Tags ui

A AnimatedTags component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/animated-tags.json

Animated Toggle ui

Animated toggle switch with morph and icon variants

npx shadcn@latest add https://smoothui.dev/r/animated-toggle.json

Animated Tooltip ui

Spring-animated tooltip with multiple placement options

npx shadcn@latest add https://smoothui.dev/r/animated-tooltip.json

Aperture Blur Transition 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 ui

A AppDownloadStack component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/app-download-stack.json

Apple Invites ui

A AppleInvites component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/apple-invites.json

Arcade Pixel ui

An ArcadePixel component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/arcade-pixel.json

Ascii Render ui

An AsciiRender component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/ascii-render.json

Aurora Curtain ui

An AuroraCurtain background component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/aurora-curtain.json

Auth Form 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 ui

A BasicAccordion component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/basic-accordion.json

Basic Dropdown ui

A BasicDropdown component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/basic-dropdown.json

Basic Modal ui

A BasicModal component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/basic-modal.json

Basic Toast ui

A BasicToast component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/basic-toast.json

Blur Out Up ui

A BlurOutUp text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/blur-out-up.json

Book ui

A 3D CSS book component with perspective transforms and hover animation

npx shadcn@latest add https://smoothui.dev/r/book.json

Border Beam ui

A BorderBeam component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/border-beam.json

Bottom Up Letters ui

A BottomUpLetters text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/bottom-up-letters.json

Breadcrumb ui

Animated breadcrumb navigation with stagger-in animation

npx shadcn@latest add https://smoothui.dev/r/breadcrumb.json

Breakpoint Indicator ui

A BreakpointIndicator component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/breakpoint-indicator.json

Button Copy ui

A ButtonCopy component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/button-copy.json

Card Swipe Deck ui

A CardSwipeDeck component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/card-swipe-deck.json

Checkbox 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 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 ui

A ClipCornersButton component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/clip-corners-button.json

Code Block ui

A CodeBlock component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/code-block.json

Combobox 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 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 ui

A ContributionGraph component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/contribution-graph.json

Country Dialog ui

A CountryDialog component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/country-dialog.json

Coverflow Carousel ui

A CoverflowCarousel component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/coverflow-carousel.json

Cursor Follow ui

A CursorFollow component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/cursor-follow.json

Cursor Image Trail ui

A CursorImageTrail component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/cursor-image-trail.json

Depth Parallax Words ui

A DepthParallaxWords text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/depth-parallax-words.json

Dialog ui

Animated Dialog and AlertDialog components for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/dialog.json

Dither Chart ui

A DitherChart component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/dither-chart.json

Dither Image ui

A DitherImage component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/dither-image.json

Dock ui

A Dock component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/dock.json

Dot Morph Button ui

A DotMorphButton component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/dot-morph-button.json

Drawer ui

An animated Drawer component for SmoothUI that slides from any side.

npx shadcn@latest add https://smoothui.dev/r/drawer.json

Drawing Cursor ui

A DrawingCursor component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/drawing-cursor.json

Dropdown Menu 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 ui

A DurationPicker component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/duration-picker.json

Dynamic Island ui

A DynamicIsland component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/dynamic-island.json

Emboss Surface ui

An EmbossSurface component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/emboss-surface.json

Emoji Reaction 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 ui

A ExpandableCards component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/expandable-cards.json

Expandable Navbar ui

An ExpandableNavbar component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/expandable-navbar.json

Exposure Slider ui

iOS-style exposure slider with draggable ticker and progress ring

npx shadcn@latest add https://smoothui.dev/r/exposure-slider.json

Fade Through ui

A FadeThrough text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/fade-through.json

Favicon Search 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 ui

A FigmaComment component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/figma-comment.json

File Tree ui

A FileTree component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/file-tree.json

Floating Navbar ui

A FloatingNavbar component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/floating-navbar.json

Focus Blur Resolve ui

A FocusBlurResolve text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/focus-blur-resolve.json

Folder Reveal ui

A FolderReveal component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/folder-reveal.json

Form 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 ui

A GitHubStarsAnimation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/github-stars-animation.json

Glass Card ui

A GlassCard component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/glass-card.json

Glow Hover Card ui

A GlowHoverCards component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/glow-hover-card.json

Gooey Filter ui

A GooeyFilter component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/gooey-filter.json

Gooey Popover ui

A GooeyPopover component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/gooey-popover.json

Gravity Letters ui

A GravityLetters component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/gravity-letters.json

Gravity Stars ui

A GravityStars particle background component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/gravity-stars.json

Grid Loader ui

3x3 grid-based loading animation with preset patterns

npx shadcn@latest add https://smoothui.dev/r/grid-loader.json

Holographic Foil ui

A HolographicFoil component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/holographic-foil.json

Hover Expand ui

A HoverExpand component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/hover-expand.json

Hover Image List ui

A HoverImageList component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/hover-image-list.json

Image Generation Panel 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 ui

A ImageMetadataPreview component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/image-metadata-preview.json

Infinite Slider ui

A InfiniteSlider component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/infinite-slider.json

Inline Testimonials 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 ui

A InteractiveImageSelector component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/interactive-image-selector.json

Job Listing Component ui

A JobListingComponent component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/job-listing-component.json

Kinetic Center Build ui

A KineticCenterBuild text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/kinetic-center-build.json

Kinetic Type Scroll ui

A KineticTypeScroll text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/kinetic-type-scroll.json

Line By Line Slide ui

A LineByLineSlide text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/line-by-line-slide.json

Liquid Metal ui

A LiquidMetal component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/liquid-metal.json

Mac Terminal ui

A MacTerminal component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/mac-terminal.json

Magnetic Button ui

Button that subtly follows the cursor with magnetic effect

npx shadcn@latest add https://smoothui.dev/r/magnetic-button.json

Magnetic Field ui

A MagneticField component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/magnetic-field.json

Mask Reveal Up ui

A MaskRevealUp text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/mask-reveal-up.json

Micro Scale Fade ui

A MicroScaleFade text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/micro-scale-fade.json

Morph Icon ui

A MorphIcon component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/morph-icon.json

Morph Surface 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 ui

A MotionLoader component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/motion-loader.json

Music Toggle 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 ui

Animated notification badge with count and status variants

npx shadcn@latest add https://smoothui.dev/r/notification-badge.json

Number Flow ui

A NumberFlow component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/number-flow.json

Orb ui

An Orb component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/orb.json

Orbital Image Wheel ui

An OrbitalImageWheel component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/orbital-image-wheel.json

Organic Merge Transition 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 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 ui

Animated pagination with spring-based active page indicator

npx shadcn@latest add https://smoothui.dev/r/pagination.json

Parallax Layers 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 ui

A PerCharacterRise text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/per-character-rise.json

Per Word Crossfade ui

A PerWordCrossfade text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/per-word-crossfade.json

Perspective Text 3d ui

A PerspectiveText3D text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/perspective-text-3d.json

Photo Stack ui

A PhotoStack component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/photo-stack.json

Phototab ui

A Phototab component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/phototab.json

Pinned List 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 ui

A PixelBrushCanvas component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/pixel-brush-canvas.json

Pixel Flow Field ui

A PixelFlowField background component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/pixel-flow-field.json

Power Off Slide ui

A PowerOffSlide component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/power-off-slide.json

Price Flow ui

A PriceFlow component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/price-flow.json

Prism Sweep Transition 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 ui

Animated product card component for ecommerce

npx shadcn@latest add https://smoothui.dev/r/product-card.json

Progressive Blur ui

A ProgressiveBlur component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/progressive-blur.json

Radial Circles Transition 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 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 ui

A RansomNote component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/ransom-note.json

Reveal Text ui

A RevealText component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/reveal-text.json

Reviews Carousel ui

A ReviewsCarousel component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/reviews-carousel.json

Rich Popover ui

A RichPopover component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/rich-popover.json

Rolling Text ui

A RollingText text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/rolling-text.json

Scale Down Fade ui

A ScaleDownFade text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/scale-down-fade.json

Scramble Hover ui

A ScrambleHover component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/scramble-hover.json

Scroll Image Reveal 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 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 ui

A ScrollRevealParagraph component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/scroll-reveal-paragraph.json

Scrollable Card Stack ui

A ScrollableCardStack component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/scrollable-card-stack.json

Scrubber 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 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 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 ui

A SearchableDropdown component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/searchable-dropdown.json

Select 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 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 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 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 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 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 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 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 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 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 ui

A SharedAxisX text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/shared-axis-x.json

Shared Axis Y ui

A SharedAxisY text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/shared-axis-y.json

Shared Axis Z ui

A SharedAxisZ text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/shared-axis-z.json

Shimmer Sweep ui

A ShimmerSweep text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/shimmer-sweep.json

Shine Text ui

A ShineText light-sweep text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/shine-text.json

Short Slide Down ui

A ShortSlideDown text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/short-slide-down.json

Short Slide Right ui

A ShortSlideRight text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/short-slide-right.json

Siri Orb 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 ui

Animated skeleton loading placeholders

npx shadcn@latest add https://smoothui.dev/r/skeleton-loader.json

Smooth Button 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 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 ui

A SocialSelector component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/social-selector.json

Soft Blur In ui

A SoftBlurIn text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/soft-blur-in.json

Spring Scale In ui

A SpringScaleIn text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/spring-scale-in.json

Squircle ui

A Squircle component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/squircle.json

Stagger From Center ui

A StaggerFromCenter text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/stagger-from-center.json

Stagger From Edges ui

A StaggerFromEdges text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/stagger-from-edges.json

Svg Clip Mask 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 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 ui

A SwapPanel component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/swap-panel.json

Switchboard Card ui

A SwitchboardCard component with light grid illustration for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/switchboard-card.json

Text Morph ui

A TextMorph text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/text-morph.json

Theme Toggle 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 ui

A TiltCard component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/tilt-card.json

Time Machine Stack ui

A TimeMachineStack component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/time-machine-stack.json

Top Down Letters ui

A TopDownLetters text animation component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/top-down-letters.json

Tweet Card ui

A beautiful tweet card component for displaying Twitter/X posts.

npx shadcn@latest add https://smoothui.dev/r/tweet-card.json

Typewriter Text ui

A TypewriterText component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/typewriter-text.json

Unlock Face Id ui

An UnlockFaceId component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/unlock-face-id.json

User Account Avatar ui

A UserAccountAvatar component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/user-account-avatar.json

Vector Editor Toolbar 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 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 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 ui

A WalletCard component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/wallet-card.json

Warped Circle Transition 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 ui

A WaveText component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/wave-text.json

Lib lib

Shared animation constants (springs, easing curves, durations) for SmoothUI components

npx shadcn@latest add https://smoothui.dev/r/lib.json

Chat Template 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

SmoothUI Candy 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

SmoothUI Indigo 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

SmoothUI Blue 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

SmoothUI Red 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

SmoothUI Orange 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

SmoothUI Green 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

SmoothUI Skill 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