Components

Built-in MDX components for composing Brandtree brand websites.

Start with a live preview, copy the minimal Usage example, then explore the variations and API reference. Previews use the included sample brand; each Code tab shows the MDX for its displayed example. Use the site’s theme control to compare light and dark.

How components receive your brand

Brandtree makes the 28 components in this reference available by name in content MDX. You do not need imports or shared props: built-ins automatically receive the resolved brand, interface strings, and text direction for the current page. This also works for built-ins nested inside other components in your MDX.

<Logo />
<ColorPalette />
<Glyphs />

Override a value for one component

Pass brand, ui, or dir explicitly when a specimen needs a different value. Your prop takes precedence over the page’s value for that component. Overrides replace the supplied object; they are not deep-merged. Spread the page value when changing only part of it:

<Callout ui={{ ...props.ui, content: { ...props.ui.content, note: "Design note" } }}>

Keep the original proportions.

</Callout>

<Glyphs dir="rtl" />

props.brand, props.ui, and props.dir remain available for expressions, selectors, and custom components. An override affects only the component that receives it; it does not change the page or nested components’ defaults.

Automatic shared props apply to built-ins rendered in Brandtree content MDX. Custom components still need explicit inputs. Inside an Astro component, import built-ins and pass the values they require; MDX does not inject props into an Astro template. See Custom components.

All component examples belong in a Brandtree content .mdx file. Import statements go after YAML frontmatter. Strings use quotes; numbers, booleans, objects, and arrays use braces. A self-closing component has no children; a paired component wraps prose or other components. Leave blank lines around Markdown inside paired tags so paragraphs and lists are parsed correctly. See Pages and MDX for complete page examples and Astro’s MDX guide for the underlying syntax.

The API tables describe authoring in Brandtree MDX. Shared brand, ui, and dir props are optional overrides with page-level defaults. Props listed as required still need an authored value. All components accept an optional class string except ColorSwatch. A class adds a hook to the outer element; it does not add arbitrary HTML props or inline styles to the public API.

Component selectors refer to configured IDs, not display labels, unless explicitly stated. Use Configuration to define brand data, and Media for image imports, SVGs, and downloadable files.

Layout and prose

Logo system

Color

Typography

Voice and audience

Asset collections

Custom components and layouts

See Custom components for custom components and prop forwarding, and Styling and tokens for CSS, local scrolling, and theme support. Keep structured brand facts in configuration and editorial explanations in MDX.

CoverPage and SectionOpener are internal layout components, not built-in MDX names. The generated runtime owns the site shell, navigation, theme controls, and cover composition. Do not add application routes or edit generated .brandtree/ files to use the authoring components.