S
educlopez/smoothui
Agent Avataragent-avatarCanvas-based generative pixel avatar for AI agents, unique per seed.
Ai Approvalai-approvalHuman-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away.
Ai Artifactai-artifactGenerated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading.
Ai Branchai-branchAn interactive AI branch component for displaying conversation flows.
Ai Citationai-citationInline citation pill that opens an origin-aware source card, anchored to the pill it came from.
Ai Context Meterai-context-meterContext window meter whose ring fills and shifts hue at the warning threshold, never changing size.
Ai Conversationai-conversationThread scroll container that follows the bottom only while the reader is already there, offering a jump-to-latest pill when it stops.
Ai Coreai-coreShared AI state contract, per-state motion presets and microphone amplitude hooks for SmoothUI AI components.
Ai Diffai-diffProposed code or data edit where added lines wipe in from the left and rejected lines collapse to nothing.
Ai Inputai-inputDeprecated alias for morph-surface. Kept for one release so existing installs keep resolving.
Ai Loaderai-loaderFamily of AI waiting indicators — dots, sweep bar and pixel grid — sharing one cycle length, with an optional elapsed counter.
Ai Messageai-messageChat message bubble whose action row slides out of the bubble's own edge, revealed on hover and on focus.
Ai Orb Faceai-orb-faceCartoon character orb whose expression carries the AI state — cursor-following gaze, natural blinks, thinking saccades, happy arcs and spiral eyes.
Ai Prompt Inputai-prompt-inputAI prompt composer with autogrowing textarea, attachment chips and a send-to-stop path morph.
Ai Reasoningai-reasoningCollapsible AI reasoning trace that shimmers only while the model works, reports how long it took and gets out of the way.
Ai Responseai-responseStreaming assistant text where words animate in as they arrive, with a caret that rides the last glyph and inline citation pills.
Ai Sourcesai-sourcesFavicon stack that fans out on hover and expands into a source list, with each favicon morphing into its row.
Ai Suggestionsai-suggestionsPrompt suggestion chips that radiate in from the centre of the row rather than sweeping left to right.
Ai Task Listai-task-listLive agent plan with nested steps, a drawn checkmark on completion and a travelling underline on whatever is running.
Ai Tool Callai-tool-callCollapsible tool invocation whose status badge is one ring that evolves — breathing, spinning, then drawing a check or a cross.
Animated Avatar Groupanimated-avatar-groupStack of overlapping avatars with smooth expand/collapse animation
Animated File Uploadanimated-file-uploadAnimated drag-and-drop file upload component
Animated Inputanimated-inputA AnimatedInput component for SmoothUI.
Animated Listanimated-listA list that animates additions, removals and reordering, with an optional auto-feed mode.
Animated Number Inputanimated-number-inputA numeric field with rolling digits, keyboard stepping and horizontal scrub-to-change.
Animated O T P Inputanimated-o-t-p-inputA AnimatedOTPInput component for SmoothUI.
Animated Progress Baranimated-progress-barA AnimatedProgressBar component for SmoothUI.
Animated Stepperanimated-stepperAnimated stepper/wizard component with step transitions
Animated Tabsanimated-tabsAnimated tabs component with sliding indicator
Animated Tagsanimated-tagsA AnimatedTags component for SmoothUI.
Animated Toggleanimated-toggleAnimated toggle switch with morph and icon variants
Animated Tooltipanimated-tooltipSpring-animated tooltip with multiple placement options
Aperture Blur Transitionaperture-blur-transitionPersistent WebGL shader transition wrapper that swaps content behind a cinematic aperture bloom.
App Download Stackapp-download-stackA AppDownloadStack component for SmoothUI.
Apple Invitesapple-invitesA AppleInvites component for SmoothUI.
Arcade Pixelarcade-pixelAn ArcadePixel component for SmoothUI.
Ascii Renderascii-renderAn AsciiRender component for SmoothUI.
Aurora Curtainaurora-curtainAn AuroraCurtain background component for SmoothUI.
Auth Formauth-formA presentation-only sign-in / sign-up form that reveals fields progressively and stays fully accessible.
Basic Accordionbasic-accordionA BasicAccordion component for SmoothUI.
Basic Dropdownbasic-dropdownA BasicDropdown component for SmoothUI.
Basic Modalbasic-modalA BasicModal component for SmoothUI.
Basic Toastbasic-toastA BasicToast component for SmoothUI.
Blur Out Upblur-out-upA BlurOutUp text animation component for SmoothUI.
BookbookA 3D CSS book component with perspective transforms and hover animation
Border Beamborder-beamA BorderBeam component for SmoothUI.
Bottom Up Lettersbottom-up-lettersA BottomUpLetters text animation component for SmoothUI.
BreadcrumbbreadcrumbAnimated breadcrumb navigation with stagger-in animation
Breakpoint Indicatorbreakpoint-indicatorA BreakpointIndicator component for SmoothUI.
Button Copybutton-copyA ButtonCopy component for SmoothUI.
Card Swipe Deckcard-swipe-deckA CardSwipeDeck component for SmoothUI.
CheckboxcheckboxAn animated Checkbox component for SmoothUI with checkmark and indeterminate state animations.
Chroma Blur Transitionchroma-blur-transitionPersistent WebGL shader transition wrapper that swaps content under a soft chromatic blur wash.
ClicliCLI to install SmoothUI components - beautifully designed React components with smooth animations
Clip Corners Buttonclip-corners-buttonA ClipCornersButton component for SmoothUI.
Code Blockcode-blockA CodeBlock component for SmoothUI.
ComboboxcomboboxAn animated Combobox component for SmoothUI with text filtering, async search, and keyboard navigation.
Context Menucontext-menuAn animated Context Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation.
Contribution Graphcontribution-graphA ContributionGraph component for SmoothUI.
Country Dialogcountry-dialogA CountryDialog component for SmoothUI.
Coverflow Carouselcoverflow-carouselA CoverflowCarousel component for SmoothUI.
Cursor Followcursor-followA CursorFollow component for SmoothUI.
Cursor Image Trailcursor-image-trailA CursorImageTrail component for SmoothUI.
Depth Parallax Wordsdepth-parallax-wordsA DepthParallaxWords text animation component for SmoothUI.
DialogdialogAnimated Dialog and AlertDialog components for SmoothUI.
Dither Chartdither-chartA DitherChart component for SmoothUI.
Dither Imagedither-imageA DitherImage component for SmoothUI.
DockdockA Dock component for SmoothUI.
Dot Morph Buttondot-morph-buttonA DotMorphButton component for SmoothUI.
DrawerdrawerAn animated Drawer component for SmoothUI that slides from any side.
Drawing Cursordrawing-cursorA DrawingCursor component for SmoothUI.
Dropdown Menudropdown-menuAn animated Dropdown Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation.
Duration Pickerduration-pickerA DurationPicker component for SmoothUI.
Dynamic Islanddynamic-islandA DynamicIsland component for SmoothUI.
Emboss Surfaceemboss-surfaceAn EmbossSurface component for SmoothUI.
Emoji Reactionemoji-reactionA reaction bar with particle bursts, a rolling odometer count, and a hover/focus emoji picker.
Expandable Cardsexpandable-cardsA ExpandableCards component for SmoothUI.
Expandable Navbarexpandable-navbarAn ExpandableNavbar component for SmoothUI.
Exposure Sliderexposure-slideriOS-style exposure slider with draggable ticker and progress ring
Fade Throughfade-throughA FadeThrough text animation component for SmoothUI.
Favicon Searchfavicon-searchA keyboard-driven search field that shows each result's favicon, with a combobox listbox and highlighted matches.
Figma Commentfigma-commentA FigmaComment component for SmoothUI.
File Treefile-treeA FileTree component for SmoothUI.
Floating Navbarfloating-navbarA FloatingNavbar component for SmoothUI.
Focus Blur Resolvefocus-blur-resolveA FocusBlurResolve text animation component for SmoothUI.
Folder Revealfolder-revealA FolderReveal component for SmoothUI.
FormformA lightweight, composable Form component with animated error messages and full accessibility support.
Github Stars Animationgithub-stars-animationA GitHubStarsAnimation component for SmoothUI.
Glass Cardglass-cardA GlassCard component for SmoothUI.
Glow Hover Cardglow-hover-cardA GlowHoverCards component for SmoothUI.
Gooey Filtergooey-filterA GooeyFilter component for SmoothUI.
Gooey Popovergooey-popoverA GooeyPopover component for SmoothUI.
Gravity Lettersgravity-lettersA GravityLetters component for SmoothUI.
Gravity Starsgravity-starsA GravityStars particle background component for SmoothUI.
Grid Loadergrid-loader3x3 grid-based loading animation with preset patterns
Holographic Foilholographic-foilA HolographicFoil component for SmoothUI.
Hover Expandhover-expandA HoverExpand component for SmoothUI.
Hover Image Listhover-image-listA HoverImageList component for SmoothUI.
Image Generation Panelimage-generation-panelA text-to-image generation console — prompt and settings up top, a full-width 2x2 batch resolving from low-res mosaic to sharp below.
Image Metadata Previewimage-metadata-previewA ImageMetadataPreview component for SmoothUI.
Infinite Sliderinfinite-sliderA InfiniteSlider component for SmoothUI.
Inline Testimonialsinline-testimonialsTestimonial quotes woven into a paragraph that expand inline on hover or focus.
Interactive Image Selectorinteractive-image-selectorA InteractiveImageSelector component for SmoothUI.
Job Listing Componentjob-listing-componentA JobListingComponent component for SmoothUI.
Kinetic Center Buildkinetic-center-buildA KineticCenterBuild text animation component for SmoothUI.
Kinetic Type Scrollkinetic-type-scrollA KineticTypeScroll text animation component for SmoothUI.
Line By Line Slideline-by-line-slideA LineByLineSlide text animation component for SmoothUI.
Liquid Metalliquid-metalA LiquidMetal component for SmoothUI.
Mac Terminalmac-terminalA MacTerminal component for SmoothUI.
Magnetic Buttonmagnetic-buttonButton that subtly follows the cursor with magnetic effect
Magnetic Fieldmagnetic-fieldA MagneticField component for SmoothUI.
Mask Reveal Upmask-reveal-upA MaskRevealUp text animation component for SmoothUI.
Micro Scale Fademicro-scale-fadeA MicroScaleFade text animation component for SmoothUI.
Morph Iconmorph-iconA MorphIcon component for SmoothUI.
Morph Surfacemorph-surfaceFeedback dock that morphs from a compact pill into a panel and back, with a spring layout transition.
Motion Loadermotion-loaderA MotionLoader component for SmoothUI.
Music Togglemusic-toggleA play/pause control shaped like a spinning record, with a live waveform and seekable progress ring.
Notification Badgenotification-badgeAnimated notification badge with count and status variants
Number Flownumber-flowA NumberFlow component for SmoothUI.
OrborbAn Orb component for SmoothUI.
Orbital Image Wheelorbital-image-wheelAn OrbitalImageWheel component for SmoothUI.
Organic Merge Transitionorganic-merge-transitionA soft-min SDF merge transition with two organic expanding shapes.
Page Preloaderpage-preloaderA page-preloader curtain that plays once and then uncovers the page.
PaginationpaginationAnimated pagination with spring-based active page indicator
Parallax Layersparallax-layersMulti-layer depth parallax for hero sections, with optional pointer-driven parallax.
Per Character Riseper-character-riseA PerCharacterRise text animation component for SmoothUI.
Per Word Crossfadeper-word-crossfadeA PerWordCrossfade text animation component for SmoothUI.
Perspective Text 3dperspective-text-3dA PerspectiveText3D text animation component for SmoothUI.
Photo Stackphoto-stackA PhotoStack component for SmoothUI.
PhototabphototabA Phototab component for SmoothUI.
Pinned Listpinned-listA list where selected items pin to the top and animate out of the flow into a pinned section.
Pixel Brush Canvaspixel-brush-canvasA PixelBrushCanvas component for SmoothUI.
Pixel Flow Fieldpixel-flow-fieldA PixelFlowField background component for SmoothUI.
Power Off Slidepower-off-slideA PowerOffSlide component for SmoothUI.
Price Flowprice-flowA PriceFlow component for SmoothUI.
Prism Sweep Transitionprism-sweep-transitionA persistent WebGL prism sweep transition wrapper for route and state changes.
Product Cardproduct-cardAnimated product card component for ecommerce
Progressive Blurprogressive-blurA ProgressiveBlur component for SmoothUI.
Radial Circles Transitionradial-circles-transitionA radial SDF circle pattern transition inspired by the Codrops radial circles step.
Radio Groupradio-groupAn animated Radio Group component for SmoothUI with selection indicator spring animation.
Ransom Noteransom-noteA RansomNote component for SmoothUI.
Reveal Textreveal-textA RevealText component for SmoothUI.
Reviews Carouselreviews-carouselA ReviewsCarousel component for SmoothUI.
Rich Popoverrich-popoverA RichPopover component for SmoothUI.
Rolling Textrolling-textA RollingText text animation component for SmoothUI.
Scale Down Fadescale-down-fadeA ScaleDownFade text animation component for SmoothUI.
Scramble Hoverscramble-hoverA ScrambleHover component for SmoothUI.
Scroll Image Revealscroll-image-revealAn image revealed by an animated mask as it scrolls into view, with a counter-parallax on the image.
Scroll Progressscroll-progressA reading-progress indicator with bar, ring, number and segmented variants.
Scroll Reveal Paragraphscroll-reveal-paragraphA ScrollRevealParagraph component for SmoothUI.
Scrollable Card Stackscrollable-card-stackA ScrollableCardStack component for SmoothUI.
ScrubberscrubberDesign-tool style scrubber slider with animated thumb and built-in label
Sdf Blob Transitionsdf-blob-transitionA persistent WebGL SDF blob transition wrapper for route and state changes.
Sdf Circle Transitionsdf-circle-transitionA clean SDF circle reveal based on the first Codrops shader step.
Searchable Dropdownsearchable-dropdownA SearchableDropdown component for SmoothUI.
SelectselectAn animated Select dropdown component for SmoothUI wrapping Radix Select with smooth animations.
Shader Reveal Circle Transitionshader-reveal-circle-transitionDemo 3 adaptation: noisy circular reveal with radial interpolation.
Shader Reveal Luma Transitionshader-reveal-luma-transitionDemo 5 adaptation: luminance-style vertical displacement translated into a shader overlay.
Shader Reveal Noise Transitionshader-reveal-noise-transitionDemo 1 adaptation: 4D-noise threshold transition with an organic shader gate.
Shader Reveal Planetary Transitionshader-reveal-planetary-transitionDemo 6 adaptation: rotated displacement vectors with a planetary swirl feel.
Shader Reveal Push Transitionshader-reveal-push-transitionDemo 8 adaptation: procedural noise push/pull displacement.
Shader Reveal Stripes Transitionshader-reveal-stripes-transitionDemo 7 adaptation: divided UV stripe displacement with diagonal motion.
Shader Reveal Transitionshader-reveal-transitionA shared WebGL transition engine with eight shader-driven reveal variants.
Shader Reveal Wipe Transitionshader-reveal-wipe-transitionDemo 4 adaptation: displacement-noise horizontal wipe with a sharp eased edge.
Shader Reveal Zoom Transitionshader-reveal-zoom-transitionDemo 2 adaptation: vertical-progress zoom mix translated into a UI frame transition.
Shared Axis Xshared-axis-xA SharedAxisX text animation component for SmoothUI.
Shared Axis Yshared-axis-yA SharedAxisY text animation component for SmoothUI.
Shared Axis Zshared-axis-zA SharedAxisZ text animation component for SmoothUI.
Shimmer Sweepshimmer-sweepA ShimmerSweep text animation component for SmoothUI.
Shine Textshine-textA ShineText light-sweep text animation component for SmoothUI.
Short Slide Downshort-slide-downA ShortSlideDown text animation component for SmoothUI.
Short Slide Rightshort-slide-rightA ShortSlideRight text animation component for SmoothUI.
Siri Orbsiri-orbA beautiful animated orb component inspired by Siri's visual design.
Skeleton Loaderskeleton-loaderAnimated skeleton loading placeholders
Smooth Buttonsmooth-buttonA polished button component with gradient variants and press animation
Social Hover Cardsocial-hover-cardA profile hover card: avatar/handle trigger that expands into a preview with stats, bio and a follow action.
Social Selectorsocial-selectorA SocialSelector component for SmoothUI.
Soft Blur Insoft-blur-inA SoftBlurIn text animation component for SmoothUI.
Spring Scale Inspring-scale-inA SpringScaleIn text animation component for SmoothUI.
SquirclesquircleA Squircle component for SmoothUI.
Stagger From Centerstagger-from-centerA StaggerFromCenter text animation component for SmoothUI.
Stagger From Edgesstagger-from-edgesA StaggerFromEdges text animation component for SmoothUI.
Svg Clip Masksvg-clip-maskReveals any children through a custom SVG shape mask that can morph on a loop, on scroll, or on hover.
Svg Draw On Scrollsvg-draw-on-scrollAn SVG path that draws itself as you scroll, optionally with a marker riding the tip.
Swap Panelswap-panelA SwapPanel component for SmoothUI.
Switchboard Cardswitchboard-cardA SwitchboardCard component with light grid illustration for SmoothUI.
Text Morphtext-morphA TextMorph text animation component for SmoothUI.
Theme Toggletheme-toggleA light/dark/system theme switch with sun-moon, pill, switch and orb visual treatments.
Tilt Cardtilt-cardA TiltCard component for SmoothUI.
Time Machine Stacktime-machine-stackA TimeMachineStack component for SmoothUI.
Top Down Letterstop-down-lettersA TopDownLetters text animation component for SmoothUI.
Tweet Cardtweet-cardA beautiful tweet card component for displaying Twitter/X posts.
Typewriter Texttypewriter-textA TypewriterText component for SmoothUI.
Unlock Face Idunlock-face-idAn UnlockFaceId component for SmoothUI.
User Account Avataruser-account-avatarA UserAccountAvatar component for SmoothUI.
Vector Editor Toolbarvector-editor-toolbarA Figma-style floating vector toolbar with tool selection, nested flyouts and a contextual properties bar.
Video Ambientvideo-ambientA video with a two-pass Ambilight-style glow sampled live from its own frames, with a CORS-safe static fallback.
Video Modalvideo-modalA video thumbnail that morphs into a full accessible player inside a modal, with a custom keyboard-operable control bar.
Wallet Cardwallet-cardA WalletCard component for SmoothUI.
Warped Circle Transitionwarped-circle-transitionA wavy perimeter circle reveal inspired by the Codrops circle warping step.
Wave Textwave-textA WaveText component for SmoothUI.