Getting started / Usage

Usage

Wrap your application once in BootstrapStyledProvider, then use any component anywhere below it. The provider injects the base styles and makes the theme available.

Wrap your app

The provider belongs at the root of your tree — typically your top-level App component or layout. Render it once; everything below it can use the library.

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

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

The provider does three things: it injects the global reset and the --bs-* design tokens, it makes the theme available to every styled component, and it establishes the data-bs-theme scope that drives dark mode.

A live example

Every component below is a real, hydrated @metatoy/bootstrap-styled component rendered inside a provider — press Show code to see the exact source.

Provider props

• theme — a full theme object (from createTheme). Omit it to use the Bootstrap defaults.
• colorMode — 'light' or 'dark'; applied as data-bs-theme on the provider wrapper. See Dark mode.
• noGlobalStyles — skip injecting the global reset and token block. Use this only when another BootstrapStyledProvider already injected them (e.g. a nested provider that only re-scopes the color mode).

One provider, or several

You normally render a single provider at the root. You can nest another provider to re-scope the theme or color mode for a subtree — for example, a permanently-dark panel inside a light app:

<BootstrapStyledProvider>
<Header />
{/* This region is always dark, regardless of the app's mode */}
<BootstrapStyledProvider colorMode="dark">
  <CommandPalette />
</BootstrapStyledProvider>
</BootstrapStyledProvider>

Server-side rendering

For SSR frameworks, collect styled-components’ server stylesheet as usual with ServerStyleSheet — bootstrap-styled adds no extra step. In app-router / islands setups, render the provider in a client boundary so its styles hydrate on the client.