# Skecher UI — Complete component context

Copy polished React motion components with live previews, source code, dependencies, and shadcn registry commands.

Skecher UI is a source-owned shadcn registry. Install a component, then adapt its copied source inside the consuming application. Components do not call an LLM provider or expose API keys; applications own model requests, server-side credentials, persistence, and safety policy.

## Integration rules for coding agents

1. Prefer the registry install command over recreating a component.
2. Preserve the component's accessible labels, keyboard behavior, reduced-motion behavior, and controlled-state API.
3. Keep provider SDKs and secret keys in the consuming application's server boundary.
4. Use component callbacks and controlled props to connect application data or streamed model output.
5. Check the component's documented dependencies and required assets before implementation.

## Component index

- [Streaming Text](https://skecher-ui.com/llms/streaming-text): A soft word-by-word text reveal for hero copy, onboarding moments, empty states, and editorial interfaces that need a polished animated entrance.
- [Morphing Text](https://skecher-ui.com/llms/text-morphing): A text morphing effect for hero copy, onboarding moments, empty states, and editorial interfaces that need a polished animated entrance.
- [Liquid Glass Social](https://skecher-ui.com/llms/liquid-glass-social): A polished animated UI primitive for expressive product interfaces.
- [Image Glide](https://skecher-ui.com/llms/image-glide): A clean image interaction component with pointer depth, soft image transitions, and a compact thumbnail rail.
- [Image Density Grid](https://skecher-ui.com/llms/image-density-grid): A percentage-controlled image grid that reflows every frame into a denser or sparser layout with layout motion, soft blur, and a temporary glow during density changes.
- [Morphing Action Dock](https://skecher-ui.com/llms/morphing-action-dock): A floating action dock that merges into one compact surface and splits into contextual actions on hover, focus, or pin.
- [Gooey Toolbar](https://skecher-ui.com/llms/gooey-toolbar): A polished animated UI primitive for expressive product interfaces.
- [Dock](https://skecher-ui.com/llms/dock): A macOS-style magnifying dock powered by shared motion values and spring-smoothed icon sizing.
- [Liquid Morphology](https://skecher-ui.com/llms/liquid-morphology-slideshow): A WebGL image slideshow for landing-page backgrounds with liquid glass, frost, ripple, plasma, and timeshift shader transitions.
- [Magazine Scroller](https://skecher-ui.com/llms/magazine-scroller): A polished animated UI primitive for expressive product interfaces.
- [Ai Chat Box](https://skecher-ui.com/llms/ai-chat-box): A morphing AI chat composer with configurable models, actions, messages, labels, and controlled state hooks.
- [AI Orb](https://skecher-ui.com/llms/ai-orb): A responsive circular Three.js plasma orb with a configurable surface, strand shape, motion, and pointer-driven depth.
- [Dither Credit Card](https://skecher-ui.com/llms/dither-credit-card): A responsive payment card with an animated two-color dither field, selectable pointer physics, and carefully scaled card details.
- [Snap Text](https://skecher-ui.com/llms/snap-text): A spring-driven scroll-snap narrative with a transitioning portrait prefix, curved outlined rows, and a compact sequence counter.
- [Scroll Reveal Text](https://skecher-ui.com/llms/scroll-reveal-text): A sticky scroll narrative that progressively fills muted multiline text with a crisp foreground color using clip-path.
- [Sliding Panel](https://skecher-ui.com/llms/sliding-panel): A generic keyed-content viewport for direction-aware transitions between tabs, steps, filters, or any ordered React view.
- [Interactive Grid Hero](https://skecher-ui.com/llms/interactive-grid-hero): A full-page field of responsive square cells that softly round and brighten within a focused radius around the cursor.
- [Morph Stack](https://skecher-ui.com/llms/morph-stack): A composable three-plate stack that fans into a spring-driven perspective view on hover.
- [Expandable Mobile Nav](https://skecher-ui.com/llms/expandable-mobile-nav): A bottom-anchored navigation shell with expandable labels and composable per-item panels.
- [Velocity Tabs](https://skecher-ui.com/llms/velocity-tabs): An accessible tab selector with a spring-driven indicator that stretches and softens in response to movement velocity.
- [Add to Cart](https://skecher-ui.com/llms/add-to-cart): An interactive product grid with curved add-to-cart flights, a responsive cart stack, and an animated currency total.
- [Apple Mail Tabs](https://skecher-ui.com/llms/apple-mail-tabs): A colorful mail category selector inspired by Apple Mail, with compact inactive tabs and an expanded active label.
- [Morph Menu](https://skecher-ui.com/llms/morph-menu): A measured action menu that morphs between compact and expanded states with configurable directional movement.
- [Spring Slider](https://skecher-ui.com/llms/spring-slider): A pill-track slider with a spring-driven fill and thumb, tick markers for each step, and a tooltip that blurs in and out as you drag.

---

# Streaming Text — Skecher UI

A soft word-by-word text reveal for hero copy, onboarding moments, empty states, and editorial interfaces that need a polished animated entrance.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/streaming-text
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { BlurredText } from "@/components/ui/streaming-text";

export default function StreamingTextExample() {
  return (
    <BlurredText
      as="h2"
      text="Build interfaces that feel as good as they look."
      className="max-w-3xl text-4xl font-semibold tracking-tight"
      wordClassName="mr-[0.25em]"
      staggerChildren={0.05}
      delayChildren={0.1}
      duration={0.3}
    />
  );
}
```

## Source files

- components/ui-components/streaming-text.tsx — Animated text component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/streaming-text
- Registry item with complete source: https://skecher-ui.com/r/streaming-text.json
- Component AI context: https://skecher-ui.com/llms/streaming-text

---

# Morphing Text — Skecher UI

A text morphing effect for hero copy, onboarding moments, empty states, and editorial interfaces that need a polished animated entrance.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/text-morphing
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { MorphingText } from "@/components/ui/text-morphing";

const statusMessages = [
  "Analyzing your workspace...",
  "Finding useful patterns...",
  "Preparing your answer...",
];

export default function MorphingTextExample() {
  return (
    <MorphingText
      texts={statusMessages}
      interval={2400}
      className="text-3xl font-semibold tracking-tight"
    />
  );
}
```

## Source files

- components/ui-components/text-morphing.tsx — Morphing text component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/text-morphing
- Registry item with complete source: https://skecher-ui.com/r/text-morphing.json
- Component AI context: https://skecher-ui.com/llms/text-morphing

---

# Liquid Glass Social — Skecher UI

A polished animated UI primitive for expressive product interfaces.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/liquid-glass-social
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { Social } from "@/components/ui/liquid-glass-social";

export default function SocialLinksExample() {
  return (
    <div className="flex min-h-64 items-center justify-center">
      <Social />
    </div>
  );
}
```

## Source files

- components/ui-components/liquid-glass-social.tsx — Liquid Glass Social component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/liquid-glass-social
- Registry item with complete source: https://skecher-ui.com/r/liquid-glass-social.json
- Component AI context: https://skecher-ui.com/llms/liquid-glass-social

---

# Image Glide — Skecher UI

A clean image interaction component with pointer depth, soft image transitions, and a compact thumbnail rail.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/image-glide
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { useState } from "react";

import { ImageGlide } from "@/components/ui/image-glide";

const images = [
  {
    src: "/images/gallery/forest.jpg",
    alt: "Sunlight passing through a green forest",
    title: "Morning light",
    description: "A quiet trail at the start of the day.",
  },
  {
    src: "/images/gallery/coast.jpg",
    alt: "Rocky coastline beside a blue sea",
    title: "Open coast",
    description: "Wind and water shaping the shoreline.",
  },
  {
    src: "/images/gallery/desert.jpg",
    alt: "Soft desert dunes at sunset",
    title: "Last glow",
    description: "Warm light settling over the dunes.",
  },
];

export default function ImageGlideExample() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <section aria-label="Featured photography">
      <ImageGlide
        images={images}
        initialIndex={activeIndex}
        onIndexChange={setActiveIndex}
        className="mx-auto max-w-5xl"
      />
    </section>
  );
}
```

## Source files

- components/ui-components/image-glide.tsx — Image Glide component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/image-glide
- Registry item with complete source: https://skecher-ui.com/r/image-glide.json
- Component AI context: https://skecher-ui.com/llms/image-glide

---

# Image Density Grid — Skecher UI

A percentage-controlled image grid that reflows every frame into a denser or sparser layout with layout motion, soft blur, and a temporary glow during density changes.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/image-density-grid
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { ImageDensityGrid } from "@/components/ui/image-density-grid";

const images = [
  { id: "one", src: "/images/gallery/one.jpg", alt: "Abstract blue artwork" },
  { id: "two", src: "/images/gallery/two.jpg", alt: "Red architectural detail" },
  { id: "three", src: "/images/gallery/three.jpg", alt: "Green landscape" },
  { id: "four", src: "/images/gallery/four.jpg", alt: "Monochrome portrait" },
];

export default function ImageDensityGridExample() {
  return (
    <ImageDensityGrid
      images={images}
      options={[20, 40, 80, 120]}
      initialPercent={40}
      title="Browse the collection"
      gridMaxHeight="42rem"
      showControls
      padded
      className="mx-auto max-w-6xl"
    />
  );
}
```

## Source files

- components/ui-components/image-density-grid.tsx — Image Density Grid component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/image-density-grid
- Registry item with complete source: https://skecher-ui.com/r/image-density-grid.json
- Component AI context: https://skecher-ui.com/llms/image-density-grid

---

# Morphing Action Dock — Skecher UI

A floating action dock that merges into one compact surface and splits into contextual actions on hover, focus, or pin.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/morphing-action-dock
```

## Dependencies

- motion
- lucide-react

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { Compass, Feather, FlameKindling } from "lucide-react";

import { MorphingActionDock } from "@/components/ui/morphing-action-dock";

const actions = [
  {
    id: "explore",
    label: "Explore",
    icon: Compass,
    tone: "from-slate-950 via-slate-800 to-slate-700",
    eyebrow: "Find direction",
    paragraph: "Move from a broad idea to a clear next step.",
    cue: "Explore the workspace",
  },
  {
    id: "write",
    label: "Write",
    icon: Feather,
    tone: "from-neutral-950 via-neutral-800 to-stone-700",
    eyebrow: "Shape the draft",
    paragraph: "Turn the selected direction into useful copy.",
    cue: "Start a new draft",
  },
  {
    id: "launch",
    label: "Launch",
    icon: FlameKindling,
    tone: "from-zinc-950 via-zinc-800 to-orange-950",
    eyebrow: "Ship with confidence",
    paragraph: "Review the final details and publish your work.",
    cue: "Prepare the release",
  },
];

export default function MorphingActionDockExample() {
  return (
    <MorphingActionDock
      items={actions}
      defaultActiveId="explore"
      className="mx-auto max-w-4xl"
    />
  );
}
```

## Source files

- components/ui-components/morphing-action-dock.tsx — Morphing Action Dock component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/morphing-action-dock
- Registry item with complete source: https://skecher-ui.com/r/morphing-action-dock.json
- Component AI context: https://skecher-ui.com/llms/morphing-action-dock

---

# Gooey Toolbar — Skecher UI

A polished animated UI primitive for expressive product interfaces.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/gooey-toolbar
```

## Dependencies

- motion
- nucleo-ui-essential-fill-duo-18
- tailwind-merge
- clsx

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { GooeyToolbar } from "@/components/ui/gooey-toolbar";

export default function GooeyToolbarExample() {
  return (
    <div className="flex min-h-96 items-center justify-center">
      <GooeyToolbar
        defaultVariant="amoeba"
        showVariantToggle
        className="w-full max-w-xl"
      />
    </div>
  );
}
```

## Source files

- components/ui-components/gooey-toolbar.tsx — Gooey Toolbar component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/gooey-toolbar
- Registry item with complete source: https://skecher-ui.com/r/gooey-toolbar.json
- Component AI context: https://skecher-ui.com/llms/gooey-toolbar

---

# Dock — Skecher UI

A macOS-style magnifying dock powered by shared motion values and spring-smoothed icon sizing.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/dock
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { Bell, Home, Search, Settings } from "lucide-react";

import { Dock } from "@/components/ui/dock";

const iconClassName = "size-full";

export default function DockExample() {
  return (
    <Dock
      items={[
        { id: "home", label: "Home", icon: <Home className={iconClassName} /> },
        { id: "search", label: "Search", icon: <Search className={iconClassName} /> },
        {
          id: "notifications",
          label: "Notifications",
          icon: <Bell className={iconClassName} />,
          onClick: () => window.alert("Notifications opened"),
        },
        { id: "settings", label: "Settings", icon: <Settings className={iconClassName} /> },
      ]}
      baseSize={44}
      maxSize={76}
      influence={130}
      className="mx-auto"
    />
  );
}
```

## Source files

- components/ui-components/dock.tsx — Magnifying dock component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/dock
- Registry item with complete source: https://skecher-ui.com/r/dock.json
- Component AI context: https://skecher-ui.com/llms/dock

---

# Liquid Morphology — Skecher UI

A WebGL image slideshow for landing-page backgrounds with liquid glass, frost, ripple, plasma, and timeshift shader transitions.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/liquid-morphology-slideshow
```

## Dependencies

- None beyond React.

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { LiquidMorphologySlideshow } from "@/components/ui/liquid-morphology-slideshow";

const slides = [
  {
    title: "Northern light",
    src: "/images/slides/northern-light.jpg",
    alt: "Green aurora over a mountain range",
    category: "Expedition",
    description: "Field journal",
  },
  {
    title: "Open water",
    src: "/images/slides/open-water.jpg",
    alt: "Sunlight reflecting across the ocean",
    category: "Travel",
    description: "Coastal study",
  },
];

export default function LiquidMorphologyExample() {
  return (
    <LiquidMorphologySlideshow
      slides={slides}
      effect="ripple"
      autoPlay
      interval={5000}
      transitionDuration={1.8}
      initialIndex={0}
      brandName="Northstar"
      navItems={[
        { label: "Work", href: "#work" },
        { label: "About", href: "#about" },
      ]}
      kicker="Selected journeys"
      headline="Stories shaped by light and motion."
      description="A cinematic collection of landscapes from around the world."
      ctaLabel="Explore the journal"
      ctaHref="#journal"
      clickToAdvance
      keyboardControls
      className="h-[42rem]"
    />
  );
}
```

## Source files

- components/ui-components/liquid-morphology-slideshow.tsx — Liquid Morphology Slideshow component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/liquid-morphology-slideshow
- Registry item with complete source: https://skecher-ui.com/r/liquid-morphology-slideshow.json
- Component AI context: https://skecher-ui.com/llms/liquid-morphology-slideshow

---

# Magazine Scroller — Skecher UI

A polished animated UI primitive for expressive product interfaces.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/magazine-scroller
```

## Dependencies

- None beyond React.

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { MagazineScroller } from "@/components/ui/magazine-scroller";

const covers = [
  { src: "/images/covers/edition-01.jpg", alt: "Edition 01 magazine cover" },
  { src: "/images/covers/edition-02.jpg", alt: "Edition 02 magazine cover" },
  { src: "/images/covers/edition-03.jpg", alt: "Edition 03 magazine cover" },
  { src: "/images/covers/edition-04.jpg", alt: "Edition 04 magazine cover" },
];

export default function MagazineScrollerExample() {
  return (
    <MagazineScroller
      images={covers}
      cardWidth={180}
      cardHeight={264}
      gap={32}
      slices={9}
      height={640}
      wheelSpeed={1.1}
      dragSpeed={1.1}
      bendStrength={82}
      maxBend={96}
      lockWheel={false}
      className="w-full"
    />
  );
}
```

## Source files

- components/ui-components/magazine-scroller.tsx — Magazine Scroller component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/magazine-scroller
- Registry item with complete source: https://skecher-ui.com/r/magazine-scroller.json
- Component AI context: https://skecher-ui.com/llms/magazine-scroller

---

# Ai Chat Box — Skecher UI

A morphing AI chat composer with configurable models, actions, messages, labels, and controlled state hooks.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/ai-chat-box
```

## Dependencies

- lucide-react
- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { Brain, Sparkles, Zap } from "lucide-react";
import { useState } from "react";

import {
  AiChatBox,
  type AiChatMessage,
  type AiChatModel,
} from "@/components/ui/ai-chat-box";

const models: AiChatModel[] = [
  {
    id: "balanced",
    name: "Balanced",
    description: "Useful for most everyday tasks",
    capability: "General",
    icon: Sparkles,
  },
  {
    id: "reasoning",
    name: "Reasoning",
    description: "Best for complex planning",
    capability: "Deep",
    icon: Brain,
  },
  {
    id: "fast",
    name: "Fast",
    description: "Quick drafts and summaries",
    capability: "Quick",
    icon: Zap,
  },
];

export default function AiChatBoxExample() {
  const [messages, setMessages] = useState<AiChatMessage[]>([]);

  return (
    <AiChatBox
      models={models}
      messages={messages}
      onMessagesChange={setMessages}
      defaultSelectedModelId="balanced"
      onSend={(message, model) => {
        console.info("Send", message.text, "with", model?.name);
      }}
      labels={{
        empty: "What can I help you build?",
        input: "Describe your idea",
        send: "Send message",
      }}
      maxLength={2000}
      submitOnEnter
      className="mx-auto max-w-3xl"
    />
  );
}
```

## Source files

- components/ui-components/ai-chat-box.tsx — Ai Chat Box component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/ai-chat-box
- Registry item with complete source: https://skecher-ui.com/r/ai-chat-box.json
- Component AI context: https://skecher-ui.com/llms/ai-chat-box

---

# AI Orb — Skecher UI

A responsive circular Three.js plasma orb with a configurable surface, strand shape, motion, and pointer-driven depth.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/ai-orb
```

## Dependencies

- None beyond React.

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { AiOrb } from "@/components/ui/ai-orb";

export default function AiOrbExample() {
  return (
    <div className="flex min-h-96 items-center justify-center bg-neutral-950 p-8">
      <AiOrb
        ariaLabel="Animated purple and cyan AI plasma orb"
        backgroundColor="#090A0F"
        primaryColor="#A855F7"
        secondaryColor="#06B6D4"
        intensity={1.25}
        strandWidth={0.5}
        twist={5}
        speed={0.45}
        pointerStrength={1}
        interactive
        className="w-[min(80vw,22rem)]"
      />
    </div>
  );
}
```

## Source files

- components/ui-components/ai-orb.tsx — AI Orb component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/ai-orb
- Registry item with complete source: https://skecher-ui.com/r/ai-orb.json
- Component AI context: https://skecher-ui.com/llms/ai-orb

---

# Dither Credit Card — Skecher UI

A responsive payment card with an animated two-color dither field, selectable pointer physics, and carefully scaled card details.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/dither-credit-card
```

## Dependencies

- @paper-design/shaders-react
- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { DitherCreditCard } from "@/components/ui/dither-credit-card";

export default function DitherCreditCardExample() {
  return (
    <div className="flex min-h-96 items-center justify-center p-6">
      <DitherCreditCard className="w-full max-w-[605px]" />
    </div>
  );
}
```

## Source files

- components/ui-components/dither-credit-card.tsx — Dither Credit Card component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/dither-credit-card
- Registry item with complete source: https://skecher-ui.com/r/dither-credit-card.json
- Component AI context: https://skecher-ui.com/llms/dither-credit-card

---

# Snap Text — Skecher UI

A spring-driven scroll-snap narrative with a transitioning portrait prefix, curved outlined rows, and a compact sequence counter.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/snap-text
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { useState } from "react";

import { SnapText } from "@/components/ui/snap-text";

const steps = [
  "Research the problem.",
  "Shape the direction.",
  "Build the system.",
  "Test every detail.",
];

const images = [
  "/images/process/research.jpg",
  "/images/process/direction.jpg",
  "/images/process/build.jpg",
  "/images/process/test.jpg",
];

const colors = ["#8CD7C0", "#FFD873", "#FF5768", "#6C89C5"];

export default function SnapTextExample() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <SnapText
      items={steps}
      images={images}
      colors={colors}
      initialIndex={0}
      onIndexChange={setActiveIndex}
      prefix={
        <span className="font-mono text-sm text-neutral-500">
          {String(activeIndex + 1).padStart(2, "0")} / {String(steps.length).padStart(2, "0")}
        </span>
      }
      itemHeight={96}
      indent={28}
      inactiveColor="#737373"
      spring={{ stiffness: 280, damping: 30, mass: 0.8 }}
      className="h-[42rem]"
    />
  );
}
```

## Source files

- components/ui-components/snap-text.tsx — Snap Text component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/snap-text
- Registry item with complete source: https://skecher-ui.com/r/snap-text.json
- Component AI context: https://skecher-ui.com/llms/snap-text

---

# Scroll Reveal Text — Skecher UI

A sticky scroll narrative that progressively fills muted multiline text with a crisp foreground color using clip-path.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/scroll-reveal-text
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { ScrollRevealText } from "@/components/ui/scroll-reveal-text";

const lines = [
  "Design should guide attention.",
  "Motion should explain change.",
  "Every detail should feel intentional.",
];

export default function ScrollRevealTextExample() {
  return (
    <ScrollRevealText
      lines={lines}
      className="min-h-[260svh]"
      textClassName="max-w-5xl"
      mutedClassName="text-neutral-700"
      revealClassName="text-white"
      physics={{ stiffness: 180, damping: 24, mass: 0.8 }}
    />
  );
}
```

## Source files

- components/ui-components/scroll-reveal-text.tsx — Scroll Reveal Text component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/scroll-reveal-text
- Registry item with complete source: https://skecher-ui.com/r/scroll-reveal-text.json
- Component AI context: https://skecher-ui.com/llms/scroll-reveal-text

---

# Sliding Panel — Skecher UI

A generic keyed-content viewport for direction-aware transitions between tabs, steps, filters, or any ordered React view.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/sliding-panel
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { type ComponentProps, useState } from "react";

import { Skeleton } from "@/components/ui/skeleton";
import {
  SlidingPanel,
  type SlidingPanelDirection,
} from "@/components/ui/sliding-panel";
import { cn } from "@/lib/utils";

type PanelIndex = 0 | 1;

const OVERVIEW_BARS = [34, 58, 45, 76, 62, 88, 70, 96] as const;
const ACTIVITY_ROWS = [82, 68, 76, 58] as const;

function LoadingBar({ className, ...props }: ComponentProps<typeof Skeleton>) {
  return (
    <Skeleton
      aria-hidden="true"
      className={cn("motion-reduce:animate-none", className)}
      {...props}
    />
  );
}

function OverviewSkeleton() {
  return (
    <div
      aria-busy="true"
      className="grid h-full grid-cols-[5rem_minmax(0,1fr)] bg-background sm:grid-cols-[9rem_minmax(0,1fr)]"
    >
      <span className="sr-only">Loading overview</span>

      <aside className="flex flex-col border-r border-border/70 bg-muted/35 p-3 sm:p-4">
        <div className="flex items-center gap-2">
          <LoadingBar className="size-7 shrink-0 rounded-lg bg-foreground/12" />
          <LoadingBar className="hidden h-3 w-16 bg-foreground/10 sm:block" />
        </div>

        <div className="mt-7 space-y-3">
          {["w-full", "w-4/5", "w-11/12", "w-3/4"].map((width) => (
            <div className="flex items-center gap-2.5" key={width}>
              <LoadingBar className="size-4 shrink-0 rounded bg-foreground/8" />
              <LoadingBar
                className={cn("hidden h-2.5 bg-foreground/8 sm:block", width)}
              />
            </div>
          ))}
        </div>

        <LoadingBar className="mt-auto size-7 rounded-full bg-foreground/10" />
      </aside>

      <main className="min-w-0 overflow-hidden p-4 sm:p-5">
        <div className="flex items-center justify-between gap-4">
          <div className="space-y-2">
            <LoadingBar className="h-4 w-28 bg-foreground/12" />
            <LoadingBar className="h-2.5 w-40 bg-foreground/7" />
          </div>
          <LoadingBar className="size-8 rounded-full bg-foreground/8" />
        </div>

        <div className="mt-7 flex h-32 items-end gap-2 border-b border-border/70 pb-px sm:h-40 sm:gap-3">
          {OVERVIEW_BARS.map((height) => (
            <LoadingBar
              className="min-w-0 flex-1 rounded-b-none bg-foreground/9"
              key={height}
              style={{ height: height + "%" }}
            />
          ))}
        </div>

        <div className="mt-6 grid grid-cols-2 gap-5 sm:grid-cols-3">
          {[72, 54, 80].map((width) => (
            <div className="space-y-2" key={width}>
              <LoadingBar className="h-2.5 w-14 bg-foreground/7" />
              <LoadingBar
                className="h-5 bg-foreground/11"
                style={{ width: width + "%" }}
              />
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}

function ActivitySkeleton() {
  return (
    <div
      aria-busy="true"
      className="grid h-full bg-background sm:grid-cols-[minmax(0,1fr)_10rem]"
    >
      <span className="sr-only">Loading activity</span>

      <main className="min-w-0 p-4 sm:p-5">
        <div className="space-y-2">
          <LoadingBar className="h-4 w-28 bg-foreground/12" />
          <LoadingBar className="h-2.5 w-40 bg-foreground/7" />
        </div>

        <div className="mt-7 space-y-5">
          {ACTIVITY_ROWS.map((width, index) => (
            <div className="relative flex gap-3" key={width}>
              {index < ACTIVITY_ROWS.length - 1 ? (
                <span
                  aria-hidden="true"
                  className="absolute left-[0.9375rem] top-8 h-[calc(100%+0.5rem)] w-px bg-border/80"
                />
              ) : null}
              <LoadingBar className="relative z-10 size-8 shrink-0 rounded-full bg-foreground/10" />
              <div className="min-w-0 flex-1 space-y-2 pt-0.5">
                <div className="flex items-center gap-2">
                  <LoadingBar className="h-2.5 w-20 bg-foreground/11" />
                  <LoadingBar className="h-2 w-10 bg-foreground/6" />
                </div>
                <LoadingBar
                  className="h-2.5 bg-foreground/8"
                  style={{ width: width + "%" }}
                />
                <LoadingBar className="h-2.5 w-3/5 bg-foreground/6" />
              </div>
            </div>
          ))}
        </div>
      </main>

      <aside className="hidden border-l border-border/70 bg-muted/25 p-4 sm:block">
        <LoadingBar className="h-3 w-20 bg-foreground/11" />
        <div className="mt-5 flex -space-x-2">
          {["ava", "ben", "cy", "dia"].map((avatar) => (
            <LoadingBar
              className="size-8 rounded-full border-2 border-background bg-foreground/10"
              key={avatar}
            />
          ))}
        </div>
        <div className="mt-8 space-y-3">
          {[72, 92, 64, 80].map((width) => (
            <div className="space-y-1.5" key={width}>
              <LoadingBar
                className="h-2 bg-foreground/6"
                style={{ width: width + "%" }}
              />
              <LoadingBar className="h-2.5 w-2/5 bg-foreground/10" />
            </div>
          ))}
        </div>
        <LoadingBar className="mt-8 h-16 w-full bg-foreground/7" />
      </aside>
    </div>
  );
}

const PANELS = [
  { label: "Overview", Content: OverviewSkeleton },
  { label: "Activity", Content: ActivitySkeleton },
] as const;

export default function SlidingPanelExample() {
  const [{ active, direction }, setNavigation] = useState<{
    active: PanelIndex;
    direction: SlidingPanelDirection;
  }>({
    active: 0,
    direction: 1,
  });

  function selectPanel(next: PanelIndex) {
    setNavigation((current) => {
      if (next === current.active) return current;

      return {
        active: next,
        direction: next > current.active ? 1 : -1,
      };
    });
  }

  const ActivePanel = PANELS[active].Content;

  return (
    <div className="w-full max-w-2xl space-y-2">
      <div aria-label="Preview layout" className="flex gap-1" role="group">
        {PANELS.map((panel, index) => (
          <button
            aria-pressed={active === index}
            className="rounded-md px-3 py-1.5 text-sm aria-pressed:bg-muted"
            key={panel.label}
            onClick={() => selectPanel(index as PanelIndex)}
            type="button"
          >
            {panel.label}
          </button>
        ))}
      </div>

      <SlidingPanel
        activeKey={active}
        className="h-[24rem] rounded-xl border"
        direction={direction}
      >
        <ActivePanel />
      </SlidingPanel>
    </div>
  );
}
```

## Source files

- components/ui-components/sliding-panel.tsx — Sliding Panel component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/sliding-panel
- Registry item with complete source: https://skecher-ui.com/r/sliding-panel.json
- Component AI context: https://skecher-ui.com/llms/sliding-panel

---

# Interactive Grid Hero — Skecher UI

A full-page field of responsive square cells that softly round and brighten within a focused radius around the cursor.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/interactive-grid-hero
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { InteractiveGridHero } from "@/components/ui/interactive-grid-hero";

export default function InteractiveGridHeroExample() {
  return (
    <InteractiveGridHero
      cellSize={72}
      gap={4}
      proximity={4.35}
      effects={{
        cornerRadius: 20,
        inset: 5.5,
        restingOpacity: 0.72,
      }}
      spring={{ stiffness: 520, damping: 38, mass: 1 }}
    />
  );
}
```

## Source files

- components/ui-components/interactive-grid-hero.tsx — Interactive Grid Hero component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/interactive-grid-hero
- Registry item with complete source: https://skecher-ui.com/r/interactive-grid-hero.json
- Component AI context: https://skecher-ui.com/llms/interactive-grid-hero

---

# Morph Stack — Skecher UI

A composable three-plate stack that fans into a spring-driven perspective view on hover.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/morph-stack
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { MorphStack } from "@/components/ui/morph-stack";
import { BackPlate, FrontPlate, MiddlePlate } from "./plates";

export default function MorphStackExample() {
  return (
    <MorphStack
      backPlate={<BackPlate />}
      middlePlate={<MiddlePlate />}
      frontPlate={<FrontPlate />}
      motion={{
        perspective: 900,
        stack: { rotateX: 58, rotateZ: -42, scale: 1.06 },
        front: { active: { x: -14, y: 20, z: 72 } },
        back: { active: { x: 0, y: 0, z: -76 } },
        delays: { front: 0.1, back: 0.2 },
      }}
    />
  );
}
```

## Source files

- components/ui-components/morph-stack.tsx — Morph Stack component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/morph-stack
- Registry item with complete source: https://skecher-ui.com/r/morph-stack.json
- Component AI context: https://skecher-ui.com/llms/morph-stack

---

# Expandable Mobile Nav — Skecher UI

A bottom-anchored navigation shell with expandable labels and composable per-item panels.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/expandable-mobile-nav
```

## Dependencies

- motion
- nucleo-ui-essential-fill-18
- nucleo-ui-essential-fill-duo-18

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import Image from "next/image";
import { IconUnorderedListFill18 } from "nucleo-ui-essential-fill-18";
import {
  IconBellFillDuo18,
  IconBookmarkFillDuo18,
  IconCloudFillDuo18,
  IconGear2FillDuo18,
  IconHouse5FillDuo18,
  IconLifeRingFillDuo18,
  IconMsgsFillDuo18,
  IconUserFillDuo18,
  IconUserLaptopFillDuo18,
} from "nucleo-ui-essential-fill-duo-18";

import {
  ExpandableMobileNav,
  type ExpandableMobileNavEntry,
} from "@/components/ui/expandable-mobile-nav";

const expandedNavItems: readonly ExpandableMobileNavEntry[] = [
  { id: "profile", label: "Profile", icon: IconUserFillDuo18 },
  { id: "messages", label: "Messages", icon: IconMsgsFillDuo18 },
  { id: "saved", label: "Saved", icon: IconBookmarkFillDuo18 },
  { id: "help", label: "Help", icon: IconLifeRingFillDuo18 },
];

function ProfileCard() {
  return (
    <div className="mx-2 mt-2 rounded-xl bg-muted/70 p-2.5">
      <div className="flex items-center gap-3">
        <div className="relative shrink-0">
          <Image
            src="/pfp.png"
            alt="Sandeep Singh's profile"
            width={48}
            height={48}
            className="size-12 rounded-lg object-cover ring-1 ring-black/10 dark:ring-white/10"
          />
          <span
            aria-hidden="true"
            className="absolute -right-0.5 -bottom-0.5 size-3 rounded-full bg-emerald-500 ring-2 ring-muted"
          />
        </div>

        <div className="min-w-0 flex-1">
          <p className="truncate text-sm font-medium text-foreground">Sandeep Singh</p>
          <p className="truncate text-xs text-muted-foreground">@sandeepsingh</p>
        </div>

        <span className="rounded-md bg-background px-2 py-1 text-[10px] font-medium text-muted-foreground shadow-sm">
          Personal
        </span>
      </div>

      <div className="mt-2 rounded-lg bg-background/70 px-2.5 py-2">
        <p className="text-xs leading-relaxed text-muted-foreground">
          Manage your account, preferences, and personal information.
        </p>
      </div>
    </div>
  );
}

const navItems: readonly ExpandableMobileNavEntry[] = [
  { id: "user", label: "User", icon: IconUserLaptopFillDuo18 },
  { id: "dashboard", label: "Dashboard", icon: IconHouse5FillDuo18 },
  { id: "notifications", label: "Notifications", icon: IconBellFillDuo18 },
  { id: "settings", label: "Settings", icon: IconGear2FillDuo18 },
  { id: "security", label: "Security", icon: IconCloudFillDuo18 },
  { id: "more", label: "More", icon: IconUnorderedListFill18 },
];

export default function ExpandableMobileNavExample() {
  return (
    <ExpandableMobileNav
      navItems={navItems}
      expandedPanel={{
        triggerId: "more",
        navItems: expandedNavItems,
      }}
      nestedExpandedPanel={{
        triggerId: "profile",
        content: <ProfileCard />,
      }}
    />
  );
}
```

## Source files

- components/ui-components/expandable-mobile-nav.tsx — Generic expandable navigation component

## Required assets

- public/pfp.png — Add the avatar used by the profile card, or replace it with your own image.

## Canonical resources

- Documentation: https://skecher-ui.com/docs/expandable-mobile-nav
- Registry item with complete source: https://skecher-ui.com/r/expandable-mobile-nav.json
- Component AI context: https://skecher-ui.com/llms/expandable-mobile-nav

---

# Velocity Tabs — Skecher UI

An accessible tab selector with a spring-driven indicator that stretches and softens in response to movement velocity.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/velocity-tabs
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { useState } from "react";

import { VelocityTabs } from "@/components/ui/velocity-tabs";

const tabs = [
  { value: "overview", label: "Overview" },
  { value: "activity", label: "Activity" },
  { value: "settings", label: "Settings" },
] as const;

export default function VelocityTabsExample() {
  const [value, setValue] = useState("overview");

  return (
    <VelocityTabs
      aria-label="Workspace sections"
      tabs={tabs}
      value={value}
      onValueChange={setValue}
    />
  );
}
```

## Source files

- components/ui-components/velocity-tabs.tsx — Velocity Tabs component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/velocity-tabs
- Registry item with complete source: https://skecher-ui.com/r/velocity-tabs.json
- Component AI context: https://skecher-ui.com/llms/velocity-tabs

---

# Add to Cart — Skecher UI

An interactive product grid with curved add-to-cart flights, a responsive cart stack, and an animated currency total.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/add-to-cart
```

## Dependencies

- motion
- @number-flow/react

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import {
  AddToCart,
  type AddToCartImage,
  type AddToCartItem,
} from "@/components/ui/add-to-cart";

const items = [
  { id: 1, image: "/products/one.jpg", price: 150, alt: "Product one" },
  { id: 2, image: "/products/two.jpg", price: 360, alt: "Product two" },
] satisfies readonly AddToCartItem[];

const images = [
  { src: "/campaign/one.jpg", alt: "Limited edition product one" },
  "/campaign/two.jpg",
] satisfies readonly AddToCartImage[];

export default function AddToCartExample() {
  return (
    <AddToCart
      items={items}
      images={images}
      currency="USD"
      locale="en-US"
      initialItems={[2]}
      layout={{ columns: 2, gap: "roomy", stackLimit: 4 }}
      motion={{ duration: 0.58, strength: 0.32, peak: 0.42 }}
      onCartChange={(cartItems, total) => {
        console.log({ cartItems, total });
      }}
      className="mx-auto"
    />
  );
}
```

## Source files

- components/ui-components/add-to-cart.tsx — Interactive Add to Cart component

## Required assets

- public/images/add-to-cart/image1.png through image8.png — Default demo artwork; optional when custom images or item image paths are used

## Canonical resources

- Documentation: https://skecher-ui.com/docs/add-to-cart
- Registry item with complete source: https://skecher-ui.com/r/add-to-cart.json
- Component AI context: https://skecher-ui.com/llms/add-to-cart

---

# Apple Mail Tabs — Skecher UI

A colorful mail category selector inspired by Apple Mail, with compact inactive tabs and an expanded active label.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/apple-mail-tabs
```

## Dependencies

- lucide-react
- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { Bell, Newspaper, ShoppingBag } from "lucide-react";
import { useState } from "react";

import { AppleMailTabs } from "@/components/ui/apple-mail-tabs";

const tabs = [
  {
    value: "news",
    label: "News",
    icon: Newspaper,
    activeBackgroundClassName: "bg-[#0a84ff]",
    activeTextClassName: "text-white",
  },
  {
    value: "orders",
    label: "Orders",
    icon: ShoppingBag,
    activeBackgroundClassName: "bg-[#30d158]",
    activeTextClassName: "text-[#09280f]",
  },
  {
    value: "alerts",
    label: "Alerts",
    icon: Bell,
    activeBackgroundClassName: "bg-[#ff9f0a]",
    activeTextClassName: "text-[#261700]",
  },
] as const;

export default function AppleMailTabsExample() {
  const [value, setValue] = useState("news");

  return (
    <AppleMailTabs
      aria-label="Inbox categories"
      tabs={tabs}
      value={value}
      onValueChange={setValue}
    />
  );
}
```

## Source files

- components/ui-components/apple-mail-tabs.tsx — Apple Mail-inspired category tabs component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/apple-mail-tabs
- Registry item with complete source: https://skecher-ui.com/r/apple-mail-tabs.json
- Component AI context: https://skecher-ui.com/llms/apple-mail-tabs

---

# Morph Menu — Skecher UI

A measured action menu that morphs between compact and expanded states with configurable directional movement.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/morph-menu
```

## Dependencies

- motion
- lucide-react
- react-use-measure

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { MorphMenu, type MorphMenuItem } from "@/components/ui/morph-menu";

const items: readonly MorphMenuItem[] = [
  {
    id: "project",
    title: "New project",
    description: "Start something from scratch",
  },
  {
    id: "document",
    title: "New document",
    description: "Create a blank document",
  },
  {
    id: "import",
    title: "Import",
    description: "Bring something into your workspace",
  },
];

export default function MorphMenuExample() {
  return (
    <div className="flex min-h-96 items-center justify-center">
      <MorphMenu
        direction="top-left"
        items={items}
        onItemSelect={(item) => console.log(item.id)}
      />
    </div>
  );
}
```

## Source files

- components/ui-components/morph-menu.tsx — Measured direction-aware morph menu component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/morph-menu
- Registry item with complete source: https://skecher-ui.com/r/morph-menu.json
- Component AI context: https://skecher-ui.com/llms/morph-menu

---

# Spring Slider — Skecher UI

A pill-track slider with a spring-driven fill and thumb, tick markers for each step, and a tooltip that blurs in and out as you drag.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/spring-slider
```

## Dependencies

- motion
- @number-flow/react

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { useState } from "react";

import { SpringSlider } from "@/components/ui/spring-slider";

export default function SpringSliderExample() {
  const [size, setSize] = useState(16);

  return (
    <SpringSlider
      aria-label="Text size"
      min={12}
      max={28}
      step={4}
      value={size}
      onValueChange={setSize}
      valueText={(value) => `${value} pixels`}
      renderTooltip={(value) => (
        <span style={{ fontSize: `${value}px` }}>Aa</span>
      )}
    />
  );
}
```

## Source files

- components/ui-components/spring-slider.tsx — Spring-driven pill slider with tick markers and a blur-fade tooltip

## Canonical resources

- Documentation: https://skecher-ui.com/docs/spring-slider
- Registry item with complete source: https://skecher-ui.com/r/spring-slider.json
- Component AI context: https://skecher-ui.com/llms/spring-slider