@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.
Install this registry
npx shadcn@latest add https://smoothui.dev/r/registry.json pnpm dlx shadcn@latest add https://smoothui.dev/r/registry.json bunx shadcn@latest add https://smoothui.dev/r/registry.json curl -s https://smoothui.dev/r/registry.json Components
158 totalnpx shadcn@latest add https://smoothui.dev/r/data.json Centered CTA block with radial glow background
npx shadcn@latest add https://smoothui.dev/r/cta-1.json Split layout CTA block with text and illustration
npx shadcn@latest add https://smoothui.dev/r/cta-2.json Compact banner CTA block
npx shadcn@latest add https://smoothui.dev/r/cta-3.json FAQ grid block with categorized tabs and icons
npx shadcn@latest add https://smoothui.dev/r/faq-1.json FAQ accordion block with expandable questions
npx shadcn@latest add https://smoothui.dev/r/faq-2.json Searchable FAQ section with filter animations
npx shadcn@latest add https://smoothui.dev/r/faq-3.json Categorized FAQ section with tab navigation
npx shadcn@latest add https://smoothui.dev/r/faq-4.json Feature grid block with animated cards
npx shadcn@latest add https://smoothui.dev/r/features-1.json Bento grid features block with asymmetric layout
npx shadcn@latest add https://smoothui.dev/r/features-2.json Alternating features block with side-by-side layout
npx shadcn@latest add https://smoothui.dev/r/features-3.json Simple footer block with links and social icons
npx shadcn@latest add https://smoothui.dev/r/footer-1.json Complex footer block with newsletter and extended links
npx shadcn@latest add https://smoothui.dev/r/footer-2.json Mega footer with newsletter and social links
npx shadcn@latest add https://smoothui.dev/r/footer-3.json Minimal single-row footer
npx shadcn@latest add https://smoothui.dev/r/footer-4.json Modern header block with navigation and mobile menu
npx shadcn@latest add https://smoothui.dev/r/header-1.json Premium header block with gradient logo and smooth animations
npx shadcn@latest add https://smoothui.dev/r/header-2.json Premium header block with gradient logo and smooth animations
npx shadcn@latest add https://smoothui.dev/r/header-3.json Interactive 3D grid hero header inspired by rauno.me 2024
npx shadcn@latest add https://smoothui.dev/r/header-4.json Spotlight hero block with dark theme and gradient text
npx shadcn@latest add https://smoothui.dev/r/header-5.json Minimal hero block with clean typography
npx shadcn@latest add https://smoothui.dev/r/header-6.json Simple logo cloud block with grid layout
npx shadcn@latest add https://smoothui.dev/r/logo-cloud-1.json Animated logo cloud block with infinite scroll
npx shadcn@latest add https://smoothui.dev/r/logo-cloud-2.json Infinite scrolling logo marquee
npx shadcn@latest add https://smoothui.dev/r/logo-cloud-3.json Interactive logo grid with hover effects
npx shadcn@latest add https://smoothui.dev/r/logo-cloud-4.json Simple pricing block with single plan
npx shadcn@latest add https://smoothui.dev/r/pricing-1.json Modern pricing block with three tiers
npx shadcn@latest add https://smoothui.dev/r/pricing-2.json Creative pricing block with two plans
npx shadcn@latest add https://smoothui.dev/r/pricing-3.json Shared components for SmoothUI blocks
npx shadcn@latest add https://smoothui.dev/r/shared.json Grid stats section block with hover effects
npx shadcn@latest add https://smoothui.dev/r/stats-1.json Cards stats section block with icons and trends
npx shadcn@latest add https://smoothui.dev/r/stats-2.json Grid team section block with hover effects
npx shadcn@latest add https://smoothui.dev/r/team-1.json Carousel team section block with auto-play
npx shadcn@latest add https://smoothui.dev/r/team-2.json Simple testimonials block with auto-rotating cards
npx shadcn@latest add https://smoothui.dev/r/testimonials-1.json Grid testimonials block with navigation arrows
npx shadcn@latest add https://smoothui.dev/r/testimonials-2.json Star testimonials block with grid layout
npx shadcn@latest add https://smoothui.dev/r/testimonials-3.json Canvas-based generative pixel avatar for AI agents, unique per seed.
npx shadcn@latest add https://smoothui.dev/r/agent-avatar.json An interactive AI branch component for displaying conversation flows.
npx shadcn@latest add https://smoothui.dev/r/ai-branch.json A AiInput component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/ai-input.json Stack of overlapping avatars with smooth expand/collapse animation
npx shadcn@latest add https://smoothui.dev/r/animated-avatar-group.json Animated drag-and-drop file upload component
npx shadcn@latest add https://smoothui.dev/r/animated-file-upload.json A AnimatedInput component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/animated-input.json A AnimatedOTPInput component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/animated-o-t-p-input.json A AnimatedProgressBar component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/animated-progress-bar.json Animated stepper/wizard component with step transitions
npx shadcn@latest add https://smoothui.dev/r/animated-stepper.json Animated tabs component with sliding indicator
npx shadcn@latest add https://smoothui.dev/r/animated-tabs.json A AnimatedTags component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/animated-tags.json Animated toggle switch with morph and icon variants
npx shadcn@latest add https://smoothui.dev/r/animated-toggle.json Spring-animated tooltip with multiple placement options
npx shadcn@latest add https://smoothui.dev/r/animated-tooltip.json 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 A AppDownloadStack component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/app-download-stack.json A AppleInvites component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/apple-invites.json A BasicAccordion component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/basic-accordion.json A BasicDropdown component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/basic-dropdown.json A BasicModal component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/basic-modal.json A BasicToast component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/basic-toast.json A BlurOutUp text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/blur-out-up.json A 3D CSS book component with perspective transforms and hover animation
npx shadcn@latest add https://smoothui.dev/r/book.json A BottomUpLetters text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/bottom-up-letters.json Animated breadcrumb navigation with stagger-in animation
npx shadcn@latest add https://smoothui.dev/r/breadcrumb.json A ButtonCopy component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/button-copy.json An animated Checkbox component for SmoothUI with checkmark and indeterminate state animations.
npx shadcn@latest add https://smoothui.dev/r/checkbox.json 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 A ClipCornersButton component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/clip-corners-button.json An animated Combobox component for SmoothUI with text filtering, async search, and keyboard navigation.
npx shadcn@latest add https://smoothui.dev/r/combobox.json 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 A ContributionGraph component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/contribution-graph.json A CursorFollow component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/cursor-follow.json A DepthParallaxWords text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/depth-parallax-words.json Animated Dialog and AlertDialog components for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/dialog.json A DotMorphButton component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/dot-morph-button.json An animated Drawer component for SmoothUI that slides from any side.
npx shadcn@latest add https://smoothui.dev/r/drawer.json 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 A DynamicIsland component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/dynamic-island.json A ExpandableCards component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/expandable-cards.json iOS-style exposure slider with draggable ticker and progress ring
npx shadcn@latest add https://smoothui.dev/r/exposure-slider.json A FadeThrough text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/fade-through.json A FigmaComment component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/figma-comment.json A FocusBlurResolve text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/focus-blur-resolve.json A lightweight, composable Form component with animated error messages and full accessibility support.
npx shadcn@latest add https://smoothui.dev/r/form.json A GitHubStarsAnimation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/github-stars-animation.json A GlowHoverCards component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/glow-hover-card.json A GooeyPopover component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/gooey-popover.json 3x3 grid-based loading animation with preset patterns
npx shadcn@latest add https://smoothui.dev/r/grid-loader.json A ImageMetadataPreview component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/image-metadata-preview.json A InfiniteSlider component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/infinite-slider.json A InteractiveImageSelector component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/interactive-image-selector.json A JobListingComponent component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/job-listing-component.json A KineticCenterBuild text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/kinetic-center-build.json A LineByLineSlide text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/line-by-line-slide.json Button that subtly follows the cursor with magnetic effect
npx shadcn@latest add https://smoothui.dev/r/magnetic-button.json A MaskRevealUp text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/mask-reveal-up.json A MicroScaleFade text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/micro-scale-fade.json Animated notification badge with count and status variants
npx shadcn@latest add https://smoothui.dev/r/notification-badge.json A NumberFlow component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/number-flow.json A soft-min SDF merge transition with two organic expanding shapes.
npx shadcn@latest add https://smoothui.dev/r/organic-merge-transition.json Animated pagination with spring-based active page indicator
npx shadcn@latest add https://smoothui.dev/r/pagination.json A PerCharacterRise text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/per-character-rise.json A PerWordCrossfade text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/per-word-crossfade.json A PhotoStack component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/photo-stack.json A Phototab component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/phototab.json A PowerOffSlide component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/power-off-slide.json A PriceFlow component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/price-flow.json A persistent WebGL prism sweep transition wrapper for route and state changes.
npx shadcn@latest add https://smoothui.dev/r/prism-sweep-transition.json Animated product card component for ecommerce
npx shadcn@latest add https://smoothui.dev/r/product-card.json 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 An animated Radio Group component for SmoothUI with selection indicator spring animation.
npx shadcn@latest add https://smoothui.dev/r/radio-group.json A RevealText component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/reveal-text.json A ReviewsCarousel component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/reviews-carousel.json A RichPopover component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/rich-popover.json A ScaleDownFade text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/scale-down-fade.json A ScrambleHover component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/scramble-hover.json A ScrollRevealParagraph component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/scroll-reveal-paragraph.json A ScrollableCardStack component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/scrollable-card-stack.json Design-tool style scrubber slider with animated thumb and built-in label
npx shadcn@latest add https://smoothui.dev/r/scrubber.json A persistent WebGL SDF blob transition wrapper for route and state changes.
npx shadcn@latest add https://smoothui.dev/r/sdf-blob-transition.json A clean SDF circle reveal based on the first Codrops shader step.
npx shadcn@latest add https://smoothui.dev/r/sdf-circle-transition.json A SearchableDropdown component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/searchable-dropdown.json An animated Select dropdown component for SmoothUI wrapping Radix Select with smooth animations.
npx shadcn@latest add https://smoothui.dev/r/select.json Demo 3 adaptation: noisy circular reveal with radial interpolation.
npx shadcn@latest add https://smoothui.dev/r/shader-reveal-circle-transition.json 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 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 Demo 6 adaptation: rotated displacement vectors with a planetary swirl feel.
npx shadcn@latest add https://smoothui.dev/r/shader-reveal-planetary-transition.json Demo 8 adaptation: procedural noise push/pull displacement.
npx shadcn@latest add https://smoothui.dev/r/shader-reveal-push-transition.json Demo 7 adaptation: divided UV stripe displacement with diagonal motion.
npx shadcn@latest add https://smoothui.dev/r/shader-reveal-stripes-transition.json A shared WebGL transition engine with eight shader-driven reveal variants.
npx shadcn@latest add https://smoothui.dev/r/shader-reveal-transition.json 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 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 A SharedAxisX text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/shared-axis-x.json A SharedAxisY text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/shared-axis-y.json A SharedAxisZ text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/shared-axis-z.json A ShimmerSweep text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/shimmer-sweep.json A ShineText light-sweep text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/shine-text.json A ShortSlideDown text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/short-slide-down.json A ShortSlideRight text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/short-slide-right.json A beautiful animated orb component inspired by Siri's visual design.
npx shadcn@latest add https://smoothui.dev/r/siri-orb.json Animated skeleton loading placeholders
npx shadcn@latest add https://smoothui.dev/r/skeleton-loader.json A polished button component with gradient variants and press animation
npx shadcn@latest add https://smoothui.dev/r/smooth-button.json A SocialSelector component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/social-selector.json A SoftBlurIn text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/soft-blur-in.json A SpringScaleIn text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/spring-scale-in.json A StaggerFromCenter text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/stagger-from-center.json A StaggerFromEdges text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/stagger-from-edges.json A SwitchboardCard component with light grid illustration for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/switchboard-card.json A TopDownLetters text animation component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/top-down-letters.json A beautiful tweet card component for displaying Twitter/X posts.
npx shadcn@latest add https://smoothui.dev/r/tweet-card.json A TypewriterText component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/typewriter-text.json A UserAccountAvatar component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/user-account-avatar.json A wavy perimeter circle reveal inspired by the Codrops circle warping step.
npx shadcn@latest add https://smoothui.dev/r/warped-circle-transition.json A WaveText component for SmoothUI.
npx shadcn@latest add https://smoothui.dev/r/wave-text.json Shared animation constants (springs, easing curves, durations) for SmoothUI components
npx shadcn@latest add https://smoothui.dev/r/lib.json 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: 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: 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: 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: 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: smooth neutral scale with a green accent, light and dark mode included.
npx shadcn@latest add https://smoothui.dev/r/theme-green.json 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