Slide
Slide moves an element in from the start, end, top or bottom edge.
start/end are logical directions: in RTL, start is the right edge (flipped through the rtl: variant). It moves 20px (spacingXL) while fading. Use it for notices, action bars and content that changes between steps.
start
end
top
bottom
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Slide } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
start → from the right
end → from the left
Logical direction in RTL
The same from="start", but inside a dir="rtl" region the element slides in from the right.
Sliding notice
from="bottom" + unmountOnExit for a temporary notice.
Usage
Do
- Slide in from the side the element is anchored to (notices from the bottom, panels from the edge).
- Use start/end instead of left/right so RTL works.
Don't
- Don't slide several elements in different directions at the same time.
- Don't use Slide for tooltips or menus. They have their own animation.
Props
| Prop · Type | Default | Description |
|---|---|---|
| visibleboolean | Default: — | true runs the enter motion; false runs the exit motion. |
| appearboolean | Default: false | Runs the enter motion on the first render (when visible = true). |
| unmountOnExitboolean | Default: false | Removes the element from the DOM once the exit finishes. When false, the element is hidden (visibility: hidden). |
| duration"faster" | "fast" | "normal" | "gentle" | "slow" | Default: "normal" | Enter duration, mapped to the --durationFaster … --durationSlow tokens; easing --curveDecelerateMid. |
| exitDuration"faster" | "fast" | "normal" | "gentle" | "slow" | Default: = duration | Exit duration; easing --curveAccelerateMid. |
| onMotionFinish(direction: "enter" | "exit") => void | Default: — | Called when a motion phase ends. |
| childrenReactElement | Default: — | A single element. It receives the motion classes through Slot. |
| from"start" | "end" | "top" | "bottom" | Default: "bottom" | Edge it slides in from (start/end follow the text direction). |
| animateOpacityboolean | Default: true | Fades as well. |