Components
Loading preview...
@edwinvakayil
npx shadcn@latest add https://21st.dev/r/edwinvakayil/typography"use client";
import {
Typography,
TYPOGRAPHY_GROUPS,
TYPOGRAPHY_VARIANT_META,
TYPOGRAPHY_SAMPLE_TEXT,
} from "@/components/ui/typography";
export default function TypographyDemo() {
return (
<div className="mx-auto max-w-3xl space-y-12 py-10">
<div>
<Typography variant="h4">Scale</Typography>
</div>
{TYPOGRAPHY_GROUPS.map((group) => (
<div key={group.label} className="space-y-10">
<Typography
variant="subheading-xs"
className="uppercase text-muted-foreground"
>
{group.label}
</Typography>
{group.variants.map((variantKey) => {
const meta = TYPOGRAPHY_VARIANT_META[variantKey];
return (
<div
key={variantKey}
className="space-y-4 border-b border-border pb-10"
>
<Typography
variant="paragraph-sm"
className="text-muted-foreground"
>
{meta.label}
</Typography>
<Typography variant={variantKey}>
{TYPOGRAPHY_SAMPLE_TEXT}
</Typography>
<div className="grid grid-cols-4 gap-4 pt-2">
<div>
<Typography
variant="subheading-2xs"
className="uppercase text-muted-foreground"
>
Weight
</Typography>
<Typography variant="paragraph-sm">
{meta.weight}
</Typography>
</div>
<div>
<Typography
variant="subheading-2xs"
className="uppercase text-muted-foreground"
>
Font Size
</Typography>
<Typography variant="paragraph-sm">
{meta.fontSize}
</Typography>
</div>
<div>
<Typography
variant="subheading-2xs"
className="uppercase text-muted-foreground"
>
Line Height
</Typography>
<Typography variant="paragraph-sm">
{meta.lineHeight}
</Typography>
</div>
<div>
<Typography
variant="subheading-2xs"
className="uppercase text-muted-foreground"
>
Letter Spacing
</Typography>
<Typography variant="paragraph-sm">
{meta.letterSpacing}
</Typography>
</div>
</div>
<code className="block text-sm text-muted-foreground">
{"<Typography variant=\"" + variantKey + "\">"}
</code>
</div>
);
})}
</div>
))}
</div>
);
}