Skip to content
Pinky UI

media

Expandable Media

Inline media expands into a larger captioned view as the same object.

  • media
  • article
  • diagram
  • screenshot

Live preview

Quick usage

usage
import { ExpandableMedia } from "@pinky-ui/systems";

<ExpandableMedia preview={image} expanded={detail} label="Architecture diagram" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
previewReactNode—Inline media source surface.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Reuses existing Morph focus, scroll-lock and shared layout behaviour.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Article screenshots, diagrams and demonstrations

When not to use

  • Generic cards or multi-item galleries

Skill

Purpose

ExpandableMedia turns inline article media into a larger inspectable version while preserving preview, expanded media and caption as one object. Use it for diagrams, screenshots and editorial demonstrations.

Choose it instead of Morph Lightbox when the media belongs to one page section rather than a gallery. Avoid wrapping arbitrary cards, forms or navigation; this is not a renamed Morph Card.

The underlying Morph supplies Escape, backdrop close, focus restoration and scroll lock. Reduced motion expands immediately. Keep the expanded asset optimized and make captions available in both visual and non-visual reading contexts.

Open this skill on its own page