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 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.
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
Bottom Up Lettersbottom-up-lettersA BottomUpLetters text animation component for SmoothUI.
BreadcrumbbreadcrumbAnimated breadcrumb navigation with stagger-in animation
Button Copybutton-copyA ButtonCopy 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.
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.
Cursor Followcursor-followA CursorFollow component for SmoothUI.
Depth Parallax Wordsdepth-parallax-wordsA DepthParallaxWords text animation component for SmoothUI.
DialogdialogAnimated Dialog and AlertDialog components for SmoothUI.
Dot Morph Buttondot-morph-buttonA DotMorphButton component for SmoothUI.
DrawerdrawerAn animated Drawer component for SmoothUI that slides from any side.
Dropdown Menudropdown-menuAn animated Dropdown Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation.
Dynamic Islanddynamic-islandA DynamicIsland component for SmoothUI.
Expandable Cardsexpandable-cardsA ExpandableCards component for SmoothUI.
Exposure Sliderexposure-slideriOS-style exposure slider with draggable ticker and progress ring
Fade Throughfade-throughA FadeThrough text animation component for SmoothUI.
Figma Commentfigma-commentA FigmaComment component for SmoothUI.
Focus Blur Resolvefocus-blur-resolveA FocusBlurResolve text animation 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.
Glow Hover Cardglow-hover-cardA GlowHoverCards component for SmoothUI.
Gooey Popovergooey-popoverA GooeyPopover component for SmoothUI.
Grid Loadergrid-loader3x3 grid-based loading animation with preset patterns
Image Metadata Previewimage-metadata-previewA ImageMetadataPreview component for SmoothUI.
Infinite Sliderinfinite-sliderA InfiniteSlider component for SmoothUI.
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.
Line By Line Slideline-by-line-slideA LineByLineSlide text animation component for SmoothUI.
Magnetic Buttonmagnetic-buttonButton that subtly follows the cursor with magnetic effect
Mask Reveal Upmask-reveal-upA MaskRevealUp text animation component for SmoothUI.
Micro Scale Fademicro-scale-fadeA MicroScaleFade text animation component for SmoothUI.
Morph Surfacemorph-surfaceFeedback dock that morphs from a compact pill into a panel and back, with a spring layout transition.
Notification Badgenotification-badgeAnimated notification badge with count and status variants
Number Flownumber-flowA NumberFlow component for SmoothUI.
Organic Merge Transitionorganic-merge-transitionA soft-min SDF merge transition with two organic expanding shapes.
PaginationpaginationAnimated pagination with spring-based active page indicator
Per Character Riseper-character-riseA PerCharacterRise text animation component for SmoothUI.
Per Word Crossfadeper-word-crossfadeA PerWordCrossfade text animation component for SmoothUI.
Photo Stackphoto-stackA PhotoStack component for SmoothUI.
PhototabphototabA Phototab 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
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.
Reveal Textreveal-textA RevealText component for SmoothUI.
Reviews Carouselreviews-carouselA ReviewsCarousel component for SmoothUI.
Rich Popoverrich-popoverA RichPopover component for SmoothUI.
Scale Down Fadescale-down-fadeA ScaleDownFade text animation component for SmoothUI.
Scramble Hoverscramble-hoverA ScrambleHover component for SmoothUI.
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 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.
Stagger From Centerstagger-from-centerA StaggerFromCenter text animation component for SmoothUI.
Stagger From Edgesstagger-from-edgesA StaggerFromEdges text animation component for SmoothUI.
Switchboard Cardswitchboard-cardA SwitchboardCard component with light grid illustration 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.
User Account Avataruser-account-avatarA UserAccountAvatar 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.