Orvain UI

Grouped tabs, counts

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

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

Milestone v2.4

Ships Friday, 13 November

Billing rebuild#4182 · Amelia · 2h ago
Token audit#4179 · Noah · 5h ago
Empty states copy#4171 · Mia · yesterday

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.

Open in BlocksSee plans