@hex-core/preview

Install

pnpm add @hex-core/preview

What it does

`@hex-core/preview` is a tiny demo-surface helper. It exports `<DemoSurface>`, the elevated container the official docs site uses to wrap component previews so Outline / Secondary buttons read against an off-white background instead of a flat-white page.

Hex UI's tokens are deliberately subtle — `--border` and `--input` sit close to `--card` to avoid heavy mid-grays. That choice looks great on already-elevated surfaces (Card, Popover, Dialog) but washes out on a plain page background. `<DemoSurface>` reproduces the official preview's elevation in one component so consumers' showcase pages match the docs site visually.

This package is optional. If you're building a marketing site or a production app, you don't need it. If you're authoring component demos for your own design system or internal docs, drop a `<DemoSurface>` around each one and you're done.

Public API

import { DemoSurface } from "@hex-core/preview";

interface DemoSurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
	minHeight?: string;
}

import { DemoSurface } from "@hex-core/preview";
import { Button } from "@hex-core/components";

export function ButtonShowcase() {
	return (
		<DemoSurface>
			<Button variant="outline">Visible against the surface</Button>
		</DemoSurface>
	);
}

Workflows

import { DemoSurface } from "@hex-core/preview";
import { Button, Grid } from "@hex-core/components";

export function VariantShowcase() {
	return (
		<DemoSurface minHeight="240px">
			<Grid cols={3} gap="3">
				<Button>Default</Button>
				<Button variant="outline">Outline</Button>
				<Button variant="secondary">Secondary</Button>
			</Grid>
		</DemoSurface>
	);
}

Compatibility

• Peer deps: `react ^18 || ^19`, `react-dom ^18 || ^19`.
• Assumes the consumer's app already loads the Hex UI token CSS — utilities like `bg-muted` need to resolve.
• Pure React component; no Radix dependency, no portal usage.

See also

• GitHub source ↗
• @hex-core/components
• Theming guide