Master Detail

Responsive list + detail layout: a resizable two-pane split on wide screens, and a list with the detail in a slide-over `Sheet` below `collapseBelow` (Mail, Contacts, Tasks, Logs, People directories, payment ledgers).

Beta

Ready to use, but its API may still change before it is marked stable.

Usage

Import

import { MasterDetail } from "@qeetrix/ui";

It can also be imported on its own from @qeetrix/ui/components/master-detail.

Controlled and uncontrolled

Pass the value prop to control it, or the default prop to let the component own it.

Value	Default	Change
`detailOpen`	`defaultDetailOpen`	`onDetailOpenChange`

Support

Feature	Status
Right-to-left	Not applicable
Dark mode	Supported
Density	Not applicable
Server rendering	Client component
Reduced motion	Not applicable

Accessibility

No ARIA widget pattern. Not yet audited.

Tests

Covered by unit, accessibility (axe), interaction and visual tests.

Master Detail

UsageCopy Anchor Link

ImportCopy Anchor Link

Controlled and uncontrolledCopy Anchor Link

SupportCopy Anchor Link

AccessibilityCopy Anchor Link