Text
Text component for consistent body text styling with optional alignment
Basic Usage
The most basic text component with default styling:
This is a paragraph of body text with consistent styling. The text component provides a clean, readable format for content.
<neura::text>
This is a paragraph of body text with consistent styling.
</neura::text>Text Alignment
Control text alignment using the align prop:
Left-aligned text (default). This is useful for most body text content.
Center-aligned text. Great for call-to-action sections or special announcements.
Right-aligned text. Useful for dates, signatures, or specific layout requirements.
Justified text. This text is aligned on both the left and right sides, creating clean edges on both sides of the paragraph. Useful for formal documents or articles.
<neura::text align="left">Left-aligned text</neura::text>
<neura::text align="center">Center-aligned text</neura::text>
<neura::text align="right">Right-aligned text</neura::text>
<neura::text align="justify">Justified text</neura::text>Multiple Paragraphs
Use multiple text components for separate paragraphs:
This is the first paragraph. It introduces the main topic and provides context for what follows.
This is the second paragraph. It continues the discussion and provides additional details about the topic.
This is the third paragraph. It concludes the section or transitions to the next topic.
With Links
Text components can contain inline links:
Read our
documentation
to learn more, or check out our
examples
for quick start guides.
<neura::text>
Read our <neura::link href="#">documentation</neura::link>
to learn more, or check out our <neura::link href="#">examples</neura::link>
for quick start guides.
</neura::text>Use Cases
Card Content
Card Title
This is the card content. Use the text component to maintain consistent spacing and styling throughout your application.
Article Content
Article Title
This is the introduction paragraph. It sets the context and provides an overview of what the article will cover.
This is the main content paragraph. It delves deeper into the topic and provides detailed information.
This is the concluding paragraph. It summarizes the key points and provides a call to action or next steps.
Description Sections
Feature Description
Our platform offers powerful features that help you build amazing applications quickly and efficiently.
Try it today and see the difference!
Best Practices
Do
- Use text component for body content and paragraphs
- Use appropriate alignment based on context
- Break long content into multiple text components for better readability
- Combine with headings for hierarchical content structure
Don't
- Don't use text component for headings (use heading component)
- Don't use text component for labels (use label component)
- Don't use justify alignment for very narrow columns
- Don't use text component for code snippets (use code blocks)
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| align | string|null | null | Text alignment. Values: 'left', 'center', 'right', 'justify'. Default: left-aligned. |
| class | string | - | Additional CSS classes. Default: text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed |