Get started
Data display
Data entry
General
Layout
Navigation
Blocks
Packages
A specimen of a font file at several sizes, one row per size, loaded through an @font-face scoped to the instance.
36The quick brown fox jumps over the lazy dog
24The quick brown fox jumps over the lazy dog
18The quick brown fox jumps over the lazy dog
14The quick brown fox jumps over the lazy dog
tsx
1
2
3import type { ReactNode } from 'react';
import { FontPreview } from '@/registry/bases/base-ui/components/data-display/font-preview';Installation#
bash
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/font-preview.jsonUsage#
tsx
import { FontPreview } from '@/components/data-display/font-preview';tsx
<FontPreview src={fontUrl} />The consumer places and pads its wrapper; it renders one row per size, largest first. Use it to compare a font file's weights before shipping it; for a previewed image rather than type, use Image Preview.
API reference#
FontPreview#
Renders a div and takes every prop a div takes, plus:
| Prop | Type | Default |
|---|---|---|
src | string | required |
format | string | - |
sizes | number[] | [36, 24, 18, 14] |
children | ReactNode | 'The quick brown fox jumps over the lazy dog' |
format is derived from src's extension when omitted. It scopes a unique @font-face to the instance, so
several previews on one page never collide, and sets data-slot="font-preview".