Skip to main content

​
Overview

The Text component provides a flexible way to render text content with semantic variants that automatically map to appropriate HTML elements. It supports size overrides, bold text, and muted styling.

​
Import

import { Text } from '@kivora/react';

​
Basic Usage

<Text>This is body text</Text>

​
Variants

The variant prop determines both the semantic HTML element and visual styling: 
<Text variant="display">Display Text</Text>
<Text variant="heading">Heading Text</Text>
<Text variant="label">Label Text</Text>
<Text variant="body">Body Text</Text>
<Text variant="caption">Caption Text</Text>

​
Variant Mappings

VariantElementStyling
displayh1text-4xl font-bold tracking-tight
headingh2text-2xl font-semibold tracking-tight
labellabeltext-sm font-medium
bodyptext-base leading-relaxed
captionspantext-xs text-muted-foreground

​
Size Override

Override the default variant size: 
<Text variant="body" size="lg">Large body text</Text>
<Text variant="heading" size="xl">Extra large heading</Text>

​
Available Sizes

  • xs - text-xs
  • sm - text-sm
  • md - text-base
  • lg - text-lg
  • xl - text-xl
  • 2xl - text-2xl
  • 3xl - text-3xl
  • 4xl - text-4xl

​
Bold Text

<Text bold>This text is bold</Text>
<Text variant="body" bold>Bold body text</Text>

​
Muted Text

Applies text-muted-foreground for secondary text: 
<Text muted>This is muted text</Text>
<Text variant="caption" muted>Last updated 3 days ago</Text>

​
Custom Element

Override the default element mapping: 
<Text as="span">Span element with body styling</Text>
<Text variant="heading" as="h3">H3 with heading styles</Text>

​
Examples

​
Article Header

<div>
  <Text variant="display">Welcome to Kivora</Text>
  <Text variant="caption" muted>Published on March 4, 2026</Text>
</div>

​
Form Label

<Text variant="label">Email Address</Text>

​
Large Bold Text

<Text size="xl" bold>Important Announcement</Text>

​
Props

​
variant
'display' | 'heading' | 'label' | 'body' | 'caption'
default:"'body'"
Semantic text variant that determines default element and styling
​
size
'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
Override the default variant size
​
bold
boolean
default:"false"
Apply bold font weight
​
muted
boolean
default:"false"
Apply muted foreground color for secondary text
​
as
ElementType
Override the default HTML element (defaults based on variant)
​
className
string
Additional CSS classes
​
children
ReactNode
Text content to render

​
Type Definition

Source: /home/daytona/workspace/source/src/components/typography/Text.tsx:49 
export interface TextProps {
  variant?: 'display' | 'heading' | 'label' | 'body' | 'caption';
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
  bold?: boolean;
  muted?: boolean;
  as?: ElementType;
  className?: string;
  children?: ReactNode;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us