Entry List

A short, compact list of plain entries in a sheet, dialog or popover — a line of text, its muted details and small actions at its end.

Task Install glazing is now Done (Asha, 2h ago)
Product Linear 40 was renamed (Sanjay, yesterday)

Install

Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Entry List before installation. Retain the digest printed by this command.

pnpm exec vegastack-design verify entry-list

Install with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.

pnpm dlx shadcn@4.21.0 add @vegastack/entry-list

Run the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.

Usage

import {
  Entry,
  EntryActions,
  EntryList,
  EntryMeta,
} from "@/components/ui/entry-list";

<EntryList className="gap-1">
  <Entry>
    <span className="min-w-0">
      Task Install glazing is now Done <EntryMeta>(Asha, 2h ago)</EntryMeta>
    </span>
    <EntryActions>
      <Button variant="ghost" size="xs">
        Open
      </Button>
    </EntryActions>
  </Entry>
</EntryList>;

EntryList is for the short lists inside a sheet, a dialog or a popover — what changed, who was asked, the edits since a date — where each entry is a line of 14px text, its details in the muted ink (EntryMeta) and small actions pushed to its end (EntryActions). It draws no padding, border or hover: an entry is not itself a target. For rows that are targets reach for Item; for records, DataList. Space the entries with a gap on the list.

Anatomy

Entry — data-slot="entry"

EntryActions — data-slot="entry-actions"

EntryList — data-slot="entry-list"

EntryMeta — data-slot="entry-meta"

Examples

Entries with actions

Task Install glazing is now Done (Asha, 2h ago)
Product Linear 40 was renamed (Sanjay, yesterday)

Stacked details

layout="stack" puts the details on their own line over the text — an edit: when and who, then what changed.

2h ago · AshaRewrote the warranty section
Yesterday · SanjayAdded the beam angle table

API Reference

Prop	Type	Default	Description
`layout`	`"row" \| "stack"`	`"row"`	`row` — text, details and actions on one line that wraps; `stack` — the details on their own line over the text (an edit: "2h ago · Asha" then what changed).

Data attributes and CSS variables on Entry

Attribute	Values
`data-layout`	mirrors a prop or state value
`data-slot`	`"entry"`

EntryList takes a ul's native props, Entry an li's, EntryMeta and EntryActions a span's.

Accessibility

The list is a real ul of li entries, so assistive technology announces how many there are.
Details are text in the entry, read with it; actions are real buttons with their own names.

Contract	States tested
Behaviour	`default`, `stack`
Accessibility	`labeled`
Visual	`default`, `stack`

Do / Don't

Use EntryList for a handful of plain lines with details and small actions inside a panel.

Don't

Use it for rows people click as a whole (Item) or for records with columns (DataList).

On this page