FreeVue typography components
Typography components give text a consistent rhythm: headings, prose blocks, blockquotes, inline code and lists. These Vue 3 components set sensible line lengths, spacing and sizes with Tailwind CSS 4.
They are written with <script setup lang="ts">, support class-based dark mode and have no dependencies besides vue. Use them for articles, docs or any page where reading comfort matters.
Free
FreeComponent · Typography
Title
Adds headings such as h1, h2, and others. The heading level can be adjusted through properties.
Good to know
Building typography that hold up
- Limit line length
- Around 60 to 75 characters per line is comfortable to read. The max-w-prose or max-w-[65ch] utilities keep paragraphs in that range.
- Make the heading level a prop
- A heading component should let you choose the element (h1 to h6) separately from its visual size, so the document outline stays correct wherever it is used.
- Style rendered Markdown in one place
- When rendering Markdown or CMS HTML with v-html, style descendants from a single wrapper using Tailwind arbitrary variants like [&_h2]:text-2xl. Only use v-html with trusted or sanitized content.
- Tune dark mode text
- Pure white on pure black is harsh for long reading. Slightly muted text such as dark:text-zinc-300 on a dark gray background is easier on the eyes.
FAQ
Questions
Do I need the Tailwind typography plugin?
No. These components style text with regular Tailwind CSS 4 utilities, so they work without any plugin.
How do I install a typography component?
Every item is a plain Vue 3 single-file component with no dependencies besides vue. Install it with npm from its vueplay.com/npm tarball URL, or copy the source straight into your project.