ComponentsSpecimen
Font Showcase
A card displaying a font family with its name, role, hero glyph, and weight specimens.
Default
Renders a font specimen card with a hero glyph and weight samples.
The quick brown fox jumps
Regular
400The quick brown fox jumps
Medium
500The quick brown fox jumps
Bold
700Monospace Font
Show a monospace font family specimen.
The quick brown fox jumps
Regular
400The quick brown fox jumps
Bold
700Installation
npx visor add font-showcaseThis copies two files into your project:
components/ui/font-showcase/font-showcase.tsx— the componentcomponents/ui/font-showcase/font-showcase.module.css— the styles
Usage
import { FontShowcase } from '@/components/ui/font-showcase/font-showcase';
<FontShowcase
token="--font-heading"
role="Heading & Body"
familyName="Satoshi"
weights={[
{ label: 'Regular', value: 400 },
{ label: 'Medium', value: 500 },
{ label: 'Bold', value: 700 },
]}
/>API Reference
FontShowcaseProps
No props data available for “font-showcase”.
Accessibility
- Font specimens are presentational — they display typography samples for reference.
- Weight labels provide context for each specimen row.
- The hero glyph uses a large font size for visual impact but carries no semantic meaning.