PODIE UI components

PODIE UI components

Apps

Hover to animate[](https://podie.dev/frameworks/workflow)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

WORKFLOWAutomation

Hover to animate[](https://podie.dev/frameworks/coding)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

CODINGDeveloper tools

Hover to animate[](https://podie.dev/frameworks/design)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

DESIGNDesign tools

Hover to animate[](https://podie.dev/frameworks/dragon-type-specimen)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

Dragon Type SpecimenPortfolio

Hover to animate[](https://podie.dev/frameworks/atelier)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

Atelier DesktopPortfolio

Hover to animate[](https://podie.dev/frameworks/cinema-reel)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

Cinema ReelPortfolio

Hover to animate[](https://podie.dev/frameworks/dino-lab)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

Dino LabPortfolio

Hover to animate[](https://podie.dev/frameworks/oriel)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

OrielProduct showcases

Hover to animate[](https://podie.dev/frameworks/epoch-one)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

Epoch OneProduct showcases

Hover to animate[](https://podie.dev/frameworks/moments)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

MomentsPortfolio

Hover to animate[](https://podie.dev/frameworks/blackplus)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

BlackplusProduct showcases

Hover to animate[](https://podie.dev/frameworks/elio)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

ElioCommerce

Hover to animate[](https://podie.dev/frameworks/metric)

Skip the blank page.

Copy prompt

Copy promptCopy CLI command

MetricEvents

Landing

[](https://podie.dev/components/codrops--intro-grid-motion-transition)

Intro Grid with Hover MotionCodrops

[](https://podie.dev/components/codrops--on-scroll-layout-formations)

On-Scroll Layout FormationsCodrops

[](https://podie.dev/components/codrops--one-element-scroll)

Consecutive Scroll Animations with One ElementCodrops

[](https://podie.dev/components/codrops--rotating-on-scroll-animations)

Rotating On-Scroll AnimationsCodrops

[](https://podie.dev/components/codrops--sticky-sections)

Animations for Sticky SectionsCodrops

[](https://podie.dev/components/skiper--skiper16)

Card stack scrollSkiper UI

More landing↓

Loading

[](https://podie.dev/components/smooth--ai-loader)

Ai LoaderSmooth UI

[](https://podie.dev/components/smooth--grid-loader)

Grid LoaderSmooth UI

[](https://podie.dev/components/smooth--motion-loader)

Motion LoaderSmooth UI

[](https://podie.dev/components/smooth--skeleton-loader)

Skeleton LoaderSmooth UI

[](https://podie.dev/components/kokonut--ai-loading)

AI State LoadingKokonut UI

[](https://podie.dev/components/kokonut--ai-text-loading)

AI Text LoadingKokonut UI

More loading↓

Menu

[](https://podie.dev/components/codrops--background-scale-hover-effect)

Background Scale Hover EffectCodrops

[](https://podie.dev/components/codrops--image-tiles-menu)

Image Tiles Menu AnimationCodrops

[](https://podie.dev/components/codrops--marquee-menu)

Marquee Menu Hover AnimationCodrops

[](https://podie.dev/components/codrops--ease-reverse-clip-menu)

GSAP EaseReverse Clip MenuCodrops

[](https://podie.dev/components/codrops--inline-menu-layout)

Inline Menu Layout with Gallery PanelCodrops

[](https://podie.dev/components/codrops--3-dletters-menu-hover)

3D Letters Menu Hover EffectCodrops

More menu↓

Navigation

[](https://podie.dev/components/motion-primitives--animated-background)

Animated BackgroundMotion Primitives

[](https://podie.dev/components/smooth--animated-stepper)

Animated StepperSmooth UI

[](https://podie.dev/components/smooth--animated-tabs)

Animated TabsSmooth UI

[](https://podie.dev/components/skiper--skiper40)

CssLinkSkiper UI

[](https://podie.dev/components/21st--ruixen-ui-sliding-pagination)

Sliding PaginationRuixen · 21st.dev

[](https://podie.dev/components/21st--ruixen-ui-morphing-page-dots)

Morphing Page DotsRuixen · 21st.dev

More navigation↓

Carousel

[](https://podie.dev/components/codrops--gradient-carousel)

Infinite Gradient 3D CarouselClément Grellier · Codrops

[](https://podie.dev/components/codrops--rotating-gallery)

Rotating WebGL GalleryOluwaseyi Oluwadare · Codrops

[](https://podie.dev/components/smooth--coverflow-carousel)

Coverflow CarouselSmooth UI

[](https://podie.dev/components/codrops--3-dcarousel)

On-Scroll 3D CarouselCodrops

[](https://podie.dev/components/codrops--diagonal-thumbnails)

Diagonal Thumbnails SlideshowCodrops

[](https://podie.dev/components/skiper--skiper47)

Perspective carouselSkiper UI

More carousel↓

Transitions

[](https://podie.dev/components/codrops--repeating-transition)

Repeating Image TransitionManoela Ilic · Codrops

[](https://podie.dev/components/smooth--aperture-blur-transition)

Aperture Blur TransitionSmooth UI

[](https://podie.dev/components/smooth--chroma-blur-transition)

Chroma Blur TransitionSmooth UI

[](https://podie.dev/components/smooth--prism-sweep-transition)

Prism Sweep TransitionSmooth UI

[](https://podie.dev/components/smooth--sdf-blob-transition)

Sdf Blob TransitionSmooth UI

[](https://podie.dev/components/smooth--sdf-circle-transition)

Sdf Circle TransitionSmooth UI

More transitions↓

Backgrounds

[](https://podie.dev/components/magicui--ripple)

RippleMagic UI

[](https://podie.dev/components/smooth--arcade-pixel)

Arcade PixelSmooth UI

[](https://podie.dev/components/smooth--aurora-curtain)

Aurora CurtainSmooth UI

[](https://podie.dev/components/smooth--gravity-stars)

Gravity StarsSmooth UI

[](https://podie.dev/components/smooth--liquid-metal)

Liquid MetalSmooth UI

[](https://podie.dev/components/smooth--orb)

OrbSmooth UI

More backgrounds↓

3D

Hover to animate[](https://podie.dev/components/codrops--3-dstack-motion)

3D Stack Motion on ScrollCodrops

Hover to animate[](https://podie.dev/components/codrops--scroll3-dgrid)

On-Scroll 3D Grid AnimationsCodrops

Hover to animate[](https://podie.dev/components/codrops--staggered3-dgrid-animations)

Staggered (3D) Grid Animations with Scroll-Triggered EffectsCodrops

Hover to animate[](https://podie.dev/components/kraavon--torus-knot)

Torus KnotKraavon UI

Hover to animate[](https://podie.dev/components/kraavon--floating-sphere)

Floating SphereKraavon UI

Hover to animate[](https://podie.dev/components/kraavon--wave-plane)

Wave PlaneKraavon UI

More 3d↓

Cards

[](https://podie.dev/components/magicui--border-beam)

Border BeamMagic UI

[](https://podie.dev/components/magicui--shine-border)

Shine BorderMagic UI

[](https://podie.dev/components/smooth--border-beam)

Border BeamSmooth UI

[](https://podie.dev/components/smooth--glow-hover-card)

Glow Hover CardSmooth UI

[](https://podie.dev/components/smooth--switchboard-card)

Switchboard CardSmooth UI

[](https://podie.dev/components/smooth--tilt-card)

Tilt CardSmooth UI

More cards↓

Interaction

[](https://podie.dev/components/magicui--blur-fade)

Blur FadeMagic UI

[](https://podie.dev/components/smooth--agent-avatar)

Agent AvatarSmooth UI

[](https://podie.dev/components/smooth--basic-accordion)

Basic AccordionSmooth UI

[](https://podie.dev/components/smooth--mac-terminal)

Mac TerminalSmooth UI

[](https://podie.dev/components/smooth--magnetic-field)

Magnetic FieldSmooth UI

[](https://podie.dev/components/magicui--marquee)

MarqueeMagic UI

More interaction↓

Typography

[](https://podie.dev/components/magicui--number-ticker)

Number TickerMagic UI

[](https://podie.dev/components/motion-primitives--text-shimmer)

Text ShimmerMotion Primitives

[](https://podie.dev/components/motion-primitives--text-effect)

Text EffectMotion Primitives

[](https://podie.dev/components/magicui--sparkles-text)

Sparkles TextMagic UI

[](https://podie.dev/components/smooth--blur-out-up)

Blur Out UpSmooth UI

[](https://podie.dev/components/smooth--bottom-up-letters)

Bottom Up LettersSmooth UI

More typography↓

Buttons

[](https://podie.dev/components/motion-primitives--magnetic)

MagneticMotion Primitives

[](https://podie.dev/components/smooth--magnetic-button)

Magnetic ButtonSmooth UI

[](https://podie.dev/components/magicui--pulsating-button)

Pulsating ButtonMagic UI

[](https://podie.dev/components/magicui--ripple-button)

Ripple ButtonMagic UI

[](https://podie.dev/components/magicui--shiny-button)

Shiny ButtonMagic UI

[](https://podie.dev/components/kokonut--attract-button)

Magnet ButtonKokonut UI

More buttons↓

Feedback

[](https://podie.dev/components/smooth--animated-progress-bar)

Animated Progress BarSmooth UI

[](https://podie.dev/components/magicui--animated-circular-progress-bar)

Animated Circular Progress BarMagic UI

[](https://podie.dev/components/skiper--skiper89)

Scroll progress 001Skiper UI

[](https://podie.dev/components/21st--ruixen-ui-notifications-filter)

Notifications FilterRuixen · 21st.dev

[](https://podie.dev/components/21st--ruixen-ui-tree-node-tooltip)

Tree Node TooltipRuixen · 21st.dev

[](https://podie.dev/components/21st--ruixen-ui-notification-inbox-popover)

NotificationIn box PopoverRuixen · 21st.dev

More feedback↓

Inputs

[](https://podie.dev/components/smooth--animated-toggle)

Animated ToggleSmooth UI

[](https://podie.dev/components/21st--ruixen-ui-correct-number-input)

Correct Number InputRuixen · 21st.dev

[](https://podie.dev/components/21st--ruixen-ui-clean-tag-input)

Clean Tag InputRuixen · 21st.dev

[](https://podie.dev/components/21st--ruixen-ui-input-with-select)

Input With SelectRuixen · 21st.dev

[](https://podie.dev/components/21st--ruixen-ui-event-scheduler)

Event SchedulerRuixen · 21st.dev

[](https://podie.dev/components/21st--ruixen-ui-color-emotion-select)

ColorEmotionSelectRuixen · 21st.dev

More inputs↓

AI & chat

[](https://podie.dev/components/smooth--ai-response)

Ai ResponseSmooth UI

[](https://podie.dev/components/21st--ruixen-ui-ai-chat-input)

Ai Chat InputRuixen · 21st.dev

[](https://podie.dev/components/21st--ruixen-ui-gradient-chat-input)

Gradient Chat InputRuixen · 21st.dev

[](https://podie.dev/components/ruixen--faq-chat-accordion)

FAQ Chat AccordionRuixen UI

[](https://podie.dev/components/ruixen--claude-chat-input)

Claude Chat InputRuixen UI

[](https://podie.dev/components/motiq--ai-response-stream)

AI Response StreamMotiq

More ai & chat↓Browse all components

React components, from preview to your project.

Explore live effects, inspect the source, and install an editable copy with your package manager.