Motion Slide — logic2b/ui

down

left

right

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  MotionSlide,
  type MotionSlideDirection,
} from "@/components/ui/motion-slide"

const directions: MotionSlideDirection[] = ["up", "down", "left", "right"]

export default function MotionSlideDemo() {
  const [run, setRun] = React.useState(0)

  return (
    <div className="flex w-full flex-col items-center gap-6">
      <Button variant="outline" size="sm" onClick={() => setRun((n) => n + 1)}>
        Replay
      </Button>
      <div key={run} className="grid w-full grid-cols-2 gap-3">
        {directions.map((direction, i) => (
          <MotionSlide
            key={direction}
            direction={direction}
            delay={i * 100}
            className="flex h-20 items-center justify-center rounded-lg border bg-card text-sm font-medium text-card-foreground"
          >
            {direction}
          </MotionSlide>
        ))}
      </div>
    </div>
  )
}

Installation

npx logic2b@next add motion-slide

Working with an AI assistant? Copy this prompt into Claude Code, Cursor or Copilot — it carries the install steps, a no-CLI fallback and a verification checklist.

Add the "motion-slide" item from the logic2b ui registry (https://ui.logic2b.com) to this project. Follow every step and verify at the end.

## Steps

1. If the project has no `components.json` yet, set up logic2b ui first:

   ```bash
   npx logic2b@next init
   ```

2. Install the item (the CLI resolves registry dependencies automatically):

   ```bash
   npx logic2b@next add motion-slide
   ```

3. Install any npm dependencies the command prints.

## If the CLI is not available

Do it manually from the registry payload:

1. Fetch https://ui.logic2b.com/r/motion-slide.json.
2. Write every entry in `files[]` to its mapped project path (see below).
3. Repeat (recursively) for each name in `registryDependencies`.
4. Install every package listed in `dependencies` across those payloads.

## Registry reference

- Index of every item: https://ui.logic2b.com/r/index.json
- Item payload (full source): https://ui.logic2b.com/r/<name>.json
- Usage examples per item: https://ui.logic2b.com/r/demos/index.json → https://ui.logic2b.com/r/demos/<demo>.json
- Docs index for agents: https://ui.logic2b.com/llms.txt (full docs: https://ui.logic2b.com/llms-full.txt)
- Every docs page is Markdown when you append `.md` to its URL.

Registry file paths map to project paths like this:
- `ui/*` → `@/components/ui/*`
- `blocks/<name>/*` → `@/components/*`
- `charts/*` → `@/components/charts/*`
- `hooks/*` → `@/hooks/*`
- `lib/utils.ts` → `@/lib/utils.ts`
- `theme.css` → next to the project's Tailwind entry stylesheet

## Conventions (do not break these)

- Tailwind CSS v4 (CSS-first config; no tailwind.config.js needed) and React 19.
- All colors go through semantic tokens (`bg-primary`, `text-muted-foreground`,
  `border-border`, …). Never hardcode hex/oklch values in components.
- Dark mode is class-based: toggle `.dark` on `<html>`.
- Icons come from lucide-react.

## Verify before finishing

1. The dev server starts and the app renders without console errors.
2. TypeScript compiles (`tsc --noEmit` or the framework's check).
3. Components use the theme: a `<Button>` shows the primary token color,
   and toggling `.dark` on `<html>` switches the palette.

Copy into ui/motion-slide.tsx:

"use client"

import { Motion, type MotionPreset, type MotionProps } from "@/components/ui/motion"

export type MotionSlideDirection = "up" | "down" | "left" | "right"

export interface MotionSlideProps extends Omit<MotionProps, "preset"> {
  /** Direction the element travels from as it fades in. Default `"up"`. */
  direction?: MotionSlideDirection
}

const presetFor: Record<MotionSlideDirection, MotionPreset> = {
  up: "fade-up",
  down: "fade-down",
  left: "fade-left",
  right: "fade-right",
}

/** Slide a mounting element in from a direction while it fades. */
function MotionSlide({ direction = "up", ...props }: MotionSlideProps) {
  return <Motion preset={presetFor[direction]} {...props} />
}

export { MotionSlide }

Usage

import { MotionSlide } from "@/components/ui/motion-slide"

<MotionSlide direction="up" delay={80}>
  <Card>…</Card>
</MotionSlide>

MotionSlide maps direction onto the matching fade-* preset of Motion (up → fade-up, and so on), so it shares the same duration, delay, hover and asChild props.

Live playground

Edit the component props and inspect the exact JSX before copying it. The preview loads only when this section enters the viewport.

Generated JSX

<MotionSlide
  direction="up"
  duration={500}
  delay={0}
>Slide reveal</MotionSlide>

API reference

Generated from the public TypeScript exports in src/ui/motion-slide.tsx.

View JSON

MotionSlideDirection

Type

type MotionSlideDirection = "up" | "down" | "left" | "right"

MotionSlideProps

Type

interface MotionSlideProps extends Omit<MotionProps, "preset"> { /** Direction the element travels from as it fades in. Default `"up"`. */ direction?: MotionSlideDirection }

MotionSlide

Component

Slide a mounting element in from a direction while it fades.

Props: MotionSlideProps

Prop	Type	Required	Default	Description
`direction`	`MotionSlideDirection`	No	`"up"`	Direction the element travels from as it fades in. Default `"up"`.

Accessibility contract

Machine-readable behavior and consumer responsibilities for motion-slide.

View JSON

Support: Composition contract
Pattern: slide animation; Motion for React

Built-in semantics

Preserves child semantics and accepts reduced-motion behavior from the motion foundation.

Consumer responsibilities

Use a reduced or instant alternative and do not use position changes to imply a different reading order.

Known limitations

• Large translations can be uncomfortable unless reduced-motion preferences are honored.