Components › Navigation › App shell › Split view

Split view

beta

The one two-pane layout: aside next to the main content (rail | detail, list | reader, work | discussion); bar above, not resizable.

React lives in the app (SplitView.tsx); stories render its markup 1:1. Beta 4 Oct 2026: stories + usage + a11y done; canon after AD approval. Open: settings (OpravneniRole, SadyOpravneniTab) use SplitView with fill={false} although DS-SPLITVIEW lists Settings as not-SplitView, and pass gap without divider="gap" (no effect).

Used in 32 files · 28 areas · 33× — components/GlobalSearch, components/agent-desk, components/company, pages/AccountingInvoiceDetailPage, pages/AccountingInvoiceEditPage, pages/AsistentPlochaPage …

apps/web <SplitView>.sv .sv-aside .sv-main .sv-pad +5SourceStory
ExamplesCodeUsageAccessibilityChangelog

Import

Not exported from @acrm/ui — <SplitView> lives in the app (apps/web/src/components/SplitView.tsx). Reuse the CSS classes below, or move the component into the package first.

Props

SplitView

No props extracted (not in props.json).

CSS classes

.sv.sv-aside.sv-main.sv-pad.sv-r.sv-div-line.sv-div-gap.sv-fill.sv-collapse

Files

record-railSection top barCommand palette