commit 610fa90bec4db45a1409a722bee2aa523ff94cab
Author: h <h@kotikot.com>
Date:   Tue Sep 22 02:24:49 2026 +0200

    feat: init

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6cf0b52
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+static/r
+.DS_Store
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..9573023
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..4d8f24c
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2026 h
+Copyright (c) 2026 cladd-ui (design tokens, surface system and component styling
+ported from https://github.com/cladd-ui/cladd)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1abe036
--- /dev/null
+++ b/README.md
@@ -0,0 +1,72 @@
+# claddcn-svelte
+
+The [cladd.io](https://cladd.io) skin for shadcn-svelte.
+
+## Install into a project
+
+```bash
+# in the root of a shadcn-svelte project
+npx git+https://git.kotikot.com/lib/claddcn-svelte.git init --strip-vars
+# or
+bunx git+https://git.kotikot.com/lib/claddcn-svelte.git init --strip-vars
+```
+
+`init`:
+
+1. copies `claddcn.css` next to your Tailwind entry and `@import`s it;
+2. `--strip-vars` removes your old `:root` / `.dark` / `@theme inline` token blocks
+   (claddcn defines every shadcn token, and blocks after the import would win);
+3. overwrites `$lib/components/ui/*` with the cladd versions and backs up the old
+   files to `.claddcn-backup/<timestamp>/`;
+4. extends `cn()` so tailwind-merge understands `text-cladd-xs`, `h-cladd-md`, etc.;
+5. installs `@fontsource-variable/geist` and `geist-mono`, using bun, pnpm, yarn or npm.
+
+Flags: `--css <file>` (if components.json points at the wrong CSS), `--only button,card`, `--no-install`, `--dry`.
+
+As a shadcn-svelte registry: `npx shadcn-svelte registry build` → serve `static/r`
+→ `npx shadcn-svelte add https://…/r/button.json`.
+
+## What you get
+
+| shadcn-svelte                 | cladd equivalent                                         |
+| ----------------------------- | -------------------------------------------------------- |
+| `Button` `default`            | brand-tinted gradient surface (the “Get started” button) |
+| `outline` / `secondary`       | neutral raised gradient, with or without outline         |
+| `ghost`                       | transparent, rises to the next surface level on hover    |
+| `destructive`                 | red-tinted surface                                       |
+| `fill` (new)                  | solid accent gradient fill                               |
+| `color="green"` (new)         | any of the 11 cladd accents on Button / Badge            |
+| `rounded` (new)               | pill shape                                               |
+| `Input`, `Textarea`           | recessed “cut” well, focus ring floating 4px off         |
+| `Checkbox`                    | round thumb, brand fill when checked                     |
+| `Switch`                      | cladd switch with the × → ✓ indicator                    |
+| `Tabs`                        | toolbar pill with raised active segment                  |
+| `Select`, menus               | 24px-radius popover, pill rows, spring scale-in          |
+| `Dialog`, `Sheet`             | 24px panels, spring pop-in, floating sheet               |
+| `Tooltip`                     | small raised surface, no arrow                           |
+| `Surface`, `SurfaceCut` (new) | the cladd primitives, auto-nesting depth                 |
+
+### Utility classes for hand-written markup
+
+`cladd-surface` (+ `cladd-gradient`, `cladd-fill`, `cladd-gradient-fill`, `cladd-outline`),
+`cladd-cut`, `cladd-ghost`, `cladd-hoverable`, `cladd-clickable`, `cladd-focusable`,
+`cladd-segment` (active via `aria-current="page"` / `data-state="active"`),
+`cladd-section-title`, `cladd-color-{neutral,brand,red,pink,purple,blue,cyan,lime,green,yellow,orange}`,
+`cladd-level-{1..5}`.
+
+Tailwind tokens: `bg-cladd-surface`, `bg-cladd-surface-next`, `text-cladd-fg-soft`,
+`text-cladd-primary`, `h-cladd-md`, `rounded-cladd-md`, `rounded-cladd-panel`,
+`shadow-cladd-outline`, `text-cladd-xs`, …
+
+Nested `.cladd-surface` elements step one level deeper automatically (1–5). cladd does
+this with React context. Here it comes from selector depth, so it also works in plain markup.
+
+## Requirements
+
+Tailwind CSS v4, bits-ui v2, tailwind-merge v3, and browsers with relative color
+syntax (`oklch(from …)`): Chrome 119+, Safari 18+, Firefox 128+.
+
+## License
+
+MIT. Design tokens, surface math and component styling are ported from
+[cladd](https://github.com/cladd-ui/cladd) (MIT, © 2026 cladd-ui).
diff --git a/bin/claddcn.mjs b/bin/claddcn.mjs
new file mode 100755
index 0000000..ebf23ca
--- /dev/null
+++ b/bin/claddcn.mjs
@@ -0,0 +1,211 @@
+#!/usr/bin/env node
+// claddcn — puts the cladd.io look onto an existing shadcn-svelte project.
+//
+//   npx claddcn init [--cwd <dir>] [--css <file>] [--only button,card] [--strip-vars] [--no-install] [--dry]
+//
+// What `init` does, in order:
+//   1. copies claddcn.css next to the Tailwind entry named in components.json
+//      and imports it right after the other top-level @imports;
+//   2. with --strip-vars, removes the old :root / .dark / @theme inline token
+//      blocks from that file (claddcn ships its own, and later ones would win);
+//   3. overwrites ui components with the cladd versions (same names, same API),
+//      backing up whatever it replaces into .claddcn-backup/<timestamp>/;
+//   4. teaches `cn()` the cladd scale so tailwind-merge doesn't drop classes;
+//   5. adds the Geist / Geist Mono fonts with the project's package manager.
+
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const REGISTRY_UI = path.join(ROOT, 'registry', 'ui');
+const THEME_CSS = path.join(ROOT, 'src', 'claddcn.css');
+const UTILS_TS = path.join(ROOT, 'registry', 'lib', 'utils.ts');
+
+const args = process.argv.slice(2);
+const command = args[0];
+const flag = (name) => args.includes(`--${name}`);
+const option = (name) => {
+	const i = args.indexOf(`--${name}`);
+	return i >= 0 ? args[i + 1] : undefined;
+};
+
+const cwd = path.resolve(option('cwd') ?? process.cwd());
+const dry = flag('dry');
+const log = (msg) => console.log(`claddcn  ${msg}`);
+
+function write(file, content) {
+	if (dry) return log(`[dry] write ${path.relative(cwd, file)}`);
+	fs.mkdirSync(path.dirname(file), { recursive: true });
+	fs.writeFileSync(file, content);
+}
+
+function copyDir(src, dest) {
+	for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+		const from = path.join(src, entry.name);
+		const to = path.join(dest, entry.name);
+		if (entry.isDirectory()) copyDir(from, to);
+		else write(to, fs.readFileSync(from));
+	}
+}
+
+function resolveAlias(alias, config) {
+	const lib = config.aliases?.lib ?? '$lib';
+	if (alias.startsWith('$lib')) return path.join(cwd, 'src', 'lib', alias.slice('$lib'.length));
+	if (alias.startsWith(lib)) return path.join(cwd, 'src', 'lib', alias.slice(lib.length));
+	return path.join(cwd, alias);
+}
+
+// Removes a top-level block that starts with `selector {` by brace matching.
+function stripBlock(css, selector) {
+	const re = new RegExp(`(^|\\n)${selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\{`);
+	const m = re.exec(css);
+	if (!m) return css;
+	let depth = 0;
+	let i = m.index + m[0].length - 1;
+	for (; i < css.length; i++) {
+		if (css[i] === '{') depth++;
+		else if (css[i] === '}' && --depth === 0) break;
+	}
+	return css.slice(0, m.index) + css.slice(i + 1);
+}
+
+// Tailwind entries under src/, i.e. CSS files that `@import 'tailwindcss'`.
+function findTailwindEntries(dir = path.join(cwd, 'src'), found = []) {
+	if (!fs.existsSync(dir)) return found;
+	for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+		const file = path.join(dir, entry.name);
+		if (entry.isDirectory()) findTailwindEntries(file, found);
+		else if (
+			entry.name.endsWith('.css') &&
+			entry.name !== 'claddcn.css' &&
+			/^@import ['"]tailwindcss['"]/m.test(fs.readFileSync(file, 'utf8'))
+		)
+			found.push(file);
+	}
+	return found;
+}
+
+// --css wins; then components.json; if that path is stale, the single Tailwind
+// entry under src/ (or the one that already imports claddcn).
+function resolveCss(config) {
+	if (option('css')) {
+		const file = path.join(cwd, option('css'));
+		if (fs.existsSync(file)) return file;
+		console.error(`claddcn  ${option('css')} not found`);
+		process.exit(1);
+	}
+	const configured = path.join(cwd, config.tailwind.css);
+	if (fs.existsSync(configured)) return configured;
+	const entries = findTailwindEntries();
+	const ours = entries.filter((f) => fs.readFileSync(f, 'utf8').includes('claddcn.css'));
+	const pick = entries.length === 1 ? entries[0] : ours.length === 1 ? ours[0] : null;
+	if (pick) {
+		log(`components.json points at ${config.tailwind.css}, using ${path.relative(cwd, pick)}`);
+		return pick;
+	}
+	console.error(`claddcn  ${config.tailwind.css} not found. Pick the Tailwind entry with --css:`);
+	for (const f of entries) console.error(`           --css "${path.relative(cwd, f)}"`);
+	process.exit(1);
+}
+
+function patchCss(cssFile) {
+	let css = fs.readFileSync(cssFile, 'utf8');
+	if (!css.includes('claddcn.css')) {
+		const imports = [...css.matchAll(/^@import[^;]+;\s*$/gm)];
+		const at = imports.length ? imports.at(-1).index + imports.at(-1)[0].length : 0;
+		css = `${css.slice(0, at)}\n@import './claddcn.css';${css.slice(at)}`;
+		log(`import added to ${path.relative(cwd, cssFile)}`);
+	}
+	if (flag('strip-vars')) {
+		for (const selector of [':root', '.dark', '@theme inline']) css = stripBlock(css, selector);
+		log('old :root / .dark / @theme inline blocks removed');
+	} else if (/(^|\n):root\s*\{[^}]*--background/.test(css)) {
+		log('warning: this file still defines shadcn tokens after the import and will override');
+		log('         claddcn colors. Re-run with --strip-vars or delete those blocks by hand.');
+	}
+	write(cssFile, css.replace(/\n{3,}/g, '\n\n'));
+}
+
+function patchUtils(utilsFile) {
+	if (!fs.existsSync(utilsFile)) return write(utilsFile, fs.readFileSync(UTILS_TS));
+	const src = fs.readFileSync(utilsFile, 'utf8');
+	if (src.includes('extendTailwindMerge')) return log('cn() already extended, left as is');
+	const ours = fs.readFileSync(UTILS_TS, 'utf8');
+	const block = ours.slice(0, ours.indexOf('export function cn'));
+	const next = src.replace(
+		/import \{ clsx, type ClassValue \} from 'clsx';\s*\nimport \{ twMerge \} from 'tailwind-merge';\s*\n/,
+		block
+	);
+	if (next === src) {
+		log(
+			`warning: couldn't patch ${path.relative(cwd, utilsFile)} — merge registry/lib/utils.ts by hand`
+		);
+		return;
+	}
+	write(utilsFile, next);
+	log('cn() now knows the cladd scale');
+}
+
+function install() {
+	const has = (f) => fs.existsSync(path.join(cwd, f));
+	const pkg = '@fontsource-variable/geist @fontsource-variable/geist-mono';
+	const cmd =
+		has('bun.lock') || has('bun.lockb')
+			? `bun add -d ${pkg}`
+			: has('pnpm-lock.yaml')
+				? `pnpm add -D ${pkg}`
+				: has('yarn.lock')
+					? `yarn add -D ${pkg}`
+					: `npm i -D ${pkg}`;
+	if (flag('no-install') || dry) return log(`skip install, run: ${cmd}`);
+	log(cmd);
+	execSync(cmd, { cwd, stdio: 'inherit' });
+}
+
+function init() {
+	const configFile = path.join(cwd, 'components.json');
+	if (!fs.existsSync(configFile)) {
+		console.error(`claddcn  no components.json in ${cwd} — is this a shadcn-svelte project?`);
+		process.exit(1);
+	}
+	const config = JSON.parse(fs.readFileSync(configFile, 'utf8'));
+	const cssFile = resolveCss(config);
+	const uiDir = resolveAlias(config.aliases?.ui ?? '$lib/components/ui', config);
+	const utilsFile = `${resolveAlias(config.aliases?.utils ?? '$lib/utils', config)}.ts`;
+
+	const only = option('only')?.split(',');
+	const available = fs.readdirSync(REGISTRY_UI);
+	const components = only ?? available;
+	const missing = components.filter((c) => !available.includes(c));
+	if (missing.length) log(`unknown components skipped: ${missing.join(', ')}`);
+
+	write(path.join(path.dirname(cssFile), 'claddcn.css'), fs.readFileSync(THEME_CSS));
+	patchCss(cssFile);
+
+	const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+	const backup = path.join(cwd, '.claddcn-backup', stamp);
+	for (const name of components.filter((c) => available.includes(c))) {
+		const target = path.join(uiDir, name);
+		if (fs.existsSync(target) && !dry) {
+			fs.mkdirSync(backup, { recursive: true });
+			fs.cpSync(target, path.join(backup, name), { recursive: true });
+		}
+		copyDir(path.join(REGISTRY_UI, name), target);
+	}
+	log(`${components.length} components written to ${path.relative(cwd, uiDir)}`);
+	if (fs.existsSync(backup)) log(`previous versions saved in ${path.relative(cwd, backup)}`);
+
+	patchUtils(utilsFile);
+	install();
+	log('done — the cladd look is in. Dark mode follows the `.dark` class (mode-watcher).');
+}
+
+if (command === 'init') init();
+else {
+	console.log(
+		`usage: claddcn init [--cwd <dir>] [--css <file>] [--only a,b] [--strip-vars] [--no-install] [--dry]`
+	);
+	process.exit(command ? 1 : 0);
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..f5b6a60
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+	"name": "claddcn-svelte",
+	"version": "0.1.0",
+	"description": "The cladd.io skin for shadcn-svelte",
+	"license": "MIT",
+	"type": "module",
+	"bin": {
+		"claddcn": "./bin/claddcn.mjs"
+	},
+	"files": [
+		"bin",
+		"src",
+		"registry",
+		"registry.json"
+	],
+	"exports": {
+		"./css": "./src/claddcn.css"
+	},
+	"scripts": {
+		"registry:build": "shadcn-svelte registry build"
+	},
+	"peerDependencies": {
+		"@fontsource-variable/geist": "^5",
+		"@fontsource-variable/geist-mono": "^5",
+		"bits-ui": "^2",
+		"tailwind-merge": "^3",
+		"tailwindcss": "^4"
+	}
+}
diff --git a/registry.json b/registry.json
new file mode 100644
index 0000000..1afe452
--- /dev/null
+++ b/registry.json
@@ -0,0 +1,801 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema/registry.json",
+	"name": "claddcn",
+	"homepage": "https://cladd.io",
+	"items": [
+		{
+			"name": "claddcn-theme",
+			"type": "registry:style",
+			"title": "claddcn theme",
+			"description": "cladd.io tokens, surfaces and shadcn variable mapping",
+			"dependencies": ["@fontsource-variable/geist", "@fontsource-variable/geist-mono"],
+			"files": [
+				{
+					"path": "src/claddcn.css",
+					"type": "registry:file",
+					"target": "src/routes/claddcn.css"
+				}
+			]
+		},
+		{
+			"name": "utils",
+			"type": "registry:lib",
+			"title": "cn() with cladd scale",
+			"dependencies": ["clsx", "tailwind-merge"],
+			"files": [
+				{
+					"path": "registry/lib/utils.ts",
+					"type": "registry:lib"
+				}
+			]
+		},
+		{
+			"name": "avatar",
+			"type": "registry:ui",
+			"title": "avatar",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/avatar/avatar-fallback.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/avatar/avatar-image.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/avatar/avatar.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/avatar/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "badge",
+			"type": "registry:ui",
+			"title": "badge",
+			"dependencies": [],
+			"registryDependencies": ["utils", "button"],
+			"files": [
+				{
+					"path": "registry/ui/badge/badge.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/badge/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "breadcrumb",
+			"type": "registry:ui",
+			"title": "breadcrumb",
+			"dependencies": [],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/breadcrumb/breadcrumb-ellipsis.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/breadcrumb/breadcrumb-item.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/breadcrumb/breadcrumb-link.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/breadcrumb/breadcrumb-list.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/breadcrumb/breadcrumb-page.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/breadcrumb/breadcrumb-separator.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/breadcrumb/breadcrumb.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/breadcrumb/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "button",
+			"type": "registry:ui",
+			"title": "button",
+			"dependencies": [],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/button/button.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/button/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "card",
+			"type": "registry:ui",
+			"title": "card",
+			"dependencies": [],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/card/card-action.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/card/card-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/card/card-description.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/card/card-footer.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/card/card-header.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/card/card-title.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/card/card.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/card/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "checkbox",
+			"type": "registry:ui",
+			"title": "checkbox",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/checkbox/checkbox.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/checkbox/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "collapsible",
+			"type": "registry:ui",
+			"title": "collapsible",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/collapsible/collapsible-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/collapsible/collapsible-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/collapsible/collapsible.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/collapsible/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "context-menu",
+			"type": "registry:ui",
+			"title": "context-menu",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/context-menu/context-menu-checkbox-item.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-group-heading.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-group.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-item.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-label.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-portal.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-radio-group.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-radio-item.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-separator.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-shortcut.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-sub-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-sub-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-sub.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/context-menu.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/context-menu/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "dialog",
+			"type": "registry:ui",
+			"title": "dialog",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/dialog/dialog-close.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/dialog-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/dialog-description.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/dialog-footer.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/dialog-header.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/dialog-overlay.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/dialog-portal.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/dialog-title.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/dialog-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/dialog.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dialog/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "dropdown-menu",
+			"type": "registry:ui",
+			"title": "dropdown-menu",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-group-heading.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-group.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-item.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-label.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-portal.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-radio-group.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-radio-item.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-separator.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-shortcut.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-sub-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-sub.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/dropdown-menu.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/dropdown-menu/index.ts",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "input",
+			"type": "registry:ui",
+			"title": "input",
+			"dependencies": [],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/input/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/input/input.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "label",
+			"type": "registry:ui",
+			"title": "label",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/label/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/label/label.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "progress",
+			"type": "registry:ui",
+			"title": "progress",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/progress/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/progress/progress.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "select",
+			"type": "registry:ui",
+			"title": "select",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/select/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-group-heading.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-group.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-item.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-label.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-portal.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-scroll-down-button.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-scroll-up-button.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-separator.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/select/select.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "separator",
+			"type": "registry:ui",
+			"title": "separator",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/separator/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/separator/separator.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "sheet",
+			"type": "registry:ui",
+			"title": "sheet",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/sheet/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet-close.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet-description.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet-footer.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet-header.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet-overlay.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet-portal.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet-title.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sheet/sheet.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "slider",
+			"type": "registry:ui",
+			"title": "slider",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/slider/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/slider/slider.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "sonner",
+			"type": "registry:ui",
+			"title": "sonner",
+			"dependencies": [],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/sonner/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/sonner/sonner.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "surface",
+			"type": "registry:ui",
+			"title": "surface",
+			"dependencies": [],
+			"registryDependencies": ["utils", "button"],
+			"files": [
+				{
+					"path": "registry/ui/surface/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/surface/surface-cut.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/surface/surface.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "switch",
+			"type": "registry:ui",
+			"title": "switch",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/switch/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/switch/switch.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "table",
+			"type": "registry:ui",
+			"title": "table",
+			"dependencies": [],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/table/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/table/table-body.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/table/table-caption.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/table/table-cell.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/table/table-footer.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/table/table-head.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/table/table-header.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/table/table-row.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/table/table.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "tabs",
+			"type": "registry:ui",
+			"title": "tabs",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/tabs/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/tabs/tabs-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/tabs/tabs-list.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/tabs/tabs-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/tabs/tabs.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "textarea",
+			"type": "registry:ui",
+			"title": "textarea",
+			"dependencies": [],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/textarea/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/textarea/textarea.svelte",
+					"type": "registry:ui"
+				}
+			]
+		},
+		{
+			"name": "tooltip",
+			"type": "registry:ui",
+			"title": "tooltip",
+			"dependencies": ["bits-ui"],
+			"registryDependencies": ["utils"],
+			"files": [
+				{
+					"path": "registry/ui/tooltip/index.ts",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/tooltip/tooltip-content.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/tooltip/tooltip-portal.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/tooltip/tooltip-provider.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/tooltip/tooltip-trigger.svelte",
+					"type": "registry:ui"
+				},
+				{
+					"path": "registry/ui/tooltip/tooltip.svelte",
+					"type": "registry:ui"
+				}
+			]
+		}
+	]
+}
diff --git a/registry/lib/utils.ts b/registry/lib/utils.ts
new file mode 100644
index 0000000..2fba4f9
--- /dev/null
+++ b/registry/lib/utils.ts
@@ -0,0 +1,60 @@
+import { clsx, type ClassValue } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+const cladd = (...names: string[]) => names.map((n) => `cladd-${n}`);
+
+// Teach tailwind-merge the cladd scale, otherwise `text-cladd-xs` (size) and
+// `text-cladd-primary` (color) look like the same group and one gets dropped.
+const twMerge = extendTailwindMerge({
+	extend: {
+		theme: {
+			text: cladd('md', 'sm', 'xs', '2xs', '3xs'),
+			radius: cladd(
+				'3xs',
+				'2xs',
+				'xs',
+				'sm',
+				'md',
+				'lg',
+				'xl',
+				'2xl',
+				'wrap-md',
+				'panel',
+				'popover',
+				'dialog',
+				'toast',
+				'tooltip'
+			),
+			spacing: cladd(
+				'3xs',
+				'2xs',
+				'xs',
+				'sm',
+				'md',
+				'lg',
+				'xl',
+				'2xl',
+				'thumb-xs',
+				'thumb-sm',
+				'thumb-md',
+				'nested-sm',
+				'nested-md',
+				'nested-lg'
+			),
+			shadow: cladd('outline', 'outline-fill', 'cut-outline', 'popover')
+		}
+	}
+});
+
+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/registry/ui/avatar/avatar-fallback.svelte b/registry/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..0623288
--- /dev/null
+++ b/registry/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn(
+		'flex size-full items-center justify-center rounded-full text-cladd-xs font-semibold text-cladd-fg-soft uppercase',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/registry/ui/avatar/avatar-image.svelte b/registry/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..7ccc3ce
--- /dev/null
+++ b/registry/ui/avatar/avatar-image.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn('aspect-square size-full', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/avatar/avatar.svelte b/registry/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..37ee335
--- /dev/null
+++ b/registry/ui/avatar/avatar.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		loadingStatus = $bindable('loading'),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	class={cn(
+		'cladd-surface cladd-gradient cladd-outline relative flex size-cladd-lg shrink-0 overflow-hidden rounded-full',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/registry/ui/avatar/index.ts b/registry/ui/avatar/index.ts
new file mode 100644
index 0000000..9585f8a
--- /dev/null
+++ b/registry/ui/avatar/index.ts
@@ -0,0 +1,13 @@
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback
+};
diff --git a/registry/ui/badge/badge.svelte b/registry/ui/badge/badge.svelte
new file mode 100644
index 0000000..3c9bff8
--- /dev/null
+++ b/registry/ui/badge/badge.svelte
@@ -0,0 +1,57 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const badgeVariants = tv({
+		base: 'cladd-surface inline-flex h-cladd-nested-md w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-cladd-sm px-2 text-cladd-xs leading-none font-semibold whitespace-nowrap select-none has-[>svg:first-child]:ps-1.5 has-[>svg:last-child]:pe-1.5 [&>svg]:pointer-events-none [&>svg]:size-3',
+		variants: {
+			variant: {
+				default: 'cladd-gradient cladd-outline cladd-color-brand text-cladd-primary',
+				secondary: 'cladd-gradient cladd-outline text-cladd-fg',
+				destructive: 'cladd-gradient cladd-outline cladd-color-red text-cladd-primary',
+				success: 'cladd-gradient cladd-outline cladd-color-green text-cladd-primary',
+				warning: 'cladd-gradient cladd-outline cladd-color-yellow text-cladd-primary',
+				outline: 'cladd-ghost shadow-cladd-outline text-cladd-fg',
+				fill: 'cladd-gradient-fill cladd-outline cladd-color-brand'
+			}
+		},
+		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';
+	import { withColor, type CladdColor } from '../button/button.svelte';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		color,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+		color?: CladdColor;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(
+		withColor(badgeVariants({ variant }), color),
+		href && 'cladd-hoverable cladd-focusable',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/registry/ui/badge/index.ts b/registry/ui/badge/index.ts
new file mode 100644
index 0000000..f05fb87
--- /dev/null
+++ b/registry/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/registry/ui/breadcrumb/breadcrumb-ellipsis.svelte b/registry/ui/breadcrumb/breadcrumb-ellipsis.svelte
new file mode 100644
index 0000000..030197f
--- /dev/null
+++ b/registry/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-ellipsis"
+	role="presentation"
+	aria-hidden="true"
+	class={cn('flex size-9 items-center justify-center', className)}
+	{...restProps}
+>
+	<EllipsisIcon class="size-4" />
+	<span class="sr-only">More</span>
+</span>
diff --git a/registry/ui/breadcrumb/breadcrumb-item.svelte b/registry/ui/breadcrumb/breadcrumb-item.svelte
new file mode 100644
index 0000000..081b636
--- /dev/null
+++ b/registry/ui/breadcrumb/breadcrumb-item.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-item"
+	class={cn('inline-flex items-center gap-1.5', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/registry/ui/breadcrumb/breadcrumb-link.svelte b/registry/ui/breadcrumb/breadcrumb-link.svelte
new file mode 100644
index 0000000..c56ab6d
--- /dev/null
+++ b/registry/ui/breadcrumb/breadcrumb-link.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		href = undefined,
+		child,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+	} = $props();
+
+	const attrs = $derived({
+		'data-slot': 'breadcrumb-link',
+		class: cn('hover:text-foreground transition-colors', className),
+		href,
+		...restProps
+	});
+</script>
+
+{#if child}
+	{@render child({ props: attrs })}
+{:else}
+	<a bind:this={ref} {...attrs}>
+		{@render children?.()}
+	</a>
+{/if}
diff --git a/registry/ui/breadcrumb/breadcrumb-list.svelte b/registry/ui/breadcrumb/breadcrumb-list.svelte
new file mode 100644
index 0000000..bbe948c
--- /dev/null
+++ b/registry/ui/breadcrumb/breadcrumb-list.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+	bind:this={ref}
+	data-slot="breadcrumb-list"
+	class={cn(
+		'flex flex-wrap items-center gap-1.5 text-cladd-xs font-medium break-words text-cladd-fg-soft sm:gap-2.5',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</ol>
diff --git a/registry/ui/breadcrumb/breadcrumb-page.svelte b/registry/ui/breadcrumb/breadcrumb-page.svelte
new file mode 100644
index 0000000..a4313fe
--- /dev/null
+++ b/registry/ui/breadcrumb/breadcrumb-page.svelte
@@ -0,0 +1,23 @@
+<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="breadcrumb-page"
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn('font-medium text-cladd-fg', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/registry/ui/breadcrumb/breadcrumb-separator.svelte b/registry/ui/breadcrumb/breadcrumb-separator.svelte
new file mode 100644
index 0000000..c3b70c6
--- /dev/null
+++ b/registry/ui/breadcrumb/breadcrumb-separator.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-separator"
+	role="presentation"
+	aria-hidden="true"
+	class={cn('[&>svg]:size-3.5', className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<ChevronRightIcon />
+	{/if}
+</li>
diff --git a/registry/ui/breadcrumb/breadcrumb.svelte b/registry/ui/breadcrumb/breadcrumb.svelte
new file mode 100644
index 0000000..e2d0a3a
--- /dev/null
+++ b/registry/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import 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>
+
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	class={className}
+	aria-label="хлебные крошки"
+	{...restProps}
+>
+	{@render children?.()}
+</nav>
diff --git a/registry/ui/breadcrumb/index.ts b/registry/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..773fd60
--- /dev/null
+++ b/registry/ui/breadcrumb/index.ts
@@ -0,0 +1,25 @@
+import Root from './breadcrumb.svelte';
+import Ellipsis from './breadcrumb-ellipsis.svelte';
+import Item from './breadcrumb-item.svelte';
+import Separator from './breadcrumb-separator.svelte';
+import Link from './breadcrumb-link.svelte';
+import List from './breadcrumb-list.svelte';
+import Page from './breadcrumb-page.svelte';
+
+export {
+	Root,
+	Ellipsis,
+	Item,
+	Separator,
+	Link,
+	List,
+	Page,
+	//
+	Root as Breadcrumb,
+	Ellipsis as BreadcrumbEllipsis,
+	Item as BreadcrumbItem,
+	Separator as BreadcrumbSeparator,
+	Link as BreadcrumbLink,
+	List as BreadcrumbList,
+	Page as BreadcrumbPage
+};
diff --git a/registry/ui/button/button.svelte b/registry/ui/button/button.svelte
new file mode 100644
index 0000000..d178642
--- /dev/null
+++ b/registry/ui/button/button.svelte
@@ -0,0 +1,113 @@
+<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 type CladdColor =
+		| 'neutral'
+		| 'brand'
+		| 'red'
+		| 'pink'
+		| 'purple'
+		| 'blue'
+		| 'cyan'
+		| 'lime'
+		| 'green'
+		| 'yellow'
+		| 'orange';
+
+	export const buttonVariants = tv({
+		base: "cladd-clickable cladd-focusable relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-semibold whitespace-nowrap select-none disabled:pointer-events-none disabled:*:opacity-40 aria-disabled:pointer-events-none aria-disabled:*:opacity-40 aria-invalid:outline-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default:
+					'cladd-surface cladd-gradient cladd-outline cladd-hoverable cladd-color-brand text-cladd-primary',
+				destructive:
+					'cladd-surface cladd-gradient cladd-outline cladd-hoverable cladd-color-red text-cladd-primary',
+				outline: 'cladd-surface cladd-gradient cladd-outline cladd-hoverable text-cladd-fg',
+				secondary: 'cladd-surface cladd-gradient cladd-hoverable text-cladd-fg',
+				ghost: 'cladd-ghost cladd-hoverable text-cladd-fg',
+				fill: 'cladd-surface cladd-gradient-fill cladd-outline cladd-hoverable',
+				link: 'text-cladd-primary cladd-color-brand underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-cladd-md rounded-cladd-md px-2.5 text-cladd-xs',
+				xs: 'h-cladd-xs gap-1.5 rounded-cladd-xs px-2 text-cladd-xs [&_svg:not([class*=size-])]:size-3',
+				sm: 'h-cladd-sm gap-1.5 rounded-cladd-sm px-2.5 text-cladd-xs',
+				lg: 'h-cladd-lg rounded-cladd-lg px-3 text-cladd-xs',
+				xl: 'h-cladd-xl rounded-cladd-xl px-3.5 text-cladd-sm',
+				icon: 'size-cladd-md rounded-cladd-md',
+				'icon-xs': 'size-cladd-xs rounded-cladd-xs [&_svg:not([class*=size-])]:size-3',
+				'icon-sm': 'size-cladd-sm rounded-cladd-sm',
+				'icon-lg': 'size-cladd-lg rounded-cladd-lg'
+			},
+			rounded: {
+				true: 'rounded-full',
+				false: ''
+			}
+		},
+		compoundVariants: [{ variant: 'link', class: 'h-auto px-0 rounded-none' }],
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+			rounded: false
+		}
+	});
+
+	/** Swaps the variant's accent for an explicit one: `<Button color="green">`. */
+	export function withColor(classes: string, color?: CladdColor) {
+		if (!color) return classes;
+		return `${classes.replace(/\bcladd-color-\w+/g, '')} cladd-color-${color}`;
+	}
+
+	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;
+			rounded?: boolean;
+			color?: CladdColor;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		rounded = false,
+		color,
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+
+	const classes = $derived(
+		cn(withColor(buttonVariants({ variant, size, rounded }), color), className)
+	);
+</script>
+
+<!-- Content sits in its own box so the press can shrink it while the surface stays put. -->
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={classes}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		<span data-slot="button-content" class="cladd-button-content">{@render children?.()}</span>
+	</a>
+{:else}
+	<button bind:this={ref} data-slot="button" class={classes} {type} {disabled} {...restProps}>
+		<span data-slot="button-content" class="cladd-button-content">{@render children?.()}</span>
+	</button>
+{/if}
diff --git a/registry/ui/button/index.ts b/registry/ui/button/index.ts
new file mode 100644
index 0000000..3456886
--- /dev/null
+++ b/registry/ui/button/index.ts
@@ -0,0 +1,21 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	type CladdColor,
+	buttonVariants,
+	withColor
+} from './button.svelte';
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	withColor,
+	type CladdColor,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant
+};
diff --git a/registry/ui/card/card-action.svelte b/registry/ui/card/card-action.svelte
new file mode 100644
index 0000000..bbaafd2
--- /dev/null
+++ b/registry/ui/card/card-action.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-action"
+	class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/card/card-content.svelte b/registry/ui/card/card-content.svelte
new file mode 100644
index 0000000..dc25f42
--- /dev/null
+++ b/registry/ui/card/card-content.svelte
@@ -0,0 +1,15 @@
+<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', className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/card/card-description.svelte b/registry/ui/card/card-description.svelte
new file mode 100644
index 0000000..37a2110
--- /dev/null
+++ b/registry/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-cladd-xs leading-relaxed text-cladd-fg-soft', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/registry/ui/card/card-footer.svelte b/registry/ui/card/card-footer.svelte
new file mode 100644
index 0000000..1d2751f
--- /dev/null
+++ b/registry/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('flex items-center gap-2 px-4 [.border-t]:pt-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/card/card-header.svelte b/registry/ui/card/card-header.svelte
new file mode 100644
index 0000000..3a824e7
--- /dev/null
+++ b/registry/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(
+		'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/card/card-title.svelte b/registry/ui/card/card-title.svelte
new file mode 100644
index 0000000..140da83
--- /dev/null
+++ b/registry/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-cladd-sm leading-tight font-semibold', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/card/card.svelte b/registry/ui/card/card.svelte
new file mode 100644
index 0000000..fe98f5b
--- /dev/null
+++ b/registry/ui/card/card.svelte
@@ -0,0 +1,23 @@
+<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"
+	class={cn(
+		'cladd-surface cladd-outline flex flex-col gap-4 rounded-cladd-panel py-4 text-cladd-fg *:[form]:flex *:[form]:flex-col *:[form]:gap-4',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/card/index.ts b/registry/ui/card/index.ts
new file mode 100644
index 0000000..77d3674
--- /dev/null
+++ b/registry/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/registry/ui/checkbox/checkbox.svelte b/registry/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000..d4f9e72
--- /dev/null
+++ b/registry/ui/checkbox/checkbox.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		'peer group/checkbox cladd-surface cladd-gradient cladd-outline cladd-hoverable cladd-clickable cladd-focusable relative flex size-cladd-thumb-sm shrink-0 items-center justify-center rounded-full text-cladd-fg-soft disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline-destructive',
+		'cladd-fill-checked',
+		(checked || indeterminate) && 'cladd-color-brand',
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			data-slot="checkbox-indicator"
+			class={cn(
+				'flex items-center justify-center transition-[scale,color] duration-200',
+				checked || indeterminate
+					? 'text-cladd-on-primary group-active/checkbox:scale-90'
+					: 'scale-75 group-active/checkbox:scale-65'
+			)}
+		>
+			{#if indeterminate}
+				<MinusIcon class="size-3" strokeWidth={3} />
+			{:else}
+				<CheckIcon class="size-3" strokeWidth={3} />
+			{/if}
+		</span>
+	{/snippet}
+</CheckboxPrimitive.Root>
diff --git a/registry/ui/checkbox/index.ts b/registry/ui/checkbox/index.ts
new file mode 100644
index 0000000..5c27671
--- /dev/null
+++ b/registry/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from './checkbox.svelte';
+export {
+	Root,
+	//
+	Root as Checkbox
+};
diff --git a/registry/ui/collapsible/collapsible-content.svelte b/registry/ui/collapsible/collapsible-content.svelte
new file mode 100644
index 0000000..59b068c
--- /dev/null
+++ b/registry/ui/collapsible/collapsible-content.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />
diff --git a/registry/ui/collapsible/collapsible-trigger.svelte b/registry/ui/collapsible/collapsible-trigger.svelte
new file mode 100644
index 0000000..c88ceba
--- /dev/null
+++ b/registry/ui/collapsible/collapsible-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />
diff --git a/registry/ui/collapsible/collapsible.svelte b/registry/ui/collapsible/collapsible.svelte
new file mode 100644
index 0000000..7a8c5da
--- /dev/null
+++ b/registry/ui/collapsible/collapsible.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />
diff --git a/registry/ui/collapsible/index.ts b/registry/ui/collapsible/index.ts
new file mode 100644
index 0000000..8181f64
--- /dev/null
+++ b/registry/ui/collapsible/index.ts
@@ -0,0 +1,13 @@
+import Root from './collapsible.svelte';
+import Trigger from './collapsible-trigger.svelte';
+import Content from './collapsible-content.svelte';
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger
+};
diff --git a/registry/ui/context-menu/context-menu-checkbox-item.svelte b/registry/ui/context-menu/context-menu-checkbox-item.svelte
new file mode 100644
index 0000000..7d0d156
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-checkbox-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	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<ContextMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="context-menu-checkbox-item"
+	class={cn(
+		"relative flex min-h-cladd-lg cursor-default items-center gap-2 rounded-full py-1 ps-9 pe-3 text-cladd-xs font-medium outline-hidden transition-[background-color,box-shadow] duration-200 select-none data-highlighted:bg-cladd-surface-next data-[disabled]:pointer-events-none data-[disabled]:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="pointer-events-none absolute start-3 flex size-4 items-center justify-center">
+			{#if checked}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</ContextMenuPrimitive.CheckboxItem>
diff --git a/registry/ui/context-menu/context-menu-content.svelte b/registry/ui/context-menu/context-menu-content.svelte
new file mode 100644
index 0000000..18a95f2
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import ContextMenuPortal from './context-menu-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+	import type { WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		portalProps,
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
+	} = $props();
+</script>
+
+<ContextMenuPortal {...portalProps}>
+	<ContextMenuPrimitive.Content
+		bind:ref
+		data-slot="context-menu-content"
+		class={cn(
+			'cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 max-h-(--bits-context-menu-content-available-height) min-w-[10rem] origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-cladd-popover p-2 text-cladd-fg shadow-cladd-popover outline-none',
+			className
+		)}
+		{...restProps}
+	/>
+</ContextMenuPortal>
diff --git a/registry/ui/context-menu/context-menu-group-heading.svelte b/registry/ui/context-menu/context-menu-group-heading.svelte
new file mode 100644
index 0000000..c9d538f
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ContextMenuPrimitive.GroupHeadingProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="context-menu-group-heading"
+	data-inset={inset}
+	class={cn('cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-8 data-[inset]:ps-9', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/context-menu/context-menu-group.svelte b/registry/ui/context-menu/context-menu-group.svelte
new file mode 100644
index 0000000..0a5a142
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.Group bind:ref data-slot="context-menu-group" {...restProps} />
diff --git a/registry/ui/context-menu/context-menu-item.svelte b/registry/ui/context-menu/context-menu-item.svelte
new file mode 100644
index 0000000..6c8509d
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		variant = 'default',
+		...restProps
+	}: ContextMenuPrimitive.ItemProps & {
+		inset?: boolean;
+		variant?: 'default' | 'destructive';
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.Item
+	bind:ref
+	data-slot="context-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"relative flex min-h-cladd-lg cursor-default items-center gap-2 rounded-full px-3 py-1 text-cladd-xs font-medium outline-hidden transition-[background-color,box-shadow] duration-200 select-none data-highlighted:bg-cladd-surface-next data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[inset]:ps-8 data-[inset]:ps-9 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/12 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft data-[variant=destructive]:*:[svg]:!text-destructive",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/registry/ui/context-menu/context-menu-label.svelte b/registry/ui/context-menu/context-menu-label.svelte
new file mode 100644
index 0000000..54d21b0
--- /dev/null
+++ b/registry/ui/context-menu/context-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="context-menu-label"
+	data-inset={inset}
+	class={cn('cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-8 data-[inset]:ps-9', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/context-menu/context-menu-portal.svelte b/registry/ui/context-menu/context-menu-portal.svelte
new file mode 100644
index 0000000..d03821a
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+	let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
+</script>
+
+<ContextMenuPrimitive.Portal {...restProps} />
diff --git a/registry/ui/context-menu/context-menu-radio-group.svelte b/registry/ui/context-menu/context-menu-radio-group.svelte
new file mode 100644
index 0000000..bd63b9f
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		...restProps
+	}: ContextMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="context-menu-radio-group"
+	{...restProps}
+/>
diff --git a/registry/ui/context-menu/context-menu-radio-item.svelte b/registry/ui/context-menu/context-menu-radio-item.svelte
new file mode 100644
index 0000000..70879c9
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-radio-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<ContextMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<ContextMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="context-menu-radio-item"
+	class={cn(
+		"relative flex min-h-cladd-lg cursor-default items-center gap-2 rounded-full py-1 ps-9 pe-3 text-cladd-xs font-medium outline-hidden transition-[background-color,box-shadow] duration-200 select-none data-highlighted:bg-cladd-surface-next data-[disabled]:pointer-events-none data-[disabled]:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="pointer-events-none absolute start-3 flex size-4 items-center justify-center">
+			{#if checked}
+				<CircleIcon class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</ContextMenuPrimitive.RadioItem>
diff --git a/registry/ui/context-menu/context-menu-separator.svelte b/registry/ui/context-menu/context-menu-separator.svelte
new file mode 100644
index 0000000..1eaf52b
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<ContextMenuPrimitive.Separator
+	bind:ref
+	data-slot="context-menu-separator"
+	class={cn('-mx-2 my-2 h-px bg-cladd-bg-outline', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/context-menu/context-menu-shortcut.svelte b/registry/ui/context-menu/context-menu-shortcut.svelte
new file mode 100644
index 0000000..7423979
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-shortcut.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<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="context-menu-shortcut"
+	class={cn('ms-auto font-mono text-cladd-2xs tracking-widest text-cladd-fg-softer', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/registry/ui/context-menu/context-menu-sub-content.svelte b/registry/ui/context-menu/context-menu-sub-content.svelte
new file mode 100644
index 0000000..1b031a0
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.SubContentProps = $props();
+</script>
+
+<ContextMenuPrimitive.SubContent
+	bind:ref
+	data-slot="context-menu-sub-content"
+	class={cn(
+		'cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 min-w-[10rem] origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-cladd-popover p-2 text-cladd-fg shadow-cladd-popover outline-none',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/registry/ui/context-menu/context-menu-sub-trigger.svelte b/registry/ui/context-menu/context-menu-sub-trigger.svelte
new file mode 100644
index 0000000..2fa5b7b
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="context-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"relative flex min-h-cladd-lg cursor-default items-center gap-2 rounded-full px-3 py-1 text-cladd-xs font-medium outline-hidden transition-[background-color,box-shadow] duration-200 select-none data-highlighted:bg-cladd-surface-next data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[inset]:ps-8 data-[inset]:ps-9 data-[state=open]:bg-cladd-surface-next [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ms-auto" />
+</ContextMenuPrimitive.SubTrigger>
diff --git a/registry/ui/context-menu/context-menu-sub.svelte b/registry/ui/context-menu/context-menu-sub.svelte
new file mode 100644
index 0000000..c47f6f3
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();
+</script>
+
+<ContextMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/registry/ui/context-menu/context-menu-trigger.svelte b/registry/ui/context-menu/context-menu-trigger.svelte
new file mode 100644
index 0000000..063cd50
--- /dev/null
+++ b/registry/ui/context-menu/context-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger bind:ref data-slot="context-menu-trigger" {...restProps} />
diff --git a/registry/ui/context-menu/context-menu.svelte b/registry/ui/context-menu/context-menu.svelte
new file mode 100644
index 0000000..486e3ad
--- /dev/null
+++ b/registry/ui/context-menu/context-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
+</script>
+
+<ContextMenuPrimitive.Root bind:open {...restProps} />
diff --git a/registry/ui/context-menu/index.ts b/registry/ui/context-menu/index.ts
new file mode 100644
index 0000000..6c62da9
--- /dev/null
+++ b/registry/ui/context-menu/index.ts
@@ -0,0 +1,52 @@
+import Root from './context-menu.svelte';
+import Sub from './context-menu-sub.svelte';
+import Portal from './context-menu-portal.svelte';
+import Trigger from './context-menu-trigger.svelte';
+import Group from './context-menu-group.svelte';
+import RadioGroup from './context-menu-radio-group.svelte';
+import Item from './context-menu-item.svelte';
+import GroupHeading from './context-menu-group-heading.svelte';
+import Content from './context-menu-content.svelte';
+import Shortcut from './context-menu-shortcut.svelte';
+import RadioItem from './context-menu-radio-item.svelte';
+import Separator from './context-menu-separator.svelte';
+import SubContent from './context-menu-sub-content.svelte';
+import SubTrigger from './context-menu-sub-trigger.svelte';
+import CheckboxItem from './context-menu-checkbox-item.svelte';
+import Label from './context-menu-label.svelte';
+
+export {
+	Root,
+	Sub,
+	Portal,
+	Item,
+	GroupHeading,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as ContextMenu,
+	Sub as ContextMenuSub,
+	Portal as ContextMenuPortal,
+	Item as ContextMenuItem,
+	GroupHeading as ContextMenuGroupHeading,
+	Group as ContextMenuGroup,
+	Content as ContextMenuContent,
+	Trigger as ContextMenuTrigger,
+	Shortcut as ContextMenuShortcut,
+	RadioItem as ContextMenuRadioItem,
+	Separator as ContextMenuSeparator,
+	RadioGroup as ContextMenuRadioGroup,
+	SubContent as ContextMenuSubContent,
+	SubTrigger as ContextMenuSubTrigger,
+	CheckboxItem as ContextMenuCheckboxItem,
+	Label as ContextMenuLabel
+};
diff --git a/registry/ui/dialog/dialog-close.svelte b/registry/ui/dialog/dialog-close.svelte
new file mode 100644
index 0000000..e8a96a7
--- /dev/null
+++ b/registry/ui/dialog/dialog-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
diff --git a/registry/ui/dialog/dialog-content.svelte b/registry/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..c9eb98a
--- /dev/null
+++ b/registry/ui/dialog/dialog-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import DialogPortal from './dialog-portal.svelte';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	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(
+			'cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-dialog fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-cladd-dialog p-4 text-cladd-fg shadow-cladd-popover outline-none sm:max-w-lg',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="cladd-ghost cladd-hoverable cladd-clickable cladd-focusable absolute end-3 top-3 flex size-cladd-md items-center justify-center rounded-full text-cladd-fg-soft disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>
diff --git a/registry/ui/dialog/dialog-description.svelte b/registry/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..631b364
--- /dev/null
+++ b/registry/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-cladd-sm leading-relaxed text-cladd-fg-soft', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/dialog/dialog-footer.svelte b/registry/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..6ba487f
--- /dev/null
+++ b/registry/ui/dialog/dialog-footer.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="dialog-footer"
+	class={cn(
+		'mt-2 flex flex-col-reverse gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/dialog/dialog-header.svelte b/registry/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..bb52355
--- /dev/null
+++ b/registry/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('flex flex-col gap-1.5 text-start', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/dialog/dialog-overlay.svelte b/registry/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..f3549bd
--- /dev/null
+++ b/registry/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('cladd-backdrop cladd-anim-fade fixed inset-0 z-50', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/dialog/dialog-portal.svelte b/registry/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..a60a85e
--- /dev/null
+++ b/registry/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/registry/ui/dialog/dialog-title.svelte b/registry/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..0ce5977
--- /dev/null
+++ b/registry/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('pe-8 text-cladd-md leading-tight font-semibold', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/dialog/dialog-trigger.svelte b/registry/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000..ac04d9f
--- /dev/null
+++ b/registry/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
diff --git a/registry/ui/dialog/dialog.svelte b/registry/ui/dialog/dialog.svelte
new file mode 100644
index 0000000..c1444b2
--- /dev/null
+++ b/registry/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/registry/ui/dialog/index.ts b/registry/ui/dialog/index.ts
new file mode 100644
index 0000000..9143f72
--- /dev/null
+++ b/registry/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/registry/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/registry/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 0000000..c0bf94b
--- /dev/null
+++ b/registry/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/registry/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/registry/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 0000000..53b7809
--- /dev/null
+++ b/registry/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	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(
+		"relative flex min-h-cladd-lg cursor-default items-center gap-2 rounded-full py-1 ps-9 pe-3 text-cladd-xs font-medium outline-hidden transition-[background-color,box-shadow] duration-200 select-none data-highlighted:bg-cladd-surface-next data-[disabled]:pointer-events-none data-[disabled]:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span class="pointer-events-none absolute start-3 flex size-4 items-center justify-center">
+			{#if indeterminate}
+				<MinusIcon class="size-4" />
+			{:else}
+				<CheckIcon class={cn('size-4', !checked && 'text-transparent')} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-content.svelte b/registry/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..8bd0a4b
--- /dev/null
+++ b/registry/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,29 @@
+<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,
+		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}
+		class={cn(
+			'cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[10rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-cladd-popover p-2 text-cladd-fg shadow-cladd-popover outline-none',
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/registry/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000..d43323b
--- /dev/null
+++ b/registry/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('cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-8 data-[inset]:ps-9', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-group.svelte b/registry/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 0000000..261ab7e
--- /dev/null
+++ b/registry/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/registry/ui/dropdown-menu/dropdown-menu-item.svelte b/registry/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..0bb8536
--- /dev/null
+++ b/registry/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,28 @@
+<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';
+		asChild?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"relative flex min-h-cladd-lg cursor-default items-center gap-2 rounded-full px-3 py-1 text-cladd-xs font-medium outline-hidden transition-[background-color,box-shadow] duration-200 select-none data-highlighted:bg-cladd-surface-next data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[inset]:ps-8 data-[inset]:ps-9 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/12 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft data-[variant=destructive]:*:[svg]:!text-destructive",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-label.svelte b/registry/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..0ea90c5
--- /dev/null
+++ b/registry/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('cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-8 data-[inset]:ps-9', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-portal.svelte b/registry/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 0000000..089a25c
--- /dev/null
+++ b/registry/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/registry/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/registry/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..3e98749
--- /dev/null
+++ b/registry/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/registry/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/registry/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..a2929e1
--- /dev/null
+++ b/registry/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	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(
+		"relative flex min-h-cladd-lg cursor-default items-center gap-2 rounded-full py-1 ps-9 pe-3 text-cladd-xs font-medium outline-hidden transition-[background-color,box-shadow] duration-200 select-none data-highlighted:bg-cladd-surface-next data-[disabled]:pointer-events-none data-[disabled]:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="pointer-events-none absolute start-3 flex size-4 items-center justify-center">
+			{#if checked}
+				<CircleIcon class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-separator.svelte b/registry/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..bb4caf7
--- /dev/null
+++ b/registry/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('-mx-2 my-2 h-px bg-cladd-bg-outline', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/registry/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..dab5255
--- /dev/null
+++ b/registry/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('ms-auto font-mono text-cladd-2xs tracking-widest text-cladd-fg-softer', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/registry/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..7ff9f87
--- /dev/null
+++ b/registry/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<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(
+		'cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 min-w-[10rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-cladd-popover p-2 text-cladd-fg shadow-cladd-popover outline-none',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/registry/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..99d3d23
--- /dev/null
+++ b/registry/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(
+		"relative flex min-h-cladd-lg cursor-default items-center gap-2 rounded-full px-3 py-1 text-cladd-xs font-medium outline-hidden transition-[background-color,box-shadow] duration-200 select-none data-highlighted:bg-cladd-surface-next data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[inset]:ps-8 data-[inset]:ps-9 data-[state=open]:bg-cladd-surface-next [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ms-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/registry/ui/dropdown-menu/dropdown-menu-sub.svelte b/registry/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 0000000..9cfa3b8
--- /dev/null
+++ b/registry/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/registry/ui/dropdown-menu/dropdown-menu-trigger.svelte b/registry/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000..032b645
--- /dev/null
+++ b/registry/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/registry/ui/dropdown-menu/dropdown-menu.svelte b/registry/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 0000000..fbbb790
--- /dev/null
+++ b/registry/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/registry/ui/dropdown-menu/index.ts b/registry/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..b097e3f
--- /dev/null
+++ b/registry/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/registry/ui/input/index.ts b/registry/ui/input/index.ts
new file mode 100644
index 0000000..15c0933
--- /dev/null
+++ b/registry/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from './input.svelte';
+
+export {
+	Root,
+	//
+	Root as Input
+};
diff --git a/registry/ui/input/input.svelte b/registry/ui/input/input.svelte
new file mode 100644
index 0000000..04e279f
--- /dev/null
+++ b/registry/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(
+			'cladd-cut cladd-hoverable cladd-focusable-input flex h-cladd-md w-full min-w-0 rounded-cladd-md px-2.5 pt-1.5 text-cladd-xs font-medium text-cladd-fg selection:bg-brand/30 file:me-2 file:font-semibold file:text-cladd-fg placeholder:text-cladd-fg-softer 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(
+			'cladd-cut cladd-hoverable cladd-focusable-input flex h-cladd-md w-full min-w-0 rounded-cladd-md px-2.5 py-1 text-cladd-xs font-medium text-cladd-fg selection:bg-brand/30 placeholder:text-cladd-fg-softer disabled:cursor-not-allowed disabled:opacity-50',
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
diff --git a/registry/ui/label/index.ts b/registry/ui/label/index.ts
new file mode 100644
index 0000000..41dd50d
--- /dev/null
+++ b/registry/ui/label/index.ts
@@ -0,0 +1,3 @@
+import Label from './label.svelte';
+
+export { Label };
diff --git a/registry/ui/label/label.svelte b/registry/ui/label/label.svelte
new file mode 100644
index 0000000..fae6c80
--- /dev/null
+++ b/registry/ui/label/label.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: { ref?: any; class?: string; children?: any; [key: string]: any } = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	class={cn(
+		'text-cladd-xs leading-none font-medium text-cladd-fg-soft peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</LabelPrimitive.Root>
diff --git a/registry/ui/progress/index.ts b/registry/ui/progress/index.ts
new file mode 100644
index 0000000..97f57fc
--- /dev/null
+++ b/registry/ui/progress/index.ts
@@ -0,0 +1,7 @@
+import Root from './progress.svelte';
+
+export {
+	Root,
+	//
+	Root as Progress
+};
diff --git a/registry/ui/progress/progress.svelte b/registry/ui/progress/progress.svelte
new file mode 100644
index 0000000..71b561b
--- /dev/null
+++ b/registry/ui/progress/progress.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Progress as ProgressPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		max = 100,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
+</script>
+
+<ProgressPrimitive.Root
+	bind:ref
+	data-slot="progress"
+	class={cn('cladd-cut relative h-2 w-full overflow-hidden rounded-full', className)}
+	{value}
+	{max}
+	{...restProps}
+>
+	<div
+		data-slot="progress-indicator"
+		class="cladd-surface cladd-gradient-fill cladd-color-brand h-full w-full flex-1 rounded-full transition-all duration-300 ease-out"
+		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
+	></div>
+</ProgressPrimitive.Root>
diff --git a/registry/ui/select/index.ts b/registry/ui/select/index.ts
new file mode 100644
index 0000000..305c47a
--- /dev/null
+++ b/registry/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/registry/ui/select/select-content.svelte b/registry/ui/select/select-content.svelte
new file mode 100644
index 0000000..65360fe
--- /dev/null
+++ b/registry/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(
+			'cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 max-h-(--bits-select-content-available-height) min-w-[10rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-cladd-popover text-cladd-fg shadow-cladd-popover outline-none',
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-2 p-2'
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPortal>
diff --git a/registry/ui/select/select-group-heading.svelte b/registry/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..aa6c41c
--- /dev/null
+++ b/registry/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('cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-9', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/registry/ui/select/select-group.svelte b/registry/ui/select/select-group.svelte
new file mode 100644
index 0000000..ed67413
--- /dev/null
+++ b/registry/ui/select/select-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />
diff --git a/registry/ui/select/select-item.svelte b/registry/ui/select/select-item.svelte
new file mode 100644
index 0000000..63e3dfe
--- /dev/null
+++ b/registry/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	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(
+		"relative flex min-h-cladd-lg cursor-default items-center gap-2 rounded-full py-1 ps-3 pe-9 text-cladd-xs font-medium outline-hidden transition-[background-color,box-shadow] duration-200 select-none data-highlighted:bg-cladd-surface-next data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[selected]:bg-cladd-surface-next data-[selected]:shadow-cladd-outline [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-3 flex size-4 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4 text-cladd-fg" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/registry/ui/select/select-label.svelte b/registry/ui/select/select-label.svelte
new file mode 100644
index 0000000..d9c910c
--- /dev/null
+++ b/registry/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('cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-9', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/select/select-portal.svelte b/registry/ui/select/select-portal.svelte
new file mode 100644
index 0000000..59c4b78
--- /dev/null
+++ b/registry/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/registry/ui/select/select-scroll-down-button.svelte b/registry/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..478d9bd
--- /dev/null
+++ b/registry/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn('flex cursor-default items-center justify-center py-1 text-cladd-fg-softer', className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>
diff --git a/registry/ui/select/select-scroll-up-button.svelte b/registry/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..f17e44f
--- /dev/null
+++ b/registry/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn('flex cursor-default items-center justify-center py-1 text-cladd-fg-softer', className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>
diff --git a/registry/ui/select/select-separator.svelte b/registry/ui/select/select-separator.svelte
new file mode 100644
index 0000000..ab5afd0
--- /dev/null
+++ b/registry/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('pointer-events-none -mx-2 my-2 h-px bg-cladd-bg-outline', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/select/select-trigger.svelte b/registry/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..76a70f4
--- /dev/null
+++ b/registry/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	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(
+		"cladd-surface cladd-gradient cladd-outline cladd-hoverable cladd-clickable cladd-focusable flex w-fit items-center justify-between gap-2 rounded-cladd-md px-2.5 text-cladd-xs font-semibold whitespace-nowrap text-cladd-fg select-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline-destructive data-[placeholder]:text-cladd-fg-softer data-[size=default]:h-cladd-md data-[size=sm]:h-cladd-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-softer",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronsUpDownIcon class="size-3.5 text-cladd-fg-softer" />
+</SelectPrimitive.Trigger>
diff --git a/registry/ui/select/select.svelte b/registry/ui/select/select.svelte
new file mode 100644
index 0000000..b9bf9ba
--- /dev/null
+++ b/registry/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/registry/ui/separator/index.ts b/registry/ui/separator/index.ts
new file mode 100644
index 0000000..768efac
--- /dev/null
+++ b/registry/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from './separator.svelte';
+
+export {
+	Root,
+	//
+	Root as Separator
+};
diff --git a/registry/ui/separator/separator.svelte b/registry/ui/separator/separator.svelte
new file mode 100644
index 0000000..95d7f39
--- /dev/null
+++ b/registry/ui/separator/separator.svelte
@@ -0,0 +1,21 @@
+<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(
+		'shrink-0 bg-cladd-bg-outline data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/registry/ui/sheet/index.ts b/registry/ui/sheet/index.ts
new file mode 100644
index 0000000..781bc48
--- /dev/null
+++ b/registry/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/registry/ui/sheet/sheet-close.svelte b/registry/ui/sheet/sheet-close.svelte
new file mode 100644
index 0000000..b0180c0
--- /dev/null
+++ b/registry/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/registry/ui/sheet/sheet-content.svelte b/registry/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..0b41ef7
--- /dev/null
+++ b/registry/ui/sheet/sheet-content.svelte
@@ -0,0 +1,62 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	export const sheetVariants = tv({
+		base: 'cladd-surface cladd-gradient cladd-outline cladd-level-1 text-cladd-fg shadow-cladd-popover outline-none data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-hidden ease-[cubic-bezier(0,1,0.2,1.1)] data-[state=closed]:duration-200 data-[state=closed]:ease-in data-[state=open]:duration-500',
+		variants: {
+			side: {
+				top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-2 top-2 h-auto rounded-cladd-panel',
+				bottom:
+					'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-2 bottom-2 h-auto rounded-cladd-panel',
+				left: 'data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-2 start-2 w-3/4 rounded-cladd-panel sm:max-w-sm',
+				right:
+					'data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-2 end-2 w-3/4 rounded-cladd-panel sm:max-w-sm'
+			}
+		},
+		defaultVariants: {
+			side: 'right'
+		}
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import SheetPortal from './sheet-portal.svelte';
+	import SheetOverlay from './sheet-overlay.svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = 'right',
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="cladd-ghost cladd-hoverable cladd-clickable cladd-focusable absolute end-3 top-3 flex size-cladd-md items-center justify-center rounded-full text-cladd-fg-soft disabled:pointer-events-none"
+		>
+			<XIcon class="size-4" />
+			<span class="sr-only">Закрыть</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/registry/ui/sheet/sheet-description.svelte b/registry/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..d560225
--- /dev/null
+++ b/registry/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-cladd-xs leading-relaxed text-cladd-fg-soft', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/sheet/sheet-footer.svelte b/registry/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..aea83f7
--- /dev/null
+++ b/registry/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('mt-auto flex flex-col gap-2 p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/sheet/sheet-header.svelte b/registry/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..00cd281
--- /dev/null
+++ b/registry/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('flex flex-col gap-1.5 p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/registry/ui/sheet/sheet-overlay.svelte b/registry/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..55eb7dd
--- /dev/null
+++ b/registry/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('cladd-backdrop cladd-anim-fade fixed inset-0 z-50', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/sheet/sheet-portal.svelte b/registry/ui/sheet/sheet-portal.svelte
new file mode 100644
index 0000000..91e5178
--- /dev/null
+++ b/registry/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/registry/ui/sheet/sheet-title.svelte b/registry/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..aff3e79
--- /dev/null
+++ b/registry/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-cladd-md font-semibold text-cladd-fg', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/sheet/sheet-trigger.svelte b/registry/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000..d95719a
--- /dev/null
+++ b/registry/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/registry/ui/sheet/sheet.svelte b/registry/ui/sheet/sheet.svelte
new file mode 100644
index 0000000..d65b76b
--- /dev/null
+++ b/registry/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/registry/ui/slider/index.ts b/registry/ui/slider/index.ts
new file mode 100644
index 0000000..f1524fc
--- /dev/null
+++ b/registry/ui/slider/index.ts
@@ -0,0 +1,7 @@
+import Root from './slider.svelte';
+
+export {
+	Root,
+	//
+	Root as Slider
+};
diff --git a/registry/ui/slider/slider.svelte b/registry/ui/slider/slider.svelte
new file mode 100644
index 0000000..9db32fd
--- /dev/null
+++ b/registry/ui/slider/slider.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		orientation = 'horizontal',
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<SliderPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="slider"
+	{orientation}
+	class={cn(
+		'relative flex h-cladd-thumb-sm w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ thumbs })}
+		<span
+			data-orientation={orientation}
+			data-slot="slider-track"
+			class={cn(
+				'cladd-cut relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
+			)}
+		>
+			<SliderPrimitive.Range
+				data-slot="slider-range"
+				class={cn(
+					'cladd-color-brand absolute rounded-full bg-cladd-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+				)}
+			/>
+		</span>
+		{#each thumbs as thumb (thumb)}
+			<SliderPrimitive.Thumb
+				data-slot="slider-thumb"
+				index={thumb}
+				class="cladd-surface cladd-gradient-fill cladd-outline cladd-hoverable cladd-focusable cladd-color-brand block size-cladd-thumb-sm shrink-0 rounded-full active:scale-90 disabled:pointer-events-none disabled:opacity-50"
+			/>
+		{/each}
+	{/snippet}
+</SliderPrimitive.Root>
diff --git a/registry/ui/sonner/index.ts b/registry/ui/sonner/index.ts
new file mode 100644
index 0000000..fcaf06b
--- /dev/null
+++ b/registry/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from './sonner.svelte';
diff --git a/registry/ui/sonner/sonner.svelte b/registry/ui/sonner/sonner.svelte
new file mode 100644
index 0000000..5e46435
--- /dev/null
+++ b/registry/ui/sonner/sonner.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+	import InfoIcon from '@lucide/svelte/icons/info';
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: transparent; --border-radius: var(--radius-cladd-toast);"
+	toastOptions={{
+		classes: {
+			toast:
+				'cladd-surface cladd-gradient cladd-outline cladd-level-3 !rounded-cladd-toast !py-3 !ps-4 !pe-4 !gap-3 !shadow-cladd-popover !text-cladd-fg',
+			title: '!text-cladd-sm !font-semibold',
+			description: '!text-cladd-xs !leading-relaxed !text-cladd-fg-soft',
+			actionButton:
+				'cladd-surface cladd-gradient cladd-outline cladd-color-brand !rounded-full !bg-cladd-surface !text-cladd-primary !font-semibold',
+			cancelButton: 'cladd-surface cladd-gradient !rounded-full !bg-cladd-surface !text-cladd-fg',
+			closeButton:
+				'cladd-surface cladd-gradient cladd-outline !bg-cladd-surface !text-cladd-fg-soft !border-0',
+			success: '[&_[data-icon]]:text-success',
+			error: '[&_[data-icon]]:text-destructive',
+			warning: '[&_[data-icon]]:text-warning',
+			info: '[&_[data-icon]]:text-brand'
+		}
+	}}
+	{...restProps}
+	>{#snippet loadingIcon()}
+		<Loader2Icon class="size-4 animate-spin" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-4" />
+	{/snippet}
+</Sonner>
diff --git a/registry/ui/surface/index.ts b/registry/ui/surface/index.ts
new file mode 100644
index 0000000..2fca05a
--- /dev/null
+++ b/registry/ui/surface/index.ts
@@ -0,0 +1,5 @@
+import Root from './surface.svelte';
+import Cut from './surface-cut.svelte';
+
+export { Root, Cut, Root as Surface, Cut as SurfaceCut };
+export type { SurfaceProps, SurfaceVariant } from './surface.svelte';
diff --git a/registry/ui/surface/surface-cut.svelte b/registry/ui/surface/surface-cut.svelte
new file mode 100644
index 0000000..68afae9
--- /dev/null
+++ b/registry/ui/surface/surface-cut.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { CladdColor } from '../button/button.svelte';
+
+	let {
+		ref = $bindable(null),
+		as = 'div',
+		outline = true,
+		hoverable = false,
+		color,
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		as?: string;
+		outline?: boolean;
+		hoverable?: boolean;
+		color?: CladdColor;
+	} = $props();
+</script>
+
+<!-- A recessed well: sits below its parent surface instead of above it. -->
+<svelte:element
+	this={as}
+	bind:this={ref}
+	data-slot="surface-cut"
+	class={cn(
+		'cladd-cut text-cladd-fg',
+		!outline && 'shadow-none',
+		hoverable && 'cladd-hoverable',
+		color && `cladd-color-${color}`,
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/registry/ui/surface/surface.svelte b/registry/ui/surface/surface.svelte
new file mode 100644
index 0000000..7338d83
--- /dev/null
+++ b/registry/ui/surface/surface.svelte
@@ -0,0 +1,66 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { CladdColor } from '../button/button.svelte';
+
+	export type SurfaceVariant =
+		| 'solid'
+		| 'gradient'
+		| 'solid-fill'
+		| 'gradient-fill'
+		| 'transparent';
+
+	export type SurfaceProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+		as?: string;
+		variant?: SurfaceVariant;
+		outline?: boolean;
+		hoverable?: boolean;
+		clickable?: boolean;
+		level?: 1 | 2 | 3 | 4 | 5;
+		color?: CladdColor;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		as = 'div',
+		variant = 'solid',
+		outline = false,
+		hoverable = false,
+		clickable = false,
+		level,
+		color,
+		class: className,
+		children,
+		...restProps
+	}: SurfaceProps = $props();
+
+	const variantClass: Record<SurfaceVariant, string> = {
+		solid: 'cladd-surface',
+		gradient: 'cladd-surface cladd-gradient',
+		'solid-fill': 'cladd-surface cladd-fill',
+		'gradient-fill': 'cladd-surface cladd-gradient-fill',
+		transparent: 'cladd-ghost'
+	};
+</script>
+
+<!-- Nested surfaces step one level deeper automatically; `level` pins it. -->
+<svelte:element
+	this={as}
+	bind:this={ref}
+	data-slot="surface"
+	class={cn(
+		variantClass[variant],
+		outline && 'cladd-outline',
+		hoverable && 'cladd-hoverable',
+		clickable && 'cladd-clickable',
+		level && `cladd-level-${level}`,
+		color && `cladd-color-${color}`,
+		'text-cladd-fg',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/registry/ui/switch/index.ts b/registry/ui/switch/index.ts
new file mode 100644
index 0000000..129f8f5
--- /dev/null
+++ b/registry/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from './switch.svelte';
+
+export {
+	Root,
+	//
+	Root as Switch
+};
diff --git a/registry/ui/switch/switch.svelte b/registry/ui/switch/switch.svelte
new file mode 100644
index 0000000..916166b
--- /dev/null
+++ b/registry/ui/switch/switch.svelte
@@ -0,0 +1,59 @@
+<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),
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		'peer group/switch cladd-surface cladd-outline cladd-focusable inline-flex h-cladd-md w-12 shrink-0 items-center rounded-full p-1 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb data-slot="switch-thumb">
+		{#snippet child({ props })}
+			<span
+				{...props}
+				class={cn(
+					'cladd-surface cladd-gradient cladd-outline cladd-fill-checked pointer-events-none relative block size-cladd-thumb-sm rounded-full transition-[translate,background-color,box-shadow] duration-300',
+					checked ? 'cladd-color-brand translate-x-cladd-thumb-sm' : 'translate-x-0'
+				)}
+			>
+				<!-- Two bars: a × while off, folding into a ✓ when on. -->
+				<span
+					class={cn(
+						'absolute inset-0 transition-[rotate,scale] duration-300 group-active/switch:scale-90',
+						checked && 'rotate-180'
+					)}
+				>
+					<span
+						class={cn(
+							'absolute top-1/2 left-1/2 -mt-px -ml-2 h-0.5 w-4 rotate-45 rounded-full transition-[translate,scale,rotate,background-color] duration-300',
+							checked
+								? 'translate-x-0.5 translate-y-[-1.75px] scale-x-40 bg-cladd-on-primary'
+								: 'scale-x-75 bg-cladd-fg-soft'
+						)}
+					></span>
+					<span
+						class={cn(
+							'absolute top-1/2 left-1/2 -mt-px -ml-2 h-0.5 w-4 -rotate-45 rounded-full transition-[translate,scale,rotate,background-color] duration-300',
+							checked
+								? 'translate-x-[-1.5px] scale-x-60 -rotate-60 bg-cladd-on-primary'
+								: 'scale-x-75 bg-cladd-fg-soft'
+						)}
+					></span>
+				</span>
+			</span>
+		{/snippet}
+	</SwitchPrimitive.Thumb>
+</SwitchPrimitive.Root>
diff --git a/registry/ui/table/index.ts b/registry/ui/table/index.ts
new file mode 100644
index 0000000..99239ae
--- /dev/null
+++ b/registry/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/registry/ui/table/table-body.svelte b/registry/ui/table/table-body.svelte
new file mode 100644
index 0000000..cf720f4
--- /dev/null
+++ b/registry/ui/table/table-body.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>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn('[&_tr:last-child]:border-0', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>
diff --git a/registry/ui/table/table-caption.svelte b/registry/ui/table/table-caption.svelte
new file mode 100644
index 0000000..1c9c3ec
--- /dev/null
+++ b/registry/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('mt-4 text-cladd-xs text-cladd-fg-soft', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
diff --git a/registry/ui/table/table-cell.svelte b/registry/ui/table/table-cell.svelte
new file mode 100644
index 0000000..654f2f2
--- /dev/null
+++ b/registry/ui/table/table-cell.svelte
@@ -0,0 +1,23 @@
+<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(
+		'bg-clip-padding p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>
diff --git a/registry/ui/table/table-footer.svelte b/registry/ui/table/table-footer.svelte
new file mode 100644
index 0000000..51b7517
--- /dev/null
+++ b/registry/ui/table/table-footer.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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn(
+		'border-t border-cladd-bg-outline bg-cladd-surface-hover font-medium [&>tr]:last:border-b-0',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
diff --git a/registry/ui/table/table-head.svelte b/registry/ui/table/table-head.svelte
new file mode 100644
index 0000000..5cf4ac7
--- /dev/null
+++ b/registry/ui/table/table-head.svelte
@@ -0,0 +1,23 @@
+<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(
+		'h-9 bg-clip-padding px-2 text-start align-middle text-cladd-xs font-medium whitespace-nowrap text-cladd-fg-soft uppercase [&:has([role=checkbox])]:pe-0',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>
diff --git a/registry/ui/table/table-header.svelte b/registry/ui/table/table-header.svelte
new file mode 100644
index 0000000..2fbc6f8
--- /dev/null
+++ b/registry/ui/table/table-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<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn(
+		'[&_tr]:border-b [&_tr]:border-cladd-bg-outline [&_tr]:hover:bg-transparent',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
diff --git a/registry/ui/table/table-row.svelte b/registry/ui/table/table-row.svelte
new file mode 100644
index 0000000..62ac26b
--- /dev/null
+++ b/registry/ui/table/table-row.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<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={cn(
+		'border-b border-cladd-bg-outline transition-colors duration-200 data-[state=selected]:bg-cladd-surface-hover hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-cladd-surface-hover',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>
diff --git a/registry/ui/table/table.svelte b/registry/ui/table/table.svelte
new file mode 100644
index 0000000..a8d5347
--- /dev/null
+++ b/registry/ui/table/table.svelte
@@ -0,0 +1,22 @@
+<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">
+	<table
+		bind:this={ref}
+		data-slot="table"
+		class={cn('w-full caption-bottom text-cladd-sm', className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</table>
+</div>
diff --git a/registry/ui/tabs/index.ts b/registry/ui/tabs/index.ts
new file mode 100644
index 0000000..d2a7939
--- /dev/null
+++ b/registry/ui/tabs/index.ts
@@ -0,0 +1,16 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger
+};
diff --git a/registry/ui/tabs/tabs-content.svelte b/registry/ui/tabs/tabs-content.svelte
new file mode 100644
index 0000000..92044c8
--- /dev/null
+++ b/registry/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('flex-1 outline-none', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/tabs/tabs-list.svelte b/registry/ui/tabs/tabs-list.svelte
new file mode 100644
index 0000000..aac8012
--- /dev/null
+++ b/registry/ui/tabs/tabs-list.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	class={cn(
+		'cladd-surface cladd-gradient cladd-outline scrollbar-none inline-flex h-9 items-center gap-0.5 overflow-x-auto rounded-full p-1 text-cladd-fg',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/registry/ui/tabs/tabs-trigger.svelte b/registry/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 0000000..3463e87
--- /dev/null
+++ b/registry/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,20 @@
+<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(
+		"cladd-segment cladd-focusable inline-flex h-full shrink-0 items-center justify-center gap-1.5 rounded-full px-2.5 text-cladd-xs font-semibold whitespace-nowrap text-cladd-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/registry/ui/tabs/tabs.svelte b/registry/ui/tabs/tabs.svelte
new file mode 100644
index 0000000..b275bda
--- /dev/null
+++ b/registry/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('flex flex-col gap-2', className)}
+	{...restProps}
+/>
diff --git a/registry/ui/textarea/index.ts b/registry/ui/textarea/index.ts
new file mode 100644
index 0000000..9ccb3bf
--- /dev/null
+++ b/registry/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+	Root,
+	//
+	Root as Textarea
+};
diff --git a/registry/ui/textarea/textarea.svelte b/registry/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..92373d5
--- /dev/null
+++ b/registry/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(
+		'cladd-cut cladd-hoverable cladd-focusable-input flex field-sizing-content min-h-16 w-full rounded-cladd-md px-2.5 py-1.5 text-cladd-xs leading-relaxed font-medium text-cladd-fg selection:bg-brand/30 placeholder:text-cladd-fg-softer disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/registry/ui/tooltip/index.ts b/registry/ui/tooltip/index.ts
new file mode 100644
index 0000000..809e219
--- /dev/null
+++ b/registry/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/registry/ui/tooltip/tooltip-content.svelte b/registry/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..906acd7
--- /dev/null
+++ b/registry/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,35 @@
+<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 = 6,
+		side = 'top',
+		children,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			'cladd-surface cladd-gradient cladd-outline cladd-level-5 cladd-anim-tooltip z-50 w-fit max-w-72 origin-(--bits-tooltip-content-transform-origin) rounded-cladd-tooltip px-2 py-1 text-cladd-xs leading-normal font-medium text-balance text-cladd-fg',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</TooltipPrimitive.Content>
+</TooltipPortal>
diff --git a/registry/ui/tooltip/tooltip-portal.svelte b/registry/ui/tooltip/tooltip-portal.svelte
new file mode 100644
index 0000000..7d328f0
--- /dev/null
+++ b/registry/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/registry/ui/tooltip/tooltip-provider.svelte b/registry/ui/tooltip/tooltip-provider.svelte
new file mode 100644
index 0000000..b3bb5b7
--- /dev/null
+++ b/registry/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />
diff --git a/registry/ui/tooltip/tooltip-trigger.svelte b/registry/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 0000000..5631d1b
--- /dev/null
+++ b/registry/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/registry/ui/tooltip/tooltip.svelte b/registry/ui/tooltip/tooltip.svelte
new file mode 100644
index 0000000..7c9d712
--- /dev/null
+++ b/registry/ui/tooltip/tooltip.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />
diff --git a/src/claddcn.css b/src/claddcn.css
new file mode 100644
index 0000000..a794a30
--- /dev/null
+++ b/src/claddcn.css
@@ -0,0 +1,796 @@
+/*
+claddcn — the cladd.io visual system as a shadcn-svelte theme.
+Tokens, surfaces and color math ported from cladd (MIT, © 2026 cladd-ui,
+https://github.com/cladd-ui/cladd). Adapted to the shadcn convention:
+light on :root, dark under `.dark`.
+
+Import after tailwindcss:
+  @import 'tailwindcss';
+  @import 'tw-animate-css';
+  @import './claddcn.css';
+*/
+
+@import '@fontsource-variable/geist/index.css';
+@import '@fontsource-variable/geist-mono/index.css';
+
+@property --cladd-overlay {
+	syntax: '<color>';
+	inherits: false;
+	initial-value: transparent;
+}
+
+/* ───────────────────────── accents ───────────────────────── */
+
+:root,
+.cladd-color-neutral {
+	--cladd-theme: #fff;
+}
+.cladd-color-brand {
+	--cladd-theme: #388aff;
+}
+.cladd-color-red {
+	--cladd-theme: #ff0b0b;
+}
+.cladd-color-pink {
+	--cladd-theme: #ff0bac;
+}
+.cladd-color-purple {
+	--cladd-theme: #a20bff;
+}
+.cladd-color-blue {
+	--cladd-theme: #0047ff;
+}
+.cladd-color-cyan {
+	--cladd-theme: #00f9ff;
+}
+.cladd-color-lime {
+	--cladd-theme: #7dff0b;
+}
+.cladd-color-green {
+	--cladd-theme: #0bff23;
+}
+.cladd-color-yellow {
+	--cladd-theme: #fff800;
+}
+.cladd-color-orange {
+	--cladd-theme: #ff7a00;
+}
+
+/* ───────────────────────── neutral light ───────────────────────── */
+
+:root,
+.cladd-color-neutral {
+	--cladd-bg: #fff;
+	--cladd-backdrop: oklch(0.91 0 0);
+	--cladd-primary: oklch(0.1 0 0);
+	--cladd-on-primary: oklch(0.96 0 0);
+	--cladd-surface: oklch(0.97 0 0);
+	--cladd-surface-cut: oklch(0.93 0 0);
+	--cladd-fg: oklch(0.32 0 0);
+	--cladd-fg-soft: oklch(0.5 0 0);
+	--cladd-fg-softer: oklch(0.65 0 0);
+	--cladd-fg-softest: oklch(0.75 0 0);
+	--cladd-surface-white: oklch(1 0 0);
+	--cladd-surface-black: oklch(0 0 0);
+	--cladd-bg-outline: oklch(0.89 0 0);
+	--cladd-outline: oklch(0.89 0 0);
+	--cladd-surface-hover: color-mix(in oklab, var(--cladd-surface-black) 3%, transparent);
+	--cladd-surface-pressed: color-mix(in oklab, var(--cladd-surface-white) 6%, transparent);
+	--cladd-surface-hover-fill: color-mix(in oklab, var(--cladd-surface-white) 20%, transparent);
+	--cladd-surface-mix-color: var(--cladd-surface-black);
+	--cladd-surface-mix-amount: 4%;
+	--cladd-highlight-mix: 50%;
+	--cladd-fill-fade: 20%;
+
+	--shadow-cladd-cut-outline:
+		0.5px 0.5px 0px 0px color-mix(in oklab, var(--cladd-surface-black) 10%, transparent) inset,
+		0px 0px 0px 0.5px color-mix(in oklab, var(--cladd-surface-black) 5%, transparent) inset;
+	--shadow-cladd-outline-fill:
+		0px 0px 0px 0.5px color-mix(in oklab, var(--cladd-surface-black) 20%, transparent) inset,
+		1px 1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
+	--shadow-cladd-outline:
+		0px 0px 0px 1px var(--color-cladd-outline) inset,
+		1.5px 1.5px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 60%, transparent) inset;
+	--shadow-cladd-popover: 0 24px 64px -12px rgb(0 0 0 / 0.18);
+}
+
+/* ───────────────────────── neutral dark ───────────────────────── */
+
+.dark,
+.dark .cladd-color-neutral {
+	--cladd-bg: #0f0f0f;
+	--cladd-backdrop: #000;
+	--cladd-primary: oklch(0.95 0 0);
+	--cladd-on-primary: oklch(0.2 0 0);
+	--cladd-surface: oklch(0.21 0 0);
+	--cladd-surface-cut: oklch(0.19 0 0);
+	--cladd-fg: oklch(0.9 0 0);
+	--cladd-fg-soft: oklch(0.65 0 0);
+	--cladd-fg-softer: oklch(0.5 0 0);
+	--cladd-fg-softest: oklch(0.4 0 0);
+	--cladd-surface-white: oklch(1 0 0);
+	--cladd-surface-black: oklch(0 0 0);
+	--cladd-bg-outline: oklch(0.23 0 0);
+	--cladd-outline: oklch(0.3 0 0);
+	--cladd-surface-hover: color-mix(in oklab, var(--cladd-surface-white) 5%, transparent);
+	--cladd-surface-pressed: color-mix(in oklab, var(--cladd-surface-white) 3%, transparent);
+	--cladd-surface-hover-fill: color-mix(in oklab, var(--cladd-surface-white) 20%, transparent);
+	--cladd-surface-mix-color: var(--cladd-surface-white);
+	--cladd-surface-mix-amount: 6%;
+	--cladd-highlight-mix: 3%;
+	--cladd-fill-fade: 15%;
+
+	--shadow-cladd-cut-outline:
+		-1px -1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 2%, transparent) inset,
+		0px 0px 0px 1px color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
+	--shadow-cladd-outline:
+		1px 1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 8%, transparent) inset,
+		-1px -1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
+	--shadow-cladd-outline-fill:
+		1px 1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 20%, transparent) inset,
+		-1px -1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 20%, transparent) inset;
+	--shadow-cladd-popover: 0 24px 64px -12px rgb(0 0 0 / 0.5);
+}
+
+/* ───────────────────────── colored light ───────────────────────── */
+
+[class*='cladd-color-']:not(.cladd-color-neutral) {
+	--cladd-bg: oklch(from var(--cladd-theme) 1 0.015 h);
+	--cladd-backdrop: oklch(0.74 0.018 100);
+	--cladd-primary: oklch(from var(--cladd-theme) 0.5 0.18 h);
+	--cladd-on-primary: oklch(from var(--cladd-theme) 0.97 0.04 h);
+	--cladd-surface: oklch(from var(--cladd-theme) 0.97 0.015 h);
+	--cladd-surface-cut: oklch(from var(--cladd-theme) 0.93 0.02 h);
+	--cladd-fg: oklch(from var(--cladd-theme) 0.25 0.015 h);
+	--cladd-fg-soft: oklch(from var(--cladd-theme) 0.5 0.025 h);
+	--cladd-fg-softer: oklch(from var(--cladd-theme) 0.65 0.025 h);
+	--cladd-fg-softest: oklch(from var(--cladd-theme) 0.75 0.025 h);
+	--cladd-surface-white: oklch(from var(--cladd-theme) 0.98 0.04 h);
+	--cladd-surface-black: oklch(from var(--cladd-theme) 0.4 0.07 h);
+	--cladd-bg-outline: oklch(from var(--cladd-theme) 0.74 0.03 h);
+	--cladd-outline: oklch(from var(--cladd-theme) 0.88 0.025 h);
+	--cladd-surface-hover: color-mix(in oklab, var(--cladd-surface-black) 6%, transparent);
+	--cladd-surface-hover-fill: color-mix(in oklab, var(--cladd-surface-white) 10%, transparent);
+	--cladd-surface-pressed: color-mix(in oklab, var(--cladd-surface-white) 6%, transparent);
+	--cladd-surface-mix-amount: 5%;
+	--cladd-surface-mix-color: var(--cladd-surface-black);
+
+	--shadow-cladd-cut-outline:
+		0.5px 0.5px 0px 0px color-mix(in oklab, var(--cladd-surface-black) 10%, transparent) inset,
+		0px 0px 0px 0.5px color-mix(in oklab, var(--cladd-surface-black) 5%, transparent) inset;
+	--shadow-cladd-outline-fill:
+		0px 0px 0px 1px color-mix(in oklab, var(--cladd-surface-black) 40%, transparent) inset,
+		1px 1px 0px 0.25px color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
+	--shadow-cladd-outline:
+		0px 0px 0px 1px var(--color-cladd-outline) inset,
+		1.5px 1.5px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 80%, transparent) inset;
+}
+
+/* ───────────────────────── colored dark ───────────────────────── */
+
+.dark [class*='cladd-color-']:not(.cladd-color-neutral),
+.dark[class*='cladd-color-']:not(.cladd-color-neutral) {
+	--cladd-bg: oklch(from var(--cladd-theme) 0.18 0.02 h);
+	--cladd-backdrop: #000;
+	--cladd-primary: oklch(from var(--cladd-theme) 0.95 0.18 h);
+	--cladd-on-primary: oklch(from var(--cladd-theme) 0.2 0.05 h);
+	--cladd-surface: oklch(from var(--cladd-theme) 0.23 0.027 h);
+	--cladd-surface-cut: oklch(from var(--cladd-theme) 0.19 0.027 h);
+	--cladd-fg: oklch(from var(--cladd-theme) 0.9 0.04 h);
+	--cladd-fg-soft: oklch(from var(--cladd-theme) 0.65 0.04 h);
+	--cladd-fg-softer: oklch(from var(--cladd-theme) 0.5 0.04 h);
+	--cladd-fg-softest: oklch(from var(--cladd-theme) 0.4 0.04 h);
+	--cladd-surface-white: oklch(from var(--cladd-theme) 0.92 0.05 h);
+	--cladd-surface-black: oklch(from var(--cladd-theme) 0.08 0.02 h);
+	--cladd-bg-outline: oklch(from var(--cladd-theme) 0.25 0.02 h);
+	--cladd-outline: oklch(from var(--cladd-theme) 0.28 0.025 h);
+	--cladd-surface-hover: color-mix(in oklab, var(--cladd-surface-white) 5%, transparent);
+	--cladd-surface-pressed: color-mix(in oklab, var(--cladd-surface-white) 3%, transparent);
+	--cladd-surface-hover-fill: color-mix(in oklab, var(--cladd-surface-white) 40%, transparent);
+	--cladd-surface-mix-color: var(--cladd-surface-white);
+	--cladd-surface-mix-amount: 6%;
+
+	--shadow-cladd-cut-outline:
+		-1px -1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 2%, transparent) inset,
+		0px 0px 0px 1px color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
+	--shadow-cladd-outline:
+		1px 1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 8%, transparent) inset,
+		-1px -1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
+	--shadow-cladd-outline-fill:
+		1px 1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset,
+		-1px -1px 0px 0px color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
+}
+
+/* ───────────────────────── surface levels ─────────────────────────
+Every .cladd-surface nested inside another bumps one level (up to 5), the same
+auto-nesting cladd does with React context, done here with selector depth. */
+
+.cladd-surface {
+	--cladd-surface-multiplier: 0;
+}
+.cladd-surface .cladd-surface {
+	--cladd-surface-multiplier: 1;
+}
+.cladd-surface .cladd-surface .cladd-surface {
+	--cladd-surface-multiplier: 2;
+}
+.cladd-surface .cladd-surface .cladd-surface .cladd-surface {
+	--cladd-surface-multiplier: 3;
+}
+.cladd-surface .cladd-surface .cladd-surface .cladd-surface .cladd-surface {
+	--cladd-surface-multiplier: 4;
+}
+.cladd-level-1.cladd-level-1.cladd-level-1.cladd-level-1.cladd-level-1.cladd-level-1 {
+	--cladd-surface-multiplier: 0;
+}
+.cladd-level-2.cladd-level-2.cladd-level-2.cladd-level-2.cladd-level-2.cladd-level-2 {
+	--cladd-surface-multiplier: 1;
+}
+.cladd-level-3.cladd-level-3.cladd-level-3.cladd-level-3.cladd-level-3.cladd-level-3 {
+	--cladd-surface-multiplier: 2;
+}
+.cladd-level-4.cladd-level-4.cladd-level-4.cladd-level-4.cladd-level-4.cladd-level-4 {
+	--cladd-surface-multiplier: 3;
+}
+.cladd-level-5.cladd-level-5.cladd-level-5.cladd-level-5.cladd-level-5.cladd-level-5 {
+	--cladd-surface-multiplier: 4;
+}
+
+:root,
+.dark,
+.cladd-surface,
+.cladd-cut,
+[class*='cladd-level-'],
+[class*='cladd-color-'] {
+	--cladd-step: calc(var(--cladd-surface-mix-amount) * var(--cladd-surface-multiplier, 0));
+	--color-cladd-bg: var(--cladd-bg);
+	--color-cladd-backdrop: var(--cladd-backdrop);
+	--color-cladd-primary: var(--cladd-primary);
+	--color-cladd-on-primary: var(--cladd-on-primary);
+	--color-cladd-surface-white: var(--cladd-surface-white);
+	--color-cladd-surface-black: var(--cladd-surface-black);
+	--color-cladd-surface-hover: var(--cladd-surface-hover);
+	--color-cladd-surface-hover-fill: var(--cladd-surface-hover-fill);
+	--color-cladd-surface-pressed: var(--cladd-surface-pressed);
+	--color-cladd-bg-outline: var(--cladd-bg-outline);
+	--color-cladd-surface: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color) var(--cladd-step),
+		var(--cladd-surface)
+	);
+	--color-cladd-surface-prev: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color)
+			calc(var(--cladd-surface-mix-amount) * (var(--cladd-surface-multiplier, 0) - 1)),
+		var(--cladd-surface)
+	);
+	--color-cladd-surface-next: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color)
+			calc(var(--cladd-surface-mix-amount) * (var(--cladd-surface-multiplier, 0) + 1)),
+		var(--cladd-surface)
+	);
+	--color-cladd-surface-cut: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color) var(--cladd-step),
+		var(--cladd-surface-cut)
+	);
+	--color-cladd-outline: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color) var(--cladd-step),
+		var(--cladd-outline)
+	);
+	--color-cladd-fg: var(--cladd-fg);
+	--color-cladd-fg-soft: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color) var(--cladd-step),
+		var(--cladd-fg-soft)
+	);
+	--color-cladd-fg-softer: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color) var(--cladd-step),
+		var(--cladd-fg-softer)
+	);
+	--color-cladd-fg-softest: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color) var(--cladd-step),
+		var(--cladd-fg-softest)
+	);
+	--color-cladd-surface-highlight: color-mix(
+		in oklab,
+		var(--cladd-surface-white) var(--cladd-highlight-mix),
+		var(--color-cladd-surface)
+	);
+}
+
+/* ───────────────────────── tailwind tokens ───────────────────────── */
+
+@theme {
+	--color-cladd-bg: var(--cladd-bg);
+	--color-cladd-backdrop: var(--cladd-backdrop);
+	--color-cladd-primary: var(--cladd-primary);
+	--color-cladd-on-primary: var(--cladd-on-primary);
+	--color-cladd-surface: var(--cladd-surface);
+	--color-cladd-surface-cut: var(--cladd-surface-cut);
+	--color-cladd-surface-prev: var(--cladd-surface);
+	--color-cladd-surface-next: var(--cladd-surface);
+	--color-cladd-surface-highlight: var(--cladd-surface);
+	--color-cladd-surface-white: var(--cladd-surface-white);
+	--color-cladd-surface-black: var(--cladd-surface-black);
+	--color-cladd-surface-hover: var(--cladd-surface-hover);
+	--color-cladd-surface-hover-fill: var(--cladd-surface-hover-fill);
+	--color-cladd-surface-pressed: var(--cladd-surface-pressed);
+	--color-cladd-fg: var(--cladd-fg);
+	--color-cladd-fg-soft: var(--cladd-fg-soft);
+	--color-cladd-fg-softer: var(--cladd-fg-softer);
+	--color-cladd-fg-softest: var(--cladd-fg-softest);
+	--color-cladd-bg-outline: var(--cladd-bg-outline);
+	--color-cladd-outline: var(--cladd-outline);
+
+	--shadow-cladd-outline: var(--shadow-cladd-outline);
+	--shadow-cladd-outline-fill: var(--shadow-cladd-outline-fill);
+	--shadow-cladd-cut-outline: var(--shadow-cladd-cut-outline);
+	--shadow-cladd-popover: var(--shadow-cladd-popover);
+
+	--spacing-cladd-3xs: 12px;
+	--spacing-cladd-2xs: 16px;
+	--spacing-cladd-xs: 20px;
+	--spacing-cladd-sm: 24px;
+	--spacing-cladd-md: 28px;
+	--spacing-cladd-lg: 32px;
+	--spacing-cladd-xl: 40px;
+	--spacing-cladd-2xl: 48px;
+	--spacing-cladd-thumb-xs: 16px;
+	--spacing-cladd-thumb-sm: 20px;
+	--spacing-cladd-thumb-md: 24px;
+	--spacing-cladd-nested-sm: 16px;
+	--spacing-cladd-nested-md: 20px;
+	--spacing-cladd-nested-lg: 24px;
+
+	--cladd-radius: 8px;
+	--radius-cladd: var(--cladd-radius);
+	--radius-cladd-3xs: calc(var(--cladd-radius) * 12 / 28);
+	--radius-cladd-2xs: calc(var(--cladd-radius) * 16 / 28);
+	--radius-cladd-xs: calc(var(--cladd-radius) * 20 / 28);
+	--radius-cladd-sm: calc(var(--cladd-radius) * 24 / 28);
+	--radius-cladd-md: var(--cladd-radius);
+	--radius-cladd-lg: calc(var(--cladd-radius) * 32 / 28);
+	--radius-cladd-xl: calc(var(--cladd-radius) * 40 / 28);
+	--radius-cladd-2xl: calc(var(--cladd-radius) * 48 / 28);
+	--radius-cladd-wrap-md: calc(var(--cladd-radius) + 4px);
+	--radius-cladd-panel: 24px;
+	--radius-cladd-popover: 24px;
+	--radius-cladd-dialog: 24px;
+	--radius-cladd-toast: 24px;
+	--radius-cladd-tooltip: 12px;
+
+	--text-cladd-md: 16px;
+	--text-cladd-sm: 14px;
+	--text-cladd-xs: 12px;
+	--text-cladd-2xs: 10px;
+	--text-cladd-3xs: 8px;
+
+	--ease-cladd-spring: cubic-bezier(0, 1, 0.2, 1.1);
+	--ease-cladd-pop: cubic-bezier(0, 1, 0, 1.025);
+	--animate-cladd-spinner: cladd-spinner 1.5s infinite linear;
+
+	@keyframes cladd-spinner {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+}
+
+/* ───────────────────────── shadcn mapping ─────────────────────────
+Every shadcn-svelte token resolves to a cladd token, so plain shadcn markup
+(bg-card, text-muted-foreground, border…) picks up the cladd palette too. */
+
+:root {
+	--radius: 8px;
+	--background: var(--cladd-bg);
+	--foreground: var(--cladd-fg);
+	--card: var(--cladd-surface);
+	--card-foreground: var(--cladd-fg);
+	--popover: color-mix(in oklab, var(--cladd-surface-white) 50%, var(--cladd-surface));
+	--popover-foreground: var(--cladd-fg);
+	--primary: var(--cladd-primary);
+	--primary-foreground: var(--cladd-on-primary);
+	--secondary: var(--cladd-surface);
+	--secondary-foreground: var(--cladd-fg);
+	--muted: var(--cladd-surface-cut);
+	--muted-foreground: var(--cladd-fg-soft);
+	--accent: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color) var(--cladd-surface-mix-amount),
+		var(--cladd-surface)
+	);
+	--accent-foreground: var(--cladd-fg);
+	--border: var(--cladd-bg-outline);
+	--input: var(--cladd-outline);
+
+	--brand: oklch(from #388aff 0.5 0.18 h);
+	--brand-foreground: oklch(from #388aff 0.97 0.04 h);
+	--brand-soft: oklch(from #388aff 0.95 0.03 h);
+	--destructive: oklch(from #ff0b0b 0.55 0.2 h);
+	--destructive-foreground: oklch(from #ff0b0b 0.97 0.04 h);
+	--success: oklch(from #0bff23 0.5 0.15 h);
+	--success-soft: oklch(from #0bff23 0.95 0.04 h);
+	--warning: oklch(from #ff7a00 0.58 0.15 h);
+	--warning-soft: oklch(from #fff800 0.96 0.05 h);
+	--ring: var(--brand);
+
+	--chart-1: var(--brand);
+	--chart-2: var(--success);
+	--chart-3: var(--cladd-fg-soft);
+	--chart-4: oklch(from #00f9ff 0.6 0.12 h);
+	--chart-5: var(--destructive);
+
+	--sidebar: var(--cladd-surface);
+	--sidebar-foreground: var(--cladd-fg);
+	--sidebar-primary: var(--brand);
+	--sidebar-primary-foreground: var(--brand-foreground);
+	--sidebar-accent: color-mix(
+		in oklab,
+		var(--cladd-surface-mix-color) var(--cladd-surface-mix-amount),
+		var(--cladd-surface)
+	);
+	--sidebar-accent-foreground: var(--cladd-fg);
+	--sidebar-border: var(--cladd-bg-outline);
+	--sidebar-ring: var(--brand);
+}
+
+.dark {
+	--popover: color-mix(in oklab, var(--cladd-surface-white) 12%, var(--cladd-surface));
+	--brand: oklch(from #388aff 0.85 0.13 h);
+	--brand-foreground: oklch(from #388aff 0.2 0.05 h);
+	--brand-soft: oklch(from #388aff 0.23 0.027 h);
+	--destructive: oklch(from #ff0b0b 0.75 0.16 h);
+	--destructive-foreground: oklch(from #ff0b0b 0.2 0.05 h);
+	--success: oklch(from #0bff23 0.82 0.17 h);
+	--success-soft: oklch(from #0bff23 0.23 0.027 h);
+	--warning: oklch(from #fff800 0.88 0.16 h);
+	--warning-soft: oklch(from #fff800 0.23 0.027 h);
+}
+
+@theme inline {
+	--font-sans: 'Geist Variable', 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+	--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-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-brand: var(--brand);
+	--color-brand-foreground: var(--brand-foreground);
+	--color-brand-soft: var(--brand-soft);
+	--color-success: var(--success);
+	--color-success-soft: var(--success-soft);
+	--color-warning: var(--warning);
+	--color-warning-soft: var(--warning-soft);
+	--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);
+}
+
+/* ───────────────────────── surfaces ─────────────────────────
+Background is two layers over a base color: the hover/press overlay on top and
+the diagonal sheen below it. Base color stays a plain background-color, so a
+`bg-*` utility on a component recolors it without losing the cladd finish. */
+
+@layer components {
+	.cladd-surface,
+	.cladd-cut,
+	.cladd-ghost {
+		--cladd-sheen: linear-gradient(transparent, transparent);
+		background-color: var(--color-cladd-surface);
+		background-image:
+			linear-gradient(var(--cladd-overlay), var(--cladd-overlay)), var(--cladd-sheen);
+		transition-property:
+			--cladd-overlay, background-color, color, box-shadow, opacity, scale, outline-color,
+			outline-offset;
+		transition-duration: 200ms;
+		transition-timing-function: ease;
+	}
+
+	.cladd-gradient {
+		--cladd-sheen: linear-gradient(
+			to bottom right,
+			color-mix(in oklab, var(--cladd-surface-white) var(--cladd-highlight-mix), transparent),
+			transparent
+		);
+	}
+
+	/* `cladd-fill-checked` turns into a gradient fill while bits-ui marks it checked/on. */
+	.cladd-fill,
+	.cladd-gradient-fill,
+	.cladd-fill-checked:is([data-state='checked'], [data-state='indeterminate']) {
+		background-color: var(--color-cladd-primary);
+		color: var(--color-cladd-on-primary);
+	}
+	.cladd-gradient-fill,
+	.cladd-fill-checked:is([data-state='checked'], [data-state='indeterminate']) {
+		--cladd-sheen: linear-gradient(
+			to bottom right,
+			transparent,
+			color-mix(in oklab, var(--color-cladd-surface) var(--cladd-fill-fade), transparent)
+		);
+	}
+	:root:not(.dark)
+		:is(
+			.cladd-gradient-fill,
+			.cladd-fill-checked:is([data-state='checked'], [data-state='indeterminate'])
+		) {
+		--cladd-sheen: linear-gradient(
+			to bottom right,
+			color-mix(in oklab, var(--cladd-surface-white) var(--cladd-fill-fade), transparent),
+			transparent
+		);
+	}
+
+	.cladd-outline {
+		box-shadow: var(--shadow-cladd-outline);
+	}
+	.cladd-outline:is(.cladd-fill, .cladd-gradient-fill),
+	.cladd-outline.cladd-fill-checked:is([data-state='checked'], [data-state='indeterminate']) {
+		box-shadow: var(--shadow-cladd-outline-fill);
+	}
+
+	.cladd-cut {
+		background-color: var(--color-cladd-surface-cut);
+		box-shadow: var(--shadow-cladd-cut-outline);
+	}
+
+	.cladd-ghost {
+		background-color: transparent;
+		box-shadow: none;
+	}
+
+	@media (hover: hover) {
+		.cladd-hoverable:hover {
+			--cladd-overlay: var(--color-cladd-surface-hover);
+		}
+		.cladd-hoverable:is(.cladd-fill, .cladd-gradient-fill):hover,
+		.cladd-hoverable.cladd-fill-checked:is(
+				[data-state='checked'],
+				[data-state='indeterminate']
+			):hover {
+			--cladd-overlay: var(--color-cladd-surface-hover-fill);
+		}
+		.cladd-ghost.cladd-hoverable:hover {
+			--cladd-overlay: transparent;
+			background-color: var(--color-cladd-surface);
+		}
+	}
+
+	.cladd-clickable:active:not(:has(.cladd-clickable:active)),
+	.cladd-pressed {
+		--cladd-overlay: var(--color-cladd-surface-pressed);
+	}
+	.cladd-ghost.cladd-pressed,
+	.cladd-ghost.cladd-clickable:active {
+		background-color: var(--color-cladd-surface);
+	}
+	.cladd-clickable:active:not(:has(.cladd-clickable:active)) > *,
+	.cladd-press-content:active > * {
+		scale: 0.95;
+		opacity: 0.75;
+	}
+	.cladd-clickable > * {
+		transition:
+			scale 200ms ease,
+			opacity 200ms ease;
+	}
+
+	/* Button content inherits the host's flex layout, so `justify-between`, `gap-*`
+	   and friends on <Button> keep working through the extra wrapper. */
+	.cladd-button-content {
+		display: flex;
+		flex: 1 1 auto;
+		align-self: stretch;
+		min-width: 0;
+		flex-direction: inherit;
+		flex-wrap: inherit;
+		align-items: inherit;
+		justify-content: inherit;
+		gap: inherit;
+		overflow: inherit;
+		text-overflow: inherit;
+	}
+
+	/* Focus ring. Controls (buttons, switches…) get cladd's floating ring, 2px off
+	   the edge, keyboard focus only. Fields get the tight variant: a ring drawn
+	   inside the edge, so it never collides with a neighbouring button or gets
+	   clipped by an overflow container. */
+	.cladd-focusable,
+	.cladd-focusable-within {
+		outline: 2px solid transparent;
+		outline-offset: 0px;
+	}
+	.cladd-focusable:focus-visible,
+	.cladd-focusable-within:has(:focus-visible) {
+		outline: var(--cladd-focus-ring, 2px) solid var(--ring);
+		outline-offset: 2px;
+	}
+	.cladd-focusable-input {
+		outline: none;
+	}
+	.cladd-focusable-input:is(:focus, :has(:focus)) {
+		box-shadow:
+			inset 0 0 0 var(--cladd-field-ring, 1.5px) var(--ring),
+			var(--shadow-cladd-cut-outline);
+	}
+	.cladd-focusable-input:is([aria-invalid='true'], :has([aria-invalid='true'])) {
+		box-shadow:
+			inset 0 0 0 var(--cladd-field-ring, 1.5px) var(--destructive),
+			var(--shadow-cladd-cut-outline);
+	}
+
+	/* Segment: a transparent pill inside a toolbar/list that rises one level on
+	   hover and becomes a raised gradient pill when active (tabs, nav items). */
+	.cladd-segment {
+		background-color: transparent;
+		transition-property:
+			background-color, box-shadow, color, opacity, scale, outline-color, outline-offset;
+		transition-duration: 200ms;
+	}
+	@media (hover: hover) {
+		.cladd-segment:hover {
+			background-color: var(--color-cladd-surface-next);
+		}
+	}
+	.cladd-segment:is(
+		[data-state='active'],
+		[aria-current='page'],
+		[aria-selected='true'],
+		.cladd-active
+	) {
+		background-color: var(--color-cladd-surface-next);
+		background-image: linear-gradient(
+			to bottom right,
+			color-mix(in oklab, var(--cladd-surface-white) var(--cladd-highlight-mix), transparent),
+			transparent
+		);
+		box-shadow: var(--shadow-cladd-outline);
+	}
+	.cladd-segment:active {
+		scale: 0.97;
+	}
+
+	.cladd-section-title {
+		font-size: var(--text-cladd-xs);
+		font-weight: 500;
+		text-transform: uppercase;
+		color: var(--color-cladd-fg-soft);
+		user-select: none;
+	}
+
+	.cladd-backdrop {
+		background-color: color-mix(in oklab, var(--cladd-backdrop) 50%, transparent);
+	}
+	.dark .cladd-backdrop {
+		background-color: color-mix(in oklab, var(--cladd-backdrop) 70%, transparent);
+	}
+
+	.cladd-anim-dialog[data-state='open'] {
+		animation: cladd-pop-in 500ms var(--ease-cladd-spring);
+	}
+	.cladd-anim-dialog[data-state='closed'] {
+		animation: cladd-pop-out 200ms ease-out forwards;
+	}
+	.cladd-anim-popover[data-state='open'] {
+		animation: cladd-grow-in 300ms var(--ease-cladd-pop);
+	}
+	.cladd-anim-popover[data-state='closed'] {
+		animation: cladd-grow-out 200ms ease-in-out forwards;
+	}
+	.cladd-anim-tooltip[data-state='delayed-open'],
+	.cladd-anim-tooltip[data-state='instant-open'] {
+		animation: cladd-tip-in 200ms ease;
+	}
+	.cladd-anim-tooltip[data-state='closed'] {
+		animation: cladd-tip-out 200ms ease forwards;
+	}
+	.cladd-anim-fade[data-state='open'] {
+		animation: cladd-fade-in 200ms ease;
+	}
+	.cladd-anim-fade[data-state='closed'] {
+		animation: cladd-fade-out 200ms ease forwards;
+	}
+}
+
+@keyframes cladd-pop-in {
+	from {
+		opacity: 0;
+		scale: 0.75;
+	}
+}
+@keyframes cladd-pop-out {
+	to {
+		opacity: 0;
+		scale: 0.75;
+	}
+}
+@keyframes cladd-grow-in {
+	from {
+		opacity: 0;
+		scale: 0;
+	}
+}
+@keyframes cladd-grow-out {
+	to {
+		opacity: 0;
+		scale: 0;
+	}
+}
+@keyframes cladd-tip-in {
+	from {
+		opacity: 0;
+		scale: 0.5;
+	}
+}
+@keyframes cladd-tip-out {
+	to {
+		opacity: 0;
+		scale: 0.5;
+	}
+}
+@keyframes cladd-fade-in {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes cladd-fade-out {
+	to {
+		opacity: 0;
+	}
+}
+
+@layer base {
+	body {
+		font-family: var(--font-sans);
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+	::selection {
+		background: color-mix(in oklab, var(--brand) 30%, transparent);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.cladd-surface,
+		.cladd-cut,
+		.cladd-ghost,
+		.cladd-clickable > * {
+			transition-duration: 0ms;
+		}
+		[class*='cladd-anim-'] {
+			animation-duration: 1ms !important;
+		}
+	}
+}