shadcn-ui 0.0.1 → 0.0.3

data/app/views/components/ui/_alert.html.erb

@@ -2,7 +2,7 @@
   role="alert"
   class="<%= alert_classes %> relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4">
   <!--prettier-ignore-->
-  <% case variant %>
+  <% case variant.to_sym %>
   <% when :default %>
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +22,19 @@
       y1="19"
       y2="19"></line>
   </svg>
-  <% when :error, :alert %>
+  <% when :info %>
+  <svg class="h-4 w-4 text-info" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path>
+  </svg>
+  <% when :success %>
+  <svg class="h-4 w-4 text-success" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path>
+  </svg>
+  <% when :attention %>
+  <svg class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
+  </svg>
+  <% when :error, :destructive, :danger, :alert %>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -49,7 +61,7 @@
       y1="16"
       y2="16"></line>
   </svg>
-  <% end %>
+  <% end if icon %>
   <h5 class="mb-1 font-medium leading-none tracking-tight"><%= title %></h5>
   <div class="text-sm [&_p]:leading-relaxed"><%= description %></div>
 </div>

data/app/views/components/ui/_alert_dialog.html.erb

@@ -1,5 +1,5 @@
 <div data-controller="ui--dialog">
-  <%= render "components/ui/shared/dialog_background", as: "backdrop" %>
+  <%= render "components/ui/shared/backdrop", as: "backdrop" %>
 
   <%= trigger %>
   <div

data/app/views/components/ui/_card.html.erb

@@ -1,4 +1,4 @@
-<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]">
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-[350px] <%= options[:class] %>">
   <% if title || subtitle %>
   <div class="flex flex-col space-y-1.5 p-6">
     <% if title %>
@@ -8,6 +8,6 @@
     <% end %>
   </div>
   <% end %>
-  <div class="p-0 <%= "p-6 pt-0" if !block && title  %> <%= "p-6" if !block && !title  %> "><%= body %></div>
+  <div class="p-0 <%= "p-6 pt-0" if !block && title %> <%= "p-6" if !block && !title %> "><%= body %></div>
   <% if footer %><footer class="mx-6 mb-6"><%= footer %></footer><% end %>
 </div>

data/app/views/components/ui/_checkbox.html.erb

@@ -8,7 +8,8 @@
       value="on"
       class="peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
       for="<%= name %>"
-      data-action="click->ui--checkbox#toggle">
+      data-action="click->ui--checkbox#toggle"
+      id="<%= options[:id] %>">
       <span
         class="flex items-center justify-center text-current hidden"
         style="pointer-events: none">
@@ -27,11 +28,6 @@
         </svg>
       </span>
     </button>
-    <label
-      for="<%= name %>"
-      data-action="click->ui--checkbox#toggle"
-      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-      <%= label %>
-    </label>
+    <%= render_label name: name, label: label, data: {action: "click->ui--checkbox#toggle"} %>
   </div>
 </div>

data/app/views/components/ui/_collapsible.html.erb

@@ -6,11 +6,7 @@
     class="flex items-center justify-between space-x-4 px-4"
     data-action="click->ui--collapsible#toggle">
     <h4 class="text-sm font-semibold"><%= trigger %></h4>
-    <button
-      class="inline-flex items-center justify-center 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 hover:bg-accent hover:text-accent-foreground h-9 rounded-md w-9 p-0"
-      type="button"
-      aria-expanded="false"
-      data-state="closed">
+    <%= render_button variant: :ghost, data: {state: "closed"}, aria: {expanded: false}, class: "px-[0.75em] " do %>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -26,7 +22,7 @@
         <path d="m7 9 5-5 5 5"></path>
       </svg>
       <span class="sr-only">Toggle</span>
-    </button>
+    <% end %>
   </div>
   <%= yield :preview %>
   <div

data/app/views/components/ui/_dialog.html.erb

@@ -1,7 +1,7 @@
 <div data-controller="ui--dialog">
   <div data-action="click->ui--dialog#open"><%= content_for(:dialog_trigger) %></div>
 
-  <%= render "components/ui/shared/dialog_background", as: "modal" %>
+  <%= render "components/ui/shared/backdrop", as: "modal" %>
 
   <div
     role="dialog"

data/app/views/components/ui/_filter.html.erb

@@ -0,0 +1,14 @@
+<div data-controller="ui--filter">
+<%= render_card do %>
+  <div class="flex items-center">
+    <%= content_for :filter_icon %>
+  <%= render_input name: "filter", placeholder: "Filter items...", style: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %></div>
+  <%= render_separator %>
+  <div class="<%= options[:class] %>">
+    <%= content_tag :div, role: "group" do
+      items.each do |item| %>
+        <div data-ui--filter-target="item"><%= list_item(value: item[:value], name: item[:name], selected: item[:selected]) %></div>
+      <% end
+    end %>
+  </div>
+<% end %>

data/app/views/components/ui/_input.html.erb

@@ -0,0 +1,8 @@
+
+<%= text_field_tag name, value, type: type, id: id,
+              class: options[:class],
+              placeholder: options[:placeholder],
+              disabled: options[:disabled],
+              required: options[:required],
+              readonly: options[:readonly],
+              data: options[:data] %>

data/app/views/components/ui/_label.html.erb

@@ -0,0 +1,3 @@
+<%= label_tag name, label,
+  data: options[:data],
+  class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 #{options[:class]}" %>

data/app/views/components/ui/_list.html.erb

@@ -0,0 +1,5 @@
+<%= content_tag as, role: "group" do
+  items.each do |item| %>
+    <%= list_item(value: item[:value], name: item[:name], selected: item[:selected]) %>
+  <% end
+end %>

data/app/views/components/ui/_progress.html.erb

@@ -0,0 +1,15 @@
+<div
+  aria-valuemax="100"
+  aria-valuemin="0"
+  role="progressbar"
+  data-state="indeterminate"
+  data-max="100"
+  class="relative h-4 overflow-hidden rounded-full bg-secondary w-[60%]"
+  data-controller="ui--progress">
+
+  <div
+    data-state="indeterminate"
+    data-max="100"
+    class="h-full w-full flex-1 bg-primary "
+    style="transform: translateX(-50%)" data-ui--progress-target="progress"></div>
+</div>

data/app/views/components/ui/_sheet.html.erb

@@ -0,0 +1,44 @@
+<div data-controller="ui--sheet" id="<%= options[:id] %>">
+  <div data-action="click->ui--sheet#open"><%= content_for(:sheet_trigger) %></div>
+
+  <%= render "components/ui/shared/backdrop", as: "modal" %>
+
+  <div
+    role="dialog"
+    data-state="closed"
+    data-ui--sheet-target="dialog"
+    class="data-[state=closed]:hidden data-[state=open]:block fixed z-50 gap-4 bg-background p-6 shadow-lg
+        transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500
+        inset-y-0 <%= direction_class(options[:direction]) %> h-full <%= options[:width] %> border-l data-[state=closed]:slide-out-to-<%= options[:direction] %> data-[state=open]:slide-in-from-<%= options[:direction] %> sm:max-w-sm" tabindex="-1"
+    style="pointer-events: auto">
+      <div data-ui--sheet-target="content"><%= content_for(:sheet_content) %></div>
+      <button
+        data-ui--sheet-target="closeButton"
+        type="button"
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <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="h-4 w-4">
+          <line
+            x1="18"
+            x2="6"
+            y1="6"
+            y2="18"></line>
+          <line
+            x1="6"
+            x2="18"
+            y1="6"
+            y2="18"></line>
+        </svg>
+        <span class="sr-only">Close</span>
+      </button>
+  </div>
+</div>

data/app/views/components/ui/_skeleton.html.erb

@@ -0,0 +1 @@
+<div class="preview flex min-h-[350px] w-full justify-center p-10 items-center"><div class="flex items-center space-x-4"><div class="animate-pulse bg-muted h-12 w-12 rounded-full"></div><div class="space-y-2"><div class="animate-pulse rounded-md bg-muted h-4 w-[250px]"></div><div class="animate-pulse rounded-md bg-muted h-4 w-[200px]"></div></div></div></div>

data/app/views/components/ui/_slider.html.erb

@@ -0,0 +1,2 @@
+
+<input type="range" min="1" max="100" value="50" style="background-size: 50% 100%" data-controller="ui--slider" data-action="input->ui--slider#updateRange">

data/app/views/components/ui/_textarea.html.erb

@@ -3,7 +3,7 @@
   placeholder="<%= options[:placeholder] %>"
   name="<%= name %>"
   id="<% id %>"
-  <%= options[:disabled] ? "disabled" : "" %>"
+  <%= options[:disabled] ? "disabled" : "" %>
   <%= options[:required] ? "required" : "" %>
   <%= options[:readonly] ? "readonly" : "" %>
   <%= options[:rows] ? "rows" : "" %>></textarea>

data/app/views/components/ui/shared/{_dialog_background.html.erb → _backdrop.html.erb}

@@ -1,5 +1,6 @@
   <div
     data-ui--dialog-target="<%= as %>"
+    data-ui--sheet-target="<%= as %>"
     data-state="closed"
     class="hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     style="pointer-events: auto"

data/app/views/components/ui/svg/_check.html.erb

@@ -0,0 +1,11 @@
+<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 opacity-0">

data/app/views/documentation/about.html.md

@@ -0,0 +1,20 @@
+# About
+
+<subtitle>Powered by amazing open source projects.</subtitle>
+
+[ui.shadcn.com](https://ui.shadcn.com) is a project by [shadcn](https://shadcn.com).
+
+[shadcn/ui on Rails](https://shadcn-ui-on-rails.avi.nyc) is a project by
+[aviflombaum](https://avi.nyc).
+
+## Credits from shadcn/ui
+
+- [Radix UI](https://radix-ui.com) - For the primitives.
+- [Vercel](https://vercel.com) - Where I host all my projects.
+- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
+- [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`.
+- [cmdk](https://cmdk.paco.me) - For the `<Command />` component.
+
+## License
+
+MIT © [shadcn](https://shadcn.com)

data/app/views/documentation/generators.html.md

@@ -0,0 +1 @@
+# Component Generators

data/app/views/documentation/index.html.erb.bak

@@ -0,0 +1,70 @@
+<main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
+  <div class="mx-auto w-full min-w-0">
+    <div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
+      <div class="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+      <div class="font-medium text-foreground">Introduction</div>
+    </div>
+    <div class="space-y-2">
+      <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">Introduction</h1>
+      <p class="text-lg text-muted-foreground"><span data-br=":r1n:" data-brr="1" style="display: inline-block; vertical-align: top; text-decoration: inherit; max-width: 522px;">Re-usable components built using Radix UI and Tailwind CSS.</span><script>
+          self.__wrap_b=(e,t,r)=>{let n=(r=r||document.querySelector(`[data-br="${e}"]`)).parentElement,a=e=>r.style.maxWidth=e+"px";r.style.maxWidth="";let o=n.clientWidth,l=n.clientHeight,i=o/2-.25,s=o+.5,u;if(o){for(;i+1<s;)a(u=Math.round((i+s)/2)),n.clientHeight===l?s=u:i=u;a(s*t+o*(1-t))}r.__wrap_o||"undefined"!=typeof ResizeObserver&&(r.__wrap_o=new ResizeObserver(()=>{self.__wrap_b(0,+r.dataset.brr,r)})).observe(n)};self.__wrap_b(":r1n:",1)
+        </script></p>
+    </div>
+    <div class="pb-12 pt-8">
+      <div class="mdx">
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6">This is <strong>NOT</strong> a component library. It's a collection of re-usable components that you can copy and paste into your apps.</p>
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6"><strong>What do you mean by not a component library?</strong></p>
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6">I mean you do not install it as a dependency. It is not available or distributed via npm.</p>
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.</p>
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6"><em>Use this as a reference to build your own component libraries.</em></p>
+        <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="faq"><a class="font-medium underline underline-offset-4 subheading-anchor" aria-label="Link to section" href="#faq"><span class="icon icon-link"></span></a>FAQ</h2>
+        <div data-orientation="vertical">
+          <div data-state="closed" data-orientation="vertical" class="border-b">
+            <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:r1p:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:r1o:" class="flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">
+                <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Why copy/paste and not packaged as a dependency?</p>
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></h3>
+            <div data-state="closed" id="radix-:r1p:" hidden="" role="region" aria-labelledby="radix-:r1o:" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"></div>
+          </div>
+          <div data-state="closed" data-orientation="vertical" class="border-b">
+            <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:r1r:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:r1q:" class="flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">
+                <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Do you plan to publish it as an npm package?</p>
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></h3>
+            <div data-state="closed" id="radix-:r1r:" hidden="" role="region" aria-labelledby="radix-:r1q:" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"></div>
+          </div>
+          <div data-state="closed" data-orientation="vertical" class="border-b">
+            <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:r1t:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:r1s:" class="flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">
+                <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Which frameworks are supported?</p>
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></h3>
+            <div data-state="closed" id="radix-:r1t:" hidden="" role="region" aria-labelledby="radix-:r1s:" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"></div>
+          </div>
+          <div data-state="closed" data-orientation="vertical" class="border-b">
+            <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:r1v:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:r1u:" class="flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">
+                <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Can I use this in my project?</p>
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></h3>
+            <div data-state="closed" id="radix-:r1v:" hidden="" role="region" aria-labelledby="radix-:r1u:" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-row items-center justify-between"><a class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 ml-auto" href="/docs/installation">Installation<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div>
+  </div>
+  <div class="hidden text-sm xl:block">
+    <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+      <div dir="ltr" class="relative overflow-hidden pb-10" 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="space-y-2">
+              <p class="font-medium">On This Page</p>
+              <ul class="m-0 list-none">
+                <li class="mt-0 pt-2"><a href="#faq" class="inline-block no-underline transition-colors hover:text-foreground text-muted-foreground">FAQ</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>

data/app/views/documentation/index.html.md

@@ -0,0 +1,37 @@
+# Introduction
+
+<subtitle>Re-usable components built using Radix UI and Tailwind CSS.</subtitle>
+
+This is **NOT** a component library. It's a collection of re-usable components that you can copy and
+paste into your apps.
+
+**What do you mean by not a component library?**
+
+I mean you do not install it as a dependency. It is not available or distributed via npm.
+
+Pick the components you need. Copy and paste the code into your project and customize to your needs.
+The code is yours.
+
+_Use this as a reference to build your own component libraries._
+
+## What?
+
+### The Application
+
+The [repository for this library](https://github.com/aviflombaum/shadcn-rails) is both a gem and an
+example repository containing this documentation. AFAIK there is no consequence in terms of bloat to
+packaging and entire functional rails app within a gem, especially given the app has very few
+dependencies, no database, and is generally very small. The benefit is that you can run the app
+locally and see the components in action by booting up the application with `./bin/dev/` and going
+to localhost. In fact, this website is running the application within the gem right now.
+
+The benefit of this is that it gives you a working application from which to modify and copy the raw
+files for each component. The end goal of the gem is to simply copy working code from this
+application into your app so that you take ownership over the component and can customize it to your
+needs without any unnecessary abstraction.
+
+### The Gem
+
+The gem provides a generator for you to use in your application to facilitate copying the code from
+this application to yours. It also enforces some setup for you as the component files alone in
+isolation won't always work. [Learn more about the generator](/documentation/generators).