Text

Text component is used to render text and paragraphs with various styles, sizes, weights, and colors. It supports truncation, line clamping, and text transformations.

import { Text } from "@ninna-ui/primitives"

pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Text component to render typography with various styles.

import { Text } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <Text size="lg" weight="semibold" color="primary">
      Hello, World!
    </Text>
  );
}

Basic

Default text rendering as a paragraph element.

This is a default paragraph text. The Text component renders as a paragraph by default and uses the base text size with default color.

This is a span element.

Sizes

Text in different sizes from xs to 6xl.

md (default)

2xl

3xl

4xl

5xl

6xl

Weights

Different font weights from light to bold.

Light weight text

Normal weight text

Medium weight text

Semibold weight text

Bold weight text

Colors

Text with different color variants and muted option.

Neutral color text

Primary color text

Secondary color text

Accent color text

Info color text

Success color text

Warning color text

Danger color text

Muted text (secondary/subtle)

Alignment

Text alignment options: left, center, right, and justify.

Left aligned text (default)

Center aligned text

Right aligned text

Justified text spreads words evenly across each line. This is useful for creating a clean, newspaper-like appearance in your text blocks. The spacing between words is adjusted to make both edges of the text align with the container.

Truncation

Truncate text with ellipsis or limit to specific number of lines.

Single line truncate

This is a very long text that will be truncated when it exceeds the container width. The truncate prop adds an ellipsis at the end to indicate that there is more content.

Line clamp (2 lines)

This is a very long text that will be truncated when it exceeds the container width. The truncate prop adds an ellipsis at the end to indicate that there is more content. This is a very long text that will be truncated when it exceeds the container width. The truncate prop adds an ellipsis at the end to indicate that there is more content.

Line clamp (3 lines)

No wrap

This is a very long text that will be truncated when it exceeds the container width. The truncate prop adds an ellipsis at the end to indicate that there is more content.

Transform & Decoration

Text transformations (uppercase, lowercase, capitalize) and decorations (italic, underline, strikethrough).

Text transformations

uppercase text

LOWERCASE TEXT

capitalize each word

Text decorations

Italic text style

Underlined text

Strikethrough text

Combined styles

Bold and italic text

Uppercase semibold primary

Large underlined info text

As Element

Render text as different HTML elements using the 'as' prop.

Paragraph element (default)

Span element (inline)

Div element (block)

Label element

Semantic elements

Strong (bold)Emphasized (italic)Small textMarked/highlighted~~Deleted text~~Inserted text_Subscript^Superscript

Use Cases

Real-world examples of Text component usage.

Technology

The Future of Web Development

Exploring the latest trends and technologies that are shaping the future of web development. From AI-powered tools to new frameworks, discover what's next in the world of web development.

5 min read • Jan 25, 2026

John Doe

Software Engineer at Acme Inc.

Pro Plan

$29

/month

Perfect for growing teams and businesses

✓ Payment successful

✗ Error: Invalid credentials

⚠ Warning: Low disk space

ℹ Info: New update available

Install the package using npm install @ninna-ui/primitives

API Reference

Complete list of props for the Text component.

Props

Prop	Type	Default	Description
`as`	`'p' \| 'span' \| 'div' \| 'label' \| 'strong' \| 'em' \| 'small' \| 'mark' \| 'del' \| 'ins' \| 'sub' \| 'sup'`	`'p'`	The HTML element to render
`size`	`'xs' \| 'sm' \| 'md' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl'`	`'md'`	Text size
`weight`	`'light' \| 'normal' \| 'medium' \| 'semibold' \| 'bold'`	-	Font weight
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Text color
`align`	`'left' \| 'center' \| 'right' \| 'justify'`	-	Text alignment
`truncate`	`boolean`	`false`	Whether to truncate text with ellipsis
`lineClamp`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	-	Maximum number of lines before truncating
`muted`	`boolean`	`false`	Whether to use muted/secondary text color
`noWrap`	`boolean`	`false`	Whether text should not wrap
`uppercase`	`boolean`	`false`	Transform text to uppercase
`lowercase`	`boolean`	`false`	Transform text to lowercase
`capitalize`	`boolean`	`false`	Capitalize text
`italic`	`boolean`	`false`	Apply italic style
`underline`	`boolean`	`false`	Apply underline decoration
`strikethrough`	`boolean`	`false`	Apply line-through decoration
`className`	`string`	-	Additional CSS classes

Accessibility

Semantic HTML: Use the appropriate 'as' prop to render semantic elements (strong, em, etc.)
Color contrast: All color variants meet WCAG AA contrast requirements
Truncation: When using truncate or lineClamp, consider providing the full text via title attribute or tooltip
Text size: Avoid using very small text sizes (xs) for important content
Line length: For readability, keep line lengths between 45-75 characters