ActiveFeaturedAnimated componentspro available1,027
@smoothui
Animated components · MIT · data updated 2026-10-27
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.
aestheticaianimationauthbackgroundsblocksbuttonscardschartsformsgaminghooksiconsloadersmarketingmediamobilenavigationoverlayspro-availableretrotext-effects
Install
npx shadcn@latest add https://smoothui.dev/r/registry.jsonHealth
StatusActive
Last commit1 day ago
LicenseMIT
Open issues1
ArchivedNo
Stars1,027
Components (275)
clidatacta-1cta-2cta-3faq-1faq-2faq-3faq-4features-1features-2features-3footer-1footer-2footer-3footer-4header-1header-2header-3header-4header-5header-6logo-cloud-1logo-cloud-2logo-cloud-3logo-cloud-4pricing-1pricing-2pricing-3sharedstats-1stats-2team-1team-2testimonials-1testimonials-2testimonials-3accordionagent-avatarai-approvalai-artifactai-branchai-citationai-context-meterai-conversationai-coreai-diffai-inputai-loaderai-messageai-orb-faceai-prompt-inputai-reasoningai-responseai-sourcesai-suggestionsai-task-listai-tool-callalertanimated-avatar-group
Components: cli, data, cta-1, cta-2, cta-3, faq-1, faq-2, faq-3, faq-4, features-1, features-2, features-3, footer-1, footer-2, footer-3, footer-4, header-1, header-2, header-3, header-4, header-5, header-6, logo-cloud-1, logo-cloud-2, logo-cloud-3, logo-cloud-4, pricing-1, pricing-2, pricing-3, shared, stats-1, stats-2, team-1, team-2, testimonials-1, testimonials-2, testimonials-3, accordion, agent-avatar, ai-approval, ai-artifact, ai-branch, ai-citation, ai-context-meter, ai-conversation, ai-core, ai-diff, ai-input, ai-loader, ai-message, ai-orb-face, ai-prompt-input, ai-reasoning, ai-response, ai-sources, ai-suggestions, ai-task-list, ai-tool-call, alert, animated-avatar-group, animated-file-upload, animated-list, animated-stepper, animated-tags, aperture-blur-transition, app-download-stack, apple-invites, arcade-pixel, ascii-render, aurora-curtain, auth-form, avatar, badge, blur-out-up, book, border-beam, bottom-up-letters, breadcrumb, breakpoint-indicator, button-copy, calendar, card-swipe-deck, checkbox, checkbox-group, chroma-blur-transition, clip-corners-button, code-block, collapsible, combobox, command, content-skeleton, context-menu, contribution-graph, count-badge, country-picker, coverflow-carousel, cursor-follow, cursor-image-trail, depth-parallax-words, dialog, digit-roll, dither-chart, dither-image, dock, dot-morph-button, drawer, drawing-cursor, dropdown-menu, duration-picker, dynamic-island, emboss-surface, emoji-reaction, empty, expandable-cards, expandable-navbar, exposure-slider, fade-through, favicon-search, field, figma-comment, file-tree, float-input, floating-navbar, fluid-hover-highlight, focus-blur-resolve, folder-reveal, form, github-stars-animation, glass-card, glow-hover-card, gooey-filter, gooey-popover, gravity-letters, gravity-stars, grid-loader, holographic-foil, hover-expand, hover-image-list, image-generation-panel, image-metadata-preview, infinite-slider, inline-testimonials, input, input-group, interactive-image-selector, job-listing-component, kbd, kinetic-center-build, kinetic-type-scroll, line-by-line-slide, liquid-metal, mac-terminal, magnetic-button, magnetic-field, mask-reveal-up, menubar, meter, micro-scale-fade, morph-icon, morph-surface, morph-toggle, motion-loader, music-toggle, navigation-menu, number-field, number-flow, orb, orbital-image-wheel, organic-merge-transition, otp-field, otp-slots, page-preloader, pagination, parallax-layers, per-character-rise, per-word-crossfade, perspective-text-3d, photo-stack, phototab, pinned-list, pixel-brush-canvas, pixel-flow-field, popover, power-off-slide, preview-card, price-flow, prism-sweep-transition, product-card, progress, progressive-blur, radial-circles-transition, radio-group, ransom-note, reveal-text, reviews-carousel, rich-popover, rolling-text, scale-down-fade, scramble-hover, scroll-area, scroll-image-reveal, scroll-progress, scroll-reveal-paragraph, scrollable-card-stack, scrubber, sdf-blob-transition, sdf-circle-transition, select, separator, shader-reveal-circle-transition, shader-reveal-luma-transition, shader-reveal-noise-transition, shader-reveal-planetary-transition, shader-reveal-push-transition, shader-reveal-stripes-transition, shader-reveal-transition, shader-reveal-wipe-transition, shader-reveal-zoom-transition, shared-axis-x, shared-axis-y, shared-axis-z, shimmer-sweep, shine-text, short-slide-down, short-slide-right, sidebar, siri-orb, skeleton, slider, smooth-button, social-hover-card, social-selector, soft-blur-in, spinner, spring-scale-in, squircle, stagger-from-center, stagger-from-edges, svg-clip-mask, svg-draw-on-scroll, swap-panel, switch, switchboard-card, tabs, text-morph, textarea, theme-toggle, tilt-card, time-machine-stack, toast, toggle, toggle-group, toolbar, tooltip, top-down-letters, tweet-card, typewriter-text, unlock-face-id, user-account-avatar, vector-editor-toolbar, video-ambient, video-modal, wallet-card, warped-circle-transition, wave-text, lib, chat-template, theme-candy, theme-indigo, theme-blue, theme-red, theme-orange, theme-green, theme, skillPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.