Tabs in place, underline

Page-level tabs in a header, for views that load: Activity, Members, Billing.

Get Pro to installPro9 blocksReact, Vue and Figma
MCPConnect the MCP server

Orvain UI

Updated 2 hours ago
Milestone v2.4Ships Friday68%
Open issues24+420 last week
In review6−28 last week
Shipped11+74 last week
Cycle time1.8d−0.42.2d last week
Commits41+1229 last week
Failed builds2−57 last week

More in Tabs#

Grouped tabs

Page-level view switching: 2 to 5 peer views of one object, switched in place

Grouped tabs, counts

Views that carry how many items they hold, where acting on an item moves it to another view

Grouped tabs, priority

More views than a row can hold, without wrapping or scrolling the tab list

Tabs in place

The test the page leads with: a control that re-renders one region and leaves the page alone

Tabs in place, underline

Page-level tabs in a header, for views that load: Activity, Members, Billing

Tabs in place, morph

Views of very different heights, where the panel should say which way the choice went

Segmented control

Two or three short options that shape one field or a dense toolbar

Segmented control, preview

A choice that is about layout, where seeing it beats reading it

Segmented control, toolbar

A dense toolbar that switches the view under it between layouts

When to use#

  • Two to five peer views of one object, switched in place with no change of address.
  • A panel whose heading, meta and primary action must hold still while the content beneath them changes.
  • A field with two or three short options that shape what it shows: a segmented control rather than full tabs.
  • A dense toolbar where the options are short enough to sit side by side without truncating.

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.