Master detail

Links selection to a detail panel with a mobile back path.

Preview

North studio

4 active projects

In action

Select an item to see its details

When to use

Use it for

Inboxes, asset browsers, and list/detail workspaces.

Not for

Independent panels without a selection relationship; use Split.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { MasterDetail } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/master-detail.

2. Vendor the source

npx @noorddev/vlak-cli add master-detail

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/master-detail.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { MasterDetail } from "@noorddev/vlak-react";

<MasterDetail label="Studies" items={[{ id: "drive", label: "Drive", description: "Vehicle controls", detail: <p>Range, energy, and media in one shared grid.</p> }, { id: "orbit", label: "Orbit", description: "Observation network", detail: <p>Track assets and their current passes.</p> }]} />

Props

MasterDetail

List/detail selection with a mobile back path and preserved item focus.

Prop	Type	Default
`items`required	`MasterDetailItem[]`
`label`	`string`	`"Items"`
`value`	`string \| null`
`defaultValue`	`string \| null`	`null`
`onValueChange`	`(id: string \| null) => void`
`emptyLabel`	`string`	`"Select an item to see its details"`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">.

Keyboard

Keys	Does
`Tab, Enter, Space`	Select an item with its button; focus moves to the detail heading. Mobile Back restores focus to its list item.

Accessibility

Native selected buttons and a named detail region. Mobile layout preserves an explicit return path.

Markup

<div class="rs-master-detail"><div class="rs-master-detail-list" role="group" aria-label="Studies"><button class="rs-master-detail-button rs-master-detail-selected" aria-pressed="true">Drive</button></div><section class="rs-master-detail-panel" aria-label="Drive details"><h2 class="rs-master-detail-title">Drive</h2><p>Vehicle controls</p></section></div>

Classes

.rs-master-detail.rs-master-detail-list.rs-master-detail-list-hidden.rs-master-detail-panel.rs-master-detail-panel-hidden.rs-master-detail-title.rs-master-detail-description.rs-master-detail-back.rs-master-detail-button.rs-master-detail-selected

Depends on

/button /icons