Preview

Installation

npx sigma-ui@latest add typography

Usage

variant picks the style and the element. h1 renders an h1, list renders a ul, and link renders an a. Pass as when the element should differ from that default. The class-only samples on the typography guide are the same styles, applied by hand.

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

<template>
  <Typography variant="h1">
    The Joke Tax Chronicles
  </Typography>
  <Typography variant="p">
    Once upon a time, in a far-off land.
  </Typography>
  <Typography
    variant="link"
    href="#"
  >
    A brilliant plan
  </Typography>
</template>

Examples

Article

API Reference

Typography

Props

Prop	Type	Default
variant Text style. Also chooses the element when as is omitted.	"h2" | "h3" | "p" | "link" | "small" | "code" | "muted" | "h1" | "h4" | "blockquote" | "list" | "lead" | "large" | "table" | null	"p"
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Text or other content for this style.	-

Accessibility

Use the heading variants in order. h1 through h4 render those heading elements, so the page outline stays intact. as can change the element without changing the look; keep the element and the heading level in agreement.

Key	Description
Tab	Moves focus to a link. Other variants are not focusable.