Preview
The team needs a faster way to review a draft, inspect its sources, and share the decision.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Installation
Install
Item has no component dependency. Examples that show an action also import Button.
Basic usage
Structures
Examples
Outline
Use a boundary to separate a brief from nearby content.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Subtle
Use a quiet fill when the surrounding view already supplies structure.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Compact
Reduce containment spacing without changing content typography.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Media
Lead with a visual summary of the brief.
Customer interview
Maya Chen · Product lead
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Link
Navigate with a native anchor; keep independent buttons outside linked roots.
Product brief.pdf
PDF · 2.4 MB
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Focus
Compose focus content for a resource row.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Disabled
Apply disabled styling and disable the actual input.
Actions
Compose actions content for a resource row.
Draft response
Ready for review
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Group
Compose group content for a resource row.
Product brief.pdf
PDF · 2.4 MB
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Interview notes.md
Markdown · Updated today
The team needs a faster way to review a draft, inspect its sources, and share the decision.
Overflow
Keep long source titles and descriptions inside the available width.
The team needs a faster way to review a draft, inspect its sources, and share the decision.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "ghost" | "outline" | "subtle" | "ghost" | Selects the row surface. |
size | "sm" | "default" | "default" | Sets row spacing and media lane size independently of variant. |
render | Base UI useRender render prop | Use an anchor for navigation or a native button for one row action. The default is a div. | |
ref / native props / className / style | React div props | Forwarded to the root. |
| Prop | Type | Default | Description |
|---|---|---|---|
Media | div | Fixed-size leading content lane. | |
Content | div | Flexible min-width-zero text lane. | |
Title / Description | div | Text wraps within the available lane. | |
Actions | div | Trailing caller-owned controls. | |
Group | div | Stacks related rows. | |
Separator | div | Visual divider between group items. |