Components
Find a library unit, preview it live, then copy markup. Django and HTML first; React and Vue early on the same bw-* contract.
Start with a live Free specimen: Button
Find a component
84 components available.
Core
- Account menuA native disclosure for account and session actions in the shell top bar.
- AlertA page-level status banner announced when it enters the page.
- Article metaAn editorial byline combining author, publication date, reading time, and topic links.
- AvatarA person portrait that renders an image or named initials fallback.
- Avatar groupAn overlapping row of avatars with computed overflow count.
- BadgeA compact label for neutral or low-emphasis status metadata.
- BreadcrumbsA semantic trail from a higher-level location to the current page.
- Bulk actions barAn extendable action region for selected rows in a data table.
- ButtonA validated button or link-button with loading, disabled, icon, and submit-value support.
- Button groupA compact attached or segmented set of related buttons.
- CalloutAn editorial note that belongs to the document content.
- CardThe elevated composition surface for grouped content.
- Chart cardCard chrome for a consumer-owned chart engine and its accessible data fallback.
- Chart data tableA validated semantic table fallback for the series shown by a chart.
- ChipA compact filter or applied-state label that can be selected, linked, or removed.
- CodeA labelled, scrollable code panel with optional copy enhancement.
- ComboboxA progressively enhanced filterable select that keeps a native select as the submitted control.
- Comparison tableA semantic feature-comparison table with responsive stacked rows.
- Data tableA structural data table with optional selection, sorting, empty state, and responsive modes.
- Date picker chromeAccessible structural chrome around a consumer-owned date-picker control.
- DisclosureA native details/summary disclosure for optional content.
- DividerA simple structural separator between related content groups.
- DropdownA menu-button dropdown with a native disclosure floor and enhanced keyboard menu behaviour.
- DropzoneFile-upload field chrome that enhances a real file input with drag feedback.
- Empty stateA purposeful no-data or no-results state with optional recovery action.
- Filter barA GET filter form that progressively enhances to htmx swaps when configured.
- GaugeA server-calculated SVG gauge for one value within a fixed range.
- Input groupA field-control wrapper with leading or trailing text or icon addons.
- List itemA reusable media-list row with title, supporting facts, optional image, and trailing controls.
- ModalAn edge-independent modal dialog with a full-page fallback.
- Page headerA page h1 with description, action and navigation slots.
- PagerPrevious and next links for a sequential document.
- PaginationPagination navigation for a Django Page or compatible object.
- Preview frameA guarded viewport for live UI specimens.
- ProgressA determinate or indeterminate progress bar.
- Ranked listAn ordered, proportional leaderboard or top-N breakdown.
- ScorecardA responsive dashboard grid for pre-rendered cards.
- SearchA topbar GET search form with optional scope chip.
- Site footerShared public-site footer landmark with content and legal slots.
- Site headerShared public-site header with brand, primary navigation and action slots.
- SkeletonA labelled loading placeholder group.
- Slide overAn edge-anchored dialog with a full-page fallback.
- SparklineAn inline SVG trend line with an accessible text summary.
- SpinnerAn indeterminate activity indicator.
- StatA KPI tile with value, optional comparison and optional sparkline.
- Stat comparisonA compact before-and-after metric comparison.
- StepperA multi-step progress/navigation indicator.
- TabsA validated tablist with server-owned active selection.
- Tag inputA comma-separated tag field enhanced into removable chips.
- Theme switchA client-side root theme, density, direction and optional brand axis control.
- ToastA server-rendered transient outcome notification.
- Toast regionA live region and stack target for server-rendered toasts.
- TocA documentation “On this page” navigation.
- ToggleA standalone native checkbox styled as a switch.
- Token specimenA live side-by-side display of resolved Brickwork design tokens.
- TooltipA supplementary hover and focus hint with a native-title fallback.
- Trend indicatorA standalone directional metric caption.
- Version switchA documentation-version navigation switcher.
Marketing
- BioA compact author or practitioner strip for an article footer or short about band.
- Case listA ruled list of case studies or results, with optional proof figures and whole-row destinations.
- CtaA full-width closing call-to-action band.
- Cta bleedAn inverse edge-to-edge closing CTA with a primary button and underlined secondary link.
- Cta splitA mid-page CTA with copy and actions in separate columns.
- DirectoryAn ordered package or resource directory with optional mark and metadata column.
- FaqA section wrapper that stacks native disclosure components.
- Feature gridA responsive grid of equal feature cards, optionally linked.
- Feature listA concise ticked list of inclusions.
- Feature rowsAlternating copy-and-media marketing rows.
- HeroThe primary marketing headline block, supporting actions and optional media.
- Logo cloudA trusted-by logo row that renders supplied image sources and alternative text.
- Marketing footer groupsNavigation groups for the marketing shell footer.
- MethodsA quiet two-column presentation of methods or services with optional text links.
- Mobile nav toggleThe native details/summary trigger that reveals marketing shell navigation at narrow widths.
- OutcomesEqual columns of outcome copy with one optional section foot link.
- PortraitA full marketing band introducing a person with real-size portrait, role and actions.
- Pricing comparisonCompatibility include for the core comparison table.
- Pricing tableA responsive wrapper that arranges pricing tiers.
- Pricing tierOne self-contained pricing plan card.
- Product shotAn elevated frame for consumer-owned product stills or clips, with optional light window chrome.
- Proof collageA section that presents live UI as visual proof, in a multi-tile collage or one page stage.
- SectionThe shared structural section shell and layout class contract.
- Section introA convenience include for the public shared section-intro class contract.
- Stat bandA display-scale metric band that forwards records to core stat tiles.
- TestimonialA semantic quote card with optional attribution, avatar and logo.