Skip to content
Pinky UI

lists

Expandable List Row

A lightweight list or feed row disclosure for secondary settings, files or task details.

  • lists
  • list
  • disclosure
  • details
Related pattern

Independent list/feed semantics; Expandable Data Row is the structured table pattern.

Live preview

Due Friday · design review attached.

Quick usage

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

<ExpandableListRow summary="Invoice · #1042">{details}</ExpandableListRow>

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

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use in-place disclosure when secondary information belongs to a list or feed row. For structured table columns and record identity, use ExpandableDataRow instead.

Use when

Settings, invoices, messages, or task details can be scanned progressively.

Avoid

Replacing a complex editor or opening a modal for simple secondary content.

Accessibility

Use a labeled button with aria-expanded and keep the revealed content in reading order.

Keyboard and touch

The full summary control is keyboard and touch reachable.

Reduced motion and performance

Collapse immediately under reduced motion and mount detail only when open.

Composition and anti-patterns

Pair with RowSpotlight for comparison, not as a substitute for navigation.

Open this skill on its own page