Motion-heavy React components ready to copy and paste for silky user interfaces.
Included Components
214
SmoothUIGuidesUI ComponentsAccordionAnimated File UploadAnimated InputAnimated ListAnimated Number InputAnimated Progress BarAnimated StepperAnimated TabsAnimated ToggleAnimated TooltipAuth FormBasic DropdownBasic ModalBasic ToastCheckboxCode BlockComboboxContext MenuCountry DialogDialogDrawerDropdown MenuDuration PickerFavicon SearchFile TreeFormNotification BadgePinned ListRadio GroupSearchable DropdownSelectSkeletonTheme ToggleTweet CardBreadcrumbDockExpandable NavbarFloating NavbarMorph IconPaginationSmooth ButtonButton CopyClip Corners ButtonDot Morph ButtonMagnetic ButtonBlur Out UpBottom Up LettersDepth Parallax WordsFade ThroughFocus Blur ResolveGravity LettersKinetic Center BuildKinetic Type ScrollLine-by-Line SlideMask Reveal UpMicro Scale FadePer Character RisePer Word CrossfadePerspective Text 3DReveal TextRolling TextScale Down FadeScramble HoverScroll Reveal ParagraphShared Axis XWord Cut StaircaseShared Axis ZShimmer SweepShine TextShort Slide DownShort Slide RightSoft Blur InSpring Scale InStagger From CenterStagger From EdgesText MorphTop Down LettersTypewriter TextWave TextAI ConversationAI Prompt InputAI MessageAI ResponseAI SuggestionsAI LoaderAgent AvatarAI BranchAI CitationAI SourcesAI ReasoningAI Tool CallAI Task ListAI ApprovalAI DiffAI ArtifactAI Context MeterImage Generation PanelSiri OrbAI Orb FaceAperture Blur TransitionChroma Blur TransitionOrganic Merge TransitionPrism Sweep TransitionRadial Circles TransitionSDF Blob TransitionSDF Circle TransitionCircle Reveal TransitionLuma Ribbons TransitionNoise Gate TransitionPlanetary Swirl TransitionNoise Push TransitionStripe Shutter TransitionShader Reveal TransitionDisplacement Wipe TransitionZoom Wash TransitionWarped Circle TransitionASCII RenderAurora CurtainBorder BeamDither ImageEmboss SurfaceGlass CardGooey FilterGravity StarsHolographic FoilLiquid MetalOrbPixel Flow FieldProgressive BlurSquircleDither ChartMotion LoaderPage PreloaderCoverflow CarouselCursor Image TrailHover ExpandHover Image ListOrbital Image WheelTime Machine StackVideo AmbientVideo ModalParallax LayersScroll Image RevealScroll ProgressSVG Clip MaskSVG Draw On ScrollDrawing CursorMagnetic FieldTilt CardArcade PixelPixel Brush CanvasRansom NoteVector Editor ToolbarAnimated Avatar GroupProduct CardAnimated OTP InputAnimated TagsApp Download StackApple InvitesBookContribution GraphCursor FollowDynamic IslandExpandable CardsExposure SliderFigma CommentGitHub Stars AnimationGlow Hover CardsGooey PopoverGrid LoaderImage Metadata PreviewInfinite SliderInteractive Image SelectorJob Listing ComponentMorph SurfaceNumber FlowPhoto StackPhototabPower Off SlidePrice FlowReviews CarouselRich PopoverScrubberScrollable Card StackSocial SelectorSwitchboard CardUser Account AvatarBreakpoint IndicatorCard Swipe DeckEmoji ReactionFolder RevealInline TestimonialsMac TerminalMusic ToggleSocial Hover CardSwap PanelUnlock Face IDWallet CardAnimationsAccessibilitysparkbites.devcodevator.devthegridcn.comui-craftX (Twitter)Eduardo CalvoSmooth DrawerSpring AccordionFloating Pill MenuFluid Notification StackTactile Button Press
Smooth UI is an open-source, animation-centric collection of React components developed by Eduard Constantin. Leveraging Framer Motion and Tailwind CSS, each component is fine-tuned to eliminate abrupt transitions, ensuring that layout changes feel organic and tactile.
