Typography

bun x bosia@latest add typography

Thin wrappers around semantic HTML elements with consistent Tailwind styling. Import individual components instead of memorizing class strings.

Preview

The King's Plan

The king, seeing how much happier his subjects were, decided to tax jokes. "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

The Joke Tax

The king's subjects were not amused. They grumbled and complained, but the king was firm. "I need the money," he said. He began to tax jokes at a rate of 1 gold coin per joke.

1st level of puns: 5 gold coins

2nd level of jokes: 10 gold coins

3rd level of one-liners: 20 gold coins

People stopped telling jokes

The people of the kingdom realized that the joke tax was an unjust burden. They began to speak in whispers, afraid that their words would be taxed next.

Aren't you glad this isn't real?

This story is entirely fictional.

Written for demonstration purposes only.

Props

All typography components share the same props:

Prop	Type	Default
`class`	`string`	`""`

All components also spread ...restProps onto their root element.

Components

Component	Element	Description
`TypographyH1`	`<h1>`	Page heading
`TypographyH2`	`<h2>`	Section heading
`TypographyH3`	`<h3>`	Sub-section heading
`TypographyH4`	`<h4>`	Minor heading
`TypographyP`	`<p>`	Paragraph
`TypographyBlockquote`	`<blockquote>`	Block quote
`TypographyList`	`<ul>`	Unordered list
`TypographyInlineCode`	`<code>`	Inline code
`TypographyLead`	`<p>`	Lead paragraph
`TypographyLarge`	`<div>`	Large text
`TypographySmall`	`<small>`	Small text
`TypographyMuted`	`<p>`	Muted text

Usage

<script lang="ts">
	import {
		TypographyH1,
		TypographyP,
		TypographyLead,
		TypographyInlineCode,
		TypographyMuted,
	} from "$lib/components/ui/typography";
</script>

<TypographyH1>My Page Title</TypographyH1>
<TypographyLead>A brief introduction to the page.</TypographyLead>
<TypographyP>
	Use <TypographyInlineCode>bun x bosia@latest add typography</TypographyInlineCode> to install.
</TypographyP>
<TypographyMuted>Last updated today.</TypographyMuted>