Cleaning up folder structure, testing themes

2026-11-12 13:18:22 +00:00 · 2025-04-30 20:45:03 +08:00
parent a2338873b5
commit ba71f2ea79
90 changed files with 478 additions and 433 deletions
@@ -0,0 +1,4 @@
+{
+  "title": "Basecoat",
+  "description": "shadcn/ui for the rest of us"
+}
@@ -0,0 +1,55 @@
+<script>
+if (!window._dialogComponentLoaded) {
+  window._dialogComponentLoaded = true;
+
+  const registerDialogComponent = () => {
+    Alpine.data('dialog', (initialOpen = false, initialCloseOnOverlayClick = true) => ({
+      id: null,
+      open: false,
+      closeOnOverlayClick: true,
+
+      init() {
+        this.id = this.$el.id;
+        this.open = initialOpen;
+        this.closeOnOverlayClick = initialCloseOnOverlayClick;
+      },
+      show() {
+        if (!this.open) {
+          this.open = true;
+          this.$nextTick(() => {
+            this.$el.dispatchEvent(new CustomEvent('dialog:opened', { bubbles: true }));
+            setTimeout(() => this.$refs.dialog.focus(), 50);
+          });
+        }
+      },
+      hide() {
+        if (this.open) {
+          this.open = false;
+          this.$el.dispatchEvent(new CustomEvent('dialog:closed', { bubbles: true }));
+        }
+      },
+
+      $main: {
+        '@dialog:open.window'(e) {
+          if (event.detail && event.detail.id === this.id) this.show();
+         },
+      },
+      $trigger: {
+        '@click'() { this.show() },
+        ':aria-expanded'() { return this.open }
+      },
+
+      $content: {
+        '@keydown.escape'() { this.open && this.hide() },
+        ':inert'() { return !this.open },
+        '@click'(e) { e.target === this.$el && this.closeOnOverlayClick && this.hide() },
+        'x-cloak': ''
+      }
+    }));
+  }
+
+  {% for event in (register_on or ["alpine:init"]) %}
+    document.addEventListener('{{ event }}', registerDialogComponent);
+  {% endfor %}
+}
+</script>
@@ -0,0 +1,119 @@
+{#
+  Renders a dialog component with optional trigger, header, body, and footer.
+
+  @param id {string} - Unique identifier for the dialog component.
+  @param trigger {string} [optional] - Text or HTML for the button that triggers the dialog.
+  @param title {string} [optional] - Title text displayed in the dialog header.
+  @param description {string} [optional] - Description text displayed below the title.
+  @param footer {string} [optional] - HTML content for the dialog footer.
+  @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 dialog content article.
+  @param content_header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
+  @param content_body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
+  @param content_footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
+  @param open {boolean} [optional] [default=false] - Whether the dialog should be open initially.
+  @param close_button {boolean} [optional] [default=true] - Whether to include a close button.
+  @param close_on_overlay_click {boolean} [optional] [default=true] - Whether clicking the overlay closes the dialog.
+  @param include_script {boolean} [optional] [default=true] - 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 dialog(
+  id,
+  trigger=None,
+  title=None,
+  description=None,
+  footer=None,
+  main_attrs={},
+  trigger_attrs={},
+  content_attrs={},
+  content_header_attrs={},
+  content_body_attrs={},
+  content_footer_attrs={},
+  open=false,
+  close_button=true,
+  close_on_overlay_click=true,
+  include_script=false,
+  register_on=["alpine:init"]
+) %}
+{% if include_script %}
+  {% include "components/dialog-script.njk" %}
+{% endif %}
+
+<div
+  id="{{ id }}"
+  x-data="dialog({{ 'true' if open else 'false' }}, {{ 'true' if close_on_overlay_click else 'false' }})"
+  x-bind="$main"
+  class="dialog"
+  {% for key, value in main_attrs %}
+    {{ key }}="{{ value }}"
+  {% endfor %}
+>
+  {% if trigger %}
+  <button
+    type="button"
+    aria-expanded="false"
+    aria-controls="{{ id }}-dialog"
+    x-bind="$trigger"
+    {% for key, value in trigger_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger }} 
+  </button>
+  {% endif %}
+  <div
+    role="dialog"
+    id="{{ id }}-dialog"
+    x-ref="dialog"
+    tabindex="-1"
+    aria-modal="true"
+    aria-labelledby="{{ id }}-title"
+    inert
+    x-bind="$content"
+  >
+    <article
+      {% for key, value in content_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if title or description %}
+        <header
+          {% for key, value in content_header_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        >
+          <h2 id="{{ id }}-title">{{ title | safe }}</h2>
+          <p>{{ description | safe }}</p>
+        </header>
+      {% endif %}
+      {% if caller %}
+        <section
+          {% for key, value in content_body_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        >
+          {% if caller %}{{ caller() }}{% endif %}
+        </section>
+      {% endif %}
+      {% if footer %}
+        <footer
+          {% for key, value in content_footer_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        >
+          {{ footer | safe }}
+        </footer>
+      {% endif %}
+      {% if close_button %}
+        <button
+          @click="hide()"
+          aria-label="Close dialog"
+        >
+          {% lucide "x" %}
+        </button>
+      {% endif %}
+    </article>
+  </div>
+</div>
+{% endmacro %}
@@ -0,0 +1,98 @@
+<script>
+  if (!window._dropdownMenuComponentLoaded) {
+    window._dropdownMenuComponentLoaded = true;
+
+    const registerDropdownMenuComponent = () => {
+      Alpine.data('dropdownMenu', () => ({
+        open: false,
+        focusedIndex: null,
+        menuItems: [],
+
+        init() {
+          this.$nextTick(() => {
+            this.menuItems = Array.from(this.$el.querySelectorAll('[role=menuitem]:not([disabled]),[role=menuitemcheckbox]:not([disabled]),[role=menuitemradio]:not([disabled])'));
+          });
+        },
+        focusMenuitem() {
+          if (this.menuItems.length === 0) return;
+
+          if (this.focusedIndex >= this.menuItems.length) {
+            this.focusedIndex = this.menuItems.length - 1;
+          } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
+            this.focusedIndex = 0;
+          }
+          this.menuItems.forEach(item => item.blur());
+          this.menuItems[this.focusedIndex].focus();
+        },
+        moveMenuitemFocus(delta) {
+          if (this.menuItems.length === 0) return;
+
+          let wasOpen = this.open;
+          if (!this.open) { 
+            this.open = true;
+            this.focusedIndex = 0;
+          } else {
+            this.focusedIndex = this.focusedIndex === null
+              ? 0
+              : this.focusedIndex + delta;
+          }
+
+          if (wasOpen) {
+            this.focusMenuitem();
+          } else {
+            setTimeout(() => this.focusMenuitem(), 50);
+          }
+        },
+        handleMenuitemClick(event) {
+          const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
+          if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
+            this.$nextTick(() => {
+              this.$refs.trigger.focus();
+              this.open = false;
+            });
+          }
+        },
+        handleMenuitemMousemove(event) {
+          const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
+          if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
+            this.focusedIndex = this.menuItems.indexOf(menuitem);
+            this.focusMenuitem();
+          }
+        },
+
+        $trigger: {
+          '@click'() { this.open = !this.open },
+          '@keydown.escape.prevent'() {
+            this.open = false;
+            this.$refs.trigger.focus();
+          },
+          '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
+          '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
+          '@keydown.home.prevent'() { this.focusMenuitem(0) },
+          '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
+          '@keydown.enter.prevent'() { this.open = !this.open },
+          ':aria-expanded'() { return this.open },
+          'x-ref': 'trigger'
+        },
+        $content: {
+          '@click'(e) { this.handleMenuitemClick(e) },
+          '@keydown.escape.prevent'() {
+            this.open = false;
+            this.$refs.trigger.focus();
+          },
+          '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
+          '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
+          '@keydown.home.prevent'() { this.focusMenuitem(0) },
+          '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
+          '@mousemove'(e) { this.handleMenuitemMousemove(e) },
+          ':aria-hidden'() { return !this.open },
+          'x-cloak': ''
+        },
+      }));
+    }
+
+    {% for event in (register_on or ["alpine:init"]) %}
+      document.addEventListener('{{ event }}', registerDropdownMenuComponent);
+    {% endfor %}
+  }
+</script>
@@ -0,0 +1,54 @@
+{% macro dropdown_menu(
+  id=None,
+  trigger=None,
+  main_attrs={},
+  trigger_attrs={},
+  content_attrs={},
+  include_script=false,
+  register_on=["alpine:init"]
+) %}
+{% if include_script %}
+  {% include "components/dropdown-menu-script.njk" %}
+{% endif %}
+
+<div
+  class="popover {{ main_attrs.class }}"
+  x-data="dropdownMenu"
+  @click.away="open = false"
+  {% if id %}id="{{ id }}"{% endif %}
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  {% if trigger %}
+  <button
+    type="button"
+    aria-haspopup="menu"
+    aria-expanded="false"
+    x-bind="$trigger"
+    {% if id %}
+    id="{{ id }}-trigger"
+    aria-controls="{{ id }}-menu"
+    {% endif %}
+    {% for key, value in trigger_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger | safe }}
+  </button>
+  {% endif %}
+  <div
+    data-popover
+    aria-hidden="true"
+    x-bind="$content"
+    {% if id %}id="{{ id }}-menu"{% endif %}
+    {% for key, value in content_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    <nav role="menu">
+      {% if caller %}{{ caller() }}{% endif %}
+    </nav>
+  </div>
+</div>
+{% endmacro %}
@@ -0,0 +1,33 @@
+<script>
+  if (!window._popoverComponentLoaded) {
+    window._popoverComponentLoaded = true;
+
+    const registerPopoverComponent = () => {
+      Alpine.data('popover', () => ({
+        open: false,
+
+        $trigger: {
+          '@click'() { this.open = !this.open },
+          '@keydown.escape.prevent'() {
+            this.open = false;
+            this.$refs.trigger.focus();
+          },
+          ':aria-expanded'() { return this.open },
+          'x-ref': 'trigger'
+        },
+        $content: {
+          '@keydown.escape.prevent'() {
+            this.open = false;
+            this.$refs.trigger.focus();
+          },
+          ':aria-hidden'() { return !this.open },
+          'x-cloak': ''
+        },
+      }));
+    }
+
+    {% for event in (register_on or ["alpine:init"]) %}
+      document.addEventListener('{{ event }}', registerPopoverComponent);
+    {% endfor %}
+  }
+</script>
@@ -0,0 +1,52 @@
+{% macro popover(
+  id=None,
+  trigger=None,
+  main_attrs=None,
+  trigger_attrs=None,
+  content_attrs=None,
+  include_script=false,
+  register_on=["alpine:init"]
+) %}
+{% if include_script %}
+  {% include "components/popover-script.njk" %}
+{% endif %}
+
+<div
+  class="popover {{ main_attrs.class }}"
+  x-data="popover"
+  @click.away="open = false"
+  {% if id %}id="{{ id }}"{% endif %}
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  {% if trigger %}
+  <button
+    type="button"
+    aria-haspopup="menu"
+    aria-expanded="false"
+    x-bind="$trigger"
+    {% if id %}
+    id="{{ id }}-trigger"
+    aria-controls="{{ id }}-menu"
+    {% endif %}
+    {% for key, value in trigger_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger | safe }}
+  </button>
+  {% endif %}
+  <div
+    data-popover
+    aria-hidden="true"
+    x-bind="$content"
+    {% if id %}id="{{ id }}-menu"{% endif %}
+    {% for key, value in content_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {% if caller %}{{ caller() }}{% endif %}
+  </div>
+</div>
+{% endmacro %}
@@ -0,0 +1,157 @@
+<script>
+  if (!window._selectComponentLoaded) {
+    window._selectComponentLoaded = true;
+
+    const registerSelectComponent = () => {
+      Alpine.data('select', (name = null, initialValue = null) => ({
+        open: false,
+        name: null,
+        options: [],
+        disabledOptions: [],
+        focusedIndex: null,
+        selectedLabel: null,
+        selectedValue: null,
+        query: '',
+        
+        init() {
+          this.$nextTick(() => {
+            if (name) this.name = name;
+            this.options = Array.from(this.$el.querySelectorAll('[role=option]:not([aria-disabled])'));
+            this.disabledOptions = Array.from(this.$el.querySelectorAll('[role=option][aria-disabled=true]'));
+            if (this.options.length === 0) return;
+            if (initialValue) {
+              const option = this.options.find(opt => opt.getAttribute('data-value') === initialValue);
+              this.selectOption(option, false);
+              this.focusedIndex = this.options.indexOf(option);
+            } else {
+              this.selectOption(this.options[0], false);
+            }
+          });
+        },
+        focusOption() {
+          if (this.options.length === 0) return;
+
+          if (this.focusedIndex >= this.options.length) {
+            this.focusedIndex = this.options.length - 1;
+          } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
+            this.focusedIndex = 0;
+          }
+          this.options.forEach(opt => opt.removeAttribute('data-focus'));
+          const option = this.options[this.focusedIndex];
+          option.setAttribute('data-focus', '');
+          option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        },
+        focusOnSelectedOption() {
+          if (this.options.length === 0 || this.selectedValue === null) return;
+          const option = this.options.find(opt => opt.getAttribute('data-value') === this.selectedValue);
+          if (!option) return;
+          this.focusedIndex = this.options.indexOf(option);
+          this.focusOption();
+        },
+        moveOptionFocus(delta) {
+          if (this.options.length === 0) return;
+
+          if (!this.open) { 
+            this.open = true;
+            this.focusOnSelectedOption();
+          } else {
+            this.focusedIndex = this.focusedIndex === null
+              ? 0
+              : this.focusedIndex + delta;
+          }
+          this.focusOption();
+        },
+        handleOptionClick(event) {
+          const option = event.target.closest('[role=option]');
+          if (option && option.getAttribute('aria-disabled') !== 'true') {
+            this.selectOption(option);
+            this.open = false;
+            this.$nextTick(() => this.$refs.trigger.focus());
+          }
+        },
+        handleOptionMousemove(event) {
+          const option = event.target.closest('[role=option]');
+          if (option && option.getAttribute('aria-disabled') !== 'true') {
+            this.focusedIndex = this.options.indexOf(option);
+            this.focusOption();
+          }
+        },
+        handleOptionEnter(event) {
+          this.selectOption(this.options[this.focusedIndex]);
+          this.open = !this.open;
+        },
+        selectOption(option, dispatch = true) {
+          if (this.options.length === 0 || !option || option.disabled || option.getAttribute('data-value') == null) {
+            return;
+          }
+
+          this.options.forEach(opt => {
+            opt.setAttribute('aria-selected', opt === option);
+          });
+          this.selectedLabel = option.innerHTML;
+          this.selectedValue = option.getAttribute('data-value');
+          if (dispatch) {
+            this.$dispatch('select:change', {
+              value: this.selectedValue,
+              label: this.selectedLabel
+            });
+            this.$dispatch('change'); 
+          }
+        },
+        filterOptions(query) {
+          if (query.length > 0) {
+            this.disabledOptions.forEach(opt => { opt.setAttribute('aria-hidden', 'true'); });
+          } else {
+            this.disabledOptions.forEach(opt => { opt.removeAttribute('aria-hidden'); });
+          }
+          this.options.forEach(opt => {
+            opt.removeAttribute('aria-hidden');
+            if (opt.getAttribute('data-value') != null && !opt.innerHTML.toLowerCase().includes(query.toLowerCase())) {
+              opt.setAttribute('aria-hidden', 'true');
+            }
+          });
+        },
+
+        $trigger: {
+          '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
+          '@keydown.escape.prevent'() {
+            this.open = false;
+            this.$refs.trigger.focus();
+          },
+          '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
+          '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
+          '@keydown.home.prevent'() { this.focusOption(0) },
+          '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
+          '@keydown.enter.prevent'() {
+            if (this.open) this.handleOptionEnter();
+            else this.open = true;
+          },
+          ':aria-expanded'() { return this.open },
+          'x-ref': 'trigger'
+        },
+        $content: {
+          '@click'(e) { this.handleOptionClick(e) },
+          '@mousemove'(e) { this.handleOptionMousemove(e) },
+          ':aria-hidden'() { return !this.open },
+          'x-cloak': ''
+        },
+        $filter: {
+          '@input'(e) { this.filterOptions(e.target.value) },
+          '@keydown.escape.prevent'() {
+            this.open = false;
+            this.$refs.trigger.focus();
+          },
+          '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
+          '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
+          '@keydown.home.prevent'() { this.focusOption(0) },
+          '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
+          '@keydown.enter.prevent'() { this.handleOptionEnter() },
+        }
+      }));
+    }
+
+    {% for event in (register_on or ["alpine:init"]) %}
+      document.addEventListener('{{ event }}', registerSelectComponent);
+    {% endfor %}
+  }
+</script>
@@ -0,0 +1,100 @@
+{% macro select(
+  id=None,
+  selected=None,
+  name=None,
+  main_attrs={},
+  trigger_attrs={},
+  content_attrs={},
+  listbox_attrs={},
+  input_attrs={},
+  search_placeholder="Search entries...",
+  is_combobox=false,
+  include_script=false,
+  register_on=["alpine:init"]
+) %}
+{% if include_script %}
+  {% include "components/select-script.njk" %}
+{% endif %}
+
+<div
+  class="popover {{ main_attrs.class }}"
+  x-data="select('{{ name }}', '{{ selected or '' }}')"
+  @click.away="open = false"
+  {% if id %}id="{{ id }}"{% endif %}
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <button
+    type="button"
+    aria-haspopup="listbox"
+    aria-expanded="false"
+    x-bind="$trigger"
+    {% if id %}
+    id="{{ id }}-trigger"
+    aria-controls="{{ id }}-content"
+    {% endif %}
+    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    {% for key, value in trigger_attrs %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
+    <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" %}
+    {% else %}
+      {% lucide "chevron-down", class="text-muted-foreground opacity-50 shrink-0" %}
+    {% endif %}
+  </button>
+  <div
+    data-popover
+    aria-hidden="true"
+    x-bind="$content"
+    {% if id %}id="{{ id }}-content"{% endif %}
+    {% for key, value in content_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {% if is_combobox %}
+    <header>
+      {% lucide "search" %}
+      <input
+        type="text"
+        value=""
+        placeholder="{{ search_placeholder }}"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+        aria-autocomplete="list"
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="{{ id }}-content"
+        aria-labelledby="{{ id }}-trigger"
+        x-model="query"
+        x-bind="$filter"
+      >
+    </header>
+    {% endif %}
+    <div
+      role="listbox"
+      aria-orientation="vertical"
+      {% for key, value in listbox_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if caller %}{{ caller() }}{% endif %}
+    </div>
+  </div>
+  {% if name is defined %}
+    <input
+      type="hidden"
+      name="{{ name }}"
+      x-model="selectedValue"
+      {% for key, value in input_attrs %}
+        {% if key != 'name' %}{{ key }}="{{ value }}"{% endif %}
+      {% endfor %}
+    >
+  {% endif %}
+</div>
+{% endmacro %}
@@ -0,0 +1,71 @@
+<script>
+  if (!window._tabsComponentLoaded) {
+    window._tabsComponentLoaded = true;
+
+    const registerTabsComponent = () => {
+      Alpine.data('tabs', (initialTabIndex = 0) => ({
+        activeTabIndex: initialTabIndex,
+        tabs: [],
+        panels: [],
+
+        init() {
+          this.$nextTick(() => {
+            this.tabs = Array.from(this.$el.querySelectorAll(':scope > [role=tablist] [role=tab]:not([disabled])'));
+            this.panels = Array.from(this.$el.querySelectorAll(':scope > [role=tabpanel]'));
+            if (this.tabs.length > 0) {
+              this.selectTab(this.tabs[initialTabIndex], false);
+            }
+          });
+        },
+        nextTab() {
+          if (this.tabs.length === 0) return;
+          let newIndex = (this.activeTabIndex + 1) % this.tabs.length;
+          this.selectTab(this.tabs[newIndex]);
+        },
+        prevTab() {
+          if (this.tabs.length === 0) return;
+          let newIndex = (this.activeTabIndex - 1 + this.tabs.length) % this.tabs.length;
+          this.selectTab(this.tabs[newIndex]);
+        },
+        selectTab(tab, focus = true) {
+          if (!tab || this.tabs.length === 0) return;
+
+          this.tabs.forEach((t, index) => {
+            const isSelected = t === tab;
+            t.setAttribute('aria-selected', isSelected);
+            t.setAttribute('tabindex', isSelected ? '0' : '-1');
+            if (isSelected) {
+              this.activeTabIndex = index;
+              this.activeTab = t;
+              if (focus) {
+                t.focus();
+              }
+            }
+          });
+
+          const panelId = tab.getAttribute('aria-controls');
+          if (!panelId) return;
+
+          this.panels.forEach(panel => {
+              panel.hidden = (panel.getAttribute('id') !== panelId);
+          });
+        },
+
+        $tablist: {
+          ['@click'](event) {
+              const clickedTab = event.target.closest('[role=tab]');
+              if (clickedTab) {
+                  this.selectTab(clickedTab);
+              }
+          },
+          ['@keydown.arrow-right.prevent']() { this.nextTab() },
+          ['@keydown.arrow-left.prevent']() { this.prevTab() },
+        },
+      }));
+    }
+
+    {% for event in (register_on or ["alpine:init"]) %}
+      document.addEventListener('{{ event }}', registerTabsComponent);
+    {% endfor %}
+  }
+</script>
@@ -0,0 +1,66 @@
+{% macro tabs(
+    id,
+    tabsets=[],
+    main_attrs=None,
+    tablist_attrs=None,
+    default_tab_index=1,
+    include_script=false,
+    register_on=["alpine:init"]
+  )
+%}
+{% if include_script %}
+  {% include "components/tabs-script.njk" %}
+{% endif %}
+
+<div
+  class="tabs {{ main_attrs.class }}"
+  x-data="tabs({{ default_tab_index - 1 }})"
+  {% if id %}id="{{ id }}"{% endif %}
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <nav
+    role="tablist"
+    aria-orientation="horizontal"
+    x-bind="$tablist"
+    {% for key, value in tablist_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {% for tabset in tabsets %}
+      <button
+        type="button"
+        role="tab"
+        id="{{ tabset.id }}-tab-{{ loop.index }}"
+        aria-controls="{{ tabset.id }}-panel-{{ loop.index }}"
+        aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
+        tabindex="0"
+        {% for key, value in tabset.tab_attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ tabset.tab | safe }}
+      </button>
+    {% endfor %}
+  </nav>
+
+  {% for tabset in tabsets %}
+    {% if tabset.panel %}
+      <div
+        role="tabpanel"
+        id="{{ tabset.id }}-panel-{{ loop.index }}"
+        aria-labelledby="{{ tabset.id }}-tab-{{ loop.index }}"
+        tabindex="-1"
+        aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
+        {% if loop.index != default_tab_index %}hidden{% endif %}
+        {% for key, value in tabset.panel_attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ tabset.panel | safe }}
+      </div>
+    {% endif %}
+  {% endfor %}
+</div>
+{% endmacro %}
@@ -0,0 +1,75 @@
+<script>
+  if (!window._toastComponentLoaded) {
+    window._toastComponentLoaded = true;
+
+    const registerToastComponent = () => {
+      Alpine.store('toaster', { isPaused: false });
+      Alpine.data('toast', (config={}) => ({
+        config: config,
+        open: false,
+        timeoutDuration: null,
+        timeoutId: null,
+
+        init() {
+          this.timeoutDuration = config.duration || (config.category === 'error' ? 5000 : 3000);
+          this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+          this.open = true;
+          this.$watch('$store.toaster.isPaused', (isPaused) => {
+            if (!this.open) return;
+            if (isPaused) {
+              this.pauseTimeout();
+            } else {
+              this.resumeTimeout();
+            }
+          });
+        },
+        pauseTimeout() {
+          clearTimeout(this.timeoutId);
+          this.timeoutId = null;
+        },
+        resumeTimeout(index) {
+          if (this.open && this.timeoutId === null) {
+            this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+          }
+        },
+        close() {
+          this.pauseTimeout();
+          this.open = false;
+          this.$el.blur();
+        },
+
+        $toastBindings: {
+          ['@mouseenter']() { this.$store.toaster.isPaused = true },
+          ['@mouseleave']() { this.$store.toaster.isPaused = false },
+          ['@keydown.escape.prevent']() { this.close() },
+          [':aria-hidden']() { return !this.open }
+        },
+      }));
+
+      Alpine.magic('toast', (el) => (config, toasterId='toaster') => {
+        const toaster = document.getElementById(toasterId);
+        const template = document.getElementById('toast-template');
+
+        if (!toaster) {
+          console.error(`Toaster container with id #${targetId} not found.`);
+          return;
+        }
+        if (!template) {
+          console.error('Toast template with id #toast-template not found.');
+          return;
+        }
+
+        const clone = template.content.firstElementChild.cloneNode(true);
+
+        clone.setAttribute('x-data', `toast(${JSON.stringify(config)})`);
+        clone.removeAttribute('id'); 
+
+        toaster.appendChild(clone);
+      });
+    }
+
+    {% for event in (register_on or ["alpine:init"]) %}
+      document.addEventListener('{{ event }}', registerToastComponent);
+    {% endfor %}
+  }
+</script>
@@ -0,0 +1,160 @@
+{% macro toaster(
+  id="toaster",
+  toasts=[],
+  main_attrs=None,
+  is_fragment=false,
+  include_script=false,
+  register_on=["alpine:init"]
+) %}
+{% if not is_fragment and include_script %}
+  {% include "components/toast-script.njk" %}
+{% endif %}
+
+{% set icons = {
+  'success': '<svg aria-hidden="true" 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-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
+  'error': '<svg aria-hidden="true" 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-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
+  'info': '<svg aria-hidden="true" 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-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
+  'warning': '<svg aria-hidden="true" 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-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'
+} %}
+
+<div
+  id="{{ id }}"
+  class="toaster"
+  {% for key, value in main_attrs %}
+    {{ key }}="{{ value }}"
+  {% endfor %}
+  {% if is_fragment %}hx-swap-oob="beforeend"{% endif %}
+>
+{% for toast in toasts %}
+  <div
+    class="toast"
+    role="{{ 'alert' if toast.category == 'error' else 'status' }}"
+    aria-atomic="true"
+    aria-hidden="false"
+    {% if toast.category %}data-category="{{ toast.category }}"{% endif %}
+    x-data="toast('{{ toast.category }}', {{ toast.duration }})"
+    x-bind="$toastBindings"
+  >
+    <div class="toast-content">
+      <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
+        {% if toast.category in ["error", "success", "info", "warning"] %}
+          {{ icons[toast.category] | safe }}
+        {% endif %}
+        <section class="flex-1 flex flex-col gap-0.5 items-start">
+          {% if toast.title %}
+            <h2 class="font-medium">{{ toast.title }}</h2>
+          {% endif %}
+          {% if toast.description %}
+            <p class="text-muted-foreground">{{ toast.description }}</p>
+          {% endif %}
+        </section>
+        {% if toast.action or toast.cancel %}
+          <footer class="flex flex-col gap-1 self-start">
+            {% if toast.action %}
+              {% if toast.action.click %}
+                <button
+                  type="button"
+                  class="btn h-6 text-xs px-2.5 rounded-sm"
+                  @click="{{ toast.action.click }}"
+                >{{ toast.action.label }}</button>
+              {% elif toast.action.url %}
+                <a
+                  href="{{ toast.action.url }}"
+                  class="btn h-6 text-xs px-2.5 rounded-sm"
+                >{{ toast.action.label }}</a>
+              {% endif %}
+            {% endif %}
+            {% if toast.cancel %}
+              {% if toast.cancel.click %}
+                <button
+                  type="button"
+                  class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                  @click="{{ toast.cancel.click }}"
+                >{{ toast.cancel.label }}</button>
+              {% elif toast.cancel.url %}
+                <a
+                  href="{{ toast.cancel.url }}"
+                  class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                >{{ toast.cancel.label }}</a>
+              {% endif %}
+            {% endif %}
+          </footer>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+{% endfor %}
+</div>
+
+{% if not is_fragment %}
+<template id="toast-template">
+  <div
+    class="toast"
+    role="status"
+    aria-atomic="true"
+    x-bind="$toastBindings"
+  >
+    <div class="toast-content">
+      <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
+        <template x-if="config.icon">
+          <span aria-hidden="true" role="img" x-html="config.icon"></span>
+        </template>
+        <template x-if="!config.icon && config.category === 'success'">
+          {{ icons.success | safe }}
+        </template>
+        <template x-if="!config.icon && config.category === 'error'">
+          {{ icons.error | safe }}
+        </template>
+        <template x-if="!config.icon && config.category === 'info'">
+          {{ icons.info | safe }}
+        </template>
+        <template x-if="!config.icon && config.category === 'warning'">
+          {{ icons.warning | safe }}
+        </template>
+        <section class="flex-1 flex flex-col gap-0.5 items-start">
+          <template x-if="config.title">
+            <h2 class="font-medium" x-text="config.title"></h2>
+          </template>
+          <template x-if="config.description">
+            <p class="text-muted-foreground" x-text="config.description"></p>
+          </template>
+        </section>
+        <template x-if="config.action || config.cancel">
+          <footer class="flex flex-col gap-1 self-start">
+            <template x-if="config.action?.click">
+              <button
+                type="button"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+                @click="$evaluate(config.action.click)"
+                x-text="config.action.label"
+              ></button>
+            </template>
+            <template x-if="config.action?.url">
+              <a
+                :href="config.action.url"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+                x-text="config.action.label"
+              ></a>
+            </template>
+            <template x-if="config.cancel?.click">
+              <button
+                type="button"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                @click="$evaluate(config.cancel.click)"
+                x-text="config.cancel.label"
+              ></button>
+            </template>
+            <template x-if="config.cancel?.url">
+              <a
+                :href="config.cancel.url"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                x-text="config.cancel.label"
+              ></a>
+            </template>
+          </footer>
+      </div>
+    </div>
+  </div>
+</template>
+{% endif %}
+{% endmacro %}
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html class="dark"><head>
+  <!-- Theme -->
+  <script>
+  function isDark() {
+    return localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  }
+
+  if (isDark()) {
+    document.documentElement.classList.add('dark');
+  }
+
+  document.addEventListener('alpine:init', () => {
+    Alpine.store('theme', {
+      isDark: isDark(),
+      set(value) {
+        this.isDark = value;
+        localStorage.setItem('theme', value ? 'dark' : 'light');
+      },
+      toggle() {
+        this.isDark = document.documentElement.classList.toggle('dark');
+        localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
+      }
+    });
+  });
+  </script>
+
+  <meta charset="utf-8">
+  <meta http-equiv="Content-Language" content="en">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Title & Description -->
+  <title>{{ site.title + ": " + title if page.url === "/" else title + " - " + site.title }}</title>
+  <meta name="description" content="{{ description or site.description }}"/>
+  <meta name="title" content="{{ title }} | Basecoat">
+  <meta name="description" content="{{ description }}">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+
+  <!-- CSS -->
+  <link rel="preconnect" href="https://rsms.me/">
+  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+  <link rel="stylesheet" href="/assets/styles.css">
+
+  <!-- JS -->
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+  {% include "components/dialog-script.njk" %}
+  {% include "components/dropdown-menu-script.njk" %}
+  {% include "components/popover-script.njk" %}
+  {% include "components/select-script.njk" %}
+  {% include "components/tabs-script.njk" %}
+  {% include "components/toast-script.njk" %}
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/django.min.js"></script>
+  <script>
+    const applyHighlighting = () => { if (window.hljs) hljs.highlightAll(); };
+
+    if (!window._hljsInitialized) {
+      window._hljsInitialized = true;
+      document.addEventListener('DOMContentLoaded', applyHighlighting);
+      document.addEventListener('htmx:afterSwap', applyHighlighting);
+    }
+  </script>
+  
+  {% if head %}{{ head | safe }}{% endif %}
+</head>
+<body>
+<div
+  id="sidebar"
+  class="fixed inset-y-0 left-0 z-50 h-svh border-r bg-sidebar text-sidebar-foreground flex flex-col w-[var(--sidebar-width)] transition-transform ease-in-out peer aria-[hidden=true]:-translate-x-full"
+  aria-hidden="false"
+  :aria-hidden="open ? 'false' : 'true'"
+  @sidebar:toggle.window="toggle()"
+  x-data="{
+    open: true,
+    toggle() { this.open = !this.open }
+  }"
+>
+  {% include "partials/sidebar.njk" %}
+</div>
+
+<main id="content" class="relative ml-(--sidebar-width) peer-aria-hidden:ml-0 transition-[margin-left] ease-in-out">
+  <header class="bg-background sticky inset-x-0 top-0 isolate z-10 flex shrink-0 items-center gap-2 border-b">
+    <div class="flex h-14 w-full items-center gap-2 px-4">
+      <button
+        type="button"
+        aria-label="Hide sidebar"
+        data-tooltip="Hide sidebar"
+        :data-tooltip="sidebarOpen ? 'Hide sidebar' : 'Show sidebar'"
+        data-side="bottom"
+        data-align="start"
+        class="btn-icon-ghost size-8 mr-auto"
+        x-init
+        x-data="{ sidebarOpen: true }"
+        @click="
+          sidebarOpen = !sidebarOpen;
+          $dispatch('sidebar:toggle');
+        "
+      >
+        {% lucide "panel-left" %}
+      </button>
+      <select class="select h-8 leading-none">
+        <option value="light">Default</option>
+        <option value="light">Other</option>
+      </select>
+      <button
+        type="button"
+        aria-label="Toggle theme"
+        data-tooltip="Toggle theme"
+        data-side="bottom"
+        data-align="end"
+        class="btn-icon-outline size-8"
+        x-init
+        @click="$store.theme.toggle()" 
+      >
+        <span x-show="$store.theme.isDark">{% lucide "sun" %}</span>
+        <span x-show="!$store.theme.isDark">{% lucide "moon" %}</span>
+      </button>
+    </div>
+  </header>
+
+  <div class="grid gap-4 p-4">
+    {{ content | safe }}
+  </div>
+</main>
+
+{% from "components/toast.njk" import toaster %}
+{{ toaster() }}
+</body>
+</html>
@@ -0,0 +1,39 @@
+---
+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>
@@ -0,0 +1,39 @@
+---
+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>
@@ -0,0 +1,29 @@
+{% macro code_block(code, language="html") %}
+<div 
+  class="relative"
+  x-data="{ 
+    copied: false, 
+    copy() { 
+      const codeElement = $refs.code;
+      if (!codeElement) return;
+      navigator.clipboard.writeText(codeElement.textContent || '').then(() => {
+        this.copied = true;
+        setTimeout(() => { this.copied = false }, 2000);
+      }).catch(err => {
+        console.error('Failed to copy text: ', err);
+      });
+    } 
+  }"
+>
+  <pre x-ref="code" class="text-sm max-h-[650px] overflow-y-auto rounded-xl scrollbar"><code class="language-{{ language }} !bg-neutral-900 p-0">{{- code | escape -}}</code></pre>
+  
+  <button 
+    @click="copy()" 
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-3 top-3"
+  >
+    {% lucide "clipboard", { "class": "size-4", "x-show": "!copied" } %}
+    {% lucide "check", { "class": "size-4", "x-show": "copied" } %}
+  </button>
+</div>
+{% endmacro %}
+
@@ -0,0 +1,28 @@
+{% macro code_preview(id, code, class=None, default_code=false) %}
+{% from "./code_block.njk" import code_block %}
+{% set code_panel = code_block(code) %}
+{% 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">
+    <div {% if class %}class="{{ class }}"{% endif %}>
+      {{ code | safe }}
+    </div>
+  </div>
+</div>
+{% endset %}
+
+<div class="relative my-6">
+  {% from "components/tabs.njk" import tabs %}
+  {% set tabsets = [
+    { tab: "Preview", panel: preview_panel },
+    { tab: "Code", panel: code_panel }
+  ] %}
+  
+  {{ tabs(
+    id="code-block-{{ id }}",
+    tabsets=tabsets,
+    default_tab_index=(2 if default_code else 1),
+    register_on=["alpine:init", "htmx:afterSwap"]
+  ) }}
+</div>
+{% endmacro %}
@@ -0,0 +1,94 @@
+<section id="accordion" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Accordion</h2>
+  </header>
+  <div class="p-4">
+    <div class="group grid w-full max-w-xl gap-4">
+      <section
+        x-init
+        @click="
+          const clickedSummary = $event.target.closest('summary');
+          if (!clickedSummary) return;
+          const clickedDetails = clickedSummary.closest('details');
+          if (!clickedDetails) return;
+          $el.querySelectorAll('details').forEach(detailsEl => {
+            if (detailsEl !== clickedDetails) {
+              detailsEl.removeAttribute('open');
+            }
+          });
+        "
+      >
+        <details class="group border-b last:border-b-0">
+          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+              Is it accessible?
+              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+            </h2>
+          </summary>
+          <section class="pb-4">
+            <p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
+          </section>
+        </details>
+        <details class="group border-b last:border-b-0">
+          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+              Is it styled?
+              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+            </h2>
+          </summary>
+          <section class="pb-4">
+            <p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
+          </section>
+        </details>
+        <details class="group border-b last:border-b-0">
+          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+              Is it animated?
+              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+            </h2>
+          </summary>
+          <section>
+            <p class="text-sm">Yes. It's animated by default, but you can disable it if you prefer.</p>
+          </section>
+        </details>
+      </section>
+      <section
+        x-init
+        @click="
+          const clickedSummary = $event.target.closest('summary');
+          if (!clickedSummary) return;
+          const clickedDetails = clickedSummary.closest('details');
+          if (!clickedDetails) return;
+          $el.querySelectorAll('details').forEach(detailsEl => {
+            if (detailsEl !== clickedDetails) {
+              detailsEl.removeAttribute('open');
+            }
+          });
+        "
+      >
+        <details class="group border-b last:border-b-0">
+          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+              What are the key considerations when implementing a comprehensive enterprise-level authentication system?
+              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+            </h2>
+          </summary>
+          <section class="pb-4">
+            <p class="text-sm">Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.</p>
+          </section>
+        </details>
+        <details class="group">
+          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+              How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?
+              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+            </h2>
+          </summary>
+          <section>
+            <p class="text-sm">Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.</p>
+          </section>
+        </details>
+      </section>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,25 @@
+{% from "components/dialog.njk" import dialog %}
+
+<section id="alert-dialog" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Alert Dialog</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-4">
+      {% set footer %}
+        <button class="btn-outline" @click="open = false">Cancel</button>
+        <button class="btn-primary" @click="open = false">Continue</button>
+      {% endset %}
+      {{ dialog(
+        id="alert-dialog-demo",
+        title="Are you absolutely sure?",
+        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+        trigger="Open dialog",
+        trigger_attrs={"class": "btn-outline"},
+        footer=footer,
+        close_button=false,
+        close_on_overlay_click=false
+      ) }}
+    </div>
+  </div>
+</section>
@@ -0,0 +1,69 @@
+<section id="alert" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Alert</h2>
+  </header>
+  <div class="p-4">
+    <div class="grid max-w-xl items-start gap-4">
+      <div class="alert">
+        {% lucide "circle-check" %}
+        <h2>Success! Your changes have been saved</h2>
+        <section>This is an alert with icon, title and description.</section>
+      </div>
+
+      <div class="alert">
+        {% lucide "bookmark-check" %}
+        <section>This is an alert with icon, title and description.</section>
+      </div>
+
+      <div class="alert">
+        <section>This one has a description only. No title. No icon.</section>
+      </div>
+
+      <div class="alert">
+        {% lucide "popcorn" %}
+        <h2>Let's try one with icon and title.</h2>
+      </div>
+
+      <div class="alert">
+        {% lucide "shield-alert" %}
+        <h2>This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines</h2>
+      </div>
+
+      <div class="alert">
+        {% lucide "gift" %}
+        <section>This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines</section>
+      </div>
+
+      <div class="alert">
+        {% lucide "circle-alert" %}
+        <h2>This is an extremely long alert title that spans multiple lines to demonstrate how the component handles very lengthy headings while maintaining readability and proper text wrapping behavior</h2>
+        <section>This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.</section>
+      </div>
+
+      <div class="alert-destructive">
+        {% lucide "circle-alert" %}
+        <h2>Something went wrong!</h2>
+        <section>Your session has expired. Please log in again.</section>
+      </div>
+
+      <div class="alert-destructive">
+        {% lucide "circle-alert" %}
+        <h2>Something went wrong!</h2>
+        <section>
+          <p>Please verify your billing information and try again.</p>
+          <ul>
+            <li>Check your card details</li>
+            <li>Ensure sufficient funds</li>
+            <li>Verify billing address</li>
+          </ul>
+        </section>
+      </div>
+
+      <div class="alert border-amber-50 bg-amber-50 text-amber-900 dark:border-amber-950 dark:bg-amber-950 dark:text-amber-100">
+        {% lucide "circle-check" %}
+        <h2>Plot Twist: This Alert is Actually Amber!</h2>
+        <section>This one has custom colors for light and dark mode.</section>
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,34 @@
+<section id="avatar" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Avatar</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-row flex-wrap items-center gap-4">
+      <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+      
+      <span class="size-8 shrink-0 bg-muted flex items-center justify-center rounded-full">CN</span>
+      
+      <img class="size-12 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+      
+      <img class="size-8 shrink-0 object-cover rounded-lg" alt="@hunvreus" src="https://github.com/hunvreus.png">
+
+      <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+        <img alt="@shadcn" src="https://github.com/shadcn.png">
+        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+      </div>
+
+      <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-12 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+        <img alt="@shadcn" src="https://github.com/shadcn.png">
+        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+      </div>
+
+      <div class="flex -space-x-2 hover:space-x-1 [&_img]:ring-background [&_img]:size-12 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full [&_img]:ring-2 [&_img]:grayscale [&_img]:transition-all [&_img]:ease-in-out [&_img]:duration-300">
+        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+        <img alt="@shadcn" src="https://github.com/shadcn.png">
+        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,44 @@
+<section id="badge" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Badge</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-2">
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <span class="badge">Primary</span>
+        <span class="badge-secondary">Secondary</span>
+        <span class="badge-outline">Outline</span>
+        <span class="badge-destructive">Destructive</span>
+        <span class="badge-outline">
+          {% lucide "check" %}
+          Badge
+        </span>
+        <span class="badge-destructive">
+          {% lucide "circle-alert" %}
+          Alert
+        </span>
+        <span class="badge rounded-full min-w-5 px-1">8</span>
+        <span class="badge-destructive rounded-full min-w-5 px-1">99</span>
+        <span class="badge-outline rounded-full min-w-5 px-1 font-mono tabular-nums">20+</span>
+      </div>
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <a href="#" class="badge">
+          Link
+          {% lucide "arrow-right" %}
+        </a>
+        <a href="#" class="badge-secondary">
+          Link
+          {% lucide "arrow-right" %}
+        </a>
+        <a href="#" class="badge-destructive">
+          Link
+          {% lucide "arrow-right" %}
+        </a>
+        <a href="#" class="badge-outline">
+          Link
+          {% lucide "arrow-right" %}
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,39 @@
+{% from "components/popover.njk" import popover %}
+
+<section id="breadcrumb" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Breadcrumb</h2>
+  </header>
+  <div class="p-4">
+    <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
+      <li class="inline-flex items-center gap-1.5">
+        <a href="#" class="hover:text-foreground transition-colors">Home</a>
+      </li>
+      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+      <li class="inline-flex items-center gap-1.5">
+        {% set trigger %}
+          {% lucide "ellipsis" %}
+        {% endset %}
+        {% call popover(
+          id="demo-breadcrumb-menu",
+          trigger=trigger,
+          trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"}
+        ) %}
+          <nav role="menu">
+            <button type="button" role="menuitem">Documentation</button>
+            <button type="button" role="menuitem">Themes</button>
+            <button type="button" role="menuitem">GitHub</button>
+          </nav>
+        {% endcall %}
+      </li>
+      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+      <li class="inline-flex items-center gap-1.5">
+        <a href="#" class="hover:text-foreground transition-colors">Components</a>
+      </li>
+      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+      <li class="inline-flex items-center gap-1.5">
+        <span class="text-foreground font-normal">Breadcrumb</span>
+      </li>
+    </ol>
+  </div>
+</section>
@@ -0,0 +1,98 @@
+<section id="button" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Button</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <button class="btn-primary">Primary</button>
+        <button class="btn-outline">Outline</button>
+        <button class="btn-ghost">Ghost</button>
+        <button class="btn-destructive">
+          {% lucide "send" %}
+          Danger
+        </button>
+        <button class="btn-secondary">Secondary</button>
+        <button class="btn-link">Link</button>
+        <button class="btn-outline">
+          {% lucide "send" %}
+          Send
+        </button>
+        <button class="btn-outline">
+          Learn more
+          {% lucide "arrow-right" %}
+        </button>
+        <button class="btn-outline" disabled>
+          {% lucide "loader", { "class": "animate-spin" } %}
+          Loading
+        </button>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <button class="btn-sm-primary">Primary</button>
+        <button class="btn-sm-outline">Outline</button>
+        <button class="btn-sm-ghost">Ghost</button>
+        <button class="btn-sm-destructive">Danger</button>
+        <button class="btn-sm-secondary">Secondary</button>
+        <button class="btn-sm-link">Link</button>
+        <button class="btn-sm-outline">
+          {% lucide "send" %}
+          Send
+        </button>
+        <button class="btn-sm-outline">
+          Learn more
+          {% lucide "arrow-right" %}
+        </button>
+        <button class="btn-sm-outline" disabled>
+          {% lucide "loader", { "class": "animate-spin" } %}
+          Loading
+        </button>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <button class="btn-lg-primary">Primary</button>
+        <button class="btn-lg-outline">Outline</button>
+        <button class="btn-lg-ghost">Ghost</button>
+        <button class="btn-lg-destructive">
+          {% lucide "send" %}
+          Danger
+        </button>
+        <button class="btn-lg-secondary">Secondary</button>
+        <button class="btn-lg-link">Link</button>
+        <button class="btn-lg-outline">
+          {% lucide "send" %}
+          Send
+        </button>
+        <button class="btn-lg-outline">
+          Learn more
+          {% lucide "arrow-right" %}
+        </button>
+        <button class="btn-lg-outline" disabled>
+          {% lucide "loader", { "class": "animate-spin" } %}
+          Loading
+        </button>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <button class="btn-icon-primary">
+          {% lucide "download" %}
+        </button>
+        <button class="btn-icon-secondary">
+          {% lucide "upload" %}
+        </button>
+        <button class="btn-icon-outline">
+          {% lucide "arrow-right" %}
+        </button>
+        <button class="btn-icon-ghost">
+          {% lucide "ellipsis" %}
+        </button>
+        <button class="btn-icon-destructive">
+          {% lucide "trash-2" %}
+        </button>
+        <button class="btn-icon-outline" disabled>
+          {% lucide "loader", { "class": "animate-spin" } %}
+        </button>
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,144 @@
+<section id="card" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Card</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col items-start gap-4">
+      <div class="card w-full max-w-sm">
+        <header>
+          <h2>Login to your account</h2>
+          <p>Enter your details below to login to your account</p>
+        </header>
+        <section>
+          <form class="form grid gap-6">
+            <div class="grid gap-2">
+              <label for="demo-card-form-email">Email</label>
+              <input type="email" id="demo-card-form-email">
+            </div>
+            <div class="grid gap-2">
+              <div class="flex items-center gap-2">
+                <label for="demo-card-form-password">Password</label>
+                <a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">Forgot your password?</a>
+              </div>
+              <input type="password" id="demo-card-form-password">
+            </div>
+          </form>
+        </section>
+        <footer class="flex flex-col items-center gap-2">
+          <button type="button" class="btn w-full">Login</button>
+          <button type="button" class="btn-outline w-full">Login with Google</button>
+          <p class="mt-4 text-center text-sm">Don't have an account? <a href="#" class="underline-offset-4 hover:underline">Sign up</a></p>
+        </footer>
+      </div>
+
+      <div class="card">
+        <header>
+          <h2>Meeting Notes</h2>
+          <p>Transcript from the meeting with the client.</p>
+        </header>
+        <section class="text-sm">
+          <p>Client requested dashboard redesign with focus on mobile responsiveness.</p>
+          <ol class="mt-4 flex list-decimal flex-col gap-2 pl-6">
+            <li>New analytics widgets for daily/weekly metrics</li>
+            <li>Simplified navigation menu</li>
+            <li>Dark mode support</li>
+            <li>Timeline: 6 weeks</li>
+            <li>Follow-up meeting scheduled for next Tuesday</li>
+          </ol>
+        </section>
+        <footer class="flex items-center">
+          <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+            <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+            <img alt="@shadcn" src="https://github.com/shadcn.png">
+            <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+          </div>
+        </footer>
+      </div>
+
+      <div class="card">
+        <header>
+          <h2>Is this an image?</h2>
+          <p>This is a card with an image.</p>
+        </header>
+        <section class="px-0">
+          <img
+            alt="Photo by Drew Beamer"
+            loading="lazy"
+            width="500"
+            height="500"
+            class="aspect-video object-cover" style="color:transparent"
+            srcset="
+              https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=640&q=75 1x,
+              https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75 2x
+            "
+            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75"
+          />
+        </section>
+        <footer class="flex items-center gap-2">
+          <span class="badge-outline">
+            {% lucide "bed" %}
+            1
+          </span>
+          <span class="badge-outline">
+            {% lucide "bath" %}
+            2
+          </span>
+          <span class="badge-outline">
+            {% lucide "land-plot" %}
+            350m²
+          </span>
+          <span class="ml-auto font-medium tabular-nums">
+            $135,000
+          </span>
+        </footer>
+      </div>
+
+      <div class="flex w-full flex-wrap items-start gap-8 md:*:[.card]:basis-1/4">
+        <div class="card">
+          <section>Content Only</section>
+        </div>
+
+        <div class="card">
+          <header>
+            <h2>Header Only</h2>
+            <p>This is a card with a header and a description.</p>
+          </header>
+        </div>
+
+        <div class="card">
+          <header>
+            <h2>Header and Content</h2>
+            <p>This is a card with a header and a content.</p>
+          </header>
+          <section>Content only.</section>
+        </div>
+
+        <div class="card">
+          <footer>Footer Only</footer>
+        </div>
+
+        <div class="card">
+          <header>
+            <h2>Header + Footer</h2>
+            <p>This is a card with a header and a footer.</p>
+          </header>
+          <footer>Footer</footer>
+        </div>
+
+        <div class="card">
+          <section>Content</section>
+          <footer>Footer</footer>
+        </div>
+
+        <div class="card">
+          <header>
+            <h2>Header + Content + Footer</h2>
+            <p>This is a card with a header, content and footer.</p>
+          </header>
+          <section>Content</section>
+          <footer>Footer</footer>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,31 @@
+<section id="checkbox" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Checkbox</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-6 max-w-lg">
+      <label class="label gap-3">
+        <input type="checkbox" class="input">
+        Accept terms and conditions
+      </label>
+      <div class="flex items-start gap-3">
+        <input type="checkbox" id="demo-checkbox-label-and-description" class="input">
+        <div class="grid gap-2">
+          <label for="demo-checkbox-label-and-description" class="label">Accept terms and conditions</label>
+          <p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
+        </div>
+      </div>
+      <label class="label gap-3">
+        <input type="checkbox" class="input" disabled>
+        Enable notifications
+      </label>
+      <label class="flex items-start gap-3 border p-3 hover:bg-accent/50 rounded-lg has-[input[type='checkbox']:checked]:border-blue-600 has-[input[type='checkbox']:checked]:bg-blue-50 dark:has-[input[type='checkbox']:checked]:border-blue-900 dark:has-[input[type='checkbox']:checked]:bg-blue-950">
+        <input type="checkbox" class="input checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-700 dark:checked:border-blue-700 checked:after:bg-white" checked>
+        <div class="grid gap-2">
+          <h2 class="text-sm leading-none font-medium">Enable notifications</h2>
+          <p class="text-muted-foreground text-sm">You can enable or disable notifications at any time.</p>
+        </div>
+      </label>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,80 @@
+{% from "components/select.njk" import select %}
+
+<section id="combobox" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Combobox</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-wrap items-start gap-4">
+      {% set options_frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] %}
+      {% call select(
+        content_attrs={"class": "w-48"},
+        listbox_attrs={"data-empty": "No framework found."},
+        is_combobox=true
+      ) %}
+        {% for framework in options_frameworks %}
+          <div role="option" data-value="{{ framework }}">{{ framework }}</div>
+        {% endfor %}
+      {% endcall %}
+
+      {% set options_timezones = [
+        {
+          label: "Americas",
+          timezones: [
+            { value: "America/New_York", label: "(GMT-5) New York" },
+            { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" },
+            { value: "America/Chicago", label: "(GMT-6) Chicago" },
+            { value: "America/Toronto", label: "(GMT-5) Toronto" },
+            { value: "America/Vancouver", label: "(GMT-8) Vancouver" },
+            { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" }
+          ]
+        },
+        {
+          label: "Europe",
+          timezones: [
+            { value: "Europe/London", label: "(GMT+0) London" },
+            { value: "Europe/Paris", label: "(GMT+1) Paris" },
+            { value: "Europe/Berlin", label: "(GMT+1) Berlin" },
+            { value: "Europe/Rome", label: "(GMT+1) Rome" },
+            { value: "Europe/Madrid", label: "(GMT+1) Madrid" },
+            { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" }
+          ]
+        },
+        {
+          label: "Asia/Pacific",
+          timezones: [
+            { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" },
+            { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" },
+            { value: "Asia/Singapore", label: "(GMT+8) Singapore" },
+            { value: "Asia/Dubai", label: "(GMT+4) Dubai" },
+            { value: "Australia/Sydney", label: "(GMT+11) Sydney" },
+            { value: "Asia/Seoul", label: "(GMT+9) Seoul" }
+          ]
+        }
+      ] %}
+      {% call select(
+        content_attrs={"class": "w-72"},
+        listbox_attrs={"data-empty": "No timezone found."},
+        is_combobox=true
+      ) %}
+        <div class="max-h-64 overflow-y-auto scrollbar">
+          {% for group in options_timezones %}
+            <div role="group" aria-labelledby="demo-combobox-timezones-group-{{ loop.index0 }}">
+              <span id="demo-combobox-timezones-group-{{ loop.index0 }}" role="heading">{{ group.label }}</span>
+              {% for timezone in group.timezones %}
+                <div role="option" data-value="{{ timezone.value}}">
+                  {{ timezone.label }}
+                </div>
+              {% endfor %}
+            </div>
+          {% endfor %}
+        </div>
+        <hr role="separator">
+        <div role="option">
+          {% lucide "circle-plus" %}
+          Create timezone
+        </div>
+      {% endcall %}
+    </div>
+  </div>
+</section>
@@ -0,0 +1,73 @@
+{% from "components/dialog.njk" import dialog %}
+
+<section id="dialog" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Dialog</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-wrap items-center gap-4">
+      {% set footer %}
+        <button class="btn-outline" @click="open = false">Cancel</button>
+        <button class="btn" @click="open = false">Save changes</button>
+      {% endset %}
+      {% call dialog(
+        id="demo-dialog-edit-profile",
+        title="Edit profile",
+        description="Make changes to your profile here. Click save when you're done.",
+        main_attrs={"x-ref": "myDialog"},
+        trigger="Edit Profile",
+        trigger_attrs={"class": "btn-outline"},
+        content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+        footer=footer
+      ) %}
+      <form class="form grid gap-4">
+        <div class="grid gap-3">
+          <label for="demo-dialog-edit-profile-name">Name</label>
+          <input type="text" value="Pedro Duarte" id="demo-dialog-edit-profile-name" />
+        </div>
+        <div class="grid gap-3">
+          <label for="demo-dialog-edit-profile-username">Username</label>
+          <input type="text" value="@peduarte" id="demo-dialog-edit-profile-username" />
+        </div>
+      </form>
+      {% endcall %}
+      
+      {% set footer %}
+        <button class="btn-outline" @click="open = false">Close</button>
+      {% endset %}
+      {% call dialog(
+        id="dialog-example",
+        title="Scrollable Content",
+        description="This is a dialog with scrollable content.",
+        main_attrs={"x-ref": "myDialog"},
+        trigger="Scrollable Content",
+        trigger_attrs={"class": "btn-outline"},
+        content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+        content_body_attrs={"class": "overflow-y-auto scrollbar"},
+        footer=footer
+      ) %}
+      <div class="space-y-4 text-sm">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+      {% endcall %}
+
+      <button
+        x-init
+        @click="$dispatch('dialog:open', { id: 'dialog-example' })"
+        type="button"
+        class="btn-outline"
+      >
+        Trigger dialog:open
+      </button>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,288 @@
+{% from "components/dropdown-menu.njk" import dropdown_menu %}
+
+<section id="dropdown-menu" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Dropdown Menu</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-wrap items-start gap-4">
+      {% call dropdown_menu(
+        id="dropdown-menu",
+        trigger="Open",
+        trigger_attrs={"class": "btn-outline"},
+        content_attrs={"class": "min-w-56"}
+      ) %}
+        <div role="group" aria-labelledby="account-options">
+          <span id="account-options" role="heading">My Account</span>
+          <button type="button" role="menuitem">
+            Profile
+            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+          </button>
+          <button type="button" role="menuitem">
+            Billing
+            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
+          </button>
+          <button type="button" role="menuitem">
+            Settings
+            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
+          </button>
+          <button type="button" role="menuitem">
+            Keyboard shortcuts
+            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
+          </button>
+        </div>
+        <hr role="separator">
+        <button type="button" role="menuitem">GitHub</button>
+        <button type="button" role="menuitem">Support</button>
+        <button type="button" role="menuitem" disabled>API</button>
+        <hr role="separator">
+        <button type="button" role="menuitem">
+          Logout
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+        </button>
+      {% endcall %}
+
+      {% call dropdown_menu(
+        id="dropdown-menu-checkboxes",
+        trigger="Checkboxes",
+        trigger_attrs={"class": "btn-outline"},
+        content_attrs={"class": "min-w-56"},
+        register_on=["alpine:init", "htmx:afterSwap"]
+      ) %}
+      <div role="group" aria-labelledby="account-options">
+        <span id="account-options" role="heading">Account Options</span>
+        <button type="button" role="menuitem">
+          {% lucide "user" %}
+          Profile
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+        </button>
+        <button type="button" role="menuitem">
+          {% lucide "credit-card" %}
+          Billing
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
+        </button>
+        <button type="button" role="menuitem">
+          {% lucide "settings" %}
+          Settings
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
+        </button>
+      </div>
+      <hr role="separator">
+      <div role="group" aria-labelledby="appearance-options">
+        <span id="appearance-options" role="heading">Appearance</span>
+        <button
+          type="button"
+          role="menuitemcheckbox"
+          aria-checked="true"
+          class="group"
+          x-data="{ checked: true }"
+          @click="checked = !checked"
+          :aria-checked="checked"
+        >
+          {% lucide "check", {
+            "class": "invisible group-aria-checked:visible",
+            "aria-hidden": "true",
+            "focusable": "false"
+          } %}
+          Status Bar
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+        </button>
+        <button
+          type="button"
+          role="menuitemcheckbox"
+          aria-checked="false"
+          class="group"
+          disabled
+          x-data="{ checked: false }"
+          @click="checked = !checked"
+          :aria-checked="checked"
+        >
+          {% lucide "check", {
+            "class": "invisible group-aria-checked:visible",
+            "aria-hidden": "true",
+            "focusable": "false"
+          } %}
+          Activity Bar
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
+        </button>
+        <button
+          type="button"
+          role="menuitemcheckbox"
+          aria-checked="false"
+          class="group"
+          x-data="{ checked: false }"
+          @click="checked = !checked"
+          :aria-checked="checked"
+        >
+          {% lucide "check", {
+            "class": "invisible group-aria-checked:visible",
+            "aria-hidden": "true",
+            "focusable": "false"
+          } %}
+          Panel
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
+        </button>
+      </div>
+      <hr role="separator">
+      <button type="button" role="menuitem">
+        {% lucide "log-out" %}
+        Logout
+        <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+      </button>
+      {% endcall %}
+
+
+
+      {% set profile_menu %}
+        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+          <img alt="@hunvreus" src="https://github.com/hunvreus.png" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
+          <div class="grid flex-1 text-left text-sm leading-tight">
+            <span class="truncate font-medium">hunvreus</span>
+            <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
+          </div>
+        </div>
+        <hr role="separator">
+        <button type="button" role="menuitem">
+          {% lucide "star" %}
+          Upgrade to Pro
+        </button>
+        <hr role="separator">
+        <button type="button" role="menuitem">
+          {% lucide "user" %}
+          Account
+        </button>
+        <button type="button" role="menuitem">
+          {% lucide "credit-card" %}
+          Billing
+        </button>
+        <button type="button" role="menuitem">
+          {% lucide "bell" %}
+          Notifications
+        </button>
+        <hr role="separator">
+        <button type="button" role="menuitem">
+          {% lucide "log-out" %}
+          Signout
+        </button>
+      {% endset %}
+
+      {% call dropdown_menu(
+        id="dropdown-menu-radio-group",
+        trigger="Radio Group",
+        trigger_attrs={"class": "btn-outline"},
+        content_attrs={"class": "min-w-56"},
+        register_on=["alpine:init", "htmx:afterSwap"]
+      ) %}
+      <div role="group" aria-labelledby="position-options" x-data="{ checked: 'bottom' }">
+        <span id="position-options" role="heading">Panel Position</span>
+        <hr role="separator">
+        <button
+          type="button"
+          role="menuitemradio"
+          aria-checked="false"
+          class="group"
+          @click="checked = 'top'"
+          :aria-checked="checked == 'top'"
+        >
+          <div class="size-4 flex items-center justify-center">
+            <div
+              class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
+              aria-hidden="true",
+              focusable="false"
+            ></div>
+          </div>
+          Status Bar
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+        </button>
+        <button
+          type="button"
+          role="menuitemradio"
+          aria-checked="false"
+          class="group"
+          @click="checked = 'bottom'"
+          :aria-checked="checked == 'bottom'"
+        >
+          <div class="size-4 flex items-center justify-center">
+            <div
+              class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
+              aria-hidden="true",
+              focusable="false"
+            ></div>
+          </div>
+          Activity Bar
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
+        </button>
+        <button
+          type="button"
+          role="menuitemradio"
+          aria-checked="false"
+          class="group"
+          @click="checked = 'right'"
+          :aria-checked="checked == 'right'"
+        >
+          <div class="size-4 flex items-center justify-center">
+            <div
+              class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
+              aria-hidden="true",
+              focusable="false"
+            ></div>
+          </div>
+          Panel
+          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
+        </button>
+      </div>
+      {% endcall %}
+
+      {% set trigger %}
+        <img alt="@hunvreus" src="https://github.com/hunvreus.png" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
+        <div class="grid flex-1 text-left text-sm leading-tight">
+          <span class="truncate font-medium">hunvreus</span>
+          <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
+        </div>
+        {% lucide "chevrons-up-down", { "class": "text-muted-foreground ml-auto" } %}
+      {% endset %}
+      {% call dropdown_menu(
+        id="dropdown-checkboxes",
+        trigger=trigger,
+        trigger_attrs={"class": "btn-outline h-12 justify-start px-2 md:max-w-[200px]"}
+      ) %}
+        {{ profile_menu | safe }}
+      {% endcall %}
+
+      {% set trigger %}
+        <img alt="@hunvreus" src="https://github.com/hunvreus.png" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
+      {% endset %}
+      {% call dropdown_menu(
+        id="dropdown-checkboxes",
+        trigger=trigger,
+        trigger_attrs={"class": "btn-icon-ghost rounded-full size-8"}
+      ) %}
+        {{ profile_menu | safe }}
+      {% endcall %}
+
+      {% set trigger %}
+        {% lucide "ellipsis" %}
+      {% endset %}
+      {% call dropdown_menu(
+        id="dropdown-checkboxes",
+        trigger=trigger,
+        trigger_attrs={"class": "btn-icon-ghost"},
+        content_attrs={"class": "min-w-32"}
+      ) %}
+        <button type="button" role="menuitem">
+          {% lucide "pencil" %}
+          Edit
+        </button>
+        <button type="button" role="menuitem">
+          {% lucide "share" %}
+          Share
+        </button>
+        <hr role="separator">
+        <button type="button" role="menuitem" class="text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive [&_svg]:!text-destructive">
+          {% lucide "trash-2" %}
+          Delete
+        </button>
+      {% endcall %}
+    </div>
+  </div>
+</section>
@@ -0,0 +1,106 @@
+<section id="form" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Form</h2>
+  </header>
+  <div class="p-4">
+    <form class="form grid w-full max-w-sm gap-6">
+      <div class="grid gap-2">
+        <label for="demo-form-text">Username</label>
+        <input type="text" id="demo-form-text" placeholder="hunvreus">
+        <p class="text-muted-foreground text-sm">This is your public display name.</p>
+      </div>
+
+      <div class="grid gap-2">
+        <label for="demo-form-select">Email</label>
+        <select id="demo-form-select">
+          <option value="bob@example.com">m@example.com</option>
+          <option value="alice@example.com">m@google.com</option>
+          <option value="john@example.com">m@support.com</option>
+        </select>
+        <p class="text-muted-foreground text-sm">You can manage email addresses in your email settings.</p>
+      </div>
+
+      <div class="grid gap-2">
+        <label for="demo-form-text">Bio</label>
+        <textarea id="demo-form-textarea" placeholder="I like to..." rows="3"></textarea>
+        <p class="text-muted-foreground text-sm">You can @mention other users and organizations.</p>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <label for="demo-form-radio">Notify me about...</label>
+        <fieldset id="demo-form-radio" class="grid gap-3">
+          <label class="font-normal"><input type="radio" name="demo-form-radio" value="1">All new messages</label>
+          <label class="font-normal"><input type="radio" name="demo-form-radio" value="2">Direct messages and mentions</label>
+          <label class="font-normal"><input type="radio" name="demo-form-radio" value="3" >Nothing</label>
+        </fieldset>
+      </div>
+
+      <div class="flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
+        <input type="checkbox" id="demo-form-checkbox">
+        <div class="flex flex-col gap-1">
+          <label for="demo-form-checkbox" class="leading-snug">Use different settings for my mobile devices</label>
+          <p class="text-muted-foreground text-sm leading-snug">You can manage your mobile notifications in the mobile settings page.</p>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <header>
+          <label for="demo-form-checkboxes" class="text-base leading-normal">Sidebar</label>
+          <p class="text-muted-foreground text-sm">Select the items you want to display in the sidebar.</p>
+        </header>
+        <fieldset id="demo-form-checkboxes" class="flex flex-col gap-2">
+          <label class="font-normal leading-tight">
+            <input type="checkbox" name="demo-form-checkboxes" value="1" checked>
+            Recents
+          </label>
+          <label class="font-normal leading-tight">
+            <input type="checkbox" name="demo-form-checkboxes" value="2" checked>
+            Home
+          </label>
+          <label class="font-normal leading-tight">
+            <input type="checkbox" name="demo-form-checkboxes" value="3">
+            Applications
+          </label>
+          <label class="font-normal leading-tight">
+            <input type="checkbox" name="demo-form-checkboxes" value="4">
+            Desktop
+          </label>
+          <label class="font-normal leading-tight">
+            <input type="checkbox" name="demo-form-checkboxes" value="5">
+            Download
+          </label>
+          <label class="font-normal leading-tight">
+            <input type="checkbox" name="demo-form-checkboxes" value="6">
+            Documents
+          </label>
+        </fieldset>
+      </div>
+
+      <div class="grid gap-2">
+        <label for="demo-form-date">Date of birth</label>
+        <input type="date" id="demo-form-date">
+        <p class="text-muted-foreground text-sm">Your date of birth is used to calculate your age.</p>
+      </div>
+
+      <section class="grid gap-4">
+        <h3 class="text-lg font-medium">Email Notifications</h3>
+        <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+          <div class="flex flex-col gap-0.5">
+            <label for="demo-form-switch" class="leading-normal">Marketing emails</label>
+            <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
+          </div>
+          <input type="checkbox" id="demo-form-switch" role="switch">
+        </div>
+        <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+          <div class="flex flex-col gap-0.5 opacity-60">
+            <label for="demo-form-switch-disabled" class="leading-normal">Marketing emails</label>
+            <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
+          </div>
+          <input type="checkbox" id="demo-form-switch-disabled" role="switch" disabled>
+        </div>
+      </section>
+
+      <button type="submit" class="btn">Submit</button>
+    </form>
+  </div>
+</section>
@@ -0,0 +1,24 @@
+<section id="input" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Input</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-y-4">
+      <input type="text" class="input" placeholder="Text">
+      <input type="text" class="input" disabled placeholder="Disabled">
+      <input type="text" class="input" aria-invalid="true" placeholder="Error">
+      <input type="email" class="input" placeholder="Email">
+      <input type="password" class="input" placeholder="Password">
+      <input type="number" class="input" placeholder="Number">
+      <input type="file" class="input">
+      <input type="tel" class="input" placeholder="Tel">
+      <input type="url" class="input" placeholder="URL">
+      <input type="search" class="input" placeholder="Search">
+      <input type="date" class="input">
+      <input type="datetime-local" class="input">
+      <input type="month" class="input">
+      <input type="week" class="input">
+      <input type="time" class="input">
+    </div>
+  </div>
+</section>
@@ -0,0 +1,27 @@
+<section id="label" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Label</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-y-4">
+      <div class="grid w-full max-w-sm gap-6">
+        <div class="flex items-center gap-3">
+          <input type="checkbox" id="label-demo-terms" class="input">
+          <label for="label-demo-terms" class="label">Accept terms and conditions</label>
+        </div>
+        <div class="grid gap-3">
+          <label for="label-demo-text" class="label">Username</label>
+          <input type="text" id="label-demo-text" class="input" placeholder="Username">
+        </div>
+        <div class="grid gap-3">
+          <label for="label-demo-disabled" class="label">Disabled</label>
+          <input type="text" id="label-demo-disabled" class="peer input" placeholder="Disabled" disabled>
+        </div>
+        <div class="grid gap-3">
+          <label for="label-demo-textarea" class="label">Message</label>
+          <textarea id="label-demo-textarea" class="textarea" placeholder="Message"></textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,31 @@
+<section id="pagination" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Pagination</h2>
+  </header>
+  <div class="p-4">
+    <div class="inline-flex">
+      <nav role="navigation" aria-label="pagination" class="mx-auto flex w-full justify-center">
+        <ul class="flex flex-row items-center gap-1">
+          <li>
+            <a href="#" class="btn-ghost">{% lucide "chevron-left" %} Previous</a>
+          </li>
+          <li>
+            <a href="#" class="btn-ghost size-9">1</a>
+          </li>
+          <li>
+            <a href="#" class="btn-outline size-9">2</a>
+          </li>
+          <li>
+            <a href="#" class="btn-ghost size-9">3</a>
+          </li>
+          <li>
+            <a href="#" class="btn-icon-ghost">{% lucide "ellipsis" %}</a>
+          </li>
+          <li>
+            <a href="#" class="btn-ghost">Next {% lucide "chevron-right" %}</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,40 @@
+{% from "components/popover.njk" import popover %}
+
+<section id="popover" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Popover</h2>
+  </header>
+  <div class="p-4">
+    {% call popover(
+      id="demo-popover",
+      trigger="Open popover",
+      trigger_attrs={"class": "btn-outline"},
+      content_attrs={"class": "w-80 p-4"}
+    ) %}
+      <div class="grid gap-4">
+        <header class="grid gap-1.5">
+          <h4 class="leading-none font-medium">Dimensions</h4>
+          <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
+        </header>
+        <form class="form grid gap-2">
+          <div class="grid grid-cols-3 items-center gap-4">
+            <label for="demo-popover-width">Width</label>
+            <input type="text" id="demo-popover-width" value="100%" class="col-span-2 h-8"/>
+          </div>
+          <div class="grid grid-cols-3 items-center gap-4">
+            <label for="demo-popover-max-width">Max. width</label>
+            <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
+          </div>
+          <div class="grid grid-cols-3 items-center gap-4">
+            <label for="demo-popover-height">Height</label>
+            <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
+          </div>
+          <div class="grid grid-cols-3 items-center gap-4">
+            <label for="demo-popover-max-height">Max. height</label>
+            <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
+          </div>
+        </form>
+      </div>
+    {% endcall %}
+  </div>
+</section>
@@ -0,0 +1,30 @@
+<section id="radio-group" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Radio Group</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-y-6">
+      <fieldset class="grid gap-3">
+        <label class="label"><input type="radio" name="demo-radio-group" value="default" class="input">Default</label>
+        <label class="label"><input type="radio" name="demo-radio-group" value="comfortable" class="input">Comfortable</label>
+        <label class="label"><input type="radio" name="demo-radio-group" value="compact" class="input">Compact</label>
+      </fieldset>
+      <fieldset class="grid gap-3 max-w-sm">
+        <label class="label gap-3 items-start hover:bg-accent/50 rounded-lg border p-4 has-[input[type='radio']:checked]:border-green-600 has-[input[type='radio']:checked]:bg-green-50 dark:has-[input[type='radio']:checked]:border-green-900 dark:has-[input[type='radio']:checked]:bg-green-950">
+          <input type="radio" name="demo-radio-group-styled" value="no" class="input checked:bg-green-600 checked:border-green-600 dark:checked:bg-input/30 checked:before:bg-background dark:checked:before:bg-primary">
+          <div class="grid gap-1 font-normal">
+            <h2 class="font-medium">Starter Plan</h2>
+            <p class="text-muted-foreground leading-snug">Perfect for small businesses getting started with our platform</p>
+          </div>
+        </label>
+        <label class="label gap-3 items-start hover:bg-accent/50 rounded-lg border p-4 has-[input[type='radio']:checked]:border-green-600 has-[input[type='radio']:checked]:bg-green-50 dark:has-[input[type='radio']:checked]:border-green-900 dark:has-[input[type='radio']:checked]:bg-green-950">
+          <input type="radio" name="demo-radio-group-styled" value="no" class="input checked:bg-green-600 checked:border-green-600 dark:checked:bg-input/30 checked:before:bg-background dark:checked:before:bg-primary">
+          <div class="grid gap-1 font-normal">
+            <h2 class="font-medium">Pro Plan</h2>
+            <p class="text-muted-foreground leading-snug">Advanced features for growing businesses with higher demands</p>
+          </div>
+        </label>
+      </fieldset>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,73 @@
+{% from "components/select.njk" import select %}
+
+<section id="select" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Select</h2>
+  </header>
+  <div class="p-4 gap">
+
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <select class="select w-[180px]">
+          <optgroup label="Fruits">
+            <option>Apple</option>
+            <option>Banana</option>
+            <option>Blueberry</option>
+          </optgroup>
+          <optgroup label="Grapes">
+            <option>Pineapple</option>
+          </optgroup>
+        </select>
+        <select class="select w-[180px]" disabled>
+          <option>Disabled</option>
+        </select>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-4">
+        <div class="flex flex-wrap items-center gap-2 md:flex-row">
+          {% call select(trigger_attrs={"class": "w-[180px]"}) %}
+          <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>
+          <div role="group" aria-labelledby="vegetable-options-label">
+            <span id="vegetable-options-label" role="heading">Grapes</span>
+            <div role="option" data-value="pineapple">Pineapple</div>
+          </div>
+          {% endcall %}
+
+          {% call select(
+            trigger_attrs={"class": "w-[180px]"},
+            listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"}
+          ) %}
+          {% for i in range(0, 99) %}
+          <div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
+          {% endfor %}
+          {% endcall %}
+
+          {% call select(trigger_attrs={"disabled": "disabled", "class": "w-[180px]"}) %}
+          <div role="option" data-value="disabled">Disabled</div>
+          {% endcall %}
+
+
+          {% call select(name="just-testing", trigger_attrs={'class': 'w-[180px]'}) %}
+          <div type="button" role="option" data-value="bar">
+            {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
+            Bar
+          </div>
+          <div type="button" role="option" data-value="line">
+            {% lucide "chart-line", {"class": "text-muted-foreground"} %}
+            Line
+          </div>
+          <div type="button" role="option" data-value="pie">
+            {% lucide "chart-pie", {"class": "text-muted-foreground"} %}
+            Pie
+          </div>
+          {% endcall %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,37 @@
+<section id="skeleton" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Skeleton</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-4">
+        <div class="bg-accent animate-pulse size-10 shrink-0 rounded-full"></div>
+        <div class="grid gap-2">
+          <div class="bg-accent animate-pulse rounded-md h-4 w-[150px]"></div>
+          <div class="bg-accent animate-pulse rounded-md h-4 w-[100px]"></div>
+        </div>
+      </div>
+      
+      <div class="flex gap-4 w-full">
+        <div class="card w-full @md:w-auto @md:min-w-sm">
+          <header>
+            <div class="bg-accent animate-pulse rounded-md h-4 w-2/3"></div>
+            <div class="bg-accent animate-pulse rounded-md h-4 w-1/2"></div>
+          </header>
+          <section>
+            <div class="bg-accent animate-pulse rounded-md aspect-square w-full"></div>
+          </section>
+        </div>
+
+        <div class="card w-full @md:w-auto @md:min-w-sm">
+          <header>
+            <div class="bg-accent animate-pulse rounded-md h-4 w-2/3"></div>
+            <div class="bg-accent animate-pulse rounded-md h-4 w-1/2"></div>
+          </header>
+          <section>
+            <div class="bg-accent animate-pulse rounded-md aspect-square w-full"></div>
+          </section>
+        </div>
+      </div>
+  </div>
+</section>
@@ -0,0 +1,27 @@
+<section id="slider" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Slider</h2>
+  </header>
+  <div class="p-4">
+    <div class="max-w-sm">
+      <input
+        type="range"
+        class="input w-full"
+        min="0"
+        max="27"
+        value="12"
+      x-data="{
+        updatePercent(el) {
+          const min = parseFloat(el.min || 0);
+          const max = parseFloat(el.max || 100);
+          const value = parseFloat(el.value);
+          const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
+          el.style.setProperty('--slider-value', `${percent}%`);
+        }
+      }"
+        x-init="updatePercent($el)"
+        @input="updatePercent($el)"
+      >
+    </div>
+  </div>
+</section>
@@ -0,0 +1,24 @@
+<section id="switch" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Switch</h2>
+  </header>
+  <div class="p-4">
+    <div class="inline-flex flex-col gap-y-6">
+      <label class="label">
+        <input type="checkbox" name="switch" role="switch" class="input">
+        Airplane Mode
+      </label>
+      <label class="label">
+        <input type="checkbox" name="switch" role="switch" class="input checked:bg-blue-500 dark:checked:bg-blue-600" checked>
+        Bluetooth
+      </label>
+      <label class="label gap-6 leading-none border rounded-lg p-4 has-[input[type='checkbox']:checked]:border-blue-600">
+        <div class="grid gap-1">
+          <h2 class="font-medium text-sm">Share across devices</h2>
+          <p class="text-muted-foreground text-sm">Focus is shared across devices, and turns off when you leave the app.</p>
+        </div>
+        <input type="checkbox" name="switch" role="switch" class="input checked:bg-blue-500 dark:checked:bg-blue-600">
+      </label>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,71 @@
+<section id="table" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Table</h2>
+  </header>
+  <div class="p-4">
+
+    <div class="relative w-full overflow-x-auto">
+      <table class="table">
+        <caption>A list of your recent invoices.</caption>
+        <thead>
+          <tr>
+            <th>Invoice</th>
+            <th>Status</th>
+            <th>Method</th>
+            <th>Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="font-medium">INV001</td>
+            <td>Paid</td>
+            <td>Credit Card</td>
+            <td class="text-right">$250.00</td>
+          </tr>
+          <tr>
+            <td class="font-medium">INV002</td>
+            <td>Pending</td>
+            <td>PayPal</td>
+            <td class="text-right">$150.00</td>
+          </tr>
+          <tr>
+            <td class="font-medium">INV003</td>
+            <td>Unpaid</td>
+            <td>Bank Transfer</td>
+            <td class="text-right">$350.00</td>
+          </tr>
+          <tr>
+            <td class="font-medium">INV004</td>
+            <td>Paid</td>
+            <td>Paypal</td>
+            <td class="text-right">$450.00</td>
+          </tr>
+          <tr>
+            <td class="font-medium">INV005</td>
+            <td>Paid</td>
+            <td>Credit Card</td>
+            <td class="text-right">$550.00</td>
+          </tr>
+          <tr>
+            <td class="font-medium">INV006</td>
+            <td>Pending</td>
+            <td>Bank Transfer</td>
+            <td class="text-right">$200.00</td>
+          </tr>
+          <tr>
+            <td class="font-medium">INV007</td>
+            <td>Unpaid</td>
+            <td>Credit Card</td>
+            <td class="text-right">$300.00</td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="3">Total</td>
+            <td class="text-right">$2,500.00</td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,102 @@
+{% from "components/tabs.njk" import tabs %}
+
+<section id="tabs" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Tabs</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-6">
+      {% set account_panel %}
+        <div class="card">
+          <header>
+            <h2>Account</h2>
+            <p>Make changes to your account here. Click save when you're done.</p>
+          </header>
+          <section>
+            <form class="form grid gap-6">
+              <div class="grid gap-3">
+                <label for="demo-tabs-account-name">Name</label>
+                <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
+              </div>
+              <div class="grid gap-3">
+                <label for="demo-tabs-account-username">Username</label>
+                <input type="text" id="demo-tabs-account-username" value="@peduarte" />
+              </div>
+            </form>
+          </section>
+          <footer>
+            <button type="button" class="btn">Save changes</button>
+          </footer>
+        </div>
+      {% endset %}
+      {% set password_panel %}
+        <div class="card">
+          <header>
+            <h2>Password</h2>
+            <p>Change your password here. After saving, you'll be logged out.</p>
+          </header>
+          <section>
+            <form class="form grid gap-6">
+              <div class="grid gap-3">
+                <label for="demo-tabs-password-current">Current password</label>
+                <input type="password" id="demo-tabs-password-current" />
+              </div>
+              <div class="grid gap-3">
+                <label for="demo-tabs-password-new">New password</label>
+                <input type="password" id="demo-tabs-password-new"/>
+              </div>
+            </form>
+          </section>
+          <footer>
+            <button type="button" class="btn">Save Password</button>
+          </footer>
+        </div>
+      {% endset %}
+      {% set tabsets = [
+        { tab: "Account", panel: account_panel },
+        { tab: "Password", panel: password_panel }
+      ] %}
+      {{ tabs(
+        id='demo-tabs-with-panels',
+        tabsets=tabsets,
+        main_attrs={ "class": "max-w-[300px]" },
+        tablist_attrs={ "class": "w-full" }
+      ) }}
+
+      {% set tabsets = [
+        { tab: "Home" },
+        { tab: "Settings" }
+      ] %}
+      {{ tabs(
+        id='demo-tabs-without-panels',
+        tabsets=tabsets
+      ) }}
+
+      {% set tabsets = [
+        { tab: "Home" },
+        { tab: "Disabled", tab_attrs: { "disabled": "disabled" } }
+      ] %}
+      {{ tabs(
+        id='demo-tabs-disabled',
+        tabsets=tabsets
+      ) }}
+      
+      {% set label_preview %}
+        {% lucide 'app-window' %}
+        Preview
+      {% endset %}
+      {% set label_code %}
+        {% lucide 'code' %}
+        Code
+      {% endset %}
+      {% set tabsets = [
+        { tab: label_preview },
+        { tab: label_code }
+      ] %}
+      {{ tabs(
+        id='demo-tabs-with-icons',
+        tabsets=tabsets
+      ) }}
+    </div>
+  </div>
+</section>
@@ -0,0 +1,24 @@
+<section id="textarea" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Textarea</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-y-10">
+      <textarea class="textarea" placeholder="Type your message here"></textarea>
+      <textarea class="textarea" placeholder="Type your message here" aria-invalid="true"></textarea>
+      <div class="grid gap-3">
+        <label for="textarea-demo-label" class="label">Label</label>
+        <textarea id="textarea-demo-label" class="textarea" placeholder="Type your message here"></textarea>
+      </div>
+      <div class="grid gap-3">
+        <label for="textarea-demo-label-and-description" class="label">With label and description</label>
+        <textarea id="textarea-demo-label-and-description" class="textarea" placeholder="Type your message here"></textarea>
+        <p class="text-muted-foreground text-sm">Type your message and press enter to send.</p>
+      </div>
+      <div class="grid gap-3">
+        <label for="textarea-demo-disabled" class="label">Disabled</label>
+        <textarea id="textarea-demo-disabled" class="textarea" placeholder="Type your message here" disabled></textarea>
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,23 @@
+<section id="toast" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Toast</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-wrap items-center gap-2">
+    <div class="flex flex-wrap items-center gap-2">
+      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/success" hx-target="#toast-htmx">
+        Success
+      </button>
+      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/error" hx-target="#toast-htmx">
+        Error
+      </button>
+      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/info" hx-target="#toast-htmx">
+        Info
+      </button>
+      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/warning" hx-target="#toast-htmx">
+        Warning
+      </button>
+      <div id="toast-htmx"></div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,21 @@
+<section id="tooltip" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Tooltip</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-wrap items-center gap-4">
+      <button type="button" class="btn-outline" data-tooltip="Top tooltip">
+        Top
+      </button>
+      <button type="button" class="btn-outline" data-tooltip="Right tooltip" data-side="right">
+        Right
+      </button>
+      <button type="button" class="btn-outline" data-tooltip="Bottom tooltip" data-side="bottom">
+        Bottom
+      </button>
+      <button type="button" class="btn-outline" data-tooltip="Left tooltip" data-side="left">
+        Left
+      </button>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,157 @@
+{% set components = [
+  { "id": "accordion", "name": "Accordion" },
+  { "id": "alert", "name": "Alert" },
+  { "id": "alert-dialog", "name": "Alert Dialog" },
+  { "id": "avatar", "name": "Avatar" },
+  { "id": "badge", "name": "Badge" },
+  { "id": "breadcrumb", "name": "Breadcrumb" },
+  { "id": "button", "name": "Button" },
+  { "id": "card", "name": "Card" },
+  { "id": "checkbox", "name": "Checkbox" },
+  { "id": "combobox", "name": "Combobox" },
+  { "id": "dialog", "name": "Dialog" },
+  { "id": "dropdown-menu", "name": "Dropdown Menu" },
+  { "id": "form", "name": "Form" },
+  { "id": "input", "name": "Input" },
+  { "id": "label", "name": "Label" },
+  { "id": "pagination", "name": "Pagination" },
+  { "id": "popover", "name": "Popover" },
+  { "id": "radio-group", "name": "Radio Group" },
+  { "id": "select", "name": "Select" },
+  { "id": "skeleton", "name": "Skeleton" },
+  { "id": "slider", "name": "Slider" },
+  { "id": "switch", "name": "Switch" },
+  { "id": "table", "name": "Table" },
+  { "id": "tabs", "name": "Tabs" },
+  { "id": "textarea", "name": "Textarea" },
+  { "id": "toast", "name": "Toast" },
+  { "id": "tooltip", "name": "Tooltip" }
+] %}
+
+<header class="flex flex-col gap-2 p-2">
+  <a href="/" class="btn-ghost p-2 h-12 w-full justify-start">
+    <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-4 w-4"><rect width="256" height="256" fill="none"></rect><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line></svg>
+    </div>
+    <div class="grid flex-1 text-left text-sm leading-tight">
+      <span class="truncate font-medium">Basecoat</span>
+      <span class="truncate text-xs">v0.1.0</span>
+    </div>
+  </a>
+  <div class="flex flex-col gap-2 px-2 text-sm">
+    <form class="form relative">
+      <label for="search" class="sr-only">Search</label>
+      <input type="text" placeholder="Search the docs..." class="h-8 w-full shadow-none pl-8">
+      {% lucide "search", { "class": "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" } %}
+    </form>
+  </div>
+</header>
+<section class="flex flex-1 flex-col gap-2 overflow-y-auto scrollbar">
+  <nav aria-label="Pages navigation" class="flex flex-col p-2">
+    <h2 class="text-sidebar-foreground/70 flex h-8 items-center px-2 text-xs font-medium">Getting Started</h2>
+    <ul class="flex flex-col gap-1">
+      <li>
+        <a
+          href="/"
+          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
+        >
+          {% lucide "book-open" %}
+          Introduction
+        </a>
+      </li>
+      <li>
+        <a
+          href="/installation"
+          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
+        >
+          {% lucide "terminal" %}
+          Installation
+        </a>
+      </li>
+      <li>
+        <a
+          href="/kitchen-sink"
+          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
+        >
+          {% lucide "layout-dashboard" %}
+          Kitchen sink
+        </a>
+      </li>
+      <li>
+        <a
+          href="/theming"
+          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
+        >
+          {% lucide "palette" %}
+          Theming
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/hunvreus/basecoat"
+          target="_blank"
+          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
+        >
+          {% lucide "github" %}
+          GitHub
+          {% lucide "arrow-up-right", { "class": "text-muted-foreground size-3.5 ml-auto" } %}
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <nav aria-label="Components navigation" class="flex flex-col p-2">
+    <h2 class="text-sidebar-foreground/70 flex h-8 items-center px-2 text-xs font-medium">Components</h2>
+    <ul class="flex flex-col gap-1">
+      {% for component in components %}
+        <li>
+          <a
+            href="/components/{{ component.id }}"
+            class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
+            hx-boost="true"
+            hx-select="#content"
+            hx-target="#content"
+            hx-swap="outerHTML"
+          >
+            {{ component.name }}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+</section>
+<footer class="flex flex-col gap-2 p-2">
+  {% set profile_menu %}
+    <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+      <img src="https://avatar.vercel.sh/ronan_berder" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
+      <div class="grid flex-1 text-left text-sm leading-tight">
+        <span class="truncate font-medium">hunvreus</span>
+        <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
+      </div>
+    </div>
+    <hr role="separator">
+    <nav role="menu">
+      <button type="button" role="menuitem">
+        {% lucide "star" %}
+        Upgrade to Pro
+      </button>
+      <hr role="separator">
+      <button type="button" role="menuitem">
+        {% lucide "user" %}
+        Account
+      </button>
+      <button type="button" role="menuitem">
+        {% lucide "credit-card" %}
+        Billing
+      </button>
+      <button type="button" role="menuitem">
+        {% lucide "bell" %}
+        Notifications
+      </button>
+      <hr role="separator">
+      <button type="button" role="menuitem">
+        {% lucide "log-out" %}
+        Signout
+      </button>
+    </nav>
+  {% endset %}
+</footer>
@@ -0,0 +1,71 @@
+---
+layout: layouts/component.njk
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated accordion component in Basecoat.</h2>
+</div>
+
+{% set code %}<section
+  x-init
+  @click="
+    const clickedSummary = $event.target.closest('summary');
+    if (!clickedSummary) return;
+    const clickedDetails = clickedSummary.closest('details');
+    if (!clickedDetails) return;
+    $el.querySelectorAll('details').forEach(detailsEl => {
+      if (detailsEl !== clickedDetails) {
+        detailsEl.removeAttribute('open');
+      }
+    });
+  "
+>
+  <details class="group border-b last:border-b-0 ">
+    <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+      <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+        Is it accessible?
+        {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+      </h2>
+    </summary>
+    <section class="pb-4">
+      <p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
+    </section>
+  </details>
+  <details class="group border-b last:border-b-0">
+    <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+      <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+        Is it styled?
+        {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+      </h2>
+    </summary>
+    <section class="pb-4">
+      <p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
+    </section>
+  </details>
+  <details class="group border-b last:border-b-0">
+    <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+      <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+        Is it animated?
+        {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+      </h2>
+    </summary>
+    <section>
+      <p class="text-sm whitespace-pre-wrap">Yes. It's animated by default, but you can disable it if you prefer.</p>
+    </section>
+  </details>
+</section>
+{% endset %}
+{{ code_preview("accordion", code | prettyHtml, "w-full max-w-md") }}
+
+<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>
@@ -0,0 +1,83 @@
+---
+layout: layouts/component.njk
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + Javascript
+        id: usage-default
+      - label: Jinja or Nunjucks
+        id: usage-jinja
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "components/dialog.njk" import dialog %}
+
+{% set code_html %}
+{% set footer %}
+  <button class="btn-outline" @click="open = false">Cancel</button>
+  <button class="btn-primary" @click="open = false">Continue</button>
+{% endset %}
+{{ dialog(
+  id="alert-dialog",
+  title="Are you absolutely sure?",
+  description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+  trigger="Open alert dialog",
+  trigger_attrs={"class": "btn-outline"},
+  footer=footer,
+  close_button=false,
+  close_on_overlay_click=false,
+  register_on=["alpine:init", "htmx:afterSwap"]
+) }}
+{% endset %}
+
+{% set code_script %}
+{% include "components/dialog-script.njk" %}
+{% endset %}
+
+{{ code_preview("alert-dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+
+<div class="alert my-6">
+  {% lucide "circle-alert" %}
+  <h2>This component requires Javascript.</h2>
+  <section>
+    <p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  </section>
+</div>
+
+<p class="prose my-6">The Alert Dialog component uses the same Alpine.js code as the <a href="/components/dialog" class="font-medium underline underline-offset-4">Dialog</a> component with one small difference: we set <code>initialCloseOnOverlayClick</code> to <code>false</code> to prevent the dialog from closing when the overlay is clicked.</p>
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+  { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="alert-dialog", tabsets=tabsets) }}
+
+<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
+
+<p class="my-6 prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly, making sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks). <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+
+{% set raw_code %}{% raw %}{% set footer %}
+  <button class="btn-outline" @click="open = false">Cancel</button>
+  <button class="btn-primary" @click="open = false">Continue</button>
+{% endset %}
+{{ dialog(
+  id="demo-alert-dialog",
+  title="Are you absolutely sure?",
+  description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+  trigger="Open Alert Dialog",
+  trigger_attrs={"class": "btn-outline"},
+  footer=footer,
+  close_button=False,
+  close_on_overlay_click=False
+) }}{% endraw %}
+{% endset%}
+{{ code_block(raw_code, "jinja") }}
@@ -0,0 +1,68 @@
+---
+layout: layouts/component.njk
+title: Alert
+description: Displays a callout for user attention.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Destructive
+        id: example-destructive
+      - label: No description
+        id: example-no-description
+      - label: No icon
+        id: example-no-icon
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<div class="alert">
+  {% lucide "circle-check" %}
+  <h2>Success! Your changes have been saved</h2>
+  <section>This is an alert with icon, title and description.</section>
+</div>{% endset %}
+{{ code_preview("alert", code) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>You can use one of the two classes: <code>alert</code> or <code>alert-dialog</code> with any of the following children:</p>
+  <ul>
+    <li>A svg icon,</li>
+    <li>A <code>&lt;h2&gt;</code> for the title.</li>
+    <li>A <code>&lt;section&gt;</code> for the description. This can include paragraphs, lists, etc.</li>
+  </ul>
+</section>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>
+
+{% set code %}<div class="alert-destructive">
+  {% lucide "circle-alert" %}
+  <h2>Something went wrong!</h2>
+  <section>Your session has expired. Please log in again.</section>
+</div>{% endset %}
+{{ code_preview("alert-destructive", code) }}
+
+<h3 id="example-no-description"><a href="#example-no-description">No description</a></h3>
+
+{% set code %}
+<div class="alert">
+  {% lucide "shield-alert" %}
+  <h2>This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines</h2>
+</div>{% endset %}
+{{ code_preview("alert-no-description", code) }}
+
+<h3 id="example-no-icon"><a href="#example-no-icon">No icon</a></h3>
+
+{% set code %}<div class="alert">
+  <h2>Success! Your changes have been saved</h2>
+  <section>This is an alert with icon, title and description.</section>
+</div>{% endset %}
+{{ code_preview("alert-no-icon", code) }}
@@ -0,0 +1,23 @@
+---
+layout: layouts/component.njk
+title: Avatar
+description: An image element with a fallback for representing the user.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated accordion component in Basecoat.</h2>
+</div>
+
+{% set code %}<img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">{% endset %}
+{{ code_preview("avatar", code, "max-w-md") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<p class="my-6 prose">Avatars are fairly simple to implement with Tailwind. The example above shows how to implement one with Tailwind and an <code>&lt;img&gt;</code> element. More examples can be found in the <a href="/kitchen-sink#avatar">kitchen sink</a>.</p>
@@ -0,0 +1,75 @@
+---
+layout: layouts/component.njk
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Primary
+        id: example-primary
+      - label: Secondary
+        id: example-secondary
+      - label: Destructive
+        id: example-destructive
+      - label: Outline
+        id: example-outline
+      - label: With icon
+        id: example-with-icon
+      - label: Link
+        id: example-link
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<span class="badge">Badge</span>{% endset %}
+{{ code_preview("badge", code) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose my-6">
+  <p>Use one of the badge classes: <code>badge</code>, <code>badge-primary</code>, <code>badge-secondary</code>, <code>badge-destructive</code> or <code>badge-outline</code>.
+</section>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-primary"><a href="#example-primary">Primary</a></h3>
+
+{% set code %}<span class="badge">Primary</span>{% endset %}
+{{ code_preview("badge-primary", code) }}
+
+<h3 id="example-secondary"><a href="#example-secondary">Secondary</a></h3>
+
+{% set code %}<span class="badge-secondary">Secondary</span>{% endset %}
+{{ code_preview("badge-secondary", code) }}
+
+<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>
+
+{% set code %}<span class="badge-destructive">Destructive</span>{% endset %}
+{{ code_preview("badge-destructive", code) }}
+
+<h3 id="example-outline"><a href="#example-outline">Outline</a></h3>
+
+{% set code %}<span class="badge-outline">Outline</span>{% endset %}
+{{ code_preview("badge-outline", code) }}
+
+<h3 id="example-with-icon"><a href="#example-with-icon">With icon</a></h3>
+
+{% set code %}<span class="badge-destructive">
+  {% lucide "circle-alert" %}
+  With icon
+</span>{% endset %}
+{{ code_preview("badge-with-icon", code) }}
+
+<h3 id="example-link"><a href="#example-link">Link</a></h3>
+
+{% set code %}<a href="#" class="badge-outline">
+  Link
+  {% lucide "arrow-right" %}
+</a>{% endset %}
+{{ code_preview("badge-link", code) }}
@@ -0,0 +1,70 @@
+---
+layout: layouts/component.njk
+title: Breadcrumb
+description: Displays the path to the current resource using a hierarchy of links.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "components/dropdown-menu.njk" import dropdown_menu %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated breadcrumb component in Basecoat.</h2>
+</div>
+
+{% set code_script %}
+{% include "components/dropdown-menu-script.njk" %}
+{% endset %}
+
+{% set code_html %}
+<ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
+  <li class="inline-flex items-center gap-1.5">
+    <a href="#" class="hover:text-foreground transition-colors">Home</a>
+  </li>
+  <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+  <li class="inline-flex items-center gap-1.5">
+    {% set trigger %}
+      {% lucide "ellipsis" %}
+    {% endset %}
+    {% call dropdown_menu(
+      id="demo-breadcrumb-menu",
+      trigger=trigger,
+      trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"},
+      register_on=["alpine:init", "htmx:afterSwap"]
+    ) %}
+      <nav role="menu">
+        <button type="button" role="menuitem">Documentation</button>
+        <button type="button" role="menuitem">Themes</button>
+        <button type="button" role="menuitem">GitHub</button>
+      </nav>
+    {% endcall %}
+  </li>
+  <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+  <li class="inline-flex items-center gap-1.5">
+    <a href="#" class="hover:text-foreground transition-colors">Components</a>
+  </li>
+  <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+  <li class="inline-flex items-center gap-1.5">
+    <span class="text-foreground font-normal">Breadcrumb</span>
+  </li>
+</ol>
+{% endset %}
+
+{{ code_preview("dropdown-menu", code_script | prettyHtml ~ code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose my-6">
+  <p>The example above uses some simple Tailwind CSS along with the <a href="/components/dropdown-menu">Dropdown Menu</a>.</p>
+</section>
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+  { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="alert-dialog", tabsets=tabsets) }}
@@ -0,0 +1,143 @@
+---
+layout: layouts/component.njk
+title: Button
+description: Displays a button or a component that looks like a button.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Primary
+        id: example-primary
+      - label: Secondary
+        id: example-secondary
+      - label: Destructive
+        id: example-destructive
+      - label: Outline
+        id: example-outline
+      - label: Ghost
+        id: example-ghost
+      - label: Link
+        id: example-link
+      - label: Icon
+        id: example-icon
+      - label: With Icon
+        id: example-with-icon
+      - label: Loading
+        id: example-loading
+      - label: Large
+        id: example-large
+      - label: Small
+        id: example-small
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<button class="btn">Button</button>{% endset %}
+{{ code_preview("button", code) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>You can use one of the <code>btn</code> classes to style any element as a button:</p>
+
+  <ul>
+    <li>
+      <b>Variants</b>:
+      <ul>
+        <li><code>btn</code> or <code>btn-primary</code> for primary
+      buttons,</li>
+        <li><code>btn-secondary</code> for secondary buttons.</li>
+        <li><code>btn-destructive</code> for destructive buttons.</li>
+        <li><code>btn-outline</code> for outline buttons.</li>
+        <li><code>btn-ghost</code> for ghost buttons.</li>
+        <li><code>btn-link</code> for link buttons.</li>
+        <li><code>btn-icon</code> for icon buttons. This can be combined with other variants, for example <code>btn-icon-destructive</code>.</li>
+      </ul>
+    </li>
+    <li>
+      <b>Sizes</b>:
+      <ul>
+        <li><code>btn-sm</code> for small buttons.</li>
+        <li><code>btn-lg</code> for large buttons.</li>
+        <li>You can combine sizes with any variant, for example <code>btn-lg-destructive</code> or <code>btn-sm-icon-outline</code>.</li>
+      </ul>
+    </li>
+  </ul>
+</section>
+
+<section class="my-6">
+  {{ code_block(code) }}
+</section>
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-primary"><a href="#example-primary">Primary</a></h3>
+
+{% set code %}<button class="btn">Primary</button>{% endset %}
+{{ code_preview("button-primary", code) }}
+
+<h3 id="example-secondary"><a href="#example-secondary">Secondary</a></h3>
+
+{% set code %}<button class="btn-secondary">Button</button>{% endset %}
+{{ code_preview("button-secondary", code) }}
+
+<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>
+
+{% set code %}<button class="btn-destructive">Destructive</button>{% endset %}
+{{ code_preview("button-destructive", code) }}
+
+<h3 id="example-outline"><a href="#example-outline">Outline</a></h3>
+
+{% set code %}<button class="btn-outline">Outline</button>{% endset %}
+{{ code_preview("button-outline", code) }}
+
+<h3 id="example-ghost"><a href="#example-ghost">Ghost</a></h3>
+
+{% set code %}<button class="btn-ghost">Ghost</button>{% endset %}
+{{ code_preview("button-ghost", code) }}
+
+<h3 id="example-link"><a href="#example-link">Link</a></h3>
+
+{% set code %}<button class="btn-link">Link</button>{% endset %}
+{{ code_preview("button-link", code) }}
+
+<h3 id="example-icon"><a href="#example-icon">Icon</a></h3>
+
+{% set code %}<button class="btn-icon-outline">
+  {% lucide "chevron-right" %}
+</button>{% endset %}
+{{ code_preview("button-icon", code) }}
+
+<h3 id="example-with-icon"><a href="#example-with-icon">With Icon</a></h3>
+
+{% set code %}<button class="btn">
+  {% lucide "send" %}
+  Send email
+</button>{% endset %}
+{{ code_preview("button-with-icon", code) }}
+
+<h3 id="example-loading"><a href="#example-loading">Loading</a></h3>
+
+{% set code %}<button class="btn-outline" disabled>
+  {% lucide "loader", { "class": "animate-spin" } %}
+  Loading
+</button>{% endset %}
+{{ code_preview("button-loading", code) }}
+
+<h3 id="example-large"><a href="#example-large">Large</a></h3>
+
+{% set code %}<button class="btn-lg">
+  {% lucide "shopping-cart" %}
+  Buy
+</button>{% endset %}
+{{ code_preview("button-large", code) }}
+
+<h3 id="example-small"><a href="#example-small">Small</a></h3>
+
+{% set code %}<button class="btn-sm-icon-destructive">
+  {% lucide "trash" %}
+</button>{% endset %}
+{{ code_preview("button-small", code) }}
@@ -0,0 +1,141 @@
+---
+layout: layouts/component.njk
+title: Card
+description: Displays a card with header, content, and footer.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: With content and footer
+        id: example-with-content-and-footer
+      - label: With image
+        id: example-with-image
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<div class="card w-full">
+  <header>
+    <h2>Login to your account</h2>
+    <p>Enter your details below to login to your account</p>
+  </header>
+  <section>
+    <form class="form grid gap-6">
+      <div class="grid gap-2">
+        <label for="demo-card-form-email">Email</label>
+        <input type="email" id="demo-card-form-email">
+      </div>
+      <div class="grid gap-2">
+        <div class="flex items-center gap-2">
+          <label for="demo-card-form-password">Password</label>
+          <a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">Forgot your password?</a>
+        </div>
+        <input type="password" id="demo-card-form-password">
+      </div>
+    </form>
+  </section>
+  <footer class="flex flex-col items-center gap-2">
+    <button type="button" class="btn w-full">Login</button>
+    <button type="button" class="btn-outline w-full">Login with Google</button>
+    <p class="mt-4 text-center text-sm">Don't have an account? <a href="#" class="underline-offset-4 hover:underline">Sign up</a></p>
+  </footer>
+</div>{% endset %}
+{{ code_preview("card", code, "w-full max-w-sm") }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>Add the <code>card</code> class to any element and then define any of the children elements:</p>
+  <ul>
+    <li>A <code>&lt;header&gt;</code> for the card header, which can contain a <code>&lt;h2&gt;</code> for the title and a <code>&lt;p&gt;</code> for the description.</li>
+    <li>A <code>&lt;section&gt;</code> for the card content.</li>
+    <li>A <code>&lt;footer&gt;</code> for the card footer.</li>
+  </ul>
+</section>
+
+{% set code %}<div class="card">
+  <header>
+    <h2>Card Title</h2>
+    <p>Card Description</p>
+  </header>
+  <section>
+    <p>Card Content</p>
+  </section>
+  <footer>
+    <p>Card Footer</p>
+  </footer>
+</div>{% endset %}
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-with-content-and-footer"><a href="#example-with-content-and-footer">With content and footer</a></h3>
+
+{% set code %}<div class="card">
+  <header>
+    <h2>Meeting Notes</h2>
+    <p>Transcript from the meeting with the client.</p>
+  </header>
+  <section class="text-sm">
+    <p>Client requested dashboard redesign with focus on mobile responsiveness.</p>
+    <ol class="mt-4 flex list-decimal flex-col gap-2 pl-6">
+      <li>New analytics widgets for daily/weekly metrics</li>
+      <li>Simplified navigation menu</li>
+      <li>Dark mode support</li>
+      <li>Timeline: 6 weeks</li>
+      <li>Follow-up meeting scheduled for next Tuesday</li>
+    </ol>
+  </section>
+  <footer class="flex items-center">
+    <div class="flex -space-x-2 [&_img]:ring-card [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+      <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+      <img alt="@shadcn" src="https://github.com/shadcn.png">
+      <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+    </div>
+  </footer>
+</div>{% endset %}
+{{ code_preview("card-with-content-and-footer", code) }}
+
+<h3 id="example-with-image"><a href="#example-with-image">With image</a></h3>
+
+{% set code %}<div class="card">
+  <header>
+    <h2>Is this an image?</h2>
+    <p>This is a card with an image.</p>
+  </header>
+  <section class="px-0">
+    <img
+      alt="Photo by Drew Beamer"
+      loading="lazy"
+      width="500"
+      height="500"
+      class="aspect-video object-cover" style="color:transparent"
+      srcset="
+        https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=640&q=75 1x,
+        https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75 2x
+      "
+      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75"
+    />
+  </section>
+  <footer class="flex items-center gap-2">
+    <span class="badge-outline">
+      {% lucide "bed" %}
+      1
+    </span>
+    <span class="badge-outline">
+      {% lucide "bath" %}
+      2
+    </span>
+    <span class="badge-outline">
+      {% lucide "land-plot" %}
+      350m²
+    </span>
+    <span class="ml-auto font-medium tabular-nums">
+      $135,000
+    </span>
+  </footer>
+</div>{% endset %}
+{{ code_preview("card-with-image", code) }}
@@ -0,0 +1,103 @@
+---
+layout: layouts/component.njk
+title: Checkbox
+description: A control that allows the user to toggle between checked and not checked.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Disabled
+        id: example-disabled
+      - label: With text
+        id: example-with-text
+      - label: Form
+        id: example-form
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<label class="label gap-3">
+  <input type="checkbox" class="input">
+  Accept terms and conditions
+</label>{% endset %}
+{{ code_preview("checkbox", code) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>Add the <code>input</code> class to your <code>&lt;input type="radio"&gt;</code> elements or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the input invalid.</p>
+</section>
+
+<section class="my-6">
+  {% set code %}<input type="checkbox" class="input">{% endset %}
+  {{ code_block(code) }}
+</section>
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
+
+{% set code %}<label class="label gap-3">
+  <input type="checkbox" class="input" disabled>
+  Accept terms and conditions
+</label>{% endset %}
+{{ code_preview("checkbox-disabled", code) }}
+
+<h3 id="example-with-text"><a href="#example-with-text">With text</a></h3>
+
+{% set code %}<div class="flex items-start gap-3">
+  <input type="checkbox" id="checkbox-with-text" class="input">
+  <div class="grid gap-2">
+    <label for="checkbox-with-text" class="label">Accept terms and conditions</label>
+    <p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
+  </div>
+</div>{% endset %}
+{{ code_preview("checkbox-with-text", code) }}
+
+<h3 id="example-form"><a href="#example-form">Form</a></h3>
+
+{% set code %}<form class="form flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
+  <input type="checkbox" id="checkbox-form-1">
+  <div class="flex flex-col gap-1">
+    <label for="checkbox-form-1" class="leading-snug">Use different settings for my mobile devices</label>
+    <p class="text-muted-foreground text-sm leading-snug">You can manage your mobile notifications in the mobile settings page.</p>
+  </div>
+</form>{% endset %}
+{{ code_preview("input-form", code) }}
+
+{% set code %}<form class="form flex flex-col gap-4">
+  <header>
+    <label for="demo-form-checkboxes" class="text-base leading-normal">Sidebar</label>
+    <p class="text-muted-foreground text-sm">Select the items you want to display in the sidebar.</p>
+  </header>
+  <fieldset id="demo-form-checkboxes" class="flex flex-col gap-2">
+    <label class="font-normal leading-tight">
+      <input type="checkbox" name="demo-form-checkboxes" value="1" checked>
+      Recents
+    </label>
+    <label class="font-normal leading-tight">
+      <input type="checkbox" name="demo-form-checkboxes" value="2" checked>
+      Home
+    </label>
+    <label class="font-normal leading-tight">
+      <input type="checkbox" name="demo-form-checkboxes" value="3">
+      Applications
+    </label>
+    <label class="font-normal leading-tight">
+      <input type="checkbox" name="demo-form-checkboxes" value="4">
+      Desktop
+    </label>
+    <label class="font-normal leading-tight">
+      <input type="checkbox" name="demo-form-checkboxes" value="5">
+      Download
+    </label>
+    <label class="font-normal leading-tight">
+      <input type="checkbox" name="demo-form-checkboxes" value="6">
+      Documents
+    </label>
+  </fieldset>
+</form>{% endset %}
+{{ code_preview("input-form", code) }}
@@ -0,0 +1,179 @@
+---
+layout: layouts/component.njk
+title: Combobox
+description: Autocomplete input and command palette with a list of suggestions.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + Javascript
+        id: usage-default
+      - label: Jinja or Nunjucks
+        id: usage-jinja
+  - label: Examples
+    id: examples
+    children:
+      - label: Scrollable
+        id: example-scrollable
+      - label: Top side
+        id: example-top
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "components/select.njk" import select %}
+
+{% set options_frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] %}
+{% set code_html %}
+{% call select(
+  trigger_attrs={"class": "w-[200px]"},
+  listbox_attrs={"data-empty": "No framework found."},
+  is_combobox=true,
+  search_placeholder="Search framework...",
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+  {% for framework in options_frameworks %}
+    <div role="option" data-value="{{ framework }}">{{ framework }}</div>
+  {% endfor %}
+{% endcall %}
+{% endset %}
+
+{% set code_script %}
+{% include "components/select-script.njk" %}
+{% endset %}
+
+{{ code_preview("combobox", code_script | prettyHtml ~ code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+
+<div class="alert my-6">
+  {% lucide "circle-alert" %}
+  <h2>This component requires Javascript.</h2>
+  <section>
+    <p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  </section>
+</div>
+
+<section class="prose my-6">
+  <p>Combobox uses the same Alpine.js code and markup as the <a href="/components/select">Select</a> component, the only difference being the search box at the top of the listbox.</p>
+  <p>You can set up a few additional options on the <code>&lt;div data-popover&gt;</code> element:</p>
+  <ul>
+    <li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
+    <li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
+    <li><code>data-empty</code> to set up the message when the search is empty.</li>
+  </ul>
+</section>
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+  { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="combobox", tabsets=tabsets) }}
+
+<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
+
+<section class="prose my-6">
+  <p class="my-6 prose">If you use Jinja (or Nunjucks), you can use the <code>select()</code> macro directly, making sure to set <code>is_combobox</code> to <code>True</code> (or <code>true</code> for Nunjucks). <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+</section>
+
+{% set raw_code %}{% raw %}{% call select(
+  listbox_attrs={"data-empty": "No framework found."},
+  is_combobox=true
+) %}
+  <div role="option" data-value="nextjs">Next.js</div>
+  <div role="option" data-value="sveltekit">SvelteKit</div>
+  <div role="option" data-value="nuxtjs">Nuxt.js</div>
+  <div role="option" data-value="remix">Remix</div>
+  <div role="option" data-value="astro">Astro</div>
+{% endcall %}{% endraw %}{% endset %}
+{{ code_block(raw_code, "jinja") }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-scrollable"><a href="#example-scrollable">Scrollable</a></h3>
+
+{% set options_timezones = [
+  {
+    label: "Americas",
+    timezones: [
+      { value: "America/New_York", label: "(GMT-5) New York" },
+      { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" },
+      { value: "America/Chicago", label: "(GMT-6) Chicago" },
+      { value: "America/Toronto", label: "(GMT-5) Toronto" },
+      { value: "America/Vancouver", label: "(GMT-8) Vancouver" },
+      { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" }
+    ]
+  },
+  {
+    label: "Europe",
+    timezones: [
+      { value: "Europe/London", label: "(GMT+0) London" },
+      { value: "Europe/Paris", label: "(GMT+1) Paris" },
+      { value: "Europe/Berlin", label: "(GMT+1) Berlin" },
+      { value: "Europe/Rome", label: "(GMT+1) Rome" },
+      { value: "Europe/Madrid", label: "(GMT+1) Madrid" },
+      { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" }
+    ]
+  },
+  {
+    label: "Asia/Pacific",
+    timezones: [
+      { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" },
+      { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" },
+      { value: "Asia/Singapore", label: "(GMT+8) Singapore" },
+      { value: "Asia/Dubai", label: "(GMT+4) Dubai" },
+      { value: "Australia/Sydney", label: "(GMT+11) Sydney" },
+      { value: "Asia/Seoul", label: "(GMT+9) Seoul" }
+    ]
+  }
+] %}
+{% set code %}
+{% call select(
+  trigger_attrs={"class": "w-[200px]"},
+  content_attrs={"class": "w-72"},
+  listbox_attrs={"data-empty": "No timezone found."},
+  is_combobox=true,
+  search_placeholder="Search timezone...",
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+  <div class="max-h-64 overflow-y-auto scrollbar">
+    {% for group in options_timezones %}
+      <div role="group" aria-labelledby="demo-combobox-timezones-group-{{ loop.index0 }}">
+        <span id="demo-combobox-timezones-group-{{ loop.index0 }}" role="heading">{{ group.label }}</span>
+        {% for timezone in group.timezones %}
+          <div role="option" data-value="{{ timezone.value}}">
+            {{ timezone.label }}
+          </div>
+        {% endfor %}
+      </div>
+    {% endfor %}
+  </div>
+  <hr role="separator">
+  <div role="option">
+    {% lucide "circle-plus" %}
+    Create timezone
+  </div>
+{% endcall %}
+{% endset %}
+{{ code_preview("combobox-with-groups", code | prettyHtml) }}
+
+<h3 id="example-top"><a href="#example-top">Top side</a></h3>
+
+{% set options_frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] %}
+{% set code %}
+{% call select(
+  trigger_attrs={"class": "w-[200px]"},
+  listbox_attrs={"data-empty": "No framework found."},
+  is_combobox=true,
+  search_placeholder="Search framework...",
+  register_on=["alpine:init", "htmx:afterSwap"],
+  content_attrs={"data-side": "top"}
+) %}
+  {% for framework in options_frameworks %}
+    <div role="option" data-value="{{ framework }}">{{ framework }}</div>
+  {% endfor %}
+{% endcall %}{% endset %}
+{{ code_preview("combobox", code | prettyHtml) }}
@@ -0,0 +1,161 @@
+---
+layout: layouts/component.njk
+title: Dialog
+description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + Javascript
+        id: usage-default
+      - label: Jinja or Nunjucks
+        id: usage-jinja
+  - label: Examples
+    id: examples
+    children:
+      - label: Scrollable content
+        id: example-scrollable-content
+---
+
+{% from "macros/code_block.njk" import code_block %}
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "components/dialog.njk" import dialog %}
+
+{% set code_html %}
+{% set footer %}
+  <button class="btn-outline" @click="open = false">Cancel</button>
+  <button class="btn" @click="open = false">Save changes</button>
+{% endset %}
+{% call dialog(
+  id="demo-dialog-edit-profile",
+  title="Edit profile",
+  description="Make changes to your profile here. Click save when you're done.",
+  main_attrs={"x-ref": "myDialog"},
+  trigger="Edit Profile",
+  trigger_attrs={"class": "btn-outline"},
+  content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+  footer=footer,
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<form class="form grid gap-4">
+  <div class="grid gap-3">
+    <label for="demo-dialog-edit-profile-name">Name</label>
+    <input type="text" value="Pedro Duarte" id="demo-dialog-edit-profile-name" />
+  </div>
+  <div class="grid gap-3">
+    <label for="demo-dialog-edit-profile-username">Username</label>
+    <input type="text" value="@peduarte" id="demo-dialog-edit-profile-username" />
+  </div>
+</form>
+{% endcall %}
+{% endset %}
+
+{% set code_script %}
+{% include "components/dialog-script.njk" %}
+{% endset %}
+
+{{ code_preview("dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+
+<div class="alert my-6">
+  {% lucide "circle-alert" %}
+  <h2>This component requires Javascript.</h2>
+  <section>
+    <p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  </section>
+</div>
+
+<section class="prose my-6">
+  <p>The component is structured as such:</p>
+  <ul>
+    <li>A <code>&lt;div class="dialog"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
+    <li>A <code>&lt;button&gt;</code> that acts as the trigger to open or close the popover.</li>
+    <li>A <code>&lt;div role="dialog"&gt;</code> that holds the dialog itself. It also acts as the backdrop for the dialog.</li>
+    <li>Inside of it, we have:
+      <ul>
+        <li>A <code>&lt;header&gt;</code> that contains the title (<code>&lt;h2&gt;</code>) and description (<code>&lt;p&gt;</code>) of the dialog.</li>
+        <li>A <code>&lt;section&gt;</code> for the content.</li>
+        <li>A <code>&lt;footer&gt;</code> that usually contains actions.</li>
+        <li>A close <code>&lt;button&gt;</code>.</li>
+      </ul>
+    </li>
+  </ul>
+</section>
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+  { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="combobox", tabsets=tabsets) }}
+
+<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
+
+<p class="my-6 prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+
+{% set raw_code %}{% raw %}{% set footer %}
+  <button class="btn-outline" @click="open = false">Cancel</button>
+  <button class="btn" @click="open = false">Save changes</button>
+{% endset %}
+{% call dialog(
+  id="demo-dialog-edit-profile",
+  title="Edit profile",
+  description="Make changes to your profile here. Click save when you're done.",
+  main_attrs={"x-ref": "myDialog"},
+  trigger="Edit Profile",
+  trigger_attrs={"class": "btn-outline"},
+  content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+  footer=footer,
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<form class="form grid gap-4">
+  <div class="grid gap-3">
+    <label for="demo-dialog-edit-profile-name">Name</label>
+    <input type="text" value="Pedro Duarte" id="demo-dialog-edit-profile-name" />
+  </div>
+  <div class="grid gap-3">
+    <label for="demo-dialog-edit-profile-username">Username</label>
+    <input type="text" value="@peduarte" id="demo-dialog-edit-profile-username" />
+  </div>
+</form>
+{% endcall %}{% endraw %}{% endset%}
+{{ code_block(raw_code, "jinja") }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-scrollable-content"><a href="#example-scrollable-content">Scrollable content</a></h3>
+
+{% set code %}
+{% set footer %}
+  <button class="btn-outline" @click="open = false">Close</button>
+{% endset %}
+{% call dialog(
+  id="dialog-example",
+  title="Scrollable Content",
+  description="This is a dialog with scrollable content.",
+  main_attrs={"x-ref": "myDialog"},
+  trigger="Scrollable Content",
+  trigger_attrs={"class": "btn-outline"},
+  content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+  content_body_attrs={"class": "overflow-y-auto scrollbar"},
+  footer=footer,
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<div class="space-y-4 text-sm">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</div>
+{% endcall %}
+{% endset %}
+{{ code_preview("dialog-scrollable-content", code | prettyHtml) }}
@@ -0,0 +1,329 @@
+---
+layout: layouts/component.njk
+title: Dropdown Menu
+description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + Javascript
+        id: usage-default
+      - label: Jinja or Nunjucks
+        id: usage-jinja
+  - label: Examples
+    id: examples
+    children:
+      - label: Checkboxes
+        id: example-checkboxes
+      - label: Radio Group
+        id: example-radio-group
+---
+
+{% from "macros/code_block.njk" import code_block %}
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "components/dropdown-menu.njk" import dropdown_menu %}
+
+{% set code_html %}
+{% call dropdown_menu(
+  id="dropdown-menu",
+  trigger="Open",
+  trigger_attrs={"class": "btn-outline"},
+  content_attrs={"class": "min-w-56"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<div role="group" aria-labelledby="account-options">
+  <span id="account-options" role="heading">My Account</span>
+  <button type="button" role="menuitem">
+    Profile
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+  </button>
+  <button type="button" role="menuitem">
+    Billing
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
+  </button>
+  <button type="button" role="menuitem">
+    Settings
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
+  </button>
+  <button type="button" role="menuitem">
+    Keyboard shortcuts
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
+  </button>
+</div>
+<hr role="separator">
+<button type="button" role="menuitem">
+  GitHub
+</button>
+<button type="button" role="menuitem">
+  Support
+</button>
+<button type="button" role="menuitem" disabled>
+  API
+</button>
+<hr role="separator">
+<button type="button" role="menuitem">
+  Logout
+  <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+</button>
+{% endcall %}
+{% endset %}
+
+{% set code_script %}
+{% include "components/dropdown-menu-script.njk" %}
+{% endset %}
+
+{{ code_preview("dropdown-menu", code_script | prettyHtml ~ code_html | prettyHtml) }}
+
+<h2 id="usage">Usage</h2>
+
+<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+
+<div class="alert my-6">
+  {% lucide "circle-alert" %}
+  <h2>This component requires Javascript.</h2>
+  <section>
+    <p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  </section>
+</div>
+
+<section class="prose my-6">
+  <p>The component is structured as such:</p>
+  <ul>
+    <li>A <code>&lt;div class="popover"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
+    <li>A <code>&lt;button&gt;</code> that acts as the trigger to open or close the popover.</li>
+    <li>A <code>&lt;div data-popover&gt;</code> that holds the content of the popover.</li>
+    <li>Inside of the <code>&lt;div data-popover&gt;</code> is a <code>&lt;nav role="menu"&gt;</code> that contains a combination of:
+      <ul>
+        <li><code>&lt;button role="menuitem"&gt;</code> for menu items.</li>
+        <li><code>&lt;button role="menuitemcheckbox"&gt;</code> for menu items with checkboxes.</li>
+        <li><code>&lt;button role="menuitemradio"&gt;</code> for menu items with radio buttons.</li>
+        <li><code>&lt;hr role="separator"&gt;</code> to display a horizontal separator.</li>
+        <li><code>&lt;div role="group"&gt;</code> to group options.</li>
+        <li><code>&lt;span role="heading"&gt;</code> for group headings.</li>
+      </ul>
+  </ul>
+  <p>As with the <a href="/components/popover">Popover</a> component, you can set up a few additional options on the <code>&lt;div data-popover&gt;</code> element:</p>
+  <ul>
+    <li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
+    <li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
+  </ul>
+</section>
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+  { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="dropdown-menu", tabsets=tabsets) }}
+
+<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
+
+<p class="my-6 prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+
+{% set raw_code %}{% raw %}{% call dropdown_menu(
+  id="dropdown-menu",
+  trigger="Open",
+  trigger_attrs={"class": "btn-outline"},
+  content_attrs={"class": "min-w-56"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<div role="group" aria-labelledby="account-options">
+  <span id="account-options" role="heading">My Account</span>
+  <button type="button" role="menuitem">
+    Profile
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+  </button>
+  <button type="button" role="menuitem">
+    Billing
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
+  </button>
+  <button type="button" role="menuitem">
+    Settings
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
+  </button>
+  <button type="button" role="menuitem">
+    Keyboard shortcuts
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
+  </button>
+</div>
+<hr role="separator">
+<button type="button" role="menuitem">
+  GitHub
+</button>
+<button type="button" role="menuitem">
+  Support
+</button>
+<button type="button" role="menuitem" disabled>
+  API
+</button>
+<hr role="separator">
+<button type="button" role="menuitem">
+  Logout
+  <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+</button>
+{% endcall %}{% endraw %}{% endset%}
+{{ code_block(raw_code, "jinja") }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-checkboxes"><a href="#example-checkboxes">Checkboxes</a></h3>
+
+{% set code %}{% call dropdown_menu(
+  id="dropdown-menu-checkboxes",
+  trigger="Open",
+  trigger_attrs={"class": "btn-outline"},
+  content_attrs={"class": "min-w-56"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<div role="group" aria-labelledby="account-options">
+  <span id="account-options" role="heading">Account Options</span>
+  <button type="button" role="menuitem">
+    {% lucide "user" %}
+    Profile
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+  </button>
+  <button type="button" role="menuitem">
+    {% lucide "credit-card" %}
+    Billing
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
+  </button>
+  <button type="button" role="menuitem">
+    {% lucide "settings" %}
+    Settings
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
+  </button>
+</div>
+<hr role="separator">
+<div role="group" aria-labelledby="appearance-options">
+  <span id="appearance-options" role="heading">Appearance</span>
+  <button
+    type="button"
+    role="menuitemcheckbox"
+    aria-checked="true"
+    class="group"
+    x-data="{ checked: true }"
+    @click="checked = !checked"
+    :aria-checked="checked"
+  >
+    {% lucide "check", {
+      "class": "invisible group-aria-checked:visible",
+      "aria-hidden": "true",
+      "focusable": "false"
+    } %}
+    Status Bar
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+  </button>
+  <button
+    type="button"
+    role="menuitemcheckbox"
+    aria-checked="false"
+    class="group"
+    disabled
+    x-data="{ checked: false }"
+    @click="checked = !checked"
+    :aria-checked="checked"
+  >
+    {% lucide "check", {
+      "class": "invisible group-aria-checked:visible",
+      "aria-hidden": "true",
+      "focusable": "false"
+    } %}
+    Activity Bar
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
+  </button>
+  <button
+    type="button"
+    role="menuitemcheckbox"
+    aria-checked="false"
+    class="group"
+    x-data="{ checked: false }"
+    @click="checked = !checked"
+    :aria-checked="checked"
+  >
+    {% lucide "check", {
+      "class": "invisible group-aria-checked:visible",
+      "aria-hidden": "true",
+      "focusable": "false"
+    } %}
+    Panel
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
+  </button>
+</div>
+<hr role="separator">
+<button type="button" role="menuitem">
+  {% lucide "log-out" %}
+  Logout
+  <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+</button>
+{% endcall %}{% endset %}
+{{ code_preview("dropdown-menu-checkboxes", code | prettyHtml) }}
+
+<h3 id="example-radio-group"><a href="#example-radio-group">Radio Group</a></h3>
+
+{% set code %}{% call dropdown_menu(
+  id="dropdown-menu-radio-group",
+  trigger="Open",
+  trigger_attrs={"class": "btn-outline"},
+  content_attrs={"class": "min-w-56"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<div role="group" aria-labelledby="position-options" x-data="{ checked: 'bottom' }">
+  <span id="position-options" role="heading">Panel Position</span>
+  <hr role="separator">
+  <button
+    type="button"
+    role="menuitemradio"
+    aria-checked="false"
+    class="group"
+    @click="checked = 'top'"
+    :aria-checked="checked == 'top'"
+  >
+    <div class="size-4 flex items-center justify-center">
+      <div
+        class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
+        aria-hidden="true",
+        focusable="false"
+      ></div>
+    </div>
+    Status Bar
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
+  </button>
+  <button
+    type="button"
+    role="menuitemradio"
+    aria-checked="false"
+    class="group"
+    @click="checked = 'bottom'"
+    :aria-checked="checked == 'bottom'"
+  >
+    <div class="size-4 flex items-center justify-center">
+      <div
+        class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
+        aria-hidden="true",
+        focusable="false"
+      ></div>
+    </div>
+    Activity Bar
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
+  </button>
+  <button
+    type="button"
+    role="menuitemradio"
+    aria-checked="false"
+    class="group"
+    @click="checked = 'right'"
+    :aria-checked="checked == 'right'"
+  >
+    <div class="size-4 flex items-center justify-center">
+      <div
+        class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
+        aria-hidden="true",
+        focusable="false"
+      ></div>
+    </div>
+    Panel
+    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
+  </button>
+</div>
+{% endcall %}{% endset %}
+{{ code_preview("dropdown-menu", code | prettyHtml) }}
@@ -0,0 +1,79 @@
+---
+layout: layouts/component.njk
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<form class="form grid gap-6">
+  <div class="grid gap-2">
+    <label for="demo-form-text">Username</label>
+    <input type="text" id="demo-form-text" placeholder="hunvreus">
+    <p class="text-muted-foreground text-sm">This is your public display name.</p>
+  </div>
+
+  <div class="grid gap-2">
+    <label for="demo-form-select">Email</label>
+    <select id="demo-form-select">
+      <option value="bob@example.com">m@example.com</option>
+      <option value="alice@example.com">m@google.com</option>
+      <option value="john@example.com">m@support.com</option>
+    </select>
+    <p class="text-muted-foreground text-sm">You can manage email addresses in your email settings.</p>
+  </div>
+
+  <div class="grid gap-2">
+    <label for="demo-form-text">Bio</label>
+    <textarea id="demo-form-textarea" placeholder="I like to..." rows="3"></textarea>
+    <p class="text-muted-foreground text-sm">You can @mention other users and organizations.</p>
+  </div>
+
+  <div class="grid gap-2">
+    <label for="demo-form-date">Date of birth</label>
+    <input type="date" id="demo-form-date">
+    <p class="text-muted-foreground text-sm">Your date of birth is used to calculate your age.</p>
+  </div>
+
+  <div class="flex flex-col gap-3">
+    <label for="demo-form-radio">Notify me about...</label>
+    <fieldset id="demo-form-radio" class="grid gap-3">
+      <label class="font-normal"><input type="radio" name="demo-form-radio" value="1" checked>All new messages</label>
+      <label class="font-normal"><input type="radio" name="demo-form-radio" value="2">Direct messages and mentions</label>
+      <label class="font-normal"><input type="radio" name="demo-form-radio" value="3" >Nothing</label>
+    </fieldset>
+  </div>
+
+  <section class="grid gap-4">
+    <h3 class="text-lg font-medium">Email Notifications</h3>
+    <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+      <div class="flex flex-col gap-0.5">
+        <label for="demo-form-switch" class="leading-normal">Marketing emails</label>
+        <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
+      </div>
+      <input type="checkbox" id="demo-form-switch" role="switch">
+    </div>
+    <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+      <div class="flex flex-col gap-0.5 opacity-60">
+        <label for="demo-form-switch-disabled" class="leading-normal">Security emails</label>
+        <p class="text-muted-foreground text-sm">Receive emails about your account security.</p>
+      </div>
+      <input type="checkbox" id="demo-form-switch-disabled" role="switch" disabled>
+    </div>
+  </section>
+
+  <button type="submit" class="btn">Submit</button>
+</form>{% endset %}
+{{ code_preview("input", code, "w-full max-w-sm") }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>Adding the <code>form</code> class to the parent of any form element (<code>&lt;label&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;select&gt;</code>) will automatically apply the style you would get from adding <code>label</code>, <code>input</code>, <code>textarea</code>, or <code>select</code> classes. Read more about <a href="/components/label">Label</a>, <a href="/components/input">Input</a>, <a href="/components/textarea">Textarea</a>, and <a href="/components/select">Select</a>.</p>
+</section>
+
+{{ code_block(code) }}
@@ -0,0 +1,90 @@
+---
+layout: layouts/component.njk
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Default
+        id: example-default
+      - label: Invalid
+        id: example-invalid
+      - label: Disabled
+        id: example-disabled
+      - label: With label
+        id: example-with-label
+      - label: With text
+        id: example-with-text
+      - label: With button
+        id: example-with-button
+      - label: Form
+        id: example-form
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<input class="input" type="email" placeholder="Email">{% endset %}
+{{ code_preview("input", code) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>Simply add the <code>input</code> class to your <code>&lt;input&gt;</code> element or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the input invalid.</p>
+</section>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+{{ code_preview("input-default", code) }}
+
+<h3 id="example-invalid"><a href="#example-invalid">Invalid</a></h3>
+
+{% set code %}<input class="input" type="email" placeholder="Email" aria-invalid="true">{% endset %}
+{{ code_preview("input-invalid", code) }}
+
+<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
+
+{% set code %}<input class="input" type="email" placeholder="Email" disabled>{% endset %}
+{{ code_preview("input-disabled", code) }}
+
+<h3 id="example-with-label"><a href="#example-with-label">With label</a></h3>
+
+{% set code %}<div class="grid gap-3">
+  <label for="input-with-label" class="label">Label</label>
+  <input class="input" id="input-with-label" type="email" placeholder="Email">
+</div>{% endset %}
+{{ code_preview("input-with-label", code) }}
+
+<h3 id="example-with-text"><a href="#example-with-text">With text</a></h3>
+
+{% set code %}<div class="grid gap-3">
+  <label for="input-with-text" class="label">Label</label>
+  <input class="input" id="input-with-text" type="email" placeholder="Email">
+  <p class="text-muted-foreground text-sm">Fill in your email address.</p>
+</div>{% endset %}
+{{ code_preview("input-with-text", code) }}
+
+<h3 id="example-with-button"><a href="#example-with-button">With button</a></h3>
+
+{% set code %}<div class="flex items-center space-x-2">
+  <input class="input" type="email" placeholder="Email">
+  <button type="submit" class="btn">Submit</button>
+</div>{% endset %}
+{{ code_preview("textarea-form", code) }}
+
+<h3 id="example-form"><a href="#example-form">Form</a></h3>
+
+{% set code %}<form class="form space-y-6 w-full">
+  <div class="grid gap-3">
+    <label for="input-form" class="label">Username</label>
+    <input class="input" id="input-form" type="text" placeholder="hunvreus">
+    <p class="text-muted-foreground text-sm">This is your public display name.</p>
+  </div>
+  <button type="submit" class="btn">Submit</button>
+</form>{% endset %}
+{{ code_preview("input-form", code, "w-full max-w-sm") }}
@@ -0,0 +1,41 @@
+---
+layout: layouts/component.njk
+title: Label
+description: Renders an accessible label associated with controls.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Disabled
+        id: example-disabled
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<label class="label gap-3">
+  <input type="checkbox" class="input">
+  Accept terms and conditions
+</label>{% endset %}
+{{ code_preview("label", code) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>Simply add the <code>label</code> class to your <code>&lt;label&gt;</code> element or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). Labels' style may be affected by the presence of a disabled peer or child element.</p>
+</section>
+
+{% set code %}<label class="label" for="email">Your email address</label>{% endset %}
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
+
+{% set code %}<div class="grid gap-3">
+  <label class="label" for="email">Email</label>
+  <input class="input" id="email" type="email" placeholder="Email" disabled>
+</div>{% endset %}
+{{ code_preview("label-disabled", code) }}
@@ -0,0 +1,48 @@
+---
+layout: layouts/component.njk
+title: Pagination
+description: Pagination with page navigation, next and previous links.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated pagination component in Basecoat.</h2>
+</div>
+
+{% set code %}<nav role="navigation" aria-label="pagination" class="mx-auto flex w-full justify-center">
+  <ul class="flex flex-row items-center gap-1">
+    <li>
+      <a href="#" class="btn-ghost">{% lucide "chevron-left" %} Previous</a>
+    </li>
+    <li>
+      <a href="#" class="btn-icon-ghost">1</a>
+    </li>
+    <li>
+      <a href="#" class="btn-icon-outline">2</a>
+    </li>
+    <li>
+      <a href="#" class="btn-icon-ghost">3</a>
+    </li>
+    <li>
+      <div class="size-9 flex items-center justify-center">{% lucide "ellipsis", { "class": "size-4 shrink-0" } %}</div>
+    </li>
+    <li>
+      <a href="#" class="btn-ghost">Next {% lucide "chevron-right" %}</a>
+    </li>
+  </ul>
+</nav>{% endset %}
+{{ code_preview("pagination", code, "max-w-md") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose my-6">
+  <p>A pagination is fairly simple to implement with Tailwind using the Basecoat button classes:</p>
+</section>
+
+{{ code_block(code) }}
@@ -0,0 +1,131 @@
+---
+layout: layouts/component.njk
+title: Popover
+description: Displays rich content in a portal, triggered by a button.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + Javascript
+        id: usage-default
+      - label: Jinja or Nunjucks
+        id: usage-jinja
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "components/popover.njk" import popover %}
+
+{% set code_html %}
+{% call popover(
+  id="demo-popover",
+  trigger="Open popover",
+  trigger_attrs={"class": "btn-outline"},
+  content_attrs={"class": "w-80 p-4"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+  <div class="grid gap-4">
+    <header class="grid gap-1.5">
+      <h4 class="leading-none font-medium">Dimensions</h4>
+      <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
+    </header>
+    <form class="form grid gap-2">
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-width">Width</label>
+        <input type="text" id="demo-popover-width" value="100%" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-max-width">Max. width</label>
+        <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-height">Height</label>
+        <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-max-height">Max. height</label>
+        <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
+      </div>
+    </form>
+  </div>
+{% endcall %}
+{% endset %}
+
+{% set code_script %}
+{% include "components/popover-script.njk" %}
+{% endset %}
+
+{{ code_preview("combobox", code_script | prettyHtml ~ code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+
+<div class="alert my-6">
+  {% lucide "circle-alert" %}
+  <h2>This component requires Javascript.</h2>
+  <section>
+    <p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  </section>
+</div>
+
+<section class="prose my-6">
+  <p>The component is structured as such:</p>
+  <ul>
+    <li>A <code>&lt;div class="popover"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
+    <li>A <code>&lt;button&gt;</code> that acts as the trigger to open or close the popover.</li>
+    <li>A <code>&lt;div data-popover&gt;</code> that holds the content of the popover.</li>
+  </ul>
+  <p>You can set up a few additional options on the <code>&lt;div data-popover&gt;</code> element:</p>
+  <ul>
+    <li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
+    <li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
+  </ul>
+</section>
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+  { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="popover", tabsets=tabsets) }}
+
+<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
+
+<section class="prose my-6">
+  <p class="my-6 prose">If you use Jinja (or Nunjucks), you can use the <code>popover()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+</section>
+
+{% set raw_code %}{% raw %}{% call popover(
+  id="demo-popover",
+  trigger="Open popover",
+  trigger_attrs={"class": "btn-outline"},
+  content_attrs={"class": "w-80 p-4"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+  <div class="grid gap-4">
+    <header class="grid gap-1.5">
+      <h4 class="leading-none font-medium">Dimensions</h4>
+      <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
+    </header>
+    <form class="form grid gap-2">
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-width">Width</label>
+        <input type="text" id="demo-popover-width" value="100%" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-max-width">Max. width</label>
+        <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-height">Height</label>
+        <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
+      </div>
+      <div class="grid grid-cols-3 items-center gap-4">
+        <label for="demo-popover-max-height">Max. height</label>
+        <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
+      </div>
+    </form>
+  </div>
+{% endcall %}{% endraw %}{% endset %}
+{{ code_block(raw_code, "jinja") }}
@@ -0,0 +1,48 @@
+---
+layout: layouts/component.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:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Form
+        id: example-form
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<fieldset class="grid gap-3">
+  <label class="label"><input type="radio" name="radio-group" value="default" class="input">Default</label>
+  <label class="label"><input type="radio" name="radio-group" value="comfortable" class="input" checked>Comfortable</label>
+  <label class="label"><input type="radio" name="radio-group" value="compact" class="input">Compact</label>
+</fieldset>{% endset %}
+{{ code_preview("radio-group", code) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>Simply add the <code>input</code> class to your <code>&lt;input type="radio"&gt;</code> elements or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the input invalid.</p>
+</section>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-form"><a href="#example-form">Form</a></h3>
+
+{% set code %}<form class="form space-y-6 w-full">
+  <div class="flex flex-col gap-3">
+    <label for="demo-form-radio">Notify me about...</label>
+    <fieldset id="demo-form-radio" class="grid gap-3">
+      <label class="font-normal"><input type="radio" name="demo-form-radio" value="1">All new messages</label>
+      <label class="font-normal"><input type="radio" name="demo-form-radio" value="2">Direct messages and mentions</label>
+      <label class="font-normal"><input type="radio" name="demo-form-radio" value="3" >Nothing</label>
+    </fieldset>
+  </div>
+  <button type="submit" class="btn">Submit</button>
+</form>{% endset %}
+{{ code_preview("radio-group-form", code, "w-full max-w-sm") }}
@@ -0,0 +1,181 @@
+---
+layout: layouts/component.njk
+title: Select
+description: Displays a list of options for the user to pick from—triggered by a button.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML
+        id: usage-html
+      - label: HTML + Javascript
+        id: usage-js
+      - label: Jinja or Nunjucks
+        id: usage-jinja
+  - label: Examples
+    id: examples
+    children:
+      - label: Scrollable
+        id: example-scrollable
+      - label: Disabled
+        id: example-disabled
+      - label: With icon
+        id: example-with-icon
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "components/select.njk" import select %}
+
+{% set code_native %}<select class="select w-[180px]">
+  <optgroup label="Fruits">
+    <option>Apple</option>
+    <option>Banana</option>
+    <option>Blueberry</option>
+    <option>Grapes</option>
+    <option>Pineapple</option>
+</select>{% endset %}
+{{ code_preview("select-native", code_native) }}
+
+{% set code_html %}
+{% call select(
+  name="select-js",
+  trigger_attrs={"class": "w-[180px]"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<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 %}
+{% endset %}
+
+{% set code_script %}
+{% include "components/select-script.njk" %}
+{% endset %}
+
+{{ code_preview("combobox", code_script | prettyHtml ~ code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-html"><a href="#usage-html">HTML</a></h3>
+
+<section class="prose my-6">
+  <p>If you use a <code>&lt;select&gt;</code> element, just add the <code>select</code> class to it or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>).</p>
+</section>
+
+{{ code_block(code_native) }}
+
+<h3 id="usage-js"><a href="#usage-js">HTML + Javascript</a></h3>
+
+<div class="alert my-6">
+  {% lucide "circle-alert" %}
+  <h2>This component requires Javascript.</h2>
+  <section>
+    <p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  </section>
+</div>
+
+<section class="prose my-6">
+  <p>If you need to do more than what <code>&lt;select&gt;</code> allows (e.g. HTML options), you can use this component. It is structured as such:</p>
+  <ul>
+    <li>A <code>&lt;div class="popover"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
+    <li>A <code>&lt;button&gt;</code> that acts as the trigger to open or close the popover.</li>
+    <li>A <code>&lt;div data-popover&gt;</code> that holds the content of the popover.</li>
+    <li>Inside of the <code>&lt;div data-popover&gt;</code> is a <code>&lt;nav role="listbox"&gt;</code> that contains a combination of:
+      <ul>
+        <li><code>&lt;div role="option"&gt;</code> for the options with a <code>data-value</code> attribute.</li>
+        <li><code>&lt;hr role="separator"&gt;</code> to display a horizontal separator.</li>
+        <li><code>&lt;div role="group"&gt;</code> to group options.</li>
+        <li><code>&lt;span role="heading"&gt;</code> for group headings.</li>
+      </ul>
+    </li>
+    <li>An <code>&lt;input type="hidden"&gt;</code> to hold the value of the field (if needed).</li>
+  </ul>
+  <p>As with the <a href="/components/popover">Popover</a> component, you can set up a few additional options on the <code>&lt;div data-popover&gt;</code> element:</p>
+  <ul>
+    <li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
+    <li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
+  </ul>
+</section>
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+  { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="select", tabsets=tabsets) }}
+
+<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
+
+<p class="my-6 prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+
+{% set raw_code %}{% raw %}{% call select(name="select-js") %}
+<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(raw_code, "jinja") }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-scrollable"><a href="#example-scrollable">Scrollable</a></h3>
+
+{% set code %}
+{% call select(
+  listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+{% for i in range(0, 99) %}
+<div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
+{% endfor %}
+{% endcall %}
+{% endset %}
+
+{{ code_preview("select-scrollable", code | prettyHtml) }}
+
+<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
+
+{% set code %}
+{% call select(
+  trigger_attrs={"disabled": "disabled"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<div role="option" data-value="disabled">Disabled</div>
+{% endcall %}
+{% endset %}
+
+{{ code_preview("select-disabled", code | prettyHtml) }}
+
+<h3 id="example-with-icon"><a href="#example-with-icon">With icon</a></h3>
+
+{% set code %}
+{% call select(
+  trigger_attrs={'class': 'w-[180px]'},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+<div type="button" role="option" data-value="bar">
+  {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
+  Bar
+</div>
+<div type="button" role="option" data-value="line">
+  {% lucide "chart-line", {"class": "text-muted-foreground"} %}
+  Line
+</div>
+<div type="button" role="option" data-value="pie">
+  {% lucide "chart-pie", {"class": "text-muted-foreground"} %}
+  Pie
+</div>
+{% endcall %}
+{% endset %}
+
+{{ code_preview("select-scrollable", code | prettyHtml) }}
@@ -0,0 +1,51 @@
+---
+layout: layouts/component.njk
+title: Skeleton
+description: Used to show a placeholder while content is loading.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Card
+        id: example-card
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated skeleton component in Basecoat.</h2>
+</div>
+
+{% set code %}<div class="flex items-center gap-4">
+  <div class="bg-accent animate-pulse size-10 shrink-0 rounded-full"></div>
+  <div class="grid gap-2">
+    <div class="bg-accent animate-pulse rounded-md h-4 w-[150px]"></div>
+    <div class="bg-accent animate-pulse rounded-md h-4 w-[100px]"></div>
+  </div>
+</div>{% endset %}
+{{ code_preview("skeleton", code | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<p class="prose my-6">Simply use the <code>animate-pulse</code> class to create a skeleton.</p>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-card"><a href="#example-card">Card</a></h3>
+
+{% set code %}<div class="card w-full @md:w-auto @md:min-w-sm">
+  <header>
+    <div class="bg-accent animate-pulse rounded-md h-4 w-2/3"></div>
+    <div class="bg-accent animate-pulse rounded-md h-4 w-1/2"></div>
+  </header>
+  <section>
+    <div class="bg-accent animate-pulse rounded-md aspect-square w-full"></div>
+  </section>
+</div>{% endset %}
+{{ code_preview("skeleton-card", code | prettyHtml, "w-full max-w-md") }}
@@ -0,0 +1,39 @@
+---
+layout: layouts/component.njk
+title: Slider
+description: An input where the user selects a value from within a given range.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<input
+  type="range"
+  class="input w-full"
+  min="0"
+  max="100"
+  value="50"
+  x-data="{
+    updatePercent(el) {
+      const min = parseFloat(el.min || 0);
+      const max = parseFloat(el.max || 100);
+      const value = parseFloat(el.value);
+      const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
+      el.style.setProperty('--slider-value', `${percent}%`);
+    }
+  }"
+  x-init="updatePercent($el)"
+  @input="updatePercent($el)"
+>{% endset %}
+{{ code_preview("slider", code, "w-full max-w-sm") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose my-6">
+  <p>You can style an <code>&lt;input type="range"&gt;</code> element by either adding the <code>input</code> class or having a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). However, the range input also requries some Javacript code to be able to paint the left side of the slider.</p>
+</section>
+
+{{ code_block(code) }}
@@ -0,0 +1,54 @@
+---
+layout: layouts/component.njk
+title: Switch
+description: A control that allows the user to toggle between checked and not checked.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Form
+        id: example-form
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<label class="label">
+  <input type="checkbox" name="switch" role="switch" class="input">
+  Airplane Mode
+</label>{% endset %}
+{{ code_preview("switch", code) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose my-6">
+  <p>You can style a <code>&lt;input type="checkbox"&gt;</code> element as a switch by adding a <code>role="switch"</code> attribute, and adding the <code>input</code> class or having a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>).</p>
+</section>
+
+{% set code %}<input type="checkbox" role="switch" class="input">{% endset %}
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-form"><a href="#example-form">Form</a></h3>
+
+{% set code %}<form class="form grid gap-4">
+  <h3 class="text-lg font-medium">Email Notifications</h3>
+  <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+    <div class="flex flex-col gap-0.5">
+      <label for="demo-form-switch" class="leading-normal">Marketing emails</label>
+      <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
+    </div>
+    <input type="checkbox" id="demo-form-switch" role="switch">
+  </div>
+  <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+    <div class="flex flex-col gap-0.5 opacity-60">
+      <label for="demo-form-switch-disabled" class="leading-normal">Marketing emails</label>
+      <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
+    </div>
+    <input type="checkbox" id="demo-form-switch-disabled" role="switch" disabled>
+  </div>
+</form>{% endset %}
+{{ code_preview("switch-form", code, "w-full") }}
@@ -0,0 +1,85 @@
+---
+layout: layouts/component.njk
+title: Table
+description: A responsive table component.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<table class="table">
+  <caption>A list of your recent invoices.</caption>
+  <thead>
+    <tr>
+      <th>Invoice</th>
+      <th>Status</th>
+      <th>Method</th>
+      <th>Amount</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="font-medium">INV001</td>
+      <td>Paid</td>
+      <td>Credit Card</td>
+      <td class="text-right">$250.00</td>
+    </tr>
+    <tr>
+      <td class="font-medium">INV002</td>
+      <td>Pending</td>
+      <td>PayPal</td>
+      <td class="text-right">$150.00</td>
+    </tr>
+    <tr>
+      <td class="font-medium">INV003</td>
+      <td>Unpaid</td>
+      <td>Bank Transfer</td>
+      <td class="text-right">$350.00</td>
+    </tr>
+    <tr>
+      <td class="font-medium">INV004</td>
+      <td>Paid</td>
+      <td>Paypal</td>
+      <td class="text-right">$450.00</td>
+    </tr>
+    <tr>
+      <td class="font-medium">INV005</td>
+      <td>Paid</td>
+      <td>Credit Card</td>
+      <td class="text-right">$550.00</td>
+    </tr>
+    <tr>
+      <td class="font-medium">INV006</td>
+      <td>Pending</td>
+      <td>Bank Transfer</td>
+      <td class="text-right">$200.00</td>
+    </tr>
+    <tr>
+      <td class="font-medium">INV007</td>
+      <td>Unpaid</td>
+      <td>Credit Card</td>
+      <td class="text-right">$300.00</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td colspan="3">Total</td>
+      <td class="text-right">$2,500.00</td>
+    </tr>
+  </tfoot>
+</table>{% endset %}
+{{ code_preview("table", code, "w-full") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose my-6">
+  <p>Simply add the <code>table</code> class to your table element.</p>
+</section>
+
+{% set code %}<table class="table">
+  <!-- Content of your table -->
+</table>{% endset %}
+{{ code_block(code) }}
@@ -0,0 +1,177 @@
+---
+layout: layouts/component.njk
+title: Tabs
+description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + Javascript
+        id: usage-default
+      - label: Jinja or Nunjucks
+        id: usage-jinja
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "components/tabs.njk" import tabs %}
+
+{% set code_html %}
+{% set account_panel %}
+<div class="card">
+  <header>
+    <h2>Account</h2>
+    <p>Make changes to your account here. Click save when you're done.</p>
+  </header>
+  <section>
+    <form class="form grid gap-6">
+      <div class="grid gap-3">
+        <label for="demo-tabs-account-name">Name</label>
+        <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
+      </div>
+      <div class="grid gap-3">
+        <label for="demo-tabs-account-username">Username</label>
+        <input type="text" id="demo-tabs-account-username" value="@peduarte" />
+      </div>
+    </form>
+  </section>
+  <footer>
+    <button type="button" class="btn">Save changes</button>
+  </footer>
+</div>
+{% endset %}
+{% set password_panel %}
+<div class="card">
+  <header>
+    <h2>Password</h2>
+    <p>Change your password here. After saving, you'll be logged out.</p>
+  </header>
+  <section>
+    <form class="form grid gap-6">
+      <div class="grid gap-3">
+        <label for="demo-tabs-password-current">Current password</label>
+        <input type="password" id="demo-tabs-password-current" />
+      </div>
+      <div class="grid gap-3">
+        <label for="demo-tabs-password-new">New password</label>
+        <input type="password" id="demo-tabs-password-new"/>
+      </div>
+    </form>
+  </section>
+  <footer>
+    <button type="button" class="btn">Save Password</button>
+  </footer>
+</div>
+{% endset %}
+{% set tabsets_demo = [
+{ tab: "Account", panel: account_panel },
+{ tab: "Password", panel: password_panel }
+] %}
+{{ tabs(
+  id='demo-tabs-with-panels',
+  tabsets=tabsets_demo,
+  main_attrs={ "class": "w-full" },
+  tablist_attrs={ "class": "w-full" },
+  register_on=["alpine:init", "htmx:afterSwap"]
+) }}
+{% endset %}
+
+{% set code_script %}
+{% include "components/tabs-script.njk" %}
+{% endset %}
+
+{{ code_preview("tabs", code_script | prettyHtml ~ code_html | prettyHtml, "max-w-[300px] w-full") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+
+<div class="alert my-6">
+  {% lucide "circle-alert" %}
+  <h2>This component requires Javascript.</h2>
+  <section>
+    <p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  </section>
+</div>
+
+<section class="prose my-6">
+  <p>The component is structured as such:</p>
+  <ul>
+    <li>A <code>&lt;div class="tabs"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
+    <li>A <code>&lt;nav role="tablist"&gt;</code> that holds the tab buttons (<code>&lt;button role="tab"&gt;</code>).</li>
+    <li>A series of <code>&lt;div role="tabpanel"&gt;</code> that holds the tab panels corresponding to each tab button.</li>
+  </ul>
+</section>
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+  { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="combobox", tabsets=tabsets) }}
+
+<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
+
+<p class="my-6 prose">If you use Jinja (or Nunjucks), you can use the <code>tabs()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+
+{% set raw_code %}{% raw %}{% set account_panel %}
+<div class="card">
+  <header>
+    <h2>Account</h2>
+    <p>Make changes to your account here. Click save when you're done.</p>
+  </header>
+  <section>
+    <form class="form grid gap-6">
+      <div class="grid gap-3">
+        <label for="demo-tabs-account-name">Name</label>
+        <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
+      </div>
+      <div class="grid gap-3">
+        <label for="demo-tabs-account-username">Username</label>
+        <input type="text" id="demo-tabs-account-username" value="@peduarte" />
+      </div>
+    </form>
+  </section>
+  <footer>
+    <button type="button" class="btn">Save changes</button>
+  </footer>
+</div>
+{% endset %}
+
+{% set password_panel %}
+<div class="card">
+  <header>
+    <h2>Password</h2>
+    <p>Change your password here. After saving, you'll be logged out.</p>
+  </header>
+  <section>
+    <form class="form grid gap-6">
+      <div class="grid gap-3">
+        <label for="demo-tabs-password-current">Current password</label>
+        <input type="password" id="demo-tabs-password-current" />
+      </div>
+      <div class="grid gap-3">
+        <label for="demo-tabs-password-new">New password</label>
+        <input type="password" id="demo-tabs-password-new"/>
+      </div>
+    </form>
+  </section>
+  <footer>
+    <button type="button" class="btn">Save Password</button>
+  </footer>
+</div>
+{% endset %}
+
+{% set tabsets_demo = [
+{ tab: "Account", panel: account_panel },
+{ tab: "Password", panel: password_panel }
+] %}
+
+{{ tabs(
+  id='demo-tabs-with-panels',
+  tabsets=tabsets_demo,
+  main_attrs={ "class": "w-full" },
+  tablist_attrs={ "class": "w-full" },
+  register_on=["alpine:init", "htmx:afterSwap"]
+) }}{% endraw %}{% endset%}
+{{ code_block(raw_code, "jinja") }}
@@ -0,0 +1,90 @@
+---
+layout: layouts/component.njk
+title: Teaxtarea
+description: Displays a form textarea or a component that looks like a textarea.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Default
+        id: example-default
+      - label: Invalid
+        id: example-invalid
+      - label: Disabled
+        id: example-disabled
+      - label: With label
+        id: example-with-label
+      - label: With text
+        id: example-with-text
+      - label: With button
+        id: example-with-button
+      - label: Form
+        id: example-form
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<textarea class="textarea" placeholder="Type your message here"></textarea>{% endset %}
+{{ code_preview("button", code, "w-full") }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>Simply add the <code>textarea</code> class to your <code>&lt;textarea&gt;</code> element or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the textarea invalid.</p>
+</section>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+{{ code_preview("textarea-default", code, "w-full") }}
+
+<h3 id="example-invalid"><a href="#example-invalid">Invalid</a></h3>
+
+{% set code %}<textarea class="textarea" placeholder="Type your message here" aria-invalid="true"></textarea>{% endset %}
+{{ code_preview("textarea-invalid", code, "w-full") }}
+
+<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
+
+{% set code %}<textarea class="textarea" placeholder="Type your message here" disabled></textarea>{% endset %}
+{{ code_preview("textarea-disabled", code, "w-full") }}
+
+<h3 id="example-with-label"><a href="#example-with-label">With label</a></h3>
+
+{% set code %}<div class="grid gap-3">
+  <label for="textarea-with-label" class="label">Label</label>
+  <textarea id="textarea-with-label" class="textarea" placeholder="Type your message here"></textarea>
+</div>{% endset %}
+{{ code_preview("textarea-with-label", code, "w-full") }}
+
+<h3 id="example-with-text"><a href="#example-with-text">With text</a></h3>
+
+{% set code %}<div class="grid gap-3">
+  <label for="textarea-with-label" class="label">Label</label>
+  <textarea id="textarea-with-label" class="textarea" placeholder="Type your message here"></textarea>
+  <p class="text-muted-foreground text-sm">Type your message and press enter to send.</p>
+</div>{% endset %}
+{{ code_preview("textarea-with-text", code, "w-full") }}
+
+<h3 id="example-with-button"><a href="#example-with-button">With button</a></h3>
+
+{% set code %}<div class="grid gap-3">
+  <textarea id="textarea-with-label" class="textarea" placeholder="Type your message here"></textarea>
+  <button type="submit" class="btn">Submit</button>
+</div>{% endset %}
+{{ code_preview("textarea-form", code, "w-full") }}
+
+<h3 id="example-form"><a href="#example-form">Form</a></h3>
+
+{% set code %}<form class="form space-y-6">
+  <div class="grid gap-3">
+    <label for="textarea-form" class="label">Bio</label>
+    <textarea id="textarea-form" placeholder="Tell us a bit about yourself"></textarea>
+    <p class="text-muted-foreground text-sm">You can @mention other users and organizations.</p>
+  </div>
+  <button type="submit" class="btn">Submit</button>
+</form>{% endset %}
+{{ code_preview("textarea-form", code, "w-full max-w-sm") }}
@@ -0,0 +1,36 @@
+---
+layout: layouts/component.njk
+title: Toast
+description: A succinct message that is displayed temporarily.
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% set code %}<button
+  class="btn-outline"
+  hx-trigger="click"
+  hx-get="/fragments/toast/success"
+  hx-target="#toast-htmx"
+>
+  Toast from backend
+</button>
+<div id="toast-htmx"></div>{% endset %}
+{{ code_preview("toast-htmx", code, "max-w-md") }}
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% set code %}<button
+  class="btn-outline"
+  @click='
+    $toast({
+      category: "success",
+      title: "Great success",
+      description: "Tremendous success toast.",
+      action: {
+        label: "Go to Google",
+        url: "https://google.com"
+      }
+    })
+  '>
+  Toast from front-end
+</button>
+{% endset %}
+{{ code_preview("toast-alpine", code, "max-w-md") }}
@@ -0,0 +1,53 @@
+---
+layout: layouts/component.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:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Default
+        id: example-default
+      - label: Right
+        id: example-right
+      - label: Bottom + Start
+        id: example-bottom-start
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<button class="btn-outline" data-tooltip="Add to library">Hover</button>{% endset %}
+{{ code_preview("button", code) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose my-6">
+  <p>On any element, set the value of the <code>data-tooltip</code> attribute to the text you want to display in the tooltip. Additionally, you can set:</p>
+  <ul>
+    <li><code>data-side</code> attribute to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the tooltip.</li>
+    <li><code>data-align</code> attribute to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the tooltip.</li>
+  </ul>
+</section>
+
+{% set code %}<button class="btn-outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom left</button>{% endset %}
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-default"><a href="#example-default">Default</a></h3>
+
+{% set code %}<button class="btn-outline" data-tooltip="Default tooltip">Default</button>{% endset %}
+{{ code_preview("button", code) }}
+
+<h3 id="example-right"><a href="#example-right">Right</a></h3>
+
+{% set code %}<button class="btn-outline" data-tooltip="Right side tooltip" data-side="right">Right</button>{% endset %}
+{{ code_preview("button", code) }}
+
+<h3 id="example-bottom-start"><a href="#example-bottom-start">Bottom + Start</a></h3>
+
+{% set code %}<button class="btn-outline" data-tooltip="Bottom side and start aligned tooltip" data-side="bottom" data-align="start">Bottom + Start</button>{% endset %}
+{{ code_preview("button", code) }}
@@ -0,0 +1,7 @@
+{% from "../../_includes/components/toast.njk" import toaster %}
+{% set toasts = [{
+  category: "error",
+  title: "Event has not been created",
+  cancel: { label: "Dismiss", click: "close()" }
+}] %}
+{{ toaster(toasts=toasts, is_fragment=true) }}
@@ -0,0 +1,6 @@
+{% from "../../_includes/components/toast.njk" import toaster %}
+{% set toasts = [{
+  category: "info",
+  title: "Be at the area 10 minutes before the event time"
+}] %}
+{{ toaster(toasts=toasts, is_fragment=true) }}
@@ -0,0 +1,7 @@
+{% from "../../_includes/components/toast.njk" import toaster %}
+{% set toasts = [{
+  title: "Event has been created",
+  description: "Sunday, December 03, 2023 at 9:00 AM",
+  cancel: { label: "Undo", click: "close()" }
+}] %}
+{{ toaster(toasts=toasts, is_fragment=true) }}
@@ -0,0 +1,6 @@
+{% from "../../_includes/components/toast.njk" import toaster %}
+{% set toasts = [{
+  category: "warning",
+  title: "Event start time cannot be earlier than 8am"
+}] %}
+{{ toaster(toasts=toasts, is_fragment=true) }}
@@ -0,0 +1,7 @@
+---
+layout: layouts/page.njk
+---
+
+What is it?
+
+Who is it for?
@@ -0,0 +1,11 @@
+---
+layout: layouts/page.njk
+title: Installation
+description: How to install Basecoat in your app.
+---
+
+<h2 id="jinja-and-nunjucks"><a href="#jinja-and-nunjucks">CSS vs. Tailwind</a></h2>
+
+<h2 id="htmx"><a href="#htmx">HTML &amp; Javascript</a></h2>
+
+<h2 id="jinja-and-nunjucks"><a href="#jinja-and-nunjucks">Jinja and Nunjucks</a></h2>
@@ -0,0 +1,30 @@
+---
+layout: layouts/base.njk
+---
+{% include "partials/kitchen-sink/accordion.njk" %}
+{% include "partials/kitchen-sink/alert.njk" %}
+{% include "partials/kitchen-sink/alert-dialog.njk" %}
+{% include "partials/kitchen-sink/avatar.njk" %}
+{% include "partials/kitchen-sink/badge.njk" %}
+{% include "partials/kitchen-sink/breadcrumb.njk" %}
+{% include "partials/kitchen-sink/button.njk" %}
+{% include "partials/kitchen-sink/card.njk" %}
+{% include "partials/kitchen-sink/checkbox.njk" %}
+{% include "partials/kitchen-sink/combobox.njk" %}
+{% include "partials/kitchen-sink/dialog.njk" %}
+{% include "partials/kitchen-sink/dropdown-menu.njk" %}
+{% include "partials/kitchen-sink/form.njk" %}
+{% include "partials/kitchen-sink/input.njk" %}
+{% include "partials/kitchen-sink/label.njk" %}
+{% include "partials/kitchen-sink/pagination.njk" %}
+{% include "partials/kitchen-sink/popover.njk" %}
+{% include "partials/kitchen-sink/radio-group.njk" %}
+{% include "partials/kitchen-sink/select.njk" %}
+{% include "partials/kitchen-sink/skeleton.njk" %}
+{% include "partials/kitchen-sink/slider.njk" %}
+{% include "partials/kitchen-sink/switch.njk" %}
+{% include "partials/kitchen-sink/table.njk" %}
+{% include "partials/kitchen-sink/tabs.njk" %}
+{% include "partials/kitchen-sink/textarea.njk" %}
+{% include "partials/kitchen-sink/toast.njk" %}
+{% include "partials/kitchen-sink/tooltip.njk" %}