Typography

Vue typography styles for headings, paragraphs, lists, and prose with responsive defaults.

Show code

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/typography.json

      
      npx shadcn-vue@latest add https://vuzeno.com/r/typography.json

      
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/typography.json

      
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/typography.json

Usage

Import the Typography namespace and compose text elements with opinionated, responsive defaults:

      
      <script setup lang="ts">
import { Typography } from "@/components/ui/typography";
</script>

<template>
  <Typography.H1>Page title</Typography.H1>
  <Typography.Lead>A short introduction below the title.</Typography.Lead>
  <Typography.Paragraph>Body copy with comfortable line height.</Typography.P>
</template>

Composition

      
      Typography
├── H1, H2, H3, H4
├── P
├── Blockquote
├── List
├── InlineCode
├── Lead, Large, Small, Muted
└── TableContainer
    └── Table
        ├── TableRow
        ├── TableHead
        └── TableCell