shadcn-ui 0.0.1

data/app/views/examples/components/dialog/code/preview.erb

@@ -0,0 +1,14 @@
+<%= render_dialog do %>
+  <%= dialog_trigger do %>
+    <%= render_button("Open Typography", variant: :outline) %>
+  <% end %>
+  <%= dialog_content do %>
+    <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">The King's Plan</h2>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      The king thought long and hard, and finally came up with
+      <a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>
+      : he would tax the jokes in the kingdom.
+    </p>
+    <blockquote class="mt-6 border-l-2 pl-6 italic">"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."</blockquote>
+  <% end %>
+<% end %>

data/app/views/examples/components/dialog/code/usage.erb

@@ -0,0 +1,8 @@
+<%= render_dialog do %>
+  <%= dialog_trigger do %>
+
+  <% end %>
+  <%= dialog_content do %>
+
+  <% end %>
+<% end %>

data/app/views/examples/components/dialog.html.erb

@@ -0,0 +1,148 @@
+<%= render_component_header title: "Dialog",
+      description: "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert." %>
+
+<% content_for :preview, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render_dialog do %>
+      <%= dialog_trigger do %>
+        <%= render_button("Open Typography", variant: :outline) %>
+      <% end %>
+      <%= dialog_content do %>
+        <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">The King's Plan</h2>
+        <p class="leading-7 [&:not(:first-child)]:mt-6">The king thought long and hard, and finally came up with <a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>: he would tax the jokes in the kingdom.</p>
+        <blockquote class="mt-6 border-l-2 pl-6 italic">"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."</blockquote>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("dialog/code/preview", :erb) %>
+<% end %>
+
+<%= render_preview %>
+
+<h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
+
+<%= code_sample(language: "sh") do %>
+rails generate shadcn-ui dialog
+<% end %>
+
+<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage"><a href="/docs/components/dialog#usage">Usage</a></h2>
+
+<%= code_partial("dialog/code/usage", :erb) %>
+
+<%= render_usage("dialog") %>
+
+<div class="pb-12 pt-8">
+  <section>
+    <h2
+      class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0"
+      id="examples">
+      Examples
+    </h2>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render_dialog do %>
+      <%= dialog_trigger do %>
+        <%= render_button("Open Notifications", variant: :outline) %>
+      <% end %>
+      <%= dialog_content do %>
+        <div class="bg-card text-card-foreground">
+          <div class="flex flex-col space-y-1.5  pb-3">
+            <h3 class="font-semibold leading-none tracking-tight">Notifications</h3>
+            <p class="text-sm text-muted-foreground">Choose what you want to be notified about.</p>
+          </div>
+          <div class=" pt-0 grid gap-1">
+            <div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5"><path d="M8.60124 1.25086C8.60124 1.75459 8.26278 2.17927 7.80087 2.30989C10.1459 2.4647 12 4.41582 12 6.79999V10.25C12 11.0563 12.0329 11.7074 12.7236 12.0528C12.931 12.1565 13.0399 12.3892 12.9866 12.6149C12.9333 12.8406 12.7319 13 12.5 13H8.16144C8.36904 13.1832 8.49997 13.4513 8.49997 13.75C8.49997 14.3023 8.05226 14.75 7.49997 14.75C6.94769 14.75 6.49997 14.3023 6.49997 13.75C6.49997 13.4513 6.63091 13.1832 6.83851 13H2.49999C2.2681 13 2.06664 12.8406 2.01336 12.6149C1.96009 12.3892 2.06897 12.1565 2.27638 12.0528C2.96708 11.7074 2.99999 11.0563 2.99999 10.25V6.79999C2.99999 4.41537 4.85481 2.46396 7.20042 2.3098C6.73867 2.17908 6.40036 1.75448 6.40036 1.25086C6.40036 0.643104 6.89304 0.150421 7.5008 0.150421C8.10855 0.150421 8.60124 0.643104 8.60124 1.25086ZM7.49999 3.29999C5.56699 3.29999 3.99999 4.86699 3.99999 6.79999V10.25L4.00002 10.3009C4.0005 10.7463 4.00121 11.4084 3.69929 12H11.3007C10.9988 11.4084 10.9995 10.7463 11 10.3009L11 10.25V6.79999C11 4.86699 9.43299 3.29999 7.49999 3.29999Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+              <div class="space-y-1">
+                <p class="text-sm font-medium leading-none">Everything</p>
+                <p class="text-sm text-muted-foreground">Email digest, mentions &amp; all activity.</p>
+              </div>
+            </div>
+            <div class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5"><path d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+              <div class="space-y-1">
+                <p class="text-sm font-medium leading-none">Available</p>
+                <p class="text-sm text-muted-foreground">Only mentions and comments.</p>
+              </div>
+            </div>
+            <div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5"><path d="M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+              <div class="space-y-1">
+                <p class="text-sm font-medium leading-none">Ignoring</p>
+                <p class="text-sm text-muted-foreground">Turn off all notifications.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("dialog/code/notifications", :erb) %>
+<% end %>
+
+<%= render_example %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render_dialog do %>
+      <%= dialog_trigger do %>
+        <%= render_button("Dialog with Form", variant: :outline) %>
+      <% end %>
+      <%= dialog_content do %>
+        <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+          <h2
+            id="radix-:r7m:"
+            class="text-lg font-semibold leading-none tracking-tight">
+            Edit profile
+          </h2>
+          <p
+            id="radix-:r7n:"
+            class="text-sm text-muted-foreground">
+            Make changes to your profile here. Click save when you're done.
+          </p>
+        </div>
+        <div class="grid gap-4 py-4">
+          <div class="grid grid-cols-4 items-center gap-4">
+            <label
+              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
+              for="name">Name
+            </label>
+            <input
+              class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
+              id="name"
+              value="Pedro Duarte">
+          </div>
+          <div class="grid grid-cols-4 items-center gap-4">
+            <label
+              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
+              for="username">Username
+            </label>
+            <input
+              class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
+              id="username"
+              value="@peduarte">
+          </div>
+          <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+            <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+              type="submit">
+              Save changes
+            </button>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("dialog/code/form", :erb) %>
+<% end %>
+
+<%= render_example %>
+
+</section>
+</div>

data/app/views/examples/components/dropdown-menu.html.erb

@@ -0,0 +1,26 @@
+<%= render_component_header title: "Dropdown Menu",
+      description: "Displays a menu to the user — such as a set of actions or functions — triggered by a button." %>
+
+<%= content_for :preview, flush: true do %>
+  <% render_dropdown_menu do %>
+      <%= dropdown_menu_trigger do %>
+        <%= render_button "Open Dropdown", variant: :outline %>
+      <% end %>
+
+      <%= dropdown_menu_content do %>
+        <%= dropdown_menu_label "My Account" %>
+        <%= render_separator class: "my-1" %>
+        <%= dropdown_menu_item "Profile" %>
+        <%= dropdown_menu_item  do %>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
+            <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
+          </svg>
+          <span>Billing</span>
+          <span class="ml-auto text-xs tracking-widest opacity-60">⌘B</span>
+        <% end %>
+        <%= dropdown_menu_item "Settings" %>
+      <% end %>
+    <% end %>
+<% end %>
+
+<%= render_preview %>

data/app/views/examples/components/hover-card.html.erb

@@ -0,0 +1,24 @@
+<%= render_component_header title: "Hover Card",
+      description: "For sighted users to preview content available behind a link." %>
+
+<% content_for :preview, flush: true do %>
+  <%= render_hover_card do %>
+    <%= hover_card_trigger do %>
+      <%= content_tag :span, "@rails" %>
+    <% end %>
+    <%= hover_card_content do %>
+      <div class="grid gap-2">
+        <div class="space-y-2">
+          <h4 class="font-medium leading-none">Ruby on Rails</h4>
+          <p class="text-sm text-muted-foreground">The Web framework that changed the world.</p>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+
+<% end %>
+
+<%= render_preview %>

data/app/views/examples/components/popover.html.erb

@@ -0,0 +1,34 @@
+<%= render_component_header title: "Popover",
+      description: "Displays rich content in a portal, triggered by a button." %>
+
+<% content_for :preview, flush: true do %>
+  <%= render_popover do %>
+    <%= popover_trigger do %>
+      <%= render_button "Open Popover", variant: :outline %>
+    <% end %>
+    <%= popover_content do %>
+      <div class="grid gap-4">
+        <div class="space-y-2">
+          <h4 class="font-medium leading-none">Dimensions</h4>
+          <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+        </div>
+        <div class="grid gap-2">
+          <div class="grid grid-cols-3 items-center gap-4">
+            <label
+              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              for="width">Width</label><input
+              class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-2 h-8"
+              id="width"
+              value="100%">
+          </div>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+
+<% end %>
+
+<%= render_preview %>

data/app/views/examples/components/separator.html.erb

@@ -0,0 +1,33 @@
+<!--prettier-ignore-->
+
+<%= render "layouts/documentation/component_header",
+  title: "Seperator",
+  description: "Visually or semantically separates content." %>
+<%= content_for :preview, flush: true do %>
+<div>
+  <div class="space-y-1">
+    <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
+    <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
+  </div>
+  <%= render_separator class: "my-4" %>
+  <div class="flex h-5 items-center space-x-4 text-sm">
+    <div>Blog</div>
+    <div
+      data-orientation="vertical"
+      role="none"
+      class="shrink-0 bg-border h-full w-[1px]"></div>
+    <div>Docs</div>
+    <div
+      data-orientation="vertical"
+      role="none"
+      class="shrink-0 bg-border h-full w-[1px]"></div>
+    <div>Source</div>
+  </div>
+</div>
+<% end %>
+
+<%= render_preview %>
+
+<h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
+
+<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage"><a href="/docs/components/dialog#usage">Usage</a></h2>

data/app/views/examples/components/textarea.html.erb

@@ -0,0 +1,12 @@
+<%= render_component_header title: "Textarea",
+      description: "Displays a form textarea or a component that looks like a textarea." %>
+
+<% content_for :preview, flush: true do %>
+  <%= render_textarea name: "sample_textarea" %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+
+<% end %>
+
+<%= render_preview %>

data/app/views/examples/components/toast.html.erb

@@ -0,0 +1,15 @@
+<%= render_component_header title: "Toast",
+      description: "A succinct message that is displayed temporarily." %>
+
+<% content_for :preview, flush: true do %>
+  <%= render_button "Trigger Toast", variant: "outline", data: {controller: "ui--toast", action: "ui--toast#test"} %>
+  <%= render_toast header: "Scheduled: Catch up",
+    description: "Friday, February 10, 2023 at 5:57 PM",
+    action: render_button("Undo", variant: :outline) %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+
+<% end %>
+
+<%= render_preview %>

data/app/views/examples/components/toggle.html.erb

@@ -0,0 +1,12 @@
+<%= render_component_header title: "Toggle",
+      description: "A two-state button that can be either on or off." %>
+
+<% content_for :preview, flush: true do %>
+  <%= render_toggle "𝐁" %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+
+<% end %>
+
+<%= render_preview %>

data/app/views/examples/components/tooltip.html.erb

@@ -0,0 +1,23 @@
+<%= render_component_header title: "Tooltip",
+      description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it." %>
+
+<% content_for :preview, flush: true do %>
+  <%= render_tooltip do %>
+    <%= tooltip_trigger do %>
+      <%= render_button "Hover", variant: :outline %>
+    <% end %>
+    <%= tooltip_content do %>
+      <div class="grid gap-2">
+        <div class="space-y-2">
+          <p class="text-sm text-muted-foreground">More will be revealed.</p>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+
+<% end %>
+
+<%= render_preview %>

data/app/views/layouts/_sidebar.html.erb

@@ -0,0 +1,270 @@
+<aside
+  class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+  <div
+    dir="ltr"
+    class="relative overflow-hidden h-full py-6 pl-8 pr-6 lg:py-8"
+    style="
+      position: relative;
+      --radix-scroll-area-corner-width: 0px;
+      --radix-scroll-area-corner-height: 0px;
+    ">
+    <style>
+      [data-radix-scroll-area-viewport] {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        -webkit-overflow-scrolling: touch;
+      }
+      [data-radix-scroll-area-viewport]::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+    <div
+      data-radix-scroll-area-viewport=""
+      class="h-full w-full rounded-[inherit]"
+      style="overflow: hidden scroll">
+      <div style="min-width: 100%; display: table">
+        <div class="w-full">
+          <div class="pb-4">
+            <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Getting Started</h4>
+            <div class="grid grid-flow-row auto-rows-max text-sm">
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline font-medium text-foreground"
+                target=""
+                rel=""
+                href="/docs">Introduction</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/installation">Installation</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/theming">Theming</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/dark-mode">Dark mode</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/changelog">Changelog</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/about">About</a>
+            </div>
+          </div>
+          <div class="pb-4">
+            <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Components</h4>
+            <div class="grid grid-flow-row auto-rows-max text-sm">
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/accordion">✅ Accordion</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/alert">✅ Alert</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/alert-dialog">✅ Alert Dialog</a>
+              <span
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel="">❌ Aspect Ratio</span>
+              <span
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/avatar">❌ Avatar</span>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/badge">✅ Badge</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/button">✅ Button</a>
+              <span
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/calendar">❌ Calendar</span>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/card">✅ Card</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/checkbox">✅ Checkbox</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/collapsible">✅ Collapsible</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/combobox">Combobox</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/command">Command</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/context-menu">Context Menu</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/data-table">Data Table</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/date-picker">Date Picker</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/dialog">✅ Dialog</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/dropdown-menu">Dropdown Menu</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/form">Form</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/hover-card">✅ Hover Card</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/input">Input</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/label">Label</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/menubar">Menubar</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/navigation-menu">Navigation Menu</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/popover">✅ Popover</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/progress">Progress</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/radio-group">Radio Group</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/scroll-area">Scroll Area</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/select">Select</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/separator">✅ Separator</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/sheet">Sheet</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/skeleton">Skeleton</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/slider">Slider</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/switch">Switch</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/table">Table</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/tabs">Tabs</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/textarea">✅ Textarea</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/toast">✅ Toast</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/toggle">✅ Toggle</a>
+              <a
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                target=""
+                rel=""
+                href="/docs/components/tooltip">✅ Tooltip</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</aside>