Record Aside

Install

pnpm dlx shadcn@latest add @vegastack/record-aside

Usage

import { PropertyList, PropertySection } from "@/components/ui/property-list";
import {
  ActionList,
  ActionListItem,
  RecordAsideAction,
  RecordAsideCard,
  RecordAsideSection,
} from "@/components/ui/record-aside";

<RecordAsideCard>
  <RecordAsideSection title="Details">
    <PropertyList variant="inline">…</PropertyList>
    <PropertySection title="Participants">…</PropertySection>
  </RecordAsideSection>
</RecordAsideCard>;

Record Aside is the block a record page puts in its RecordLayoutRail — and in the Details sheet that replaces the rail on small screens. A RecordAsideCard holds RecordAsideSections; each has a small header — the title, a muted count, and an icon action with a tooltip (RecordAsideAction) or a small Button — above its content:

• an inline PropertyList (a fixed label column, values left-aligned at one x; quiet pickers; PropertyEmpty for "—"), with PropertyPerson for an avatar value;
• PropertySections for values too big for a row: an AvatarStack of people (each with its hover card, the rest behind "+N"), linked-record chips stacked, PropertyClamp for long text (three lines, then "Show more");
• an ActionList of full-width rows that run to the card's edges like the Inbox's: a hover tint, no underline; ActionListChips holds a row's small picker chips, and ActionListEmpty is the compact one-line empty state.

Anatomy

Examples

Actions

The record's work under their own headers: the tasks, with a ↗ icon action (tooltip "View in all tasks"), then the AI's suggestions with "Create N tasks". Rows run to the card's edges.

Loading

PropertyListSkeleton (icon, label and value bars on the same tracks), PropertySectionSkeleton (a title bar and chip bars), ActionListSkeleton (status circle, title and meta bars) and RecordAsideSectionSkeleton (the header bar) draw the rail's layout while the record loads.

Empty sections

A section with nothing in it keeps its header and says so in one muted line — no icon, no box.

API Reference

RecordAsideSection

RecordAsideAction

PropertyClamp

RecordAsideCard, ActionList, ActionListItem (Item's props, less size and variant), ActionListChips, ActionListEmpty and PropertyPerson take their element's native props; the skeletons take a row or chip count.

Accessibility

• Each section is a region named by its title; an ActionList is a list of rows.
• RecordAsideAction is an icon button named by its label, which is also its tooltip.
• A row that opens something is a link or a button (render); controls inside it (a status menu, a checkbox) stay separate tab stops beside it, not inside it.
• "Show more" is a button that reports aria-expanded; skeletons are aria-hidden.

Do / Don't