Navigation
View switch
Switches a window between a few places or views. The thumb slides under the chosen word (a cross-fade under Reduce Motion); arrow keys move the choice. For a choice inside a page, use the segmented control.
Chat │ Work (keys in the tooltip)
places.tsx
import { ViewSwitch, ViewSwitchItem } from "@nibapp/ui/components/view-switch";export default function Places() { return ( <ViewSwitch aria-label="Place" defaultValue="chat"> <ViewSwitchItem value="chat" shortcut={["⌃", "1"]}> Chat </ViewSwitchItem> <ViewSwitchItem value="work" shortcut={["⌃", "2"]}> Work </ViewSwitchItem> </ViewSwitch> );}A count after the word, while something waits
with-count.tsx
import { ViewSwitch, ViewSwitchItem } from "@nibapp/ui/components/view-switch";export default function WithCount() { return ( <> <ViewSwitch aria-label="Place (something waits in Work)" defaultValue="chat"> <ViewSwitchItem value="chat">Chat</ViewSwitchItem> <ViewSwitchItem value="work" count={3} countLabel="3 waiting"> Work </ViewSwitchItem> </ViewSwitch> <ViewSwitch aria-label="Place (in Work)" defaultValue="work"> <ViewSwitchItem value="chat">Chat</ViewSwitchItem> <ViewSwitchItem value="work" count={12} countLabel="12 waiting"> Work </ViewSwitchItem> </ViewSwitch> </> );}Compact: glyphs, the words as tooltips
compact.tsx
import { ViewSwitch, ViewSwitchItem } from "@nibapp/ui/components/view-switch";import { Layers, MessageCircle } from "lucide-react";export default function Compact() { return ( <ViewSwitch aria-label="Place (compact)" defaultValue="work" compact> <ViewSwitchItem value="chat" glyph={<MessageCircle />}> Chat </ViewSwitchItem> <ViewSwitchItem value="work" glyph={<Layers />} count={3} countLabel="3 waiting"> Work </ViewSwitchItem> </ViewSwitch> );}Three views: the items share one width
three-views.tsx
import { ViewSwitch, ViewSwitchItem } from "@nibapp/ui/components/view-switch";export default function ThreeViews() { return ( <ViewSwitch aria-label="View" defaultValue="board"> <ViewSwitchItem value="list">List</ViewSwitchItem> <ViewSwitchItem value="board">Board</ViewSwitchItem> <ViewSwitchItem value="timeline">Timeline</ViewSwitchItem> </ViewSwitch> );}