# bitboss-ui > Vue 3 component library by BitBoss: forms, selects, layout, overlays, and more. Note: the `dist/` paths below resolve inside the installed npm package (`node_modules/bitboss-ui/`) and, when this file is fetched over HTTP, against https://cdn.jsdelivr.net/npm/bitboss-ui@beta. `dist/` is generated and not committed, so when browsing the repository the sources are `ai/` (guides, recipes, composables) and `src/components//.guide.md` (per-component guides). ## AI Knowledge Base - [Core knowledge base](https://cdn.jsdelivr.net/npm/bitboss-ui@beta/dist/llms-medium.txt): **Fetch this if you can only fetch one file** — hard rules, setup, component picker, design language, and the full component catalogue in ~70 KB. - [Complete knowledge base](https://cdn.jsdelivr.net/npm/bitboss-ui@beta/dist/llms-full.txt): Everything concatenated (~2 MB). Bulk ingestion only — too large to prompt with. - [AI Router](dist/ai/guides/ai-router.md): **Start here** — tiny hop map for any coding agent (which file to open next). - [Component index](dist/ai/index.md): Full component catalogue with agent rules, grouped by category. Each entry links a typed contract (props/events/slots/v-model). - [Component manifest](dist/ai/components.json): Machine-readable API surface of every component, for programmatic validation. - CLI / MCP: `npx bitboss-ui check` (markup vs components.json), `npx bitboss-ui mcp` (search/get/validate), `npx bitboss-ui ai-init [--mcp]`. - [Agent Contract](dist/ai/guides/agent-contract.md): Mandatory rules before writing any component usage code. - [Installation & Plugin Setup](dist/ai/guides/installation-and-plugin-setup.md): Canonical installation, style handling, and plugin configuration. - [Component Picker](dist/ai/guides/component-picker.md): Decision guide for choosing the right component for common UI needs. - [Coherence Playbook](dist/ai/guides/coherence-playbook.md): Declarative coherence for tied inputs — enforce-coherence, dependencies and debounce props instead of manual watchers, with per-component availability. - [Fetch Data Items Playbook](dist/ai/guides/fetch-items-playbook.md): Item-provider signatures as actually invoked per component family, prefill semantics, dependencies-driven refetching, and canonical API request patterns. - [Options and Items Playbook](dist/ai/guides/options-items-playbook.md): How item-driven components turn raw domain items into options — mapping, value identity, model seeding, and the supported ways to disable choices. - [Inline Edit Playbook](dist/ai/guides/inline-edit-playbook.md): Who owns the edit? Choosing between draft-map, autosave, and write-back persistence for inline-editing tables — commit rules per control kind, optimistic overlays with rollback, and the dirty-ring / chevron-to-spinner feedback grammar. - [Icons Policy](dist/ai/guides/icons-policy.md): Provider-first icon usage (`lucide:*` via `@iconify-json/*` packages), `local:*` for brand art, how the plugin resolves names, and a catalog of every surface that accepts an icon. - [App Layout](dist/ai/guides/app-layout.md): App-side chrome around every page — collapsible left nav sidebar and a fat footer, owning the page's one
landmark and the CSS hooks (.layout--sidebar-expanded, --sidebar-max-w) that size the nav. - [Design Language](dist/ai/guides/design-language.md): Token vocabulary, variants, sizing, dark mode, and how to style around the components when building on-system UIs. - [Design Tokens](dist/ai/guides/design-tokens.md): The token architecture of bitboss-ui — tiers, naming rules, the emphasis ladder, and the theming contract. - [Floating Bottom Panel](dist/ai/guides/floating-bottom-panel.md): App-side selection action bar — a panel-colored dock that floats up from the bottom when table rows are selected and dispatches bulk actions. The implementation ships in the per-platform Layout Scaffold recipe; this guide covers when and how to use it. - [Inertia Helpers](dist/ai/guides/inertia-helpers.md): App-side toolkit for Laravel + Inertia apps — typed page props, lazy props, URL-driven filters, paginated/selection page contexts, promise forms, and navigation guards that pair with bitboss-ui pages. - [Migration v2 → v3](dist/ai/guides/migration/v2-to-v3.md): Complete upgrade guide from bitboss-ui 2.x to 3.0 — plugin-based setup, token overhaul, variant registries, global behavioral changes, and the silent-failure audit playbook. - [Migration v2→v3: BbAlert](dist/ai/guides/migration/components/bb-alert.md): showClose inverted to hideClose, theme replaced by typed variant. - [Migration v2→v3: BbAvatar](dist/ai/guides/migration/components/bb-avatar.md): The color prop is removed — retheme the fallback through the --bg-color / --text-color locals. - [Migration v2→v3: BbBadge (and where your v2 badges went)](dist/ai/guides/migration/components/bb-badge.md): The v2 BbBadge (floating count/dot) is now BbIndicator; the v3 BbBadge is a new inline pill that also replaces BbChip. - [Migration v2→v3: BbBreadcrumbs](dist/ai/guides/migration/components/bb-breadcrumbs.md): Item keys must be strings, the text divider prop is gone, per-item slot names are normalized. - [Migration v2→v3: BbButton](dist/ai/guides/migration/components/bb-button.md): Async click handlers now auto-track loading (behavior flip), built-in tooltip props removed, variant locked to the registry. - [Migration v2→v3: BbCheckbox / BbRadio / BbSwitch](dist/ai/guides/migration/components/bb-checkbox.md): reverse polarity inverted (explicit values flip, default layout unchanged), checked narrowed to boolean, color removed, BbRadio's name no longer required. - [Migration v2→v3: BbCheckboxGroup / BbRadioGroup / BbSwitchGroup](dist/ai/guides/migration/components/bb-checkbox-group.md): labelPosition renamed legendPosition, per-item disabled is now inert (use selectable), color and the option affix slots removed, BbRadioGroup's name no longer required, and the shared bb-cr-container CSS block split into one per group. - [Migration v2→v3: BbChip (removed)](dist/ai/guides/migration/components/bb-chip.md): BbChip is gone — BbBadge with clearable is the replacement; non-clearable chips were badges all along. - [Migration v2→v3: BbCollapsible](dist/ai/guides/migration/components/bb-collapsible.md): The tag prop is removed; the root is always a span. - [Migration v2→v3: BbColorInput](dist/ai/guides/migration/components/bb-color-input.md): picker renamed to eyeDropper. - [Migration v2→v3: BbColorPalette](dist/ai/guides/migration/components/bb-color-palette.md): flip inverted to disableFlip, showArrow removed, picker renamed eyeDropper, update:open dropped, model updates never emit null. - [Migration v2→v3: BbDatePickerInput](dist/ai/guides/migration/components/bb-date-picker-input.md): allowWriting inverted to disableWriting and hidePopover renamed to disableCalendar, both with a changed token set; the width prop is removed; adaptive mobile sheet by default; non-floating output carries the local offset instead of UTC `Z` (new `utc` prop restores v2 output). - [Migration v2→v3: BbDialog](dist/ai/guides/migration/components/bb-dialog.md): showClose inverted to hideClose, several presentation props and the #close/#description slots removed, default widths changed, adaptive bottom sheet on mobile by default, --bb-dialog-* tokens replaced by --bb-panel-p plus locals. - [Migration v2→v3: BbDropdown](dist/ai/guides/migration/components/bb-dropdown.md): Items now expect text as the label and can carry variants/submenus; arrowPadding removed; adaptive mobile sheet on by default. - [Migration v2→v3: BbDropdownButton](dist/ai/guides/migration/components/bb-dropdown-button.md): autoLoading renamed to disableAutoLoading, disabledWhileLoading and theme removed. - [Migration v2→v3: BbDropzone](dist/ai/guides/migration/components/bb-dropzone.md): modelValue is typed, accept no longer throws and takes bare tokens, and the hidden native-submit input only renders when name is set. - [Migration v2→v3: BbIcon](dist/ai/guides/migration/components/bb-icon.md): The required prop is renamed type→icon, color is removed, and the xxl size key becomes 2xl. - [Migration v2→v3: BbIntersection](dist/ai/guides/migration/components/bb-intersection.md): Removed with no replacement — it wrapped IntersectionObserver and carried no styling; use @vueuse/core's useIntersectionObserver. - [Migration v2→v3: BbOffCanvas](dist/ai/guides/migration/components/bb-offcanvas.md): direction→side; showClose→hideClose; description and the #close/#description slots removed; size defaults change; adaptive drawer configs unify on offCanvasProps. - [Migration v2→v3: BbPagination](dist/ai/guides/migration/components/bb-pagination.md): querykey renamed to queryKey; the loading prop is removed. - [Migration v2→v3: BbPopover](dist/ai/guides/migration/components/bb-popover.md): Built-in close button, restoreFocus, theme, and the arrow are gone; close affordances move into your content. - [Migration v2→v3: BbRating](dist/ai/guides/migration/components/bb-rating.md): color removed; name no longer required; the star state modifier renamed --highlighted to --filled/--empty; --bb-rating-size demoted to a local --size; input-position finally works. - [Migration v2→v3: BbSelect](dist/ai/guides/migration/components/bb-select.md): allowWriting inverted to disableWriting, filterBy narrowed to string[], prefill value renamed, chevron/options slots removed, and two behavior changes (second click, mount-time coherence). - [Migration v2→v3: BbSelectPopover](dist/ai/guides/migration/components/bb-select-popover.md): flip and allowWriting inverted, arrow props removed, filterBy narrowed, options slots replaced by header/footer; shares BbSelect's behavior changes. - [Migration v2→v3: BbSlider](dist/ai/guides/migration/components/bb-slider.md): thumbTranslate inverted to disableThumbTranslate; string model values and color removed. - [Migration v2→v3: BbSmoothHeight](dist/ai/guides/migration/components/bb-smooth-height.md): The `tag` prop is narrowed to `div | span`, and the inner measuring element now mirrors it instead of always being a `
`. - [Migration v2→v3: BbSpinner](dist/ai/guides/migration/components/bb-spinner.md): The color prop is removed; spinners follow currentColor. - [Migration v2→v3: BbTable](dist/ai/guides/migration/components/bb-table.md): The table renders as a CSS grid of divs with ARIA roles, not a — every element selector (table/thead/tbody/tr/th/td) under .bb-table matches nothing, #thead/#tbody/#tfoot take role-complete div rows, --fill/--natural-width are gone, column widths drift within documented bounds, copy-to-spreadsheet and print header repetition degrade; allowSelectAll inverted to disableSelectAll; loading no longer blanks populated tables and now inerts rows; #loading is first-load-only; #no-data fills a full-width cell instead of replacing the row; row events drop the selected argument; columns gained sortable + rowClass, which collide with same-named consumer fields. - [Migration v2→v3: BbTabs (was BbTab)](dist/ai/guides/migration/components/bb-tabs.md): Component renamed; querykey→queryKey; animations default on; label slots renamed and all dynamic names/URL slugs normalized; the entire .bb-tab BEM tree renamed to .bb-tabs / .bb-tabs-list / .bb-tabs-panes. - [Migration v2→v3: BbTag](dist/ai/guides/migration/components/bb-tag.md): modelValue is strictly string[] now, multiple is removed, and duplicates are rejected case-insensitively by default. - [Migration v2→v3: BbTextInput](dist/ai/guides/migration/components/bb-text-input.md): The type prop narrows to the text-like input types — number/date values must move to their dedicated components; a bare `floating` attribute was never a prop, the spelling is label-mode="floating". - [Migration v2→v3: BbToast and toast()](dist/ai/guides/migration/components/bb-toast.md): Host placement becomes position with a corner-based value set; toast() options rewritten (variant, duration, actions, portal). - [Migration v2→v3: BbTooltip](dist/ai/guides/migration/components/bb-tooltip.md): timeout renamed to delay; theme replaced by typed variant; hideArrow is now a declared prop; block removed; modelValue is new. - [Migration v2→v3: BbTree](dist/ai/guides/migration/components/bb-tree.md): Item model rewritten — payload moves under meta, open becomes expanded, identifier becomes itemValue, expansion is a v-model. - [Migration v2→v3: confirm() / useConfirm](dist/ai/guides/migration/components/use-confirm.md): yesText/onYes/noText/onNo collapse into yes/no configs, actions becomes an array-or-false, theme→variant, timeout→duration, autoClose flips to default-true, labels are localized, footer buttons default md. - [Migration v2→v3: useBroadcastChannelInstance](dist/ai/guides/migration/components/use-broadcast-channel-instance.md): Removed — cross-tab messaging is not a UI concern; use useBroadcastChannel from @vueuse/core. - [Page Shell](dist/ai/guides/page-shell.md): App-side page layout — topbar, content, and a right details sidebar driven by a stack-based context (push a record to peek it, pop to go back). The implementation ships in the per-platform Layout Scaffold recipe; this guide covers when and how to use it. - [Validated Forms (vee-validate)](dist/ai/guides/validated-forms.md): The `bitboss-ui/validated` entrypoint — form controls pre-wired to vee-validate. Global rules give an effort-free `rules="required|email"` string syntax; BbForm hosts the form; requiredAsterisk marks required fields. ## Recipes (Page-Level Assemblies) Open one platform file only (`vue` / `nuxt` / `inertia`). Full intent map: AI Router. Summaries below are truncated for token budget. - [Approvals Inbox (Inertia)](dist/ai/recipes/inertia/approvals-inbox.md): Keyboard-first expense-approvals triage for Laravel + Inertia — `keyboard-navigation` with… - [Approvals Inbox (Nuxt)](dist/ai/recipes/nuxt/approvals-inbox.md): Keyboard-first expense-approvals triage for Nuxt — `keyboard-navigation` with highlight-opens-peek,… - [Approvals Inbox (Vue)](dist/ai/recipes/vue/approvals-inbox.md): Keyboard-first expense-approvals triage for a vue-router SPA — `keyboard-navigation` with… - [Command Palette (Inertia)](dist/ai/recipes/inertia/command-palette.md): A ⌘K/Ctrl+K global command palette — BbDialog framing BbSelectPopover's search-and-pick engine — for… - [Command Palette (Nuxt)](dist/ai/recipes/nuxt/command-palette.md): A ⌘K/Ctrl+K global command palette — BbDialog framing BbSelectPopover's search-and-pick engine — for… - [Command Palette (Vue)](dist/ai/recipes/vue/command-palette.md): A ⌘K/Ctrl+K global command palette — BbDialog framing BbSelectPopover's search-and-pick engine — for… - [Inline-Edit Workspace (Inertia)](dist/ai/recipes/inertia/inline-edit-workspace.md): Linear-style sprint backlog for Laravel + Inertia where every cell autosaves — optimistic per-field overlay… - [Inline-Edit Workspace (Nuxt)](dist/ai/recipes/nuxt/inline-edit-workspace.md): Linear-style sprint backlog for Nuxt where every cell autosaves — optimistic per-field overlay with… - [Inline-Edit Workspace (Vue)](dist/ai/recipes/vue/inline-edit-workspace.md): Linear-style sprint backlog for a vue-router SPA where every cell autosaves — optimistic per-field overlay… - [Layout Scaffold (Inertia)](dist/ai/recipes/inertia/layout-scaffold.md): The three app-owned chrome files every page recipe imports — the peek-stack context, the PageShell frame… - [Layout Scaffold (Nuxt)](dist/ai/recipes/nuxt/layout-scaffold.md): The three app-owned chrome files every page recipe imports — the peek-stack context, the PageShell frame… - [Layout Scaffold (Vue)](dist/ai/recipes/vue/layout-scaffold.md): The three app-owned chrome files every page recipe imports — the peek-stack context, the PageShell frame… - [Ownership Atlas (Inertia)](dist/ai/recipes/inertia/ownership-atlas.md): Nested-table ownership atlas for Laravel + Inertia — expandable owner rows whose holdings render as a child… - [Record Form (Inertia)](dist/ai/recipes/inertia/record-form.md): Full-anatomy invoice create/edit form for Laravel + Inertia — sectioned fields with tied selects,… - [Record Form (Nuxt)](dist/ai/recipes/nuxt/record-form.md): Full-anatomy invoice create/edit form for Nuxt — sectioned fields with tied selects and FetchError 422… - [Record Form (Vue)](dist/ai/recipes/vue/record-form.md): Full-anatomy invoice create/edit form for a vue-router SPA — sectioned fields with tied selects and 422… - [Records Workspace (Inertia)](dist/ai/recipes/inertia/records-workspace.md): Full-anatomy invoices workspace for Laravel + Inertia — breadcrumbs + page search, chip filter rail (one… - [Records Workspace (Nuxt)](dist/ai/recipes/nuxt/records-workspace.md): Full-anatomy invoices workspace for Nuxt — breadcrumbs + page search, chip filter rail (one Filters menu +… - [Records Workspace (Vue)](dist/ai/recipes/vue/records-workspace.md): Full-anatomy invoices workspace for a vue-router SPA — breadcrumbs + page search, chip filter rail (one… - [Upload Center (Inertia)](dist/ai/recipes/inertia/upload-center.md): Full-anatomy expense-receipts upload center for Laravel + Inertia — multi-file dropzone into an… - [Upload Center (Nuxt)](dist/ai/recipes/nuxt/upload-center.md): Full-anatomy expense-receipts upload center for Nuxt — multi-file dropzone into an inline-editable table… - [Upload Center (Vue)](dist/ai/recipes/vue/upload-center.md): Full-anatomy expense-receipts upload center for a vue-router SPA — multi-file dropzone into an… - [Wizard Form (Inertia)](dist/ai/recipes/inertia/wizard-form.md): Mailchimp-grade 4-step campaign wizard for Laravel + Inertia — BbBaseButton stepper with… - [Wizard Form (Nuxt)](dist/ai/recipes/nuxt/wizard-form.md): Mailchimp-grade 4-step campaign wizard for Nuxt — BbBaseButton stepper with done/current/upcoming/locked… - [Wizard Form (Vue)](dist/ai/recipes/vue/wizard-form.md): Mailchimp-grade 4-step campaign wizard — BbBaseButton stepper with done/current/upcoming/locked states,… - [Workspace Onboarding (Inertia)](dist/ai/recipes/inertia/onboarding.md): Full-anatomy workspace onboarding for Laravel + Inertia — a live BbProgress header, an accordion checklist… - [Workspace Onboarding (Nuxt)](dist/ai/recipes/nuxt/onboarding.md): Full-anatomy workspace onboarding for Nuxt — a live BbProgress header, an accordion checklist whose steps do… - [Workspace Onboarding (Vue)](dist/ai/recipes/vue/onboarding.md): Full-anatomy workspace onboarding for a vue-router SPA — a live BbProgress header, an accordion checklist… ## Composables - [useBbConfig](dist/ai/composables/useBbConfig.md): Patch the library's runtime-editable configuration — today that is exactly one key, locale. - [useBbFormContext](dist/ai/composables/useBbFormContext.md): Read and drive a BbForm from anywhere by id — validity, dirtiness, values, errors, plus submit/reset/validate — with no template ref and no shared subtree. - [useBbTableContext](dist/ai/composables/useBbTableContext.md): Drive and read a BbTable's state (selection, sort, highlight, pagination) from anywhere by id — no prop drilling, no template refs. - [useBbTabsContext](dist/ai/composables/useBbTabsContext.md): Read and drive a BbTabs/BbTabsRoot group from anywhere by id — writable current tab, goTo/select, no template refs. - [useConfirm](dist/ai/composables/useConfirm.md): Promise-based confirm dialogs — await the user's yes/no, with yes/no button configs, async onClick busy states, and portal content. Requires exactly one host, mounted at the app root. - [useCountdown](dist/ai/composables/useCountdown.md): Reactive countdown timer with start, pause, reset, and formatted time output. - [useId](dist/ai/composables/useId.md): Generate a unique, hydration-safe DOM id (prefixed bb-ui-) for aria wiring in custom markup. - [useMobile](dist/ai/composables/useMobile.md): Reactive isMobile flag using the same viewport breakpoint the library's adaptive components use. - [useSafeArea](dist/ai/composables/useSafeArea.md): Declare that an app-side docked panel occupies a screen edge, so toasts slide clear of it instead of landing on top. - [useToast](dist/ai/composables/useToast.md): Fire, update, and dismiss transient toast notifications from anywhere — returns { toast, dismiss, update }. Requires exactly one host, mounted at the app root.