Component primitive

Brand Details

<brand-details> gives each disclosure a visible chevron, full-row keyboard target, and a clear expanded state. Use it for supporting content, not primary actions.

<brand-details>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-details>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Basic

brandOS is the single source of truth for tokens, guidelines, and UI components across every Snyder app and portal. It publishes its own component library and documents the allowed tokens that AI assistants can emit.

Add "@brandos/ui": "workspace:*" to your package.json, then import component modules (@brandos/ui/components/brand-button) to register the custom elements. Use the <brand-*> tags in your markup.

Yes. All components are native custom elements with a shadow DOM. See the README for per-framework integration notes, React 19 handles them natively, earlier versions need minor JSX type declarations, and Angular needs CUSTOM_ELEMENTS_SCHEMA.

Rich summary

Advanced settingsOptional workspace controls

Set the open attribute to render with the panel already expanded. Rich summary content can add context without making the trigger hard to scan.

Disabled

Disabled panels don't respond to clicks or keyboard activation.

Usage

import { BrandDetails } from '@brandos/ui';

<brand-details summary="Advanced settings">
  <p>Body content here.</p>
</brand-details>

<brand-details summary="Open on load" open>
  <p>Defaults visible.</p>
</brand-details>