Skip to main content
Brand
Changelogv0.44

Usage and adapters

Start with <brand-*> components. Web Awesome, DaisyUI, and MUI are secondary integration paths that consume the same brandOS tokens when a product stack needs them.

Choose a path

There is one design system and one primary component API. The adapter you choose only changes how a view consumes the shared tokens.

recommended

Brand components

Use the governed <brand-*> API for framework-agnostic product UI.

See usage
escape hatch

Web Awesome

Use a token-themed Web Awesome primitive when a Brand wrapper does not exist yet.

See usage
tailwind

DaisyUI

Use semantic DaisyUI classes for CSS-first surfaces that do not need custom elements.

See usage
react

MUI

Use the brandOS MUI theme provider for React surfaces already built on Material UI.

See usage

Brand components

This is the default path. The custom element owns the public API, accessibility defaults, and mapping to its internal primitive.

Save changesSave draftDelete
import '@brandos/tokens/css/global';
import '@brandos/tokens/css/snyder';
import '@brandos/tokens/css/webawesome';
import '@brandos/ui/components/brand-button';

<brand-button variant="primary">Save changes</brand-button>

Web Awesome adapter

Brand components use Web Awesome internally. Use a direct <wa-*> primitive only when the Brand catalog does not provide the capability yet, then keep it inside the same token scope.

Save changesSave draftDelete
import '@brandos/tokens/css/global';
import '@brandos/tokens/css/snyder';
import '@brandos/tokens/css/webawesome';
import '@awesome.me/webawesome/dist/components/button/button.js';

<section data-brand="snyder" data-theme="light">
  <wa-button variant="brand">Save changes</wa-button>
</section>

DaisyUI adapter

DaisyUI is the CSS-first path. Its semantic classes resolve through brandOS tokens, so the markup stays portable while the active brand controls the visual result.

import '@brandos/tokens/css/global';
import '@brandos/tokens/css/snyder';
import '@brandos/tokens/css/daisyui';

<section data-brand="snyder" data-theme="light">
  <button class="bos:dui-btn bos:dui-btn-primary">Save changes</button>
</section>

MUI adapter

MUI is the React-specific path. Wrap the existing Material UI surface with the brandOS theme provider so palette, typography, radius, and states resolve from the same tokens.

import '@brandos/tokens/css/global';
import '@brandos/tokens/css/snyder';
import '@brandos/tokens/css/mui';
import Button from '@mui/material/Button';
import { ThemeProvider } from '@mui/material/styles';
import { createBrandOsMuiTheme } from '@brandos/tokens/css/mui-theme';

const theme = createBrandOsMuiTheme();

<ThemeProvider theme={theme}>
  <Button variant="contained" color="primary">Save changes</Button>
</ThemeProvider>

Brand scope

A generic <brand> wrapper is not required. Apply data-brand anddata-theme to the document or a scoped container, then use the component path that fits the view.

<main data-brand="snyder" data-theme="light">
  <brand-button variant="primary">Brand component</brand-button>
  <wa-button variant="brand">Web Awesome primitive</wa-button>
  <button class="bos:dui-btn bos:dui-btn-primary">DaisyUI class</button>
</main>