Heading
A polymorphic heading element with configurable level, size, weight, and tone.
Design System Starter
Build consistent interfaces faster
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/heading.jsonUsage
Use heading to keep visual size decoupled from semantic level — pick the level (1–6) that's
correct for document structure, and the size, weight, and tone that fit the design.
<script setup lang="ts">
import { Heading } from "@/components/ui/heading";
</script>
<template>
<Heading :level="1" size="xl" tone="brand">Design System</Heading>
</template>