ActivityBar

The 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

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ActivityBar

Dark theme, ActivityBar

High contrast theme, ActivityBar

UsageLink to the section Usage

tsx

import { ActivityBar, ActivityItem } from '@skribly/ui/shell'

tsx

<ActivityBar label="Views" footer={<ActivityItem label="Settings" onPress={…}><Settings /></ActivityItem>}>
  <ActivityItem label="Agents" tip="Terminals and chats" shortcut="⌘2" badge={2} badgeLabel="2 waiting" isCurrent><Bot /></ActivityItem>
</ActivityBar>

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

A navigation landmark with a list of 40px buttons named by their labels.
The current view has aria-current="page", the accent and a rule on the edge. badgeLabel is read with the name and shown in the tip, so the count never relies on its colour.
Tips open on hover and keyboard focus, close on Escape and stay while hovered.

This demo runs through axe in all three themes on every test run. See what the tests check.