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
<div class="space-y-4">
  <div>
    <span class="relative inline-block" data-controller="rapidrailsui--preview" data-action="mouseenter->rapidrailsui--preview#show mouseleave->rapidrailsui--preview#hide"><a href="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 lg:text-lg">
        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>
    </span>    </div>
  <div>
    <span 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 lg:text-lg">
        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>
    </span>    </div>
  <div>
    <span 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 lg:text-lg text-neutral-600 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200">
        Default Link 
      </a></span>    </div>
  <div>
    <span 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 lg:text-lg text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-200">
        Primary Link
      </a></span>    </div>
  <div>
    <span 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 lg:text-lg text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
        Secondary Link
      </a></span>    </div>
  <div>
    <span 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 lg:text-lg text-teal-600 hover:text-teal-800 dark:text-teal-400 dark:hover:text-teal-200">
        Success Link
      </a></span>    </div>
  <div>
    <span 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 lg:text-lg text-rose-600 hover:text-rose-800 dark:text-rose-400 dark:hover:text-rose-200">
        Danger Link
      </a></span>    </div>
  <div>
    <span 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 lg:text-lg text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-200">
        Warning Link
      </a></span>    </div>
  <div>
    <span 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 lg:text-lg text-sky-600 hover:text-sky-800 dark:text-sky-400 dark:hover:text-sky-200">
        Info Link
      </a></span>    </div>
  <div>
    <span class="relative inline-block"><a href="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 lg:text-lg">
        External Link
      </a></span>    </div>
  <div>
    <span 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 lg:text-lg">
        Link with envelope icon
      </a></span>    </div>
  <div>
    <span 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 lg:text-lg text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-200 no-underline">
        No Underline Link
      </a></span>    </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.