Marketing Surface

Opt a subtree into the brand's dark warm ground — independent of the page's .dark class.

VegaStack

Always the dark brand ground.

This card sits on a light docs page, but everything inside the marketing surface renders the brand's dark warm ground — independent of the page theme.

Install

Add Marketing Surface from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.

pnpm dlx shadcn@latest add @vegastack/marketing-surface

Usage

import { MarketingSurface } from "@/components/ui/marketing-surface";

<MarketingSurface className="px-6 py-24">
  <h1>Ship agentic UI, fast.</h1>
</MarketingSurface>;

VegaStack's marketing surfaces are dark-first (the warm neutral ramp's dark end — see Colors), but the product is light-primary by default. .dark alone can't express "product stays light, but THIS hero renders dark" on the same page — MarketingSurface re-binds the same semantic custom properties .dark sets (--background, --foreground, --card, --border, --brand, …), scoped to a .vs-marketing class instead of gated on the page-root .dark class. Every token utility inside it — bg-background, text-foreground, border-border, bg-brand, or a composed Button / Badge / Card — resolves correctly with zero code changes.

VegaStack

Always the dark brand ground.

This card sits on a light docs page, but everything inside the marketing surface renders the brand's dark warm ground — independent of the page theme.

Composing a different element

Pass render (Base UI composition) to render a <section> or another host element instead of the default <div>.

Composed as a <section>

<MarketingSurface render={<section />}>…</MarketingSurface>

API Reference

Prop	Type	Default	Description
`render`	`useRender.RenderProp<Record<string, unknown>>`	—	Replace the rendered element via Base UI `render` composition — e.g. `render={<section />}` so a hero band is a real `<section>` landmark. Pass a `ReactElement` or a render function.

Accessibility

Renders a plain <div> (or the composed render element) — no semantics of its own; give it a real landmark (render={<section />}, aria-label, a heading) as appropriate for the content.
Sets color-scheme: dark locally so native form controls and scrollbars inside it render dark-appropriate.

Portaled overlays

Base UI floating surfaces (Dialog, Popover, Menu, Select, Tooltip, …) portal to <body>, outside the surface DOM subtree. VegaStack propagates the active marketing scope through an internal context and applies .vs-marketing to each supported portal root, so those overlays keep the same semantic dark values without consumer classes. This plumbing is internal; consumers still compose the normal overlay APIs.

Contract	States tested
Behaviour	`default`
Accessibility	`semantic-html`
Visual	`default`

Do / Don't

Wrap a marketing hero or section band in MarketingSurface so it stays dark even when the surrounding product page is light.

Don't

Add hardcoded dark colors to descendants or portal content — semantic tokens and the propagated scope already provide the correct theme.