VelvetKit

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="flex min-h-96 justify-center pt-8">
<nav id="ui-navigation-menu-e07bf94a" aria-label="Main" class="relative" data-controller="ui--navigation-menu" data-ui--navigation-menu-open-delay-value="150" data-ui--navigation-menu-close-delay-value="200" data-action="focusin->ui--navigation-menu#focusIn focusout->ui--navigation-menu#focusOut">
  <ul class="flex flex-wrap items-center gap-1">
    <li class="relative">
      <button type="button" id="ui-navigation-menu-e07bf94a-trigger-1" class="group/nav-item inline-flex h-9 items-center justify-center gap-1 rounded-md px-3 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 aria-expanded:bg-accent aria-expanded:text-accent-foreground data-[active]:bg-accent/60 aria-[current=page]:bg-accent/60" aria-expanded="false" aria-controls="ui-navigation-menu-e07bf94a-panel-1" data-ui--navigation-menu-target="top trigger" data-action="click->ui--navigation-menu#toggle pointerenter->ui--navigation-menu#hoverOpen pointerleave->ui--navigation-menu#hoverClose keydown->ui--navigation-menu#topKeydown">Getting started<i data-lucide="chevron-down" class="inline-block shrink-0 w-3 h-3 transition-transform duration-200 group-aria-expanded/nav-item:rotate-180 motion-reduce:transition-none" aria-hidden="true"></i>
      </button>
      <div id="ui-navigation-menu-e07bf94a-panel-1" hidden="hidden" class="z-50 max-w-[calc(100vw-1rem)] rounded-lg border bg-popover p-2 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 w-96" data-ui--navigation-menu-target="panel" data-state="closed" data-action="pointerenter->ui--navigation-menu#cancelClose pointerleave->ui--navigation-menu#hoverClose keydown->ui--navigation-menu#panelKeydown">
        <ul class="grid gap-1">
          <li><a href="#introduction" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Introduction</span>
                <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">Re-usable components built with Tailwind CSS.</span>
              </span>
            </a></li>
          <li><a href="#installation" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Installation</span>
                <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">How to install dependencies and structure your app.</span>
              </span>
            </a></li>
          <li><a href="#typography" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Typography</span>
                <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">Styles for headings, paragraphs, lists…etc</span>
              </span>
            </a></li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button type="button" id="ui-navigation-menu-e07bf94a-trigger-2" class="group/nav-item inline-flex h-9 items-center justify-center gap-1 rounded-md px-3 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 aria-expanded:bg-accent aria-expanded:text-accent-foreground data-[active]:bg-accent/60 aria-[current=page]:bg-accent/60" aria-expanded="false" aria-controls="ui-navigation-menu-e07bf94a-panel-2" data-ui--navigation-menu-target="top trigger" data-action="click->ui--navigation-menu#toggle pointerenter->ui--navigation-menu#hoverOpen pointerleave->ui--navigation-menu#hoverClose keydown->ui--navigation-menu#topKeydown">Components<i data-lucide="chevron-down" class="inline-block shrink-0 w-3 h-3 transition-transform duration-200 group-aria-expanded/nav-item:rotate-180 motion-reduce:transition-none" aria-hidden="true"></i>
      </button>
      <div id="ui-navigation-menu-e07bf94a-panel-2" hidden="hidden" class="z-50 max-w-[calc(100vw-1rem)] rounded-lg border bg-popover p-2 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 w-[36rem]" data-ui--navigation-menu-target="panel" data-state="closed" data-action="pointerenter->ui--navigation-menu#cancelClose pointerleave->ui--navigation-menu#hoverClose keydown->ui--navigation-menu#panelKeydown">
        <ul class="grid gap-1 sm:grid-cols-2">
          <li><a href="#alert" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Alert</span>
                <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">A callout for important information.</span>
              </span>
            </a></li>
          <li><a href="#dialog" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Dialog</span>
                <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">A modal window on top of the page.</span>
              </span>
            </a></li>
          <li><a href="#menu" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Menu</span>
                <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">A list of actions behind a button.</span>
              </span>
            </a></li>
          <li><a href="#tabs" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Tabs</span>
                <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">Panels shown one at a time.</span>
              </span>
            </a></li>
          <li><a href="#toast" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Toast</span>
                <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">A short message that disappears on its own.</span>
              </span>
            </a></li>
          <li><a href="#tooltip" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Tooltip</span>
                <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">A label that appears on hover or focus.</span>
              </span>
            </a></li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button type="button" id="ui-navigation-menu-e07bf94a-trigger-3" class="group/nav-item inline-flex h-9 items-center justify-center gap-1 rounded-md px-3 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 aria-expanded:bg-accent aria-expanded:text-accent-foreground data-[active]:bg-accent/60 aria-[current=page]:bg-accent/60" aria-expanded="false" aria-controls="ui-navigation-menu-e07bf94a-panel-3" data-ui--navigation-menu-target="top trigger" data-action="click->ui--navigation-menu#toggle pointerenter->ui--navigation-menu#hoverOpen pointerleave->ui--navigation-menu#hoverClose keydown->ui--navigation-menu#topKeydown">With Icon<i data-lucide="chevron-down" class="inline-block shrink-0 w-3 h-3 transition-transform duration-200 group-aria-expanded/nav-item:rotate-180 motion-reduce:transition-none" aria-hidden="true"></i>
      </button>
      <div id="ui-navigation-menu-e07bf94a-panel-3" hidden="hidden" class="z-50 max-w-[calc(100vw-1rem)] rounded-lg border bg-popover p-2 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 w-96" data-ui--navigation-menu-target="panel" data-state="closed" data-action="pointerenter->ui--navigation-menu#cancelClose pointerleave->ui--navigation-menu#hoverClose keydown->ui--navigation-menu#panelKeydown">
        <ul class="grid gap-1">
          <li><a href="#backlog" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-center hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="flex size-9 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground"><i data-lucide="circle-alert" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
              </span>
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Backlog</span>
              </span>
            </a></li>
          <li><a href="#todo" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-center hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="flex size-9 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground"><i data-lucide="info" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
              </span>
              <span class="min-w-0">
                <span class="block font-medium leading-snug">To do</span>
              </span>
            </a></li>
          <li><a href="#done" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-center hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link">
              <span class="flex size-9 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground"><i data-lucide="circle-check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
              </span>
              <span class="min-w-0">
                <span class="block font-medium leading-snug">Done</span>
              </span>
            </a></li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <a href="#docs" class="group/nav-item inline-flex h-9 items-center justify-center gap-1 rounded-md px-3 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 aria-expanded:bg-accent aria-expanded:text-accent-foreground data-[active]:bg-accent/60 aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="top" data-action="keydown->ui--navigation-menu#topKeydown">Docs</a>
    </li>
  </ul>
</nav></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="flex min-h-96 justify-center pt-8">
  <%= render(UI::NavigationMenu.new) do |nav| %>
    <% nav.with_item(label: "Getting started") do |item| %>
      <% item.with_link(title: "Introduction", href: "#introduction", description: "Re-usable components built with Tailwind CSS.") %>
      <% item.with_link(title: "Installation", href: "#installation", description: "How to install dependencies and structure your app.") %>
      <% item.with_link(title: "Typography", href: "#typography", description: "Styles for headings, paragraphs, lists…etc") %>
    <% end %>
    <% nav.with_item(label: "Components", columns: 2) do |item| %>
      <% item.with_link(title: "Alert", href: "#alert", description: "A callout for important information.") %>
      <% item.with_link(title: "Dialog", href: "#dialog", description: "A modal window on top of the page.") %>
      <% item.with_link(title: "Menu", href: "#menu", description: "A list of actions behind a button.") %>
      <% item.with_link(title: "Tabs", href: "#tabs", description: "Panels shown one at a time.") %>
      <% item.with_link(title: "Toast", href: "#toast", description: "A short message that disappears on its own.") %>
      <% item.with_link(title: "Tooltip", href: "#tooltip", description: "A label that appears on hover or focus.") %>
    <% end %>
    <% nav.with_item(label: "With Icon") do |item| %>
      <% item.with_link(title: "Backlog", href: "#backlog", icon: "circle-alert") %>
      <% item.with_link(title: "To do", href: "#todo", icon: "info") %>
      <% item.with_link(title: "Done", href: "#done", icon: "circle-check") %>
    <% end %>
    <% nav.with_item(label: "Docs", href: "#docs") %>
  <% end %>
</div>

No notes provided.

No params configured.