Overview
Everything across the workspace this month
Components shipped64+6 this month
Teams using it18+2 this month
Open issues239 need triage
App Frame
An app frame is the page around a product's content: the sidebar or top bar that says where a person can go, the page header that says where they are, and the region in between that each screen fills. Orvain's App Frame family holds three: a workspace shell with a sidebar, a page header with tabs, and a layout with only a top bar.
The frame is the part of an app that has to work at every width, because every screen inherits it. The sidebar here folds to an icon rail on a tablet and becomes a drawer behind a menu button on a phone, with focus held inside it and Escape closing it. The top bar moves its links under itself when it runs out of room rather than hiding them, so a section is never one gesture further away on a smaller screen.
Workspace shell
Best for
The frame of a product with many sections
Anatomy
Sidebar with brand, items with counts and the account · top bar with search and alerts · page title and primary action · the sidebar folds to a rail on a tablet and becomes a drawer on a phone
Page header and tabs
Best for
The top of a record or a project page
Anatomy
Breadcrumbs · mark, title and muted title · status and meta line · more, secondary and primary actions · tabs with counts switching the region under them
Design system · Orvain UI
Healthy18 teamsUpdated 2 hours ago
- 6 components shipped
- 2 teams joined
- Release 2.4 went out on 28 October
Top bar layout
Best for
Products with a few sections, where a sidebar would be empty
Anatomy
Brand, centred links and the account in one bar · the links move under the bar when it runs out of room · a centred column · a two-column body that stacks
Orvain UIFoundations
Tokens
The values every component is built from, in light and dark.
Colour
#070707#2a2a2a#737373#e1e1e1#005cf8#229a14
Radius
481224
01
Using App Frame
Reach for it when
- A product with more than five or six sections, where a sidebar keeps them all in view.
- A page about one record or project, where breadcrumbs, a title, actions and tabs belong together at the top.
- A product with a handful of sections, where a top bar leaves the full width for content.
Reach for something else when
- A marketing or documentation site. Its navigation is read rather than worked in: use the Navbars family.
- A single focused task, such as checkout or onboarding. Remove the frame so nothing competes with the next step.
- Switching between views of the same data. Use the Tabs family inside the page rather than adding a sidebar entry for each view.
02
Where it shows up
01
Admin dashboard
A workspace with an overview, an inbox, projects, reports and a team page. The sidebar carries counts for what needs attention, and the same frame holds every screen, so a person always knows where the inbox is.
02
Project page
The top of a project, with breadcrumbs back to the workspace, the project's status and owner on one line, Share and Export as actions, and tabs for overview, components, releases and settings.
03
Questions
Should an app use a sidebar or a top bar?
Count the sections. Up to about five fit in a top bar and leave the full width for content. Past that, a sidebar holds them all in view and can group them, and it has room for counts and the account. A sidebar with three items wastes a column, and a top bar with nine items starts hiding them behind a More menu.
What happens to a sidebar on a phone?
It becomes a drawer opened by a menu button in the top bar. The drawer covers the content with a dimmed backdrop, holds focus while it is open, closes on Escape or a tap on the backdrop, and returns focus to the menu button. Picking a page closes it, so the person lands on the page they chose.
The Orvain DispatchPremium components,
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
Orvain MCPApp Frame
An app frame is the page around a product's content: the sidebar or top bar that says where a person can go, the page header that says where they are, and the region in between that each screen fills. Orvain's App Frame family holds three: a workspace shell with a sidebar, a page header with tabs, and a layout with only a top bar.
The frame is the part of an app that has to work at every width, because every screen inherits it. The sidebar here folds to an icon rail on a tablet and becomes a drawer behind a menu button on a phone, with focus held inside it and Escape closing it. The top bar moves its links under itself when it runs out of room rather than hiding them, so a section is never one gesture further away on a smaller screen.
Workspace shell
Best for
The frame of a product with many sections
Anatomy
Sidebar with brand, items with counts and the account · top bar with search and alerts · page title and primary action · the sidebar folds to a rail on a tablet and becomes a drawer on a phone
Overview
Everything across the workspace this month
Components shipped64+6 this month
Teams using it18+2 this month
Open issues239 need triage
Page header and tabs
Best for
The top of a record or a project page
Anatomy
Breadcrumbs · mark, title and muted title · status and meta line · more, secondary and primary actions · tabs with counts switching the region under them
Design system · Orvain UI
Healthy18 teamsUpdated 2 hours ago
- 6 components shipped
- 2 teams joined
- Release 2.4 went out on 28 October
Top bar layout
Best for
Products with a few sections, where a sidebar would be empty
Anatomy
Brand, centred links and the account in one bar · the links move under the bar when it runs out of room · a centred column · a two-column body that stacks
Orvain UIFoundations
Tokens
The values every component is built from, in light and dark.
Colour
#070707#2a2a2a#737373#e1e1e1#005cf8#229a14
Radius
481224
01
Using App Frame
Reach for it when
- A product with more than five or six sections, where a sidebar keeps them all in view.
- A page about one record or project, where breadcrumbs, a title, actions and tabs belong together at the top.
- A product with a handful of sections, where a top bar leaves the full width for content.
Reach for something else when
- A marketing or documentation site. Its navigation is read rather than worked in: use the Navbars family.
- A single focused task, such as checkout or onboarding. Remove the frame so nothing competes with the next step.
- Switching between views of the same data. Use the Tabs family inside the page rather than adding a sidebar entry for each view.
02
Where it shows up
01
Admin dashboard
A workspace with an overview, an inbox, projects, reports and a team page. The sidebar carries counts for what needs attention, and the same frame holds every screen, so a person always knows where the inbox is.
02
Project page
The top of a project, with breadcrumbs back to the workspace, the project's status and owner on one line, Share and Export as actions, and tabs for overview, components, releases and settings.
03
Questions
Should an app use a sidebar or a top bar?
Count the sections. Up to about five fit in a top bar and leave the full width for content. Past that, a sidebar holds them all in view and can group them, and it has room for counts and the account. A sidebar with three items wastes a column, and a top bar with nine items starts hiding them behind a More menu.
What happens to a sidebar on a phone?
It becomes a drawer opened by a menu button in the top bar. The drawer covers the content with a dimmed backdrop, holds focus while it is open, closes on Escape or a tap on the backdrop, and returns focus to the menu button. Picking a page closes it, so the person lands on the page they chose.
Related blocks
All blocksThe Orvain Dispatch
Premium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
