Text
A flexible typography component for rendering body text with consistent sizing, weight, and tone.
Keep your team in sync
Every update, comment, and file lives in one shared workspace so nobody has to ask "where is that?" again.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/text.jsonUsage
Use Text instead of raw <p>/<span> tags to keep body copy consistent across the app. Change
the rendered element with as (or render as a child via as-child) while keeping the same
size/weight/tone/align scale.
<script setup lang="ts">
import { Text } from "@/components/ui/text";
</script>
<template>
<Text size="lg" weight="semibold" tone="muted">
The quick brown fox jumps over the lazy dog.
</Text>
</template>
size, weight, tone, and align are driven by class-variance-authority variants; import
TEXT_SIZES, TEXT_WEIGHTS, TEXT_TONES, or TEXT_ALIGNMENTS from the same module to iterate
over the available options.