BetterUi Components

Previews

No matching results.

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
<div class="space-y-4 p-4">
  <div>
    <div class="flex flex-col rounded-lg text-base bg-primary-50 border border-primary-200 text-primary-900 shadow-sm" >
      <div class="p-6 border-b border-primary-200">
        Solid Style
      </div>
      <div class="p-6">
        Filled background with subtle border and dark text. Best for emphasis.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-white border-2 border-primary-500 text-primary-700 shadow-sm" >
      <div class="p-6 border-b border-primary-500">
        Outline Style
      </div>
      <div class="p-6">
        White background with colored border. Clean and minimal.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-transparent text-primary-600 shadow-sm" >
      <div class="p-6 border-b border-transparent">
        Ghost Style
      </div>
      <div class="p-6">
        Transparent background with colored text. Most subtle.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-primary-50 border border-primary-100 text-primary-800 shadow-sm" >
      <div class="p-6 border-b border-primary-100">
        Soft Style
      </div>
      <div class="p-6">
        Light colored background with subtle border. Gentle appearance.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-white border border-primary-300 text-grayscale-900 shadow-sm" >
      <div class="p-6 border-b border-primary-200">
        Bordered Style
      </div>
      <div class="p-6">
        White background with variant-colored border. Defaults to light variant.
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="space-y-4 p-4">
  <% [:solid, :outline, :ghost, :soft, :bordered].each do |style| %>
    <div>
      <%= render BetterUi::CardComponent.new(variant: :primary, style: style) do |card| %>
        <% card.with_header { "#{style.to_s.capitalize} Style" } %>
        <% card.with_body do %>
          <% if style == :solid %>
            Filled background with subtle border and dark text. Best for emphasis.
          <% elsif style == :outline %>
            White background with colored border. Clean and minimal.
          <% elsif style == :ghost %>
            Transparent background with colored text. Most subtle.
          <% elsif style == :soft %>
            Light colored background with subtle border. Gentle appearance.
          <% elsif style == :bordered %>
            White background with variant-colored border. Defaults to light variant.
          <% end %>
        <% end %>
      <% end %>
    </div>
  <% end %>
</div>

No notes provided.

No params configured.