RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!-- Default (no bg, no border) -->
<h2 class="text-lg font-semibold mb-2">Default (No Background, No Border)</h2>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">This is a default content paragraph. Only text color is applied.</p>
</article>
<!-- Colors -->
<h2 class="text-lg font-semibold mt-8 mb-2">Custom Colors</h2>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Primary color content.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-sky-700 dark:text-sky-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Secondary color content.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-red-700 dark:text-red-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Danger color content.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-green-700 dark:text-green-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Success color content.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-yellow-700 dark:text-yellow-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Warning color content.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Muted color content.</p>
</article>
<!-- Variants -->
<h2 class="text-lg font-semibold mt-8 mb-2">Variants</h2>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800
        focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800
        dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300" role="paragraph">Solid variant (primary background/border). Use variant: :solid.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-sky-700 dark:text-sky-300 font-sans leading-normal tracking-normal font-normal border-sky-200 text-sky-600 hover:bg-sky-200/50 hover:text-sky-600
        focus:ring-2 focus:outline-none focus:ring-sky-300 dark:focus:ring-sky-800
        dark:hover:bg-sky-800 dark:hover:text-sky-300 dark:border-sky-700" role="paragraph">Outline variant (secondary border). Use variant: :outline.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-red-700 dark:text-red-300 font-sans leading-normal tracking-normal font-normal bg-red-100/80 text-red-600 hover:bg-red-200/80 hover:text-red-800
        focus:ring-red-500 dark:focus:bg-red-800/20 dark:focus:text-red-300
        dark:bg-red-800/80 dark:hover:bg-red-800 dark:text-red-200 dark:hover:text-red-300" role="paragraph">Soft variant (danger soft background). Use variant: :soft.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-green-700 dark:text-green-300 font-sans leading-normal tracking-normal font-normal text-green-600 hover:bg-green-100/80 hover:text-green-600
        focus:ring-2 focus:outline-none focus:ring-green-400 dark:focus:ring-green-700
        dark:hover:bg-green-800 dark:hover:text-green-300" role="paragraph">Ghost variant (success subtle border). Use variant: :ghost.</p>
</article>
<!-- Font, Weight, Size, Align, etc. -->
<h2 class="text-lg font-semibold mt-8 mb-2">Font, Weight, Line Height, Letter Spacing, Size, Align</h2>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-center justify-center text-xl text-zinc-700 dark:text-zinc-300 font-mono leading-relaxed tracking-wide font-bold" role="paragraph">Custom font, bold, relaxed line height, wide letter spacing, extra large, centered.</p>
</article>
<!-- Prose -->
<h2 class="text-lg font-semibold mt-8 mb-2">Prose Mode</h2>
<article class="grid grid-cols-1 gap-2 prose prose-neutral dark:prose-invert max-w-prose">
  <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">This content uses prose mode for better readability.</p>
  <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Amet velit proident est eiusmod laboris in deserunt proident anim Lorem elit cillum. Anim do fugiat proident eiusmod proident occaecat veniam eiusmod cillum ut velit exercitation. Ea ex commodo velit nulla nisi exercitation officia tempor cillum. Fugiat cupidatat in reprehenderit et excepteur excepteur Lorem consectetur sit laborum. Lorem excepteur ex quis aute ad elit enim sint deserunt exercitation.</p>
</article>
<!-- Custom Classes -->
<h2 class="text-lg font-semibold mt-8 mb-2">Override with Custom Classes</h2>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-black text-white rounded-xl p-4" role="paragraph">This content uses fully custom classes.</p>
</article>
<!-- Leading, First Letter, and Styles -->
<h2 class="text-lg font-semibold mt-8 mb-2">Leading Paragraph</h2>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-lg font-semibold text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Leading paragraph with default color.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 text-lg font-semibold text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Leading paragraph with primary color.</p>
</article>
<h2 class="text-lg font-semibold mt-8 mb-2">First Letter Highlight</h2>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 first-line:uppercase first-line:tracking-widest first-letter:text-5xl first-letter:font-bold first-letter:mr-3 first-letter:float-left text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">First letter highlight, default color.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="mb-2 first-line:uppercase first-line:tracking-widest first-letter:text-5xl first-letter:font-bold first-letter:mr-3 first-letter:float-left text-left justify-start text-base text-red-700 dark:text-red-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">First letter highlight, danger color.</p>
</article>
<h2 class="text-lg font-semibold mt-8 mb-2">Bold, Underline, Italic, Strikethrough</h2>
<article class="grid grid-cols-1 gap-2">
  <p class="text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">This paragraph is bold.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="underline underline-offset-4 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">This paragraph is underlined.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="italic text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">This paragraph is italic.</p>
</article>
<article class="grid grid-cols-1 gap-2">
  <p class="line-through text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">This paragraph is strikethrough.</p>
</article>
<!-- Layouts -->
<h2 class="text-lg font-semibold mt-8 mb-2">All Layouts</h2>
<div class="space-y-4">
  <article class="grid grid-cols-1 gap-2">
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-sky-50 p-2 rounded-lg dark:text-sky-700" role="paragraph">One column layout. Perfect for articles or focused content blocks.</p>
  </article>
  <article class="grid grid-cols-1 md:grid-cols-2 gap-2">
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-red-50 p-2 rounded-lg dark:text-red-700" role="paragraph">First column in even two-column layout.</p>
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-red-50 p-2 rounded-lg dark:text-red-700" role="paragraph">Second column, evenly distributed.</p>
  </article>
  <article class="grid grid-cols-1 md:grid-cols-3 gap-2">
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-yellow-50 p-2 rounded-lg dark:text-yellow-700" role="paragraph">Column one: Multi-part content.</p>
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-yellow-50 p-2 rounded-lg dark:text-yellow-700" role="paragraph">Column two: Equal width.</p>
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-yellow-50 p-2 rounded-lg dark:text-yellow-700" role="paragraph">Column three: Responsive.</p>
  </article>
  <article class="grid grid-cols-1 md:grid-cols-4 gap-2">
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-slate-50 p-2 rounded-lg dark:text-slate-700" role="paragraph">Four even columns. 1</p>
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-slate-50 p-2 rounded-lg dark:text-slate-700" role="paragraph">2</p>
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-slate-50 p-2 rounded-lg dark:text-slate-700" role="paragraph">3</p>
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal bg-slate-50 p-2 rounded-lg dark:text-slate-700" role="paragraph">4</p>
  </article>
  <article class="grid grid-cols-1 md:grid-cols-3 gap-2">
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal md:col-span-2 bg-green-50 p-2 rounded-lg dark:text-green-700" role="paragraph">Main content area (more space).</p>
    <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal md:col-span-1 bg-green-50 p-2 rounded-lg dark:text-green-700" role="paragraph">Sidebar/secondary content (narrower column).</p>
  </article>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!-- Default (no bg, no border) -->
<h2 class="text-lg font-semibold mb-2">Default (No Background, No Border)</h2>
<%= rui_content(type: :default, paragraphs: ["This is a default content paragraph. Only text color is applied."]) %>
<!-- Colors -->
<h2 class="text-lg font-semibold mt-8 mb-2">Custom Colors</h2>
<%= rui_content(type: :default, color: :primary, paragraphs: ["Primary color content."]) %>
<%= rui_content(type: :default, color: :secondary, paragraphs: ["Secondary color content."]) %>
<%= rui_content(type: :default, color: :danger, paragraphs: ["Danger color content."]) %>
<%= rui_content(type: :default, color: :success, paragraphs: ["Success color content."]) %>
<%= rui_content(type: :default, color: :warning, paragraphs: ["Warning color content."]) %>
<%= rui_content(type: :default, color: :muted, paragraphs: ["Muted color content."]) %>
<!-- Variants -->
<h2 class="text-lg font-semibold mt-8 mb-2">Variants</h2>
<%= rui_content(type: :default, color: :primary, variant: :solid, paragraphs: ["Solid variant (primary background/border). Use variant: :solid."]) %>
<%= rui_content(type: :default, color: :secondary, variant: :outline, paragraphs: ["Outline variant (secondary border). Use variant: :outline."]) %>
<%= rui_content(type: :default, color: :danger, variant: :soft, paragraphs: ["Soft variant (danger soft background). Use variant: :soft."]) %>
<%= rui_content(type: :default, color: :success, variant: :ghost, paragraphs: ["Ghost variant (success subtle border). Use variant: :ghost."]) %>
<!-- Font, Weight, Size, Align, etc. -->
<h2 class="text-lg font-semibold mt-8 mb-2">Font, Weight, Line Height, Letter Spacing, Size, Align</h2>
<%= rui_content(type: :default, font: :mono, weight: :bold, line_height: :relaxed, letter_spacing: :wide, size: :xl, align: :center, paragraphs: ["Custom font, bold, relaxed line height, wide letter spacing, extra large, centered."]) %>
<!-- Prose -->
<h2 class="text-lg font-semibold mt-8 mb-2">Prose Mode</h2>
<%= rui_content(type: :default, prose: true, paragraphs: 
  [
    "This content uses prose mode for better readability.",
    "Amet velit proident est eiusmod laboris in deserunt proident anim Lorem elit cillum. Anim do fugiat proident eiusmod proident occaecat veniam eiusmod cillum ut velit exercitation. Ea ex commodo velit nulla nisi exercitation officia tempor cillum. Fugiat cupidatat in reprehenderit et excepteur excepteur Lorem consectetur sit laborum. Lorem excepteur ex quis aute ad elit enim sint deserunt exercitation."
  ]
) %>
<!-- Custom Classes -->
<h2 class="text-lg font-semibold mt-8 mb-2">Override with Custom Classes</h2>
<%= rui_content(type: :default, classes: "bg-black text-white rounded-xl p-4", paragraphs: ["This content uses fully custom classes."]) %>
<!-- Leading, First Letter, and Styles -->
<h2 class="text-lg font-semibold mt-8 mb-2">Leading Paragraph</h2>
<%= rui_content(type: :leading, paragraphs: ["Leading paragraph with default color."]) %>
<%= rui_content(type: :leading, color: :primary, paragraphs: ["Leading paragraph with primary color."]) %>
<h2 class="text-lg font-semibold mt-8 mb-2">First Letter Highlight</h2>
<%= rui_content(type: :first_letter, paragraphs: ["First letter highlight, default color."]) %>
<%= rui_content(type: :first_letter, color: :danger, paragraphs: ["First letter highlight, danger color."]) %>
<h2 class="text-lg font-semibold mt-8 mb-2">Bold, Underline, Italic, Strikethrough</h2>
<%= rui_content(type: :bold, paragraphs: ["This paragraph is bold."]) %>
<%= rui_content(type: :underline, paragraphs: ["This paragraph is underlined."]) %>
<%= rui_content(type: :italic, paragraphs: ["This paragraph is italic."]) %>
<%= rui_content(type: :strikethrough, paragraphs: ["This paragraph is strikethrough."]) %>
<!-- Layouts -->
<h2 class="text-lg font-semibold mt-8 mb-2">All Layouts</h2>
<div class="space-y-4">
  <%= rui_content(layout: :one_column, classes: "bg-sky-50 p-2 rounded-lg dark:text-sky-700", paragraphs: ["One column layout. Perfect for articles or focused content blocks."]) %>
  <%= rui_content(layout: :two_columns_even, classes: "bg-red-50 p-2 rounded-lg dark:text-red-700", paragraphs: ["First column in even two-column layout.", "Second column, evenly distributed."]) %>
  <%= rui_content(layout: :three_columns_even, classes: "bg-yellow-50 p-2 rounded-lg dark:text-yellow-700" , paragraphs: ["Column one: Multi-part content.", "Column two: Equal width.", "Column three: Responsive."]) %>
  <%= rui_content(layout: :four_columns_even, classes: "bg-slate-50 p-2 rounded-lg dark:text-slate-700", paragraphs: ["Four even columns. 1", "2", "3", "4"]) %>
  <%= rui_content(layout: :two_columns_uneven, classes: "bg-green-50 p-2 rounded-lg dark:text-green-700", paragraphs: [
    "Main content area (more space).",
    "Sidebar/secondary content (narrower column)."
  ]) %>
</div>

🚀 Content Component Overview

This preview showcases various content configurations and styles:

  • Default, colors, variants, font/weight/size/align
  • Prose mode (Tailwind Typography)
  • Custom classes
  • Layouts (onecolumn, twocolumns_even, etc)
  • Leading, first_letter, bold, underline, italic, strikethrough
  • Accessibility/ARIA roles

No params configured.