All components
Every component with its level, category and status.
Every component
41 components are in @brdgapp/ui. Each has a page with live examples, guidance and its API. Search or filter to find the one for a job.
41 of 41 components
- ButtonExperimentalStarts an action. Six variants, four sizes; one primary per group.Atom · Actions
- IconButtonExperimentalAn action shown only as an icon (close, more, copy). Always round; always named.Atom · Actions
- TagExperimentalThe soft color label for status, category and counts. Not a button; not a pill.Atom · Labels
- BadgeExperimentalThe tiny uppercase sticker, such as ALUM. For everything else, use Tag.Atom · Labels
- DataStateExperimentalLoading, empty and error for every data region. The frame stays; only the body changes.Utility · Data
- ButtonGroupExperimentalTwo or more related actions joined in one pill, such as Copy intro link · Make intro.Molecule · Actions
- TabsExperimentalUnderline tabs that switch between views of one page.Molecule · Navigation
- SegmentedControlExperimentalA pill switcher for two to five modes of one view, such as a date range.Molecule · Inputs
- FilterChipExperimentalA filter pill people switch on and off, with an optional count.Atom · Inputs
- SwitchExperimentalAn on/off setting that takes effect immediately.Atom · Inputs
- InputExperimentalA one-line text field: names, emails, links.Atom · Inputs
- TextareaExperimentalA text field for more than one line: notes, bios, messages.Atom · Inputs
- CheckboxExperimentalA box people tick: choosing rows, one option in a form, or several from a list.Atom · Inputs
- CollapsibleExperimentalA section people open and close, for what most people don't need most of the time.Molecule · Data display
- Hover cardExperimentalA preview of a person or company that opens when the pointer rests on its name.Molecule · Overlays
- CardExperimentalThe frosted-glass box most of Bridge sits in: lists, tables, forms and tiles.Molecule · Data display
- SkeletonExperimentalA grey placeholder shaped like content that hasn't loaded yet.Atom · Feedback
- IllustrationExperimentalBridge's drawings for empty states: small scenes of cards, faces and one blue button.Atom · Feedback
- NetworkGraphExperimentalYou in the middle, the people you know around you, a line to each.Molecule · Data display
- SceneExperimentalThe frame for a product picture built from real components, for feature cards and onboarding.Utility · Data display
- ThemeSwitchExperimentalThe Appearance setting: Light, Dark or System, for every Bridge app.Molecule · Inputs
- BrandMarkExperimentalA company's logo at icon size: LinkedIn, Google, Microsoft, Apple, WhatsApp, Telegram, Chrome.Atom · Data display
- AvatarExperimentalA person's photo or initials, a member or Super Connector badge, and stacks of faces.Atom · Data display
- FieldExperimentalA label, a control, help text and an error, tied together.Molecule · Inputs
- SearchInputExperimentalThe pill search field with a clear button.Atom · Inputs
- CopyFieldExperimentalAn email or phone number that copies when clicked.Atom · Data display
- ExpandableBioExperimentalA bio cut to one line, with See more when it doesn't fit.Atom · Data display
- PageBannerExperimentalA full-width notice strip under the top navigation.Molecule · Feedback
- InfoHint, HoverTip and TipExperimentalExplain-this bubbles: an ⓘ that opens on hover or tap, and tooltips for chips and controls.Atom · Feedback
- ActionMenuExperimentalThe one ⋮ overflow menu for a row or card's actions.Molecule · Actions
- ConfirmDialogExperimentalThe one "Are you sure?" dialog, for actions worth a second look.Organism · Feedback
- ToastExperimentalA short confirmation that drops in under the top navigation.Atom · Feedback
- FilterPillExperimentalA pill that opens a single-choice filter menu, for table toolbars.Molecule · Inputs
- ColumnSortButtonExperimentalA table column header that sorts its rows.Atom · Data
- ColumnFilterMenuExperimentalA table column header that filters its own rows.Molecule · Data
- TagInputExperimentalA text field that turns entries into removable chips.Molecule · Inputs
- DataTableExperimentalThe one table for product data, with its loading skeleton and pager.Organism · Data
- DialogExperimentalA centered dialog for creating or editing a small record. For "are you sure?", use ConfirmDialog.Organism · Overlays
- DrawerExperimentalA right-hand panel for one item's details or a short list, below the top bar.Organism · Overlays
- Bottom sheetExperimentalA panel that slides up from the bottom of a phone: where pickers and filters open below 768px.Molecule · Overlays
- StatBoxExperimentalOne number with its label and an optional explanation, for dashboards and profiles.Molecule · Data
How components are organized
The handbook follows Atomic Design (Brad Frost), as Oration's Canon does: small parts combine into bigger ones, and the levels say how big a part is. Every component page shows its lineage: what it's built from and where it's used.
| Level | What it is | In the handbook |
|---|---|---|
| Atoms | The smallest parts. Split one up and it stops being useful. | Button, Tag, Switch, SearchInput |
| Molecules | A few atoms working together as one unit, doing one job. | ButtonGroup, ActionMenu, StatBox, Tabs |
| Organisms | A complete piece of a screen, made of molecules and atoms. | DataTable, Dialog, ConfirmDialog, Drawer |
| Templates | A page shape: where the organisms go, with placeholder content. | The Templates section (Card dashboard, Record page…) |
| Pages | A template with real content: what people actually see. | Real app screens, on each app's page (Bridge OS) |
- It isn't a sequence. Work on the part and the whole together: a page with real content (a very long name, an empty list) often shows that an atom needs to change.
- Utilities (DataState) sit outside the levels: shared behavior with little look of its own.
- Deciding a level: if it does one thing and can't be split, it's an atom. If it combines a few atoms for one job, a molecule. If it's a whole section of a screen, an organism.
Statuses
Every component has a status that says how safe it is to build on. A component moves up when it meets the next status's conditions.
Experimental
In the package with a handbook page, but no app uses it from the package yet. Its API may still change.
- It's in @brdgapp/ui, on Bridge tokens, with data-slot names and named exports.
- Its handbook page has a summary, live examples and an API table.
Beta
Used from the package on at least one real screen. Safe to adopt; changes are announced in the changelog.
- At least one screen in one Bridge app imports it from @brdgapp/ui.
- Every guidance section is written (the build checks this).
- Its known gaps are listed.
Stable
Shared across Bridge. Its API only grows: nothing is renamed or removed without going through Deprecated first.
- Used from the package in two or more places, or by a second app (the sharing rule, decided 2026-11-02).
- Checked with a keyboard and a screen reader, in light and dark, at 390px and 1440px.
- Every guidance section is written, and no known gap affects accessibility.
Deprecated
Being replaced. Don't use it in new work.
- Its page names the replacement and the version it will be removed in.
Today every component is Experimental: no Bridge app imports them from the package yet. Bridge OS’s move onto the package is ready in a merge request; once it’s merged, the components it uses become Beta.
Rules
One of each
Bridge has one button, one label, one menu, one tooltip, one confirm dialog and one table. Before building a control, look for it here. Never hand-make a second version (a <button> with pill classes, a <span> chip, a new kebab), even if it looks the same today: copies drift.
Fix the system first
If the system can't express something a screen genuinely needs, extend the component (a new size, a new option) and document it in the same change, then use it. Never work around a gap at the call site. A 1–2px change from the old design is the expected cost of joining the system, not a reason to stay hand-made.
Not decided yet
Until these are settled, follow Bridge OS as it is today.
- The status criteria below are a proposal (2026-11-02), waiting for Aman's approval.
Sources
- The registry (
registry/pages.ts), read when the page builds. - Status criteria:
registry/statuses.ts, adapted from Oration's lifecycle method and Bridge's sharing rule. - Brad Frost, Atomic Design (atomicdesign.bradfrost.com), chapters 2 and 3: the five levels, part and whole, pattern lineage.