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
<div class="relative h-[600px] overflow-hidden rounded-lg border transform-gpu">
  <div data-slot="sidebar-wrapper" data-controller="ui--sidebar" style="--sidebar-width: 16rem; --sidebar-width-mobile: 18rem; --sidebar-width-icon: 3rem" class="group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex w-full min-h-full">
    <aside id="preview-sidebar-collapsible" data-slot="sidebar" data-variant="sidebar" data-collapsible="icon" data-side="left" data-state="expanded" data-ui--sidebar-target="sidebar" class="group peer text-sidebar-foreground md:block">
      <div data-slot="sidebar-gap" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180 group-data-[collapsible=icon]:w-(--sidebar-width-icon)"></div>
      <div data-slot="sidebar-container" class="fixed inset-y-0 z-10 h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l">
        <div data-sidebar="sidebar" data-slot="sidebar-inner" class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm">
          <div data-slot="sidebar-header" data-sidebar="sidebar" class="flex flex-col gap-2 p-2">
            <div class="flex h-9 min-w-0 items-center px-2 group-data-[collapsible=icon]:px-0">
              <span class="group-data-[collapsible=icon]:hidden">
                <img src="/velvetkit/logo-light.svg" alt="VelvetKit" class="h-8 w-auto max-w-none dark:hidden">
                <img src="/velvetkit/logo-dark.svg" alt="VelvetKit" class="hidden h-8 w-auto max-w-none dark:block">
              </span>
              <span class="hidden size-8 shrink-0 items-center justify-center group-data-[collapsible=icon]:flex">
                <img src="/velvetkit/mark-light.svg" alt="VelvetKit" class="size-7 max-w-none shrink-0 object-contain dark:hidden">
                <img src="/velvetkit/mark-dark.svg" alt="VelvetKit" class="hidden size-7 max-w-none shrink-0 object-contain dark:block">
              </span>
            </div>
          </div>
          <div data-slot="sidebar-content" data-sidebar="content" class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden">
            <div data-slot="sidebar-group" data-sidebar="group" class="relative flex w-full min-w-0 flex-col p-2">
              <div data-slot="sidebar-group-label" data-sidebar="group-label" class="text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0">Platform</div>
              <ul data-slot="sidebar-menu" data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-1">
                <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="true" aria-current="page" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 h-8 bg-accent" href="#">                    <i data-lucide="layout-dashboard" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
                    <span>Dashboard</span>
                  </a>
                </li>
                <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="false" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 h-8" href="#">                    <i data-lucide="bar-chart-3" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
                    <span>Analytics</span>
                  </a>
                </li>
                <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="false" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 h-8" href="#">                    <i data-lucide="folder-kanban" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
                    <span>Projects</span>
                  </a>
                </li>
              </ul>
            </div>
            <div data-slot="sidebar-group" data-sidebar="group" class="relative flex w-full min-w-0 flex-col p-2">
              <div data-slot="sidebar-group-label" data-sidebar="group-label" class="text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0">Account</div>
              <ul data-slot="sidebar-menu" data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-1">
                <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="false" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 h-8" href="#">                    <i data-lucide="user" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
                    <span>Profile</span>
                  </a>
                </li>
                <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="false" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 h-8" href="#">                    <i data-lucide="credit-card" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
                    <span>Billing</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </aside>
    <main data-slot="sidebar-inset" class="bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2">
      <header class="flex h-14 shrink-0 items-center gap-2 border-b px-4">
        <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-9 w-9 disabled:cursor-not-allowed size-7!" aria-controls="preview-sidebar-collapsible" aria-expanded="true" aria-label="Toggle sidebar" data-action="ui--sidebar#toggle" data-ui--sidebar-target="trigger"><i data-lucide="panel-left" class="inline-block shrink-0 w-5 h-5" aria-hidden="true"></i>
        </button>
        <span class="text-sm font-medium">Dashboard</span>
      </header>
      <div class="p-6">  
        <div class="space-y-6">
          <div>
            <h2 class="text-lg font-semibold mb-2">Collapsible Sidebar</h2>
            <p class="text-sm text-muted-foreground">Click the toggle button to collapse the sidebar to icon-only mode. State is persisted in localStorage.</p>
          </div>
          <div class="w-full" data-controller="ui--tabs" data-ui--tabs-active-value="overview" id="ui-tabs-c71eb07a">
            <div role="tablist" class="inline-flex items-center gap-4 border-b border-input"><button type="button" role="tab" id="ui-tab-ui-tabs-c71eb07a-overview" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" aria-selected="true" aria-controls="ui-panel-ui-tabs-c71eb07a-overview" tabindex="0" data-state="active" data-ui--tabs-target="trigger" data-value="overview" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Overview</button>
              <button type="button" role="tab" id="ui-tab-ui-tabs-c71eb07a-analytics" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" aria-selected="false" aria-controls="ui-panel-ui-tabs-c71eb07a-analytics" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="analytics" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Analytics</button>
              <button type="button" role="tab" id="ui-tab-ui-tabs-c71eb07a-reports" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" aria-selected="false" aria-controls="ui-panel-ui-tabs-c71eb07a-reports" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="reports" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Reports</button>
            </div>
            <div role="tabpanel" id="ui-panel-ui-tabs-c71eb07a-overview" class="mt-2" aria-labelledby="ui-tab-ui-tabs-c71eb07a-overview" tabindex="0" data-state="active" data-ui--tabs-target="panel" data-value="overview">        
              <div class="space-y-3">
                <p class="text-sm text-muted-foreground">Project overview with key metrics and recent activity.</p>
                <div class="relative inline-block" data-controller="ui--menu"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-8 rounded-md px-3 text-xs disabled:cursor-not-allowed" aria-busy="false" id="ui-menu-trigger-ui-menu-3df5a4c4" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-3df5a4c4" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Actions</button>
                  <div id="ui-menu-content-ui-menu-3df5a4c4" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="bottom" data-align="start" tabindex="-1">
                    <div class="px-2 py-1.5 text-sm font-semibold text-muted-foreground">Options</div>
                    <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Edit project</button>
                    <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Share</button>
                    <div class="-mx-1 h-px bg-muted" role="separator" aria-orientation="horizontal"></div>
                    <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive" role="menuitem" tabindex="-1" data-ui--menu-target="item">Delete</button>
                  </div>
                </div>
              </div>
            </div>
            <div role="tabpanel" id="ui-panel-ui-tabs-c71eb07a-analytics" class="mt-2" aria-labelledby="ui-tab-ui-tabs-c71eb07a-analytics" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="analytics" hidden="hidden">        
              <p class="text-sm text-muted-foreground">Traffic and conversion analytics over the last 30 days.</p>
            </div>
            <div role="tabpanel" id="ui-panel-ui-tabs-c71eb07a-reports" class="mt-2" aria-labelledby="ui-tab-ui-tabs-c71eb07a-reports" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="reports" hidden="hidden">        
              <p class="text-sm text-muted-foreground">Generated reports and scheduled exports.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
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
<% brand = render("ui/sidebar_preview/brand") %>
<% main = capture do %>
  <div class="space-y-6">
    <div>
      <h2 class="text-lg font-semibold mb-2">Collapsible Sidebar</h2>
      <p class="text-sm text-muted-foreground">Click the toggle button to collapse the sidebar to icon-only mode. State is persisted in localStorage.</p>
    </div>
    <%= render(UI::Tabs.new(default_value: "overview")) do |tabs| %>
      <% tabs.with_list do |list| %>
        <% list.with_trigger(value: "overview") { "Overview" } %>
        <% list.with_trigger(value: "analytics") { "Analytics" } %>
        <% list.with_trigger(value: "reports") { "Reports" } %>
      <% end %>
      <% tabs.with_panel(value: "overview") do %>
        <div class="space-y-3">
          <p class="text-sm text-muted-foreground">Project overview with key metrics and recent activity.</p>
          <%= render(UI::Menu.new) do |menu| %>
            <% menu.with_trigger(variant: :outline, size: :sm) { "Actions" } %>
            <% menu.with_content do |content| %>
              <% content.with_label("Options") %>
              <% content.with_item("Edit project") %>
              <% content.with_item("Share") %>
              <% content.with_divider %>
              <% content.with_item("Delete", variant: :destructive) %>
            <% end %>
          <% end %>
        </div>
      <% end %>
      <% tabs.with_panel(value: "analytics") do %>
        <p class="text-sm text-muted-foreground">Traffic and conversion analytics over the last 30 days.</p>
      <% end %>
      <% tabs.with_panel(value: "reports") do %>
        <p class="text-sm text-muted-foreground">Generated reports and scheduled exports.</p>
      <% end %>
    <% end %>
  </div>
<% end %>
<%= render "ui/sidebar_preview/shell",
      sidebar_id: "preview-sidebar-collapsible",
      collapsible: :icon,
      brand: brand,
      main: main,
      groups: [
        { label: "Platform", items: [
          { icon: "layout-dashboard", text: "Dashboard", active: true },
          { icon: "bar-chart-3",      text: "Analytics" },
          { icon: "folder-kanban",    text: "Projects" }
        ] },
        { label: "Account", items: [
          { icon: "user",        text: "Profile" },
          { icon: "credit-card", text: "Billing" }
        ] }
      ] %>

No notes provided.

No params configured.