Blocks

Typography

Prose helpers — headings, paragraphs, lead copy, muted text, inline code. Each wraps the semantic HTML tag with a tuned Tailwind class string.

Installation

bin/rails g shadcnrb:component typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

<div class="space-y-2">
  <%= sui.h1 "Heading 1" %>
  <%= sui.h2 "Heading 2" %>
  <%= sui.h3 "Heading 3" %>
  <%= sui.h4 "Heading 4" %>
</div>

Body text

Lead text — larger, muted. Good for page descriptions under an h1.

Default paragraph. Use inside sui.p for inline sui.code formatting and links.

Muted text — for annotations, timestamps, secondary info.

<div class="space-y-2 max-w-prose">
  <%= sui.lead "Lead text — larger, muted. Good for page descriptions under an h1." %>
  <%= sui.p do %>
    Default paragraph. Use inside <%= sui.code "sui.p" %> for inline
    <%= sui.code "sui.code" %> formatting and <%= sui.link_to "links", "#" %>.
  <% end %>
  <%= sui.muted "Muted text — for annotations, timestamps, secondary info." %>
</div>

Inline code

`sui.code` wraps short strings — command names, class names, symbols — in a rounded monospaced chip.

Install with bin/rails g shadcnrb:install, then run bundle install.

<%= sui.p do %>
  Install with <%= sui.code "bin/rails g shadcnrb:install" %>, then run
  <%= sui.code "bundle install" %>.
<% end %>

API

Method	Tag	Purpose
`sui.h1`	`<h1>`	Page-level heading
`sui.h2`	`<h2>`	Section heading
`sui.h3`	`<h3>`	Subsection heading
`sui.h4`	`<h4>`	Minor heading
`sui.p`	`<p>`	Paragraph
`sui.lead`	`<p>`	Larger lead copy under a heading
`sui.muted`	`<p>`	Muted / secondary text
`sui.code`	`<code>`	Inline monospaced chip