From f0144a2361f189f6e21ac539992a52525fc1cdae Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 27 Jun 2026 11:42:43 +0000
Subject: [PATCH] ui: add shadcn-svelte foundation and theming

Set up shadcn-svelte components and adopt its design-token system as the
base for modernizing the UI. Switch dark mode from the data-theme attribute
to the .dark class so shadcn primitives theme correctly.

- add components.json, $lib alias (tsconfig + vite), cn() util
- install shadcn primitives under src/lib/components/ui
- rewrite index.css with shadcn tokens (zinc + brand teal accent)
- keep legacy utility/class aliases as a transitional shim
- toggle .dark class from theme store in App.svelte

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UmuGqwNBJNEAMaWsdCDqUC
---
 ui-svelte/components.json                     |  17 +
 ui-svelte/package-lock.json                   | 320 +++++++++++++++++-
 ui-svelte/package.json                        |  11 +-
 ui-svelte/src/App.svelte                      |   2 +-
 ui-svelte/src/index.css                       | 270 +++++++++------
 .../src/lib/components/ui/badge/badge.svelte  |  49 +++
 .../src/lib/components/ui/badge/index.ts      |   2 +
 .../lib/components/ui/button/button.svelte    |  82 +++++
 .../src/lib/components/ui/button/index.ts     |  17 +
 .../lib/components/ui/card/card-action.svelte |  23 ++
 .../components/ui/card/card-content.svelte    |  20 ++
 .../ui/card/card-description.svelte           |  20 ++
 .../lib/components/ui/card/card-footer.svelte |  20 ++
 .../lib/components/ui/card/card-header.svelte |  23 ++
 .../lib/components/ui/card/card-title.svelte  |  20 ++
 .../src/lib/components/ui/card/card.svelte    |  22 ++
 ui-svelte/src/lib/components/ui/card/index.ts |  25 ++
 .../components/ui/dialog/dialog-close.svelte  |  11 +
 .../ui/dialog/dialog-content.svelte           |  48 +++
 .../ui/dialog/dialog-description.svelte       |  17 +
 .../components/ui/dialog/dialog-footer.svelte |  32 ++
 .../components/ui/dialog/dialog-header.svelte |  20 ++
 .../ui/dialog/dialog-overlay.svelte           |  17 +
 .../components/ui/dialog/dialog-portal.svelte |   7 +
 .../components/ui/dialog/dialog-title.svelte  |  17 +
 .../ui/dialog/dialog-trigger.svelte           |  11 +
 .../lib/components/ui/dialog/dialog.svelte    |   7 +
 .../src/lib/components/ui/dialog/index.ts     |  34 ++
 .../dropdown-menu-checkbox-group.svelte       |  16 +
 .../dropdown-menu-checkbox-item.svelte        |  44 +++
 .../dropdown-menu-content.svelte              |  31 ++
 .../dropdown-menu-group-heading.svelte        |  22 ++
 .../dropdown-menu/dropdown-menu-group.svelte  |   7 +
 .../dropdown-menu/dropdown-menu-item.svelte   |  27 ++
 .../dropdown-menu/dropdown-menu-label.svelte  |  24 ++
 .../dropdown-menu/dropdown-menu-portal.svelte |   7 +
 .../dropdown-menu-radio-group.svelte          |  16 +
 .../dropdown-menu-radio-item.svelte           |  34 ++
 .../dropdown-menu-separator.svelte            |  17 +
 .../dropdown-menu-shortcut.svelte             |  20 ++
 .../dropdown-menu-sub-content.svelte          |  17 +
 .../dropdown-menu-sub-trigger.svelte          |  29 ++
 .../ui/dropdown-menu/dropdown-menu-sub.svelte |   7 +
 .../dropdown-menu-trigger.svelte              |   7 +
 .../ui/dropdown-menu/dropdown-menu.svelte     |   7 +
 .../lib/components/ui/dropdown-menu/index.ts  |  54 +++
 .../src/lib/components/ui/input/index.ts      |   7 +
 .../src/lib/components/ui/input/input.svelte  |  48 +++
 .../src/lib/components/ui/label/index.ts      |   7 +
 .../src/lib/components/ui/label/label.svelte  |  20 ++
 .../src/lib/components/ui/resizable/index.ts  |  13 +
 .../ui/resizable/resizable-handle.svelte      |  27 ++
 .../ui/resizable/resizable-pane-group.svelte  |  24 ++
 .../lib/components/ui/scroll-area/index.ts    |  10 +
 .../scroll-area/scroll-area-scrollbar.svelte  |  30 ++
 .../ui/scroll-area/scroll-area.svelte         |  43 +++
 .../src/lib/components/ui/select/index.ts     |  37 ++
 .../ui/select/select-content.svelte           |  45 +++
 .../ui/select/select-group-heading.svelte     |  21 ++
 .../components/ui/select/select-group.svelte  |  17 +
 .../components/ui/select/select-item.svelte   |  40 +++
 .../components/ui/select/select-label.svelte  |  20 ++
 .../components/ui/select/select-portal.svelte |   7 +
 .../select/select-scroll-down-button.svelte   |  20 ++
 .../ui/select/select-scroll-up-button.svelte  |  20 ++
 .../ui/select/select-separator.svelte         |  18 +
 .../ui/select/select-trigger.svelte           |  29 ++
 .../lib/components/ui/select/select.svelte    |  11 +
 .../src/lib/components/ui/separator/index.ts  |   7 +
 .../components/ui/separator/separator.svelte  |  23 ++
 .../src/lib/components/ui/sheet/index.ts      |  34 ++
 .../components/ui/sheet/sheet-close.svelte    |   7 +
 .../components/ui/sheet/sheet-content.svelte  |  55 +++
 .../ui/sheet/sheet-description.svelte         |  17 +
 .../components/ui/sheet/sheet-footer.svelte   |  20 ++
 .../components/ui/sheet/sheet-header.svelte   |  20 ++
 .../components/ui/sheet/sheet-overlay.svelte  |  17 +
 .../components/ui/sheet/sheet-portal.svelte   |   7 +
 .../components/ui/sheet/sheet-title.svelte    |  17 +
 .../components/ui/sheet/sheet-trigger.svelte  |   7 +
 .../src/lib/components/ui/sheet/sheet.svelte  |   7 +
 .../lib/components/ui/sidebar/constants.ts    |   6 +
 .../components/ui/sidebar/context.svelte.ts   |  81 +++++
 .../src/lib/components/ui/sidebar/index.ts    |  75 ++++
 .../ui/sidebar/sidebar-content.svelte         |  24 ++
 .../ui/sidebar/sidebar-footer.svelte          |  21 ++
 .../ui/sidebar/sidebar-group-action.svelte    |  33 ++
 .../ui/sidebar/sidebar-group-content.svelte   |  21 ++
 .../ui/sidebar/sidebar-group-label.svelte     |  33 ++
 .../ui/sidebar/sidebar-group.svelte           |  21 ++
 .../ui/sidebar/sidebar-header.svelte          |  21 ++
 .../ui/sidebar/sidebar-input.svelte           |  21 ++
 .../ui/sidebar/sidebar-inset.svelte           |  20 ++
 .../ui/sidebar/sidebar-menu-action.svelte     |  37 ++
 .../ui/sidebar/sidebar-menu-badge.svelte      |  24 ++
 .../ui/sidebar/sidebar-menu-button.svelte     | 102 ++++++
 .../ui/sidebar/sidebar-menu-item.svelte       |  21 ++
 .../ui/sidebar/sidebar-menu-skeleton.svelte   |  36 ++
 .../ui/sidebar/sidebar-menu-sub-button.svelte |  39 +++
 .../ui/sidebar/sidebar-menu-sub-item.svelte   |  21 ++
 .../ui/sidebar/sidebar-menu-sub.svelte        |  21 ++
 .../components/ui/sidebar/sidebar-menu.svelte |  21 ++
 .../ui/sidebar/sidebar-provider.svelte        |  53 +++
 .../components/ui/sidebar/sidebar-rail.svelte |  36 ++
 .../ui/sidebar/sidebar-separator.svelte       |  19 ++
 .../ui/sidebar/sidebar-trigger.svelte         |  36 ++
 .../lib/components/ui/sidebar/sidebar.svelte  | 108 ++++++
 .../src/lib/components/ui/skeleton/index.ts   |   7 +
 .../components/ui/skeleton/skeleton.svelte    |  17 +
 .../src/lib/components/ui/switch/index.ts     |   7 +
 .../lib/components/ui/switch/switch.svelte    |  31 ++
 .../src/lib/components/ui/table/index.ts      |  28 ++
 .../lib/components/ui/table/table-body.svelte |  15 +
 .../components/ui/table/table-caption.svelte  |  20 ++
 .../lib/components/ui/table/table-cell.svelte |  15 +
 .../components/ui/table/table-footer.svelte   |  20 ++
 .../lib/components/ui/table/table-head.svelte |  15 +
 .../components/ui/table/table-header.svelte   |  20 ++
 .../lib/components/ui/table/table-row.svelte  |  15 +
 .../src/lib/components/ui/table/table.svelte  |  17 +
 ui-svelte/src/lib/components/ui/tabs/index.ts |  18 +
 .../components/ui/tabs/tabs-content.svelte    |  17 +
 .../lib/components/ui/tabs/tabs-list.svelte   |  40 +++
 .../components/ui/tabs/tabs-trigger.svelte    |  23 ++
 .../src/lib/components/ui/tabs/tabs.svelte    |  19 ++
 .../src/lib/components/ui/textarea/index.ts   |   7 +
 .../components/ui/textarea/textarea.svelte    |  23 ++
 .../lib/components/ui/toggle-group/index.ts   |  10 +
 .../ui/toggle-group/toggle-group-item.svelte  |  35 ++
 .../ui/toggle-group/toggle-group.svelte       |  75 ++++
 .../src/lib/components/ui/toggle/index.ts     |  13 +
 .../lib/components/ui/toggle/toggle.svelte    |  51 +++
 .../src/lib/components/ui/tooltip/index.ts    |  19 ++
 .../ui/tooltip/tooltip-content.svelte         |  52 +++
 .../ui/tooltip/tooltip-portal.svelte          |   7 +
 .../ui/tooltip/tooltip-provider.svelte        |   7 +
 .../ui/tooltip/tooltip-trigger.svelte         |   7 +
 .../lib/components/ui/tooltip/tooltip.svelte  |   7 +
 ui-svelte/src/lib/hooks/is-mobile.svelte.ts   |   9 +
 ui-svelte/src/lib/utils.ts                    |  13 +
 ui-svelte/tsconfig.json                       |   7 +-
 ui-svelte/vite.config.ts                      |   6 +
 142 files changed, 3842 insertions(+), 103 deletions(-)
 create mode 100644 ui-svelte/components.json
 create mode 100644 ui-svelte/src/lib/components/ui/badge/badge.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/badge/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/button/button.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/button/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/card/card-action.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/card/card-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/card/card-description.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/card/card-footer.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/card/card-header.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/card/card-title.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/card/card.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/card/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog-close.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog-trigger.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/dialog.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dialog/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/dropdown-menu/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/input/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/input/input.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/label/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/label/label.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/resizable/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/resizable/resizable-handle.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/resizable/resizable-pane-group.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/scroll-area/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/scroll-area/scroll-area.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-group-heading.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-group.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-item.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-label.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-portal.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-scroll-down-button.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-scroll-up-button.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-separator.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select-trigger.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/select/select.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/separator/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/separator/separator.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet-close.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet-description.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet-footer.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet-header.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet-overlay.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet-portal.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet-title.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet-trigger.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sheet/sheet.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/constants.ts
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/context.svelte.ts
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-footer.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-group-action.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-group-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-group-label.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-group.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-header.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-input.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-inset.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-menu.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-provider.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-rail.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-separator.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar-trigger.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/sidebar/sidebar.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/skeleton/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/skeleton/skeleton.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/switch/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/switch/switch.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/table/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/table/table-body.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/table/table-caption.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/table/table-cell.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/table/table-footer.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/table/table-head.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/table/table-header.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/table/table-row.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/table/table.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/tabs/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/tabs/tabs-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/tabs/tabs-list.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/tabs/tabs-trigger.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/tabs/tabs.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/textarea/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/textarea/textarea.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/toggle-group/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/toggle-group/toggle-group-item.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/toggle-group/toggle-group.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/toggle/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/toggle/toggle.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/tooltip/index.ts
 create mode 100644 ui-svelte/src/lib/components/ui/tooltip/tooltip-content.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/tooltip/tooltip-portal.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/tooltip/tooltip-provider.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/tooltip/tooltip-trigger.svelte
 create mode 100644 ui-svelte/src/lib/components/ui/tooltip/tooltip.svelte
 create mode 100644 ui-svelte/src/lib/hooks/is-mobile.svelte.ts
 create mode 100644 ui-svelte/src/lib/utils.ts

diff --git a/ui-svelte/components.json b/ui-svelte/components.json
new file mode 100644
index 00000000..8bc41972
--- /dev/null
+++ b/ui-svelte/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "tailwind": {
+    "css": "src/index.css",
+    "baseColor": "zinc"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils",
+    "ui": "$lib/components/ui",
+    "hooks": "$lib/hooks",
+    "lib": "$lib"
+  },
+  "typescript": true,
+  "registry": "https://shadcn-svelte.com/registry",
+  "iconLibrary": "lucide"
+}
diff --git a/ui-svelte/package-lock.json b/ui-svelte/package-lock.json
index 01fc2229..09fa5323 100644
--- a/ui-svelte/package-lock.json
+++ b/ui-svelte/package-lock.json
@@ -23,14 +23,23 @@
         "unist-util-visit": "^5.1.0"
       },
       "devDependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@lucide/svelte": "^1.21.0",
         "@sveltejs/vite-plugin-svelte": "^7.0.0",
         "@tailwindcss/vite": "^4.1.8",
         "@tsconfig/svelte": "^5.0.4",
         "@types/hast": "^3.0.4",
         "@types/node": "^25.1.0",
+        "bits-ui": "^2.18.1",
+        "clsx": "^2.1.1",
+        "paneforge": "^1.0.2",
+        "shadcn-svelte": "^1.3.0",
         "svelte": "^5.46.4",
         "svelte-check": "^4.1.4",
+        "tailwind-merge": "^3.6.0",
+        "tailwind-variants": "^3.2.2",
         "tailwindcss": "^4.1.8",
+        "tw-animate-css": "^1.4.0",
         "typescript": "~5.8.3",
         "vite": "^8.0.0",
         "vite-plugin-compression2": "^2.5.1",
@@ -71,6 +80,44 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@internationalized/date": {
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.2.tgz",
+      "integrity": "sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -127,6 +174,16 @@
       "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
       "license": "MIT"
     },
+    "node_modules/@lucide/svelte": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.21.0.tgz",
+      "integrity": "sha512-MEv//A7Jv3kHukZowv/DWp1MAtUzJKYwtJsmnQ7X98lCgtac3z3NbaToDl3Q6jO3gS9sougFpcD+t+YuxOkRMw==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^5"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.3.tgz",
@@ -480,6 +537,16 @@
         "vite": "^8.0.0-beta.7 || ^8.0.0"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.1.tgz",
@@ -1053,6 +1120,31 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/bits-ui": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.18.1.tgz",
+      "integrity": "sha512-KkemzKFH4T3gt3H+P86JcnAWExjByv/6vlwjm/BoCwTPHu03yiCdxbghdJLvFReQTe0acCAiRcKfmixxD6XvlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.1",
+        "@floating-ui/dom": "^1.7.1",
+        "esm-env": "^1.1.2",
+        "runed": "^0.35.1",
+        "svelte-toolbelt": "^0.10.6",
+        "tabbable": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/huntabyte"
+      },
+      "peerDependencies": {
+        "@internationalized/date": "^3.8.1",
+        "svelte": "^5.33.0"
+      }
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -1555,6 +1647,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -1890,6 +1989,16 @@
         "svelte": "^3 || ^4 || ^5.0.0-next.42"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -2756,6 +2865,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-fetch-native": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
+      "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/obug": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
@@ -2767,6 +2883,74 @@
       ],
       "license": "MIT"
     },
+    "node_modules/paneforge": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/paneforge/-/paneforge-1.0.2.tgz",
+      "integrity": "sha512-KzmIXQH1wCfwZ4RsMohD/IUtEjVhteR+c+ulb/CHYJHX8SuDXoJmChtsc/Xs5Wl8NHS4L5Q7cxL8MG40gSU1bA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "runed": "^0.23.4",
+        "svelte-toolbelt": "^0.9.2"
+      },
+      "peerDependencies": {
+        "svelte": "^5.29.0"
+      }
+    },
+    "node_modules/paneforge/node_modules/runed": {
+      "version": "0.23.4",
+      "resolved": "https://registry.npmjs.org/runed/-/runed-0.23.4.tgz",
+      "integrity": "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/huntabyte",
+        "https://github.com/sponsors/tglide"
+      ],
+      "dependencies": {
+        "esm-env": "^1.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.7.0"
+      }
+    },
+    "node_modules/paneforge/node_modules/svelte-toolbelt": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.9.3.tgz",
+      "integrity": "sha512-HCSWxCtVmv+c6g1ACb8LTwHVbDqLKJvHpo6J8TaqwUme2hj9ATJCpjCPNISR1OCq2Q4U1KT41if9ON0isINQZw==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/huntabyte"
+      ],
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "runed": "^0.29.0",
+        "style-to-object": "^1.0.8"
+      },
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8.7.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.30.2"
+      }
+    },
+    "node_modules/paneforge/node_modules/svelte-toolbelt/node_modules/runed": {
+      "version": "0.29.2",
+      "resolved": "https://registry.npmjs.org/runed/-/runed-0.29.2.tgz",
+      "integrity": "sha512-0cq6cA6sYGZwl/FvVqjx9YN+1xEBu9sDDyuWdDW1yWX7JF2wmvmVKfH+hVCZs+csW+P3ARH92MjI3H9QTagOQA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/huntabyte",
+        "https://github.com/sponsors/tglide"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "esm-env": "^1.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.7.0"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
@@ -3018,6 +3202,31 @@
         "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.15"
       }
     },
+    "node_modules/runed": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz",
+      "integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/huntabyte",
+        "https://github.com/sponsors/tglide"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "esm-env": "^1.0.0",
+        "lz-string": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@sveltejs/kit": "^2.21.0",
+        "svelte": "^5.7.0"
+      },
+      "peerDependenciesMeta": {
+        "@sveltejs/kit": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -3031,6 +3240,35 @@
         "node": ">=6"
       }
     },
+    "node_modules/shadcn-svelte": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/shadcn-svelte/-/shadcn-svelte-1.3.0.tgz",
+      "integrity": "sha512-Pd4ICWTkTks/b2YU4c9vF2XsX1x5HFPRl5bKszS1LcnWS83x+7T4WiIvbWz8Qh9knkcGZ+SCz1+Dmhdq+AYooA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^14.0.0",
+        "node-fetch-native": "^1.6.4",
+        "postcss": "^8.5.5",
+        "tailwind-merge": "^3.0.0"
+      },
+      "bin": {
+        "shadcn-svelte": "dist/index.mjs"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0"
+      }
+    },
+    "node_modules/shadcn-svelte/node_modules/commander": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
+      "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
@@ -3086,6 +3324,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/svelte": {
       "version": "5.55.7",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.7.tgz",
@@ -3150,6 +3398,65 @@
         "url": "https://github.com/sponsors/ItalyPaleAle"
       }
     },
+    "node_modules/svelte-toolbelt": {
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.10.6.tgz",
+      "integrity": "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/huntabyte"
+      ],
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "runed": "^0.35.1",
+        "style-to-object": "^1.0.8"
+      },
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8.7.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.30.2"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.5.0.tgz",
+      "integrity": "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwind-variants": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-3.2.2.tgz",
+      "integrity": "sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.x",
+        "pnpm": ">=7.x"
+      },
+      "peerDependencies": {
+        "tailwind-merge": ">=3.0.0",
+        "tailwindcss": "*"
+      },
+      "peerDependenciesMeta": {
+        "tailwind-merge": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
@@ -3247,8 +3554,17 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "dev": true,
-      "license": "0BSD",
-      "optional": true
+      "license": "0BSD"
+    },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
     },
     "node_modules/typescript": {
       "version": "5.8.3",
diff --git a/ui-svelte/package.json b/ui-svelte/package.json
index efedc65b..2e73a344 100644
--- a/ui-svelte/package.json
+++ b/ui-svelte/package.json
@@ -12,20 +12,30 @@
     "test:watch": "vitest"
   },
   "devDependencies": {
+    "@internationalized/date": "^3.12.2",
+    "@lucide/svelte": "^1.21.0",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.1.8",
     "@tsconfig/svelte": "^5.0.4",
     "@types/hast": "^3.0.4",
     "@types/node": "^25.1.0",
+    "bits-ui": "^2.18.1",
+    "clsx": "^2.1.1",
+    "paneforge": "^1.0.2",
+    "shadcn-svelte": "^1.3.0",
     "svelte": "^5.46.4",
     "svelte-check": "^4.1.4",
+    "tailwind-merge": "^3.6.0",
+    "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.1.8",
+    "tw-animate-css": "^1.4.0",
     "typescript": "~5.8.3",
     "vite": "^8.0.0",
     "vite-plugin-compression2": "^2.5.1",
     "vitest": "^4.1.0"
   },
   "dependencies": {
+    "chart.js": "4.5.1",
     "highlight.js": "^11.11.1",
     "katex": "^0.16.28",
     "lucide-svelte": "^0.563.0",
@@ -35,7 +45,6 @@
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "chart.js": "4.5.1",
     "svelte-spa-router": "^4.0.1",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.1.0"
diff --git a/ui-svelte/src/App.svelte b/ui-svelte/src/App.svelte
index df2dc1a0..2e0d2620 100644
--- a/ui-svelte/src/App.svelte
+++ b/ui-svelte/src/App.svelte
@@ -27,7 +27,7 @@
   }
 
   $effect(() => {
-    document.documentElement.setAttribute("data-theme", $isDarkMode ? "dark" : "light");
+    document.documentElement.classList.toggle("dark", $isDarkMode);
   });
 
   $effect(() => {
diff --git a/ui-svelte/src/index.css b/ui-svelte/src/index.css
index 1f833519..82ebd7dd 100644
--- a/ui-svelte/src/index.css
+++ b/ui-svelte/src/index.css
@@ -1,100 +1,184 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 @import "katex/dist/katex.min.css";
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
-@theme {
-  --color-background: rgba(252, 252, 249, 1);
-  --color-surface: rgba(255, 255, 253, 1);
+@custom-variant dark (&:is(.dark *));
 
-  /* text colors */
-  --color-txtmain: rgba(19, 52, 59, 1);
-  --color-txtsecondary: rgba(98, 108, 113, 1);
-  --color-navlink-active: rgba(245, 245, 245, 1);
+:root {
+  --radius: 0.625rem;
 
-  --color-primary: rgba(50, 184, 198, 1);
+  /* shadcn base palette (zinc) */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
 
-  --color-primary-hover: rgba(29, 116, 128, 1);
-  --color-primary-active: rgba(26, 104, 115, 1);
-  --color-secondary: rgba(94, 82, 64, 0.12);
-  --color-secondary-hover: rgba(94, 82, 64, 0.2);
-  --color-secondary-active: rgba(94, 82, 64, 0.25);
-  --color-border: rgba(94, 82, 64, 0.3);
-  --color-btn-primary-text: rgba(252, 252, 249, 1);
-  --color-card-border: rgba(94, 82, 64, 0.12);
-  --color-card-border-inner: rgba(94, 82, 64, 0.12);
-  --color-error: rgba(192, 21, 47, 1);
-  --color-success: rgba(33, 128, 141, 1);
-  --color-warning: rgb(244, 155, 0);
-  --color-info: rgba(98, 108, 113, 1);
-  --color-focus-ring: rgba(33, 128, 141, 0.4);
-  --color-select-caret: rgba(19, 52, 59, 0.8);
-  --color-btn-border: rgba(94, 82, 64, 0.7);
+  /* brand accent: llama-swap teal */
+  --primary: rgb(50 184 198);
+  --primary-foreground: oklch(0.985 0 0);
+
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: rgb(50 184 198);
+
+  --chart-1: rgb(50 184 198);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: rgb(50 184 198);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: rgb(50 184 198);
+
+  /* semantic status colors (shared light/dark-aware below) */
+  --success: oklch(0.6 0.118 184.704);
+  --warning: oklch(0.769 0.17 70.08);
+  --info: oklch(0.552 0.016 285.938);
 }
 
-@layer theme {
-  /* over ride theme for dark mode */
-  [data-theme="dark"] {
-    --color-background: rgba(31, 33, 33, 1);
-    --color-surface: rgba(38, 40, 40, 1);
-    /* text colors */
-    --color-txtmain: rgba(245, 245, 245, 1);
-    --color-txtsecondary: rgba(167, 169, 169, 0.7);
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
 
-    --color-navlink-active: rgba(245, 245, 245, 1);
+  /* brand accent: deeper teal for dark surfaces */
+  --primary: rgb(45 166 178);
+  --primary-foreground: oklch(0.141 0.005 285.823);
 
-    --color-primary: rgba(33, 128, 141, 1);
-    --color-primary-hover: rgba(45, 166, 178, 1);
-    --color-primary-active: rgba(41, 150, 161, 1);
-    --color-secondary: rgba(119, 124, 124, 0.15);
-    --color-secondary-hover: rgba(119, 124, 124, 0.25);
-    --color-secondary-active: rgba(119, 124, 124, 0.3);
-    --color-border: rgba(119, 124, 124, 0.3);
-    --color-error: rgba(255, 84, 89, 1);
-    --color-success: rgba(50, 184, 198, 1);
-    --color-warning: rgb(244, 155, 0);
-    --color-info: rgba(167, 169, 169, 1);
-    --color-focus-ring: rgba(50, 184, 198, 0.4);
-    --color-btn-primary-text: rgba(19, 52, 59, 1);
-    --color-card-border: rgba(119, 124, 124, 0.2);
-    --color-card-border-inner: rgba(119, 124, 124, 0.15);
-    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-    --button-border-secondary: rgba(119, 124, 124, 0.2);
-  }
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: rgb(50 184 198);
+
+  --chart-1: rgb(50 184 198);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: rgb(50 184 198);
+  --sidebar-primary-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: rgb(50 184 198);
+
+  --success: oklch(0.696 0.17 162.48);
+  --warning: oklch(0.769 0.17 70.08);
+  --info: oklch(0.705 0.015 286.067);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-error: var(--destructive);
+
+  /* legacy aliases (transitional — removed as views migrate) */
+  --color-surface: var(--card);
+  --color-txtmain: var(--foreground);
+  --color-txtsecondary: var(--muted-foreground);
+  --color-navlink-active: var(--primary-foreground);
+  --color-card-border: var(--border);
+  --color-card-border-inner: var(--border);
+  --color-btn-border: var(--border);
+  --color-btn-primary-text: var(--primary-foreground);
 }
 
 @layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
   body {
-    /* example of how colors using theme colors*/
-    @apply bg-background text-txtmain;
+    @apply bg-background text-foreground;
   }
 
   h1 {
-    @apply text-4xl text-txtmain font-bold pb-4;
+    @apply text-3xl font-bold tracking-tight pb-4;
   }
   h2 {
-    @apply text-3xl text-txtmain font-bold pb-4;
+    @apply text-2xl font-bold tracking-tight pb-4;
   }
   h3 {
-    @apply text-2xl text-txtmain font-bold pb-4;
+    @apply text-xl font-semibold tracking-tight pb-4;
   }
   h4 {
-    @apply text-xl text-txtmain font-bold pb-4;
+    @apply text-lg font-semibold pb-4;
   }
   h5 {
-    @apply text-lg text-txtmain font-bold pb-4;
+    @apply text-base font-semibold pb-4;
   }
   h6 {
-    @apply text-base text-txtmain font-bold pb-4;
+    @apply text-sm font-semibold pb-4;
   }
 }
 
-/* define CSS classes here for specific types of components */
+/* Transitional component classes — kept until all views move to shadcn primitives. */
 @layer components {
-  .container {
-    @apply px-4;
-  }
-
-  /* Tables */
   table th {
     @apply p-2 font-semibold;
   }
@@ -102,77 +186,67 @@
     @apply p-2;
   }
 
-  /* Navigation Header */
-
   .navlink {
-    @apply text-txtsecondary hover:bg-secondary hover:text-txtmain rounded-lg p-2;
+    @apply text-muted-foreground hover:bg-accent hover:text-foreground rounded-lg p-2;
   }
   .navlink.active {
-    @apply bg-primary text-navlink-active;
+    @apply bg-primary text-primary-foreground;
   }
 
-  /* Card component */
   .card {
-    @apply bg-surface rounded-lg border border-card-border shadow-sm overflow-hidden p-4;
+    @apply bg-card text-card-foreground rounded-xl border shadow-sm overflow-hidden p-4;
   }
-
-  .card:hover {
-    @apply shadow-md;
-  }
-
   .card__body {
     @apply p-4;
   }
-
   .card__header,
   .card__footer {
-    @apply p-4 border-b border-card-border-inner;
+    @apply p-4 border-b;
   }
 
-  /* Status Badges */
   .status {
-    @apply inline-block px-2 py-1 text-xs font-medium rounded-lg;
+    @apply inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md;
   }
-
   .status--ready {
     @apply bg-success/10 text-success;
   }
-
   .status--starting,
   .status--stopping,
   .status--queued {
     @apply bg-warning/10 text-warning;
   }
-
   .status--stopped {
-    @apply bg-error/10 text-error;
+    @apply bg-destructive/10 text-destructive;
   }
 
-  /* Buttons */
   .btn {
-    @apply bg-surface py-2 px-4 text-sm rounded-md border transition-colors duration-200 border-btn-border;
+    @apply bg-background py-2 px-4 text-sm rounded-md border transition-colors duration-200;
   }
-
   .btn:hover {
-    cursor: pointer;
+    @apply bg-muted cursor-pointer;
   }
-
   .btn--sm {
     @apply px-2 py-0.5 text-xs;
   }
-
   .btn:disabled {
     @apply opacity-50 cursor-not-allowed;
   }
 }
 
-@layer utilities {
-  .ml-2 {
-    margin-left: 0.5rem;
-  }
+@utility activity-link {
+  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7, #8b5cf6, #6366f1);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient-shift 2s linear infinite;
+}
 
-  .my-8 {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
   }
 }
diff --git a/ui-svelte/src/lib/components/ui/badge/badge.svelte b/ui-svelte/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 00000000..51bbc23e
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/ui-svelte/src/lib/components/ui/badge/index.ts b/ui-svelte/src/lib/components/ui/badge/index.ts
new file mode 100644
index 00000000..64e0aa9b
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
diff --git a/ui-svelte/src/lib/components/ui/button/button.svelte b/ui-svelte/src/lib/components/ui/button/button.svelte
new file mode 100644
index 00000000..89cedcb7
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				icon: "size-8",
+				"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/button/index.ts b/ui-svelte/src/lib/components/ui/button/index.ts
new file mode 100644
index 00000000..fb585d76
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
diff --git a/ui-svelte/src/lib/components/ui/card/card-action.svelte b/ui-svelte/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 00000000..7c48844a
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn(
+		"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/card/card-content.svelte b/ui-svelte/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 00000000..4f60ee3a
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/card/card-description.svelte b/ui-svelte/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 00000000..9b20ac70
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/ui-svelte/src/lib/components/ui/card/card-footer.svelte b/ui-svelte/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 00000000..1efff6d9
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/card/card-header.svelte b/ui-svelte/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 00000000..7eb69e12
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/card/card-title.svelte b/ui-svelte/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 00000000..1523fc52
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/card/card.svelte b/ui-svelte/src/lib/components/ui/card/card.svelte
new file mode 100644
index 00000000..2b4f81af
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	data-size={size}
+	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/card/index.ts b/ui-svelte/src/lib/components/ui/card/index.ts
new file mode 100644
index 00000000..4d3fce48
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction,
+};
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog-close.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 00000000..de68f2f0
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog-content.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 00000000..c0551ee3
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import DialogPortal from "./dialog-portal.svelte";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import XIcon from '@lucide/svelte/icons/x';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+						<XIcon  />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog-description.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 00000000..0102d910
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog-footer.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 00000000..e23160ae
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Button } from "$lib/components/ui/button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		showCloseButton = false,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+	{#if showCloseButton}
+		<DialogPrimitive.Close>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Close</Button>
+			{/snippet}
+		</DialogPrimitive.Close>
+	{/if}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog-header.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 00000000..c3ce8a24
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("gap-2 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog-overlay.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 00000000..19f69f05
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog-portal.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 00000000..ccfa79ca
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog-title.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 00000000..6ff1a4a5
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-base leading-none font-medium", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog-trigger.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 00000000..589ee0c3
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/dialog/dialog.svelte b/ui-svelte/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 00000000..211672c6
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/dialog/index.ts b/ui-svelte/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 00000000..076cef52
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 00000000..e0e19718
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable([]),
+		...restProps
+	}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 00000000..a81b48d0
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-checkbox-item-indicator"
+		>
+			{#if indeterminate}
+				<MinusIcon  />
+			{:else if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 00000000..261a5b08
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		align = "start",
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+	} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 00000000..433540fd
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 00000000..aca1f7bd
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 00000000..c425190d
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		variant = "default",
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+		variant?: "default" | "destructive";
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 00000000..e0c534fe
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 00000000..274cfef7
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 00000000..189aef40
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 00000000..c8aa07b1
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-radio-item-indicator"
+		>
+			{#if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 00000000..90f1b6f1
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 00000000..ed7cc85a
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 00000000..b5750d4d
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 00000000..fab0275d
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 00000000..f0445813
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 00000000..cb053444
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 00000000..cb4bc621
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/dropdown-menu/index.ts b/ui-svelte/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 00000000..7850c6a3
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,54 @@
+import Root from "./dropdown-menu.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+
+export {
+	CheckboxGroup,
+	CheckboxItem,
+	Content,
+	Portal,
+	Root as DropdownMenu,
+	CheckboxGroup as DropdownMenuCheckboxGroup,
+	CheckboxItem as DropdownMenuCheckboxItem,
+	Content as DropdownMenuContent,
+	Portal as DropdownMenuPortal,
+	Group as DropdownMenuGroup,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	RadioGroup as DropdownMenuRadioGroup,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	Shortcut as DropdownMenuShortcut,
+	Sub as DropdownMenuSub,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	Trigger as DropdownMenuTrigger,
+	GroupHeading as DropdownMenuGroupHeading,
+	Group,
+	GroupHeading,
+	Item,
+	Label,
+	RadioGroup,
+	RadioItem,
+	Root,
+	Separator,
+	Shortcut,
+	Sub,
+	SubContent,
+	SubTrigger,
+	Trigger,
+};
diff --git a/ui-svelte/src/lib/components/ui/input/index.ts b/ui-svelte/src/lib/components/ui/input/index.ts
new file mode 100644
index 00000000..f47b6d3f
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/ui-svelte/src/lib/components/ui/input/input.svelte b/ui-svelte/src/lib/components/ui/input/input.svelte
new file mode 100644
index 00000000..fe7db38f
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/label/index.ts b/ui-svelte/src/lib/components/ui/label/index.ts
new file mode 100644
index 00000000..8bfca0b3
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
diff --git a/ui-svelte/src/lib/components/ui/label/label.svelte b/ui-svelte/src/lib/components/ui/label/label.svelte
new file mode 100644
index 00000000..d5e30863
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/resizable/index.ts b/ui-svelte/src/lib/components/ui/resizable/index.ts
new file mode 100644
index 00000000..2e37f114
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/resizable/index.ts
@@ -0,0 +1,13 @@
+import { Pane } from "paneforge";
+import Handle from "./resizable-handle.svelte";
+import PaneGroup from "./resizable-pane-group.svelte";
+
+export {
+	PaneGroup,
+	Pane,
+	Handle,
+	//
+	PaneGroup as ResizablePaneGroup,
+	Pane as ResizablePane,
+	Handle as ResizableHandle,
+};
diff --git a/ui-svelte/src/lib/components/ui/resizable/resizable-handle.svelte b/ui-svelte/src/lib/components/ui/resizable/resizable-handle.svelte
new file mode 100644
index 00000000..4650600a
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import * as ResizablePrimitive from "paneforge";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		withHandle = false,
+		...restProps
+	}: WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
+		withHandle?: boolean;
+	} = $props();
+</script>
+
+<ResizablePrimitive.PaneResizer
+	bind:ref
+	data-slot="resizable-handle"
+	class={cn(
+		"cn-resizable-handle bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90",
+		className
+	)}
+	{...restProps}
+>
+	{#if withHandle}
+		<div class="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0"></div>
+	{/if}
+</ResizablePrimitive.PaneResizer>
diff --git a/ui-svelte/src/lib/components/ui/resizable/resizable-pane-group.svelte b/ui-svelte/src/lib/components/ui/resizable/resizable-pane-group.svelte
new file mode 100644
index 00000000..4b1801da
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/resizable/resizable-pane-group.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import * as ResizablePrimitive from "paneforge";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		this: paneGroup = $bindable(),
+		class: className,
+		...restProps
+	}: ResizablePrimitive.PaneGroupProps & {
+		this?: ResizablePrimitive.PaneGroup;
+	} = $props();
+</script>
+
+<ResizablePrimitive.PaneGroup
+	bind:ref
+	bind:this={paneGroup}
+	data-slot="resizable-pane-group"
+	class={cn(
+		"cn-resizable-panel-group flex h-full w-full data-[direction=vertical]:flex-col",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/scroll-area/index.ts b/ui-svelte/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 00000000..e86a25b2
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/ui-svelte/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/ui-svelte/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 00000000..b9518f36
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
+	{orientation}
+	class={cn(
+		"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		data-slot="scroll-area-thumb"
+		class="rounded-full bg-border relative flex-1"
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/ui-svelte/src/lib/components/ui/scroll-area/scroll-area.svelte b/ui-svelte/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 00000000..d4d96d0f
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		viewportRef = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn("relative", className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
+		data-slot="scroll-area-viewport"
+		class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/ui-svelte/src/lib/components/ui/select/index.ts b/ui-svelte/src/lib/components/ui/select/index.ts
new file mode 100644
index 00000000..4dec358b
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import Root from "./select.svelte";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+import Portal from "./select-portal.svelte";
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	Portal,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+	Portal as SelectPortal,
+};
diff --git a/ui-svelte/src/lib/components/ui/select/select-content.svelte b/ui-svelte/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 00000000..bb1e2ac2
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectPortal from "./select-portal.svelte";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		preventScroll = true,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+	} = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPortal>
diff --git a/ui-svelte/src/lib/components/ui/select/select-group-heading.svelte b/ui-svelte/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 00000000..1fab5f00
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/ui-svelte/src/lib/components/ui/select/select-group.svelte b/ui-svelte/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 00000000..f666cb22
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group
+	bind:ref
+	data-slot="select-group"
+	class={cn("scroll-my-1 p-1", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/select/select-item.svelte b/ui-svelte/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 00000000..e4a53d29
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="cn-select-item-indicator-icon" />
+			{/if}
+		</span>
+		<span class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+			{#if childrenProp}
+				{@render childrenProp({ selected, highlighted })}
+			{:else}
+				{label || value}
+			{/if}
+		</span>
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/ui-svelte/src/lib/components/ui/select/select-label.svelte b/ui-svelte/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 00000000..69bcfdfe
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/select/select-portal.svelte b/ui-svelte/src/lib/components/ui/select/select-portal.svelte
new file mode 100644
index 00000000..424bcddc
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/select/select-scroll-down-button.svelte b/ui-svelte/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 00000000..94f41cdd
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
+	{...restProps}
+>
+	<ChevronDownIcon  />
+</SelectPrimitive.ScrollDownButton>
diff --git a/ui-svelte/src/lib/components/ui/select/select-scroll-up-button.svelte b/ui-svelte/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 00000000..035ea094
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
+	{...restProps}
+>
+	<ChevronUpIcon  />
+</SelectPrimitive.ScrollUpButton>
diff --git a/ui-svelte/src/lib/components/ui/select/select-separator.svelte b/ui-svelte/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 00000000..3b24bab6
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/select/select-trigger.svelte b/ui-svelte/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 00000000..03d06d0f
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
+</SelectPrimitive.Trigger>
diff --git a/ui-svelte/src/lib/components/ui/select/select.svelte b/ui-svelte/src/lib/components/ui/select/select.svelte
new file mode 100644
index 00000000..05eb6634
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/select/select.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		...restProps
+	}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/separator/index.ts b/ui-svelte/src/lib/components/ui/separator/index.ts
new file mode 100644
index 00000000..82442d2c
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
diff --git a/ui-svelte/src/lib/components/ui/separator/separator.svelte b/ui-svelte/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 00000000..5fd8a429
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		"data-slot": dataSlot = "separator",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={cn(
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		// this is different in shadcn/ui but self-stretch breaks things for us
+		"data-[orientation=vertical]:h-full",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/sheet/index.ts b/ui-svelte/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 00000000..28d7da1c
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,34 @@
+import Root from "./sheet.svelte";
+import Portal from "./sheet-portal.svelte";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet-close.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet-close.svelte
new file mode 100644
index 00000000..ae382c12
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet-content.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 00000000..20957dcc
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	export type Side = "top" | "right" | "bottom" | "left";
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import SheetPortal from "./sheet-portal.svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import XIcon from '@lucide/svelte/icons/x';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		showCloseButton = true,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+		side?: Side;
+		showCloseButton?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		data-side={side}
+		class={cn(
+			"bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<SheetPrimitive.Close data-slot="sheet-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-3 right-3" size="icon-sm" {...props}>
+						<XIcon  />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</SheetPrimitive.Close>
+		{/if}
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet-description.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 00000000..333b17a7
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet-footer.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 00000000..ad9e07bb
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet-header.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 00000000..504465f9
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn("gap-0.5 p-4 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet-overlay.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 00000000..8d338474
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn("bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet-portal.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 00000000..f3085a3c
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ...restProps }: SheetPrimitive.PortalProps = $props();
+</script>
+
+<SheetPrimitive.Portal {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet-title.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 00000000..10c17178
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn("text-foreground text-base font-medium", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet-trigger.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 00000000..e266975f
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/sheet/sheet.svelte b/ui-svelte/src/lib/components/ui/sheet/sheet.svelte
new file mode 100644
index 00000000..5bf97839
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sheet/sheet.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/sidebar/constants.ts b/ui-svelte/src/lib/components/ui/sidebar/constants.ts
new file mode 100644
index 00000000..1347e83c
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/constants.ts
@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
diff --git a/ui-svelte/src/lib/components/ui/sidebar/context.svelte.ts b/ui-svelte/src/lib/components/ui/sidebar/context.svelte.ts
new file mode 100644
index 00000000..15248ada
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/context.svelte.ts
@@ -0,0 +1,81 @@
+import { IsMobile } from "$lib/hooks/is-mobile.svelte.js";
+import { getContext, setContext } from "svelte";
+import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+
+type Getter<T> = () => T;
+
+export type SidebarStateProps = {
+	/**
+	 * A getter function that returns the current open state of the sidebar.
+	 * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
+	 * component.
+	 */
+	open: Getter<boolean>;
+
+	/**
+	 * A function that sets the open state of the sidebar. To support `bind:open`, we need
+	 * a source of truth for changing the open state to ensure it will be synced throughout
+	 * the sub-components and any `bind:` references.
+	 */
+	setOpen: (open: boolean) => void;
+};
+
+class SidebarState {
+	readonly props: SidebarStateProps;
+	open = $derived.by(() => this.props.open());
+	openMobile = $state(false);
+	setOpen: SidebarStateProps["setOpen"];
+	#isMobile: IsMobile;
+	state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+
+	constructor(props: SidebarStateProps) {
+		this.setOpen = props.setOpen;
+		this.#isMobile = new IsMobile();
+		this.props = props;
+	}
+
+	// Convenience getter for checking if the sidebar is mobile
+	// without this, we would need to use `sidebar.isMobile.current` everywhere
+	get isMobile() {
+		return this.#isMobile.current;
+	}
+
+	// Event handler to apply to the `<svelte:window>`
+	handleShortcutKeydown = (e: KeyboardEvent) => {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			this.toggle();
+		}
+	};
+
+	setOpenMobile = (value: boolean) => {
+		this.openMobile = value;
+	};
+
+	toggle = () => {
+		return this.#isMobile.current
+			? (this.openMobile = !this.openMobile)
+			: this.setOpen(!this.open);
+	};
+}
+
+const SYMBOL_KEY = "scn-sidebar";
+
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export function setSidebar(props: SidebarStateProps): SidebarState {
+	return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export function useSidebar(): SidebarState {
+	return getContext(Symbol.for(SYMBOL_KEY));
+}
diff --git a/ui-svelte/src/lib/components/ui/sidebar/index.ts b/ui-svelte/src/lib/components/ui/sidebar/index.ts
new file mode 100644
index 00000000..318a3417
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/index.ts
@@ -0,0 +1,75 @@
+import { useSidebar } from "./context.svelte.js";
+import Content from "./sidebar-content.svelte";
+import Footer from "./sidebar-footer.svelte";
+import GroupAction from "./sidebar-group-action.svelte";
+import GroupContent from "./sidebar-group-content.svelte";
+import GroupLabel from "./sidebar-group-label.svelte";
+import Group from "./sidebar-group.svelte";
+import Header from "./sidebar-header.svelte";
+import Input from "./sidebar-input.svelte";
+import Inset from "./sidebar-inset.svelte";
+import MenuAction from "./sidebar-menu-action.svelte";
+import MenuBadge from "./sidebar-menu-badge.svelte";
+import MenuButton from "./sidebar-menu-button.svelte";
+import MenuItem from "./sidebar-menu-item.svelte";
+import MenuSkeleton from "./sidebar-menu-skeleton.svelte";
+import MenuSubButton from "./sidebar-menu-sub-button.svelte";
+import MenuSubItem from "./sidebar-menu-sub-item.svelte";
+import MenuSub from "./sidebar-menu-sub.svelte";
+import Menu from "./sidebar-menu.svelte";
+import Provider from "./sidebar-provider.svelte";
+import Rail from "./sidebar-rail.svelte";
+import Separator from "./sidebar-separator.svelte";
+import Trigger from "./sidebar-trigger.svelte";
+import Root from "./sidebar.svelte";
+
+export {
+	Content,
+	Footer,
+	Group,
+	GroupAction,
+	GroupContent,
+	GroupLabel,
+	Header,
+	Input,
+	Inset,
+	Menu,
+	MenuAction,
+	MenuBadge,
+	MenuButton,
+	MenuItem,
+	MenuSkeleton,
+	MenuSub,
+	MenuSubButton,
+	MenuSubItem,
+	Provider,
+	Rail,
+	Root,
+	Separator,
+	//
+	Root as Sidebar,
+	Content as SidebarContent,
+	Footer as SidebarFooter,
+	Group as SidebarGroup,
+	GroupAction as SidebarGroupAction,
+	GroupContent as SidebarGroupContent,
+	GroupLabel as SidebarGroupLabel,
+	Header as SidebarHeader,
+	Input as SidebarInput,
+	Inset as SidebarInset,
+	Menu as SidebarMenu,
+	MenuAction as SidebarMenuAction,
+	MenuBadge as SidebarMenuBadge,
+	MenuButton as SidebarMenuButton,
+	MenuItem as SidebarMenuItem,
+	MenuSkeleton as SidebarMenuSkeleton,
+	MenuSub as SidebarMenuSub,
+	MenuSubButton as SidebarMenuSubButton,
+	MenuSubItem as SidebarMenuSubItem,
+	Provider as SidebarProvider,
+	Rail as SidebarRail,
+	Separator as SidebarSeparator,
+	Trigger as SidebarTrigger,
+	Trigger,
+	useSidebar,
+};
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-content.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-content.svelte
new file mode 100644
index 00000000..2a8d7ea0
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-content"
+	data-sidebar="content"
+	class={cn(
+		"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-footer.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-footer.svelte
new file mode 100644
index 00000000..496c6c0b
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-footer"
+	data-sidebar="footer"
+	class={cn("gap-2 p-2 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-group-action.svelte
new file mode 100644
index 00000000..1d07b978
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+			className
+		),
+		"data-slot": "sidebar-group-action",
+		"data-sidebar": "group-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-group-content.svelte
new file mode 100644
index 00000000..7835b0e3
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-content"
+	data-sidebar="group-content"
+	class={cn("text-sm w-full", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-group-label.svelte
new file mode 100644
index 00000000..518216c2
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
+			className
+		),
+		"data-slot": "sidebar-group-label",
+		"data-sidebar": "group-label",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-group.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-group.svelte
new file mode 100644
index 00000000..b5880d7c
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group"
+	data-sidebar="group"
+	class={cn("p-2 relative flex w-full min-w-0 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-header.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-header.svelte
new file mode 100644
index 00000000..b54754ac
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-header"
+	data-sidebar="header"
+	class={cn("gap-2 p-2 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-input.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-input.svelte
new file mode 100644
index 00000000..19b36660
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-input.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	bind:value
+	data-slot="sidebar-input"
+	data-sidebar="input"
+	class={cn("bg-background h-8 w-full shadow-none", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-inset.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-inset.svelte
new file mode 100644
index 00000000..19a787cb
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<main
+	bind:this={ref}
+	data-slot="sidebar-inset"
+	class={cn("bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</main>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
new file mode 100644
index 00000000..26c81ed6
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showOnHover = false,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		showOnHover?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+			showOnHover &&
+				"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
+			className
+		),
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
new file mode 100644
index 00000000..6cecdb41
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-badge"
+	data-sidebar="menu-badge"
+	class={cn(
+		"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
new file mode 100644
index 00000000..e0c9c25e
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,102 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const sidebarMenuButtonVariants = tv({
+		base: "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type SidebarMenuButtonVariant = VariantProps<
+		typeof sidebarMenuButtonVariants
+	>["variant"];
+	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+</script>
+
+<script lang="ts">
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { mergeProps } from "bits-ui";
+	import type { ComponentProps, Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		variant = "default",
+		size = "default",
+		isActive = false,
+		tooltipContent,
+		tooltipContentProps,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+		isActive?: boolean;
+		variant?: SidebarMenuButtonVariant;
+		size?: SidebarMenuButtonSize;
+		tooltipContent?: Snippet | string;
+		tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const sidebar = useSidebar();
+
+	const buttonProps = $derived({
+		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+		"data-slot": "sidebar-menu-button",
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+	{@const mergedProps = mergeProps(buttonProps, props)}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<button bind:this={ref} {...mergedProps}>
+			{@render children?.()}
+		</button>
+	{/if}
+{/snippet}
+
+{#if !tooltipContent}
+	{@render Button({})}
+{:else}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props })}
+				{@render Button({ props })}
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content
+			side="right"
+			align="center"
+			hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
+			{...tooltipContentProps}
+		>
+			{#if typeof tooltipContent === "string"}
+				{tooltipContent}
+			{:else if tooltipContent}
+				{@render tooltipContent()}
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Root>
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-item.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
new file mode 100644
index 00000000..4db44532
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-item"
+	data-sidebar="menu-item"
+	class={cn("group/menu-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
new file mode 100644
index 00000000..1e1249bf
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import { Skeleton } from "$lib/components/ui/skeleton/index.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showIcon = false,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		showIcon?: boolean;
+	} = $props();
+
+	// Random width between 50% and 90%
+	const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-skeleton"
+	data-sidebar="menu-skeleton"
+	class={cn("h-8 gap-2 rounded-md px-2 flex items-center", className)}
+	{...restProps}
+>
+	{#if showIcon}
+		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+	{/if}
+	<Skeleton
+		class="h-4 max-w-(--skeleton-width) flex-1"
+		data-sidebar="menu-skeleton-text"
+		style="--skeleton-width: {width};"
+	/>
+	{@render children?.()}
+</div>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
new file mode 100644
index 00000000..09ff228f
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		size = "md",
+		isActive = false,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+			className
+		),
+		"data-slot": "sidebar-menu-sub-button",
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
new file mode 100644
index 00000000..681d0f1d
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-sub-item"
+	data-sidebar="menu-sub-item"
+	class={cn("group/menu-sub-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
new file mode 100644
index 00000000..29614ee1
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu-sub"
+	data-sidebar="menu-sub"
+	class={cn("border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu.svelte
new file mode 100644
index 00000000..a8cdefd7
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu"
+	data-sidebar="menu"
+	class={cn("gap-0 flex w-full min-w-0 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-provider.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-provider.svelte
new file mode 100644
index 00000000..5b0d0aa2
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import {
+		SIDEBAR_COOKIE_MAX_AGE,
+		SIDEBAR_COOKIE_NAME,
+		SIDEBAR_WIDTH,
+		SIDEBAR_WIDTH_ICON,
+	} from "./constants.js";
+	import { setSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(true),
+		onOpenChange = () => {},
+		class: className,
+		style,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	} = $props();
+
+	const sidebar = setSidebar({
+		open: () => open,
+		setOpen: (value: boolean) => {
+			open = value;
+			onOpenChange(value);
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+	});
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<Tooltip.Provider delayDuration={0}>
+	<div
+		data-slot="sidebar-wrapper"
+		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+		class={cn(
+			"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</Tooltip.Provider>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-rail.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-rail.svelte
new file mode 100644
index 00000000..f65c8698
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="rail"
+	data-slot="sidebar-rail"
+	aria-label="Toggle Sidebar"
+	tabindex={-1}
+	onclick={sidebar.toggle}
+	title="Toggle Sidebar"
+	class={cn(
+		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-separator.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-separator.svelte
new file mode 100644
index 00000000..18d791bd
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-separator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="sidebar-separator"
+	data-sidebar="separator"
+	class={cn("bg-sidebar-border mx-2 w-auto", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar-trigger.svelte
new file mode 100644
index 00000000..dd2dc503
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button/index.js";
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		onclick,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		onclick?: (e: MouseEvent) => void;
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Button
+	bind:ref
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	variant="ghost"
+	size="icon-sm"
+	class={cn("cn-sidebar-trigger", className)}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	{...restProps}
+>
+	<PanelLeftIcon  />
+	<span class="sr-only">Toggle Sidebar</span>
+</Button>
diff --git a/ui-svelte/src/lib/components/ui/sidebar/sidebar.svelte b/ui-svelte/src/lib/components/ui/sidebar/sidebar.svelte
new file mode 100644
index 00000000..9c90d4f8
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/sidebar/sidebar.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import * as Sheet from "$lib/components/ui/sheet/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		side = "left",
+		variant = "sidebar",
+		collapsible = "offcanvas",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+{#if collapsible === "none"}
+	<div
+		class={cn(
+			"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{:else if sidebar.isMobile}
+	<Sheet.Root
+		bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)}
+		{...restProps}
+	>
+		<Sheet.Content
+			bind:ref
+			data-sidebar="sidebar"
+			data-slot="sidebar"
+			data-mobile="true"
+			class={cn(
+				"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+				className
+			)}
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			{side}
+		>
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>Sidebar</Sheet.Title>
+				<Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+			</Sheet.Header>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+{:else}
+	<div
+		bind:this={ref}
+		class="text-sidebar-foreground group peer hidden md:block"
+		data-state={sidebar.state}
+		data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
+		data-variant={variant}
+		data-side={side}
+		data-slot="sidebar"
+	>
+		<!-- This is what handles the sidebar gap on desktop -->
+		<div
+			data-slot="sidebar-gap"
+			class={cn(
+				"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
+				"group-data-[collapsible=offcanvas]:w-0",
+				"group-data-[side=right]:rotate-180",
+				variant === "floating" || variant === "inset"
+					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+			)}
+		></div>
+		<div
+			data-slot="sidebar-container"
+			class={cn(
+				"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+				side === "left"
+					? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]"
+					: "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]",
+				// Adjust the padding for floating and inset variants.
+				variant === "floating" || variant === "inset"
+					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s",
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				data-slot="sidebar-inner"
+				class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/skeleton/index.ts b/ui-svelte/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 00000000..186db219
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};
diff --git a/ui-svelte/src/lib/components/ui/skeleton/skeleton.svelte b/ui-svelte/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 00000000..1a940eee
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("bg-muted rounded-md animate-pulse", className)}
+	{...restProps}
+></div>
diff --git a/ui-svelte/src/lib/components/ui/switch/index.ts b/ui-svelte/src/lib/components/ui/switch/index.ts
new file mode 100644
index 00000000..f5533db7
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};
diff --git a/ui-svelte/src/lib/components/ui/switch/switch.svelte b/ui-svelte/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 00000000..6aa57d5b
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		size = "default",
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	data-size={size}
+	class={cn(
+		"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform rtl:data-[state=checked]:translate-x-[calc(-100%)]"
+	/>
+</SwitchPrimitive.Root>
diff --git a/ui-svelte/src/lib/components/ui/table/index.ts b/ui-svelte/src/lib/components/ui/table/index.ts
new file mode 100644
index 00000000..14695c81
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};
diff --git a/ui-svelte/src/lib/components/ui/table/table-body.svelte b/ui-svelte/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 00000000..935feae7
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
+</tbody>
diff --git a/ui-svelte/src/lib/components/ui/table/table-caption.svelte b/ui-svelte/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 00000000..4696cff5
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
diff --git a/ui-svelte/src/lib/components/ui/table/table-cell.svelte b/ui-svelte/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 00000000..a998bf68
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</td>
diff --git a/ui-svelte/src/lib/components/ui/table/table-footer.svelte b/ui-svelte/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 00000000..b9b14ebf
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
diff --git a/ui-svelte/src/lib/components/ui/table/table-head.svelte b/ui-svelte/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 00000000..267c4e08
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</th>
diff --git a/ui-svelte/src/lib/components/ui/table/table-header.svelte b/ui-svelte/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 00000000..f47d2597
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
diff --git a/ui-svelte/src/lib/components/ui/table/table-row.svelte b/ui-svelte/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 00000000..90b4e2a2
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)} {...restProps}>
+	{@render children?.()}
+</tr>
diff --git a/ui-svelte/src/lib/components/ui/table/table.svelte b/ui-svelte/src/lib/components/ui/table/table.svelte
new file mode 100644
index 00000000..d95a02ea
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table bind:this={ref} data-slot="table" class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
+		{@render children?.()}
+	</table>
+</div>
diff --git a/ui-svelte/src/lib/components/ui/tabs/index.ts b/ui-svelte/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 00000000..31267e58
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,18 @@
+import Root from "./tabs.svelte";
+import Content from "./tabs-content.svelte";
+import List, { tabsListVariants, type TabsListVariant } from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	tabsListVariants,
+	type TabsListVariant,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};
diff --git a/ui-svelte/src/lib/components/ui/tabs/tabs-content.svelte b/ui-svelte/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 00000000..394ab3e8
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn("text-sm flex-1 outline-none", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/tabs/tabs-list.svelte b/ui-svelte/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 00000000..18dce00a
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const tabsListVariants = tv({
+		base: "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+		variants: {
+			variant: {
+				default: "cn-tabs-list-variant-default bg-muted",
+				line: "cn-tabs-list-variant-line gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		variant = "default",
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps & {
+		variant?: TabsListVariant;
+	} = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	data-variant={variant}
+	class={cn(tabsListVariants({ variant }), className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/tabs/tabs-trigger.svelte b/ui-svelte/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 00000000..8a0be4ae
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+		"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+		"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/tabs/tabs.svelte b/ui-svelte/src/lib/components/ui/tabs/tabs.svelte
new file mode 100644
index 00000000..bfb900db
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tabs/tabs.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/textarea/index.ts b/ui-svelte/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 00000000..ace797a8
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+	Root,
+	//
+	Root as Textarea,
+};
diff --git a/ui-svelte/src/lib/components/ui/textarea/textarea.svelte b/ui-svelte/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 00000000..2e779ff6
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "textarea",
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/ui-svelte/src/lib/components/ui/toggle-group/index.ts b/ui-svelte/src/lib/components/ui/toggle-group/index.ts
new file mode 100644
index 00000000..12b14b96
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/toggle-group/index.ts
@@ -0,0 +1,10 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem,
+};
diff --git a/ui-svelte/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/ui-svelte/src/lib/components/ui/toggle-group/toggle-group-item.svelte
new file mode 100644
index 00000000..f685ae31
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from "$lib/utils.js";
+	import { type ToggleVariants, toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	data-slot="toggle-group-item"
+	data-variant={ctx.variant || variant}
+	data-size={ctx.size || size}
+	data-spacing={ctx.spacing}
+	class={cn(
+		"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		className
+	)}
+	{value}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/toggle-group/toggle-group.svelte b/ui-svelte/src/lib/components/ui/toggle-group/toggle-group.svelte
new file mode 100644
index 00000000..98b062bb
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -0,0 +1,75 @@
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+	import type { VariantProps } from "tailwind-variants";
+	import { toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+		orientation?: "horizontal" | "vertical";
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
+		setContext("toggleGroup", props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<Required<ToggleGroupContext>>("toggleGroup");
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		spacing = 0,
+		orientation = "horizontal",
+		variant = "default",
+		...restProps
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: "horizontal" | "vertical";
+		} = $props();
+
+	setToggleGroupCtx({
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		},
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	{orientation}
+	data-slot="toggle-group"
+	data-variant={variant}
+	data-size={size}
+	data-spacing={spacing}
+	style={`--gap: ${spacing}`}
+	class={cn(
+		"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/toggle/index.ts b/ui-svelte/src/lib/components/ui/toggle/index.ts
new file mode 100644
index 00000000..8cb2936f
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/toggle/index.ts
@@ -0,0 +1,13 @@
+import Root from "./toggle.svelte";
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants,
+} from "./toggle.svelte";
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};
diff --git a/ui-svelte/src/lib/components/ui/toggle/toggle.svelte b/ui-svelte/src/lib/components/ui/toggle/toggle.svelte
new file mode 100644
index 00000000..8e50317e
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/toggle/toggle.svelte
@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline: "border-input hover:bg-muted border bg-transparent",
+			},
+			size: {
+				default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>
diff --git a/ui-svelte/src/lib/components/ui/tooltip/index.ts b/ui-svelte/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 00000000..17186042
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Portal from "./tooltip-portal.svelte";
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};
diff --git a/ui-svelte/src/lib/components/ui/tooltip/tooltip-content.svelte b/ui-svelte/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 00000000..0cf06949
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import TooltipPortal from "./tooltip-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
+						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%-3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>
diff --git a/ui-svelte/src/lib/components/ui/tooltip/tooltip-portal.svelte b/ui-svelte/src/lib/components/ui/tooltip/tooltip-portal.svelte
new file mode 100644
index 00000000..d234f7d7
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tooltip/tooltip-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/tooltip/tooltip-provider.svelte b/ui-svelte/src/lib/components/ui/tooltip/tooltip-provider.svelte
new file mode 100644
index 00000000..6dba9a67
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/ui-svelte/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 00000000..c4b21fc7
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps<T> = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/ui-svelte/src/lib/components/ui/tooltip/tooltip.svelte b/ui-svelte/src/lib/components/ui/tooltip/tooltip.svelte
new file mode 100644
index 00000000..03c9a3d9
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/tooltip/tooltip.svelte
@@ -0,0 +1,7 @@
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps<T> = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />
diff --git a/ui-svelte/src/lib/hooks/is-mobile.svelte.ts b/ui-svelte/src/lib/hooks/is-mobile.svelte.ts
new file mode 100644
index 00000000..4829c00b
--- /dev/null
+++ b/ui-svelte/src/lib/hooks/is-mobile.svelte.ts
@@ -0,0 +1,9 @@
+import { MediaQuery } from "svelte/reactivity";
+
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+
+export class IsMobile extends MediaQuery {
+	constructor(breakpoint: number = DEFAULT_MOBILE_BREAKPOINT) {
+		super(`max-width: ${breakpoint - 1}px`);
+	}
+}
diff --git a/ui-svelte/src/lib/utils.ts b/ui-svelte/src/lib/utils.ts
new file mode 100644
index 00000000..55b3a918
--- /dev/null
+++ b/ui-svelte/src/lib/utils.ts
@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
diff --git a/ui-svelte/tsconfig.json b/ui-svelte/tsconfig.json
index 80fb577b..0d590bbf 100644
--- a/ui-svelte/tsconfig.json
+++ b/ui-svelte/tsconfig.json
@@ -14,7 +14,12 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.svelte"]
 }
diff --git a/ui-svelte/vite.config.ts b/ui-svelte/vite.config.ts
index e2ac6b36..adc03eea 100644
--- a/ui-svelte/vite.config.ts
+++ b/ui-svelte/vite.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import tailwindcss from "@tailwindcss/vite";
 import { compression } from "vite-plugin-compression2";
+import path from "node:path";
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -21,6 +22,11 @@ export default defineConfig({
     }),
   ],
   base: "/ui/",
+  resolve: {
+    alias: {
+      $lib: path.resolve(__dirname, "./src/lib"),
+    },
+  },
   build: {
     outDir: "../internal/server/ui_dist",
     assetsDir: "assets",