Split view

Two panes with a draggable handle. Each pane re-lays itself out for its own width (container queries in the CSS: grid or list on the left, compact or full on the right).

Split view is part of Pro.

Get Pro to try it live and copy its code, along with every other element in the library.

Get Pro Already Pro? Sign in

Fold sidebarA navigation panel that folds to an icon column. The labels leave first, the panel closes over the fixed icon column, and the highlight pill lands as a rounded square (and back when it opens).
Icon tabsA pill of icon tabs. The picked tab opens to show its name while a light tile springs under it, and the panel line below, when tabs carry one, swaps with a small blur.
Capsule listAn inset grouped settings card. Each row shows a chip icon, a title and its current value; pressing one opens two lines of detail inside the same card (the others close), the chevron turns a quarter.
Ruler navA contents rail drawn as short lines. One label pill follows the pointer and snaps to the nearest section; the lines near it lengthen, click (or arrow keys) sets the current section and its line fills.
Command barOne surface that springs from a small "Search" pill into a full field with a command list under it. Type to filter, arrows move a highlight that glides between rows, Enter runs a command; the pill then confirms what was done.
Depth listRack-focus list for long option sets.

Split view

Split view is part of Pro.

Related