diff --git a/docs/css/custom.css b/docs/css/custom.css
new file mode 100644
index 0000000..1b06eea
--- /dev/null
+++ b/docs/css/custom.css
@@ -0,0 +1,55 @@
+.content {
+  > h2 {
+    @apply mt-16 mb-6 scroll-m-22 border-b pb-4 text-xl font-semibold tracking-tight first:mt-0;
+  }
+  > h3 {
+    @apply mt-8 mb-6 scroll-m-22 text-lg font-semibold tracking-tight;
+  }
+  .prose {
+    @apply my-6;
+    
+    a {
+      @apply font-medium underline underline-offset-4;
+    }
+    code:not(pre > code) {
+      @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
+    }
+    blockquote {
+      @apply border-l-4 border-border pl-4;
+    }
+    ol {
+      @apply list-decimal ml-6;
+    }
+    ul {
+      @apply list-disc ml-6;
+    }
+    b,
+    strong {
+      @apply font-semibold;
+    }
+    > p,
+    > blockquote,
+    > ul,
+    > ol,
+    > dl,
+    > table,
+    > pre,
+    > p {
+      @apply my-4;
+    }
+    > *:first-child {
+      @apply !mt-0;
+    }
+    > *:last-child {
+      @apply !mb-0;
+    }
+  }
+  .step {
+    counter-increment: step;
+  }
+  .step:before {
+    @apply md:absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
+    @apply md:ml-[-50px] md:mt-[-4px];
+    content: counter(step);
+  }
+}
\ No newline at end of file
diff --git a/docs/css/styles.css b/docs/css/styles.css
new file mode 100644
index 0000000..641a99f
--- /dev/null
+++ b/docs/css/styles.css
@@ -0,0 +1,16 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
+
+@import "tailwindcss";
+@import "basecoat";
+@import "./custom.css";
+
+@theme {
+  --font-sans: 'Inter';
+  --font-mono: 'JetBrains Mono';
+}
+
+/* @import "./theme-orange.css"; */
\ No newline at end of file
diff --git a/docs/css/theme-orange.css b/docs/css/theme-orange.css
new file mode 100644
index 0000000..7822a0a
--- /dev/null
+++ b/docs/css/theme-orange.css
@@ -0,0 +1,68 @@
+:root {
+  --radius: 0.5rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.606 0.25 292.717);
+  --primary-foreground: oklch(0.969 0.016 293.756);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.606 0.25 292.717);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.606 0.25 292.717);
+  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.606 0.25 292.717);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.541 0.281 293.009);
+  --primary-foreground: oklch(0.969 0.016 293.756);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.541 0.281 293.009);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.541 0.281 293.009);
+  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.541 0.281 293.009);
+}
diff --git a/docs/css/theme.css b/docs/css/theme.css
new file mode 100644
index 0000000..45a3a77
--- /dev/null
+++ b/docs/css/theme.css
@@ -0,0 +1,146 @@
+:root {
+  --background: oklch(1.00 0 0);
+  --foreground: oklch(0.27 0 0);
+  --card: oklch(1.00 0 0);
+  --card-foreground: oklch(0.27 0 0);
+  --popover: oklch(1.00 0 0);
+  --popover-foreground: oklch(0.27 0 0);
+  --primary: oklch(0.77 0.16 70.08);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.97 0.00 264.54);
+  --secondary-foreground: oklch(0.45 0.03 256.80);
+  --muted: oklch(0.98 0.00 247.84);
+  --muted-foreground: oklch(0.55 0.02 264.36);
+  --accent: oklch(0.99 0.02 95.28);
+  --accent-foreground: oklch(0.47 0.12 46.20);
+  --destructive: oklch(0.64 0.21 25.33);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.93 0.01 264.53);
+  --input: oklch(0.93 0.01 264.53);
+  --ring: oklch(0.77 0.16 70.08);
+  --chart-1: oklch(0.77 0.16 70.08);
+  --chart-2: oklch(0.67 0.16 58.32);
+  --chart-3: oklch(0.56 0.15 49.00);
+  --chart-4: oklch(0.47 0.12 46.20);
+  --chart-5: oklch(0.41 0.11 45.90);
+  --sidebar: oklch(0.98 0.00 247.84);
+  --sidebar-foreground: oklch(0.27 0 0);
+  --sidebar-primary: oklch(0.77 0.16 70.08);
+  --sidebar-primary-foreground: oklch(1.00 0 0);
+  --sidebar-accent: oklch(0.99 0.02 95.28);
+  --sidebar-accent-foreground: oklch(0.47 0.12 46.20);
+  --sidebar-border: oklch(0.93 0.01 264.53);
+  --sidebar-ring: oklch(0.77 0.16 70.08);
+  --font-sans: Inter, sans-serif;
+  --font-serif: Source Serif 4, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.375rem;
+  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+}
+
+.dark {
+  --background: oklch(0.20 0 0);
+  --foreground: oklch(0.92 0 0);
+  --card: oklch(0.27 0 0);
+  --card-foreground: oklch(0.92 0 0);
+  --popover: oklch(0.27 0 0);
+  --popover-foreground: oklch(0.92 0 0);
+  --primary: oklch(0.77 0.16 70.08);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.27 0 0);
+  --secondary-foreground: oklch(0.92 0 0);
+  --muted: oklch(0.27 0 0);
+  --muted-foreground: oklch(0.72 0 0);
+  --accent: oklch(0.47 0.12 46.20);
+  --accent-foreground: oklch(0.92 0.12 95.75);
+  --destructive: oklch(0.64 0.21 25.33);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.37 0 0);
+  --input: oklch(0.37 0 0);
+  --ring: oklch(0.77 0.16 70.08);
+  --chart-1: oklch(0.84 0.16 84.43);
+  --chart-2: oklch(0.67 0.16 58.32);
+  --chart-3: oklch(0.47 0.12 46.20);
+  --chart-4: oklch(0.56 0.15 49.00);
+  --chart-5: oklch(0.47 0.12 46.20);
+  --sidebar: oklch(0.17 0 0);
+  --sidebar-foreground: oklch(0.92 0 0);
+  --sidebar-primary: oklch(0.77 0.16 70.08);
+  --sidebar-primary-foreground: oklch(1.00 0 0);
+  --sidebar-accent: oklch(0.47 0.12 46.20);
+  --sidebar-accent-foreground: oklch(0.92 0.12 95.75);
+  --sidebar-border: oklch(0.37 0 0);
+  --sidebar-ring: oklch(0.77 0.16 70.08);
+  --font-sans: Inter, sans-serif;
+  --font-serif: Source Serif 4, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.375rem;
+  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}
\ No newline at end of file
diff --git a/docs/src/_includes/components/dialog.njk b/docs/src/_includes/components/dialog.njk
index 80dca78..c6232f3 100644
--- a/docs/src/_includes/components/dialog.njk
+++ b/docs/src/_includes/components/dialog.njk
@@ -110,7 +110,7 @@
           @click="hide()"
           aria-label="Close dialog"
         >
-          {% lucide "x" %}
+          <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="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
         </button>
       {% endif %}
     </article>
diff --git a/docs/src/_includes/components/dropdown-menu.njk b/docs/src/_includes/components/dropdown-menu.njk
index 09b8e50..5a6c3be 100644
--- a/docs/src/_includes/components/dropdown-menu.njk
+++ b/docs/src/_includes/components/dropdown-menu.njk
@@ -1,3 +1,14 @@
+{#
+  Renders a dropdown menu component.
+
+  @param id {string} [optional] - Unique identifier for the dropdown component.
+  @param trigger {string} [optional] - HTML content for the button that triggers the dropdown.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
+  @param include_script {boolean} [optional] [default=false] - Whether to include the Alpine.js component script.
+  @param register_on {array} [optional] [default=[\"alpine:init\"]] - Alpine.js events to register the component on.
+#}
 {% macro dropdown_menu(
   id=None,
   trigger=None,
diff --git a/docs/src/_includes/components/popover.njk b/docs/src/_includes/components/popover.njk
index f8c7e3d..23452a3 100644
--- a/docs/src/_includes/components/popover.njk
+++ b/docs/src/_includes/components/popover.njk
@@ -1,3 +1,14 @@
+{#
+  Renders a generic popover component, often used internally by other components like dropdowns or selects.
+
+  @param id {string} [optional] - Unique identifier for the popover component.
+  @param trigger {string} [optional] - HTML content for the element that triggers the popover.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger element.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @param include_script {boolean} [optional] [default=false] - Whether to include the Alpine.js component script.
+  @param register_on {array} [optional] [default=[\"alpine:init\"]] - Alpine.js events to register the component on.
+#}
 {% macro popover(
   id=None,
   trigger=None,
diff --git a/docs/src/_includes/components/select.njk b/docs/src/_includes/components/select.njk
index fa587e1..267103e 100644
--- a/docs/src/_includes/components/select.njk
+++ b/docs/src/_includes/components/select.njk
@@ -1,3 +1,19 @@
+{#
+  Renders a select or combobox component.
+
+  @param id {string} [optional] - Unique identifier for the select component.
+  @param selected {string} [optional] - The initially selected value.
+  @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
+  @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input.
+  @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only).
+  @param is_combobox {boolean} [optional] [default=false] - Renders a combobox with search functionality if true.
+  @param include_script {boolean} [optional] [default=false] - Whether to include the Alpine.js component script.
+  @param register_on {array} [optional] [default=[\"alpine:init\"]] - Alpine.js events to register the component on.
+#}
 {% macro select(
   id=None,
   selected=None,
@@ -42,9 +58,9 @@
     <div x-html="selectedLabel" class="flex items-center gap-x-2"
     ></div>
     {% if is_combobox %}
-      {% lucide "chevrons-up-down", class="text-muted-foreground opacity-50 shrink-0" %}
+      <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="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down text-muted-foreground opacity-50 shrink-0"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
     {% else %}
-      {% lucide "chevron-down", class="text-muted-foreground opacity-50 shrink-0" %}
+      <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="lucide lucide-chevron-down-icon lucide-chevron-down text-muted-foreground opacity-50 shrink-0"><path d="m6 9 6 6 6-6"/></svg>
     {% endif %}
   </button>
   <div
@@ -58,7 +74,7 @@
   >
     {% if is_combobox %}
     <header>
-      {% lucide "search" %}
+      <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="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
       <input
         type="text"
         value=""
diff --git a/docs/src/_includes/components/tabs.njk b/docs/src/_includes/components/tabs.njk
index 7135365..d762253 100644
--- a/docs/src/_includes/components/tabs.njk
+++ b/docs/src/_includes/components/tabs.njk
@@ -1,3 +1,20 @@
+{#
+  Renders a tabs component.
+
+  @param id {string} - Unique identifier for the tabs component.
+  @param tabsets {array} - An array of objects, each representing a tab and its panel.
+    Each object should have:
+    - id {string}: Unique identifier prefix for the tab and panel.
+    - tab {string}: HTML content for the tab button.
+    - panel {string} [optional]: HTML content for the tab panel.
+    - tab_attrs {object} [optional]: Additional HTML attributes for the tab button.
+    - panel_attrs {object} [optional]: Additional HTML attributes for the tab panel div.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param tablist_attrs {object} [optional] - Additional HTML attributes for the tablist nav element.
+  @param default_tab_index {number} [optional] [default=1] - The 1-based index of the tab to be active initially.
+  @param include_script {boolean} [optional] [default=false] - Whether to include the Alpine.js component script.
+  @param register_on {array} [optional] [default=[\"alpine:init\"]] - Alpine.js events to register the component on.
+#}
 {% macro tabs(
     id,
     tabsets=[],
diff --git a/docs/src/_includes/components/toast.njk b/docs/src/_includes/components/toast.njk
index 7985b15..85544b8 100644
--- a/docs/src/_includes/components/toast.njk
+++ b/docs/src/_includes/components/toast.njk
@@ -1,3 +1,24 @@
+{#
+  Renders a toaster container and individual toast messages.
+  Can render the initial container or be used with htmx OOB swaps to add toasts dynamically.
+
+  @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container.
+  @param toasts {array} [optional] - An array of toast objects to render initially.
+    Each toast object can have:
+    - category {string} [optional]: Type of toast ('success', 'error', 'info', 'warning'). Determines icon and ARIA role.
+    - title {string} [optional]: The main title text of the toast.
+    - description {string} [optional]: The secondary description text.
+    - duration {number} [optional] [default=5000]: Duration in milliseconds before the toast auto-dismisses.
+    - action {object} [optional]: Defines an action button.
+      - label {string}: Button text.
+      - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+      - url {string}: URL for an anchor link button.
+    - cancel {object} [optional]: Defines a cancel/dismiss button (similar structure to action).
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
+  @param is_fragment {boolean} [optional] [default=false] - If true, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
+  @param include_script {boolean} [optional] [default=false] - Whether to include the Alpine.js component script. Ignored if is_fragment is true.
+  @param register_on {array} [optional] [default=[\"alpine:init\"]] - Alpine.js events to register the component on. Ignored if is_fragment is true.
+#}
 {% macro toaster(
   id="toaster",
   toasts=[],
diff --git a/docs/src/_includes/layouts/component.njk b/docs/src/_includes/layouts/component.njk
deleted file mode 100644
index fa436f0..0000000
--- a/docs/src/_includes/layouts/component.njk
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: layouts/base.njk
----
-
-<main class="mx-auto relative py-6 lg:gap-10 lg:py-8 flex w-full max-w-screen-lg">
-  <div class="mx-auto w-full min-w-0 max-w-screen-md">
-    <header class="space-y-2">
-      <h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
-      <p class="text-muted-foreground">{{ description }}</p>
-    </header>
-    <article class="pb-12 pt-8 [&>h2]:mt-16 [&>h2]:scroll-m-22 [&>h2]:border-b [&>h2]:pb-4 [&>h2]:text-xl [&>h2]:font-semibold [&>h2]:tracking-tight [&>h2]:first:mt-0 [&>h3]:font-heading [&>h3]:mt-8 [&>h3]:scroll-m-22 [&>h3]:text-lg [&>h3]:font-semibold [&>h3]:tracking-tight">
-      {{ content | safe }}
-    </article>
-  </div>
-  <div class="hidden text-sm xl:block w-full max-w-[300px]">
-    <nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
-      <h4 class="font-medium">On This Page</h4>
-      {% if toc %}
-        {% macro renderToc(items) %}
-          {% if items and items.length %}
-            <ul>
-            {% for item in items %}
-              <li>
-                <a href="#{{ item.id }}">{{ item.label }}</a>
-                {% if item.children and item.children.length %}
-                  {{ renderToc(item.children) }}
-                {% endif %}
-              </li>
-            {% endfor %}
-            </ul>
-          {% endif %}
-        {% endmacro %}
-        {{ renderToc(toc) }}
-      {% else %}
-        <p class="text-muted-foreground text-center bg-muted rounded-md p-2">No table of contents.</p>
-      {% endif %}
-    </nav>
-  </div>
-</main>
\ No newline at end of file
diff --git a/docs/src/_includes/layouts/page.njk b/docs/src/_includes/layouts/page.njk
index fa436f0..15cd3fc 100644
--- a/docs/src/_includes/layouts/page.njk
+++ b/docs/src/_includes/layouts/page.njk
@@ -3,37 +3,37 @@ layout: layouts/base.njk
 ---
 
 <main class="mx-auto relative py-6 lg:gap-10 lg:py-8 flex w-full max-w-screen-lg">
-  <div class="mx-auto w-full min-w-0 max-w-screen-md">
+  <div class="mx-auto w-full max-w-screen-md">
     <header class="space-y-2">
-      <h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
+      <h1 class="text-3xl font-medium tracking-tight">{{ title }}</h1>
       <p class="text-muted-foreground">{{ description }}</p>
     </header>
-    <article class="pb-12 pt-8 [&>h2]:mt-16 [&>h2]:scroll-m-22 [&>h2]:border-b [&>h2]:pb-4 [&>h2]:text-xl [&>h2]:font-semibold [&>h2]:tracking-tight [&>h2]:first:mt-0 [&>h3]:font-heading [&>h3]:mt-8 [&>h3]:scroll-m-22 [&>h3]:text-lg [&>h3]:font-semibold [&>h3]:tracking-tight">
+    <article class="pb-12 mt-8 content">
       {{ content | safe }}
     </article>
   </div>
-  <div class="hidden text-sm xl:block w-full max-w-[300px]">
-    <nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
-      <h4 class="font-medium">On This Page</h4>
-      {% if toc %}
-        {% macro renderToc(items) %}
-          {% if items and items.length %}
-            <ul>
-            {% for item in items %}
-              <li>
-                <a href="#{{ item.id }}">{{ item.label }}</a>
-                {% if item.children and item.children.length %}
-                  {{ renderToc(item.children) }}
-                {% endif %}
-              </li>
-            {% endfor %}
-            </ul>
-          {% endif %}
-        {% endmacro %}
-        {{ renderToc(toc) }}
-      {% else %}
-        <p class="text-muted-foreground text-center bg-muted rounded-md p-2">No table of contents.</p>
-      {% endif %}
-    </nav>
-  </div>
+  {% if toc %}
+    <div class="hidden text-sm xl:block w-full max-w-[300px]">
+      <nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
+        <h4 class="font-medium">On This Page</h4>
+        {% if toc %}
+          {% macro renderToc(items) %}
+            {% if items and items.length %}
+              <ul>
+              {% for item in items %}
+                <li>
+                  <a href="#{{ item.id }}">{{ item.label }}</a>
+                  {% if item.children and item.children.length %}
+                    {{ renderToc(item.children) }}
+                  {% endif %}
+                </li>
+              {% endfor %}
+              </ul>
+            {% endif %}
+          {% endmacro %}
+          {{ renderToc(toc) }}
+        {% endif %}
+      </nav>
+    </div>
+  {% endif %}
 </main>
\ No newline at end of file
diff --git a/docs/src/_includes/macros/code_block.njk b/docs/src/_includes/macros/code_block.njk
index 58c993d..271935f 100644
--- a/docs/src/_includes/macros/code_block.njk
+++ b/docs/src/_includes/macros/code_block.njk
@@ -1,6 +1,6 @@
-{% macro code_block(code, language="html") %}
+{% macro code_block(code, language="html", class="my-4") %}
 <div 
-  class="relative"
+  class="relative {{ class }}"
   x-data="{ 
     copied: false, 
     copy() { 
@@ -25,5 +25,4 @@
     {% lucide "check", { "class": "size-4", "x-show": "copied" } %}
   </button>
 </div>
-{% endmacro %}
-
+{% endmacro %}
\ No newline at end of file
diff --git a/docs/src/_includes/macros/code_preview.njk b/docs/src/_includes/macros/code_preview.njk
index 8ccee78..0146792 100644
--- a/docs/src/_includes/macros/code_preview.njk
+++ b/docs/src/_includes/macros/code_preview.njk
@@ -1,6 +1,6 @@
 {% macro code_preview(id, code, class=None, default_code=false) %}
 {% from "./code_block.njk" import code_block %}
-{% set code_panel = code_block(code) %}
+{% set code_panel = code_block(code, class="") %}
 {% set preview_panel %}
 <div class="ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
   <div class="preview flex min-h-[350px] w-full justify-center p-10 items-center">
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index feda404..0d60202 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -1,4 +1,7 @@
 /*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
 @layer properties;
@@ -45,8 +48,6 @@
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-normal: 400;
@@ -340,18 +341,30 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
   .mr-auto {
     margin-right: auto;
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .mb-12 {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
   .ml-\(--sidebar-width\) {
     margin-left: var(--sidebar-width);
   }
@@ -370,6 +383,9 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -503,9 +519,6 @@
   .max-w-xl {
     max-width: var(--container-xl);
   }
-  .min-w-0 {
-    min-width: calc(var(--spacing) * 0);
-  }
   .min-w-5 {
     min-width: calc(var(--spacing) * 5);
   }
@@ -538,6 +551,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .scroll-m-20 {
+    scroll-margin: calc(var(--spacing) * 20);
+  }
   .scroll-mt-16 {
     scroll-margin-top: calc(var(--spacing) * 16);
   }
@@ -758,9 +774,6 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
-  .pt-8 {
-    padding-top: calc(var(--spacing) * 8);
-  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -1205,6 +1218,11 @@
       gap: calc(var(--spacing) * 2.5);
     }
   }
+  .md\:ml-4 {
+    @media (width >= 48rem) {
+      margin-left: calc(var(--spacing) * 4);
+    }
+  }
   .md\:max-w-\[200px\] {
     @media (width >= 48rem) {
       max-width: 200px;
@@ -1215,6 +1233,17 @@
       flex-direction: row;
     }
   }
+  .md\:border-l {
+    @media (width >= 48rem) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  }
+  .md\:pl-8 {
+    @media (width >= 48rem) {
+      padding-left: calc(var(--spacing) * 8);
+    }
+  }
   .lg\:gap-10 {
     @media (width >= 64rem) {
       gap: calc(var(--spacing) * 10);
@@ -1527,80 +1556,6 @@
       height: calc(var(--spacing) * 4);
     }
   }
-  .\[\&\>h2\]\:mt-16 {
-    &>h2 {
-      margin-top: calc(var(--spacing) * 16);
-    }
-  }
-  .\[\&\>h2\]\:scroll-m-22 {
-    &>h2 {
-      scroll-margin: calc(var(--spacing) * 22);
-    }
-  }
-  .\[\&\>h2\]\:border-b {
-    &>h2 {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
-    }
-  }
-  .\[\&\>h2\]\:pb-4 {
-    &>h2 {
-      padding-bottom: calc(var(--spacing) * 4);
-    }
-  }
-  .\[\&\>h2\]\:text-xl {
-    &>h2 {
-      font-size: var(--text-xl);
-      line-height: var(--tw-leading, var(--text-xl--line-height));
-    }
-  }
-  .\[\&\>h2\]\:font-semibold {
-    &>h2 {
-      --tw-font-weight: var(--font-weight-semibold);
-      font-weight: var(--font-weight-semibold);
-    }
-  }
-  .\[\&\>h2\]\:tracking-tight {
-    &>h2 {
-      --tw-tracking: var(--tracking-tight);
-      letter-spacing: var(--tracking-tight);
-    }
-  }
-  .\[\&\>h2\]\:first\:mt-0 {
-    &>h2 {
-      &:first-child {
-        margin-top: calc(var(--spacing) * 0);
-      }
-    }
-  }
-  .\[\&\>h3\]\:mt-8 {
-    &>h3 {
-      margin-top: calc(var(--spacing) * 8);
-    }
-  }
-  .\[\&\>h3\]\:scroll-m-22 {
-    &>h3 {
-      scroll-margin: calc(var(--spacing) * 22);
-    }
-  }
-  .\[\&\>h3\]\:text-lg {
-    &>h3 {
-      font-size: var(--text-lg);
-      line-height: var(--tw-leading, var(--text-lg--line-height));
-    }
-  }
-  .\[\&\>h3\]\:font-semibold {
-    &>h3 {
-      --tw-font-weight: var(--font-weight-semibold);
-      font-weight: var(--font-weight-semibold);
-    }
-  }
-  .\[\&\>h3\]\:tracking-tight {
-    &>h3 {
-      --tw-tracking: var(--tracking-tight);
-      letter-spacing: var(--tracking-tight);
-    }
-  }
   .\[\&\>svg\]\:size-4 {
     &>svg {
       width: calc(var(--spacing) * 4);
@@ -3823,117 +3778,119 @@
     }
   }
 }
-@layer components {
-  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-    --tw-leading: var(--leading-tight);
-    line-height: var(--leading-tight);
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
-  .prose h1, .h1 {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-  }
-  .prose h2, .h2 {
+.content {
+  > h2 {
+    margin-top: calc(var(--spacing) * 16);
+    margin-bottom: calc(var(--spacing) * 6);
+    scroll-margin: calc(var(--spacing) * 22);
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    padding-bottom: calc(var(--spacing) * 4);
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
-  .prose h3, .h3 {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
-  .prose h4, .prose h5, .prose h6, .h4, .h5, .h6 {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-  }
-  .prose a, .link {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    text-decoration-line: underline;
-    text-underline-offset: 4px;
-  }
-  .prose code, .code {
-    position: relative;
-    border-radius: 0.25rem;
-    background-color: var(--color-muted);
-    padding-inline: 0.3rem;
-    padding-block: 0.2rem;
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .prose pre:has(> code), .code-block {
-    border-radius: var(--radius-md);
-    border-color: var(--color-border);
-    background-color: var(--color-muted);
-  }
-  .prose pre code, .code-block code {
-    display: inline-block;
-    padding: calc(var(--spacing) * 4);
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .prose blockquote, .quote {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 4px;
-    border-color: var(--color-border);
-    padding-left: calc(var(--spacing) * 4);
-  }
-  .prose ol, .ordered-list {
-    margin-block: calc(var(--spacing) * 6);
-    margin-left: calc(var(--spacing) * 6);
-    list-style-type: decimal;
-    li {
-      margin-bottom: calc(var(--spacing) * 2);
-    }
-  }
-  .prose ul, .unordered-list {
-    margin-block: calc(var(--spacing) * 6);
-    margin-left: calc(var(--spacing) * 6);
-    list-style-type: disc;
-    li {
-      margin-bottom: calc(var(--spacing) * 2);
-    }
-    ul, ol {
-      margin-block: calc(var(--spacing) * 2);
-    }
-  }
-  .prose > *:first-child {
-    margin-top: calc(var(--spacing) * 0) !important;
-  }
-  .prose > *:last-child {
-    margin-bottom: calc(var(--spacing) * 0) !important;
-  }
-  .prose h1 {
-    margin-bottom: calc(var(--spacing) * 8);
-  }
-  .prose h2 {
-    margin-top: calc(var(--spacing) * 8);
-    margin-bottom: calc(var(--spacing) * 6);
-  }
-  .prose h3 {
-    margin-top: calc(var(--spacing) * 6);
-    margin-bottom: calc(var(--spacing) * 4);
-  }
-  .prose h4 {
-    margin-block: calc(var(--spacing) * 4);
-  }
-  .prose h5 {
-    margin-block: calc(var(--spacing) * 4);
-  }
-  .prose h6 {
-    margin-block: calc(var(--spacing) * 4);
-  }
-  .prose > p, .prose > blockquote, .prose > ul, .prose > ol, .prose > dl, .prose > table, .prose > pre, .prose > p {
-    margin-block: calc(var(--spacing) * 4);
-  }
-  .prose > *:last-child {
-    margin-bottom: calc(var(--spacing) * 0) !important;
-  }
-  .prose strong, .prose b {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+    &:first-child {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+  > h3 {
+    margin-top: calc(var(--spacing) * 8);
+    margin-bottom: calc(var(--spacing) * 6);
+    scroll-margin: calc(var(--spacing) * 22);
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+  .prose {
+    margin-block: calc(var(--spacing) * 6);
+    a {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      text-decoration-line: underline;
+      text-underline-offset: 4px;
+    }
+    code:not(pre > code) {
+      position: relative;
+      border-radius: 0.25rem;
+      background-color: var(--color-muted);
+      padding-inline: 0.3rem;
+      padding-block: 0.2rem;
+      font-family: var(--font-mono);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+    blockquote {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 4px;
+      border-color: var(--color-border);
+      padding-left: calc(var(--spacing) * 4);
+    }
+    ol {
+      margin-left: calc(var(--spacing) * 6);
+      list-style-type: decimal;
+    }
+    ul {
+      margin-left: calc(var(--spacing) * 6);
+      list-style-type: disc;
+    }
+    b, strong {
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+    }
+    > p, > blockquote, > ul, > ol, > dl, > table, > pre, > p {
+      margin-block: calc(var(--spacing) * 4);
+    }
+    > *:first-child {
+      margin-top: calc(var(--spacing) * 0) !important;
+    }
+    > *:last-child {
+      margin-bottom: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .step {
+    counter-increment: step;
+  }
+  .step:before {
+    margin-right: calc(var(--spacing) * 2);
+    display: inline-flex;
+    height: calc(var(--spacing) * 8);
+    width: calc(var(--spacing) * 8);
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+    border-color: var(--color-background);
+    background-color: var(--color-muted);
+    text-align: center;
+    text-indent: -1px;
+    font-family: var(--font-mono);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    @media (width >= 48rem) {
+      position: absolute;
+    }
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 9);
+    }
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 9);
+    }
+    @media (width >= 48rem) {
+      margin-top: -4px;
+    }
+    @media (width >= 48rem) {
+      margin-left: -50px;
+    }
+    content: counter(step);
   }
 }
 @property --tw-translate-x {
diff --git a/docs/src/components/accordion.njk b/docs/src/components/accordion.njk
index a958a47..a01bb3e 100644
--- a/docs/src/components/accordion.njk
+++ b/docs/src/components/accordion.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Accordion
 description: A vertically stacked set of interactive headings that each reveal a section of content.
 toc:
@@ -8,7 +8,6 @@ toc:
 ---
 
 {% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
 
 <div class="alert mb-6">
   {% lucide "circle-alert" %}
@@ -68,4 +67,4 @@ toc:
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<p class="prose my-6">Basecoat animates <code>&lt;details&gt;</code> elements by default. The example above uses Alpine.js to handle the open/close state along with some Tailwind CSS classes.</p>
\ No newline at end of file
+<p class="prose">Basecoat animates <code>&lt;details&gt;</code> elements by default. The example above uses Alpine.js to handle the open/close state along with some Tailwind CSS classes.</p>
\ No newline at end of file
diff --git a/docs/src/components/alert-dialog.njk b/docs/src/components/alert-dialog.njk
index 56d8059..ac244fb 100644
--- a/docs/src/components/alert-dialog.njk
+++ b/docs/src/components/alert-dialog.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Alert Dialog
 description: A modal dialog that interrupts the user with important content and expects a response.
 toc:
diff --git a/docs/src/components/alert.njk b/docs/src/components/alert.njk
index d6a0ab3..245f624 100644
--- a/docs/src/components/alert.njk
+++ b/docs/src/components/alert.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Alert
 description: Displays a callout for user attention.
 toc:
diff --git a/docs/src/components/avatar.njk b/docs/src/components/avatar.njk
index b84c1e3..61687b3 100644
--- a/docs/src/components/avatar.njk
+++ b/docs/src/components/avatar.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Avatar
 description: An image element with a fallback for representing the user.
 toc:
diff --git a/docs/src/components/badge.njk b/docs/src/components/badge.njk
index 690fb5f..578fe8d 100644
--- a/docs/src/components/badge.njk
+++ b/docs/src/components/badge.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Badge
 description: Displays a badge or a component that looks like a badge.
 toc:
diff --git a/docs/src/components/breadcrumb.njk b/docs/src/components/breadcrumb.njk
index fa2dd17..f60ba4c 100644
--- a/docs/src/components/breadcrumb.njk
+++ b/docs/src/components/breadcrumb.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Breadcrumb
 description: Displays the path to the current resource using a hierarchy of links.
 toc:
diff --git a/docs/src/components/button.njk b/docs/src/components/button.njk
index 2c674a8..d1b70e1 100644
--- a/docs/src/components/button.njk
+++ b/docs/src/components/button.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Button
 description: Displays a button or a component that looks like a button.
 toc:
diff --git a/docs/src/components/card.njk b/docs/src/components/card.njk
index 01ead79..a59a2e0 100644
--- a/docs/src/components/card.njk
+++ b/docs/src/components/card.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Card
 description: Displays a card with header, content, and footer.
 toc:
diff --git a/docs/src/components/checkbox.njk b/docs/src/components/checkbox.njk
index 8240972..14fee39 100644
--- a/docs/src/components/checkbox.njk
+++ b/docs/src/components/checkbox.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Checkbox
 description: A control that allows the user to toggle between checked and not checked.
 toc:
diff --git a/docs/src/components/combobox.njk b/docs/src/components/combobox.njk
index 5dda31c..36e876b 100644
--- a/docs/src/components/combobox.njk
+++ b/docs/src/components/combobox.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Combobox
 description: Autocomplete input and command palette with a list of suggestions.
 toc:
diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk
index e8e3edc..4d466fc 100644
--- a/docs/src/components/dialog.njk
+++ b/docs/src/components/dialog.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
 toc:
diff --git a/docs/src/components/dropdown-menu.njk b/docs/src/components/dropdown-menu.njk
index 75ad49f..33f3d2c 100644
--- a/docs/src/components/dropdown-menu.njk
+++ b/docs/src/components/dropdown-menu.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Dropdown Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
 toc:
diff --git a/docs/src/components/form.njk b/docs/src/components/form.njk
index e911e73..8c18b81 100644
--- a/docs/src/components/form.njk
+++ b/docs/src/components/form.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Input
 description: Displays a form input field or a component that looks like an input field.
 toc:
diff --git a/docs/src/components/input.njk b/docs/src/components/input.njk
index 9e8d0a3..2b0a756 100644
--- a/docs/src/components/input.njk
+++ b/docs/src/components/input.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Input
 description: Displays a form input field or a component that looks like an input field.
 toc:
diff --git a/docs/src/components/label.njk b/docs/src/components/label.njk
index 773aa71..b23e74d 100644
--- a/docs/src/components/label.njk
+++ b/docs/src/components/label.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Label
 description: Renders an accessible label associated with controls.
 toc:
diff --git a/docs/src/components/pagination.njk b/docs/src/components/pagination.njk
index e98d0a8..206a71c 100644
--- a/docs/src/components/pagination.njk
+++ b/docs/src/components/pagination.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Pagination
 description: Pagination with page navigation, next and previous links.
 toc:
diff --git a/docs/src/components/popover.njk b/docs/src/components/popover.njk
index cdb1176..2a054cc 100644
--- a/docs/src/components/popover.njk
+++ b/docs/src/components/popover.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Popover
 description: Displays rich content in a portal, triggered by a button.
 toc:
diff --git a/docs/src/components/radio-group.njk b/docs/src/components/radio-group.njk
index a657d1c..71f4b1f 100644
--- a/docs/src/components/radio-group.njk
+++ b/docs/src/components/radio-group.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Radio Group
 description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
 toc:
diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk
index f7f0059..8239594 100644
--- a/docs/src/components/select.njk
+++ b/docs/src/components/select.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Select
 description: Displays a list of options for the user to pick from—triggered by a button.
 toc:
diff --git a/docs/src/components/skeleton.njk b/docs/src/components/skeleton.njk
index 44f853a..e09be8f 100644
--- a/docs/src/components/skeleton.njk
+++ b/docs/src/components/skeleton.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Skeleton
 description: Used to show a placeholder while content is loading.
 toc:
diff --git a/docs/src/components/slider.njk b/docs/src/components/slider.njk
index dc8085a..390c1c8 100644
--- a/docs/src/components/slider.njk
+++ b/docs/src/components/slider.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Slider
 description: An input where the user selects a value from within a given range.
 toc:
diff --git a/docs/src/components/switch.njk b/docs/src/components/switch.njk
index fe40716..32f86fb 100644
--- a/docs/src/components/switch.njk
+++ b/docs/src/components/switch.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Switch
 description: A control that allows the user to toggle between checked and not checked.
 toc:
diff --git a/docs/src/components/table.njk b/docs/src/components/table.njk
index ff9d377..9f1fd1a 100644
--- a/docs/src/components/table.njk
+++ b/docs/src/components/table.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Table
 description: A responsive table component.
 toc:
diff --git a/docs/src/components/tabs.njk b/docs/src/components/tabs.njk
index b7d1501..722151c 100644
--- a/docs/src/components/tabs.njk
+++ b/docs/src/components/tabs.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Tabs
 description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
 toc:
diff --git a/docs/src/components/textarea.njk b/docs/src/components/textarea.njk
index d220ee1..feddb04 100644
--- a/docs/src/components/textarea.njk
+++ b/docs/src/components/textarea.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Teaxtarea
 description: Displays a form textarea or a component that looks like a textarea.
 toc:
diff --git a/docs/src/components/toast.njk b/docs/src/components/toast.njk
index 555be81..c56a335 100644
--- a/docs/src/components/toast.njk
+++ b/docs/src/components/toast.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Toast
 description: A succinct message that is displayed temporarily.
 ---
diff --git a/docs/src/components/tooltip.njk b/docs/src/components/tooltip.njk
index c67ef73..4d4f41b 100644
--- a/docs/src/components/tooltip.njk
+++ b/docs/src/components/tooltip.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/component.njk
+layout: layouts/page.njk
 title: Tooltip
 description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 toc:
diff --git a/docs/src/installation.njk b/docs/src/installation.njk
index 1c0c644..fb888b5 100644
--- a/docs/src/installation.njk
+++ b/docs/src/installation.njk
@@ -2,10 +2,116 @@
 layout: layouts/page.njk
 title: Installation
 description: How to install Basecoat in your app.
+toc:
+  - label: Installing the CSS
+    id: install-css
+    children:
+      - label: Add Tailwind CSS
+        id: install-css-tailwind
+      - label: Add Basecoat
+        id: install-css-basecoat
+      - label: Import basecoat in your CSS
+        id: install-css-import
+      - label: That's it
+        id: install-css-done
+  - label: Components with Javascript code
+    id: install-js
+  - label: Use Nunjucks or Jinja macros
+    id: install-macros
 ---
 
-<h2 id="jinja-and-nunjucks"><a href="#jinja-and-nunjucks">CSS vs. Tailwind</a></h2>
+{% from "macros/code_block.njk" import code_block %}
 
-<h2 id="htmx"><a href="#htmx">HTML &amp; Javascript</a></h2>
+<h2 id="install-css">Installing the CSS</h2>
 
-<h2 id="jinja-and-nunjucks"><a href="#jinja-and-nunjucks">Jinja and Nunjucks</a></h2>
+<ol class="[&>h3]:step steps mb-12 md:ml-4 md:border-l md:pl-8">
+  <li class="step">
+    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-tailwind"><a href="#install-css-tailwind">Add Tailwind CSS</a></h3>
+    <div class="prose">
+      <p>Basecoat uses Tailwind CSS. You need to install it in your project.</p>
+      <p><a href="https://tailwindcss.com/docs/installation" target="_blank">Follow the Tailwind CSS installation instructions to get started.</a></p>
+    </div>
+  </li>
+  <li class="step mt-8">
+    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-basecoat"><a href="#install-css-basecoat">Add Basecoat</a></h3>
+    <div class="prose">
+      <p>Add Basecoat to your Tailwind CSS file.</p>
+    </div>
+    {% set code %}npm install hunvreus/basecoat{% endset %}
+    {{ code_block(code, "bash") }}
+  </li>
+  <li class="step mt-8">
+    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-import"><a href="#install-css-import">Import basecoat in your CSS</a></h3>
+    {% set code %}@import "tailwindcss";
+@import "basecoat";{% endset %}
+    {{ code_block(code, "css") }}
+  </li>
+  <li class="step mt-8">
+    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-done"><a href="#install-css-done">That's it</a></h3>
+    <div class="prose">
+      <p>You can now use any of the Basecoat classes in your project (e.g. <code>btn</code>, <code>card</code>, <code>input</code>, etc). Read the documentation about each component to get started (e.g. <a href="/components/button">button</a>, <a href="/components/card">card</a>, <a href="/components/input">input</a>, etc).</p>
+    </div>
+  </li>
+</ol>
+
+<h2 id="install-js"><a href="#install-js">Components with Javascript code</a></h2>
+
+<div class="prose">
+  <p><b>Some components require Javascript code to work.</b></p>
+  <p>The documentation provides Alpine.js code snippets to cover that. <a href="https://alpinejs.dev/docs/installation" target="_blank">Make sure to install Alpine.js if you decide to use them.</a></p>
+  <p>For simple components like <a href="/components/accordion">Accordion</a> or <a href="/components/slider">Slider</a>, you will notice some inline Alpine.js code that you can just copy along with the rest of the HTML.</p>
+  <p>For more complex components (<a href="/components/dialog">Dialog</a>, <a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/tooltip">Toast</a>), we provide a separate <code>&lt;script&gt;</code> code snippet that must be included anywhere <b>before</b> the HTML for the component.</p>
+  <p>You are also welcome to write your own Javascript.</p>
+  <p>All of the components try and implement WAI-ARIA standards to make them accessible.</p>
+</div>
+
+<h2 id="install-macros"><a href="#install-macros">Use Nunjucks or Jinja macros</a></h2>
+
+<div class="prose">
+  <p>For more complex components, you can use <a href="https://mozilla.github.io/nunjucks/" target="_blank">Nunjucks</a> or <a href="https://jinja.palletsprojects.com" target="_blank">Jinja</a> macros to help you generate the HTML and Javascript code.</p>
+  <p>For example, here's how you could use the <code>select()</code> macro to generate the HTML and Javascript code for a <a href="/components/select">Select</a> component:</p>
+  {% set code %}{% raw %}{% call select() %}
+<div role="group" aria-labelledby="fruit-options-label">
+  <span id="fruit-options-label" role="heading">Fruits</span>
+  <div role="option" data-value="apple">Apple</div>
+  <div role="option" data-value="banana">Banana</div>
+  <div role="option" data-value="blueberry">Blueberry</div>
+  <div role="option" data-value="pineapple">Grapes</div>
+  <div role="option" data-value="pineapple">Pineapple</div>
+</div>
+{% endcall %}{% endraw %}{% endset %}
+  {{ code_block(code, "jinja") }}
+  <p>You still need to make sure to include the Javascript code, to do so you have two options:</p>
+  <ul>
+    <li>
+      Set <code>include_script</code> to <code>true</code> when calling the macro. This will include the <code>&lt;script&gt;</code> code snippet directly before the component's HTML:
+      {% set code %}{% raw %}{% call select(include_script=true) %} {# Or `True` for Jinja #}
+<div role="group" aria-labelledby="fruit-options-label">
+  <span id="fruit-options-label" role="heading">Fruits</span>
+  <div role="option" data-value="apple">Apple</div>
+  <div role="option" data-value="banana">Banana</div>
+  <div role="option" data-value="blueberry">Blueberry</div>
+  <div role="option" data-value="pineapple">Grapes</div>
+  <div role="option" data-value="pineapple">Pineapple</div>
+</div>
+{% endcall %}{% endraw %}{% endset %}
+      {{ code_block(code, "jinja") }}
+    </li>
+    <li>
+      Manually include the <code>&lt;script&gt;</code> code snippet anywhere before the component's HTML. You can use the relevant script partial to do this, for example:
+      {% set code_script %}{% raw %}{% include "select-script.njk" %}
+{% call select() %}
+<div role="group" aria-labelledby="fruit-options-label">
+  <span id="fruit-options-label" role="heading">Fruits</span>
+  <div role="option" data-value="apple">Apple</div>
+  <div role="option" data-value="banana">Banana</div>
+  <div role="option" data-value="blueberry">Blueberry</div>
+  <div role="option" data-value="pineapple">Grapes</div>
+  <div role="option" data-value="pineapple">Pineapple</div>
+</div>
+{% endcall %}{% endraw %}{% endset %}
+      {{ code_block(code_script, "jinja") }}
+    </li>
+  </ul>
+  <p>Documentation for each macro's parameters is available in the <a href="https://github.com/hunvreus/basecoat/tree/main/docs/src/_includes/components" target="_blank">source code</a>.</p>
+</div>
diff --git a/docs/styles.css b/docs/styles.css
deleted file mode 100644
index 32cf586..0000000
--- a/docs/styles.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
-
-@import "tailwindcss";
-@source './src/**/*.njk';
-
-@import "basecoat";
-@theme {
-  --font-sans: 'Inter';
-  --font-mono: 'JetBrains Mono';
-}
-
-/* @import "./theme.css"; */
\ No newline at end of file
diff --git a/docs/theme.css b/docs/theme.css
deleted file mode 100644
index da32abf..0000000
--- a/docs/theme.css
+++ /dev/null
@@ -1,146 +0,0 @@
-:root {
-  --background: oklch(0.94 0.02 345.70);
-  --foreground: oklch(0.47 0 0);
-  --card: oklch(0.95 0.05 86.89);
-  --card-foreground: oklch(0.47 0 0);
-  --popover: oklch(1.00 0 0);
-  --popover-foreground: oklch(0.47 0 0);
-  --primary: oklch(0.62 0.18 348.14);
-  --primary-foreground: oklch(1.00 0 0);
-  --secondary: oklch(0.81 0.07 198.19);
-  --secondary-foreground: oklch(0.32 0 0);
-  --muted: oklch(0.88 0.05 212.10);
-  --muted-foreground: oklch(0.58 0 0);
-  --accent: oklch(0.92 0.08 87.67);
-  --accent-foreground: oklch(0.32 0 0);
-  --destructive: oklch(0.71 0.17 21.96);
-  --destructive-foreground: oklch(1.00 0 0);
-  --border: oklch(0.62 0.18 348.14);
-  --input: oklch(0.92 0 0);
-  --ring: oklch(0.70 0.16 350.75);
-  --chart-1: oklch(0.70 0.16 350.75);
-  --chart-2: oklch(0.82 0.08 212.09);
-  --chart-3: oklch(0.92 0.08 87.67);
-  --chart-4: oklch(0.80 0.11 348.18);
-  --chart-5: oklch(0.62 0.19 353.91);
-  --sidebar: oklch(0.91 0.04 343.09);
-  --sidebar-foreground: oklch(0.32 0 0);
-  --sidebar-primary: oklch(0.66 0.21 354.31);
-  --sidebar-primary-foreground: oklch(1.00 0 0);
-  --sidebar-accent: oklch(0.82 0.11 346.02);
-  --sidebar-accent-foreground: oklch(0.32 0 0);
-  --sidebar-border: oklch(0.95 0.03 307.17);
-  --sidebar-ring: oklch(0.66 0.21 354.31);
-  --font-sans: Poppins, sans-serif;
-  --font-serif: Lora, serif;
-  --font-mono: Fira Code, monospace;
-  --radius: 0.4rem;
-  --shadow-2xs: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 0.50);
-  --shadow-xs: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 0.50);
-  --shadow-sm: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 1px 2px -1px hsl(325.78 58.18% 56.86% / 1.00);
-  --shadow: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 1px 2px -1px hsl(325.78 58.18% 56.86% / 1.00);
-  --shadow-md: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 2px 4px -1px hsl(325.78 58.18% 56.86% / 1.00);
-  --shadow-lg: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 4px 6px -1px hsl(325.78 58.18% 56.86% / 1.00);
-  --shadow-xl: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 8px 10px -1px hsl(325.78 58.18% 56.86% / 1.00);
-  --shadow-2xl: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 2.50);
-}
-
-.dark {
-  --background: oklch(0.25 0.03 234.16);
-  --foreground: oklch(0.93 0.02 349.08);
-  --card: oklch(0.29 0.03 233.54);
-  --card-foreground: oklch(0.93 0.02 349.08);
-  --popover: oklch(0.29 0.03 233.54);
-  --popover-foreground: oklch(0.93 0.02 349.08);
-  --primary: oklch(0.92 0.08 87.67);
-  --primary-foreground: oklch(0.25 0.03 234.16);
-  --secondary: oklch(0.78 0.08 4.13);
-  --secondary-foreground: oklch(0.25 0.03 234.16);
-  --muted: oklch(0.27 0.01 255.58);
-  --muted-foreground: oklch(0.78 0.08 4.13);
-  --accent: oklch(0.67 0.10 356.98);
-  --accent-foreground: oklch(0.93 0.02 349.08);
-  --destructive: oklch(0.67 0.18 350.36);
-  --destructive-foreground: oklch(0.25 0.03 234.16);
-  --border: oklch(0.39 0.04 242.22);
-  --input: oklch(0.31 0.03 232.00);
-  --ring: oklch(0.70 0.09 201.87);
-  --chart-1: oklch(0.70 0.09 201.87);
-  --chart-2: oklch(0.78 0.08 4.13);
-  --chart-3: oklch(0.67 0.10 356.98);
-  --chart-4: oklch(0.44 0.07 217.08);
-  --chart-5: oklch(0.27 0.01 255.58);
-  --sidebar: oklch(0.23 0.03 235.97);
-  --sidebar-foreground: oklch(0.97 0.00 264.54);
-  --sidebar-primary: oklch(0.66 0.21 354.31);
-  --sidebar-primary-foreground: oklch(1.00 0 0);
-  --sidebar-accent: oklch(0.82 0.11 346.02);
-  --sidebar-accent-foreground: oklch(0.28 0.03 256.85);
-  --sidebar-border: oklch(0.37 0.03 259.73);
-  --sidebar-ring: oklch(0.66 0.21 354.31);
-  --font-sans: Poppins, sans-serif;
-  --font-serif: Lora, serif;
-  --font-mono: Fira Code, monospace;
-  --radius: 0.4rem;
-  --shadow-2xs: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 0.50);
-  --shadow-xs: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 0.50);
-  --shadow-sm: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 1px 2px -1px hsl(206.15 28.06% 27.25% / 1.00);
-  --shadow: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 1px 2px -1px hsl(206.15 28.06% 27.25% / 1.00);
-  --shadow-md: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 2px 4px -1px hsl(206.15 28.06% 27.25% / 1.00);
-  --shadow-lg: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 4px 6px -1px hsl(206.15 28.06% 27.25% / 1.00);
-  --shadow-xl: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 8px 10px -1px hsl(206.15 28.06% 27.25% / 1.00);
-  --shadow-2xl: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 2.50);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index 8a355df..ee9e45e 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,10 @@
   },
   "homepage": "https://github.com/hunvreus/basecoat#readme",
   "scripts": {
-    "css:dev": "tailwindcss -i ./docs/styles.css -o ./docs/src/assets/styles.css --watch",
+    "css:dev": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --watch",
     "eleventy:serve": "eleventy --serve",
     "dev": "concurrently \"npm:css:dev\" \"npm:eleventy:serve\"",
-    "build": "tailwindcss -i ./docs/styles.css -o ./docs/src/assets/styles.css --minify && eleventy"
+    "build": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --minify && eleventy"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
diff --git a/src/basecoat.css b/src/basecoat.css
index 6001f62..e85ced9 100644
--- a/src/basecoat.css
+++ b/src/basecoat.css
@@ -906,124 +906,4 @@
       }
     }
   }
-}
-
-/* Prose */
-@layer components {
-  .prose h1,
-  .prose h2,
-  .prose h3,
-  .prose h4,
-  .prose h5,
-  .prose h6,
-  .h1,
-  .h2,
-  .h3,
-  .h4,
-  .h5,
-  .h6 {
-    @apply font-medium leading-tight;
-  }
-  .prose h1,
-  .h1 {
-    @apply text-2xl;
-  }
-  .prose h2,
-  .h2 {
-    @apply text-xl;
-  }
-  .prose h3,
-  .h3 {
-    @apply text-lg;
-  }
-  .prose h4,
-  .prose h5,
-  .prose h6,
-  .h4,
-  .h5,
-  .h6 {
-    @apply text-base;
-  }
-  .prose a,
-  .link {
-    @apply font-medium underline underline-offset-4;
-  }
-  .prose code,
-  .code {
-    @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
-  }
-  .prose pre:has(> code),
-  .code-block {
-    @apply bg-muted border-border rounded-md;
-  }
-  .prose pre code,
-  .code-block code {
-    @apply inline-block p-4 text-sm font-mono;
-  }
-  .prose blockquote,
-  .quote {
-    @apply border-l-4 border-border pl-4;
-  }
-  .prose ol,
-  .ordered-list {
-    @apply my-6 ml-6 list-decimal;
-
-    li {
-      @apply mb-2;
-    }
-  }
-  .prose ul,
-  .unordered-list {
-    @apply my-6 ml-6 list-disc;
-
-    li {
-      @apply mb-2;
-    }
-    ul,
-    ol {
-      @apply my-2;
-    }
-  }
-  .prose > *:first-child {
-    @apply !mt-0;
-  }
-  .prose > *:last-child {
-    @apply !mb-0;
-  }
-  .prose h1 {
-    @apply mb-8;
-  }
-  .prose h2 {
-    @apply mt-8 mb-6;
-  }
-  .prose h3 {
-    @apply mt-6 mb-4;
-  }
-  .prose h4 {
-    @apply my-4;
-  }
-  .prose h5 {
-    @apply my-4;
-  }
-  .prose h6 {
-    @apply my-4;
-  }
-  .prose > p,
-  .prose > blockquote,
-  .prose > ul,
-  .prose > ol,
-  .prose > dl,
-  .prose > table,
-  .prose > pre,
-  .prose > p {
-    @apply my-4;
-  }
-  .prose > *:last-child {
-    @apply !mb-0;
-  }
-  
-  .prose strong,
-  .prose b {
-    @apply font-semibold;
-  }
 }
\ No newline at end of file