shadcn-rails

Typography

Styles for headings, paragraphs, lists, and other text elements.

No JavaScript Required

The Joke Tax Chronicles

typography/default 
<%= render Shadcn::TypographyComponent.new(variant: :h1) { "Heading" } %>

Installation

Add the component to your project:

rails generate shadcn:add typography

Usage

<%= render Shadcn::TypographyComponent.new(variant: :h1) { "Heading" } %>

Examples

Headings

Heading 1

Heading 2

Heading 3

Heading 4

<%= render Shadcn::TypographyComponent.new(variant: :h1) { "Heading 1" } %>
<%= render Shadcn::TypographyComponent.new(variant: :h2) { "Heading 2" } %>
<%= render Shadcn::TypographyComponent.new(variant: :h3) { "Heading 3" } %>
<%= render Shadcn::TypographyComponent.new(variant: :h4) { "Heading 4" } %>

Paragraph

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. 

<%= render Shadcn::TypographyComponent.new(variant: :p) do %>
  The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
<% end %>

Lead

A modal dialog that interrupts the user with important content and expects a response. 

<%= render Shadcn::TypographyComponent.new(variant: :lead) do %>
  A modal dialog that interrupts the user with important content and expects a response.
<% end %>

Large

Are you absolutely sure?
<%= render Shadcn::TypographyComponent.new(variant: :large) { "Are you absolutely sure?" } %>

Small

Email address 
<%= render Shadcn::TypographyComponent.new(variant: :small) { "Email address" } %>

Muted

Enter your email address.

<%= render Shadcn::TypographyComponent.new(variant: :muted) { "Enter your email address." } %>

Blockquote

"After all, everyone enjoys a good laugh, and the people of the kingdom were no exception." 
<%= render Shadcn::TypographyComponent.new(variant: :blockquote) do %>
  "After all, everyone enjoys a good laugh, and the people of the kingdom were no exception."
<% end %>

Inline Code

@radix-ui/react-alert-dialog 
<%= render Shadcn::TypographyComponent.new(variant: :code) { "@radix-ui/react-alert-dialog" } %>

API Reference

API Reference

Prop Type Default Description
variant Symbol :p Typography variant (:h1, :h2, :h3, :h4, :p, :lead, :large, :small, :muted, :blockquote, :code, :list)
tag Symbol nil Override the default HTML tag
class_name String nil Additional CSS classes to apply

Accessibility

  • Uses semantic HTML elements (h1-h4, p, blockquote, code) for proper document structure
  • Heading hierarchy should be followed for screen reader navigation
  • Use the tag prop to override elements when needed for semantic correctness