# Component catalog


Every component **unit** in `src/lib/components/` is listed here — a unit is a
component file or a directory of coordinated parts — grouped by origin.
**Custom** and **wrapped** components (we wrote or extended them) link to a
dedicated page on this site where one exists; **vendored primitives** used
unmodified link to their official registry docs.

Provenance is recorded in
`docs/dev-guide/_extracted/component-provenance.json` (hand-maintained). See
[UI stack](/frontend/dev/ui-stack) for how the registries layer.

> **Where new components live.** Every component/composable judged reusable
> lands in `@primebrick/ui` (`primebrick-v3-ui`) **at creation** — never in
> `src/lib/components`. Remote module bundles can only consume vendored
> packages, so anything FE-local is unreachable to remotes: "reusable" and
> "FE-local" are contradictory by definition. FE-local code is reserved for
> host-shell-only pieces; domain-specific components consumed only by one
> service's remote bundle stay in that service's `fe/`.

## Custom components (81)

Built from scratch for Primebrick. Rows marked `—` have no dedicated page yet —
their props are still in the auto-generated
[API reference](/frontend/dev/api-reference).

### App shell

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `AppShell` | `src/lib/components/AppShell.svelte` | Root application shell | [page](/frontend/dev/components/app-shell) |
| `AppSidebar` | `src/lib/components/AppSidebar.svelte` | Application sidebar | [page](/frontend/dev/components/app-sidebar) |
| `AppTopbar` | `src/lib/components/AppTopbar.svelte` | Top bar | [page](/frontend/dev/components/app-topbar) |
| `AppPageLayout` | `src/lib/components/AppPageLayout.svelte` | Authenticated page layout | [page](/frontend/dev/components/app-page-layout) |
| `AppPageScaffold` | `src/lib/components/AppPageScaffold.svelte` | Page scaffold | [page](/frontend/dev/components/app-page-scaffold) |
| `AppPageBreadcrumb` | `src/lib/components/AppPageBreadcrumb.svelte` | Breadcrumb segments | [page](/frontend/dev/components/app-page-breadcrumb) |
| `AppServerBanner` | `src/lib/components/AppServerBanner.svelte` | Non-production backend banner | [page](/frontend/dev/components/app-server-banner) |
| `CommandPalette` | `src/lib/components/CommandPalette.svelte` | Global Cmd+K palette | [page](/frontend/dev/components/command-palette) |
| `BrowserClientInfo` | `src/lib/components/BrowserClientInfo.svelte` | Browser capability detection | [page](/frontend/dev/components/browser-client-info) |
| `LangSelect` | `src/lib/components/LangSelect.svelte` | Language selector | [page](/frontend/dev/components/lang-select) |
| `ThemeToggle` | `src/lib/components/ThemeToggle.svelte` | Light/dark toggle | [page](/frontend/dev/components/theme-toggle) |
| `SidebarAppLauncher` | `src/lib/components/sidebar/SidebarAppLauncher.svelte` | Finder-style app/module/page launcher | [page](/frontend/dev/components/sidebar-app-launcher) |
| `SidebarHealthBadge` | `src/lib/components/sidebar/SidebarHealthBadge.svelte` | Backend health badge | [page](/frontend/dev/components/sidebar-health-badge) |
| `SidebarOrgSwitcher` | `src/lib/components/sidebar/SidebarOrgSwitcher.svelte` | Org switcher | [page](/frontend/dev/components/sidebar-org-switcher) |
| `SidebarProfileMenu` | `src/lib/components/sidebar/SidebarProfileMenu.svelte` | Profile menu | [page](/frontend/dev/components/sidebar-profile-menu) |
| `SidebarVersionBadge` | `src/lib/components/sidebar/SidebarVersionBadge.svelte` | Version badge | [page](/frontend/dev/components/sidebar-version-badge) |

### Entity list & metadata-driven pages

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `EntityListTable` | `src/lib/components/entity-list-table/` | Generic controlled list/table/card system | [page](/frontend/dev/components/entity-list-table) |
| `EntityTablePage` | `src/lib/components/entity-table-page/` | Route-level host for entity table pages — owns `useEntityList` and renders `EntityListTable` | [section](/frontend/dev/components/entity-list-table#route-level-usage-entitytablepage) |

### Config entries (metadata-driven config)

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `config-list` | `src/lib/components/config-list/` | Config entries list — `ConfigList` + `ConfigListRow` + `ConfigBulkActionBar` + `ConfigValueInput` | — |
| `config-builder` | `src/lib/components/config-builder/` | TypeConfigBuilder + sections (validation rules, widget config, select-source, JSON preview) | — |
| `BadgeValuesEditor` | `src/lib/components/config-builder/BadgeValuesEditor.svelte` | Badge value list editor | [page](/frontend/dev/components/badge-values-editor) |

### Anchor tabs

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `anchor-tabs` | `src/lib/components/anchor-tabs/` | URL-anchor tab set — `anchor-tabs` + `anchor-tabs-list` + `anchor-tabs-trigger` + `anchor-tabs-content` + `anchor-tabs-mode-switch` | — |

### Remote pages

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `RemotePageMount` | `src/lib/components/remote-page/RemotePageMount.svelte` | Mount point for remote ESM page modules (`mountPage(el, ctx)`) | — |
| `RemoteMountSlot` | `src/lib/components/remote-page/RemoteMountSlot.svelte` | Named slot that a remote module mounts into | — |
| `PageSectionSlot` | `src/lib/components/remote-page/PageSectionSlot.svelte` | Layout-section dispatch host (`layout.sections`) | — |
| `HostMountShell` | `src/lib/components/remote-page/HostMountShell.svelte` | Shell wrapper hosting remote mounts | — |
| `RemotePageErrorPanel` | `src/lib/components/remote-page/RemotePageErrorPanel.svelte` | Remote-page load/mount error surface | — |

### Error page

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `ErrorPage` | `src/lib/components/error-page/ErrorPage.svelte` | Full-page error surface | — |

### Shell infrastructure

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `sheet-panel` | `src/lib/shell/sheets/` | Global side-sheet host + panels (`ErrorsPanel`, `DocsPanel`, `VersionsPanel`, …) | [page](/frontend/dev/components/sheet-panel) |

### Forms

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `button` (async) | `src/lib/components/button.svelte` | Button wrapper with loading + onClickPromise | [page](/frontend/dev/components/button-async) |
| `FormPageLayout` | `src/lib/components/FormPageLayout.svelte` | Entity form page layout | [page](/frontend/dev/components/form-page-layout) |
| `FormLabelWithPriorityHelp` | `src/lib/components/forms/FormLabelWithPriorityHelp.svelte` | Label with priority tooltip | [page](/frontend/dev/components/form-label-with-priority-help) |
| `PasswordChecklist` | `src/lib/components/forms/PasswordChecklist.svelte` | Password policy checklist | [page](/frontend/dev/components/password-checklist) |
| `otp-input` | `@primebrick/ui` (`OtpInput`) | OTP code input (over the `input-otp` primitive, also `@primebrick/ui`) | — |
| `ComboSelect` | `src/lib/components/ui/combo-select/` | Searchable single/multi select with typed `display` templates | [page](/frontend/dev/components/combo-select) |
| `SliderField` | `src/lib/components/ui/slider-field/` | Nullable range slider — NULL = inherit, no numeric input | [page](/frontend/dev/components/slider-field) |
| `SwitchField` | `src/lib/components/ui/switch-field/` | Labelled switch — switch + label + optional sublabel + help tooltip (mandatory standard) | [page](/frontend/dev/components/switch-field) |
| `SelectableFieldset` | `src/lib/components/ui/selectable-fieldset/` | Grouped content box — gradient label over gradient border (mandatory standard) | [page](/frontend/dev/components/selectable-fieldset) |
| `ColorSelector` | `src/lib/components/ui/color-selector/` | Curated palette + native color input | [page](/frontend/dev/components/color-selector) |
| `Choicebox` | `src/lib/components/ui/choicebox/` | Radiogroup-style selectable card list | [page](/frontend/dev/components/choicebox) |
| `date-wheel-picker` | `src/lib/components/date-dropper/date-wheel-picker.svelte` | Date/time picker on wheel-picker | [page](/frontend/dev/components/date-wheel-picker) |
| `email-input` | `src/lib/components/ui/email-input/` | Email input with validation chrome | — |
| `numeric-input` | `src/lib/components/ui/numeric-input/` | Numeric input with formatting | — |
| `phone-input` | `src/lib/components/ui/phone-input/` | Phone input with prefix selection | — |
| `url-input` | `src/lib/components/ui/url-input/` | URL input with validation chrome | — |

### Display & feedback

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `DynamicIcon` | `src/lib/components/ui/dynamic-icon/` | Runtime Lucide™ icon by name | [page](/frontend/dev/components/dynamic-icon) |
| `ai-icon` | `src/lib/components/ui/ai-icon/` | AI feature icon | — |
| `bot-icon` | `src/lib/components/ui/bot-icon/` | Bot/agent icon | — |
| `gradient-icon` | `src/lib/components/ui/gradient-icon/` | Gradient-tinted icon tile | — |
| `AvatarPreview` | `src/lib/components/ui/avatar-preview/` | Initials + color avatar preview | [page](/frontend/dev/components/avatar-preview) |
| `EventCard` | `src/lib/components/ui/event-card/` | Error/notification event card | [page](/frontend/dev/components/event-card) |
| `EventToast` | `src/lib/components/toasts/EventToast.svelte` | Event toast via svelte-sonner | [page](/frontend/dev/components/event-toast) |
| `LoadingBar` | `src/lib/components/ui/loading-bar/` | Indeterminate loading bar | [page](/frontend/dev/components/loading-bar) |
| `MetadataLoading` | `src/lib/components/ui/metadata-loading/` | List metadata loading placeholder | [page](/frontend/dev/components/metadata-loading) |
| `JsonTableViewer` | `src/lib/components/ui/JsonTableViewer.svelte` | JSON as readable table | [page](/frontend/dev/components/json-table-viewer) |
| `json-code-block` | `src/lib/components/ui/json-code-block/` | JSON code block with syntax chrome | — |
| `NumberTicker` | `src/lib/components/ui/number-ticker/` | Animated count-up number for KPI values (UoM attached) | [page](/frontend/dev/components/number-ticker) |
| `StatCard` | `src/lib/components/ui/stat-card/` | KPI stat card — label + animated value + icon column | [page](/frontend/dev/components/stat-card) |
| `Toolbar` | `src/lib/components/ui/toolbar/` | Action strip — enforced CTA ordering (groups/refresh/primary), card or bare | [page](/frontend/dev/components/toolbar) |
| `realtime-meter` | `src/lib/components/ui/realtime-meter/` | Realtime metric meter | — |
| `refresh-button` | `src/lib/components/ui/refresh-button/` | Refresh action button | — |
| `dialog-bordered` | `src/lib/components/ui/dialog-bordered.svelte` | Severity-accented dialog wrapper | [page](/frontend/dev/components/dialog-bordered) |
| `entity-confirm-dialogs` | `src/lib/components/entity-list-table/dialogs/` | Entity delete/restore dialogs (title + body from translation keys) | [page](/frontend/dev/components/entity-confirm-dialogs) |
| `rfc-error-dialog` | `src/lib/components/ui/rfc-error-dialog.svelte` | RFC7807 error dialog | [page](/frontend/dev/components/rfc-error-dialog) |

### Smart components

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `smart-regex-input` | `src/lib/components/ui/smart-regex-input/` | Regex input with AI assistance | [page](/frontend/dev/components/smart-regex-input) |
| `smart-ai` | `src/lib/components/ui/smart-ai/` | AI assistant surfaces (action chips, chat panel, cerebellum selector, …) | — |
| `smart-guide` | `src/lib/components/ui/smart-guide/` | AI guided-flow surfaces | — |
| `smart-json-assistant` | `src/lib/components/ui/smart-json-assistant/` | AI-assisted JSON editing | — |
| `smart-json-config` | `src/lib/components/ui/smart-json-config/` | AI-assisted JSON config editing | — |

### Auth

| Component | Path | Summary | Page |
|-----------|------|---------|------|
| `LoginForm` | `src/lib/components/auth/LoginForm.svelte` | Login form | [page](/frontend/dev/components/login-form) |
| `PasskeyButton` | `src/lib/components/auth/PasskeyButton.svelte` | WebAuthn passkey trigger | [page](/frontend/dev/components/passkey-button) |
| `PasskeyEnrollment` | `src/lib/components/auth/PasskeyEnrollment.svelte` | Passkey enrollment UI | [page](/frontend/dev/components/passkey-enrollment) |
| `PasskeyEnrollmentSection` | `src/lib/components/auth/PasskeyEnrollmentSection.svelte` | Settings-section wrapper for passkey enrollment | — |
| `AuthMethodsPromptDialog` | `src/lib/components/auth/AuthMethodsPromptDialog.svelte` | Post-login passkey/MFA prompt | [page](/frontend/dev/components/auth-methods-prompt-dialog) |
| `SessionExpiredDialog` | `src/lib/components/auth/SessionExpiredDialog.svelte` | Session expiry dialog | [page](/frontend/dev/components/session-expired-dialog) |
| `ChangePasswordCard` | `src/lib/components/auth/ChangePasswordCard.svelte` | Change-password card | — |
| `LoadingWatermark` | `src/lib/components/auth/LoadingWatermark.svelte` | Watermark shown while auth screens load | — |
| `MfaChallenge` | `src/lib/components/auth/MfaChallenge.svelte` | MFA challenge step | — |
| `MfaEnrollmentSection` | `src/lib/components/auth/MfaEnrollmentSection.svelte` | Settings-section wrapper for MFA enrollment | — |
| `MfaManagement` | `src/lib/components/auth/MfaManagement.svelte` | Manage enrolled MFA factors | — |
| `MfaStepUpDialog` | `src/lib/components/auth/MfaStepUpDialog.svelte` | Step-up MFA verification dialog | — |

## Wrapped shadcn-svelte™ primitives (6)

Vendored from shadcn-svelte™ and extended with Primebrick-specific additions.

| Component | Path | Extension | Page |
|-----------|------|-----------|------|
| `button` | `src/lib/components/ui/button/` | variant × tone matrix (gradient semantic tones) | [page](/frontend/dev/components/button) |
| `input` | `src/lib/components/ui/input/` | `async-validated-input`, `text-input`, `input-chrome.ts` | [page](/frontend/dev/components/input) |
| `slider` | `src/lib/components/ui/slider/` | `range-slider.svelte` | [page](/frontend/dev/components/slider) |
| `tooltip` | `src/lib/components/ui/tooltip/` | `tooltip-portal`, `priority-tooltip-content` | [page](/frontend/dev/components/tooltip) |
| `form` | `src/lib/components/ui/form/` | `TranslatedFieldErrors` | [page](/frontend/dev/components/form) |
| `PrimeField` | `src/lib/components/ui/form/prime-field.svelte` | Standalone field-row wrapper (label + help + hint + errors, non-superforms) | [page](/frontend/dev/components/prime-field) |

## more-shadcn-svelte™ (5)

Vendored from [more-shadcn-svelte™](https://more-shadcn.noair.fun). Assumed
unmodified; phase 2 page authoring will confirm.

| Component | Path | Official docs |
|-----------|------|---------------|
| `color-picker` | `src/lib/components/ui/color-picker/` | [color-picker.json](https://more-shadcn.noair.fun/r/color-picker.json) |
| `dock` | `src/lib/components/ui/dock/` | [dock.json](https://more-shadcn.noair.fun/r/dock.json) |
| `sortable` | `src/lib/components/ui/sortable/` | [sortable.json](https://more-shadcn.noair.fun/r/sortable.json) |
| `timeline` | `src/lib/components/ui/timeline/` | [timeline.json](https://more-shadcn.noair.fun/r/timeline.json) |
| `wheel-picker` | `src/lib/components/ui/wheel-picker/` | [wheel-picker.json](https://more-shadcn.noair.fun/r/wheel-picker.json) |

## shadcn-svelte-extras™ (3)

Vendored from [shadcn-svelte-extras™](https://www.shadcn-svelte-extras.com).
Assumed unmodified; phase 2 page authoring will confirm.

| Component | Path | Official docs |
|-----------|------|---------------|
| `copy-button` | `src/lib/components/ui/copy-button/` | [copy-button](https://www.shadcn-svelte-extras.com/components/copy-button) |
| `password` | `src/lib/components/ui/password/` | [password](https://www.shadcn-svelte-extras.com/components/password) |
| `window` | `src/lib/components/ui/window/` | [window](https://www.shadcn-svelte-extras.com/components/window) |

## shadcn-svelte™ primitives (30, unmodified)

Vendored from [shadcn-svelte™](https://www.shadcn-svelte.com) and used as-is.
Learn them on the official site; full prop tables are in the
[API reference](/frontend/dev/api-reference).

`accordion` · `alert` · `avatar` · `badge` · `breadcrumb` · `button-group` ·
`card` · `checkbox` · `command` · `dialog` · `dropdown-menu` · `input-group` ·
`kbd` · `label` · `popover` · `resizable` · `scroll-area` ·
`separator` · `sheet` · `sidebar` · `skeleton` · `sonner` · `spinner` ·
`switch` · `table` · `tabs` · `textarea` · `toggle`

## Next steps

- [UI stack](/frontend/dev/ui-stack) — how the five layers fit together
- [Entity list table](/frontend/dev/components/entity-list-table) — the flagship custom component
- [API reference](/frontend/dev/api-reference) — full prop tables for every component