Bottom tabs

A phone-width bar. The active tab's icon rises and its label unfolds beneath it; a soft pill slides along on a spring.

Bottom tabs is part of Pro.

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

Workspace switcherThe trigger shows the current workspace; the list pops out beneath it. Pick one and the mark and name in the trigger swap through a blur while the tick slides to the new row.
Transition panelA segmented control over a panel. Switch tabs and the box springs to the new height while the old content blurs out and the new blurs in, sliding in the direction you moved.
Shrinking headerScroll and the tall header folds into a pill. The subtitle fades first, then the title shrinks and slides into the bar, then the bar tightens and gains its ring.
Nav that stretchesA dark pill of icons. The active item stretches to show its label; the item marked `menu` turns the pill into a list.
Split viewTwo 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).
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).