StorybookGitHub

Text

A polymorphic body text component with size, weight, tone, and alignment controls.

Size: xs — The quick brown fox jumps over the lazy dog.

Size: sm — The quick brown fox jumps over the lazy dog.

Size: md — The quick brown fox jumps over the lazy dog.

Size: lg — The quick brown fox jumps over the lazy dog.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/text.json

Usage

Use Text for paragraphs, captions, and other body copy. Set as to change the rendered element when you need a span, label, or other tag.

import { Text } from "@/components/text/text";

export function Example() {
  return (
    <Text size="md" weight="regular" tone="muted">
      Supporting copy for the section.
    </Text>
  );
}