diff --git a/docs/css/styles.css b/docs/css/styles.css
index 3cff2a4..b478c73 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -1,16 +1,13 @@
-@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 url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Geist+Mono&display=swap");
 
 @import "tailwindcss";
 @import "../../src/css/basecoat.css";
 @import "./custom.css";
 
 @theme {
-  --font-sans: 'Inter';
-  --font-mono: 'JetBrains Mono';
+  --font-sans: 'Geist';
+  --font-mono: 'Geist Mono';
 }
 
 @import "./themes/claude.css";
diff --git a/docs/src/_includes/layouts/page.njk b/docs/src/_includes/layouts/page.njk
index 7f577e5..0a84b00 100644
--- a/docs/src/_includes/layouts/page.njk
+++ b/docs/src/_includes/layouts/page.njk
@@ -5,7 +5,7 @@ layout: layouts/layout.njk
 <main class="mx-auto relative flex w-full max-w-screen-lg gap-10">
   <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-bold tracking-tight">{{ title }}</h1>
       <p class="text-muted-foreground">{{ description }}</p>
     </header>
     <article class="pb-12 mt-8 content">
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index 1e7684a..22e1555 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -1,15 +1,12 @@
 /*! 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");
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Geist+Mono&display=swap");
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: 'Inter';
-    --font-mono: 'JetBrains Mono';
+    --font-sans: 'Geist';
+    --font-mono: 'Geist Mono';
     --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-900: oklch(41.4% 0.112 45.904);
@@ -56,7 +53,7 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
-    --tracking-tighter: -0.05em;
+    --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --tracking-normal: 0em;
     --tracking-widest: 0.1em;
@@ -352,6 +349,9 @@
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
@@ -881,6 +881,10 @@
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -897,10 +901,6 @@
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
   }
-  .tracking-tighter {
-    --tw-tracking: var(--tracking-tighter);
-    letter-spacing: var(--tracking-tighter);
-  }
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk
index 206c38b..8006d1d 100644
--- a/docs/src/components/dialog.njk
+++ b/docs/src/components/dialog.njk
@@ -111,6 +111,15 @@ document.addEventListener('alpine:init', () => {
 ] %}
 {{ tabs(id="combobox", tabsets=tabsets) }}
 
+<section class="prose">
+  <p>The component will dispatch <code>dialog:opened</code> and <code>dialog:closed</code> events when the dialog is opened or closed. You can also dispatch <code>dialog:open</code> and <code>dialog:close</code> events to open or close the dialog programmatically. You will need the element to have an <code>id</code> to be able to target it (e.g. <code>&lt;div id="my-dialog" class="dialog"&gt;</code>):</p>
+</section>
+
+{% set code_dispatch %}<button type="button" x-init @click="$dispatch('dialog:open', { id: 'my-dialog' })">
+  Open #my-dialog
+</button>{% endset %}
+{{ code_block(code_dispatch | prettyHtml, "html") }}
+
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
 <div class="prose">
diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk
index c0b2855..24e7ee4 100644
--- a/docs/src/components/select.njk
+++ b/docs/src/components/select.njk
@@ -128,6 +128,10 @@ document.addEventListener('alpine:init', () => {
 ] %}
 {{ tabs(id="select", tabsets=tabsets) }}
 
+<section class="prose">
+  <p>The component will dispatch a <code>select:change</code> event when a value is selected, along with the value and label of the selected option in the <code>detail</code> object.</p>
+</section>
+
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
 <div class="prose">
diff --git a/docs/src/index.njk b/docs/src/index.njk
index bec77d1..09babd3 100644
--- a/docs/src/index.njk
+++ b/docs/src/index.njk
@@ -7,7 +7,7 @@ layout: layouts/layout.njk
 <div class="max-w-screen-lg mx-auto">
   <header class="flex flex-col gap-4">
     <div class="flex flex-col gap-2">
-      <h1 class="text-2xl font-semibold tracking-tighter sm:text-3xl md:text-4xl">All of the shadcn/ui magic, none of the React</h1>
+      <h1 class="text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl">All of the shadcn/ui magic, none of the React</h1>
       <p class="sm:text-lg text-muted-foreground">A components library built with Tailwind CSS that works with any web stack.</p>
     </div>
     <div class="flex w-full items-center justify-start gap-2 pt-2">
diff --git a/docs/src/kitchen-sink.njk b/docs/src/kitchen-sink.njk
index d84f68b..0e4f301 100644
--- a/docs/src/kitchen-sink.njk
+++ b/docs/src/kitchen-sink.njk
@@ -1,5 +1,7 @@
 ---
 layout: layouts/layout.njk
+title: Kitchen Sink
+description: A collection of all the components available in Basecoat.
 ---
 {% set components = [
   { label: "Accordion", id: "accordion" },
@@ -32,10 +34,16 @@ layout: layouts/layout.njk
 ] %}
 
 <div class="flex gap-x-10">
-  <div class="grid gap-4 flex-1">
-    {% for component in components %}
-      {% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
-    {% endfor %}
+  <div>
+    <header class="space-y-2 mb-8">
+      <h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
+      <p class="text-muted-foreground">{{ description }}</p>
+    </header>
+    <div class="grid gap-4 flex-1">
+      {% for component in components %}
+        {% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
+      {% endfor %}
+    </div>
   </div>
   <div class="hidden text-sm xl:block w-full max-w-[200px]">
     {% from "macros/toc.njk" import toc_nav %}