Introduction

bootstrap-styled is a full Bootstrap 5.3 component suite rebuilt in styled-components — theme-driven, tree-shakeable, and TypeScript-first. A modern rewrite of bootstrap-styled/v4.

Every Bootstrap component ships as a real React component with a typed props API and the familiar --bs-* design tokens. There is no global CSS import and no class-name soup — you compose components and pass props.

Why bootstrap-styled

Bootstrap 5.3.8 parity. The full component set — layout, forms, and 24 interactive components — matched against upstream Bootstrap, look and behavior.
Real components, real props. <Button variant="primary" size="lg" />, not className="btn btn-primary btn-lg". Typed, discoverable, refactor-safe.
styled-components under the hood. Styles are scoped and injected with each component; nothing to import globally, nothing to purge.
Runtime theming. The complete Bootstrap --bs-* custom-property surface is live — override it with a theme object or a plain CSS variable, at build time or at runtime.
First-class dark mode. Flip colorMode on the provider; every component reads the [data-bs-theme] tokens.

When to use it

Reach for bootstrap-styled when you want Bootstrap’s proven design language and component behavior inside a React app, with a typed API and CSS-variable theming instead of a global stylesheet and utility classes. If you are already invested in styled-components (or any CSS-in-JS setup), it drops in without a competing global reset.

Install

bash

npm install @metatoy/bootstrap-styled styled-components

react, react-dom, and styled-components are peer dependencies (React 18+, styled-components 6+).

Quick start

Wrap your app once in BootstrapStyledProvider, then use components anywhere:

tsx

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

export default function App() {
return (
  <BootstrapStyledProvider>
    <Button variant="primary">Get started</Button>
  </BootstrapStyledProvider>
);
}

What’s inside

34 component modules — every Bootstrap 5.3 component, styled and typed.
<Box> utilities — the Bootstrap utility API as ergonomic React props.
<Icon/> — Bootstrap Icons, tree-shakeable.
Theming — createTheme overrides plus the full --bs-* CSS-variable surface.
Dark mode — first-class, via the provider’s colorMode.

Head to the Button page to see the live-example + props-table pattern every component page follows.