Skip to content
All 6 kits from $99 · Everything Bundle $149

Slide In

MotionMIT
View in Storybook

Slide-in entrance primitive from any edge — top / right / bottom / left.

bun add @otfdashkit/ui

Preview

Slide In
Loading Storybook preview…

Code

import { SlideIn } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="space-y-4">
      <SlideIn direction="up"><div className="rounded-md border border-border bg-card p-4 text-foreground">Slide up</div></SlideIn>
      <SlideIn direction="down" delay={0.1}><div className="rounded-md border border-border bg-card p-4 text-foreground">Slide down</div></SlideIn>
      <SlideIn direction="left" delay={0.2}><div className="rounded-md border border-border bg-card p-4 text-foreground">Slide left</div></SlideIn>
      <SlideIn direction="right" delay={0.3}><div className="rounded-md border border-border bg-card p-4 text-foreground">Slide right</div></SlideIn>
    </div>
  )
}

Free with the SDK. This pattern ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the SlideIn source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
childrenrequiredReactNode
delaynumber0
direction'up' | 'down' | 'left' | 'right''up'
durationnumber