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">
    Brand
  </div>
  <div class="hidden lg:flex flex-1 items-center justify-center px-4">
    <nav class='flex gap-6'>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Home</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Products</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>About</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Contact</a>
    </nav>
  </div>
</header>
1
2
3
4
5
6
7
8
9
10
11
render BetterUi::Drawer::HeaderComponent.new do |header|
  header.with_logo { "Brand" }
  header.with_navigation do
    "<nav class='flex gap-6'>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Home</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Products</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>About</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Contact</a>
    </nav>".html_safe
  end
end

No notes provided.

No params configured.