Orvain UI

Tabs

Tabs switch between peer views of one object without leaving the page: overview, activity, members, all describing the same record, one visible at a time.

Get Pro to installPro9 blocksReact, Vue and Figma
MCPConnect the MCP server
Milestone v2.4 ships Friday68% done · 24 open issues
Scale

Every block in the set#

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.

Open in BlocksSee plans