Search documentation

Search components and pages

Slide In

Slide in from a direction with preset variants.

Slide from left

Installation

Requires MotionProvider and gsap. Add the slide in component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/slide-in.json

Usage

import { SlideIn } from "@/void/scroll/slide-in"

<SlideIn from="left" duration={1}>
  <div className="rounded-xl border bg-card p-6">Slide from left</div>
</SlideIn>

Examples

Default

Slide from left

Code

import { SlideIn } from "@/void/scroll/slide-in"

<SlideIn from="left" duration={1}>
  <div className="rounded-xl border bg-card p-6">Slide from left</div>
</SlideIn>