{
  "title": "Text",
  "description": "Typographic primitive with token-driven variants.",
  "url": "/docs/components/text",
  "since": "0.1.0",
  "tags": [
    "primitive",
    "typography"
  ],
  "platform": "both",
  "source": "---\ntitle: Text\ndescription: Typographic primitive with token-driven variants.\nsince: 0.1.0\ntags: [primitive, typography]\nplatform: both\ncategory: primitives\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { ExpoSnack } from '@/components/expo-snack';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Text\" />\n\n## At a glance\n\n- Maps to RN `<Text>` on native and `<span>` / heading elements on web. Heading variants render with the right semantic tag plus `aria-level` so SEO and assistive tech see the hierarchy.\n- Token-driven — `fontFamily`, `fontSize`, `fontWeight`, `lineHeight` all flow through the active theme.\n- Accepts every RN `Text` prop (`numberOfLines`, `selectable`, `accessibilityRole`, …) plus `className` for NativeWind-driven overrides.\n\n## Preview\n\n<Preview name=\"text-basic\" />\n\n## Native preview\n\n<ExpoSnack component=\"Text\" height={300} />\n\n## `variant`\n\nThe variant decides font family, size, weight, and line-height in one\ngo. Pass `style` if you need to override a specific property without\nleaving the variant behind.\n\n| Variant         | Tag (web)   | Use for                                              |\n|-----------------|-------------|------------------------------------------------------|\n| `heading-1`     | `<h1>`      | Page title — one per route, top of the page          |\n| `heading-2`     | `<h2>`      | Section heading                                      |\n| `heading-3`     | `<h3>`      | Subsection heading                                   |\n| `body-lg`       | `<span>`    | Lead paragraphs, intros                              |\n| `body-md` (default) | `<span>` | Default body copy                                    |\n| `body-sm`       | `<span>`    | Helper text, captions                                |\n| `body-xs`       | `<span>`    | Microcopy — labels in dense layouts                  |\n\n```tsx\n<Text variant=\"heading-1\">Welcome</Text>\n<Text variant=\"body-sm\">Last updated five minutes ago.</Text>\n```\n\nVariants pull from the **display** font for headings and the **body**\nfont for body variants. Override the family for an entire app via\n`NoriProvider`'s theme, or per-instance via `style`.\n\n## Props\n\n<PropsTable component=\"Text\" />\n"
}