index.md

Component Catalog

@bquery/ui already covers the primary component categories that teams expect from modern component libraries for Angular, React, Svelte, Vue, and plain Web Components.

This catalog gives you a complete overview of the currently available building blocks and the cross-cutting features that make them production-ready.

Coverage at a Glance

Category	Components
Actions	bq-button, bq-icon-button, bq-button-group, bq-copy-button
Forms	bq-input, bq-number-input, bq-textarea, bq-select, bq-combobox, bq-tag-input, bq-pin-input, bq-date-picker, bq-segmented-control, bq-checkbox, bq-radio, bq-switch, bq-slider, bq-chip, bq-rating, bq-file-upload
Navigation & Disclosure	bq-tabs, bq-accordion, bq-breadcrumbs, bq-pagination, bq-stepper, bq-tree, bq-carousel
Data Display	bq-card, bq-badge, bq-avatar, bq-avatar-group, bq-table, bq-divider, bq-empty-state, bq-stat-card, bq-timeline, bq-kbd, bq-icon, bq-meter, bq-format-number, bq-format-date, bq-relative-time
Feedback & Loading	bq-alert, bq-banner, bq-progress, bq-spinner, bq-skeleton, bq-tooltip, bq-toast
Overlays	bq-dialog, bq-drawer, bq-dropdown-menu, bq-popover, bq-command-palette
Layout	bq-split-panel

Cross-Cutting Features

Across the component library you will find the same professional capabilities that developers expect from mature UI systems:

• Accessibility-first APIs with semantic roles, ARIA attributes, keyboard support, and focus management
• Framework interoperability through native Custom Elements and DOM events
• Themeability through design tokens, CSS custom properties, and ::part() hooks
• Dark mode support without changing component APIs
• Internationalization support for user-facing component strings
• Tree-shakeable imports so applications can register only the components they use

Actions

Component	Use it for	Highlights
bq-button	Primary and secondary actions	Variants, sizes, loading state, link rendering, icon slots, accessible label override
bq-icon-button	Compact icon-only actions	Accessible label or title fallback, multiple variants, loading state, link rendering
bq-button-group	Joining related actions into one control	Attached mode with shared borders, orientation, shared size forwarding, group semantics
bq-copy-button	Copying a snippet or token to the clipboard	Confirmed state with icon swap, copy-from-selector, legacy clipboard fallback

Forms

Component	Use it for	Highlights
bq-input	Single-line text input	Labels, hints, validation, prefix/suffix slots, size variants
bq-number-input	Numeric entry with bounds	Stepper buttons, range clamping, step snapping, precision control, prefix/suffix slots
bq-textarea	Multi-line text input	Rows, max length, validation, hints
bq-select	Native dropdown selection	Placeholder, form-friendly behavior, error state
bq-segmented-control	Compact single-choice view and filter toggles	Radio-group semantics, form participation, keyboard navigation, mobile-friendly full-width mode
bq-checkbox	Boolean or multi-select forms	Checked and indeterminate states, hint text
bq-radio	Exclusive option groups	Shared name support, hint text
bq-switch	Toggle settings and preferences	Size variants, switch semantics, animated thumb
bq-slider	Numeric range selection	Min/max/step, inline value display, input/change events
bq-chip	Compact selectable tags	Selection state, removable chips, contextual variants
bq-rating	Star ratings and scores	Radio-group semantics, keyboard support, read-only and clearable modes, form participation
bq-file-upload	File selection and drag-and-drop	Type and size filtering, selected-file list, rejection events, keyboard-reachable drop zone
bq-combobox	Filtering a long list of options	ARIA 1.2 combobox pattern, single and multiple selection, diacritic-insensitive matching
bq-tag-input	Free-form tag and keyword entry	Delimiter splitting, paste handling, per-tag removal, limit enforcement
bq-pin-input	One-time codes and PINs	Per-cell entry, paste distribution, one-time-code autofill, completion event
bq-date-picker	Choosing a calendar date	Locale-aware calendar, UTC date maths, min/max range, full keyboard grid

Navigation & Disclosure

Component	Use it for	Highlights
bq-tabs	Switching between related views	Keyboard navigation, tab/panel sync, multiple visual variants
bq-accordion	Expand/collapse detail sections	Smooth toggle animation, bordered/flush variants, keyboard support
bq-breadcrumbs	Hierarchical navigation	Automatic separators, semantic navigation markup
bq-pagination	Paging through result sets	Previous/next controls, ellipsis logic, sibling page calculation
bq-stepper	Multi-step flows and wizards	Horizontal/vertical layouts, clickable steps, per-step status announcements
bq-tree	Hierarchical browsing and pickers	ARIA tree pattern, roving tab stop, typeahead, single or multiple selection
bq-carousel	Rotating content and galleries	ARIA carousel pattern, inert off-screen slides, several slides per view, swipe, accessible autoplay with pause button

Data Display

Component	Use it for	Highlights
bq-card	Structured surfaces and grouped content	Header/footer slots, padding control, elevation toggle
bq-badge	Inline statuses and labels	Variants, sizes, pill mode
bq-avatar	User and entity identity	Image/initial fallback, shapes, sizes, status indicators
bq-avatar-group	Stacked collections of people	Overflow counter, shared sizing, configurable spacing
bq-table	Tabular datasets	Sortable columns, bordered/striped/hoverable variants, empty/loading states
bq-divider	Visual separation of content	Horizontal/vertical orientation, label support, multiple line styles
bq-empty-state	No-data or no-results messaging	Title, description, icon slot, action slot
bq-stat-card	Dashboard metrics and KPI summaries	Compact metric layout, trend pill, loading skeleton, icon slot
bq-timeline	Activity feeds and audit trails	Ordered-list semantics, event variants, machine-readable timestamps, custom markers
bq-kbd	Keyboard shortcuts	Combination parsing, symbol substitution, sizes and variants
bq-icon	Interface glyphs	Mask-rendered set that inherits text colour and size, decorative by default
bq-meter	Levels and gauges that are not progress	Native <meter> band semantics, graded colouring, custom value text
bq-format-number	Numbers, prices, percentages, file sizes	Intl.NumberFormat, compact notation, automatic byte units, safe fallbacks
bq-format-date	Dates and times	Intl.DateTimeFormat presets or fields, time zones, semantic <time>
bq-relative-time	“5 minutes ago” timestamps	Intl.RelativeTimeFormat, self-updating with sync, absolute date on hover

Feedback & Loading

Component	Use it for	Highlights
bq-alert	In-page status messaging	Semantic variants, dismissible mode, optional title
bq-banner	Page-level announcements	Sticky mode, cancelable dismissal, severity-aware live regions, action slot
bq-progress	Determinate or indeterminate progress	Value/max support, size variants, status variants
bq-spinner	Compact loading indicator	Multiple sizes and color variants
bq-skeleton	Loading placeholders	Text, circle, rect, and card variants with shimmer animation
bq-tooltip	Contextual helper text	Placement options, delay, keyboard dismissal
bq-toast	Ephemeral notifications	Auto-dismiss, dismissible actions, imperative show API

Overlays

Component	Use it for	Highlights
bq-dialog	Blocking confirmation and form flows	Focus trap, escape handling, click-outside close, multiple sizes
bq-drawer	Supplemental side panels and mobile flows	Multiple placements, responsive sizes, overlay/backdrop handling
bq-dropdown-menu	Contextual actions and navigation menus	Full keyboard navigation, placement options, click-outside close, focus management
bq-popover	Rich anchored overlays	Dialog semantics, placement options, focus management, escape and click-outside close
bq-command-palette	⌘K search for pages and actions	Global hotkey, ranked fuzzy search with keywords, groups, shortcut hints, ARIA combobox in a modal dialog

Layout

Component	Use it for	Highlights
bq-split-panel	Resizable master–detail and editor layouts	WAI-ARIA window splitter, drag and keyboard resizing, snap points, collapse with Enter, RTL-aware

Feature Coverage Compared to Typical UI Libraries

Common libraries such as Material UI, Vuetify, and Angular Material typically organize their APIs around actions, forms, navigation, data display, overlays, and feedback. @bquery/ui already provides components in each of these core areas, while also shipping shared capabilities that matter in production:

• accessible interaction patterns,
• consistent event contracts,
• framework-agnostic usage,
• theme tokens and dark mode,
• and Storybook/VitePress-based documentation.

Next Steps

If you are evaluating the library for a product team, start with:

1. Getting Started
2. Framework Integration
3. Theming
4. Accessibility

For component-level API examples, see the dedicated references for Button, Icon Button, Input, and Card.