GitHub

Navigation

Top-level wayfinding: navbars, sidebars, menus, tabs, breadcrumbs, pagination, and steppers. Every sample below is exhaustive — each labeled row shows every variant, orientation, size, and state so nothing is hidden.

CommandMenu

Ctrl/⌘+K command palette for global navigation & actions.

tsx
<CommandMenu open={open} onOpenChange={setOpen}><CommandMenu.Item onSelect={...}>...</CommandMenu.Item></CommandMenu>

Pagination

Accessible page navigation with computed ellipses. With and without a page-size selector.

default
first / last
page size
tsx
<Pagination currentPage={3} totalPages={24} onPageChange={setPage} showFirstLast />

Tabs

Compound tabs. Every variant plus vertical orientation.

underline

Overview content.

pill

Overview content.

contained

Overview content.

vertical

Week content.

tsx
<Tabs defaultValue="overview" variant="underline"><Tabs.List>...</Tabs.List></Tabs>

Accordion

Disclosure panels. Every variant plus single and multiple open modes.

single · separated

Book a 30-minute intro call. We scope the problem, propose an approach, and quote a fixed-scope first sprint.

single · bordered

Book a 30-minute intro call. We scope the problem, propose an approach, and quote a fixed-scope first sprint.

single · minimal

Book a 30-minute intro call. We scope the problem, propose an approach, and quote a fixed-scope first sprint.

multiple

Jakarta, with remote engineers across APAC and EU.

Yes — monthly retainers for ongoing product work, billed per sprint.
tsx
<Accordion type="single" collapsible variant="separated"><Accordion.Item value="q1">…</Accordion.Item></Accordion>

UserMenu

Avatar trigger + dropdown menu for authenticated user actions. Both alignments, wired to a Sundanese sample person.

align
tsx
<UserMenu user={{...}} items={[...]} align="end" />

ThemeSwitcher

Light / dark / auto toggle. Every variant and size.

variant
size
tsx
<ThemeSwitcher variant="segmented" size="md" />

Stepper

Multi-step progress. Every variant, both orientations, all sizes, and per-step state derived from currentStep.

numbered

  1. Cart

    Review items

  2. 2

    Shipping

    Select address

  3. 3

    Payment

    Confirm and pay

dotted

  1. Draft

  2. Review

  3. Published

icon

  1. Cart

  2. Shipping

  3. Payment

vertical

  1. Cart

  2. 2

    Shipping

  3. 3

    Payment

size sm

  1. Step one

  2. 2

    Step two

  3. 3

    Step three

size md

  1. Step one

  2. 2

    Step two

  3. 3

    Step three

size lg

  1. Step one

  2. 2

    Step two

  3. 3

    Step three

tsx
<Stepper currentStep={1} variant="numbered"><Stepper.Step><Stepper.Number>1</Stepper.Number><Stepper.Title>…</Stepper.Title></Stepper.Step></Stepper>