These examples use the RAGBAZ sub-theme direction with Intel One Mono for command/data surfaces and a clean neo-grotesque layer for readable prose. The font chooser provides MDX-safe components that let documentation pages show live font specimens, compare families, and explain variable axes.

Live Theme Deck​

The theme deck lets readers switch between four background surfaces and see how font specimens read in each context.

Click a theme card to update the specimen. Each theme controls the background surface for font previews:

Custom Specimens​

The FontChooserSpecimen component accepts theme, family, label, text, and size props, making it suitable for inline use in prose-heavy documentation.

Text Scale Comparison​

Family Matrix​

Use the family matrix when documenting the base pairing rules across the three RAGBAZ font families.

Variable Axis Examples​

For pages that teach variable font controls, use a compact axis strip rather than mounting the full chooser.

Copyable MDX Example​

This component demonstrates how an MDX page can expose an interactive sample and a copyable import pattern together.

import { FontChooserThemeDeck } from '@ragbaz/bazweave-font/mdx';

<FontChooserThemeDeck active="slate" />

Font Catalog​

The built-in catalog includes 16 Google Fonts across 4 categories:

Import Reference​

import {
  FontChooserThemeDeck,
  FontChooserSpecimen,
  FontChooserFamilyMatrix,
  FontChooserAxisExample,
  FontChooserMdxExample,
} from '@ragbaz/bazweave-font/mdx';