Search nx-ui
Jump to any foundation, component, block or example.
App Switcher
A compact, anchored app menu with a Google-apps-style grid by default, a labelled sidebar trigger, and an optional list layout for longer descriptions.
bunx shadcn@latest add @nx-ui/app-switcherCompact trigger variants
The default trigger is a 36px grid icon. Use the labelled trigger when the switcher sits in a sidebar header and the active app name should remain visible.
Grid and list layouts
Grid tiles keep the menu glanceable with an icon and short label. List rows add each app's description while preserving the same access states and ordinary links.
Grid
List
Driven by the nx-id app catalogue
In production the data comes from nx-id: fetchNxApps({ issuer }) returns the catalogue resolved for this credential and organisation, and toSwitcherApps maps it onto these tiles — enabled stays enabled, locked/upsell render 'No access', coming_soon renders the disabled 'Soon' tile, badge becomes the status pill. When the fetch fails, snapshotSwitcherApps renders the vendored snapshot instead. The switcher is never a security boundary; the destination gates itself.
Search and independent scrolling
Search appears after six apps. The title, search field and footer stay fixed while the app body scrolls within the available viewport height; this set also shows long names, Beta status, locked access and missing destinations.
Grid
List
Identity boundary
App links can share sign-in where the configured identity profile allows it. Organisation selection remains app/tab-local; shared sign-in does not imply shared mutable organisation state. Each destination enforces its own authentication and access rules. See docs/identity.md.
<AppSwitcher apps={toSwitcherApps((await fetchNxApps({ issuer })).apps, "mep")} />API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
apps* | AppSwitcherApp[] | — | — |
title | string | "Nexus apps" | Heading shown at the top of the popover. |
footer | React.ReactNode | — | Optional footer rendered below the independently scrolling app list. |
onSelect | (app: AppSwitcherApp) => void | — | Called before an enabled, non-active app link follows its href. |
className | string | — | — |
triggerVariant | "icon" | "labelled" | "icon" | The default is an icon-only 36px grid; labelled is for sidebar headers. |
layout | "grid" | "list" | "grid" | Compact three-column tiles, or rows with optional descriptions. |