Text
A versatile component for rendering and formatting text content with ease.
The Text component is a polymorphic component that can be used to render a variety of text content on a web page, including headings, paragraphs, spans or hyperlinks. It can be easily styled using a variety of props.
import { Text } from '@rewind-ui/core';
function App() {
return (
<Text color="black">
Hello world!
</Text>
);
}
Import
Import the Text
component using the following import statement.
import { Text } from '@rewind-ui/core';
Variants
The Text component has a number of variants that can be used to change the appearance of the component. The variants can be used by passing the variant prop to the component.
Available variants are: d1
, d2
, d3
, d4
, h1
, h2
, h3
, h4
, h5
, h6
and p
.
Since Text component is a polymorphic component, all the above variants will be rendered as h
or p
tags automatically.
Display 1
Display 2
Display 3
Display 4
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
<View>
<Text variant="d1">Display 1</Text>
<Text variant="d2">Display 2</Text>
<Text variant="d3">Display 3</Text>
<Text variant="d4">Display 4</Text>
<Text variant="h1">Heading 1</Text>
<Text variant="h2">Heading 2</Text>
<Text variant="h3">Heading 3</Text>
<Text variant="h4">Heading 4</Text>
<Text variant="h5">Heading 5</Text>
<Text variant="h6">Heading 6</Text>
<Text variant="p">Paragraph</Text>
</View>
Colors
The Text
component comes with nine colors: white
, blue
, red
, green
, yellow
, purple
, gray
, dark
and black
. The color can be changed by passing the color prop to the component.
<View>
<Text color="white">White</Text>
<Text color="blue">Blue</Text>
<Text color="red">Red</Text>
<Text color="green">Green</Text>
<Text color="yellow">Yellow</Text>
<Text color="purple">Purple</Text>
<Text color="gray">Gray</Text>
<Text color="dark">Dark</Text>
<Text color="black">Black</Text>
</View>
Sizes
The Text
component comes with thirteen sizes: xs
, sm
, base
, lg
, xl
, 2xl
, 3xl
, 4xl
, 5xl
, 6xl
, 7xl
, 8xl
and 9xl
. The size can be changed by passing the size prop to the component.
<View>
<Text size="xs">Extra small</Text>
<Text size="sm">Small</Text>
<Text size="base">Base</Text>
<Text size="lg">Large</Text>
<Text size="xl">Extra large</Text>
<Text size="2xl">2xl</Text>
<Text size="3xl">3xl</Text>
<Text size="4xl">4xl</Text>
<Text size="5xl">5xl</Text>
<Text size="6xl">6xl</Text>
<Text size="7xl">7xl</Text>
<Text size="8xl">8xl</Text>
<Text size="9xl">9xl</Text>
</View>
Weight
The Text
component comes with nine weights: thin
, extraLight
, light
, normal
, medium
, semiBold
, bold
, extraBold
and black
. The weight can be changed by passing the weight
prop to the component.
<View>
<Text weight="thin">Thin</Text>
<Text weight="extraLight">Extra Light</Text>
<Text weight="light">Light</Text>
<Text weight="normal">Normal</Text>
<Text weight="medium">Medium</Text>
<Text weight="semiBold">Semi Bold</Text>
<Text weight="bold">Bold</Text>
<Text weight="extraBold">Extra Bold</Text>
<Text weight="black">Black</Text>
</View>
Tracking
The Text
component comes with nine tracking options: tighter
, tight
, normal
, wide
, wider
and widest
. The tracking can be changed by passing the tracking
prop to the component.
<View>
<Text tracking="tighter">Tighter</Text>
<Text tracking="tight">Tight</Text>
<Text tracking="normal">Normal</Text>
<Text tracking="wide">Wide</Text>
<Text tracking="wider">Wider</Text>
<Text tracking="widest">Widest</Text>
</View>
Leading
The Text
component comes with fourteen leading options: 3
, 4
, 5
, 6
, 7
, 8
, 9
, 10
, none
, tight
, snug
, normal
, relaxed
and loose
. The leading can be changed by passing the leading
prop to the component.
<View>
<Text leading="1">...</Text>
<Text leading="2">...</Text>
<Text leading="3">...</Text>
<Text leading="4">...</Text>
<Text leading="5">...</Text>
<Text leading="6">...</Text>
<Text leading="7">...</Text>
<Text leading="8">...</Text>
<Text leading="9">...</Text>
<Text leading="none">...</Text>
<Text leading="tight">...</Text>
<Text leading="snug">...</Text>
<Text leading="normal">...</Text>
<Text leading="relaxed">...</Text>
<Text leading="loose">...</Text>
</View>
Polymorphic
The Text
component is a polymorphic component. This means that it can be used as a span, a heading or any html element. You can use the as
prop to change the underlying html element.
<View>
<Text as="h1">Heading 1</Text>
<Text as="h2">Heading 2</Text>
<Text as="h3">Heading 3</Text>
<Text as="h4">Heading 4</Text>
<Text as="h5">Heading 5</Text>
<Text as="h6">Heading 6</Text>
<Text as="p">Paragraph</Text>
<Text as="span">Span</Text>
<Text as="a" href="#">Anchor</Text>
<Text as="label">Label</Text>
</View>
Ref
The Text
component supports the ref
prop, which allows for obtaining a reference to the associated underlying HTML element. By default the ref
will be of type HTMLSpanElement
, but you can use the as
prop to change the underlying html element.
import { useRef } from 'react';
import { Text } from '@rewind-ui/core';
function App() {
const ref = useRef<HTMLSpanElement>(null);
return <Text ref={ref}>Hello world!</Text>;
}
API Reference
Properties
Prop | Type | Description | Default |
---|---|---|---|
color | TextColor | Sets the color | dark |
leading | TextLeading | Sets the line height | normal |
size | TextSize | Sets the font size | base |
tracking | TextTracking | Sets the letter spacing | normal |
variant | TextVariant | Sets the text variant | undefined |
weight | TextWeight | Sets the font weight | normal |
Types
type TextColor =
| 'white'
| 'blue'
| 'red'
| 'green'
| 'yellow'
| 'purple'
| 'gray'
| 'dark'
| 'black';
type TextLeading =
| '3'
| '4'
| '5'
| '6'
| '7'
| '8'
| '9'
| '10'
| 'none'
| 'tight'
| 'snug'
| 'normal'
| 'relaxed'
| 'loose';
type TextSize =
| 'xs'
| 'sm'
| 'base'
| 'lg'
| 'xl'
| '2xl'
| '3xl'
| '4xl'
| '5xl'
| '6xl'
| '7xl'
| '8xl'
| '9xl';
type TextTracking =
| 'tighter'
| 'tight'
| 'normal'
| 'wide'
| 'wider'
| 'widest';
type TextVariant =
| 'd1'
| 'd2'
| 'd3'
| 'd4'
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'p';
type TextWeight =
| 'thin'
| 'extraLight'
| 'light'
| 'normal'
| 'medium'
| 'semiBold'
| 'bold'
| 'extraBold'
| 'black';