BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
<header class="w-full h-16 bg-white border-b border-grayscale-200 text-grayscale-900 sticky top-0 flex items-center justify-between px-4 z-40" >
  <div class="flex items-center shrink-0">
    <div class="lg:hidden flex items-center mr-2">
      <button class='p-2 text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 rounded-md'>
        <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'></path></svg>
      </button>
    </div>
    Brand
  </div>
  <div class="flex items-center gap-2">
    <div class='w-8 h-8 bg-primary-500 rounded-full'></div>
  </div>
</header>
1
2
3
4
5
6
7
8
9
10
11
render BetterUi::Drawer::HeaderComponent.new do |header|
  header.with_mobile_menu_button do
    "<button class='p-2 text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 rounded-md'>
      <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'></path></svg>
    </button>".html_safe
  end
  header.with_logo { "Brand" }
  header.with_actions do
    "<div class='w-8 h-8 bg-primary-500 rounded-full'></div>".html_safe
  end
end

No notes provided.

No params configured.