Typography

ShadcnBlazor does not ship a dedicated typography component. Instead, we encourage using Tailwind CSS utility classes directly for text styling.

Many component libraries include typography components (e.g. Typography, Text, Heading) that wrap text with predefined styles. ShadcnBlazor takes a different approach: use Tailwind's typography utilities directly on your markup. This keeps your markup simple, avoids unnecessary wrapper components, and gives you full control over styling.

Using Tailwind for Typography

Tailwind provides a rich set of typography utilities. Here are common patterns:

Headings

Use text-* for size and font-* for weight. Combine with tracking-* for letter-spacing and leading-* for line-height.

Heading 1

Heading 2

Heading 3

Body text with muted color.

Smaller text for captions or secondary content.

<div class="flex flex-col gap-2">
    <h1 class="text-3xl font-bold">Heading 1</h1>
    <h2 class="text-2xl font-semibold">Heading 2</h2>
    <h3 class="text-xl font-medium">Heading 3</h3>
    <p class="text-base text-muted-foreground">Body text with muted color.</p>
    <p class="text-sm text-muted-foreground">Smaller text for captions or secondary content.</p>
</div>

Muted and Accent Text

Use text-muted-foreground for secondary text and text-foreground for primary content. These respect your theme's semantic colors.

Primary foreground text.

Muted text for less emphasis.

Accent/primary colored text.

<div class="flex flex-col gap-2">
    <p class="text-foreground">Primary foreground text.</p>
    <p class="text-muted-foreground">Muted text for less emphasis.</p>
    <p class="text-primary">Accent/primary colored text.</p>
</div>

Lists and Links

Style lists and links with standard Tailwind classes. Use underline, hover:underline, and text-primary for links.

First item
Second item
Third item

Link example

<div class="flex flex-col gap-2">
    <ul class="list-disc list-inside space-y-1 text-sm">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <a href="#" class="text-primary hover:underline">Link example</a>
</div>

Why No Typography Component?

A dedicated typography component adds indirection without clear benefit. Tailwind's utilities are composable, tree-shakeable, and work directly in your Razor markup. You avoid prop drilling (e.g. Variant="body1") and keep styling co-located with content.

If you need consistent typography scales across your app, define them in your Tailwind config or use @layer components in your CSS. ShadcnBlazor's design tokens (--foreground, --muted-foreground, etc.) already support theming.