# SmoothUI

> A collection of beautifully designed React components with smooth animations built with React, Tailwind CSS, and Motion.

- Docs: https://smoothui.dev/docs
- GitHub: https://github.com/educlopez/smoothui
- Full docs for LLMs: https://smoothui.dev/llms-full.txt
- Component JSON: https://smoothui.dev/llms-components.json

## Components (198)

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

## Blocks (34)

- cta-1: Centered CTA block with radial glow background [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/cta-1.json
- cta-2: Split layout CTA block with text and illustration [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/cta-2.json
- cta-3: Compact banner CTA block [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/cta-3.json
- faq-1: FAQ grid block with categorized tabs and icons [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/faq-1.json
- faq-2: FAQ accordion block with expandable questions [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/faq-2.json
- faq-3: Searchable FAQ section with filter animations [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/faq-3.json
- faq-4: Categorized FAQ section with tab navigation [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/faq-4.json
- features-1: Feature grid block with animated cards [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/features-1.json
- features-2: Bento grid features block with asymmetric layout [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/features-2.json
- features-3: Alternating features block with side-by-side layout [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/features-3.json
- footer-1: Simple footer block with links and social icons [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/footer-1.json
- footer-2: Complex footer block with newsletter and extended links [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/footer-2.json
- footer-3: Mega footer with newsletter and social links [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/footer-3.json
- footer-4: Minimal single-row footer [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/footer-4.json
- header-1: Modern header block with navigation and mobile menu [layout] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/header-1.json
- header-2: Premium header block with gradient logo and smooth animations [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/header-2.json
- header-3: Premium header block with gradient logo and smooth animations [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/header-3.json
- header-4: Interactive 3D grid hero header inspired by rauno.me 2024 [layout] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/header-4.json
- header-5: Spotlight hero block with dark theme and gradient text [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/header-5.json
- header-6: Minimal hero block with clean typography [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/header-6.json
- logo-cloud-1: Simple logo cloud block with grid layout [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/logo-cloud-1.json
- logo-cloud-2: Animated logo cloud block with infinite scroll [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/logo-cloud-2.json
- logo-cloud-3: Infinite scrolling logo marquee [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/logo-cloud-3.json
- logo-cloud-4: Interactive logo grid with hover effects [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/logo-cloud-4.json
- pricing-1: Simple pricing block with single plan [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/pricing-1.json
- pricing-2: Modern pricing block with three tiers [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/pricing-2.json
- pricing-3: Creative pricing block with two plans [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/pricing-3.json
- stats-1: Grid stats section block with hover effects [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/stats-1.json
- stats-2: Cards stats section block with icons and trends [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/stats-2.json
- team-1: Grid team section block with hover effects [layout] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/team-1.json
- team-2: Carousel team section block with auto-play [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/team-2.json
- testimonials-1: Simple testimonials block with auto-rotating cards [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/testimonials-1.json
- testimonials-2: Grid testimonials block with navigation arrows [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/testimonials-2.json
- testimonials-3: Star testimonials block with grid layout [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/testimonials-3.json