AppShell
The one shell of the Skribly apps, built from the parts below: the app switcher top left, a sidebar with For you and Recent, search that opens the CommandPalette, Create, a notifications slot for the Inbox, settings and the account. Pick it for every signed-in screen of Hub and the Tracker; every word is a prop, and linkComponent renders the links, so an app passes the link of its router, such as the one of Next.js, and the library imports no router.
- AppShell
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AppShell
Dark theme, AppShell
High contrast theme, AppShell
UsageLink to the section Usage
import { AppShell } from '@skribly/ui/shell'<AppShell
labels={labels}
apps={registryApps}
currentAppId="tracker"
forYou={[{ href: '/inbox', label: 'Inbox' }]}
recent={recent}
current={pathname}
commands={commands}
create={{ label: 'Create', onPress: openCreate }}
notifications={{ label: 'Notifications, 2 new', title: 'Notifications', badge: 2, content: <Inbox compact … /> }}
settings={{ label: 'Settings', href: '/settings' }}
account={{ name, links: [{ href: '/profile', label: 'Profile' }], actions: [{ id: 'out', label: 'Sign out', onPress: signOut }] }}
linkComponent={Link}
>
<MainContent>…</MainContent>
</AppShell>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Tab goes through the skip links, the sidebar button, the app switcher, search, Create, notifications, settings and the account, then the sidebar links and the page.
- Ctrl+[ and Cmd+[ hide and show the sidebar; the button reports aria-expanded and a polite status says the new state.
- Below 48rem the same button and keys open the sidebar as a modal sheet.
- Search, Ctrl+K and Cmd+K open the command palette; Escape closes it and focus returns to where it was.
- The current app carries aria-current and a check mark, not colour alone.
- Every control is at least 44px on touch, and the shell holds at 320px with no sideways scroll: long names wrap or are cut with the full name in the panel.
This demo runs through axe in all three themes on every test run. See what the tests check.