Getting started / TypeScript

TypeScript

Types ship with the package. Every component, prop, variant, and theme field is typed — no @types package and no configuration required.

No setup

The published package includes dist/index.d.ts, and package.json points types at it. Import components and their prop types straight from the entry point:

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

Typed props

Props types are exported alongside their components, so you can extend a component or type a wrapper without redeclaring the API:

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

// A pre-configured button that still accepts every Button prop.
function DangerButton(props: ButtonProps) {
return <Button variant="danger" {...props} />;
}

Union types back the string props, so invalid values are compile errors and editors autocomplete the valid ones:

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

const primary: ButtonVariant = 'primary';         // ok
const outline: ButtonVariant = 'outline-success'; // ok
// const bad: ButtonVariant = 'purple';           // ✗ compile error

<Button variant={primary} size="lg" />;

ButtonVariant is exactly a ColorName or an `outline-${ColorName}` template — where ColorName is the eight Bootstrap contextual colors — so the outline variants are typed for free.

Typed theme

The Theme type describes the entire token surface, and createTheme accepts a DeepPartial<Theme> so overrides are checked but never require the whole object:

import {
BootstrapStyledProvider,
createTheme,
type Theme,
} from '@metatoy/bootstrap-styled';

const theme: Theme = createTheme({
colors: { primary: '#6e2c92' }, // typed against ColorName keys
radius: { base: '0.5rem' },
});

<BootstrapStyledProvider theme={theme}>{/* … */}</BootstrapStyledProvider>;

Common exported types

Each component also exports its own XxxProps interface (AlertProps, CardProps, ModalProps, …), extending the matching native element attributes.