Geist Design System

Entity

Displays up-to-two columns of content. The left column can contain arbitrary content, and the right column typically contains controls or actions related to the content in the left column.

Default
  • Avatar for evilrabbit

    Evil Rabbit

    Glenn Hitchcock (@gln)

    Connected 1h ago

    • Entity with Skeleton

    • Entity with List

    • GitHub Desktop on MacBook Pro

      Last used just now

    • VS Code on Windows 11

      Last used 10min ago

    • Terminal on Ubuntu 24.04

      Last used 25min ago

    Entity with List and Checkbox

    Best Practices

    When to use

    • Use <Entity> for a row of descriptive content paired with one or two controls (member rows, integration rows, domain rows).
    • For tabular data with sortable columns and shared row shape, use Table instead.
    • For a static key/value metadata block on a detail page, use Description.

    Behavior

    • The right column holds at most one or two controls. If the row needs more, move secondary actions into a Dots Menu.
    • For multi-select rows, the leading Checkbox carries aria-label="Select {entity name}" so the row is selectable without relying on the visual label.
    • Render the Skeleton variant (entity-with-skeleton) during load instead of an empty row, and swap to real content once data resolves.

    Content

    • Lead the left column with a scannable identifier: an Avatar or icon, a Title Case label, then sentence-case secondary metadata (Member since Mar 14, 2026).
    • Keep right-column buttons Verb + Noun (Remove Member, Resend Invite). Bare verbs like Remove or Confirm lose context once the row scrolls offscreen.