Patterns
Profile & details
Account identity and structured business-information fields.
Alex Morgan
Design director · Northstar Studio
Active
- alex@example.com
- City
- Hyderabad
- Organization
- Acme Network
- Membership
- Professional
Interactive local example · fictional data
The Code tab contains this preview’s complete source, including sample data and interaction state. Load the package stylesheet and Switzer font as described in the installation guide. Additional layout utilities require Tailwind CSS in your application.
API reference
| Prop | Type | Default |
|---|---|---|
| name | string | required |
| subtitle / src | string | — |
| actions / children | ReactNode | — |
| DetailList.items | { label, value }[] | required |
Primitives also accept their underlying HTML or Radix props. Full types are included with the package.
Behavior & accessibility
- DetailList uses semantic description lists and wraps long field values.
Reference
Account profile and Business Info dialog