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
<div class="space-y-4">
  <div>
    <div class="relative inline-block" data-controller="rapidrailsui--preview" data-action="mouseenter->rapidrailsui--preview#show mouseleave->rapidrailsui--preview#hide"><a href="https://https//earth.com?ref=rapidrails.cc" rel="noopener noreferrer" target="_blank" data-turbo="false" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base">
        External Link with Preview 
      </a><!-- app/components/rapidrailsui/preview_component.html.erb -->
      <div data-rapidrailsui--preview-target="preview" class="hidden absolute left-1/2 p-0 w-64 rounded-md border border-gray-200 shadow-md -translate-x-1/2 translate-y-2 bg-neutral-50 link-preview-content dark:bg-neutral-800 dark:border-neutral-700">
        <div class="flex flex-col">
          <img class="w-full h-32 md:h-44 bg-gray-100 object-cover rounded-t-md" loading="lazy" onerror="this.style.display='none'" src="https://cff2.earth.com/uploads/2020/10/09222850/bora-bora-685303_1920-2-960x640.jpg" />
          <div class="p-2">
            <h3 class="mt-2 font-medium text-gray-800 dark:text-white">Earth webiste Preview</h3>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Earth is a website that allows you to explore the world and its wonders.</p>
          </div>
        </div>
      </div>
    </div>
    </div>
  <div>
    <div class="relative inline-block" data-controller="rapidrailsui--preview" data-action="mouseenter->rapidrailsui--preview#show mouseleave->rapidrailsui--preview#hide"><a href="/docs" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base">
        Preview of Earth website - internal link
      </a><!-- app/components/rapidrailsui/preview_component.html.erb -->
      <div data-rapidrailsui--preview-target="preview" class="hidden absolute left-1/2 p-0 w-64 rounded-md border border-gray-200 shadow-md -translate-x-1/2 translate-y-2 bg-neutral-50 link-preview-content dark:bg-neutral-800 dark:border-neutral-700">
        <div class="flex flex-col">
          <img class="w-full h-32 md:h-44 bg-gray-100 object-cover rounded-t-md" loading="lazy" onerror="this.style.display='none'" src="https://cff2.earth.com/uploads/2020/10/09222850/bora-bora-685303_1920-2-960x640.jpg" />
          <div class="p-2">
            <h3 class="mt-2 font-medium text-gray-800 dark:text-white">Earth webiste Preview</h3>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Earth is a website that allows you to explore the world and its wonders.</p>
          </div>
        </div>
      </div>
    </div>
    </div>
  <div>
    <div class="relative inline-block"><a href="/docs" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base text-neutral-600 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200">
        Default Link 
      </a></div>
    </div>
  <div>
    <div class="relative inline-block"><a href="/docs" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-200">
        Primary Link
      </a></div>
    </div>
  <div>
    <div class="relative inline-block"><a href="/docs" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
        Secondary Link
      </a></div>
    </div>
  <div>
    <div class="relative inline-block"><a href="/docs" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base text-teal-600 hover:text-teal-800 dark:text-teal-400 dark:hover:text-teal-200">
        Success Link
      </a></div>
    </div>
  <div>
    <div class="relative inline-block"><a href="/docs" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base text-rose-600 hover:text-rose-800 dark:text-rose-400 dark:hover:text-rose-200">
        Danger Link
      </a></div>
    </div>
  <div>
    <div class="relative inline-block"><a href="/docs" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-200">
        Warning Link
      </a></div>
    </div>
  <div>
    <div class="relative inline-block"><a href="/docs" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base text-sky-600 hover:text-sky-800 dark:text-sky-400 dark:hover:text-sky-200">
        Info Link
      </a></div>
    </div>
  <div>
    <div class="relative inline-block"><a href="https://https//example.com?ref=rapidrails.cc" rel="noopener noreferrer" target="_blank" data-turbo="false" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base">
        External Link
      </a></div>
    </div>
  <div>
    <div class="relative inline-block"><a href="/contact" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base"><svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-envelope icon-desc-envelope"><title id="icon-title-envelope">Envelope</title>
          <desc id="icon-desc-envelope">Envelope icon</desc>
          <path d="M21.75 6.75V17.25C21.75 18.4926 20.7426 19.5 19.5 19.5H4.5C3.25736 19.5 2.25 18.4926 2.25 17.25V6.75M21.75 6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75M21.75 6.75V6.99271C21.75 7.77405 21.3447 8.49945 20.6792 8.90894L13.1792 13.5243C12.4561 13.9694 11.5439 13.9694 10.8208 13.5243L3.32078 8.90894C2.65535 8.49945 2.25 7.77405 2.25 6.99271V6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        Link with envelope icon
      </a></div>
    </div>
  <div>
    <div class="relative inline-block"><a href="https://earth.com" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-200 no-underline">
        No Underline Link
      </a></div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="space-y-4">
  <% links.each do |link| %>
    <div>
      <%= rui_link(
        url: link[:url],
        style: link[:style],
        external: link[:external],
        no_underline: link[:no_underline]
      ) do |component| %>
        <% if link[:icon] %>
          <% component.with_icon(name: link[:icon], classes: "w-4 h-4 mr-1") %>
        <% end %>
        <% if link[:preview] %>
          <% component.with_preview(**preview_data) %>
        <% end %>
        <%= link[:text] %>
      <% end %>
    </div>
  <% end %>
</div>

🔗 Link Component Overview

This preview showcases various types of links, each with its own characteristics:

🌈 Styles: Default, Primary, Secondary, Success, Danger, Warning, Info

🌐 External links with refrence parameter

🖼️ Links with icons

🚫 Links without underline

👁️ Links with hover previews

Each link demonstrates:

  • Unique styling based on the specified style
  • Icon integration (when applicable)
  • External link handling
  • Preview functionality (when enabled)

How to use: <%= rui_link(url: "/path") { "Link Text" } %>

For customization options, check out the 'Playground' section below! 🎛️

No params configured.