build69
Sign inGet API key
build69  /  Components  /  Motion — Transitions & Decorative  /  Slide

Slide

v1.0.2Updated 28 Jul 2026

Translates its child in from a given direction while fading it, so content enters with a sense of where it came from. `direction` picks the origin edge (up / down / left / right) and `distance` sets the travel in px. Pair it with Fade and a per-item delay to build a staggered grid entrance.

View source← Back to catalog

Preview

Live · 3 stories
Slide All DirectionsOpen ↗
▸Why this is recommendedslidetransitionanimationtranslate+6

Slide — all directions.

Recommended for+14
  • ✓Sliding a notification or toast in from the edge
  • ✓Staggering a grid of cards up into view
  • ✓Revealing a drawer or side panel sliding in from an edge
  • ✓Animating stepper content between steps
Tags+6
slidetransitionanimationtranslatedirectionmotionmuidraweralldirections
Features+4
  • Directional entrance: up / down / left / right
  • Configurable travel distance in px (default 16)
  • Combined opacity fade + transform
  • Configurable duration / delay / easing per instance
  • unmountOnExit removes the child from the DOM after exit
  • Respects prefers-reduced-motion (snaps, no animation)
  • data-direction + data-state attributes for debugging
Not recommended for−2
  • ✕Animating height or width (use Collapse)
  • ✕In-place entrances with no movement (use Fade or Grow)
  • ✕Page-level route transitions

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Slide" })

Usage

import { Slide } from '@/components/motion/transitions/slide';

<Slide in={shown} direction="up" distance={32} duration={250}>
  <StatCard />
</Slide>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
in

Whether the child is shown; drives the transition

booleanyes
direction

Direction the child travels as it enters; it moves in from the opposite edge (e.g. 'up' slides upward from below). Default 'up'

'up' | 'down' | 'left' | 'right'—
distance

Travel distance in px. Default 16

number—
duration

Duration in ms. Default 200

number—
delay

Delay in ms before the transition starts. Default 0

number—
easing

Timing function. Default 'ease-out'

'ease' | 'ease-out' | 'ease-in' | 'linear'—
unmountOnExit

Remove the child from the DOM after exit. Default false

boolean—
className

Extra classes merged onto the wrapper element

string—
style

Extra inline styles; transition-driven properties take precedence

React.CSSProperties—
ref

Ref to the wrapper element (React 19 ref-as-prop)

React.Ref<HTMLDivElement>—
children

Content to slide

React.ReactNodeyes

Related

Platform docsAll componentsSource files