Typed, declarative building blocks so pages stop hand-writing Bootstrap markup. Most are Server Components; Dropdown, Carousel, and Offcanvas are driven by the Bootstrap JS bundle.
On this page
- Badge
- Breadcrumb
- Pagination & Stepper
- Spinner
- Avatar / AvatarGroup
- ListGroup
- Table
- Dropdown
- Carousel
- Offcanvas
Badge
Contrast-aware labels via text-bg-*, optionally pill-shaped.
Breadcrumb
Data-driven trail; the last item renders as the active page.
Pagination & Stepper
Both are controlled. Pagination renders buttons when given onPageChange; Stepper marks earlier steps complete.
Page 3 of 12
- AccountYour details
- ProfileSet up profile
- BillingPayment method
- DoneAll set
Spinner
Border and grow variants with an accessible status label.
Avatar / AvatarGroup
Image or initials fallback, optional presence dot, and overlapping groups.
OBSK
+5ListGroup
ListGroupItem becomes an <a>, <button>, or <div> based on its props.
Table
Declarative table driven by columns + data with custom cell renderers.
| Name | Role | Status |
|---|---|---|
| Olivia Bennett | Design Lead | Active |
| Marcus Reyes | Engineer | Active |
| Sara Khan | PM | Invited |
Dropdown
Bootstrap dropdown with items, dividers, headers, and a split variant.
Carousel
Bootstrap carousel — pass a unique id; controls and indicators are built in.
Offcanvas
A slide-in panel. Pair OffcanvasTrigger (or any data-bs-toggle element) with an Offcanvas by id.
Settings
Offcanvas panels are great for filters, details, and mobile navigation.