npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { Text } from '@thrivecart/ui';All heading variants from 3xl to xs
<div className="flex flex-col gap-2">
<Text variant="heading-3xl">Heading 3XL</Text>
<Text variant="heading-2xl">Heading 2XL</Text>
<Text variant="heading-xl">Heading XL</Text>
<Text variant="heading-lg">Heading LG</Text>
<Text variant="heading-md">Heading MD</Text>
<Text variant="heading-sm">Heading SM</Text>
<Text variant="heading-xs">Heading XS</Text>
</div>Body text sizes for content
<div className="flex flex-col gap-2">
<Text variant="body-lg">Body Large - For introductory text and emphasis.</Text>
<Text variant="body-md">Body Medium - Default body text for most content.</Text>
<Text variant="body-sm">Body Small - Secondary information and captions.</Text>
<Text variant="body-xs">Body Extra Small - Fine print and metadata.</Text>
</div>All-caps text for labels and section headers
<div className="flex flex-col gap-2">
<Text variant="caps-lg">Caps Large</Text>
<Text variant="caps-md">Caps Medium</Text>
<Text variant="caps-sm">Caps Small</Text>
</div>Render as different HTML elements
This renders as a paragraph
This renders as a span<div className="flex flex-col gap-2">
<Text as="h1" variant="heading-xl">This renders as an h1</Text>
<Text as="p" variant="body-md">This renders as a paragraph</Text>
<Text as="span" variant="body-sm">This renders as a span</Text>
<Text as="label" variant="body-sm" fontWeight="medium">This renders as a label</Text>
</div>Text that truncates with ellipsis when too long
This is a very long piece of text that will be truncated
<div className="w-48">
<Text as="p" variant="body-md" truncate>
This is a very long piece of text that will be truncated
</Text>
</div>Use the as prop to render appropriate HTML elements (h1-h6, p, span).
Use the heading scale in order. Don't skip levels (h1 to h3) for accessibility.
Use the Text component variants instead of applying typography classes directly.
Choose heading levels based on document structure, not visual appearance.
as prop for proper document structure.visuallyHidden for screen-reader-only text.