Every Bridge UI component available so far.
Bridge UI provides building blocks for React and Vue applications. Components share Bridge design tokens and a consistent API across both frameworks.
Use the framework selector in the site header to switch between React and Vue on every component page.
Inputs
Form controls and actions that accept user input.
| Component | Description |
|---|---|
| Autocomplete | Combobox with search, free-solo, and async data |
| Button | Primary action control for forms, dialogs, and navigation |
| Checkbox | Binary choice with optional indeterminate state |
| Label | Accessible label for form fields |
| Number Field | Numeric input with min, max, and step |
| Otp Field | One-time password / PIN input with pin cells |
| Password Field | Password input with visibility toggle |
| Radio | Single choice within a group |
| Select | Dropdown selection, single or multiple |
| Slider | Horizontal control for a numeric value or range |
| Switch | On/off toggle |
| Text Field | Single-line text input with adornments |
| Textarea | Multi-line text input with optional autosize |
Data display
Components for presenting content and metadata.
| Component | Description |
|---|---|
| Avatar | User or entity representation with image, initials, or icon |
| Badge | Status indicator or count overlay |
| Divider | Horizontal or vertical separator for grouping content |
| Icon | Sized icon from a component or semantic name |
| List | Vertical list with sections and interactive items |
| Skeleton | Placeholder block for loading states |
Feedback
Non-blocking messages about app state.
| Component | Description |
|---|---|
| Alert | Inline banner for contextual messages |
| Progress | Linear progress for determinate, indeterminate, buffer, and query |
| Snackbar | Toast notification portaled to the viewport |
| Spinner | Circular progress for determinate and indeterminate loading states |
Surfaces
Containers that group related content.
| Component | Description |
|---|---|
| Card | Elevated surface with title, body, and slots |
Navigation
Links and menus for moving through the app.
| Component | Description |
|---|---|
| Link | Styled anchor for in-app and external navigation |
| Menu | Anchored floating panel for actions and dropdowns |
| Tabs | Tabbed views with TabList, Tab, TabPanel, TabItem |
Overlay
Layered UI that sits above the page.
| Component | Description |
|---|---|
| Drawer | Edge-docked overlay with portal, backdrop, and focus management |
| Modal | Dialog overlay with portal, backdrop, and focus management |
| Tooltip | Anchored hint on hover or focus |