BoM Daily / design

components

Tabs

Switch between related views, built on Radix Tabs. The active tab carries the primary underline. On narrow screens the tab row scrolls horizontally instead of wrapping, and each tab is a 44px touch target.

Basic

Today's story and illustration.

Many tabs

The row scrolls horizontally on small screens.

Content for section 1.

Props

PropTypeDefaultDescription
itemsTabItem[]none{ value, label, icon?, content } per tab.
defaultValuestringnoneInitial active tab. Defaults to the first.
valuestringnoneControlled active tab.
onValueChange(v: string) => voidnoneChange handler.