BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<aside class="flex flex-col h-full w-64 bg-white text-grayscale-900 border-r border-grayscale-200 shrink-0" data-position="left" data-collapsible="true">
  <div class="shrink-0 p-4 border-b border-grayscale-200">
    <div class='flex items-center'>
      <div class='w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold'>B</div>
      <span class='ml-2 font-semibold'>BetterUI</span>
    </div>
  </div>
  <div class="flex-1 overflow-y-auto p-4 space-y-6">
    <nav class='space-y-2'>
      <a href='#' class='block px-4 py-2 rounded-md bg-primary-50 text-primary-700'>Dashboard</a>
      <a href='#' class='block px-4 py-2 rounded-md hover:bg-grayscale-100'>Projects</a>
      <a href='#' class='block px-4 py-2 rounded-md hover:bg-grayscale-100'>Team</a>
    </nav>
  </div>
</aside>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
render BetterUi::Drawer::SidebarComponent.new do |sidebar|
  sidebar.with_header do
    "<div class='flex items-center'>
      <div class='w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold'>B</div>
      <span class='ml-2 font-semibold'>BetterUI</span>
    </div>".html_safe
  end
  sidebar.with_navigation do
    "<nav class='space-y-2'>
      <a href='#' class='block px-4 py-2 rounded-md bg-primary-50 text-primary-700'>Dashboard</a>
      <a href='#' class='block px-4 py-2 rounded-md hover:bg-grayscale-100'>Projects</a>
      <a href='#' class='block px-4 py-2 rounded-md hover:bg-grayscale-100'>Team</a>
    </nav>".html_safe
  end
end

No notes provided.

No params configured.