Text

The Text component is used to render text and paragraphs within an interface.

Import

import { Text } from "@recastui/react";

Usage

Use Text component to display text and links with theme styles. Control Text styles with props:

Editable Example

<>
	<Text size="xs">Extra small text</Text>
	<Text size="sm">Small text</Text>
	<Text size="md">Default text</Text>
	<Text size="lg">Large text</Text>
	<Text size="xl">Extra large text</Text>
	<Text weight={500}>Semibold</Text>
	<Text weight={700}>Bold</Text>
	<Text italic>Italic</Text>
	<Text decoration="underline">Underlined</Text>
	<Text decoration="line-through">Strikethrough</Text>
	<Text color="tomato">Tomato text</Text>
	<Text color="violet">Violet text</Text>
	<Text color="teal">Teal text</Text>
	<Text transform="uppercase">Uppercase</Text>
	<Text transform="capitalize">capitalized text</Text>
	<Text align="center">Aligned to center</Text>
	<Text align="right">Aligned to right</Text>
</>

Size

To increase the font size of the text, you can pass the size prop.

Editable Example

<div className='space-y-3'>
  <Text size='9xl'>(9xl) In love with React & Recastui</Text>
  <Text size='8xl'>(8xl) In love with React & Recastui</Text>
  <Text size='7xl'>(7xl) In love with React & Recastui</Text>
  <Text size='6xl'>(6xl) In love with React & Recastui</Text>
  <Text size='5xl'>(5xl) In love with React & Recastui</Text>
  <Text size='4xl'>(4xl) In love with React & Recastui</Text>
  <Text size='3xl'>(3xl) In love with React & Recastui</Text>
  <Text size='2xl'>(2xl) In love with React & Recastui</Text>
  <Text size='xl'>(xl) In love with React & Recastui</Text>
  <Text size='lg'>(lg) In love with React & Recastui</Text>
  <Text size='md'>(md) In love with React & Recastui</Text>
  <Text size='sm'>(sm) In love with React & Recastui</Text>
  <Text size='xs'>(xs) In love with React & Recastui</Text>
</d>

Truncate

Set truncate prop to add text-overflow: ellipsis styles.

Editable Example

<div className='max-w-[450px] p-10 bg-main-3'>
	<Text truncate>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam perspiciatis excepturi iste sint itaque sunt laborum. Nihil?
	</Text>
</div>

Line clamp

Specify maximum number of lines with lineClamp prop. This option uses @tailwindcss/line-clamp plugin. Note that padding-bottom cannot be set on text element

Editable Example

<Text lineClamp='3'>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam perspiciatis excepturi iste sint itaque sunt laborum. Nihil? Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam perspiciatis excepturi iste sint itaque sunt laborum. Nihil?
</Text>

Props

Prop	Type	Default	Description
as	React.ElementType	‘div’	The HTML element to render.
size	‘xs’ \| ‘sm’ \| ‘md’ \| ‘lg’ \| ‘xl’ \| ‘2xl’ \| ‘3xl’ \| ‘4xl’ \| ‘5xl’ \| ‘6xl’ \| ‘7xl’ \| ‘8xl’ \| ‘9xl’	‘md’	Sets the font size of the text.
weight	‘hairline’ \| ‘thin’ \| ‘light’ \| ‘normal’ \| ‘medium’ \| ‘semibold’ \| ‘bold’ \| ‘extrabold’ \| ‘black’	‘normal’	Sets the font weight of the text.
color	RecastColors	‘main’	Sets the text color.
decoration	‘none’ \| ‘underline’ \| ‘line-through’ \| ‘overline’	‘none’	Sets the text decoration.
transform	‘none’ \| ‘uppercase’ \| ‘lowercase’ \| ‘capitalize’	‘none’	Sets the text transform.
align	‘left’ \| ‘center’ \| ‘right’ \| ‘justify’	‘inherit’	Sets the text alignment.
lineClamp	string(1 - 10)	undefined	Sets the maximum number of lines. Uses `@tailwindcss/line-clamp` plugin.
italic	boolean	undefined	When set to `true`, adds `font-style: ellipitalicsis` to the text.
truncate	boolean	undefined	When set to `true`, adds `text-overflow: ellipsis` to the text.