Skip to content
Pinky UI

List Card

A card whose body is a divided list of rows rather than prose.

  • cards
  • card
  • structural
  • list
  • rows

Recent activity

  • Release notes published
  • North star doc updated
  • Research log shared

Quick usage

usage
import { ListCard } from "@pinky-ui/components";

<ListCard
  title="Recent activity"
  items={activity.map((entry) => ({ id: entry.id, content: entry.summary }))}
/>

Presets

Default

Titled list.

Compact

Smaller radius for a dense sidebar.

radius={"md"}

Install

Add @pinky-ui/components 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/components

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
titleReactNode—Optional heading above the list.
itemsListCardItem[]—Required. Each needs an id and content; rows are divided automatically.
footerReactNode—Optional region below the list.
emptyMessageReactNode"Nothing here yet."Shown instead of the list when items is empty.
radius"md" | "lg" | "xl" | "2xl""xl"Corner radius from the shape scale.
paddedbooleantrueHorizontal padding on the title, rows and footer.
shadow"neutral" | "pink""neutral"Shadow token pair.

Accessibility

  • Renders a real <ul>/<li> structure — a screen reader announces it as a list with its item count.
  • Not focusable as a whole; interactivity belongs to whatever's inside each row's content.

Reduced motion

No motion of its own.

When to use

  • Settings groups, short activity feeds, anything that's naturally items rather than a paragraph

When not to use

  • Long or virtualised lists — this renders every row eagerly