Text

<Text>Compose interfaces with VaneUI components. Text provides consistent typography across your application.</Text>

<Col>
  <Text xs>Extra small text</Text>
  <Text sm>Small text for captions</Text>
  <Text>Medium text (default)</Text>
  <Text lg>Large text for emphasis</Text>
  <Text xl>Extra large text</Text>
</Col>

<Col>
  <Text primary>Primary text for important content</Text>
  <Text accent>Accent text for highlights</Text>
  <Text secondary>Secondary text for supporting content</Text>
  <Text tertiary>Tertiary text for muted content</Text>
  <Text success>Success text for positive feedback</Text>
  <Text danger>Danger text for errors or warnings</Text>
  <Text warning>Warning text for cautionary messages</Text>
  <Text info>Info text for informational content</Text>
</Col>

<Col>
  <Text info>outline info, on the page surface</Text>
  <Text danger>outline danger, on the page surface</Text>
  <Card info filled>
    <Text info filled>filled info, on a matching filled Card</Text>
  </Card>
  <Card danger filled>
    <Text danger filled>filled danger, on a matching filled Card</Text>
  </Card>
</Col>

<Row flexWrap itemsStretch>
  <Card primary filled>
    <Text fontBold>Inherited Primary</Text>
    <Text>This text inherits primary from the Card.</Text>
  </Card>
  <Card success filled>
    <Text fontBold>Inherited Success</Text>
    <Text>Inherits success color automatically.</Text>
  </Card>
  <Card border secondary>
    <Text fontBold>On a plain surface</Text>
    <Text>Inherits the Card's own colour.</Text>
    <Text danger>Explicit danger overrides inherit.</Text>
  </Card>
</Row>

<Col>
  <Text fontThin>Thin weight</Text>
  <Text fontLight>Light weight</Text>
  <Text fontNormal>Normal weight</Text>
  <Text fontMedium>Medium weight</Text>
  <Text fontSemibold>Semibold weight</Text>
  <Text fontBold>Bold weight</Text>
  <Text fontExtrabold>Extra bold weight</Text>
  <Text fontBlack>Black weight</Text>
</Col>

<Col>
  <Text fontSans>Sans-serif font (default)</Text>
  <Text fontSerif>Serif font for editorial content</Text>
  <Text fontMono>Monospace for code or technical content</Text>
</Col>

<Col>
  <Text italic>Italic text for quotes or terms</Text>
  <Text underline>Underlined text for emphasis</Text>
  <Text lineThrough>Line-through for deleted content</Text>
</Col>

<Col>
  <Text uppercase>Uppercase for labels</Text>
  <Text lowercase>LOWERCASE NORMALIZED</Text>
  <Text capitalize>capitalized words example</Text>
</Col>

<Col>
  <Text wFull>Left aligned (default)</Text>
  <Text wFull textCenter>Center aligned</Text>
  <Text wFull textRight>Right aligned</Text>
  <Text wFull textJustify>Justified text spreads to fill the line, distributing extra space between words across the full container width.</Text>
</Col>

<Col>
  <Text wFull truncate>Truncated single line of text that will be cut off with an ellipsis when it exceeds the container width.</Text>
  <Text wFull lineClamp2>Clamped to two lines. This release note covers the new size props, the revised default appearances, and the spacing changes that now scale with the size prop across every typography component in the library.</Text>
  <Text wFull lineClamp3>Clamped to three lines. The migration guide walks through each change in detail, from the renamed appearance props to the updated default margins, and explains how to update your existing components step by step so nothing renders differently after you upgrade to the latest version.</Text>
</Col>

<Col>
  <Text className="w-48 border border-gray-300 p-2">
    Default: https://vaneui.com/docs/typography-components/text overflows.
  </Text>
  <Text breakWords className="w-48 border border-gray-300 p-2">
    breakWords: https://vaneui.com/docs/typography-components/text wraps.
  </Text>
  <Text breakAll className="w-48 border border-gray-300 p-2">
    breakAll: https://vaneui.com/docs/typography-components/text wraps.
  </Text>
</Col>

<Col>
  <Text trackingTighter>Tighter letter spacing</Text>
  <Text trackingTight>Tight letter spacing</Text>
  <Text trackingNormal>Normal letter spacing (default)</Text>
  <Text trackingWide>Wide letter spacing</Text>
  <Text trackingWider>Wider letter spacing</Text>
  <Text trackingWidest>Widest letter spacing</Text>
</Col>

<Col noGap>
  <Text>No margin (default), sits flush.</Text>
  <Text marginT marginB>Margin above and below, scales with size.</Text>
  <Text>Another flush line.</Text>
</Col>

<Col>
  <Card>
    <Text lg fontBold>Product Title</Text>
    <Text secondary>Category • 4.5 ★ (128 reviews)</Text>
    <Text>High-quality component library for building modern web applications with React and TypeScript.</Text>
    <Text sm primary fontSemibold>$99.00</Text>
  </Card>
</Col>