Text Component

The Text component is a lightweight and modern typography primitive for React. It supports semantic HTML rendering, text decorations, transformations, truncation, and full Tailwind CSS customization while keeping the API simple and clean.

Import Component From Library

javascript

1import { Text } from "@neuctra/ui";

Basic Usage Code

tsx

1<Text>
2  Welcome to <Text className="font-bold">Neuctra UI</Text>
3</Text>

Basic Usage

Welcome to

Neuctra UI

Text Transform

neuctra ui

Text Decorations

Italic Text

Underline Text

Strikethrough Text

Text Colors

Default Text

Primary Text

Muted Text

Truncate Text

This is a very long text that will automatically truncate.

Links (Anchor Mode)

Visit Neuctra

Props Table

Complete list of available props for the Text component.

Prop	Type	Default	Description
as	HTMLElementTag	"p"	Element type to render such as p, span, h1, or a.
children	React.ReactNode	—	Content inside the component.
transform	"uppercase" \| "lowercase" \| "capitalize"	—	Applies text transformation.
italic	boolean	false	Applies italic style.
underline	boolean	false	Adds underline decoration.
strikethrough	boolean	false	Adds line-through decoration.
truncate	boolean	false	Enables single-line text truncation.
color	"default" \| "muted" \| "primary" \| string	"default"	Text color or custom Tailwind class.
className	string	—	Additional custom classes.
...rest	Native HTML Props	—	Additional props passed to the rendered element.

Common Mistakes

<Text truncate={3} />

truncate only accepts boolean values.

<Text as="a" color="muted" />

Anchor elements automatically receive link styling.

<Text className="font-bold text-xl" />

Use Tailwind utility classes for typography customization.

Pro Tips

Use as for semantic HTML structure.
Use Tailwind utility classes through className for sizing and weight.
Anchor elements automatically receive primary color and underline styling.
Use truncate for compact layouts like tables, cards, and navigation items.
Keep the API minimal and rely on Tailwind utilities for advanced styling.
Combine utility classes with the built-in props for maximum flexibility.

Frequently Asked Questions

How do I install and import the Text component?

Install the @neuctra/ui package, then import it with: import { Text } from "@neuctra/ui";

Can I customize the Text component's appearance?

Yes. Text accepts a className prop for custom Tailwind CSS classes, so you can adjust spacing, layout, and styling without overriding the component internals.

Is the Text component accessible?

Text is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.