Shell
The frame around every Skribly screen: the web layout with a dark sidebar and a top bar, the desktop layout with a title bar, an activity bar, a status bar and a dock, and split panes. It measures its own width, so it reflows the same in a narrow window, at 400% zoom and in a preview, and its sheets hold focus on small screens.
14 pages, 23 exports
- AppLayout
- Titlebar
- Dock
- Sidebar
- SidebarUser
- SidebarNav
- NavItem
- NavKey
- NavGroup
- Topbar
- TopbarIcon
- PageHeader
- MainContent
- ActivityBar
- ActivityItem
- StatusBar
- StatusBarItem
- StatusPill
- Pane
- PaneHeader
- SplitView
- Splitter
- DockGrip
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { AppLayout, Titlebar, Dock, Sidebar, … } from '@skribly/ui/shell'Pages in this groupLink to the section Pages in this group
- Web app layoutThe page frame of the web apps: skip links, a sidebar, a top bar and the main column. Pick it for any signed-in screen; useAppLayout gives a custom control the same state as the menu button.AppLayout
- Desktop app layoutThe frame of the desktop app: a title bar, an activity bar, a status bar and a dock for a side panel such as the agent chat. Pick Dock for a panel that sits beside any view and can be resized or closed.Titlebar, Dock
- SidebarThe dark navigation column of the web apps, with the brand on top and the person signed in at the foot. It stays dark in every theme, like the Tracker.Sidebar, SidebarUser
- SidebarNavThe list of links in a Sidebar. Give it the current route and it marks the matching link and opens the group around it.SidebarNav
- NavItemOne link of the sidebar with an icon and an optional NavKey or count at the end. NavKey shows a short code, such as a project key.NavItem, NavKey
- NavGroupA titled set of NavItems that can collapse. Use it once the sidebar holds more than about eight links; set isCollapsible false for a plain heading.NavGroup
- TopbarThe bar above the main column with search and icon actions. TopbarIcon is an icon button with a tip; give it isSelected for a toggle such as dark mode, or wrap it in a MenuTrigger.Topbar, TopbarIcon
- PageHeaderThe heading row of a screen: an eyebrow, the title, a description and actions. Use one per screen, at the top of MainContent.PageHeader
- MainContentThe scrolling main column, the target of the skip link. Pick width wide for boards and tables, full for editors.MainContent
- ActivityBarThe column of view icons on the start edge of the desktop app. ActivityItem shows a view with a tip, a shortcut and a badge; pin settings and help to the bottom with footer.ActivityBar, ActivityItem
- StatusBarThe thin bar at the bottom of the desktop app. StatusBarItem shows one fact, as text, a button or a link; StatusPill is a rounded setting such as the theme.StatusBar, StatusBarItem, StatusPill
- PaneA scrolling panel of a split layout with a sticky header. Use the side variant for a list beside the work and sunken for a panel under it.Pane, PaneHeader
- SplitViewPanes divided by splitters that the pointer and the keyboard can move. Side by side panes stack below 40rem, so neither gets too narrow to read.SplitView, Splitter
- DockGripThe resize handle on the edge of a panel, such as a terminal under the editor. Dock adds one itself; use DockGrip directly for a panel of your own.DockGrip