Back to the catalog

Install from the registry

Every ported component is a registry item. The shadcn-svelte CLI writes the Svelte file into your project, installs motion-sv and drops the upstream license notice next to it.

Before you start

A SvelteKit project with Tailwind 4 and a components.json. shadcn-svelte init expects Tailwind to be there already and exits with "This CLI version requires Tailwind CSS v4 and Svelte v5" if it is missing, so add Tailwind first:

npx sv add tailwindcss

Then create the components.json:

npx shadcn-svelte@latest init

The command

Swap fade-in for any name from the list below.

npx shadcn-svelte@latest add https://amicro-sv.enisdev.com/r/fade-in.json

164 of 164 items

  • Fade Down Component
    fade-down
  • Fade In Component
    fade-in
  • Fade Up Component
    fade-up
  • Scale In Component
    scale-in
  • Slide Left Component
    slide-left
  • Slide Right Component
    slide-right
  • Zoom In Component
    zoom-in
  • Card Hover Component
    card-hover
  • Glow Button Component
    glow-button
  • Magnetic Button Component
    magnetic-button
  • Tilt Card Component
    tilt-card
  • Blur Text Component
    blur-text
  • Character Stagger Component
    character-stagger
  • Text Reveal Component
    text-reveal
  • Word Reveal Component
    word-reveal
  • Progress Indicator Component
    progress-indicator
  • Scroll Reveal Component
    scroll-reveal
  • Sticky Reveal Component
    sticky-reveal
  • Cursor Trail Component
    cursor-trail
  • Mouse Follow Component
    mouse-follow
  • Spotlight Component
    spotlight
  • Page Transition Component
    page-transition
  • Card Arc5 Component
    card-arc5
  • Accordion Loader Component
    accordion-loader
  • App Icon Load Component
    app-icon-load
  • Apple Breathe Component
    apple-breathe
  • Apple Equalizer Component
    apple-equalizer
  • Apple Icon Morph Component
    apple-icon-morph
  • Apple Pulse Dots Component
    apple-pulse-dots
  • Apple Scale Pulse Component
    apple-scale-pulse
  • Apple Sound Wave Component
    apple-sound-wave
  • Apple Text Reveal Component
    apple-text-reveal
  • Apple Unlock Component
    apple-unlock
  • Arc Tracer Component
    arc-tracer
  • Bar Cascade Component
    bar-cascade
  • Bar Sweep Component
    bar-sweep
  • Bobbing Dots Component
    bobbing-dots
  • Bounce Dots Component
    bounce-dots
  • Bouncing Bars Component
    bouncing-bars
  • Bouncing Dots Component
    bouncing-dots
  • Bouncing Lines Component
    bouncing-lines
  • Bouncing Square Component
    bouncing-square
  • Breathe Ring Component
    breathe-ring
  • Breathing Glow Component
    breathing-glow
  • Breathing Square Component
    breathing-square
  • Circular Bars Component
    circular-bars
  • Classic Spinner Component
    classic-spinner
  • Clock Spinner Component
    clock-spinner
  • Comet Spinner Component
    comet-spinner
  • Concentric Pulse Component
    concentric-pulse
  • Concentric Ring Component
    concentric-ring
  • Concentric Squares Component
    concentric-squares
  • Conveyor Loop Component
    conveyor-loop
  • Cross Spinner Component
    cross-spinner
  • Cube Flip Spring Component
    cube-flip-spring
  • Dash Ring Component
    dash-ring
  • Dashed Spiral Component
    dashed-spiral
  • Diamond Grid Component
    diamond-grid
  • Diamond Rotate Spring Component
    diamond-rotate-spring
  • Dot Spinner Component
    dot-spinner
  • Dots Ring Component
    dots-ring
  • Double Ring Component
    double-ring
  • Drop Dot Component
    drop-dot
  • Dual Arc Component
    dual-arc
  • Dynamic Island Component
    dynamic-island
  • Elastic Bars Component
    elastic-bars
  • Elastic Square Component
    elastic-square
  • Expanding Cross Component
    expanding-cross
  • Face Id Scan Component
    face-id-scan
  • Fade Arc Component
    fade-arc
  • Fade Dots Component
    fade-dots
  • Flip Square Component
    flip-square
  • Floating Diamonds Component
    floating-diamonds
  • Fluid Bars Component
    fluid-bars
  • Fluid Diamond Component
    fluid-diamond
  • Fluid Dot Orbit Component
    fluid-dot-orbit
  • Fluid Skeleton Component
    fluid-skeleton
  • Gears Component
    gears
  • Glassmorphic Card Component
    glassmorphic-card
  • Gradient Arc Component
    gradient-arc
  • Grid Dots Component
    grid-dots
  • Haptic Ring Component
    haptic-ring
  • Heartbeat Component
    heartbeat
  • Hexagon Spinner Component
    hexagon-spinner
  • Hourglass Component
    hourglass
  • Infinity Path Component
    infinity-path
  • Intersecting Rings Component
    intersecting-rings
  • Ios Spinner Component
    ios-spinner
  • Line Spinner Component
    line-spinner
  • Liquid Dots Component
    liquid-dots
  • Mac Terminal Component
    mac-terminal
  • Magnetic Dots Component
    magnetic-dots
  • Minimal Triangle Component
    minimal-triangle
  • Morph Dot Ring Component
    morph-dot-ring
  • Morph Loader Component
    morph-loader
  • Morphing Bars Component
    morphing-bars
  • Morphing Infinity Component
    morphing-infinity
  • Morphing Ring Component
    morphing-ring
  • Morphing Shape Component
    morphing-shape
  • Newtons Cradle Component
    newtons-cradle
  • Offset Rings Component
    offset-rings
  • Orbiting Circles Component
    orbiting-circles
  • Orbiting Dot Component
    orbiting-dot
  • Origami Shape Component
    origami-shape
  • Pendulum Component
    pendulum
  • Pulsating Dots Component
    pulsating-dots
  • Pulse Component
    pulse
  • Pulse Dot Component
    pulse-dot
  • Pulse Dots Component
    pulse-dots
  • Pulse Square Component
    pulse-square
  • Pumping Heart Component
    pumping-heart
  • Radar Sweep Component
    radar-sweep
  • Ring Sweep Component
    ring-sweep
  • Ripple Effect Component
    ripple-effect
  • Rotating Cross Component
    rotating-cross
  • Rotating Triangle Component
    rotating-triangle
  • Shape Shift Grid Component
    shape-shift-grid
  • Shimmer Line Component
    shimmer-line
  • Siri Wave Component
    siri-wave
  • Skeleton Component
    skeleton
  • Skeleton Loader Component
    skeleton-loader
  • Sliding Bars Component
    sliding-bars
  • Smooth Dot Shift Component
    smooth-dot-shift
  • Smooth Ring Component
    smooth-ring
  • Smooth Rounded Square Component
    smooth-rounded-square
  • Spinning Squares Component
    spinning-squares
  • Spiral Spinner Component
    spiral-spinner
  • Spring Bars Component
    spring-bars
  • Spring Dot Matrix Component
    spring-dot-matrix
  • Spring Hexagon Component
    spring-hexagon
  • Spring Ring Expand Component
    spring-ring-expand
  • Spring Text Pop Component
    spring-text-pop
  • Square Accordion Component
    square-accordion
  • Square Grid Component
    square-grid
  • Square Snake Component
    square-snake
  • Square Spinner Component
    square-spinner
  • Stacked Bar Pulse Component
    stacked-bar-pulse
  • Swapping Dots Component
    swapping-dots
  • Swirling Spinner Component
    swirling-spinner
  • Symmetric Wave Component
    symmetric-wave
  • Terminal Loader Component
    terminal-loader
  • Text Blink Component
    text-blink
  • Text Dots Component
    text-dots
  • Text Morph Component
    text-morph
  • Text Shimmer Component
    text-shimmer
  • Text Shimmer Wave Component
    text-shimmer-wave
  • Trailing Dots Component
    trailing-dots
  • Triple Dot Spinner Component
    triple-dot-spinner
  • Twin Orbit Component
    twin-orbit
  • Typing Component
    typing
  • Typing Indicator Component
    typing-indicator
  • Wandering Cube Component
    wandering-cube
  • Watch Spinner Component
    watch-spinner
  • Wave Dots Component
    wave-dots
  • Wave Physics Loader Component
    wave-physics-loader
  • Waveform Loader Component
    waveform-loader
  • Zig Zag Pulse Component
    zig-zag-pulse
  • Use Mouse Position Hook
    use-mouse-position
  • Use Reduced Motion Hook
    use-reduced-motion
  • Use Scroll Progress Hook
    use-scroll-progress
  • Use Stagger Hook
    use-stagger
  • Use Web Haptics Hook
    use-web-haptics
  • Presets Helper
    presets
  • Utils Helper
    utils