A powerful typography component for headings, paragraphs, blockquotes, and inline text with complete styling control.
Key Features
The text component supports both positional text and block content. By default, it renders a paragraph.
<%= rui_text("Hello World") %>
<%= rui_text("Welcome", as: :h1, color: :primary) %>
<%= rui_text(size: :lg, weight: :bold) do %>
Bold large text
<% end %>Hello World
Bold large text
Use the as: parameter to create semantic headings. Headings are responsive and scale automatically on larger screens.
<%= rui_text("Heading 1", as: :h1) %>
<%= rui_text("Heading 2", as: :h2) %>
<%= rui_text("Heading 3", as: :h3) %>
<%= rui_text("Heading 4", as: :h4) %>
<%= rui_text("Heading 5", as: :h5) %>
<%= rui_text("Heading 6", as: :h6) %>💡 Tip: Headings automatically include proper ARIA attributes (role="heading" aria-level="N").
Heading weights can be customized using the weight: parameter, overriding the default weight for that heading level.
<%# H1 with normal weight instead of extrabold %>
<%= rui_text("Lightweight H1", as: :h1, weight: :normal) %>
<%# H6 with bold instead of semibold %>
<%= rui_text("Bold Subheading", as: :h6, weight: :bold) %>
<%# H2 with light weight %>
<%= rui_text("Elegant H2", as: :h2, weight: :light) %>By default, text renders as a paragraph. You can control the size and styling.
<%= rui_text("Default paragraph") %>
<%= rui_text("Large paragraph", size: :lg) %>
<%= rui_text("Small paragraph", size: :sm) %>This is a default paragraph with normal size and weight. It includes proper margins and line height for readability.
This is a large paragraph with increased font size for emphasis.
This is a small paragraph, perfect for secondary information or captions.
All semantic and Tailwind colors are supported via ColorBuilderHelper.
<%= rui_text("Primary", color: :primary) %>
<%= rui_text("Success", color: :success) %>
<%= rui_text("Danger", color: :danger) %>Primary
Secondary
Success
Danger
Warning
Info
Neutral
All Tailwind colors are supported with automatic dark mode support.
Red
Orange
Yellow
Green
Blue
Purple
Pink
Cyan
Lime
Indigo
Black and white colors without shade variants - perfect for dark backgrounds and maximum contrast.
<%= rui_text("White text", color: :white) %>
<%= rui_text("Black text", color: :black) %>White text on dark background
Perfect for hero sections and dark themes
Black text on light background
Pure black for maximum contrast
💡 Tip: Use :white and :black for pure colors that remain consistent in both light and dark modes. Unlike other colors, these don't use shade variants.
Control text size from extra small to 6XL.
Extra Small (xs)
Small (sm)
Base (base)
Medium (md)
Large (lg)
Extra Large (xl)
2XL
3XL
4XL
Choose from 8 font weight options.
Thin (100)
Light (300)
Normal (400)
Medium (500)
Semibold (600)
Bold (700)
Extrabold (800)
Black (900)
Visual variants powered by ColorBuilderHelper add background colors, borders, and styling.
<%= rui_text("Solid", variant: :solid, color: :primary) %>
<%= rui_text("Outline", variant: :outline, color: :success) %>
<%= rui_text("Ghost", variant: :ghost, color: :info) %>
<%= rui_text("Soft", variant: :soft, color: :warning) %>
<%= rui_text("Link", variant: :link, color: :primary) %>Solid Primary
Solid Success
Outline Danger
Ghost Info
Soft Warning
Link Style
Default variant (no styling)
Strong variant (bold)
Subtle variant (reduced opacity)
Create semantic blockquotes with optional citations.
<%= rui_text(as: :blockquote) do %>
To be or not to be, that is the question.
<% end %>
<%= rui_text(as: :blockquote, cite: "William Shakespeare") do %>
The fault, dear Brutus, is not in our stars, but in ourselves.
<% end %>To be or not to be, that is the question.
The fault, dear Brutus, is not in our stars, but in ourselves. William Shakespeare
Add icons to text with automatic color inheritance or custom colors.
<%= rui_text("Featured Content", color: :info) do |text| %>
<% text.with_icon(name: :star, position: :leading) %>
<% end %>
<%= rui_text("Learn More", color: :primary) do |text| %>
<% text.with_icon(name: :arrow_right, position: :trailing) %>
<% end %>Featured Content
Learn More
Warning Message
Success!
Apply beautiful gradient effects with multiple color schemes.
<%# Apply gradient style to entire text %>
<%= rui_text("Beautiful Gradient", gradient: :ocean, size: :xl2) %>
<%# Apply to specific word %>
<%= rui_text("Make it gradient today", gradient: "gradient") %>
<%# Apply specific style to specific word %>
<%= rui_text("Ocean vibes", gradient: { text: "Ocean", style: :ocean }) %>Sunset Gradient
Ocean Gradient
Forest Gradient
Sunrise Gradient
Aurora Gradient
Gradient Styles:
Prose mode adds optimal typography for long-form articles and blog posts.
<%= rui_text(prose: true, as: :article) do %>
<h2>Article Title</h2>
<p>First paragraph with automatic prose styling...</p>
<p>Second paragraph...</p>
<% end %>Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Good typography establishes a strong visual hierarchy, provides a graphic balance to the website, and sets the product's overall tone.
For text transformations like truncation, highlighting, number formatting, use the rui_text_fmt component.
<%= rui_text_fmt("This is very long text...", truncate: 20) %>
<%= rui_text_fmt(99.99, number_format: :currency) %>
<%= rui_text_fmt("Search for Rails in this text", highlight: "Rails") %>
<%= rui_text_fmt(Time.now - 2.hours, time_ago: true) %>This is a very long text that will be truncated...
$99.99
Search for Rails in this Rails text
5 comments
📚 Learn more: See the full TextFmt documentation for all formatting options.
Typography component for consistent text styling
| Parameter | Type | Default | Description |
|---|---|---|---|
| content | String | — | Text content (positional or keyword, or use block) |
Control rendered HTML element
| Parameter | Type | Default | Description |
|---|---|---|---|
| element | Symbol |
:p
|
HTML element to render
:p
:span
:div
:h1
:h2
:h3
:h4
:h5
:h6
:label
:strong
:em
:small
:mark
:del
:ins
:sub
:sup
:code
:pre
:blockquote
:cite
:abbr
:time
:address
|
Font styling options
| Parameter | Type | Default | Description |
|---|---|---|---|
| size | Symbol |
:base
|
Text size
:xs
:sm
:base
:lg
:xl
:xl2
:xl3
:xl4
:xl5
:xl6
:xl7
:xl8
:xl9
|
| weight | Symbol |
:normal
|
Font weight
:thin
:extralight
:light
:normal
:medium
:semibold
:bold
:extrabold
:black
|
| leading | Symbol | — |
Line height
:none
:tight
:snug
:normal
:relaxed
:loose
|
| tracking | Symbol | — |
Letter spacing
:tighter
:tight
:normal
:wide
:wider
:widest
|
| font | Symbol | — |
Font family
:sans
:serif
:mono
|
Text color options
| Parameter | Type | Default | Description |
|---|---|---|---|
| color | Symbol |
:default
|
Text color - semantic (:default, :muted, :primary, :success, :warning, :danger) or any Tailwind color |
| gradient | Symbol/Array | — |
Gradient preset or custom [from, to] colors
:sunset
:ocean
:forest
:fire
:purple
:rainbow
|
Text formatting options
| Parameter | Type | Default | Description |
|---|---|---|---|
| align | Symbol | — |
Text alignment
:left
:center
:right
:justify
|
| transform | Symbol | — |
Text transform
:uppercase
:lowercase
:capitalize
:normal
|
| decoration | Symbol | — |
Text decoration
:underline
:overline
:line_through
:none
|
| italic | Boolean |
false
|
Italic style |
| truncate | Boolean/Integer | — | Truncate text (true for ellipsis, integer for line clamp) |
| prose | Boolean |
false
|
Apply Tailwind prose styling |