Navigation
Moving between views and commanding the app — a segmented switch, a categorized mega menu, the ⌘K palette, tabs, and an accordion.
@shuttering/uiimport { SegmentedNav, MegaMenu, CommandPalette, Tabs, Accordion } from '@shuttering/ui'
SegmentedNav
A compact switch between a few mutually-exclusive views, with an animated active pill (shared layoutId).
| Prop | Type | Default | Description |
|---|---|---|---|
| value (required) | T | — | The active item value. |
| onChange (required) | (value: T) => void | — | Called when a segment is selected. |
| items (required) | { value: T; label: ReactNode }[] | — | The segments. |
| layoutId | string | — | Scopes the shared-layout pill animation. |
MegaMenu
A menu of panels, each a set of categorized link columns plus an optional promoted feature card. The panel is a glass surface with a cursor-tracking glow.
| Prop | Type | Default | Description |
|---|---|---|---|
| items (required) | MegaMenuItem[] | — | Each item is a top-level label with columns (heading + links) and an optional feature card. |
| layoutId | string | — | Scopes the shared-layout underline that tracks the active trigger. |
Command palette
The ⌘K launcher — grouped, keyword-searchable commands with keyboard navigation. This documentation site uses one for its own search.
| Prop | Type | Default | Description |
|---|---|---|---|
| open (required) | boolean | — | Controlled visibility. |
| onOpenChange (required) | (open: boolean) => void | — | Visibility handler; useCommandPalette wires ⌘K for you. |
| items (required) | CommandItem[] | — | id, label, group, keywords, icon, and onSelect per command. |
Tabs & accordion
Base UI disclosure primitives, token-styled.
Base UI tabs with a token-styled active underline.