# 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 (114) - 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-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-input: A AiInput component for SmoothUI. [ai] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/ai-input.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-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 - 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 - 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 - button-copy: A ButtonCopy component for SmoothUI. [button] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/button-copy.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 - 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 - cursor-follow: A CursorFollow component for SmoothUI. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/cursor-follow.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 - 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 - 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 - dynamic-island: A DynamicIsland component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/dynamic-island.json - expandable-cards: A ExpandableCards component for SmoothUI. [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/expandable-cards.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 - figma-comment: A FigmaComment component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/figma-comment.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 - 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 - glow-hover-card: A GlowHoverCards component for SmoothUI. [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/glow-hover-card.json - gooey-popover: A GooeyPopover component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/gooey-popover.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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - pagination: Animated pagination with spring-based active page indicator [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/pagination.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 - 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 - 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 - 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 - 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 - 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-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-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 - 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 - 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 - 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 - user-account-avatar: A UserAccountAvatar component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/user-account-avatar.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 (0)