Text
Text is a flexible component for rendering inline or block text with customizable color, size, alignment, font, and weight. It supports both prop and boolean flag APIs for maximum convenience and Tailwind compatibility.
Text is a flexible component for rendering inline or block text with customizable color, size, alignment, font, and weight. It supports both prop and boolean flag APIs for maximum convenience and Tailwind compatibility.
Text is a standalone component.
The Text component renders flexible inline or block text. It supports color, size, alignment, font, weight, and case props, with both prop and boolean flag APIs for convenience.
| Text Props | Type | Description |
|---|---|---|
is | string | Render as a different HTML element (e.g., 'span', 'div', 'h1'). |
join | boolean | Adds the |
block | boolean | Applies block display. |
inline | boolean | Applies inline display. |
inlineBlock | boolean | Applies inline-block display. |
label | boolean | Applies |
color | string | Sets the text color. Options: - |
| neutral | boolean | sets color to neutral |
| primary | boolean | sets color to primary |
| secondary | boolean | sets color to accent |
| info | boolean | sets color to info |
| success | boolean | sets color to success |
| warning | boolean | sets color to warning |
| error | boolean | sets color to error |
| neutralContent | boolean | sets color to neutral-content |
| primaryContent | boolean | sets color to primary-content |
| secondaryContent | boolean | sets color to secondary-content |
| accentContent | boolean | sets color to accent-content |
| infoContent | boolean | sets color to info-content |
| successContent | boolean | sets color to success-content |
| warningContent | boolean | sets color to warning-content |
| errorContent | boolean | sets color to error-content |
size | string | Sets the text size. Options: - |
| xl | boolean | sets size to xl |
| lg | boolean | sets size to md |
| sm | boolean | sets size to sm |
| xs | boolean | sets size to xs |
align | string | Sets the text alignment. Options: |
| left | boolean | sets alignment to left |
| center | boolean | sets alignment to center |
| right | boolean | sets alignment to right |
| justify | boolean | sets alignment to justify |
case | string | Sets the text transform. Options: |
| uppercase | boolean | sets case to uppercase |
| lowercase | boolean | sets case to lowercase |
| capitalize | boolean | sets case to capitalize |
| normalCase | boolean | sets case to normal |
font | string | Sets the font family. Options: |
| sans | boolean | sets font to sans |
| serif | boolean | sets font to serif |
| mono | boolean | sets font to mono |
weight | string | Sets the font weight. Options: |
| thin | boolean | sets weight to thin |
| extralight | boolean | sets weight to extralight |
| light | boolean | sets weight to light |
| normal | boolean | sets weight to normal |
| medium | boolean | sets weight to medium |
| semibold | boolean | sets weight to semibold |
| bold | boolean | sets weight to bold |
| extrabold | boolean | sets weight to extrabold |
| black | boolean | sets weight to black |
| Text Slots | Description |
|---|---|
default | The default slot. Place text content here. |
Text color variants using semantic color props or boolean flags.
Text size variants using the size prop or boolean flags.
Text alignment using the align prop or boolean flags.
Font family options using the font prop or boolean flags.
Font weight options using the weight prop or boolean flags.
Text transform options using the case prop or boolean flags.
Render text as a different tag using the is prop.