FX · Interactions

A row of panels where the one under the pointer or focus widens to show more.

  • KyotoTemples, tea and quiet lanes.
  • ReykjavikNorthern lights and hot springs.
  • MarrakeshSouks, spice and rooftops.
  • PatagoniaGlaciers at the end of the world.
bash
npx shadcn@latest add https://www.rad-ui.com/r/expand-strip.json
React
import ExpandStrip from "@/components/fx/expand-strip"

<ExpandStrip label="Destinations" items={[
    { title: "Kyoto", description: "Temples and tea.", background: "url(/kyoto.jpg) center/cover", href: "/kyoto" }
]} />
  • A labelled list; each panel is a link or focusable region, and focus expands it just like hover.
  • Titles and descriptions are always in the DOM, so screen readers get everything.
  • A scrim keeps white text readable on any background.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) expands instantly.
PropTypeDefaultDescription
items
{ title, description?, background, href? }[]
—

Panels.

label
string
—

Accessible name for the list.

Edit this page on GitHub →