Typography Components

Text

The primary component for rendering all text content. It provides props to control typographic properties like size, weight, color, and alignment.

Basic Text

Default paragraph text styling.

Build beautiful user interfaces with VaneUI components. Text provides consistent typography across your application.

BasicText.tsx

<Text>Build beautiful user interfaces with VaneUI components. Text provides consistent typography across your application.</Text>

Text Sizes

Text comes in different sizes: xs, sm, md (default), lg, xl.

Small text for captions and secondary content

Medium text for body content (default)

Large text for emphasis

TextSizes.tsx

<Col>
  <Text sm>Small text for captions and secondary content</Text>
  <Text>Medium text for body content (default)</Text>
  <Text lg>Large text for emphasis</Text>
</Col>

By default, Text uses the inherit appearance — it inherits text color from its parent via CSS cascade instead of applying its own color. This means text inside a colored container automatically picks up the parent's color.

<Card primary filled>
  <Text>Inherits primary color from Card</Text>
</Card>
<Card success filled>
  <Text>Inherits success color</Text>
  <Text danger>Explicit danger overrides inherit</Text>
</Card>

Inherited Primary

This text inherits primary from the Card.

Inherited Success

Inherits success color automatically.

Explicit danger overrides inherit.

InheritAppearance(Default).tsx

<Row flexWrap>
  <Card filled primary>
    <Text bold>Inherited Primary</Text>
    <Text>This text inherits primary from the Card.</Text>
  </Card>
  <Card filled success>
    <Text bold>Inherited Success</Text>
    <Text>Inherits success color automatically.</Text>
    <Text danger>Explicit danger overrides inherit.</Text>
  </Card>
</Row>

Text Appearances

Text supports explicit color appearances: primary, brand, accent, secondary, tertiary, success, danger, warning, info, link. Use these to override the default inherit behavior.

Primary text for important content

Brand text for brand-colored content

Accent text for highlights

Secondary text for supporting content

Tertiary text for muted content

Success text for positive feedback

Danger text for errors or warnings

Warning text for cautionary messages

Info text for informational content

Link-colored text for clickable content

TextAppearances.tsx

<Col>
  <Text primary>Primary text for important content</Text>
  <Text brand>Brand text for brand-colored 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>
  <Text link>Link-colored text for clickable content</Text>
</Col>

Text Styling

Use bold, semibold, italic, underline, uppercase and font families: sans, serif, mono.

Bold text for emphasis

Semibold for subtle emphasis

Italic text for quotes or terms

Underlined text for links

Monospace for code or technical content

Uppercase for labels

TextStyling.tsx

<Col>
  <Text bold>Bold text for emphasis</Text>
  <Text semibold>Semibold for subtle emphasis</Text>
  <Text italic>Italic text for quotes or terms</Text>
  <Text underline>Underlined text for links</Text>
  <Text mono>Monospace for code or technical content</Text>
  <Text uppercase>Uppercase for labels</Text>
</Col>

Text Alignment

Align text with textLeft, textCenter, textRight, textJustify.

Left aligned (default)

Center aligned

Right aligned

TextAlignment.tsx

<div className="space-y-2 border-2 border-dashed border-gray-300 p-4">
  <Text textLeft>Left aligned (default)</Text>
  <Text textCenter>Center aligned</Text>
  <Text textRight>Right aligned</Text>
</div>

Letter Spacing

Control letter spacing with tracking props: trackingTighter, trackingTight, trackingNormal, trackingWide, trackingWider, trackingWidest.

<Text trackingTight>Tight tracking</Text>
<Text trackingWide>Wide tracking</Text>
<Text trackingWidest>Widest tracking</Text>

Tighter letter spacing

Tight letter spacing

Normal letter spacing (default)

Wide letter spacing

Wider letter spacing

Widest letter spacing

LetterSpacing.tsx

<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>

Text in Context

Combining text properties for real-world use cases.

Product Title

Category • 4.5 ★ (128 reviews)

High-quality component library for building modern web applications with React and TypeScript.

$99.00

TextinContext.tsx

<Col>
  <Card>
    <Text bold lg>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 primary semibold sm>$99.00</Text>
  </Card>
</Col>

Text Props

Font Weight

Font weight props for controlling text weight

thin

Thin font weight (100)

extralight

Extra light font weight (200)

light

Light font weight (300)

normal

Normal font weight (400)

medium

Medium font weight (500)

semibold

Semibold font weight (600)

bold

Bold font weight (700)

extrabold

Extra bold font weight (800)

black

Black font weight (900)

Font Style

Font style props for controlling text style

italic

Italic font style

notItalic

Not italic (normal) font style

Text Decoration

Text decoration props for controlling text underline/strikethrough

underline

Add underline decoration below text

lineThrough

Add strikethrough/line-through decoration across text

noUnderline

Remove text decoration (no underline, strikethrough, etc.)

overline

Add overline decoration above text

Text Transform

Text transform props for controlling text case

uppercase

Transform text to uppercase

lowercase

Transform text to lowercase

capitalize

Capitalize first letter of each word

normalCase

Normal text case (no transformation)

Font Family

Font family props for controlling text font

sans

Sans-serif font family (default)

serif

Serif font family

mono

Monospace font family

heading

Heading font family (defaults to sans, independently customizable via --font-heading CSS variable)

Text Align

Text alignment props for controlling text position

textLeft

Align text to left

textCenter

Align text to center

textRight

Align text to right

textJustify

Justify text

Truncate

Truncate props for controlling text overflow with ellipsis

truncate

Single line truncation with ellipsis

lineClamp2

Truncate at 2 lines with ellipsis

lineClamp3

Truncate at 3 lines with ellipsis

lineClamp4

Truncate at 4 lines with ellipsis

lineClamp5

Truncate at 5 lines with ellipsis

noTruncate

Remove truncation

Size

Size props for controlling component dimensions

Extra small size

Small size

Medium size (default)

Large size

Extra large size

Hide

Hide props for responsive element visibility

mobileHide

Hide element on mobile devices and below (max-mobile: 48rem)

tabletHide

Hide element on tablet devices and below (max-tablet: 64rem)

desktopHide

Hide element on desktop devices and below (max-desktop: 80rem)

Items

Items props for controlling flex item alignment (align-items)

itemsStart

Align items to start (top/left)

itemsEnd

Align items to end (bottom/right)

itemsCenter

Align items to center

itemsBaseline

Align items to baseline

itemsStretch

Stretch items to fill container

Justify

Justify props for controlling flex content alignment (justify-content)

justifyStart

Pack items toward the start of the main axis

justifyEnd

Pack items toward the end of the main axis

justifyCenter

Center items along the main axis

justifyBetween

Distribute items with space between them

justifyAround

Distribute items with space around them

justifyEvenly

Distribute items with equal space around them

justifyStretch

Stretch items to fill the main axis

justifyBaseline

Align items along their baseline on main axis

Position

Position props for controlling CSS position property

relative

Relative positioning

absolute

Absolute positioning

fixed

Fixed positioning

sticky

Sticky positioning

static

Static positioning

Display

Display props for controlling CSS display property

inline

Inline display - flows with text

block

Block display - takes full width, new line

inlineBlock

Inline-block display - inline but with block properties

flex

Flex display - flexbox container

inlineFlex

Inline-flex display - inline flexbox container

grid

Grid display - CSS grid container

inlineGrid

Inline-grid display - inline grid container

contents

Contents display - element's box is removed, children display as if parent didn't exist

table

Table display - behaves like table element

tableCell

Table-cell display - behaves like td element

hidden

Hidden display - element is not visible

Overflow

Overflow props for controlling content overflow behavior

overflowAuto

Auto overflow - show scrollbars if needed

overflowHidden

Hidden overflow - clip content without scrollbars

overflowClip

Clip overflow - hard clip without scrollbars

overflowVisible

Visible overflow - content extends beyond bounds

overflowScroll

Scroll overflow - always show scrollbars

overflowXAuto

Auto overflow on X-axis only

overflowYAuto

Auto overflow on Y-axis only

overflowXHidden

Hidden overflow on X-axis only

overflowYHidden

Hidden overflow on Y-axis only

overflowXClip

Clip overflow on X-axis only

overflowYClip

Clip overflow on Y-axis only

overflowXVisible

Visible overflow on X-axis only

overflowYVisible

Visible overflow on Y-axis only

overflowXScroll

Scroll overflow on X-axis only

overflowYScroll

Scroll overflow on Y-axis only

Appearance

Appearance props for controlling component colors

primary

Primary color appearance (gray)

brand

Brand color appearance (blue)

accent

Accent color appearance (rose)

secondary

Secondary color appearance (gray)

tertiary

Tertiary color appearance

success

Success color appearance (green)

danger

Danger color appearance (red)

warning

Warning color appearance (amber)

info

Info color appearance (cyan)

link

Link color appearance (blue, for hyperlinks)

inherit

Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables

Variant

Variant props for controlling component style variations

filled

Filled variant - solid background with contrasting text color

outline

Outline variant - transparent background with border and colored text (default)

Cursor

Cursor props for controlling cursor appearance

cursorPointer

Pointer cursor - indicates clickable element

cursorDefault

Default cursor - standard arrow

cursorNotAllowed

Not-allowed cursor - indicates disabled state

cursorNone

No cursor - hides the cursor

cursorText

Text cursor - indicates selectable text

cursorMove

Move cursor - indicates draggable element

cursorWait

Wait cursor - indicates loading/processing

Letter Spacing

Letter spacing props for controlling text tracking

trackingTighter

Tighter letter spacing (-0.05em)

trackingTight

Tight letter spacing (-0.025em)

trackingNormal

Normal letter spacing (0)

trackingWide

Wide letter spacing (0.025em)

trackingWider

Wider letter spacing (0.05em)

trackingWidest

Widest letter spacing (0.1em)

Width

Width props for controlling component width

wFull

Set width to 100%

wFit

Set width to fit-content

wAuto

Set width to auto

wScreen

Set width to 100vw (viewport width), removes max-width constraint

Height

Height props for controlling component height

hFit

Set height to fit-content

hFull

Set height to 100%

hAuto

Set height to auto

hScreen

Set height to 100vh (viewport height), removes max-height constraint

Transparent

Transparent prop for disabling background color

transparent

Disable background color - makes component background transparent

Responsive

Responsive prop for enabling breakpoint-specific sizing

responsive

Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap