Bootstrap 5, rebuilt in styled-components.

Every Bootstrap 5.3 component, in styled-components — themeable at runtime. A live --bs-* token surface, CSS-in-JS, TypeScript, dark mode, pixel-verified against Bootstrap 5.3.8.

npm i @metatoy/bootstrap-styled

Get started Components

Everything Bootstrap, none of the CSS files.

Full Bootstrap 5.3.8 parity

All 34 modules, pixel-verified against a vendored Bootstrap 5.3.8 oracle.

Runtime `--bs-*` theming

Override any Bootstrap CSS variable at runtime; every component tracks it live.

`<Box>` utilities API

Bootstrap's utility classes as typed, ergonomic React props.

`<Icon/>` + Bootstrap Icons

The full tree-shakeable BsIcon* set, ready to drop in.

First-class dark mode

A single provider prop flips the whole --bs-* surface.

Accessible by default

Semantic markup, focus rings, and ARIA where Bootstrap specifies it.

tsx

import { Alert, Button, Badge } from '@metatoy/bootstrap-styled';

export function Example() {
  return (
    <>
      <Alert variant="success">Settings saved.</Alert>
      <Button variant="primary">Save changes</Button>
      <Button variant="outline-secondary">Cancel</Button>
      <Badge variant="success">New</Badge>
    </>
  );
}

Real components, rendered live — the same package you install.