React wrapper components for BILD Design System
npm install @marioschmidt/design-system-react> Part of the BILD Design Ops Pipeline | Components | Vue
React wrapper components for the BILD Design System, auto-generated from Stencil Web Components using @stencil/react-output-target.
---
``bash`
npm install @marioschmidt/design-system-react @marioschmidt/design-system-tokens
Peer Dependencies:
- react >= 17react-dom
- >= 17@marioschmidt/design-system-components
- ^1.0.0 (optional, auto-loaded)
---
`tsx
import { DsButton, DsCard } from '@marioschmidt/design-system-react';
import '@marioschmidt/design-system-tokens/css/bundles/bild.css';
function App() {
return (
Card content goes here.
$3
tsx
import { DsButton, DsCard } from '@marioschmidt/design-system-react';
import '@marioschmidt/design-system-tokens/css/bundles/bild.css';function ThemeProvider({ children, colorBrand, contentBrand, theme, density }) {
return (
data-content-brand={contentBrand}
data-theme={theme}
data-density={density}
>
{children}
function App() {
return (
);
}
`
---
| Component | Props | Description |
|-----------|-------|-------------|
| DsButton | variant, disabled | Interactive button with hover/active states |surface
| DsCard | , cardTitle | Content container with shadow and padding |
`tsx`
Props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | Button style variant |disabled
| | boolean | false | Disabled state |
` Card contenttsx
Secondary surface card
`
Props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| surface | 'primary' \| 'secondary' | 'primary' | Card surface variant |cardTitle
| | string | - | Optional card title |
---
Components automatically adapt to design tokens via CSS Custom Properties.
Set these on a parent element (usually
or a wrapper div):| Attribute | Values | Purpose |
|-----------|--------|---------|
|
data-color-brand | bild, sportbild | Colors & effects |
| data-content-brand | bild, sportbild, advertorial | Typography & spacing |
| data-theme | light, dark | Color mode |
| data-density | default, dense, spacious | Spacing density |$3
`tsx
function App() {
const [theme, setTheme] = useState('light'); return (
Themed Button
);
}
`---
How It Works
1. Stencil builds Web Components with Shadow DOM
2. React output target generates wrapper components during build
3. Wrappers use
to lazy-load the actual Web Component
4. CSS Custom Properties inherit through the Shadow DOM for themingThe React wrappers provide:
- Full TypeScript support with proper prop types
- React event handling (
onClick, onChange, etc.)
- Ref forwarding to the underlying Web Component
- Tree-shakeable imports---
TypeScript
Full TypeScript support is included:
`tsx
import { DsButton, DsCard } from '@marioschmidt/design-system-react';
import type { JSX } from '@marioschmidt/design-system-components';// Props are fully typed
const buttonProps: JSX.DsButton = {
variant: 'primary',
disabled: false,
};
``---
| Package | Description |
|---------|-------------|
| @marioschmidt/design-system-components | Core Stencil Web Components |
| @marioschmidt/design-system-vue | Vue 3 wrapper components |
| @marioschmidt/design-system-tokens | Design tokens (CSS, JS, iOS, Android) |
---
MIT