commit 8254a28baa00845c84e128e82388a3e316fb9bd1
Author: Gregor Lohaus <gregor.lohaus@8mylez.com>
Date:   Wed Apr 8 04:29:35 2026 +0200

    init

diff --git a/.devenv.flake.nix b/.devenv.flake.nix
new file mode 100644
index 0000000..38ae300
--- /dev/null
+++ b/.devenv.flake.nix
@@ -0,0 +1,513 @@
+{
+  inputs =
+    let
+      vars = {
+  version = "1.11.2";
+  system = "x86_64-linux";
+  devenv_root = "/home/anon/Dev/glstack";
+  project_input_ref = "path:/home/anon/Dev/glstack";
+  devenv_dotfile = "/home/anon/Dev/glstack/.devenv";
+  devenv_dotfile_path = ./.devenv;
+  devenv_tmpdir = "/run/user/1000";
+  devenv_runtime = "/run/user/1000/devenv-5149e7a";
+  devenv_istesting = false;
+  devenv_direnvrc_latest_version = 1;
+  container_name = null;
+  active_profiles = [
+  ];
+  hostname = "debian";
+  username = "anon";
+  git_root = null;
+  secretspec = null;
+};
+    in
+    {
+      git-hooks.url = "github:cachix/git-hooks.nix";
+      git-hooks.inputs.nixpkgs.follows = "nixpkgs";
+      pre-commit-hooks.follows = "git-hooks";
+      nixpkgs.url = "github:cachix/devenv-nixpkgs/rolling";
+      devenv.url = "github:cachix/devenv?dir=src/modules";
+    }
+    // (
+      if builtins.pathExists (vars.devenv_dotfile_path + "/flake.json") then
+        builtins.fromJSON (builtins.readFile (vars.devenv_dotfile_path + "/flake.json"))
+      else
+        { }
+    );
+
+  outputs =
+    { nixpkgs, ... }@inputs:
+    let
+      vars = {
+  version = "1.11.2";
+  system = "x86_64-linux";
+  devenv_root = "/home/anon/Dev/glstack";
+  project_input_ref = "path:/home/anon/Dev/glstack";
+  devenv_dotfile = "/home/anon/Dev/glstack/.devenv";
+  devenv_dotfile_path = ./.devenv;
+  devenv_tmpdir = "/run/user/1000";
+  devenv_runtime = "/run/user/1000/devenv-5149e7a";
+  devenv_istesting = false;
+  devenv_direnvrc_latest_version = 1;
+  container_name = null;
+  active_profiles = [
+  ];
+  hostname = "debian";
+  username = "anon";
+  git_root = null;
+  secretspec = null;
+};
+      devenv =
+        if builtins.pathExists (vars.devenv_dotfile_path + "/devenv.json") then
+          builtins.fromJSON (builtins.readFile (vars.devenv_dotfile_path + "/devenv.json"))
+        else
+          { };
+
+      systems = [
+        "x86_64-linux"
+        "aarch64-linux"
+        "x86_64-darwin"
+        "aarch64-darwin"
+      ];
+
+      # Function to create devenv configuration for a specific system with profiles support
+      mkDevenvForSystem =
+        targetSystem:
+        let
+          getOverlays =
+            inputName: inputAttrs:
+            map (
+              overlay:
+              let
+                input =
+                  inputs.${inputName} or (throw "No such input `${inputName}` while trying to configure overlays.");
+              in
+              input.overlays.${overlay}
+                or (throw "Input `${inputName}` has no overlay called `${overlay}`. Supported overlays: ${nixpkgs.lib.concatStringsSep ", " (builtins.attrNames input.overlays)}")
+            ) inputAttrs.overlays or [ ];
+          overlays = nixpkgs.lib.flatten (nixpkgs.lib.mapAttrsToList getOverlays (devenv.inputs or { }));
+          permittedUnfreePackages =
+            devenv.nixpkgs.per-platform."${targetSystem}".permittedUnfreePackages
+              or devenv.nixpkgs.permittedUnfreePackages or [ ];
+          pkgs = import nixpkgs {
+            system = targetSystem;
+            config = {
+              allowUnfree =
+                devenv.nixpkgs.per-platform."${targetSystem}".allowUnfree or devenv.nixpkgs.allowUnfree
+                  or devenv.allowUnfree or false;
+              allowBroken =
+                devenv.nixpkgs.per-platform."${targetSystem}".allowBroken or devenv.nixpkgs.allowBroken
+                  or devenv.allowBroken or false;
+              cudaSupport =
+                devenv.nixpkgs.per-platform."${targetSystem}".cudaSupport or devenv.nixpkgs.cudaSupport or false;
+              cudaCapabilities =
+                devenv.nixpkgs.per-platform."${targetSystem}".cudaCapabilities or devenv.nixpkgs.cudaCapabilities
+                  or [ ];
+              permittedInsecurePackages =
+                devenv.nixpkgs.per-platform."${targetSystem}".permittedInsecurePackages
+                  or devenv.nixpkgs.permittedInsecurePackages or devenv.permittedInsecurePackages or [ ];
+              allowUnfreePredicate =
+                if (permittedUnfreePackages != [ ]) then
+                  (pkg: builtins.elem (nixpkgs.lib.getName pkg) permittedUnfreePackages)
+                else
+                  (_: false);
+            };
+            inherit overlays;
+          };
+          inherit (pkgs) lib;
+          importModule =
+            path:
+            if lib.hasPrefix "./" path then
+              if lib.hasSuffix ".nix" path then
+                ./. + (builtins.substring 1 255 path)
+              else
+                ./. + (builtins.substring 1 255 path) + "/devenv.nix"
+            else if lib.hasPrefix "../" path then
+              # For parent directory paths, concatenate with /.
+              # ./. refers to the directory containing this file (project root)
+              # So ./. + "/../shared" = <project-root>/../shared
+              if lib.hasSuffix ".nix" path then ./. + "/${path}" else ./. + "/${path}/devenv.nix"
+            else
+              let
+                paths = lib.splitString "/" path;
+                name = builtins.head paths;
+                input = inputs.${name} or (throw "Unknown input ${name}");
+                subpath = "/${lib.concatStringsSep "/" (builtins.tail paths)}";
+                devenvpath = "${input}" + subpath;
+                devenvdefaultpath = devenvpath + "/devenv.nix";
+              in
+              if lib.hasSuffix ".nix" devenvpath then
+                devenvpath
+              else if builtins.pathExists devenvdefaultpath then
+                devenvdefaultpath
+              else
+                throw (devenvdefaultpath + " file does not exist for input ${name}.");
+
+          # Phase 1: Base evaluation to extract profile definitions
+          baseProject = pkgs.lib.evalModules {
+            specialArgs = inputs // {
+              inherit inputs;
+            };
+            modules = [
+              (
+                { config, ... }:
+                {
+                  _module.args.pkgs = pkgs.appendOverlays (config.overlays or [ ]);
+                }
+              )
+              (inputs.devenv.modules + /top-level.nix)
+              (
+                { options, ... }:
+                {
+                  config.devenv = lib.mkMerge [
+                    {
+                      cliVersion = vars.version;
+                      root = vars.devenv_root;
+                      dotfile = vars.devenv_dotfile;
+                    }
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "tmpdir" options.devenv) {
+                      tmpdir = vars.devenv_tmpdir;
+                    })
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "isTesting" options.devenv) {
+                      isTesting = vars.devenv_istesting;
+                    })
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "runtime" options.devenv) {
+                      runtime = vars.devenv_runtime;
+                    })
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "direnvrcLatestVersion" options.devenv) {
+                      direnvrcLatestVersion = vars.devenv_direnvrc_latest_version;
+                    })
+                  ];
+                }
+              )
+              (
+                { options, ... }:
+                {
+                  config = lib.mkMerge [
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "git" options) {
+                      git.root = vars.git_root;
+                    })
+                  ];
+                }
+              )
+              (pkgs.lib.optionalAttrs (vars.container_name != null) {
+                container.isBuilding = pkgs.lib.mkForce true;
+                containers.${vars.container_name}.isBuilding = true;
+              })
+            ]
+            ++ (map importModule (devenv.imports or [ ]))
+            ++ [
+              (if builtins.pathExists ./devenv.nix then ./devenv.nix else { })
+              (devenv.devenv or { })
+              (if builtins.pathExists ./devenv.local.nix then ./devenv.local.nix else { })
+              (
+                if builtins.pathExists (vars.devenv_dotfile_path + "/cli-options.nix") then
+                  import (vars.devenv_dotfile_path + "/cli-options.nix")
+                else
+                  { }
+              )
+            ];
+          };
+
+          # Phase 2: Extract and apply profiles using extendModules with priority overrides
+          project =
+            let
+              # Build ordered list of profile names: hostname -> user -> manual
+              manualProfiles = vars.active_profiles;
+              currentHostname = vars.hostname;
+              currentUsername = vars.username;
+              hostnameProfiles = lib.optional (
+                currentHostname != ""
+                && builtins.hasAttr currentHostname (baseProject.config.profiles.hostname or { })
+              ) "hostname.${currentHostname}";
+              userProfiles = lib.optional (
+                currentUsername != "" && builtins.hasAttr currentUsername (baseProject.config.profiles.user or { })
+              ) "user.${currentUsername}";
+
+              # Ordered list of profiles to activate
+              orderedProfiles = hostnameProfiles ++ userProfiles ++ manualProfiles;
+
+              # Resolve profile extends with cycle detection
+              resolveProfileExtends =
+                profileName: visited:
+                if builtins.elem profileName visited then
+                  throw "Circular dependency detected in profile extends: ${lib.concatStringsSep " -> " visited} -> ${profileName}"
+                else
+                  let
+                    profile = getProfileConfig profileName;
+                    extends = profile.extends or [ ];
+                    newVisited = visited ++ [ profileName ];
+                    extendedProfiles = lib.flatten (map (name: resolveProfileExtends name newVisited) extends);
+                  in
+                  extendedProfiles ++ [ profileName ];
+
+              # Get profile configuration by name from baseProject
+              getProfileConfig =
+                profileName:
+                if lib.hasPrefix "hostname." profileName then
+                  let
+                    name = lib.removePrefix "hostname." profileName;
+                  in
+                  baseProject.config.profiles.hostname.${name}
+                else if lib.hasPrefix "user." profileName then
+                  let
+                    name = lib.removePrefix "user." profileName;
+                  in
+                  baseProject.config.profiles.user.${name}
+                else
+                  let
+                    availableProfiles = builtins.attrNames (baseProject.config.profiles or { });
+                    hostnameProfiles = map (n: "hostname.${n}") (
+                      builtins.attrNames (baseProject.config.profiles.hostname or { })
+                    );
+                    userProfiles = map (n: "user.${n}") (builtins.attrNames (baseProject.config.profiles.user or { }));
+                    allAvailableProfiles = availableProfiles ++ hostnameProfiles ++ userProfiles;
+                  in
+                  baseProject.config.profiles.${profileName}
+                    or (throw "Profile '${profileName}' not found. Available profiles: ${lib.concatStringsSep ", " allAvailableProfiles}");
+
+              # Fold over ordered profiles to build final list with extends
+              expandedProfiles = lib.foldl' (
+                acc: profileName:
+                let
+                  allProfileNames = resolveProfileExtends profileName [ ];
+                in
+                acc ++ allProfileNames
+              ) [ ] orderedProfiles;
+
+              # Map over expanded profiles and apply priorities
+              allPrioritizedModules = lib.imap0 (
+                index: profileName:
+                let
+                  # Decrement priority for each profile (lower = higher precedence)
+                  # Start with the next lowest priority after the default priority for values (100)
+                  profilePriority = (lib.modules.defaultOverridePriority - 1) - index;
+                  profileConfig = getProfileConfig profileName;
+
+                  # Check if an option type needs explicit override to resolve conflicts
+                  # Only apply overrides to LEAF values (scalars), not collection types that can merge
+                  typeNeedsOverride =
+                    type:
+                    if type == null then
+                      false
+                    else
+                      let
+                        typeName = type.name or type._type or "";
+
+                        # True leaf types that need priority resolution when they conflict
+                        isLeafType = builtins.elem typeName [
+                          "str"
+                          "int"
+                          "bool"
+                          "enum"
+                          "path"
+                          "package"
+                          "float"
+                          "anything"
+                        ];
+                      in
+                      if isLeafType then
+                        true
+                      else if typeName == "nullOr" then
+                        # For nullOr, check the wrapped type recursively
+                        let
+                          innerType =
+                            type.elemType
+                              or (if type ? nestedTypes && type.nestedTypes ? elemType then type.nestedTypes.elemType else null);
+                        in
+                        if innerType != null then typeNeedsOverride innerType else false
+                      else
+                        # Everything else (collections, submodules, etc.) should merge naturally
+                        false;
+
+                  # Check if a config path needs explicit override
+                  pathNeedsOverride =
+                    optionPath:
+                    let
+                      # Try direct option first
+                      directOption = lib.attrByPath optionPath null baseProject.options;
+                    in
+                    if directOption != null && lib.isOption directOption then
+                      typeNeedsOverride directOption.type
+                    else if optionPath != [ ] then
+                      # Check parent for freeform type
+                      let
+                        parentPath = lib.init optionPath;
+                        parentOption = lib.attrByPath parentPath null baseProject.options;
+                      in
+                      if parentOption != null && lib.isOption parentOption then
+                        let
+                          # Look for freeform type:
+                          # 1. Standard location: type.freeformType (primary)
+                          # 2. Nested location: type.nestedTypes.freeformType (evaluated form)
+                          freeformType = parentOption.type.freeformType or parentOption.type.nestedTypes.freeformType or null;
+                          elementType =
+                            if freeformType ? elemType then
+                              freeformType.elemType
+                            else if freeformType ? nestedTypes && freeformType.nestedTypes ? elemType then
+                              freeformType.nestedTypes.elemType
+                            else
+                              freeformType;
+                        in
+                        typeNeedsOverride elementType
+                      else
+                        false
+                    else
+                      false;
+
+                  # Support overriding both plain attrset modules and functions
+                  applyModuleOverride =
+                    config:
+                    if builtins.isFunction config then
+                      let
+                        wrapper = args: applyOverrideRecursive (config args) [ ];
+                      in
+                      lib.mirrorFunctionArgs config wrapper
+                    else
+                      applyOverrideRecursive config [ ];
+
+                  # Apply overrides recursively based on option types
+                  applyOverrideRecursive =
+                    config: optionPath:
+                    if lib.isAttrs config && config ? _type then
+                      config # Don't touch values with existing type metadata
+                    else if lib.isAttrs config then
+                      lib.mapAttrs (name: value: applyOverrideRecursive value (optionPath ++ [ name ])) config
+                    else if pathNeedsOverride optionPath then
+                      lib.mkOverride profilePriority config
+                    else
+                      config;
+
+                  # Apply priority overrides recursively to the deferredModule imports structure
+                  prioritizedConfig = (
+                    profileConfig.module
+                    // {
+                      imports = lib.map (
+                        importItem:
+                        importItem
+                        // {
+                          imports = lib.map (nestedImport: applyModuleOverride nestedImport) (importItem.imports or [ ]);
+                        }
+                      ) (profileConfig.module.imports or [ ]);
+                    }
+                  );
+                in
+                prioritizedConfig
+              ) expandedProfiles;
+            in
+            if allPrioritizedModules == [ ] then
+              baseProject
+            else
+              baseProject.extendModules { modules = allPrioritizedModules; };
+
+          config = project.config;
+
+          options = pkgs.nixosOptionsDoc {
+            options = builtins.removeAttrs project.options [ "_module" ];
+            warningsAreErrors = false;
+            # Unpack Nix types, e.g. literalExpression, mDoc.
+            transformOptions =
+              let
+                isDocType =
+                  v:
+                  builtins.elem v [
+                    "literalDocBook"
+                    "literalExpression"
+                    "literalMD"
+                    "mdDoc"
+                  ];
+              in
+              lib.attrsets.mapAttrs (
+                _: v:
+                if v ? _type && isDocType v._type then
+                  v.text
+                else if v ? _type && v._type == "derivation" then
+                  v.name
+                else
+                  v
+              );
+          };
+
+          # Recursively search for outputs in the config.
+          # This is used when not building a specific output by attrpath.
+          build =
+            options: config:
+            lib.concatMapAttrs (
+              name: option:
+              if lib.isOption option then
+                let
+                  typeName = option.type.name or "";
+                in
+                if
+                  builtins.elem typeName [
+                    "output"
+                    "outputOf"
+                  ]
+                then
+                  { ${name} = config.${name}; }
+                else
+                  { }
+              else if builtins.isAttrs option && !lib.isDerivation option then
+                let
+                  v = build option config.${name};
+                in
+                if v != { } then
+                  {
+                    ${name} = v;
+                  }
+                else
+                  { }
+              else
+                { }
+            ) options;
+        in
+        {
+          inherit
+            config
+            options
+            build
+            project
+            ;
+          shell = config.shell;
+          packages = {
+            optionsJSON = options.optionsJSON;
+            # deprecated
+            inherit (config)
+              info
+              procfileScript
+              procfileEnv
+              procfile
+              ;
+            ci = config.ciDerivation;
+          };
+        };
+
+      # Generate per-system devenv configurations
+      perSystem = nixpkgs.lib.genAttrs systems mkDevenvForSystem;
+
+      # Default devenv for the current system
+      currentSystemDevenv = perSystem.${vars.system};
+    in
+    {
+      devShell = nixpkgs.lib.genAttrs systems (s: perSystem.${s}.shell);
+      packages = nixpkgs.lib.genAttrs systems (s: perSystem.${s}.packages);
+
+      # Per-system devenv configurations
+      devenv = {
+        # Default devenv for the current system
+        inherit (currentSystemDevenv)
+          config
+          options
+          build
+          shell
+          packages
+          project
+          ;
+        # Per-system devenv configurations
+        inherit perSystem;
+      };
+
+      # Legacy build output
+      build = currentSystemDevenv.build currentSystemDevenv.options currentSystemDevenv.config;
+    };
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..64650e5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
+.devenv
+devenv.lock
diff --git a/.helix/languages.toml b/.helix/languages.toml
new file mode 100644
index 0000000..1813968
--- /dev/null
+++ b/.helix/languages.toml
@@ -0,0 +1,4 @@
+[[language]]
+name="typescript"
+roots = ["package.json"]
+language-servers = ["typescript-language-server"]
diff --git a/.ignore b/.ignore
new file mode 100644
index 0000000..2c78c9a
--- /dev/null
+++ b/.ignore
@@ -0,0 +1,2 @@
+node_modules
+.devenv
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..764c1dd
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,106 @@
+
+Default to using Bun instead of Node.js.
+
+- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
+- Use `bun test` instead of `jest` or `vitest`
+- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild`
+- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`
+- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>`
+- Use `bunx <package> <command>` instead of `npx <package> <command>`
+- Bun automatically loads .env, so don't use dotenv.
+
+## APIs
+
+- `Bun.serve()` supports WebSockets, HTTPS, and routes. Don't use `express`.
+- `bun:sqlite` for SQLite. Don't use `better-sqlite3`.
+- `Bun.redis` for Redis. Don't use `ioredis`.
+- `Bun.sql` for Postgres. Don't use `pg` or `postgres.js`.
+- `WebSocket` is built-in. Don't use `ws`.
+- Prefer `Bun.file` over `node:fs`'s readFile/writeFile
+- Bun.$`ls` instead of execa.
+
+## Testing
+
+Use `bun test` to run tests.
+
+```ts#index.test.ts
+import { test, expect } from "bun:test";
+
+test("hello world", () => {
+  expect(1).toBe(1);
+});
+```
+
+## Frontend
+
+Use HTML imports with `Bun.serve()`. Don't use `vite`. HTML imports fully support React, CSS, Tailwind.
+
+Server:
+
+```ts#index.ts
+import index from "./index.html"
+
+Bun.serve({
+  routes: {
+    "/": index,
+    "/api/users/:id": {
+      GET: (req) => {
+        return new Response(JSON.stringify({ id: req.params.id }));
+      },
+    },
+  },
+  // optional websocket support
+  websocket: {
+    open: (ws) => {
+      ws.send("Hello, world!");
+    },
+    message: (ws, message) => {
+      ws.send(message);
+    },
+    close: (ws) => {
+      // handle close
+    }
+  },
+  development: {
+    hmr: true,
+    console: true,
+  }
+})
+```
+
+HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. `<link>` tags can point to stylesheets and Bun's CSS bundler will bundle.
+
+```html#index.html
+<html>
+  <body>
+    <h1>Hello, world!</h1>
+    <script type="module" src="./frontend.tsx"></script>
+  </body>
+</html>
+```
+
+With the following `frontend.tsx`:
+
+```tsx#frontend.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+// import .css files directly and it works
+import './index.css';
+
+const root = createRoot(document.body);
+
+export default function Frontend() {
+  return <h1>Hello, world!</h1>;
+}
+
+root.render(<Frontend />);
+```
+
+Then, run index.ts
+
+```sh
+bun --hot ./index.ts
+```
+
+For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9f2f951
--- /dev/null
+++ b/README.md
@@ -0,0 +1,15 @@
+# glstack
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.10. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
diff --git a/bun.lock b/bun.lock
new file mode 100644
index 0000000..03321de
--- /dev/null
+++ b/bun.lock
@@ -0,0 +1,47 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "glstack",
+      "dependencies": {
+        "@clack/prompts": "^1.2.0",
+        "@gregorlohaus/tdir": "^0.1.1",
+        "zod": "^4.3.6",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@clack/core": ["@clack/core@1.2.0", "", { "dependencies": { "fast-wrap-ansi": "^0.1.3", "sisteransi": "^1.0.5" } }, "sha512-qfxof/3T3t9DPU/Rj3OmcFyZInceqj/NVtO9rwIuJqCUgh32gwPjpFQQp/ben07qKlhpwq7GzfWpST4qdJ5Drg=="],
+
+    "@clack/prompts": ["@clack/prompts@1.2.0", "", { "dependencies": { "@clack/core": "1.2.0", "fast-string-width": "^1.1.0", "fast-wrap-ansi": "^0.1.3", "sisteransi": "^1.0.5" } }, "sha512-4jmztR9fMqPMjz6H/UZXj0zEmE43ha1euENwkckKKel4XpSfokExPo5AiVStdHSAlHekz4d0CA/r45Ok1E4D3w=="],
+
+    "@gregorlohaus/tdir": ["@gregorlohaus/tdir@0.1.1", "", { "peerDependencies": { "zod": "^4" } }, "sha512-4NlHif5Pn6Vh1TzCj8B1d+pz8ab5/CodC2Cq9HVr1wHdFlgXM/yjtZEDLdBMtwqz1n1oCCEjzV7XYbin2ywsjQ=="],
+
+    "@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
+
+    "@types/node": ["@types/node@25.5.2", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg=="],
+
+    "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
+    "fast-string-truncated-width": ["fast-string-truncated-width@1.2.1", "", {}, "sha512-Q9acT/+Uu3GwGj+5w/zsGuQjh9O1TyywhIwAxHudtWrgF09nHOPrvTLhQevPbttcxjr/SNN7mJmfOw/B1bXgow=="],
+
+    "fast-string-width": ["fast-string-width@1.1.0", "", { "dependencies": { "fast-string-truncated-width": "^1.2.0" } }, "sha512-O3fwIVIH5gKB38QNbdg+3760ZmGz0SZMgvwJbA1b2TGXceKE6A2cOlfogh1iw8lr049zPyd7YADHy+B7U4W9bQ=="],
+
+    "fast-wrap-ansi": ["fast-wrap-ansi@0.1.6", "", { "dependencies": { "fast-string-width": "^1.1.0" } }, "sha512-HlUwET7a5gqjURj70D5jl7aC3Zmy4weA1SHUfM0JFI0Ptq987NH2TwbBFLoERhfwk+E+eaq4EK3jXoT+R3yp3w=="],
+
+    "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
+
+    "zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
+  }
+}
diff --git a/devenv.nix b/devenv.nix
new file mode 100644
index 0000000..ed38107
--- /dev/null
+++ b/devenv.nix
@@ -0,0 +1,7 @@
+{ pkgs, lib, config, inputs, ... }:
+
+{
+  packages = [ pkgs.bun pkgs.nodejs_24];
+  languages.typescript.enable = true;
+
+}
diff --git a/index.ts b/index.ts
new file mode 100644
index 0000000..f562a76
--- /dev/null
+++ b/index.ts
@@ -0,0 +1,56 @@
+#!/usr/bin/env bun
+
+import * as p from "@clack/prompts";
+import { initRenderer } from '@gregorlohaus/tdir'
+import { z } from 'zod'
+import join from "node:path";
+
+p.intro("create-glstack");
+
+const project = await p.group(
+  {
+    name: () =>
+      p.text({
+        message: "What would you like to name your project?",
+        placeholder: "glstack-test",
+        defaultValue: "glstack-test",
+        validate: (value) => {
+          return undefined
+        },
+      }),
+    goprefix: () =>
+      p.text({
+        message: "What would you like to use as a go package prefix?",
+        placeholder: "github.com/glstack-test",
+        defaultValue: "github.com/glstack-test",
+        validate: (value) => {
+          return undefined
+        },
+      }),
+  },
+  {
+    onCancel: () => {
+      p.cancel("Operation cancelled.");
+      process.exit(0);
+    },
+  }
+);
+const createRenderer = initRenderer('./template')
+const render = createRenderer(z.object({
+  project: z.object({
+    name: z.string(),
+    goprefix: z.string()
+  })
+}))
+const destDir = join.join("./",project.name);
+render(destDir,{project})
+// TODO: template rendering — copy/generate files into destDir
+
+const s = p.spinner();
+s.start("Installing dependencies");
+await Bun.$`bun install`.cwd(join.join(destDir)).quiet();
+await Bun.$`bun install`.cwd(join.join(destDir,'packages','rpc')).quiet();
+await Bun.$`bun install`.cwd(join.join(destDir,'apps','web')).quiet();
+s.stop("Dependencies installed.");
+
+p.outro("You're all set!");
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..280a5ff
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "create-glstack",
+  "version": "0.0.1",
+  "module": "index.ts",
+  "type": "module",
+  "bin": {
+    "create-glstack": "./index.ts"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.2.0",
+    "@gregorlohaus/tdir": "^0.1.1",
+    "zod": "^4.3.6"
+  }
+}
diff --git a/template/.envrc b/template/.envrc
new file mode 100644
index 0000000..cc5c18b
--- /dev/null
+++ b/template/.envrc
@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+export DIRENV_WARN_TIMEOUT=20s
+
+eval "$(devenv direnvrc)"
+
+# `use devenv` supports the same options as the `devenv shell` command.
+#
+# To silence all output, use `--quiet`.
+#
+# Example usage: use devenv --quiet --impure --option services.postgres.enable:bool true
+use devenv
diff --git a/template/.gitignore b/template/.gitignore
new file mode 100644
index 0000000..f58ea61
--- /dev/null
+++ b/template/.gitignore
@@ -0,0 +1,12 @@
+# Devenv
+.devenv*
+devenv.local.nix
+devenv.local.yaml
+
+# direnv
+.direnv
+
+# pre-commit
+.pre-commit-config.yaml
+node_modules
+scripts/node_modules
diff --git a/template/.ignore b/template/.ignore
new file mode 100644
index 0000000..ae49879
--- /dev/null
+++ b/template/.ignore
@@ -0,0 +1,10 @@
+# Devenv
+.devenv*
+devenv.local.nix
+devenv.local.yaml
+
+# direnv
+.direnv
+
+# pre-commit
+.pre-commit-config.yaml
diff --git a/template/apps/web/.gitignore b/template/apps/web/.gitignore
new file mode 100644
index 0000000..cd8e1d7
--- /dev/null
+++ b/template/apps/web/.gitignore
@@ -0,0 +1,26 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+# Paraglide
+src/lib/paraglide
+project.inlang/cache/
diff --git a/template/apps/web/.ignore b/template/apps/web/.ignore
new file mode 100644
index 0000000..cd8e1d7
--- /dev/null
+++ b/template/apps/web/.ignore
@@ -0,0 +1,26 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+# Paraglide
+src/lib/paraglide
+project.inlang/cache/
diff --git a/template/apps/web/.npmrc b/template/apps/web/.npmrc
new file mode 100644
index 0000000..b6f27f1
--- /dev/null
+++ b/template/apps/web/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/template/apps/web/.prettierignore b/template/apps/web/.prettierignore
new file mode 100644
index 0000000..7d74fe2
--- /dev/null
+++ b/template/apps/web/.prettierignore
@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
diff --git a/template/apps/web/.prettierrc b/template/apps/web/.prettierrc
new file mode 100644
index 0000000..819fa57
--- /dev/null
+++ b/template/apps/web/.prettierrc
@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"tailwindStylesheet": "./src/routes/layout.css"
+}
diff --git a/template/apps/web/.vscode/extensions.json b/template/apps/web/.vscode/extensions.json
new file mode 100644
index 0000000..252fc41
--- /dev/null
+++ b/template/apps/web/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+	"recommendations": ["svelte.svelte-vscode", "esbenp.prettier-vscode", "bradlc.vscode-tailwindcss"]
+}
diff --git a/template/apps/web/.vscode/settings.json b/template/apps/web/.vscode/settings.json
new file mode 100644
index 0000000..bc31e15
--- /dev/null
+++ b/template/apps/web/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+	"files.associations": {
+		"*.css": "tailwindcss"
+	}
+}
diff --git a/template/apps/web/README.md b/template/apps/web/README.md
new file mode 100644
index 0000000..db53934
--- /dev/null
+++ b/template/apps/web/README.md
@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+bun x sv@0.14.0 create --template minimal --types ts --add prettier tailwindcss="plugins:typography" paraglide="languageTags:en, de-De+demo:no" --install bun web
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
diff --git a/template/apps/web/components.json b/template/apps/web/components.json
new file mode 100644
index 0000000..0eaa3b2
--- /dev/null
+++ b/template/apps/web/components.json
@@ -0,0 +1,20 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/routes/layout.css",
+		"baseColor": "mist"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry",
+	"style": "lyra",
+	"iconLibrary": "lucide",
+	"menuColor": "default",
+	"menuAccent": "subtle"
+}
diff --git a/template/apps/web/messages/de-de.json b/template/apps/web/messages/de-de.json
new file mode 100644
index 0000000..d713555
--- /dev/null
+++ b/template/apps/web/messages/de-de.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from de-de!"
+}
diff --git a/template/apps/web/messages/en.json b/template/apps/web/messages/en.json
new file mode 100644
index 0000000..37a9894
--- /dev/null
+++ b/template/apps/web/messages/en.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from en!"
+}
diff --git a/template/apps/web/package.json b/template/apps/web/package.json
new file mode 100644
index 0000000..9f8ab80
--- /dev/null
+++ b/template/apps/web/package.json
@@ -0,0 +1,59 @@
+{
+	"name": "web",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@fontsource-variable/roboto": "^5.2.10",
+		"@inlang/paraglide-js": "^2.10.0",
+		"@internationalized/date": "^3.12.0",
+		"@lucide/svelte": "^0.577.0",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.18",
+		"@tanstack/table-core": "^8.21.3",
+		"bits-ui": "^2.16.3",
+		"clsx": "^2.1.1",
+		"embla-carousel-svelte": "^8.6.0",
+		"formsnap": "^2.0.1",
+		"layerchart": "2.0.0-next.48",
+		"mode-watcher": "^1.1.0",
+		"paneforge": "^1.0.2",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"shadcn-svelte": "^1.2.7",
+		"svelte": "^5.54.0",
+		"svelte-check": "^4.4.2",
+		"svelte-sonner": "^1.1.0",
+		"sveltekit-superforms": "^2.30.0",
+		"tailwind-merge": "^3.5.0",
+		"tailwind-variants": "^3.2.2",
+		"tailwindcss": "^4.1.18",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.3",
+		"vaul-svelte": "^1.0.0-next.7",
+		"vite": "^7.3.1"
+	},
+	"dependencies": {
+		"@bufbuild/protobuf": "^2.11.0",
+		"@connectrpc/connect": "^2.1.1",
+		"@connectrpc/connect-web": "^2.1.1",
+		"@<@var(context.project.name)>/rpc": "workspace:*",
+		"@tanstack/query-db-collection": "^1.0.33",
+		"@tanstack/svelte-db": "^0.1.79",
+		"@tanstack/svelte-query": "^6.1.13"
+	}
+}
diff --git a/template/apps/web/project.inlang/settings.json b/template/apps/web/project.inlang/settings.json
new file mode 100644
index 0000000..e9eac7e
--- /dev/null
+++ b/template/apps/web/project.inlang/settings.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{locale}.json"
+	},
+	"baseLocale": "en",
+	"locales": ["en", "de-de"]
+}
diff --git a/template/apps/web/src/app.html b/template/apps/web/src/app.html
new file mode 100644
index 0000000..639cbb8
--- /dev/null
+++ b/template/apps/web/src/app.html
@@ -0,0 +1,16 @@
+<!doctype html>
+
+<html lang="%paraglide.lang%" dir="%paraglide.dir%">
+	<head>
+		<meta charset="utf-8" />
+
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		<meta name="text-scale" content="scale" />
+		%sveltekit.head%
+	</head>
+
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/template/apps/web/src/hooks.server.ts b/template/apps/web/src/hooks.server.ts
new file mode 100644
index 0000000..ac5e591
--- /dev/null
+++ b/template/apps/web/src/hooks.server.ts
@@ -0,0 +1,17 @@
+import type { Handle } from '@sveltejs/kit';
+import { getTextDirection } from '$lib/paraglide/runtime';
+import { paraglideMiddleware } from '$lib/paraglide/server';
+
+const handleParaglide: Handle = ({ event, resolve }) =>
+	paraglideMiddleware(event.request, ({ request, locale }) => {
+		event.request = request;
+
+		return resolve(event, {
+			transformPageChunk: ({ html }) =>
+				html
+					.replace('%paraglide.lang%', locale)
+					.replace('%paraglide.dir%', getTextDirection(locale))
+		});
+	});
+
+export const handle: Handle = handleParaglide;
diff --git a/template/apps/web/src/hooks.ts b/template/apps/web/src/hooks.ts
new file mode 100644
index 0000000..392875d
--- /dev/null
+++ b/template/apps/web/src/hooks.ts
@@ -0,0 +1,4 @@
+import type { Reroute } from '@sveltejs/kit';
+import { deLocalizeUrl } from '$lib/paraglide/runtime';
+
+export const reroute: Reroute = (request) => deLocalizeUrl(request.url).pathname;
diff --git a/template/apps/web/src/lib/assets/favicon.svg b/template/apps/web/src/lib/assets/favicon.svg
new file mode 100644
index 0000000..cc5dc66
--- /dev/null
+++ b/template/apps/web/src/lib/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/template/apps/web/src/lib/components/todos/CreateTodo.svelte b/template/apps/web/src/lib/components/todos/CreateTodo.svelte
new file mode 100644
index 0000000..1edb1ed
--- /dev/null
+++ b/template/apps/web/src/lib/components/todos/CreateTodo.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Todo } from "@<@var(context.project.name)>/rpc";
+	import type { ExtractPayload } from "$lib/utils"
+	import Input from "$lib/components/ui/input/input.svelte";
+	import Button from "$lib/components/ui/button/button.svelte"
+	import * as Field from "$lib/components/ui/field/index"
+	import { getTodoCollection } from "$lib/todocollectionscontext";
+	const todoCollection = getTodoCollection();
+  let todo = $state<ExtractPayload<Todo>>({id: crypto.randomUUID() ,task: "",done:false})
+  let create = () => {
+    todoCollection.insert(todo)
+    todo = { id: crypto.randomUUID(), task: "", done:false }
+  }
+</script>
+
+<div class="flex flex-col items-center justify-center">
+  <Field.FieldGroup class="w-50">
+  <Field.Field>
+    <Field.Label>
+      Todo
+    </Field.Label>
+    <Input bind:value={todo.task}/>
+  </Field.Field>
+  <Button variant="outline" onclick={create} > Create </Button>
+  </Field.FieldGroup>
+</div>
diff --git a/template/apps/web/src/lib/components/todos/ListTodos.svelte b/template/apps/web/src/lib/components/todos/ListTodos.svelte
new file mode 100644
index 0000000..a530e8f
--- /dev/null
+++ b/template/apps/web/src/lib/components/todos/ListTodos.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { getTodoCollection } from '$lib/todocollectionscontext';
+	import { useLiveQuery } from '@tanstack/svelte-db';
+	import { tick } from 'svelte';
+	import { ScrollArea } from '../ui/scroll-area/index';
+	import type { Todo as TodoRpc } from '@<@var(context.project.name)>/rpc';
+	import { browser } from '$app/environment';
+	import Todo from './Todo.svelte';
+
+	let { initialTodos }: { initialTodos: TodoRpc[] } = $props();
+	const todoCollection = getTodoCollection();
+	const data = useLiveQuery((q) => q.from({ todos: todoCollection }));
+	const todos = $derived.by(() => {
+		const res = data.data.toSorted((a, b) => {
+			if (a.done != b.done) {
+				return a.done ? -1 : 1;
+			}
+			if (!a.done && !b.done) {
+				let adate = a.createdAt ? new Date(a.createdAt) : new Date(Date.now());
+				let bdate = b.createdAt ? new Date(b.createdAt) : new Date(Date.now());
+				return  bdate.getTime() - adate.getTime();
+			}
+			return 0;
+		});
+		return res;
+	});
+	let scrollerRef = $state<HTMLElement | null>(null);
+	$effect(() => {
+		todos;
+		tick().then(() => {
+			scrollerRef?.scrollTo({ top: scrollerRef.scrollHeight, behavior: 'smooth' });
+		});
+	});
+</script>
+
+<ScrollArea
+	bind:viewportRef={scrollerRef}
+	id="scroller"
+	class="flex h-[80%] w-full flex-col items-center justify-center lg:w-[30%]"
+>
+	{#if browser}
+		{#each todos as todo (todo.id)}
+			<Todo {todo} />
+		{/each}
+	{:else}
+		{#each initialTodos as todo}
+			<Todo {todo} />
+		{/each}
+	{/if}
+</ScrollArea>
diff --git a/template/apps/web/src/lib/components/todos/Todo.svelte b/template/apps/web/src/lib/components/todos/Todo.svelte
new file mode 100644
index 0000000..79e566c
--- /dev/null
+++ b/template/apps/web/src/lib/components/todos/Todo.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { type Todo } from "@<@var(context.project.name)>/rpc";
+  import { getTodoCollection } from "$lib/todocollectionscontext";
+	import * as Card from "../ui/card/index";
+	import * as Field from "../ui/field/index";
+	import Input from "../ui/input/input.svelte";
+	import type { ExtractPayload } from "$lib/utils";
+	import Checkbox from "../ui/checkbox/checkbox.svelte";
+	import Button from "../ui/button/button.svelte";
+	import { DeleteIcon } from "@lucide/svelte"
+  let { todo } : { todo:ExtractPayload<Todo> } = $props();
+  let todoState = $state(todo)
+  const todoCollection = getTodoCollection();
+  const update = () => {
+    todoCollection.update(todoState.id,(draft) => {
+      draft.done = todoState.done;
+      draft.task = todoState.task;
+    })
+  }
+  const del = () => {
+    if (todoState.id) {
+      todoCollection.delete(todoState.id)
+    }
+  }
+</script>
+
+<Card.Card class="p-5" onkeydown={()=>update()}>
+  <Card.CardContent>
+    <Field.FieldSet>
+      <Field.Field>
+        <Field.Label>
+          task
+        </Field.Label>
+        <Field.FieldContent>
+          <Input bind:value={todoState.task}/>
+        </Field.FieldContent>
+      </Field.Field>
+      <Field.Field>
+        <Field.Label>
+          done
+        </Field.Label>
+        <Field.FieldContent onclick={()=>update()}>
+          <Checkbox bind:checked={todoState.done}/>
+        </Field.FieldContent>
+      </Field.Field>
+      <div class="flex flex-row">
+      <Field.Field>
+        <Field.Label>
+          Created
+        </Field.Label>
+        <Field.FieldContent>
+          {(new Date(todoState.createdAt||"now")).toLocaleString()}
+        </Field.FieldContent>
+      </Field.Field>
+      <Field.Field>
+        <Field.Label>
+          Updated
+        </Field.Label>
+        <Field.FieldContent>
+          {(new Date(todoState.updatesAt||"now")).toLocaleString()}
+        </Field.FieldContent>
+      </Field.Field>
+      <Button variant='destructive' onclick={del}>
+        <DeleteIcon/>
+      </Button>
+      </div>
+    </Field.FieldSet>
+  </Card.CardContent>
+</Card.Card>
+
diff --git a/template/apps/web/src/lib/components/ui/accordion/accordion-content.svelte b/template/apps/web/src/lib/components/ui/accordion/accordion-content.svelte
new file mode 100644
index 0000000..24f1f41
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/accordion/accordion-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	data-slot="accordion-content"
+	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden"
+	{...restProps}
+>
+	<div
+		class={cn(
+			"pt-0 pb-2.5 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+			className
+		)}
+	>
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>
diff --git a/template/apps/web/src/lib/components/ui/accordion/accordion-item.svelte b/template/apps/web/src/lib/components/ui/accordion/accordion-item.svelte
new file mode 100644
index 0000000..9d3919d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/accordion/accordion-item.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("not-last:border-b", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/accordion/accordion-trigger.svelte b/template/apps/web/src/lib/components/ui/accordion/accordion-trigger.svelte
new file mode 100644
index 0000000..383272d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
+		bind:ref
+		class={cn(
+			"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDownIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+		<ChevronUpIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>
diff --git a/template/apps/web/src/lib/components/ui/accordion/accordion.svelte b/template/apps/web/src/lib/components/ui/accordion/accordion.svelte
new file mode 100644
index 0000000..b19a3c5
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/accordion/accordion.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	class={cn("cn-accordion flex w-full flex-col", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/accordion/index.ts b/template/apps/web/src/lib/components/ui/accordion/index.ts
new file mode 100644
index 0000000..ac343a1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/accordion/index.ts
@@ -0,0 +1,16 @@
+import Root from "./accordion.svelte";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
new file mode 100644
index 0000000..7e63004
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-action", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
new file mode 100644
index 0000000..a4ce03c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-cancel", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
new file mode 100644
index 0000000..710727d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		size?: "default" | "sm";
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		data-size={size}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-none p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
new file mode 100644
index 0000000..7b26f8a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
new file mode 100644
index 0000000..4d133b7
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-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="alert-dialog-footer"
+	class={cn(
+		"cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
new file mode 100644
index 0000000..d6df4d3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-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="alert-dialog-header"
+	class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
new file mode 100644
index 0000000..4db6d7e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-media.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="alert-dialog-media"
+	class={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
new file mode 100644
index 0000000..9ffcc85
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
new file mode 100644
index 0000000..f0a19a8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
new file mode 100644
index 0000000..5cb7e7f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
new file mode 100644
index 0000000..b22d1d5
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog.svelte b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog.svelte
new file mode 100644
index 0000000..7ea78bb
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/alert-dialog/index.ts b/template/apps/web/src/lib/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..ca81c2a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/index.ts
@@ -0,0 +1,40 @@
+import Root from "./alert-dialog.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+import Media from "./alert-dialog-media.svelte";
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Media,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+	Media as AlertDialogMedia,
+};
diff --git a/template/apps/web/src/lib/components/ui/alert/alert-action.svelte b/template/apps/web/src/lib/components/ui/alert/alert-action.svelte
new file mode 100644
index 0000000..0f90609
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert/alert-action.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="alert-action"
+	class={cn("absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/alert/alert-description.svelte b/template/apps/web/src/lib/components/ui/alert/alert-description.svelte
new file mode 100644
index 0000000..e62a009
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert/alert-description.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="alert-description"
+	class={cn(
+		"text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/alert/alert-title.svelte b/template/apps/web/src/lib/components/ui/alert/alert-title.svelte
new file mode 100644
index 0000000..3e339a3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert/alert-title.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="alert-title"
+	class={cn(
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/alert/alert.svelte b/template/apps/web/src/lib/components/ui/alert/alert.svelte
new file mode 100644
index 0000000..b2eecfa
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/alert/index.ts b/template/apps/web/src/lib/components/ui/alert/index.ts
new file mode 100644
index 0000000..071b113
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,17 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+import Action from "./alert-action.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	Action,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+	Action as AlertAction,
+};
diff --git a/template/apps/web/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte b/template/apps/web/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
new file mode 100644
index 0000000..815aab0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AspectRatioPrimitive.RootProps = $props();
+</script>
+
+<AspectRatioPrimitive.Root bind:ref data-slot="aspect-ratio" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/aspect-ratio/index.ts b/template/apps/web/src/lib/components/ui/aspect-ratio/index.ts
new file mode 100644
index 0000000..985c75f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/aspect-ratio/index.ts
@@ -0,0 +1,3 @@
+import Root from "./aspect-ratio.svelte";
+
+export { Root, Root as AspectRatio };
diff --git a/template/apps/web/src/lib/components/ui/avatar/avatar-badge.svelte b/template/apps/web/src/lib/components/ui/avatar/avatar-badge.svelte
new file mode 100644
index 0000000..ca9d9ed
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar-badge.svelte
@@ -0,0 +1,26 @@
+<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="avatar-badge"
+	class={cn(
+		"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+		"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+		"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+		"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/template/apps/web/src/lib/components/ui/avatar/avatar-fallback.svelte b/template/apps/web/src/lib/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..63c8b02
--- /dev/null
+++ b/template/apps/web/src/lib/components/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(
+		"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/avatar/avatar-group-count.svelte b/template/apps/web/src/lib/components/ui/avatar/avatar-group-count.svelte
new file mode 100644
index 0000000..536c308
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar-group-count.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="avatar-group-count"
+	class={cn(
+		"bg-muted text-muted-foreground size-8 rounded-full text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/avatar/avatar-group.svelte b/template/apps/web/src/lib/components/ui/avatar/avatar-group.svelte
new file mode 100644
index 0000000..78714fc
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar-group.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="avatar-group"
+	class={cn(
+		"cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/avatar/avatar-image.svelte b/template/apps/web/src/lib/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..f41cf8f
--- /dev/null
+++ b/template/apps/web/src/lib/components/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("rounded-full aspect-square size-full object-cover", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/avatar/avatar.svelte b/template/apps/web/src/lib/components/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..ea6fde5
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		loadingStatus = $bindable("loading"),
+		size = "default",
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps & {
+		size?: "default" | "sm" | "lg";
+	} = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	data-size={size}
+	class={cn(
+		"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/avatar/index.ts b/template/apps/web/src/lib/components/ui/avatar/index.ts
new file mode 100644
index 0000000..38ccef8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/avatar/index.ts
@@ -0,0 +1,22 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+import Badge from "./avatar-badge.svelte";
+import Group from "./avatar-group.svelte";
+import GroupCount from "./avatar-group-count.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	Badge,
+	Group,
+	GroupCount,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback,
+	Badge as AvatarBadge,
+	Group as AvatarGroup,
+	GroupCount as AvatarGroupCount,
+};
diff --git a/template/apps/web/src/lib/components/ui/badge/badge.svelte b/template/apps/web/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..2cfe06f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/template/apps/web/src/lib/components/ui/badge/index.ts b/template/apps/web/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000..64e0aa9
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
diff --git a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
new file mode 100644
index 0000000..9e1e22c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
+
+	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("size-5 [&>svg]:size-4 flex items-center justify-center", className)}
+	{...restProps}
+>
+	<MoreHorizontalIcon  />
+	<span class="sr-only">More</span>
+</span>
diff --git a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
new file mode 100644
index 0000000..e9c77ea
--- /dev/null
+++ b/template/apps/web/src/lib/components/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("gap-1 inline-flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
new file mode 100644
index 0000000..e6bc17d
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
new file mode 100644
index 0000000..44fd50b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -0,0 +1,20 @@
+<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("text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center wrap-break-word", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ol>
diff --git a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
new file mode 100644
index 0000000..5fb6979
--- /dev/null
+++ b/template/apps/web/src/lib/components/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("text-foreground font-normal", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
new file mode 100644
index 0000000..0f62fba
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	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/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb.svelte b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb.svelte
new file mode 100644
index 0000000..29ea3f5
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	aria-label="breadcrumb"
+	class={cn("cn-breadcrumb", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</nav>
diff --git a/template/apps/web/src/lib/components/ui/breadcrumb/index.ts b/template/apps/web/src/lib/components/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..dc914ec
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/button-group/button-group-separator.svelte b/template/apps/web/src/lib/components/ui/button-group/button-group-separator.svelte
new file mode 100644
index 0000000..a13f023
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/button-group/button-group-separator.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="button-group-separator"
+	{orientation}
+	class={cn(
+		"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/button-group/button-group-text.svelte b/template/apps/web/src/lib/components/ui/button-group/button-group-text.svelte
new file mode 100644
index 0000000..d5b607f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/button-group/button-group-text.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		...restProps,
+		class: cn("bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className),
+		"data-slot": "button-group-text",
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/button-group/button-group.svelte b/template/apps/web/src/lib/components/ui/button-group/button-group.svelte
new file mode 100644
index 0000000..6137433
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/button-group/button-group.svelte
@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const buttonGroupVariants = tv({
+		base: "rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+		variants: {
+			orientation: {
+				horizontal:
+					"cn-button-group-orientation-horizontal [&>[data-slot]]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+				vertical:
+					"cn-button-group-orientation-vertical flex-col [&>[data-slot]]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+			},
+		},
+		defaultVariants: {
+			orientation: "horizontal",
+		},
+	});
+
+	export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		orientation = "horizontal",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: ButtonGroupOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="button-group"
+	data-orientation={orientation}
+	class={cn(buttonGroupVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/button-group/index.ts b/template/apps/web/src/lib/components/ui/button-group/index.ts
new file mode 100644
index 0000000..664167f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/button-group/index.ts
@@ -0,0 +1,15 @@
+import Root, { buttonGroupVariants, type ButtonGroupOrientation } from "./button-group.svelte";
+import Text from "./button-group-text.svelte";
+import Separator from "./button-group-separator.svelte";
+
+export {
+	Root,
+	Text,
+	Separator,
+	buttonGroupVariants,
+	type ButtonGroupOrientation,
+	//
+	Root as ButtonGroup,
+	Text as ButtonGroupText,
+	Separator as ButtonGroupSeparator,
+};
diff --git a/template/apps/web/src/lib/components/ui/button/button.svelte b/template/apps/web/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..b8fd3bc
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				icon: "size-8",
+				"icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-7 rounded-none",
+				"icon-lg": "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/button/index.ts b/template/apps/web/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..fb585d7
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-caption.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-caption.svelte
new file mode 100644
index 0000000..5c93037
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-caption.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import type Calendar from "./calendar.svelte";
+	import CalendarMonthSelect from "./calendar-month-select.svelte";
+	import CalendarYearSelect from "./calendar-year-select.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+		months: ComponentProps<typeof CalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof CalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<CalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<CalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === "dropdown-months"}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === "dropdown-years"}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-cell.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-cell.svelte
new file mode 100644
index 0000000..7ceb5e1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-day.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-day.svelte
new file mode 100644
index 0000000..edc8c9d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-day.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none",
+		"[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+		"not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:text-foreground",
+		// Outside months
+		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+		// focus
+		"focus:border-ring focus:ring-ring/50 focus:relative",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-grid-body.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-grid-body.svelte
new file mode 100644
index 0000000..8cd86de
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-grid-head.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-grid-head.svelte
new file mode 100644
index 0000000..333edc4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-grid-row.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-grid-row.svelte
new file mode 100644
index 0000000..9032236
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-grid.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-grid.svelte
new file mode 100644
index 0000000..5fbb18f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid
+	bind:ref
+	class={cn("flex w-full border-collapse flex-col", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-head-cell.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-head-cell.svelte
new file mode 100644
index 0000000..131807e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell
+	bind:ref
+	class={cn(
+		"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-header.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-header.svelte
new file mode 100644
index 0000000..c39e955
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-header.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header
+	bind:ref
+	class={cn(
+		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-heading.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-heading.svelte
new file mode 100644
index 0000000..a9b9810
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadingProps = $props();
+</script>
+
+<CalendarPrimitive.Heading
+	bind:ref
+	class={cn("px-(--cell-size) text-sm font-medium", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-month-select.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-month-select.svelte
new file mode 100644
index 0000000..ed75b1d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-month-select.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+		className
+	)}
+>
+	<CalendarPrimitive.MonthSelect
+		bind:ref
+		class="bg-background dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined
+							? monthItem.value === value
+							: monthItem.value === selectedMonthItem.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.MonthSelect>
+</span>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-month.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-month.svelte
new file mode 100644
index 0000000..7bdafe7
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-month.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type WithElementRef, cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex w-full flex-col gap-4", className)}>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-months.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-months.svelte
new file mode 100644
index 0000000..f717a9d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-months.svelte
@@ -0,0 +1,19 @@
+<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}
+	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-nav.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-nav.svelte
new file mode 100644
index 0000000..27f33d7
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-nav.svelte
@@ -0,0 +1,19 @@
+<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>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+>
+	{@render children?.()}
+</nav>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-next-button.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-next-button.svelte
new file mode 100644
index 0000000..82dd739
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "ghost",
+		...restProps
+	}: CalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRightIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.NextButton>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-prev-button.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-prev-button.svelte
new file mode 100644
index 0000000..383312e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "ghost",
+		...restProps
+	}: CalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeftIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.PrevButton>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar-year-select.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar-year-select.svelte
new file mode 100644
index 0000000..898c2a4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-year-select.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+		className
+	)}
+>
+	<CalendarPrimitive.YearSelect
+		bind:ref
+		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value}>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value !== undefined
+							? yearItem.value === value
+							: yearItem.value === selectedYearItem.value}
+					>
+						{yearItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.YearSelect>
+</span>
diff --git a/template/apps/web/src/lib/components/ui/calendar/calendar.svelte b/template/apps/web/src/lib/components/ui/calendar/calendar.svelte
new file mode 100644
index 0000000..74abd6a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ButtonVariant } from "../button/button.svelte";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = "short",
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = "numeric",
+		day,
+		disableDaysOutsideMonth = false,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: CalendarPrimitive.MonthSelectProps["months"];
+		years?: CalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith("dropdown")) return "short";
+		return "long";
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<CalendarPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	bind:placeholder
+	{weekdayFormat}
+	{disableDaysOutsideMonth}
+	class={cn(
+		"p-2 [--cell-size:--spacing(7)] bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Months>
+			<Calendar.Nav>
+				<Calendar.PrevButton variant={buttonVariant} />
+				<Calendar.NextButton variant={buttonVariant} />
+			</Calendar.Nav>
+			{#each months as month, monthIndex (month)}
+				<Calendar.Month>
+					<Calendar.Header>
+						<Calendar.Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</Calendar.Header>
+					<Calendar.Grid>
+						<Calendar.GridHead>
+							<Calendar.GridRow class="select-none">
+								{#each weekdays as weekday (weekday)}
+									<Calendar.HeadCell>
+										{weekday.slice(0, 2)}
+									</Calendar.HeadCell>
+								{/each}
+							</Calendar.GridRow>
+						</Calendar.GridHead>
+						<Calendar.GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<Calendar.GridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<Calendar.Cell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<Calendar.Day />
+											{/if}
+										</Calendar.Cell>
+									{/each}
+								</Calendar.GridRow>
+							{/each}
+						</Calendar.GridBody>
+					</Calendar.Grid>
+				</Calendar.Month>
+			{/each}
+		</Calendar.Months>
+	{/snippet}
+</CalendarPrimitive.Root>
diff --git a/template/apps/web/src/lib/components/ui/calendar/index.ts b/template/apps/web/src/lib/components/ui/calendar/index.ts
new file mode 100644
index 0000000..f3a16d2
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/calendar/index.ts
@@ -0,0 +1,40 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	Nav,
+	Month,
+	YearSelect,
+	MonthSelect,
+	Caption,
+	//
+	Root as Calendar,
+};
diff --git a/template/apps/web/src/lib/components/ui/card/card-action.svelte b/template/apps/web/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 0000000..7c48844
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn(
+		"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/card/card-content.svelte b/template/apps/web/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..4f60ee3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/card/card-description.svelte b/template/apps/web/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..8366534
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-xs/relaxed", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/template/apps/web/src/lib/components/ui/card/card-footer.svelte b/template/apps/web/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..17aa09a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("rounded-none border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/card/card-header.svelte b/template/apps/web/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..4ec42c5
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/card/card-title.svelte b/template/apps/web/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..b2a4368
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("text-sm font-medium group-data-[size=sm]/card:text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/card/card.svelte b/template/apps/web/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..86226bb
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	data-size={size}
+	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/card/index.ts b/template/apps/web/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..4d3fce4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction,
+};
diff --git a/template/apps/web/src/lib/components/ui/carousel/carousel-content.svelte b/template/apps/web/src/lib/components/ui/carousel/carousel-content.svelte
new file mode 100644
index 0000000..84c71f8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/carousel/carousel-content.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import emblaCarouselSvelte from "embla-carousel-svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Content/>");
+</script>
+
+<div
+	data-slot="carousel-content"
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
+			...emblaCtx.options,
+			axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
+		},
+		plugins: emblaCtx.plugins,
+	}}
+	onemblaInit={emblaCtx.onInit}
+>
+	<div
+		bind:this={ref}
+		class={cn(
+			"flex",
+			emblaCtx.orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
+			className
+		)}
+		data-embla-container=""
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</div>
diff --git a/template/apps/web/src/lib/components/ui/carousel/carousel-item.svelte b/template/apps/web/src/lib/components/ui/carousel/carousel-item.svelte
new file mode 100644
index 0000000..ebf1649
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/carousel/carousel-item.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Item/>");
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel-item"
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		"min-w-0 shrink-0 grow-0 basis-full",
+		emblaCtx.orientation === "horizontal" ? "ps-4" : "pt-4",
+		className
+	)}
+	data-embla-slide=""
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/carousel/carousel-next.svelte b/template/apps/web/src/lib/components/ui/carousel/carousel-next.svelte
new file mode 100644
index 0000000..7a3fdb3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/carousel/carousel-next.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { WithoutChildren } from "bits-ui";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+	import { Button, type Props } from "$lib/components/ui/button/index.js";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon-sm",
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Next/>");
+</script>
+
+<Button
+	data-slot="carousel-next"
+	{variant}
+	{size}
+	aria-disabled={!emblaCtx.canScrollNext}
+	disabled={!emblaCtx.canScrollNext}
+	class={cn(
+		"cn-carousel-next absolute touch-manipulation",
+		emblaCtx.orientation === "horizontal"
+			? "-end-12 top-1/2 -translate-y-1/2"
+			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
+		className
+	)}
+	onclick={emblaCtx.scrollNext}
+	onkeydown={emblaCtx.handleKeyDown}
+	bind:ref
+	{...restProps}
+>
+	<ChevronRightIcon  />
+	<span class="sr-only">Next slide</span>
+</Button>
diff --git a/template/apps/web/src/lib/components/ui/carousel/carousel-previous.svelte b/template/apps/web/src/lib/components/ui/carousel/carousel-previous.svelte
new file mode 100644
index 0000000..29cd858
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/carousel/carousel-previous.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { WithoutChildren } from "bits-ui";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+	import { Button, type Props } from "$lib/components/ui/button/index.js";
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon-sm",
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Previous/>");
+</script>
+
+<Button
+	data-slot="carousel-previous"
+	{variant}
+	{size}
+	aria-disabled={!emblaCtx.canScrollPrev}
+	disabled={!emblaCtx.canScrollPrev}
+	class={cn(
+		"cn-carousel-previous absolute touch-manipulation",
+		emblaCtx.orientation === "horizontal"
+			? "-start-12 top-1/2 -translate-y-1/2"
+			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
+		className
+	)}
+	onclick={emblaCtx.scrollPrev}
+	onkeydown={emblaCtx.handleKeyDown}
+	{...restProps}
+	bind:ref
+>
+	<ChevronLeftIcon  />
+	<span class="sr-only">Previous slide</span>
+</Button>
diff --git a/template/apps/web/src/lib/components/ui/carousel/carousel.svelte b/template/apps/web/src/lib/components/ui/carousel/carousel.svelte
new file mode 100644
index 0000000..b3933b8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/carousel/carousel.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import {
+		type CarouselAPI,
+		type CarouselProps,
+		type EmblaContext,
+		setEmblaContext,
+	} from "./context.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		opts = {},
+		plugins = [],
+		setApi = () => {},
+		orientation = "horizontal",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<CarouselProps> = $props();
+
+	// svelte-ignore state_referenced_locally
+	let carouselState = $state<EmblaContext>({
+		api: undefined,
+		scrollPrev,
+		scrollNext,
+		orientation,
+		canScrollNext: false,
+		canScrollPrev: false,
+		handleKeyDown,
+		options: opts,
+		plugins,
+		onInit,
+		scrollSnaps: [],
+		selectedIndex: 0,
+		scrollTo,
+	});
+
+	setEmblaContext(carouselState);
+
+	function scrollPrev() {
+		carouselState.api?.scrollPrev();
+	}
+
+	function scrollNext() {
+		carouselState.api?.scrollNext();
+	}
+
+	function scrollTo(index: number, jump?: boolean) {
+		carouselState.api?.scrollTo(index, jump);
+	}
+
+	function onSelect() {
+		if (!carouselState.api) return;
+		carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
+		carouselState.canScrollNext = carouselState.api.canScrollNext();
+		carouselState.canScrollPrev = carouselState.api.canScrollPrev();
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === "ArrowRight") {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+
+	function onInit(event: CustomEvent<CarouselAPI>) {
+		carouselState.api = event.detail;
+		setApi(carouselState.api);
+
+		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+		carouselState.api.on("select", onSelect);
+		onSelect();
+	}
+
+	$effect(() => {
+		return () => {
+			carouselState.api?.off("select", onSelect);
+		};
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel"
+	class={cn("relative", className)}
+	role="region"
+	aria-roledescription="carousel"
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/carousel/context.ts b/template/apps/web/src/lib/components/ui/carousel/context.ts
new file mode 100644
index 0000000..a5fd74f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/carousel/context.ts
@@ -0,0 +1,58 @@
+import type { WithElementRef } from "$lib/utils.js";
+import type {
+	EmblaCarouselSvelteType,
+	default as emblaCarouselSvelte,
+} from "embla-carousel-svelte";
+import { getContext, hasContext, setContext } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+
+export type CarouselAPI =
+	NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (
+		evt: CustomEvent<infer CarouselAPI>
+	) => void
+		? CarouselAPI
+		: never;
+
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+
+export type CarouselOptions = EmblaCarouselConfig["options"];
+export type CarouselPlugins = EmblaCarouselConfig["plugins"];
+
+////
+
+export type CarouselProps = {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugins;
+	setApi?: (api: CarouselAPI | undefined) => void;
+	orientation?: "horizontal" | "vertical";
+} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+
+export type EmblaContext = {
+	api: CarouselAPI | undefined;
+	orientation: "horizontal" | "vertical";
+	scrollNext: () => void;
+	scrollPrev: () => void;
+	canScrollNext: boolean;
+	canScrollPrev: boolean;
+	handleKeyDown: (e: KeyboardEvent) => void;
+	options: CarouselOptions;
+	plugins: CarouselPlugins;
+	onInit: (e: CustomEvent<CarouselAPI>) => void;
+	scrollTo: (index: number, jump?: boolean) => void;
+	scrollSnaps: number[];
+	selectedIndex: number;
+};
+
+export function setEmblaContext(config: EmblaContext): EmblaContext {
+	setContext(EMBLA_CAROUSEL_CONTEXT, config);
+	return config;
+}
+
+export function getEmblaContext(name = "This component") {
+	if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+		throw new Error(`${name} must be used within a <Carousel.Root> component`);
+	}
+	return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
+}
diff --git a/template/apps/web/src/lib/components/ui/carousel/index.ts b/template/apps/web/src/lib/components/ui/carousel/index.ts
new file mode 100644
index 0000000..957fc74
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/carousel/index.ts
@@ -0,0 +1,19 @@
+import Root from "./carousel.svelte";
+import Content from "./carousel-content.svelte";
+import Item from "./carousel-item.svelte";
+import Previous from "./carousel-previous.svelte";
+import Next from "./carousel-next.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Previous,
+	Next,
+	//
+	Root as Carousel,
+	Content as CarouselContent,
+	Item as CarouselItem,
+	Previous as CarouselPrevious,
+	Next as CarouselNext,
+};
diff --git a/template/apps/web/src/lib/components/ui/chart/chart-container.svelte b/template/apps/web/src/lib/components/ui/chart/chart-container.svelte
new file mode 100644
index 0000000..1eb8e39
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/chart/chart-container.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import ChartStyle from "./chart-style.svelte";
+	import { setChartContext, type ChartConfig } from "./chart-utils.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = uid,
+		class: className,
+		children,
+		config,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		config: ChartConfig;
+	} = $props();
+
+	const chartId = $derived(`chart-${id || uid.replace(/:/g, "")}`);
+
+	setChartContext({
+		get config() {
+			return config;
+		},
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-chart={chartId}
+	data-slot="chart"
+	class={cn(
+		"flex aspect-video justify-center overflow-visible text-xs",
+		// Overrides
+		//
+		// Stroke around dots/marks when hovering
+		"[&_.lc-highlight-point]:stroke-transparent",
+		// override the default stroke color of lines
+		"[&_.lc-line]:stroke-border/50",
+
+		// by default, layerchart shows a line intersecting the point when hovering, this hides that
+		"[&_.lc-highlight-line]:stroke-0",
+
+		// by default, when you hover a point on a stacked series chart, it will drop the opacity
+		// of the other series, this overrides that
+		"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible",
+
+		// We don't want the little tick lines between the axis labels and the chart, so we remove
+		// the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
+		// chart.
+		"[&_.lc-axis-tick]:stroke-0",
+
+		// We don't want to display the rule on the x/y axis, as there is already going to be
+		// a grid line there and rule ends up overlapping the marks because it is rendered after
+		// the marks
+		"[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0",
+		"[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border",
+		"[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border",
+
+		// Legend adjustments
+		"[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5",
+		"[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4",
+		"[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]",
+
+		// Labels
+		"[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent",
+
+		// Tick labels on th x/y axes
+		"[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal",
+		"[&_.lc-tooltip-rects-g]:fill-transparent",
+		"[&_.lc-layout-svg-g]:fill-transparent",
+		"[&_.lc-root-container]:w-full",
+		className
+	)}
+	{...restProps}
+>
+	<ChartStyle id={chartId} {config} />
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/chart/chart-style.svelte b/template/apps/web/src/lib/components/ui/chart/chart-style.svelte
new file mode 100644
index 0000000..ea1b3b2
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/chart/chart-style.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { THEMES, type ChartConfig } from "./chart-utils.js";
+
+	let { id, config }: { id: string; config: ChartConfig } = $props();
+
+	const colorConfig = $derived(
+		config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
+	);
+
+	const themeContents = $derived.by(() => {
+		if (!colorConfig || !colorConfig.length) return;
+
+		const themeContents = [];
+		for (const [_theme, prefix] of Object.entries(THEMES)) {
+			let content = `${prefix} [data-chart=${id}] {\n`;
+			const color = colorConfig.map(([key, itemConfig]) => {
+				const theme = _theme as keyof typeof itemConfig.theme;
+				const color = itemConfig.theme?.[theme] || itemConfig.color;
+				return color ? `\t--color-${key}: ${color};` : null;
+			});
+
+			content += color.join("\n") + "\n}";
+
+			themeContents.push(content);
+		}
+
+		return themeContents.join("\n");
+	});
+</script>
+
+{#if themeContents}
+	{#key id}
+		<svelte:element this={"style"}>
+			{themeContents}
+		</svelte:element>
+	{/key}
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/chart/chart-tooltip.svelte b/template/apps/web/src/lib/components/ui/chart/chart-tooltip.svelte
new file mode 100644
index 0000000..e0da9ca
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/chart/chart-tooltip.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from "./chart-utils.js";
+	import { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
+	import type { Snippet } from "svelte";
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function defaultFormatter(value: any, _payload: TooltipPayload[]) {
+		return `${value}`;
+	}
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		hideLabel = false,
+		indicator = "dot",
+		hideIndicator = false,
+		labelKey,
+		label,
+		labelFormatter = defaultFormatter,
+		labelClassName,
+		formatter,
+		nameKey,
+		color,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		hideLabel?: boolean;
+		label?: string;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+		hideIndicator?: boolean;
+		labelClassName?: string;
+		labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+			((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+		formatter?: Snippet<
+			[
+				{
+					value: unknown;
+					name: string;
+					item: TooltipPayload;
+					index: number;
+					payload: TooltipPayload[];
+				},
+			]
+		>;
+	} = $props();
+
+	const chart = useChart();
+	const chartCtx = getChartContext();
+
+	// Filter to series with defined values (important for item-based charts like Pie/Arc
+	// where only the hovered item has a value)
+	const visibleSeries = $derived(
+		chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined)
+	);
+
+	const formattedLabel = $derived.by(() => {
+		if (hideLabel || !visibleSeries?.length) return null;
+
+		const [item] = visibleSeries;
+		const tooltipData = chartCtx.tooltip.data;
+
+		// Get the x-axis label value from the raw tooltip data (e.g. a Date or month string)
+		const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;
+
+		const key = labelKey ?? item?.label ?? item?.key ?? "value";
+		const itemConfig = getPayloadConfigFromPayload(
+			chart.config,
+			item,
+			key,
+			tooltipData as Record<string, unknown> | null
+		);
+
+		let value: unknown;
+		if (!labelKey && typeof label === "string") {
+			value = chart.config[label as keyof typeof chart.config]?.label ?? label;
+		} else if (labelKey) {
+			value = itemConfig?.label ?? dataLabel;
+		} else {
+			value = dataLabel;
+		}
+
+		if (value === undefined) return null;
+		if (!labelFormatter) return value;
+		return labelFormatter(value, visibleSeries);
+	});
+
+	const nestLabel = $derived(visibleSeries.length === 1 && indicator !== "dot");
+</script>
+
+{#snippet TooltipLabel()}
+	{#if formattedLabel}
+		<div class={cn("font-medium", labelClassName)}>
+			{#if typeof formattedLabel === "function"}
+				{@render formattedLabel()}
+			{:else}
+				{formattedLabel}
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<TooltipPrimitive.Root variant="none">
+	<div
+		bind:this={ref}
+		class={cn(
+			"border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+			className
+		)}
+		{...restProps}
+	>
+		{#if !nestLabel}
+			{@render TooltipLabel()}
+		{/if}
+		<div class="grid gap-1.5">
+			{#each visibleSeries as item, i (item.key + i)}
+				{@const key = `${nameKey || item.key || item.label || "value"}`}
+				{@const itemConfig = getPayloadConfigFromPayload(
+					chart.config,
+					item,
+					key,
+					chartCtx.tooltip.data
+				)}
+				{@const indicatorColor = color || item.config?.color || item.color}
+				<div
+					class={cn(
+						"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
+						indicator === "dot" && "items-center"
+					)}
+				>
+					{#if formatter && item.value !== undefined && item.label}
+						{@render formatter({
+							value: item.value,
+							name: item.label,
+							item,
+							index: i,
+							payload: visibleSeries,
+						})}
+					{:else}
+						{#if itemConfig?.icon}
+							<itemConfig.icon />
+						{:else if !hideIndicator}
+							<div
+								style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
+								class={cn(
+									"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+									{
+										"size-2.5": indicator === "dot",
+										"h-full w-1": indicator === "line",
+										"w-0 border-[1.5px] border-dashed bg-transparent":
+											indicator === "dashed",
+										"my-0.5": nestLabel && indicator === "dashed",
+									}
+								)}
+							></div>
+						{/if}
+						<div
+							class={cn(
+								"flex flex-1 shrink-0 justify-between leading-none",
+								nestLabel ? "items-end" : "items-center"
+							)}
+						>
+							<div class="grid gap-1.5">
+								{#if nestLabel}
+									{@render TooltipLabel()}
+								{/if}
+								<span class="text-muted-foreground">
+									{itemConfig?.label || item.label}
+								</span>
+							</div>
+							{#if item.value !== undefined}
+								<span class="text-foreground font-mono font-medium tabular-nums">
+									{item.value.toLocaleString()}
+								</span>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</TooltipPrimitive.Root>
diff --git a/template/apps/web/src/lib/components/ui/chart/chart-utils.ts b/template/apps/web/src/lib/components/ui/chart/chart-utils.ts
new file mode 100644
index 0000000..a289e35
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/chart/chart-utils.ts
@@ -0,0 +1,68 @@
+import type { Tooltip } from "layerchart";
+import { getContext, setContext, type Component, type Snippet } from "svelte";
+
+export const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+	[k in string]: {
+		label?: string;
+		icon?: Component;
+	} & (
+		| { color?: string; theme?: never }
+		| { color?: never; theme: Record<keyof typeof THEMES, string> }
+	);
+};
+
+export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
+
+export type TooltipPayload = Tooltip.TooltipSeries;
+
+// Helper to extract item config from a payload.
+export function getPayloadConfigFromPayload(
+	config: ChartConfig,
+	payload: TooltipPayload,
+	key: string,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	data?: Record<string, any> | null
+) {
+	if (typeof payload !== "object" || payload === null) return undefined;
+
+	const payloadConfig =
+		"config" in payload && typeof payload.config === "object" && payload.config !== null
+			? payload.config
+			: undefined;
+
+	let configLabelKey: string = key;
+
+	if (payload.key === key) {
+		configLabelKey = payload.key;
+	} else if (payload.label === key) {
+		configLabelKey = payload.label;
+	} else if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (
+		payloadConfig !== undefined &&
+		key in payloadConfig &&
+		typeof payloadConfig[key as keyof typeof payloadConfig] === "string"
+	) {
+		configLabelKey = payloadConfig[key as keyof typeof payloadConfig] as string;
+	} else if (data != null && key in data && typeof data[key] === "string") {
+		configLabelKey = data[key] as string;
+	}
+
+	return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+type ChartContextValue = {
+	config: ChartConfig;
+};
+
+const chartContextKey = Symbol("chart-context");
+
+export function setChartContext(value: ChartContextValue) {
+	return setContext(chartContextKey, value);
+}
+
+export function useChart() {
+	return getContext<ChartContextValue>(chartContextKey);
+}
diff --git a/template/apps/web/src/lib/components/ui/chart/index.ts b/template/apps/web/src/lib/components/ui/chart/index.ts
new file mode 100644
index 0000000..f22375e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/chart/index.ts
@@ -0,0 +1,6 @@
+import ChartContainer from "./chart-container.svelte";
+import ChartTooltip from "./chart-tooltip.svelte";
+
+export { getPayloadConfigFromPayload, type ChartConfig } from "./chart-utils.js";
+
+export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };
diff --git a/template/apps/web/src/lib/components/ui/checkbox/checkbox.svelte b/template/apps/web/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000..39af8e1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+
+	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(
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div
+			data-slot="checkbox-indicator"
+			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+		>
+			{#if checked}
+				<CheckIcon  />
+			{:else if indeterminate}
+				<MinusIcon  />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>
diff --git a/template/apps/web/src/lib/components/ui/checkbox/index.ts b/template/apps/web/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..6d92d94
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};
diff --git a/template/apps/web/src/lib/components/ui/collapsible/collapsible-content.svelte b/template/apps/web/src/lib/components/ui/collapsible/collapsible-content.svelte
new file mode 100644
index 0000000..bdabb55
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/collapsible/collapsible-trigger.svelte b/template/apps/web/src/lib/components/ui/collapsible/collapsible-trigger.svelte
new file mode 100644
index 0000000..ece7ad6
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/collapsible/collapsible.svelte b/template/apps/web/src/lib/components/ui/collapsible/collapsible.svelte
new file mode 100644
index 0000000..39cdd4e
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/collapsible/index.ts b/template/apps/web/src/lib/components/ui/collapsible/index.ts
new file mode 100644
index 0000000..169b479
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/command/command-dialog.svelte b/template/apps/web/src/lib/components/ui/command/command-dialog.svelte
new file mode 100644
index 0000000..024c76c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-dialog.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import Command from "./command.svelte";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run...",
+		showCloseButton = false,
+		portalProps,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content
+		class={cn("rounded-none top-1/3 translate-y-0 overflow-hidden p-0", className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/template/apps/web/src/lib/components/ui/command/command-empty.svelte b/template/apps/web/src/lib/components/ui/command/command-empty.svelte
new file mode 100644
index 0000000..4cfd990
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-empty.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn("py-6 text-center text-xs", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/command/command-group.svelte b/template/apps/web/src/lib/components/ui/command/command-group.svelte
new file mode 100644
index 0000000..0712eee
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-group.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Command as CommandPrimitive, useId } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		value,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn("text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs", className)}
+	value={value ?? heading ?? `----${useId()}`}
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading
+			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+		>
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>
diff --git a/template/apps/web/src/lib/components/ui/command/command-input.svelte b/template/apps/web/src/lib/components/ui/command/command-input.svelte
new file mode 100644
index 0000000..2881f6f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-input.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import * as InputGroup from "$lib/components/ui/input-group/index.js";
+	import SearchIcon from '@lucide/svelte/icons/search';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<div data-slot="command-input-wrapper" class="border-b pb-0">
+	<InputGroup.Root class="bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+		<CommandPrimitive.Input
+			data-slot="command-input"
+			class={cn(
+				"w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+				className
+			)}
+			bind:ref
+			{...restProps}
+			bind:value
+		/>
+		<InputGroup.Addon>
+			<SearchIcon class="size-4 shrink-0 opacity-50" />
+		</InputGroup.Addon>
+	</InputGroup.Root>
+</div>
diff --git a/template/apps/web/src/lib/components/ui/command/command-item.svelte b/template/apps/web/src/lib/components/ui/command/command-item.svelte
new file mode 100644
index 0000000..4246840
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-item.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<CheckIcon class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+</CommandPrimitive.Item>
diff --git a/template/apps/web/src/lib/components/ui/command/command-link-item.svelte b/template/apps/web/src/lib/components/ui/command/command-link-item.svelte
new file mode 100644
index 0000000..ada6d2c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-link-item.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/command/command-list.svelte b/template/apps/web/src/lib/components/ui/command/command-list.svelte
new file mode 100644
index 0000000..e97747f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-list.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	bind:ref
+	data-slot="command-list"
+	class={cn("no-scrollbar max-h-72 scroll-py-0 outline-none overflow-x-hidden overflow-y-auto", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/command/command-loading.svelte b/template/apps/web/src/lib/components/ui/command/command-loading.svelte
new file mode 100644
index 0000000..19dd298
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-loading.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/command/command-separator.svelte b/template/apps/web/src/lib/components/ui/command/command-separator.svelte
new file mode 100644
index 0000000..35c4c95
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
+</script>
+
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn("bg-border -mx-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/command/command-shortcut.svelte b/template/apps/web/src/lib/components/ui/command/command-shortcut.svelte
new file mode 100644
index 0000000..5322e6a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command-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="command-shortcut"
+	class={cn("text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/template/apps/web/src/lib/components/ui/command/command.svelte b/template/apps/web/src/lib/components/ui/command/command.svelte
new file mode 100644
index 0000000..74a415b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/command.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from "bits-ui";
+
+	export type CommandRootApi = CommandPrimitive.Root;
+
+	let {
+		api = $bindable(null),
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
+</script>
+
+<CommandPrimitive.Root
+	bind:this={api}
+	bind:value
+	bind:ref
+	data-slot="command"
+	class={cn("bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/command/index.ts b/template/apps/web/src/lib/components/ui/command/index.ts
new file mode 100644
index 0000000..5435fbe
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/command/index.ts
@@ -0,0 +1,37 @@
+import Root from "./command.svelte";
+import Loading from "./command-loading.svelte";
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Item from "./command-item.svelte";
+import Input from "./command-input.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+import LinkItem from "./command-link-item.svelte";
+
+export {
+	Root,
+	Dialog,
+	Empty,
+	Group,
+	Item,
+	LinkItem,
+	Input,
+	List,
+	Separator,
+	Shortcut,
+	Loading,
+	//
+	Root as Command,
+	Dialog as CommandDialog,
+	Empty as CommandEmpty,
+	Group as CommandGroup,
+	Item as CommandItem,
+	LinkItem as CommandLinkItem,
+	Input as CommandInput,
+	List as CommandList,
+	Separator as CommandSeparator,
+	Shortcut as CommandShortcut,
+	Loading as CommandLoading,
+};
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
new file mode 100644
index 0000000..da5bd30
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		inset,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+		inset?: boolean;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="context-menu-checkbox-item"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="absolute right-2 pointer-events-none">
+			{#if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</ContextMenuPrimitive.CheckboxItem>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-content.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-content.svelte
new file mode 100644
index 0000000..fb34a60
--- /dev/null
+++ b/template/apps/web/src/lib/components/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(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 z-50 overflow-x-hidden overflow-y-auto outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</ContextMenuPortal>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-group-heading.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
new file mode 100644
index 0000000..0c0f459
--- /dev/null
+++ b/template/apps/web/src/lib/components/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("text-foreground px-2 py-1.5 text-sm font-medium data-inset:ps-8", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-group.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-group.svelte
new file mode 100644
index 0000000..c7c1e06
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/context-menu/context-menu-item.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-item.svelte
new file mode 100644
index 0000000..d1601b6
--- /dev/null
+++ b/template/apps/web/src/lib/components/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(
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-label.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-label.svelte
new file mode 100644
index 0000000..4b3b1fe
--- /dev/null
+++ b/template/apps/web/src/lib/components/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("text-muted-foreground px-2 py-2 text-xs data-inset:pl-7 data-inset:pl-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-portal.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-portal.svelte
new file mode 100644
index 0000000..96b1e3e
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/context-menu/context-menu-radio-group.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
new file mode 100644
index 0000000..964cb55
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
new file mode 100644
index 0000000..24b7380
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<ContextMenuPrimitive.RadioItemProps> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="context-menu-radio-item"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="absolute right-2 pointer-events-none">
+			{#if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</ContextMenuPrimitive.RadioItem>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-separator.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-separator.svelte
new file mode 100644
index 0000000..e675367
--- /dev/null
+++ b/template/apps/web/src/lib/components/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("bg-border -mx-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
new file mode 100644
index 0000000..3305abc
--- /dev/null
+++ b/template/apps/web/src/lib/components/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("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
new file mode 100644
index 0000000..fd85c70
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/context-menu/context-menu-sub-content.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.SubContentProps = $props();
+</script>
+
+<ContextMenuPrimitive.SubContent
+	bind:ref
+	data-slot="context-menu-sub-content"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-none border shadow-lg duration-100", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
new file mode 100644
index 0000000..b1e9370
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	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(
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ml-auto" />
+</ContextMenuPrimitive.SubTrigger>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu-sub.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-sub.svelte
new file mode 100644
index 0000000..a03827b
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/context-menu/context-menu-trigger.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu-trigger.svelte
new file mode 100644
index 0000000..f6a1542
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/context-menu/context-menu-trigger.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.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger
+	bind:ref
+	data-slot="context-menu-trigger"
+	class={cn("cn-context-menu-trigger select-none", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/context-menu/context-menu.svelte b/template/apps/web/src/lib/components/ui/context-menu/context-menu.svelte
new file mode 100644
index 0000000..cfaefb3
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/context-menu/index.ts b/template/apps/web/src/lib/components/ui/context-menu/index.ts
new file mode 100644
index 0000000..cbeaee1
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/data-table/data-table.svelte.ts b/template/apps/web/src/lib/components/ui/data-table/data-table.svelte.ts
new file mode 100644
index 0000000..f3c30a7
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/data-table/data-table.svelte.ts
@@ -0,0 +1,142 @@
+import {
+	type RowData,
+	type TableOptions,
+	type TableOptionsResolved,
+	type TableState,
+	type Updater,
+	createTable,
+} from "@tanstack/table-core";
+
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export function createSvelteTable<TData extends RowData>(options: TableOptions<TData>) {
+	const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
+		{
+			state: {},
+			onStateChange() {},
+			renderFallbackValue: null,
+			mergeOptions: (
+				defaultOptions: TableOptions<TData>,
+				options: Partial<TableOptions<TData>>
+			) => {
+				return mergeObjects(defaultOptions, options);
+			},
+		},
+		options
+	);
+
+	const table = createTable(resolvedOptions);
+	let state = $state<TableState>(table.initialState);
+
+	function updateOptions() {
+		table.setOptions(() => {
+			return mergeObjects(resolvedOptions, options, {
+				state: mergeObjects(state, options.state || {}),
+
+				onStateChange: (updater: Updater<TableState>) => {
+					if (updater instanceof Function) state = updater(state);
+					else state = mergeObjects(state, updater);
+
+					options.onStateChange?.(updater);
+				},
+			});
+		});
+	}
+
+	updateOptions();
+
+	$effect.pre(() => {
+		updateOptions();
+	});
+
+	return table;
+}
+
+type MaybeThunk<T extends object> = T | (() => T | null | undefined);
+type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R]
+	? H & Intersection<R>
+	: unknown) & {};
+
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(
+	...sources: Sources
+): Intersection<{ [K in keyof Sources]: Sources[K] }> {
+	const resolve = <T extends object>(src: MaybeThunk<T>): T | undefined =>
+		typeof src === "function" ? (src() ?? undefined) : src;
+
+	const findSourceWithKey = (key: PropertyKey) => {
+		for (let i = sources.length - 1; i >= 0; i--) {
+			const obj = resolve(sources[i]);
+			if (obj && key in obj) return obj;
+		}
+		return undefined;
+	};
+
+	return new Proxy(Object.create(null), {
+		get(_, key) {
+			const src = findSourceWithKey(key);
+
+			return src?.[key as never];
+		},
+
+		has(_, key) {
+			return !!findSourceWithKey(key);
+		},
+
+		ownKeys(): (string | symbol)[] {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const all = new Set<string | symbol>();
+			for (const s of sources) {
+				const obj = resolve(s);
+				if (obj) {
+					for (const k of Reflect.ownKeys(obj) as (string | symbol)[]) {
+						all.add(k);
+					}
+				}
+			}
+			return [...all];
+		},
+
+		getOwnPropertyDescriptor(_, key) {
+			const src = findSourceWithKey(key);
+			if (!src) return undefined;
+			return {
+				configurable: true,
+				enumerable: true,
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				value: (src as any)[key],
+				writable: true,
+			};
+		},
+	}) as Intersection<{ [K in keyof Sources]: Sources[K] }>;
+}
diff --git a/template/apps/web/src/lib/components/ui/data-table/flex-render.svelte b/template/apps/web/src/lib/components/ui/data-table/flex-render.svelte
new file mode 100644
index 0000000..ac82a58
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/data-table/flex-render.svelte
@@ -0,0 +1,40 @@
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
+	import type { Attachment } from "svelte/attachments";
+	type Props = {
+		/** The cell or header field of the current cell's column definition. */
+		content?: TContext extends HeaderContext<TData, TValue>
+			? ColumnDefTemplate<HeaderContext<TData, TValue>>
+			: TContext extends CellContext<TData, TValue>
+				? ColumnDefTemplate<CellContext<TData, TValue>>
+				: never;
+		/** The result of the `getContext()` function of the header or cell */
+		context: TContext;
+
+		/** Used to pass attachments that can't be gotten through context */
+		attach?: Attachment;
+	};
+
+	let { content, context, attach }: Props = $props();
+</script>
+
+{#if typeof content === "string"}
+	{content}
+{:else if content instanceof Function}
+	<!-- It's unlikely that a CellContext will be passed to a Header -->
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{@const result = content(context as any)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} {attach} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet({ ...params, attach })}
+	{:else}
+		{result}
+	{/if}
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/data-table/index.ts b/template/apps/web/src/lib/components/ui/data-table/index.ts
new file mode 100644
index 0000000..5f4e77e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/data-table/index.ts
@@ -0,0 +1,3 @@
+export { default as FlexRender } from "./flex-render.svelte";
+export { renderComponent, renderSnippet } from "./render-helpers.js";
+export { createSvelteTable } from "./data-table.svelte.js";
diff --git a/template/apps/web/src/lib/components/ui/data-table/render-helpers.ts b/template/apps/web/src/lib/components/ui/data-table/render-helpers.ts
new file mode 100644
index 0000000..fa036d6
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/data-table/render-helpers.ts
@@ -0,0 +1,111 @@
+import type { Component, ComponentProps, Snippet } from "svelte";
+
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export class RenderComponentConfig<TComponent extends Component> {
+	component: TComponent;
+	props: ComponentProps<TComponent> | Record<string, never>;
+	constructor(
+		component: TComponent,
+		props: ComponentProps<TComponent> | Record<string, never> = {}
+	) {
+		this.component = component;
+		this.props = props;
+	}
+}
+
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export class RenderSnippetConfig<TProps> {
+	snippet: Snippet<[TProps]>;
+	params: TProps;
+	constructor(snippet: Snippet<[TProps]>, params: TProps) {
+		this.snippet = snippet;
+		this.params = params;
+	}
+}
+
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderComponent<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	T extends Component<any>,
+	Props extends ComponentProps<T>,
+>(component: T, props: Props = {} as Props) {
+	return new RenderComponentConfig(component, props);
+}
+
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps = {} as TProps) {
+	return new RenderSnippetConfig(snippet, params);
+}
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog-close.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 0000000..de68f2f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog-content.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..6c963e4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import DialogPortal from "./dialog-portal.svelte";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import XIcon from '@lucide/svelte/icons/x';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+						<XIcon  />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog-description.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..bd220ac
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..2f54b2c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Button } from "$lib/components/ui/button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		showCloseButton = false,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("cn-dialog-footer flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+	{#if showCloseButton}
+		<DialogPrimitive.Close>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Close</Button>
+			{/snippet}
+		</DialogPrimitive.Close>
+	{/if}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog-header.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..8164f0f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("gap-1 text-left flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..19f69f0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..ccfa79c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog-title.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..493f497
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-sm font-medium", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog-trigger.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000..589ee0c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/dialog/dialog.svelte b/template/apps/web/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 0000000..211672c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/dialog/index.ts b/template/apps/web/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..076cef5
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-close.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-close.svelte
new file mode 100644
index 0000000..95c2479
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
+</script>
+
+<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-content.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-content.svelte
new file mode 100644
index 0000000..c389dd6
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-content.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import DrawerPortal from "./drawer-portal.svelte";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		...restProps
+	}: DrawerPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+	} = $props();
+</script>
+
+<DrawerPortal {...portalProps}>
+	<DrawerOverlay />
+	<DrawerPrimitive.Content
+		bind:ref
+		data-slot="drawer-content"
+		class={cn("bg-popover text-popover-foreground flex h-auto flex-col text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50", className)}
+		{...restProps}
+	>
+		<div
+			class="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+		></div>
+		{@render children?.()}
+	</DrawerPrimitive.Content>
+</DrawerPortal>
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-description.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-description.svelte
new file mode 100644
index 0000000..ded26d2
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DrawerPrimitive.DescriptionProps = $props();
+</script>
+
+<DrawerPrimitive.Description
+	bind:ref
+	data-slot="drawer-description"
+	class={cn("text-muted-foreground text-xs/relaxed", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-footer.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-footer.svelte
new file mode 100644
index 0000000..56a1fc6
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-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="drawer-footer"
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-header.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-header.svelte
new file mode 100644
index 0000000..861f956
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-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="drawer-header"
+	class={cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-nested.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-nested.svelte
new file mode 100644
index 0000000..834af94
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-nested.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let {
+		shouldScaleBackground = true,
+		open = $bindable(false),
+		activeSnapPoint = $bindable(null),
+		...restProps
+	}: DrawerPrimitive.RootProps = $props();
+</script>
+
+<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-overlay.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-overlay.svelte
new file mode 100644
index 0000000..84df1e8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DrawerPrimitive.OverlayProps = $props();
+</script>
+
+<DrawerPrimitive.Overlay
+	bind:ref
+	data-slot="drawer-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-portal.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-portal.svelte
new file mode 100644
index 0000000..5a0dd74
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ...restProps }: DrawerPrimitive.PortalProps = $props();
+</script>
+
+<DrawerPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-title.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-title.svelte
new file mode 100644
index 0000000..ba99287
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DrawerPrimitive.TitleProps = $props();
+</script>
+
+<DrawerPrimitive.Title
+	bind:ref
+	data-slot="drawer-title"
+	class={cn("text-foreground text-sm font-medium", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer-trigger.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer-trigger.svelte
new file mode 100644
index 0000000..f1877d8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.TriggerProps = $props();
+</script>
+
+<DrawerPrimitive.Trigger bind:ref data-slot="drawer-trigger" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/drawer/drawer.svelte b/template/apps/web/src/lib/components/ui/drawer/drawer.svelte
new file mode 100644
index 0000000..0cb57ff
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/drawer.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let {
+		shouldScaleBackground = true,
+		open = $bindable(false),
+		activeSnapPoint = $bindable(null),
+		...restProps
+	}: DrawerPrimitive.RootProps = $props();
+</script>
+
+<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/drawer/index.ts b/template/apps/web/src/lib/components/ui/drawer/index.ts
new file mode 100644
index 0000000..1656cac
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/drawer/index.ts
@@ -0,0 +1,38 @@
+import Root from "./drawer.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import Title from "./drawer-title.svelte";
+import NestedRoot from "./drawer-nested.svelte";
+import Close from "./drawer-close.svelte";
+import Trigger from "./drawer-trigger.svelte";
+import Portal from "./drawer-portal.svelte";
+
+export {
+	Root,
+	NestedRoot,
+	Content,
+	Description,
+	Overlay,
+	Footer,
+	Header,
+	Title,
+	Trigger,
+	Portal,
+	Close,
+
+	//
+	Root as Drawer,
+	NestedRoot as DrawerNestedRoot,
+	Content as DrawerContent,
+	Description as DrawerDescription,
+	Overlay as DrawerOverlay,
+	Footer as DrawerFooter,
+	Header as DrawerHeader,
+	Title as DrawerTitle,
+	Trigger as DrawerTrigger,
+	Portal as DrawerPortal,
+	Close as DrawerClose,
+};
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 0000000..e0e1971
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable([]),
+		...restProps
+	}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 0000000..e12c9a4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-checkbox-item-indicator"
+		>
+			{#if indeterminate}
+				<MinusIcon  />
+			{:else if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..1442e33
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		align = "start",
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+	} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000..433540f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 0000000..aca1f7b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..20713df
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		variant = "default",
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+		variant?: "default" | "destructive";
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..05a9e64
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn("text-muted-foreground px-2 py-2 text-xs data-inset:pl-7 data-[inset]:pl-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 0000000..274cfef
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..189aef4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..f7e4dbf
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-radio-item-indicator"
+		>
+			{#if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..45f82af
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn("bg-border -mx-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..ed7cc85
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..8de5cf1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 w-auto", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..5e16f67
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 0000000..f044581
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000..cb05344
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 0000000..cb4bc62
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/dropdown-menu/index.ts b/template/apps/web/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..7850c6a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,54 @@
+import Root from "./dropdown-menu.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+
+export {
+	CheckboxGroup,
+	CheckboxItem,
+	Content,
+	Portal,
+	Root as DropdownMenu,
+	CheckboxGroup as DropdownMenuCheckboxGroup,
+	CheckboxItem as DropdownMenuCheckboxItem,
+	Content as DropdownMenuContent,
+	Portal as DropdownMenuPortal,
+	Group as DropdownMenuGroup,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	RadioGroup as DropdownMenuRadioGroup,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	Shortcut as DropdownMenuShortcut,
+	Sub as DropdownMenuSub,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	Trigger as DropdownMenuTrigger,
+	GroupHeading as DropdownMenuGroupHeading,
+	Group,
+	GroupHeading,
+	Item,
+	Label,
+	RadioGroup,
+	RadioItem,
+	Root,
+	Separator,
+	Shortcut,
+	Sub,
+	SubContent,
+	SubTrigger,
+	Trigger,
+};
diff --git a/template/apps/web/src/lib/components/ui/empty/empty-content.svelte b/template/apps/web/src/lib/components/ui/empty/empty-content.svelte
new file mode 100644
index 0000000..cc17823
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/empty/empty-content.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="empty-content"
+	class={cn(
+		"gap-2.5 text-xs flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/empty/empty-description.svelte b/template/apps/web/src/lib/components/ui/empty/empty-description.svelte
new file mode 100644
index 0000000..9e8cd78
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/empty/empty-description.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="empty-description"
+	class={cn(
+		"text-xs/relaxed text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/empty/empty-header.svelte b/template/apps/web/src/lib/components/ui/empty/empty-header.svelte
new file mode 100644
index 0000000..7112f66
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/empty/empty-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-header"
+	class={cn("gap-2 flex max-w-sm flex-col items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/empty/empty-media.svelte b/template/apps/web/src/lib/components/ui/empty/empty-media.svelte
new file mode 100644
index 0000000..24fe55d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/empty/empty-media.svelte
@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const emptyMediaVariants = tv({
+		base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-none [&_svg:not([class*='size-'])]:size-4",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-icon"
+	data-variant={variant}
+	class={cn(emptyMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/empty/empty-title.svelte b/template/apps/web/src/lib/components/ui/empty/empty-title.svelte
new file mode 100644
index 0000000..346c2ec
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/empty/empty-title.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="empty-title"
+	class={cn("text-sm font-medium", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/empty/empty.svelte b/template/apps/web/src/lib/components/ui/empty/empty.svelte
new file mode 100644
index 0000000..e16c45c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/empty/empty.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="empty"
+	class={cn(
+		"gap-4 rounded-none border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/empty/index.ts b/template/apps/web/src/lib/components/ui/empty/index.ts
new file mode 100644
index 0000000..ae4c106
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/empty/index.ts
@@ -0,0 +1,22 @@
+import Root from "./empty.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Description from "./empty-description.svelte";
+import Content from "./empty-content.svelte";
+
+export {
+	Root,
+	Header,
+	Media,
+	Title,
+	Description,
+	Content,
+	//
+	Root as Empty,
+	Header as EmptyHeader,
+	Media as EmptyMedia,
+	Title as EmptyTitle,
+	Description as EmptyDescription,
+	Content as EmptyContent,
+};
diff --git a/template/apps/web/src/lib/components/ui/field/field-content.svelte b/template/apps/web/src/lib/components/ui/field/field-content.svelte
new file mode 100644
index 0000000..1545c43
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field-content.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="field-content"
+	class={cn("gap-0.5 group/field-content flex flex-1 flex-col leading-snug", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/field/field-description.svelte b/template/apps/web/src/lib/components/ui/field/field-description.svelte
new file mode 100644
index 0000000..f033c10
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field-description.svelte
@@ -0,0 +1,25 @@
+<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<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="field-description"
+	class={cn(
+		"text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+		"last:mt-0 nth-last-2:-mt-1",
+		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/template/apps/web/src/lib/components/ui/field/field-error.svelte b/template/apps/web/src/lib/components/ui/field/field-error.svelte
new file mode 100644
index 0000000..326cf59
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field-error.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		errors,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+		errors?: { message?: string }[];
+	} = $props();
+
+	const hasContent = $derived.by(() => {
+		// has slotted error
+		if (children) return true;
+
+		// no errors
+		if (!errors || errors.length === 0) return false;
+
+		// has an error but no message
+		if (errors.length === 1 && !errors[0]?.message) {
+			return false;
+		}
+
+		return true;
+	});
+
+	const isMultipleErrors = $derived(errors && errors.length > 1);
+	const singleErrorMessage = $derived(errors && errors.length === 1 && errors[0]?.message);
+</script>
+
+{#if hasContent}
+	<div
+		bind:this={ref}
+		role="alert"
+		data-slot="field-error"
+		class={cn("text-destructive text-xs font-normal", className)}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{:else if singleErrorMessage}
+			{singleErrorMessage}
+		{:else if isMultipleErrors}
+			<ul class="ml-4 flex list-disc flex-col gap-1">
+				{#each errors ?? [] as error, index (index)}
+					{#if error?.message}
+						<li>{error.message}</li>
+					{/if}
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/field/field-group.svelte b/template/apps/web/src/lib/components/ui/field/field-group.svelte
new file mode 100644
index 0000000..3795195
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field-group.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="field-group"
+	class={cn(
+		"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/field/field-label.svelte b/template/apps/web/src/lib/components/ui/field/field-label.svelte
new file mode 100644
index 0000000..6d9ec73
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field-label.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Label } from "$lib/components/ui/label/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof Label> = $props();
+</script>
+
+<Label
+	bind:ref
+	data-slot="field-label"
+	class={cn(
+		"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug",
+		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Label>
diff --git a/template/apps/web/src/lib/components/ui/field/field-legend.svelte b/template/apps/web/src/lib/components/ui/field/field-legend.svelte
new file mode 100644
index 0000000..e3d8deb
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field-legend.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,
+		variant = "legend",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
+		variant?: "legend" | "label";
+	} = $props();
+</script>
+
+<legend
+	bind:this={ref}
+	data-slot="field-legend"
+	data-variant={variant}
+	class={cn("mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</legend>
diff --git a/template/apps/web/src/lib/components/ui/field/field-separator.svelte b/template/apps/web/src/lib/components/ui/field/field-separator.svelte
new file mode 100644
index 0000000..a1ab858
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field-separator.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+	} = $props();
+
+	const hasContent = $derived(!!children);
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-separator"
+	data-content={hasContent}
+	class={cn("-my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2 relative", className)}
+	{...restProps}
+>
+	<Separator class="absolute inset-0 top-1/2" />
+	{#if children}
+		<span
+			class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+			data-slot="field-separator-content"
+		>
+			{@render children()}
+		</span>
+	{/if}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/field/field-set.svelte b/template/apps/web/src/lib/components/ui/field/field-set.svelte
new file mode 100644
index 0000000..27ee330
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field-set.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLFieldsetAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLFieldsetAttributes> = $props();
+</script>
+
+<fieldset
+	bind:this={ref}
+	data-slot="field-set"
+	class={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</fieldset>
diff --git a/template/apps/web/src/lib/components/ui/field/field-title.svelte b/template/apps/web/src/lib/components/ui/field/field-title.svelte
new file mode 100644
index 0000000..f7e2f08
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field-title.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="field-label"
+	class={cn("gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/field/field.svelte b/template/apps/web/src/lib/components/ui/field/field.svelte
new file mode 100644
index 0000000..03d23c0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/field.svelte
@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const fieldVariants = tv({
+		base: "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
+		variants: {
+			orientation: {
+				vertical: "cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+				horizontal:
+					"cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				responsive:
+					"cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+			},
+		},
+		defaultVariants: {
+			orientation: "vertical",
+		},
+	});
+
+	export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: FieldOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="field"
+	data-orientation={orientation}
+	class={cn(fieldVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/field/index.ts b/template/apps/web/src/lib/components/ui/field/index.ts
new file mode 100644
index 0000000..a644a95
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/field/index.ts
@@ -0,0 +1,33 @@
+import Field from "./field.svelte";
+import Set from "./field-set.svelte";
+import Legend from "./field-legend.svelte";
+import Group from "./field-group.svelte";
+import Content from "./field-content.svelte";
+import Label from "./field-label.svelte";
+import Title from "./field-title.svelte";
+import Description from "./field-description.svelte";
+import Separator from "./field-separator.svelte";
+import Error from "./field-error.svelte";
+
+export {
+	Field,
+	Set,
+	Legend,
+	Group,
+	Content,
+	Label,
+	Title,
+	Description,
+	Separator,
+	Error,
+	//
+	Set as FieldSet,
+	Legend as FieldLegend,
+	Group as FieldGroup,
+	Content as FieldContent,
+	Label as FieldLabel,
+	Title as FieldTitle,
+	Description as FieldDescription,
+	Separator as FieldSeparator,
+	Error as FieldError,
+};
diff --git a/template/apps/web/src/lib/components/ui/form/form-button.svelte b/template/apps/web/src/lib/components/ui/form/form-button.svelte
new file mode 100644
index 0000000..48d3936
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/form/form-button.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Button, type ButtonProps } from "$lib/components/ui/button/index.js";
+
+	let { ref = $bindable(null), ...restProps }: ButtonProps = $props();
+</script>
+
+<Button bind:ref type="submit" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/form/form-description.svelte b/template/apps/web/src/lib/components/ui/form/form-description.svelte
new file mode 100644
index 0000000..a5f42be
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/form/form-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.DescriptionProps> = $props();
+</script>
+
+<FormPrimitive.Description
+	bind:ref
+	data-slot="form-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/form/form-element-field.svelte b/template/apps/web/src/lib/components/ui/form/form-element-field.svelte
new file mode 100644
index 0000000..c3ba111
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/form/form-element-field.svelte
@@ -0,0 +1,24 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
+	import * as FormPrimitive from "formsnap";
+	import type { FormPathLeaves } from "sveltekit-superforms";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> &
+		FormPrimitive.ElementFieldProps<T, U> = $props();
+</script>
+
+<FormPrimitive.ElementField {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.ElementField>
diff --git a/template/apps/web/src/lib/components/ui/form/form-field-errors.svelte b/template/apps/web/src/lib/components/ui/form/form-field-errors.svelte
new file mode 100644
index 0000000..b4c6fba
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/form/form-field-errors.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		errorClasses,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldErrorsProps> & {
+		errorClasses?: string | undefined | null;
+	} = $props();
+</script>
+
+<FormPrimitive.FieldErrors
+	bind:ref
+	class={cn("text-destructive text-sm font-medium", className)}
+	{...restProps}
+>
+	{#snippet children({ errors, errorProps })}
+		{#if childrenProp}
+			{@render childrenProp({ errors, errorProps })}
+		{:else}
+			{#each errors as error (error)}
+				<div {...errorProps} class={cn(errorClasses)}>{error}</div>
+			{/each}
+		{/if}
+	{/snippet}
+</FormPrimitive.FieldErrors>
diff --git a/template/apps/web/src/lib/components/ui/form/form-field.svelte b/template/apps/web/src/lib/components/ui/form/form-field.svelte
new file mode 100644
index 0000000..7481fda
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/form/form-field.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+	import * as FormPrimitive from "formsnap";
+	import type { FormPath } from "sveltekit-superforms";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: FormPrimitive.FieldProps<T, U> &
+		WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<FormPrimitive.Field {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div
+			bind:this={ref}
+			data-slot="form-item"
+			class={cn("space-y-2", className)}
+			{...restProps}
+		>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.Field>
diff --git a/template/apps/web/src/lib/components/ui/form/form-fieldset.svelte b/template/apps/web/src/lib/components/ui/form/form-fieldset.svelte
new file mode 100644
index 0000000..2c85857
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/form/form-fieldset.svelte
@@ -0,0 +1,15 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+	import * as FormPrimitive from "formsnap";
+	import type { FormPath } from "sveltekit-superforms";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldsetProps<T, U>> = $props();
+</script>
+
+<FormPrimitive.Fieldset bind:ref {form} {name} class={cn("space-y-2", className)} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/form/form-label.svelte b/template/apps/web/src/lib/components/ui/form/form-label.svelte
new file mode 100644
index 0000000..8749360
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/form/form-label.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { Label } from "$lib/components/ui/label/index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LabelProps> = $props();
+</script>
+
+<FormPrimitive.Label {...restProps} bind:ref>
+	{#snippet child({ props })}
+		<Label
+			{...props}
+			data-slot="form-label"
+			class={cn("data-[fs-error]:text-destructive", className)}
+		>
+			{@render children?.()}
+		</Label>
+	{/snippet}
+</FormPrimitive.Label>
diff --git a/template/apps/web/src/lib/components/ui/form/form-legend.svelte b/template/apps/web/src/lib/components/ui/form/form-legend.svelte
new file mode 100644
index 0000000..b3c9043
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/form/form-legend.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LegendProps> = $props();
+</script>
+
+<FormPrimitive.Legend
+	bind:ref
+	class={cn("data-[fs-error]:text-destructive text-sm leading-none font-medium", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/form/index.ts b/template/apps/web/src/lib/components/ui/form/index.ts
new file mode 100644
index 0000000..0713927
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/form/index.ts
@@ -0,0 +1,33 @@
+import * as FormPrimitive from "formsnap";
+import Description from "./form-description.svelte";
+import Label from "./form-label.svelte";
+import FieldErrors from "./form-field-errors.svelte";
+import Field from "./form-field.svelte";
+import Fieldset from "./form-fieldset.svelte";
+import Legend from "./form-legend.svelte";
+import ElementField from "./form-element-field.svelte";
+import Button from "./form-button.svelte";
+
+const Control = FormPrimitive.Control;
+
+export {
+	Field,
+	Control,
+	Label,
+	Button,
+	FieldErrors,
+	Description,
+	Fieldset,
+	Legend,
+	ElementField,
+	//
+	Field as FormField,
+	Control as FormControl,
+	Description as FormDescription,
+	Label as FormLabel,
+	FieldErrors as FormFieldErrors,
+	Fieldset as FormFieldset,
+	Legend as FormLegend,
+	ElementField as FormElementField,
+	Button as FormButton,
+};
diff --git a/template/apps/web/src/lib/components/ui/hover-card/hover-card-content.svelte b/template/apps/web/src/lib/components/ui/hover-card/hover-card-content.svelte
new file mode 100644
index 0000000..d2995e1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/hover-card/hover-card-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import HoverCardPortal from "./hover-card-portal.svelte";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		portalProps,
+		...restProps
+	}: HoverCardPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof HoverCardPortal>>;
+	} = $props();
+</script>
+
+<HoverCardPortal {...portalProps}>
+	<HoverCardPrimitive.Content
+		bind:ref
+		data-slot="hover-card-content"
+		{align}
+		{sideOffset}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-none p-2.5 text-xs/relaxed shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</HoverCardPortal>
diff --git a/template/apps/web/src/lib/components/ui/hover-card/hover-card-portal.svelte b/template/apps/web/src/lib/components/ui/hover-card/hover-card-portal.svelte
new file mode 100644
index 0000000..6c62dc2
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/hover-card/hover-card-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+
+	let { ...restProps }: HoverCardPrimitive.PortalProps = $props();
+</script>
+
+<HoverCardPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/hover-card/hover-card-trigger.svelte b/template/apps/web/src/lib/components/ui/hover-card/hover-card-trigger.svelte
new file mode 100644
index 0000000..322172b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/hover-card/hover-card-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: HoverCardPrimitive.TriggerProps = $props();
+</script>
+
+<HoverCardPrimitive.Trigger bind:ref data-slot="hover-card-trigger" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/hover-card/hover-card.svelte b/template/apps/web/src/lib/components/ui/hover-card/hover-card.svelte
new file mode 100644
index 0000000..5191656
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/hover-card/hover-card.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: HoverCardPrimitive.RootProps = $props();
+</script>
+
+<HoverCardPrimitive.Root bind:open {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/hover-card/index.ts b/template/apps/web/src/lib/components/ui/hover-card/index.ts
new file mode 100644
index 0000000..dd312fb
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/hover-card/index.ts
@@ -0,0 +1,15 @@
+import Root from "./hover-card.svelte";
+import Content from "./hover-card-content.svelte";
+import Trigger from "./hover-card-trigger.svelte";
+import Portal from "./hover-card-portal.svelte";
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Portal,
+	Root as HoverCard,
+	Content as HoverCardContent,
+	Trigger as HoverCardTrigger,
+	Portal as HoverCardPortal,
+};
diff --git a/template/apps/web/src/lib/components/ui/input-group/index.ts b/template/apps/web/src/lib/components/ui/input-group/index.ts
new file mode 100644
index 0000000..fe1f55d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-group/index.ts
@@ -0,0 +1,22 @@
+import Root from "./input-group.svelte";
+import Addon from "./input-group-addon.svelte";
+import Button from "./input-group-button.svelte";
+import Input from "./input-group-input.svelte";
+import Text from "./input-group-text.svelte";
+import Textarea from "./input-group-textarea.svelte";
+
+export {
+	Root,
+	Addon,
+	Button,
+	Input,
+	Text,
+	Textarea,
+	//
+	Root as InputGroup,
+	Addon as InputGroupAddon,
+	Button as InputGroupButton,
+	Input as InputGroupInput,
+	Text as InputGroupText,
+	Textarea as InputGroupTextarea,
+};
diff --git a/template/apps/web/src/lib/components/ui/input-group/input-group-addon.svelte b/template/apps/web/src/lib/components/ui/input-group/input-group-addon.svelte
new file mode 100644
index 0000000..91c3581
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-group/input-group-addon.svelte
@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+	export const inputGroupAddonVariants = tv({
+		base: "text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+		variants: {
+			align: {
+				"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+				"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+				"block-start":
+					"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+				"block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+			},
+		},
+		defaultVariants: {
+			align: "inline-start",
+		},
+	});
+
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		align = "inline-start",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: InputGroupAddonAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="input-group-addon"
+	data-align={align}
+	class={cn(inputGroupAddonVariants({ align }), className)}
+	onclick={(e) => {
+		if ((e.target as HTMLElement).closest("button")) {
+			return;
+		}
+		e.currentTarget.parentElement?.querySelector("input")?.focus();
+	}}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/input-group/input-group-button.svelte b/template/apps/web/src/lib/components/ui/input-group/input-group-button.svelte
new file mode 100644
index 0000000..125f5ac
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-group/input-group-button.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	const inputGroupButtonVariants = tv({
+		base: "gap-2 text-xs flex items-center shadow-none",
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: "gap-1",
+				"icon-xs": "size-6 rounded-none p-0 has-[>svg]:p-0",
+				"icon-sm": "size-7 p-0 has-[>svg]:p-0",
+			},
+		},
+		defaultVariants: {
+			size: "xs",
+		},
+	});
+
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>["size"];
+</script>
+
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		type = "button",
+		variant = "ghost",
+		size = "xs",
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, "href" | "size"> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</Button>
diff --git a/template/apps/web/src/lib/components/ui/input-group/input-group-input.svelte b/template/apps/web/src/lib/components/ui/input-group/input-group-input.svelte
new file mode 100644
index 0000000..316c0cb
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-group/input-group-input.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Input } from "$lib/components/ui/input/index.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	data-slot="input-group-control"
+	class={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1", className)}
+	bind:value
+	{...props}
+/>
diff --git a/template/apps/web/src/lib/components/ui/input-group/input-group-text.svelte b/template/apps/web/src/lib/components/ui/input-group/input-group-text.svelte
new file mode 100644
index 0000000..d6ab315
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-group/input-group-text.svelte
@@ -0,0 +1,19 @@
+<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}
+	class={cn("text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/template/apps/web/src/lib/components/ui/input-group/input-group-textarea.svelte b/template/apps/web/src/lib/components/ui/input-group/input-group-textarea.svelte
new file mode 100644
index 0000000..9fbabe6
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-group/input-group-textarea.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Textarea } from "$lib/components/ui/textarea/index.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+	bind:ref
+	data-slot="input-group-control"
+	class={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none", className)}
+	bind:value
+	{...props}
+/>
diff --git a/template/apps/web/src/lib/components/ui/input-group/input-group.svelte b/template/apps/web/src/lib/components/ui/input-group/input-group.svelte
new file mode 100644
index 0000000..f19001f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-group/input-group.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...props
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-group"
+	role="group"
+	class={cn(
+		"group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/input-otp/index.ts b/template/apps/web/src/lib/components/ui/input-otp/index.ts
new file mode 100644
index 0000000..e9ae273
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-otp/index.ts
@@ -0,0 +1,15 @@
+import Root from "./input-otp.svelte";
+import Group from "./input-otp-group.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Separator from "./input-otp-separator.svelte";
+
+export {
+	Root,
+	Group,
+	Slot,
+	Separator,
+	Root as InputOTP,
+	Group as InputOTPGroup,
+	Slot as InputOTPSlot,
+	Separator as InputOTPSeparator,
+};
diff --git a/template/apps/web/src/lib/components/ui/input-otp/input-otp-group.svelte b/template/apps/web/src/lib/components/ui/input-otp/input-otp-group.svelte
new file mode 100644
index 0000000..0be7be4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-otp/input-otp-group.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="input-otp-group"
+	class={cn("has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/input-otp/input-otp-separator.svelte b/template/apps/web/src/lib/components/ui/input-otp/input-otp-separator.svelte
new file mode 100644
index 0000000..99fdbb9
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-otp/input-otp-separator.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
+	import { cn } from "$lib/utils.js";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-otp-separator"
+	role="separator"
+	class={cn("[&_svg:not([class*='size-'])]:size-4 flex items-center", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<MinusIcon  />
+	{/if}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/input-otp/input-otp-slot.svelte b/template/apps/web/src/lib/components/ui/input-otp/input-otp-slot.svelte
new file mode 100644
index 0000000..64642df
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-otp/input-otp-slot.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { PinInput as InputOTPPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		cell,
+		class: className,
+		...restProps
+	}: InputOTPPrimitive.CellProps = $props();
+</script>
+
+<InputOTPPrimitive.Cell
+	{cell}
+	bind:ref
+	data-slot="input-otp-slot"
+	class={cn(
+		"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10",
+		className
+	)}
+	{...restProps}
+>
+	{cell.char}
+	{#if cell.hasFakeCaret}
+		<div
+			class="cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center"
+		>
+			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px"></div>
+		</div>
+	{/if}
+</InputOTPPrimitive.Cell>
diff --git a/template/apps/web/src/lib/components/ui/input-otp/input-otp.svelte b/template/apps/web/src/lib/components/ui/input-otp/input-otp.svelte
new file mode 100644
index 0000000..709bb22
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input-otp/input-otp.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { PinInput as InputOTPPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: InputOTPPrimitive.RootProps = $props();
+</script>
+
+<InputOTPPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="input-otp"
+	spellcheck={false}
+	class={cn(
+		"cn-input-otp-input gap-2 flex items-center disabled:cursor-not-allowed has-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/input/index.ts b/template/apps/web/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..f47b6d3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/template/apps/web/src/lib/components/ui/input/input.svelte b/template/apps/web/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..86cf0fe
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-none border bg-transparent px-2.5 py-1 text-xs transition-colors file:h-6 file:text-xs file:font-medium focus-visible:ring-1 aria-invalid:ring-1 md:text-xs file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-none border bg-transparent px-2.5 py-1 text-xs transition-colors file:h-6 file:text-xs file:font-medium focus-visible:ring-1 aria-invalid:ring-1 md:text-xs file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/item/index.ts b/template/apps/web/src/lib/components/ui/item/index.ts
new file mode 100644
index 0000000..168bc3e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/index.ts
@@ -0,0 +1,34 @@
+import Root from "./item.svelte";
+import Group from "./item-group.svelte";
+import Separator from "./item-separator.svelte";
+import Header from "./item-header.svelte";
+import Footer from "./item-footer.svelte";
+import Content from "./item-content.svelte";
+import Title from "./item-title.svelte";
+import Description from "./item-description.svelte";
+import Actions from "./item-actions.svelte";
+import Media from "./item-media.svelte";
+
+export {
+	Root,
+	Group,
+	Separator,
+	Header,
+	Footer,
+	Content,
+	Title,
+	Description,
+	Actions,
+	Media,
+	//
+	Root as Item,
+	Group as ItemGroup,
+	Separator as ItemSeparator,
+	Header as ItemHeader,
+	Footer as ItemFooter,
+	Content as ItemContent,
+	Title as ItemTitle,
+	Description as ItemDescription,
+	Actions as ItemActions,
+	Media as ItemMedia,
+};
diff --git a/template/apps/web/src/lib/components/ui/item/item-actions.svelte b/template/apps/web/src/lib/components/ui/item/item-actions.svelte
new file mode 100644
index 0000000..4f661a3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item-actions.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="item-actions"
+	class={cn("gap-2 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/item/item-content.svelte b/template/apps/web/src/lib/components/ui/item/item-content.svelte
new file mode 100644
index 0000000..2649b79
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item-content.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="item-content"
+	class={cn(
+		"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/item/item-description.svelte b/template/apps/web/src/lib/components/ui/item/item-description.svelte
new file mode 100644
index 0000000..4b15ffd
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item-description.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<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="item-description"
+	class={cn(
+		"text-muted-foreground text-left text-xs/relaxed group-data-[size=xs]/item:text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/template/apps/web/src/lib/components/ui/item/item-footer.svelte b/template/apps/web/src/lib/components/ui/item/item-footer.svelte
new file mode 100644
index 0000000..cd68c38
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item-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="item-footer"
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/item/item-group.svelte b/template/apps/web/src/lib/components/ui/item/item-group.svelte
new file mode 100644
index 0000000..3e58e36
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="list"
+	data-slot="item-group"
+	class={cn("gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/item/item-header.svelte b/template/apps/web/src/lib/components/ui/item/item-header.svelte
new file mode 100644
index 0000000..e1116f4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-header"
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/item/item-media.svelte b/template/apps/web/src/lib/components/ui/item/item-media.svelte
new file mode 100644
index 0000000..87f6a5e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item-media.svelte
@@ -0,0 +1,42 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const itemMediaVariants = tv({
+		base: "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "[&_svg:not([class*='size-'])]:size-4",
+				image: "size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: ItemMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-media"
+	data-variant={variant}
+	class={cn(itemMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/item/item-separator.svelte b/template/apps/web/src/lib/components/ui/item/item-separator.svelte
new file mode 100644
index 0000000..992541c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item-separator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="item-separator"
+	orientation="horizontal"
+	class={cn("my-2", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/item/item-title.svelte b/template/apps/web/src/lib/components/ui/item/item-title.svelte
new file mode 100644
index 0000000..f472df2
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item-title.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="item-title"
+	class={cn("gap-2 text-xs font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/item/item.svelte b/template/apps/web/src/lib/components/ui/item/item.svelte
new file mode 100644
index 0000000..453bf1c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/item/item.svelte
@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const itemVariants = tv({
+		base: "[a]:hover:bg-muted rounded-none border text-xs group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
+		variants: {
+			variant: {
+				default: "border-transparent",
+				outline: "border-border",
+				muted: "bg-muted/50 border-transparent",
+			},
+			size: {
+				default: "gap-2.5 px-3 py-2.5",
+				sm: "gap-2.5 px-3 py-2.5",
+				xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ItemSize = VariantProps<typeof itemVariants>["size"];
+	export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		variant,
+		size,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		variant?: ItemVariant;
+		size?: ItemSize;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(itemVariants({ variant, size }), className),
+		"data-slot": "item",
+		"data-variant": variant,
+		"data-size": size,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/kbd/index.ts b/template/apps/web/src/lib/components/ui/kbd/index.ts
new file mode 100644
index 0000000..6aa7f07
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/kbd/index.ts
@@ -0,0 +1,10 @@
+import Root from "./kbd.svelte";
+import Group from "./kbd-group.svelte";
+
+export {
+	Root,
+	Group,
+	//
+	Root as Kbd,
+	Group as KbdGroup,
+};
diff --git a/template/apps/web/src/lib/components/ui/kbd/kbd-group.svelte b/template/apps/web/src/lib/components/ui/kbd/kbd-group.svelte
new file mode 100644
index 0000000..1676c67
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/kbd/kbd-group.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>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd-group"
+	class={cn("gap-1 inline-flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>
diff --git a/template/apps/web/src/lib/components/ui/kbd/kbd.svelte b/template/apps/web/src/lib/components/ui/kbd/kbd.svelte
new file mode 100644
index 0000000..3c05c59
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/kbd/kbd.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<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd"
+	class={cn(
+		"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>
diff --git a/template/apps/web/src/lib/components/ui/label/index.ts b/template/apps/web/src/lib/components/ui/label/index.ts
new file mode 100644
index 0000000..8bfca0b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
diff --git a/template/apps/web/src/lib/components/ui/label/label.svelte b/template/apps/web/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000..5781ab7
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		"gap-2 text-xs leading-none group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/menubar/index.ts b/template/apps/web/src/lib/components/ui/menubar/index.ts
new file mode 100644
index 0000000..2440d7a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/index.ts
@@ -0,0 +1,55 @@
+import Root from "./menubar.svelte";
+import Menu from "./menubar-menu.svelte";
+import Sub from "./menubar-sub.svelte";
+import RadioGroup from "./menubar-radio-group.svelte";
+import CheckboxItem from "./menubar-checkbox-item.svelte";
+import Content from "./menubar-content.svelte";
+import Item from "./menubar-item.svelte";
+import Group from "./menubar-group.svelte";
+import RadioItem from "./menubar-radio-item.svelte";
+import Separator from "./menubar-separator.svelte";
+import Shortcut from "./menubar-shortcut.svelte";
+import SubContent from "./menubar-sub-content.svelte";
+import SubTrigger from "./menubar-sub-trigger.svelte";
+import Trigger from "./menubar-trigger.svelte";
+import Label from "./menubar-label.svelte";
+import GroupHeading from "./menubar-group-heading.svelte";
+import Portal from "./menubar-portal.svelte";
+
+export {
+	Root,
+	CheckboxItem,
+	Content,
+	Item,
+	RadioItem,
+	Separator,
+	Shortcut,
+	SubContent,
+	SubTrigger,
+	Trigger,
+	Menu,
+	Group,
+	Sub,
+	RadioGroup,
+	Label,
+	GroupHeading,
+	Portal,
+	//
+	Root as Menubar,
+	CheckboxItem as MenubarCheckboxItem,
+	Content as MenubarContent,
+	Item as MenubarItem,
+	RadioItem as MenubarRadioItem,
+	Separator as MenubarSeparator,
+	Shortcut as MenubarShortcut,
+	SubContent as MenubarSubContent,
+	SubTrigger as MenubarSubTrigger,
+	Trigger as MenubarTrigger,
+	Menu as MenubarMenu,
+	Group as MenubarGroup,
+	Sub as MenubarSub,
+	RadioGroup as MenubarRadioGroup,
+	Label as MenubarLabel,
+	GroupHeading as MenubarGroupHeading,
+	Portal as MenubarPortal,
+};
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-checkbox-item.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
new file mode 100644
index 0000000..fc1a25b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		inset,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
+		inset?: boolean;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<MenubarPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="menubar-checkbox-item"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-28 pl-8 text-xs data-inset:pl-8 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked: checked, indeterminate: indeterminate })}
+		<span
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
+		>
+			{#if indeterminate}
+				<MinusIcon  />
+			{:else if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</MenubarPrimitive.CheckboxItem>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-content.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-content.svelte
new file mode 100644
index 0000000..855da75
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-content.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import MenubarPortal from "./menubar-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 8,
+		alignOffset = -4,
+		align = "start",
+		side = "bottom",
+		portalProps,
+		...restProps
+	}: MenubarPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;
+	} = $props();
+</script>
+
+<MenubarPortal {...portalProps}>
+	<MenubarPrimitive.Content
+		bind:ref
+		data-slot="menubar-content"
+		{align}
+		{alignOffset}
+		{side}
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 z-50 min-w-36 origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100",
+			className
+		)}
+		{...restProps}
+	/>
+</MenubarPortal>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-group-heading.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-group-heading.svelte
new file mode 100644
index 0000000..c5b8f92
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		inset,
+		class: className,
+		...restProps
+	}: ComponentProps<typeof MenubarPrimitive.GroupHeading> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<MenubarPrimitive.GroupHeading
+	bind:ref
+	data-slot="menubar-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:ps-8", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-group.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-group.svelte
new file mode 100644
index 0000000..f75b75a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-group.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		...restProps
+	}: MenubarPrimitive.GroupProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<MenubarPrimitive.Group bind:ref data-slot="menubar-group" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-item.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-item.svelte
new file mode 100644
index 0000000..618c30e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-item.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset = undefined,
+		variant = "default",
+		...restProps
+	}: MenubarPrimitive.ItemProps & {
+		inset?: boolean;
+		variant?: "default" | "destructive";
+	} = $props();
+</script>
+
+<MenubarPrimitive.Item
+	bind:ref
+	data-slot="menubar-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item flex items-center", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-label.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-label.svelte
new file mode 100644
index 0000000..5dc3023
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-label.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { type WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		inset,
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="menubar-label"
+	data-inset={inset}
+	class={cn("px-2 py-2 text-xs data-inset:pl-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-menu.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-menu.svelte
new file mode 100644
index 0000000..fe3cffa
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let { ...restProps }: MenubarPrimitive.MenuProps = $props();
+</script>
+
+<MenubarPrimitive.Menu {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-portal.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-portal.svelte
new file mode 100644
index 0000000..5907ff4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let { ...restProps }: MenubarPrimitive.PortalProps = $props();
+</script>
+
+<MenubarPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-radio-group.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-radio-group.svelte
new file mode 100644
index 0000000..e9615a0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-radio-group.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		...restProps
+	}: MenubarPrimitive.RadioGroupProps = $props();
+</script>
+
+<MenubarPrimitive.RadioGroup bind:ref bind:value data-slot="menubar-radio-group" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-radio-item.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-radio-item.svelte
new file mode 100644
index 0000000..3f369d0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<MenubarPrimitive.RadioItemProps> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<MenubarPrimitive.RadioItem
+	bind:ref
+	data-slot="menubar-radio-item"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-8 text-xs data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
+		>
+			{#if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</MenubarPrimitive.RadioItem>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-separator.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-separator.svelte
new file mode 100644
index 0000000..a2caf6e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.SeparatorProps = $props();
+</script>
+
+<MenubarPrimitive.Separator
+	bind:ref
+	data-slot="menubar-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-shortcut.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-shortcut.svelte
new file mode 100644
index 0000000..4307ac8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-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="menubar-shortcut"
+	class={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-sub-content.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-sub-content.svelte
new file mode 100644
index 0000000..f4b4fd3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-sub-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.SubContentProps = $props();
+</script>
+
+<MenubarPrimitive.SubContent
+	bind:ref
+	data-slot="menubar-sub-content"
+	class={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-sub-trigger.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
new file mode 100644
index 0000000..5c9e013
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset = undefined,
+		children,
+		...restProps
+	}: WithoutChild<MenubarPrimitive.SubTriggerProps> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<MenubarPrimitive.SubTrigger
+	bind:ref
+	data-slot="menubar-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="cn-rtl-flip ml-auto size-4" />
+</MenubarPrimitive.SubTrigger>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-sub.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-sub.svelte
new file mode 100644
index 0000000..82f962e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: MenubarPrimitive.SubProps = $props();
+</script>
+
+<MenubarPrimitive.Sub bind:open {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar-trigger.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar-trigger.svelte
new file mode 100644
index 0000000..86f67db
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.TriggerProps = $props();
+</script>
+
+<MenubarPrimitive.Trigger
+	bind:ref
+	data-slot="menubar-trigger"
+	class={cn("hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/menubar/menubar.svelte b/template/apps/web/src/lib/components/ui/menubar/menubar.svelte
new file mode 100644
index 0000000..48af378
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/menubar/menubar.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.RootProps = $props();
+</script>
+
+<MenubarPrimitive.Root
+	bind:ref
+	data-slot="menubar"
+	class={cn("h-8 gap-0.5 rounded-none border p-1 flex items-center", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/native-select/index.ts b/template/apps/web/src/lib/components/ui/native-select/index.ts
new file mode 100644
index 0000000..4aebbe1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/native-select/index.ts
@@ -0,0 +1,12 @@
+import Root from "./native-select.svelte";
+import Option from "./native-select-option.svelte";
+import OptGroup from "./native-select-opt-group.svelte";
+
+export {
+	Root,
+	Option,
+	OptGroup,
+	Root as NativeSelect,
+	Option as NativeSelectOption,
+	OptGroup as NativeSelectOptGroup,
+};
diff --git a/template/apps/web/src/lib/components/ui/native-select/native-select-opt-group.svelte b/template/apps/web/src/lib/components/ui/native-select/native-select-opt-group.svelte
new file mode 100644
index 0000000..16339f1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/native-select/native-select-opt-group.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLOptgroupAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptgroupAttributes> = $props();
+</script>
+
+<optgroup bind:this={ref} data-slot="native-select-opt-group" {...restProps}>
+	{@render children?.()}
+</optgroup>
diff --git a/template/apps/web/src/lib/components/ui/native-select/native-select-option.svelte b/template/apps/web/src/lib/components/ui/native-select/native-select-option.svelte
new file mode 100644
index 0000000..10c9e29
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/native-select/native-select-option.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLOptionAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptionAttributes> = $props();
+</script>
+
+<option bind:this={ref} data-slot="native-select-option" {...restProps}>
+	{@render children?.()}
+</option>
diff --git a/template/apps/web/src/lib/components/ui/native-select/native-select.svelte b/template/apps/web/src/lib/components/ui/native-select/native-select.svelte
new file mode 100644
index 0000000..0139cb7
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/native-select/native-select.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes>, "size"> & {
+		size?: "sm" | "default";
+	};
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		children,
+		...restProps
+	}: NativeSelectProps = $props();
+</script>
+
+<div
+	class={cn(
+		"cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50",
+		className
+	)}
+	data-slot="native-select-wrapper"
+	data-size={size}
+>
+	<select
+		bind:value
+		bind:this={ref}
+		data-slot="native-select"
+		data-size={size}
+		class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
+		{...restProps}
+	>
+		{@render children?.()}
+	</select>
+	<ChevronDownIcon class="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none" aria-hidden data-slot="native-select-icon" />
+</div>
diff --git a/template/apps/web/src/lib/components/ui/navigation-menu/index.ts b/template/apps/web/src/lib/components/ui/navigation-menu/index.ts
new file mode 100644
index 0000000..bbc250f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/navigation-menu/index.ts
@@ -0,0 +1,28 @@
+import Root from "./navigation-menu.svelte";
+import Content from "./navigation-menu-content.svelte";
+import Indicator from "./navigation-menu-indicator.svelte";
+import Item from "./navigation-menu-item.svelte";
+import Link from "./navigation-menu-link.svelte";
+import List from "./navigation-menu-list.svelte";
+import Trigger from "./navigation-menu-trigger.svelte";
+import Viewport from "./navigation-menu-viewport.svelte";
+
+export {
+	Root,
+	Content,
+	Indicator,
+	Item,
+	Link,
+	List,
+	Trigger,
+	Viewport,
+	//
+	Root as NavigationMenuRoot,
+	Content as NavigationMenuContent,
+	Indicator as NavigationMenuIndicator,
+	Item as NavigationMenuItem,
+	Link as NavigationMenuLink,
+	List as NavigationMenuList,
+	Trigger as NavigationMenuTrigger,
+	Viewport as NavigationMenuViewport,
+};
diff --git a/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
new file mode 100644
index 0000000..d030a66
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ContentProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Content
+	bind:ref
+	data-slot="navigation-menu-content"
+	class={cn(
+		"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
new file mode 100644
index 0000000..326a7c1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.IndicatorProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Indicator
+	bind:ref
+	data-slot="navigation-menu-indicator"
+	class={cn(
+		"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	<div class="bg-border rounded-none shadow-md relative top-[60%] h-2 w-2 rotate-45"></div>
+</NavigationMenuPrimitive.Indicator>
diff --git a/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
new file mode 100644
index 0000000..4760458
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ItemProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Item
+	bind:ref
+	data-slot="navigation-menu-item"
+	class={cn("cn-navigation-menu-item relative", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
new file mode 100644
index 0000000..3d8ec22
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.LinkProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Link
+	bind:ref
+	data-slot="navigation-menu-link"
+	class={cn("data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_svg:not([class*='size-'])]:size-4", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
new file mode 100644
index 0000000..6f36137
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ListProps = $props();
+</script>
+
+<NavigationMenuPrimitive.List
+	bind:ref
+	data-slot="navigation-menu-list"
+	class={cn(
+		"gap-0 group flex flex-1 list-none items-center justify-center",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
new file mode 100644
index 0000000..f7a2718
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" module>
+	import { cn } from "$lib/utils.js";
+	import { tv } from "tailwind-variants";
+
+	export const navigationMenuTriggerStyle = tv({
+		base: "hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none",
+	});
+</script>
+
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: NavigationMenuPrimitive.TriggerProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Trigger
+	bind:ref
+	data-slot="navigation-menu-trigger"
+	class={cn(navigationMenuTriggerStyle(), "group", className)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+</NavigationMenuPrimitive.Trigger>
diff --git a/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
new file mode 100644
index 0000000..fa28d53
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ViewportProps = $props();
+</script>
+
+<div class={cn("absolute start-0 top-full isolate z-50 flex justify-center")}>
+	<NavigationMenuPrimitive.Viewport
+		bind:ref
+		data-slot="navigation-menu-viewport"
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 ring-foreground/10 rounded-none shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full overflow-hidden md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)]",
+			className
+		)}
+		{...restProps}
+	/>
+</div>
diff --git a/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu.svelte b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu.svelte
new file mode 100644
index 0000000..27cd0d6
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/navigation-menu/navigation-menu.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import NavigationMenuViewport from "./navigation-menu-viewport.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		viewport = true,
+		children,
+		...restProps
+	}: NavigationMenuPrimitive.RootProps & {
+		viewport?: boolean;
+	} = $props();
+</script>
+
+<NavigationMenuPrimitive.Root
+	bind:ref
+	data-slot="navigation-menu"
+	data-viewport={viewport}
+	class={cn(
+		"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	{#if viewport}
+		<NavigationMenuViewport />
+	{/if}
+</NavigationMenuPrimitive.Root>
diff --git a/template/apps/web/src/lib/components/ui/pagination/index.ts b/template/apps/web/src/lib/components/ui/pagination/index.ts
new file mode 100644
index 0000000..214b851
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/index.ts
@@ -0,0 +1,31 @@
+import Root from "./pagination.svelte";
+import Content from "./pagination-content.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+import Previous from "./pagination-previous.svelte";
+import Next from "./pagination-next.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Link,
+	PrevButton, // old
+	NextButton, // old
+	Ellipsis,
+	Previous,
+	Next,
+	//
+	Root as Pagination,
+	Content as PaginationContent,
+	Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton, // old
+	NextButton as PaginationNextButton, // old
+	Ellipsis as PaginationEllipsis,
+	Previous as PaginationPrevious,
+	Next as PaginationNext,
+};
diff --git a/template/apps/web/src/lib/components/ui/pagination/pagination-content.svelte b/template/apps/web/src/lib/components/ui/pagination/pagination-content.svelte
new file mode 100644
index 0000000..cdf7415
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/pagination-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="pagination-content"
+	class={cn("gap-0.5 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/template/apps/web/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/template/apps/web/src/lib/components/ui/pagination/pagination-ellipsis.svelte
new file mode 100644
index 0000000..ca9b8c3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	aria-hidden="true"
+	data-slot="pagination-ellipsis"
+	class={cn("size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center", className)}
+	{...restProps}
+>
+	<MoreHorizontalIcon  />
+	<span class="sr-only">More pages</span>
+</span>
diff --git a/template/apps/web/src/lib/components/ui/pagination/pagination-item.svelte b/template/apps/web/src/lib/components/ui/pagination/pagination-item.svelte
new file mode 100644
index 0000000..fd7ffc3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/pagination-item.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="pagination-item" {...restProps}>
+	{@render children?.()}
+</li>
diff --git a/template/apps/web/src/lib/components/ui/pagination/pagination-link.svelte b/template/apps/web/src/lib/components/ui/pagination/pagination-link.svelte
new file mode 100644
index 0000000..d147bd2
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/pagination-link.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import { buttonVariants, type ButtonSize } from "$lib/components/ui/button/index.js";
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "icon",
+		isActive,
+		page,
+		children,
+		...restProps
+	}: PaginationPrimitive.PageProps & {
+		size?: ButtonSize;
+		isActive: boolean;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	{page.value}
+{/snippet}
+
+<PaginationPrimitive.Page
+	bind:ref
+	{page}
+	aria-current={isActive ? "page" : undefined}
+	data-slot="pagination-link"
+	data-active={isActive}
+	data-size={size}
+	class={cn(
+		buttonVariants({ size, variant: isActive ? "outline" : "ghost" }),
+		"cn-pagination-link",
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.Page>
diff --git a/template/apps/web/src/lib/components/ui/pagination/pagination-next-button.svelte b/template/apps/web/src/lib/components/ui/pagination/pagination-next-button.svelte
new file mode 100644
index 0000000..4344024
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { cn } from "$lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<span>Next</span>
+	<ChevronRightIcon class="size-4" />
+{/snippet}
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: "ghost" }), "pr-1.5!", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.NextButton>
diff --git a/template/apps/web/src/lib/components/ui/pagination/pagination-next.svelte b/template/apps/web/src/lib/components/ui/pagination/pagination-next.svelte
new file mode 100644
index 0000000..00c5189
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/pagination-next.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { cn } from "$lib/utils.js";
+	import { PaginationLink } from "./index.js";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	type PaginationNextProps = ComponentProps<typeof PaginationLink>;
+
+	let { class: className, ...restProps }: PaginationNextProps = $props();
+</script>
+
+<PaginationLink
+	aria-label="Go to next page"
+	size="default"
+	class={cn("pr-1.5!", className)}
+	{...restProps}
+>
+	<span class="cn-pagination-next-text hidden sm:block">Next</span>
+	<ChevronRightIcon data-icon="inline-end" />
+</PaginationLink>
diff --git a/template/apps/web/src/lib/components/ui/pagination/pagination-prev-button.svelte b/template/apps/web/src/lib/components/ui/pagination/pagination-prev-button.svelte
new file mode 100644
index 0000000..106ccfa
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { cn } from "$lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeftIcon class="size-4" />
+	<span>Previous</span>
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(buttonVariants({ variant: "ghost" }), "pl-1.5!", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.PrevButton>
diff --git a/template/apps/web/src/lib/components/ui/pagination/pagination-previous.svelte b/template/apps/web/src/lib/components/ui/pagination/pagination-previous.svelte
new file mode 100644
index 0000000..573e1b8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/pagination-previous.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { cn } from "$lib/utils.js";
+	import { PaginationLink } from "./index.js";
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+
+	type PaginationPreviousProps = ComponentProps<typeof PaginationLink>;
+
+	let { class: className, ...restProps }: PaginationPreviousProps = $props();
+</script>
+
+<PaginationLink
+	aria-label="Go to previous page"
+	size="default"
+	class={cn("pl-1.5!", className)}
+	{...restProps}
+>
+	<ChevronLeftIcon data-icon="inline-start" />
+	<span class="cn-pagination-previous-text hidden sm:block">Previous</span>
+</PaginationLink>
diff --git a/template/apps/web/src/lib/components/ui/pagination/pagination.svelte b/template/apps/web/src/lib/components/ui/pagination/pagination.svelte
new file mode 100644
index 0000000..8fdb5e8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/pagination/pagination.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		count = 0,
+		perPage = 10,
+		page = $bindable(1),
+		siblingCount = 1,
+		...restProps
+	}: PaginationPrimitive.RootProps = $props();
+</script>
+
+<PaginationPrimitive.Root
+	bind:ref
+	bind:page
+	role="navigation"
+	aria-label="pagination"
+	data-slot="pagination"
+	{count}
+	{perPage}
+	{siblingCount}
+	class={cn("cn-pagination mx-auto flex w-full justify-center", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/popover/index.ts b/template/apps/web/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000..5f18036
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,28 @@
+import Root from "./popover.svelte";
+import Close from "./popover-close.svelte";
+import Content from "./popover-content.svelte";
+import Description from "./popover-description.svelte";
+import Header from "./popover-header.svelte";
+import Title from "./popover-title.svelte";
+import Trigger from "./popover-trigger.svelte";
+import Portal from "./popover-portal.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Header,
+	Title,
+	Trigger,
+	Close,
+	Portal,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Description as PopoverDescription,
+	Header as PopoverHeader,
+	Title as PopoverTitle,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+	Portal as PopoverPortal,
+};
diff --git a/template/apps/web/src/lib/components/ui/popover/popover-close.svelte b/template/apps/web/src/lib/components/ui/popover/popover-close.svelte
new file mode 100644
index 0000000..c360925
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/popover/popover-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/popover/popover-content.svelte b/template/apps/web/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..6165774
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import PopoverPortal from "./popover-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = "center",
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-none p-2.5 text-xs shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>
diff --git a/template/apps/web/src/lib/components/ui/popover/popover-description.svelte b/template/apps/web/src/lib/components/ui/popover/popover-description.svelte
new file mode 100644
index 0000000..f83073d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/popover/popover-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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-description"
+	class={cn("text-muted-foreground text-xs/relaxed", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/popover/popover-header.svelte b/template/apps/web/src/lib/components/ui/popover/popover-header.svelte
new file mode 100644
index 0000000..d4e77a9
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/popover/popover-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="popover-header"
+	class={cn("flex flex-col gap-1 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/popover/popover-portal.svelte b/template/apps/web/src/lib/components/ui/popover/popover-portal.svelte
new file mode 100644
index 0000000..dd8265f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/popover/popover-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/popover/popover-title.svelte b/template/apps/web/src/lib/components/ui/popover/popover-title.svelte
new file mode 100644
index 0000000..6fdd034
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/popover/popover-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="popover-title"
+	class={cn("text-sm font-medium", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/popover/popover-trigger.svelte b/template/apps/web/src/lib/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 0000000..586323c
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn("", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/popover/popover.svelte b/template/apps/web/src/lib/components/ui/popover/popover.svelte
new file mode 100644
index 0000000..6b1aa5f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/popover/popover.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/progress/index.ts b/template/apps/web/src/lib/components/ui/progress/index.ts
new file mode 100644
index 0000000..25eee61
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/progress/index.ts
@@ -0,0 +1,7 @@
+import Root from "./progress.svelte";
+
+export {
+	Root,
+	//
+	Root as Progress,
+};
diff --git a/template/apps/web/src/lib/components/ui/progress/progress.svelte b/template/apps/web/src/lib/components/ui/progress/progress.svelte
new file mode 100644
index 0000000..d35a1fa
--- /dev/null
+++ b/template/apps/web/src/lib/components/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("bg-muted h-1 rounded-none relative flex w-full items-center overflow-x-hidden", className)}
+	{value}
+	{max}
+	{...restProps}
+>
+	<div
+		data-slot="progress-indicator"
+		class="bg-primary size-full flex-1 transition-all"
+		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
+	></div>
+</ProgressPrimitive.Root>
diff --git a/template/apps/web/src/lib/components/ui/radio-group/index.ts b/template/apps/web/src/lib/components/ui/radio-group/index.ts
new file mode 100644
index 0000000..90b33fe
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/radio-group/index.ts
@@ -0,0 +1,10 @@
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+
+export {
+	Root,
+	Item,
+	//
+	Root as RadioGroup,
+	Item as RadioGroupItem,
+};
diff --git a/template/apps/web/src/lib/components/ui/radio-group/radio-group-item.svelte b/template/apps/web/src/lib/components/ui/radio-group/radio-group-item.svelte
new file mode 100644
index 0000000..e27c3b0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	bind:ref
+	data-slot="radio-group-item"
+	class={cn(
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<div data-slot="radio-group-indicator" class="flex size-4 items-center justify-center">
+			{#if checked}
+				<CircleIcon class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
+			{/if}
+		</div>
+	{/snippet}
+</RadioGroupPrimitive.Item>
diff --git a/template/apps/web/src/lib/components/ui/radio-group/radio-group.svelte b/template/apps/web/src/lib/components/ui/radio-group/radio-group.svelte
new file mode 100644
index 0000000..9d3dd86
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/radio-group/radio-group.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: RadioGroupPrimitive.RootProps = $props();
+</script>
+
+<RadioGroupPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="radio-group"
+	class={cn("grid gap-2 w-full", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/index.ts b/template/apps/web/src/lib/components/ui/range-calendar/index.ts
new file mode 100644
index 0000000..d2d258b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/index.ts
@@ -0,0 +1,40 @@
+import Root from "./range-calendar.svelte";
+import Cell from "./range-calendar-cell.svelte";
+import Day from "./range-calendar-day.svelte";
+import Grid from "./range-calendar-grid.svelte";
+import Header from "./range-calendar-header.svelte";
+import Months from "./range-calendar-months.svelte";
+import GridRow from "./range-calendar-grid-row.svelte";
+import Heading from "./range-calendar-heading.svelte";
+import HeadCell from "./range-calendar-head-cell.svelte";
+import NextButton from "./range-calendar-next-button.svelte";
+import PrevButton from "./range-calendar-prev-button.svelte";
+import MonthSelect from "./range-calendar-month-select.svelte";
+import YearSelect from "./range-calendar-year-select.svelte";
+import Caption from "./range-calendar-caption.svelte";
+import Nav from "./range-calendar-nav.svelte";
+import Month from "./range-calendar-month.svelte";
+import GridBody from "./range-calendar-grid-body.svelte";
+import GridHead from "./range-calendar-grid-head.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	MonthSelect,
+	YearSelect,
+	Caption,
+	Nav,
+	Month,
+	//
+	Root as RangeCalendar,
+};
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-caption.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
new file mode 100644
index 0000000..944654d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import type RangeCalendar from "./range-calendar.svelte";
+	import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
+	import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof RangeCalendar>["captionLayout"];
+		months: ComponentProps<typeof RangeCalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof RangeCalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof RangeCalendarYearSelect>["yearFormat"];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<RangeCalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<RangeCalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === "dropdown-months"}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === "dropdown-years"}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
new file mode 100644
index 0000000..e042cf1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.CellProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		"dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-selected])]:bg-accent relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-e-(--cell-radius) [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:has([data-range-end])]:rounded-e-(--cell-radius) [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-s-(--cell-radius) last:[&:has([data-range-middle])]:rounded-e-(--cell-radius) [&:has([data-range-start])]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte
new file mode 100644
index 0000000..0890592
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.DayProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none",
+		"not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground data-[range-middle]:rounded-none",
+		// range Start
+		"data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-start]:hover:text-foreground",
+		// range End
+		"data-[range-end]:bg-primary data-[range-end]:text-primary-foreground data-[range-end]:hover:text-foreground",
+		// Outside months
+		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:line-through",
+		"dark:data-[range-middle]:hover:bg-accent/0",
+		// focus
+		"focus:border-ring focus:ring-ring/50 focus:relative",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
new file mode 100644
index 0000000..45a31d1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: RangeCalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridBody bind:ref {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
new file mode 100644
index 0000000..e311625
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: RangeCalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridHead bind:ref {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
new file mode 100644
index 0000000..3286b2a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.GridRowProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
new file mode 100644
index 0000000..3d74b2f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.GridProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Grid
+	bind:ref
+	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
new file mode 100644
index 0000000..93a60c0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<RangeCalendarPrimitive.HeadCell
+	bind:ref
+	class={cn(
+		"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte
new file mode 100644
index 0000000..ec1e6ea
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeaderProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Header
+	bind:ref
+	class={cn(
+		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
new file mode 100644
index 0000000..3b3325f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeadingProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Heading
+	bind:ref
+	class={cn("px-(--cell-size) text-sm font-medium", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte
new file mode 100644
index 0000000..558fbef
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+		className
+	)}
+>
+	<RangeCalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined
+							? monthItem.value === value
+							: monthItem.value === selectedMonthItem.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</RangeCalendarPrimitive.MonthSelect>
+</span>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-month.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-month.svelte
new file mode 100644
index 0000000..e747fae
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-month.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type WithElementRef, cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte
new file mode 100644
index 0000000..f717a9d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte
@@ -0,0 +1,19 @@
+<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}
+	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-nav.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-nav.svelte
new file mode 100644
index 0000000..27f33d7
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-nav.svelte
@@ -0,0 +1,19 @@
+<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>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+>
+	{@render children?.()}
+</nav>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
new file mode 100644
index 0000000..b471558
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "ghost",
+		...restProps
+	}: RangeCalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRightIcon class="size-4" />
+{/snippet}
+
+<RangeCalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</RangeCalendarPrimitive.NextButton>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
new file mode 100644
index 0000000..bd8a84b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "ghost",
+		...restProps
+	}: RangeCalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeftIcon class="size-4" />
+{/snippet}
+
+<RangeCalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</RangeCalendarPrimitive.PrevButton>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte
new file mode 100644
index 0000000..d14cc16
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+		className
+	)}
+>
+	<RangeCalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value}>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value !== undefined
+							? yearItem.value === value
+							: yearItem.value === selectedYearItem.value}
+					>
+						{yearItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</RangeCalendarPrimitive.YearSelect>
+</span>
diff --git a/template/apps/web/src/lib/components/ui/range-calendar/range-calendar.svelte b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar.svelte
new file mode 100644
index 0000000..4253dab
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/range-calendar/range-calendar.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import * as RangeCalendar from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ButtonVariant } from "$lib/components/ui/button/index.js";
+	import type { Snippet } from "svelte";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		weekdayFormat = "short",
+		class: className,
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = "numeric",
+		day,
+		disableDaysOutsideMonth = false,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: RangeCalendarPrimitive.MonthSelectProps["months"];
+		years?: RangeCalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: RangeCalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: RangeCalendarPrimitive.YearSelectProps["yearFormat"];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith("dropdown")) return "short";
+		return "long";
+	});
+</script>
+
+<RangeCalendarPrimitive.Root
+	bind:ref
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	{disableDaysOutsideMonth}
+	class={cn(
+		"p-2 [--cell-size:--spacing(7)] bg-background group/calendar p-3 [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<RangeCalendar.Months>
+			<RangeCalendar.Nav>
+				<RangeCalendar.PrevButton variant={buttonVariant} />
+				<RangeCalendar.NextButton variant={buttonVariant} />
+			</RangeCalendar.Nav>
+			{#each months as month, monthIndex (month)}
+				<RangeCalendar.Month>
+					<RangeCalendar.Header>
+						<RangeCalendar.Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</RangeCalendar.Header>
+
+					<RangeCalendar.Grid>
+						<RangeCalendar.GridHead>
+							<RangeCalendar.GridRow class="select-none">
+								{#each weekdays as weekday (weekday)}
+									<RangeCalendar.HeadCell>
+										{weekday.slice(0, 2)}
+									</RangeCalendar.HeadCell>
+								{/each}
+							</RangeCalendar.GridRow>
+						</RangeCalendar.GridHead>
+						<RangeCalendar.GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<RangeCalendar.GridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<RangeCalendar.Cell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<RangeCalendar.Day />
+											{/if}
+										</RangeCalendar.Cell>
+									{/each}
+								</RangeCalendar.GridRow>
+							{/each}
+						</RangeCalendar.GridBody>
+					</RangeCalendar.Grid>
+				</RangeCalendar.Month>
+			{/each}
+		</RangeCalendar.Months>
+	{/snippet}
+</RangeCalendarPrimitive.Root>
diff --git a/template/apps/web/src/lib/components/ui/resizable/index.ts b/template/apps/web/src/lib/components/ui/resizable/index.ts
new file mode 100644
index 0000000..2e37f11
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/resizable/index.ts
@@ -0,0 +1,13 @@
+import { Pane } from "paneforge";
+import Handle from "./resizable-handle.svelte";
+import PaneGroup from "./resizable-pane-group.svelte";
+
+export {
+	PaneGroup,
+	Pane,
+	Handle,
+	//
+	PaneGroup as ResizablePaneGroup,
+	Pane as ResizablePane,
+	Handle as ResizableHandle,
+};
diff --git a/template/apps/web/src/lib/components/ui/resizable/resizable-handle.svelte b/template/apps/web/src/lib/components/ui/resizable/resizable-handle.svelte
new file mode 100644
index 0000000..3e99471
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import * as ResizablePrimitive from "paneforge";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		withHandle = false,
+		...restProps
+	}: WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
+		withHandle?: boolean;
+	} = $props();
+</script>
+
+<ResizablePrimitive.PaneResizer
+	bind:ref
+	data-slot="resizable-handle"
+	class={cn(
+		"cn-resizable-handle bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90",
+		className
+	)}
+	{...restProps}
+>
+	{#if withHandle}
+		<div class="bg-border h-6 w-1 rounded-none z-10 flex shrink-0"></div>
+	{/if}
+</ResizablePrimitive.PaneResizer>
diff --git a/template/apps/web/src/lib/components/ui/resizable/resizable-pane-group.svelte b/template/apps/web/src/lib/components/ui/resizable/resizable-pane-group.svelte
new file mode 100644
index 0000000..4b1801d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/resizable/resizable-pane-group.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import * as ResizablePrimitive from "paneforge";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		this: paneGroup = $bindable(),
+		class: className,
+		...restProps
+	}: ResizablePrimitive.PaneGroupProps & {
+		this?: ResizablePrimitive.PaneGroup;
+	} = $props();
+</script>
+
+<ResizablePrimitive.PaneGroup
+	bind:ref
+	bind:this={paneGroup}
+	data-slot="resizable-pane-group"
+	class={cn(
+		"cn-resizable-panel-group flex h-full w-full data-[direction=vertical]:flex-col",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/scroll-area/index.ts b/template/apps/web/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..e86a25b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/template/apps/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/template/apps/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..e0f5997
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
+	{orientation}
+	class={cn(
+		"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		data-slot="scroll-area-thumb"
+		class="rounded-none bg-border relative flex-1"
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/template/apps/web/src/lib/components/ui/scroll-area/scroll-area.svelte b/template/apps/web/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..d4d96d0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		viewportRef = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn("relative", className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
+		data-slot="scroll-area-viewport"
+		class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/template/apps/web/src/lib/components/ui/select/index.ts b/template/apps/web/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..4dec358
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import Root from "./select.svelte";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+import Portal from "./select-portal.svelte";
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	Portal,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+	Portal as SelectPortal,
+};
diff --git a/template/apps/web/src/lib/components/ui/select/select-content.svelte b/template/apps/web/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..095f7e1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectPortal from "./select-portal.svelte";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		preventScroll = true,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+	} = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPortal>
diff --git a/template/apps/web/src/lib/components/ui/select/select-group-heading.svelte b/template/apps/web/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..1fab5f0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/template/apps/web/src/lib/components/ui/select/select-group.svelte b/template/apps/web/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 0000000..e56980e
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group
+	bind:ref
+	data-slot="select-group"
+	class={cn("scroll-my-1", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/select/select-item.svelte b/template/apps/web/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..5113f82
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="cn-select-item-indicator-icon" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/template/apps/web/src/lib/components/ui/select/select-label.svelte b/template/apps/web/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000..eaca52a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-2 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/select/select-portal.svelte b/template/apps/web/src/lib/components/ui/select/select-portal.svelte
new file mode 100644
index 0000000..424bcdd
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/select/select-scroll-down-button.svelte b/template/apps/web/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..94f41cd
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
+	{...restProps}
+>
+	<ChevronDownIcon  />
+</SelectPrimitive.ScrollDownButton>
diff --git a/template/apps/web/src/lib/components/ui/select/select-scroll-up-button.svelte b/template/apps/web/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..035ea09
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
+	{...restProps}
+>
+	<ChevronUpIcon  />
+</SelectPrimitive.ScrollUpButton>
diff --git a/template/apps/web/src/lib/components/ui/select/select-separator.svelte b/template/apps/web/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..f99f719
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border -mx-1 h-px pointer-events-none", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/select/select-trigger.svelte b/template/apps/web/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..7ebef79
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
+</SelectPrimitive.Trigger>
diff --git a/template/apps/web/src/lib/components/ui/select/select.svelte b/template/apps/web/src/lib/components/ui/select/select.svelte
new file mode 100644
index 0000000..05eb663
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/select/select.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		...restProps
+	}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/separator/index.ts b/template/apps/web/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..82442d2
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
diff --git a/template/apps/web/src/lib/components/ui/separator/separator.svelte b/template/apps/web/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..5fd8a42
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		"data-slot": dataSlot = "separator",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={cn(
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		// this is different in shadcn/ui but self-stretch breaks things for us
+		"data-[orientation=vertical]:h-full",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/sheet/index.ts b/template/apps/web/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..28d7da1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,34 @@
+import Root from "./sheet.svelte";
+import Portal from "./sheet-portal.svelte";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet-close.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet-close.svelte
new file mode 100644
index 0000000..ae382c1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet-content.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..63a3ed4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	export type Side = "top" | "right" | "bottom" | "left";
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import SheetPortal from "./sheet-portal.svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import XIcon from '@lucide/svelte/icons/x';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		showCloseButton = true,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+		side?: Side;
+		showCloseButton?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		data-side={side}
+		class={cn(
+			"bg-popover text-popover-foreground fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<SheetPrimitive.Close data-slot="sheet-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-3 right-3" size="icon-sm" {...props}>
+						<XIcon  />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</SheetPrimitive.Close>
+		{/if}
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet-description.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..975aaa1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn("text-muted-foreground text-xs/relaxed", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..ad9e07b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet-header.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..504465f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn("gap-0.5 p-4 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..fb89853
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn("bg-black/10 text-xs/relaxed supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 0000000..f3085a3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ...restProps }: SheetPrimitive.PortalProps = $props();
+</script>
+
+<SheetPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet-title.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..adaacf0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn("text-foreground text-sm font-medium", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet-trigger.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000..e266975
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/sheet/sheet.svelte b/template/apps/web/src/lib/components/ui/sheet/sheet.svelte
new file mode 100644
index 0000000..5bf9783
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sheet/sheet.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/sidebar/constants.ts b/template/apps/web/src/lib/components/ui/sidebar/constants.ts
new file mode 100644
index 0000000..4de4435
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/constants.ts
@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
diff --git a/template/apps/web/src/lib/components/ui/sidebar/context.svelte.ts b/template/apps/web/src/lib/components/ui/sidebar/context.svelte.ts
new file mode 100644
index 0000000..15248ad
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/context.svelte.ts
@@ -0,0 +1,81 @@
+import { IsMobile } from "$lib/hooks/is-mobile.svelte.js";
+import { getContext, setContext } from "svelte";
+import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+
+type Getter<T> = () => T;
+
+export type SidebarStateProps = {
+	/**
+	 * A getter function that returns the current open state of the sidebar.
+	 * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
+	 * component.
+	 */
+	open: Getter<boolean>;
+
+	/**
+	 * A function that sets the open state of the sidebar. To support `bind:open`, we need
+	 * a source of truth for changing the open state to ensure it will be synced throughout
+	 * the sub-components and any `bind:` references.
+	 */
+	setOpen: (open: boolean) => void;
+};
+
+class SidebarState {
+	readonly props: SidebarStateProps;
+	open = $derived.by(() => this.props.open());
+	openMobile = $state(false);
+	setOpen: SidebarStateProps["setOpen"];
+	#isMobile: IsMobile;
+	state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+
+	constructor(props: SidebarStateProps) {
+		this.setOpen = props.setOpen;
+		this.#isMobile = new IsMobile();
+		this.props = props;
+	}
+
+	// Convenience getter for checking if the sidebar is mobile
+	// without this, we would need to use `sidebar.isMobile.current` everywhere
+	get isMobile() {
+		return this.#isMobile.current;
+	}
+
+	// Event handler to apply to the `<svelte:window>`
+	handleShortcutKeydown = (e: KeyboardEvent) => {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			this.toggle();
+		}
+	};
+
+	setOpenMobile = (value: boolean) => {
+		this.openMobile = value;
+	};
+
+	toggle = () => {
+		return this.#isMobile.current
+			? (this.openMobile = !this.openMobile)
+			: this.setOpen(!this.open);
+	};
+}
+
+const SYMBOL_KEY = "scn-sidebar";
+
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export function setSidebar(props: SidebarStateProps): SidebarState {
+	return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export function useSidebar(): SidebarState {
+	return getContext(Symbol.for(SYMBOL_KEY));
+}
diff --git a/template/apps/web/src/lib/components/ui/sidebar/index.ts b/template/apps/web/src/lib/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..318a341
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/index.ts
@@ -0,0 +1,75 @@
+import { useSidebar } from "./context.svelte.js";
+import Content from "./sidebar-content.svelte";
+import Footer from "./sidebar-footer.svelte";
+import GroupAction from "./sidebar-group-action.svelte";
+import GroupContent from "./sidebar-group-content.svelte";
+import GroupLabel from "./sidebar-group-label.svelte";
+import Group from "./sidebar-group.svelte";
+import Header from "./sidebar-header.svelte";
+import Input from "./sidebar-input.svelte";
+import Inset from "./sidebar-inset.svelte";
+import MenuAction from "./sidebar-menu-action.svelte";
+import MenuBadge from "./sidebar-menu-badge.svelte";
+import MenuButton from "./sidebar-menu-button.svelte";
+import MenuItem from "./sidebar-menu-item.svelte";
+import MenuSkeleton from "./sidebar-menu-skeleton.svelte";
+import MenuSubButton from "./sidebar-menu-sub-button.svelte";
+import MenuSubItem from "./sidebar-menu-sub-item.svelte";
+import MenuSub from "./sidebar-menu-sub.svelte";
+import Menu from "./sidebar-menu.svelte";
+import Provider from "./sidebar-provider.svelte";
+import Rail from "./sidebar-rail.svelte";
+import Separator from "./sidebar-separator.svelte";
+import Trigger from "./sidebar-trigger.svelte";
+import Root from "./sidebar.svelte";
+
+export {
+	Content,
+	Footer,
+	Group,
+	GroupAction,
+	GroupContent,
+	GroupLabel,
+	Header,
+	Input,
+	Inset,
+	Menu,
+	MenuAction,
+	MenuBadge,
+	MenuButton,
+	MenuItem,
+	MenuSkeleton,
+	MenuSub,
+	MenuSubButton,
+	MenuSubItem,
+	Provider,
+	Rail,
+	Root,
+	Separator,
+	//
+	Root as Sidebar,
+	Content as SidebarContent,
+	Footer as SidebarFooter,
+	Group as SidebarGroup,
+	GroupAction as SidebarGroupAction,
+	GroupContent as SidebarGroupContent,
+	GroupLabel as SidebarGroupLabel,
+	Header as SidebarHeader,
+	Input as SidebarInput,
+	Inset as SidebarInset,
+	Menu as SidebarMenu,
+	MenuAction as SidebarMenuAction,
+	MenuBadge as SidebarMenuBadge,
+	MenuButton as SidebarMenuButton,
+	MenuItem as SidebarMenuItem,
+	MenuSkeleton as SidebarMenuSkeleton,
+	MenuSub as SidebarMenuSub,
+	MenuSubButton as SidebarMenuSubButton,
+	MenuSubItem as SidebarMenuSubItem,
+	Provider as SidebarProvider,
+	Rail as SidebarRail,
+	Separator as SidebarSeparator,
+	Trigger as SidebarTrigger,
+	Trigger,
+	useSidebar,
+};
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-content.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-content.svelte
new file mode 100644
index 0000000..2a8d7ea
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-content"
+	data-sidebar="content"
+	class={cn(
+		"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-footer.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-footer.svelte
new file mode 100644
index 0000000..496c6c0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-footer"
+	data-sidebar="footer"
+	class={cn("gap-2 p-2 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-group-action.svelte
new file mode 100644
index 0000000..aa50f7b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+			className
+		),
+		"data-slot": "sidebar-group-action",
+		"data-sidebar": "group-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-group-content.svelte
new file mode 100644
index 0000000..519b13f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-content"
+	data-sidebar="group-content"
+	class={cn("text-xs w-full", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-group-label.svelte
new file mode 100644
index 0000000..5f9140f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
+			className
+		),
+		"data-slot": "sidebar-group-label",
+		"data-sidebar": "group-label",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-group.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-group.svelte
new file mode 100644
index 0000000..b5880d7
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group"
+	data-sidebar="group"
+	class={cn("p-2 relative flex w-full min-w-0 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-header.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-header.svelte
new file mode 100644
index 0000000..b54754a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-header"
+	data-sidebar="header"
+	class={cn("gap-2 p-2 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-input.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-input.svelte
new file mode 100644
index 0000000..19b3666
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-input.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	bind:value
+	data-slot="sidebar-input"
+	data-sidebar="input"
+	class={cn("bg-background h-8 w-full shadow-none", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-inset.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-inset.svelte
new file mode 100644
index 0000000..365e0b1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<main
+	bind:this={ref}
+	data-slot="sidebar-inset"
+	class={cn("bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</main>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
new file mode 100644
index 0000000..0180c0f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showOnHover = false,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		showOnHover?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+			showOnHover &&
+				"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
+			className
+		),
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
new file mode 100644
index 0000000..d5e605a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-badge"
+	data-sidebar="menu-badge"
+	class={cn(
+		"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-none px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
new file mode 100644
index 0000000..df83550
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,102 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const sidebarMenuButtonVariants = tv({
+		base: "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-xs",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-xs group-data-[collapsible=icon]:p-0!",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type SidebarMenuButtonVariant = VariantProps<
+		typeof sidebarMenuButtonVariants
+	>["variant"];
+	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+</script>
+
+<script lang="ts">
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { mergeProps } from "bits-ui";
+	import type { ComponentProps, Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		variant = "default",
+		size = "default",
+		isActive = false,
+		tooltipContent,
+		tooltipContentProps,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+		isActive?: boolean;
+		variant?: SidebarMenuButtonVariant;
+		size?: SidebarMenuButtonSize;
+		tooltipContent?: Snippet | string;
+		tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const sidebar = useSidebar();
+
+	const buttonProps = $derived({
+		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+		"data-slot": "sidebar-menu-button",
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+	{@const mergedProps = mergeProps(buttonProps, props)}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<button bind:this={ref} {...mergedProps}>
+			{@render children?.()}
+		</button>
+	{/if}
+{/snippet}
+
+{#if !tooltipContent}
+	{@render Button({})}
+{:else}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props })}
+				{@render Button({ props })}
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content
+			side="right"
+			align="center"
+			hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
+			{...tooltipContentProps}
+		>
+			{#if typeof tooltipContent === "string"}
+				{tooltipContent}
+			{:else if tooltipContent}
+				{@render tooltipContent()}
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Root>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-item.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
new file mode 100644
index 0000000..4db4453
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-item"
+	data-sidebar="menu-item"
+	class={cn("group/menu-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
new file mode 100644
index 0000000..45b00ef
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import { Skeleton } from "$lib/components/ui/skeleton/index.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showIcon = false,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		showIcon?: boolean;
+	} = $props();
+
+	// Random width between 50% and 90%
+	const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-skeleton"
+	data-sidebar="menu-skeleton"
+	class={cn("h-8 gap-2 rounded-none px-2 flex items-center", className)}
+	{...restProps}
+>
+	{#if showIcon}
+		<Skeleton class="size-4 rounded-none" data-sidebar="menu-skeleton-icon" />
+	{/if}
+	<Skeleton
+		class="h-4 max-w-(--skeleton-width) flex-1"
+		data-sidebar="menu-skeleton-text"
+		style="--skeleton-width: {width};"
+	/>
+	{@render children?.()}
+</div>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
new file mode 100644
index 0000000..d1f8c92
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		size = "md",
+		isActive = false,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+			className
+		),
+		"data-slot": "sidebar-menu-sub-button",
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
new file mode 100644
index 0000000..681d0f1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-sub-item"
+	data-sidebar="menu-sub-item"
+	class={cn("group/menu-sub-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
new file mode 100644
index 0000000..29614ee
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu-sub"
+	data-sidebar="menu-sub"
+	class={cn("border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu.svelte
new file mode 100644
index 0000000..a8cdefd
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu"
+	data-sidebar="menu"
+	class={cn("gap-0 flex w-full min-w-0 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-provider.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-provider.svelte
new file mode 100644
index 0000000..5b0d0aa
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import {
+		SIDEBAR_COOKIE_MAX_AGE,
+		SIDEBAR_COOKIE_NAME,
+		SIDEBAR_WIDTH,
+		SIDEBAR_WIDTH_ICON,
+	} from "./constants.js";
+	import { setSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(true),
+		onOpenChange = () => {},
+		class: className,
+		style,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	} = $props();
+
+	const sidebar = setSidebar({
+		open: () => open,
+		setOpen: (value: boolean) => {
+			open = value;
+			onOpenChange(value);
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+	});
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<Tooltip.Provider delayDuration={0}>
+	<div
+		data-slot="sidebar-wrapper"
+		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+		class={cn(
+			"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</Tooltip.Provider>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-rail.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-rail.svelte
new file mode 100644
index 0000000..f65c869
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="rail"
+	data-slot="sidebar-rail"
+	aria-label="Toggle Sidebar"
+	tabindex={-1}
+	onclick={sidebar.toggle}
+	title="Toggle Sidebar"
+	class={cn(
+		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-separator.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-separator.svelte
new file mode 100644
index 0000000..18d791b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-separator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="sidebar-separator"
+	data-sidebar="separator"
+	class={cn("bg-sidebar-border mx-2 w-auto", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar-trigger.svelte
new file mode 100644
index 0000000..dd2dc50
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button/index.js";
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		onclick,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		onclick?: (e: MouseEvent) => void;
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Button
+	bind:ref
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	variant="ghost"
+	size="icon-sm"
+	class={cn("cn-sidebar-trigger", className)}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	{...restProps}
+>
+	<PanelLeftIcon  />
+	<span class="sr-only">Toggle Sidebar</span>
+</Button>
diff --git a/template/apps/web/src/lib/components/ui/sidebar/sidebar.svelte b/template/apps/web/src/lib/components/ui/sidebar/sidebar.svelte
new file mode 100644
index 0000000..097f1f9
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sidebar/sidebar.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import * as Sheet from "$lib/components/ui/sheet/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		side = "left",
+		variant = "sidebar",
+		collapsible = "offcanvas",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+{#if collapsible === "none"}
+	<div
+		class={cn(
+			"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{:else if sidebar.isMobile}
+	<Sheet.Root
+		bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)}
+		{...restProps}
+	>
+		<Sheet.Content
+			bind:ref
+			data-sidebar="sidebar"
+			data-slot="sidebar"
+			data-mobile="true"
+			class={cn(
+				"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+				className
+			)}
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			{side}
+		>
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>Sidebar</Sheet.Title>
+				<Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+			</Sheet.Header>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+{:else}
+	<div
+		bind:this={ref}
+		class="text-sidebar-foreground group peer hidden md:block"
+		data-state={sidebar.state}
+		data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
+		data-variant={variant}
+		data-side={side}
+		data-slot="sidebar"
+	>
+		<!-- This is what handles the sidebar gap on desktop -->
+		<div
+			data-slot="sidebar-gap"
+			class={cn(
+				"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
+				"group-data-[collapsible=offcanvas]:w-0",
+				"group-data-[side=right]:rotate-180",
+				variant === "floating" || variant === "inset"
+					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+			)}
+		></div>
+		<div
+			data-slot="sidebar-container"
+			class={cn(
+				"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+				side === "left"
+					? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]"
+					: "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]",
+				// Adjust the padding for floating and inset variants.
+				variant === "floating" || variant === "inset"
+					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s",
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				data-slot="sidebar-inner"
+				class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/template/apps/web/src/lib/components/ui/skeleton/index.ts b/template/apps/web/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..186db21
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};
diff --git a/template/apps/web/src/lib/components/ui/skeleton/skeleton.svelte b/template/apps/web/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 0000000..78469a6
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("bg-muted rounded-none animate-pulse", className)}
+	{...restProps}
+></div>
diff --git a/template/apps/web/src/lib/components/ui/slider/index.ts b/template/apps/web/src/lib/components/ui/slider/index.ts
new file mode 100644
index 0000000..820f209
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/slider/index.ts
@@ -0,0 +1,7 @@
+import Root from "./slider.svelte";
+
+export {
+	Root,
+	//
+	Root as Slider,
+};
diff --git a/template/apps/web/src/lib/components/ui/slider/slider.svelte b/template/apps/web/src/lib/components/ui/slider/slider.svelte
new file mode 100644
index 0000000..b50c208
--- /dev/null
+++ b/template/apps/web/src/lib/components/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(
+		"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ thumbItems })}
+		<span
+			data-slot="slider-track"
+			data-orientation={orientation}
+			class={cn(
+				"bg-muted rounded-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 bg-muted relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full"
+			)}
+		>
+			<SliderPrimitive.Range
+				data-slot="slider-range"
+				class={cn(
+					"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
+				)}
+			/>
+		</span>
+		{#each thumbItems as thumb (thumb)}
+			<SliderPrimitive.Thumb
+				data-slot="slider-thumb"
+				index={thumb.index}
+				class="border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-1 focus-visible:ring-1 focus-visible:outline-hidden active:ring-1 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+			/>
+		{/each}
+	{/snippet}
+</SliderPrimitive.Root>
diff --git a/template/apps/web/src/lib/components/ui/sonner/index.ts b/template/apps/web/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 0000000..1ad9f4a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
diff --git a/template/apps/web/src/lib/components/ui/sonner/sonner.svelte b/template/apps/web/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 0000000..34b456d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+	import InfoIcon from '@lucide/svelte/icons/info';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+
+	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: var(--color-border);"
+	{...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/template/apps/web/src/lib/components/ui/spinner/index.ts b/template/apps/web/src/lib/components/ui/spinner/index.ts
new file mode 100644
index 0000000..f8b1ced
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/spinner/index.ts
@@ -0,0 +1 @@
+export { default as Spinner } from "./spinner.svelte";
diff --git a/template/apps/web/src/lib/components/ui/spinner/spinner.svelte b/template/apps/web/src/lib/components/ui/spinner/spinner.svelte
new file mode 100644
index 0000000..b469ded
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/spinner/spinner.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import type { SVGAttributes } from "svelte/elements";
+
+	let {
+		class: className,
+		role = "status",
+		// we add name, color, and stroke for compatibility with different icon libraries props
+		name,
+		color,
+		stroke,
+		"aria-label": ariaLabel = "Loading",
+		...restProps
+	}: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Loader2Icon {role} name={name === null ? undefined : name} color={color === null ? undefined : color} stroke={stroke === null ? undefined : stroke} aria-label={ariaLabel} class={cn("size-4 animate-spin", className)} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/switch/index.ts b/template/apps/web/src/lib/components/ui/switch/index.ts
new file mode 100644
index 0000000..f5533db
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};
diff --git a/template/apps/web/src/lib/components/ui/switch/switch.svelte b/template/apps/web/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 0000000..47ebc61
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		size = "default",
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	data-size={size}
+	class={cn(
+		"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform rtl:data-[state=checked]:translate-x-[calc(-100%)]"
+	/>
+</SwitchPrimitive.Root>
diff --git a/template/apps/web/src/lib/components/ui/table/index.ts b/template/apps/web/src/lib/components/ui/table/index.ts
new file mode 100644
index 0000000..14695c8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};
diff --git a/template/apps/web/src/lib/components/ui/table/table-body.svelte b/template/apps/web/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 0000000..935feae
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
+</tbody>
diff --git a/template/apps/web/src/lib/components/ui/table/table-caption.svelte b/template/apps/web/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000..b7a3e98
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
diff --git a/template/apps/web/src/lib/components/ui/table/table-cell.svelte b/template/apps/web/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 0000000..a998bf6
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</td>
diff --git a/template/apps/web/src/lib/components/ui/table/table-footer.svelte b/template/apps/web/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000..b9b14eb
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
diff --git a/template/apps/web/src/lib/components/ui/table/table-head.svelte b/template/apps/web/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 0000000..267c4e0
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</th>
diff --git a/template/apps/web/src/lib/components/ui/table/table-header.svelte b/template/apps/web/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 0000000..f47d259
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
diff --git a/template/apps/web/src/lib/components/ui/table/table-row.svelte b/template/apps/web/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 0000000..90b4e2a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)} {...restProps}>
+	{@render children?.()}
+</tr>
diff --git a/template/apps/web/src/lib/components/ui/table/table.svelte b/template/apps/web/src/lib/components/ui/table/table.svelte
new file mode 100644
index 0000000..0b0819b
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table bind:this={ref} data-slot="table" class={cn("w-full caption-bottom text-xs", className)} {...restProps}>
+		{@render children?.()}
+	</table>
+</div>
diff --git a/template/apps/web/src/lib/components/ui/tabs/index.ts b/template/apps/web/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..31267e5
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,18 @@
+import Root from "./tabs.svelte";
+import Content from "./tabs-content.svelte";
+import List, { tabsListVariants, type TabsListVariant } from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	tabsListVariants,
+	type TabsListVariant,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};
diff --git a/template/apps/web/src/lib/components/ui/tabs/tabs-content.svelte b/template/apps/web/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 0000000..b9e4530
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn("text-xs/relaxed flex-1 outline-none", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/tabs/tabs-list.svelte b/template/apps/web/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 0000000..6d616a5
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const tabsListVariants = tv({
+		base: "rounded-none p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+		variants: {
+			variant: {
+				default: "cn-tabs-list-variant-default bg-muted",
+				line: "cn-tabs-list-variant-line gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		variant = "default",
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps & {
+		variant?: TabsListVariant;
+	} = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	data-variant={variant}
+	class={cn(tabsListVariants({ variant }), className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/tabs/tabs-trigger.svelte b/template/apps/web/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 0000000..81921d4
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+		"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+		"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/tabs/tabs.svelte b/template/apps/web/src/lib/components/ui/tabs/tabs.svelte
new file mode 100644
index 0000000..bfb900d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tabs/tabs.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/textarea/index.ts b/template/apps/web/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..ace797a
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+	Root,
+	//
+	Root as Textarea,
+};
diff --git a/template/apps/web/src/lib/components/ui/textarea/textarea.svelte b/template/apps/web/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..776c825
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "textarea",
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-none border bg-transparent px-2.5 py-2 text-xs transition-colors focus-visible:ring-1 aria-invalid:ring-1 md:text-xs placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/template/apps/web/src/lib/components/ui/toggle-group/index.ts b/template/apps/web/src/lib/components/ui/toggle-group/index.ts
new file mode 100644
index 0000000..12b14b9
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/toggle-group/index.ts
@@ -0,0 +1,10 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem,
+};
diff --git a/template/apps/web/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/template/apps/web/src/lib/components/ui/toggle-group/toggle-group-item.svelte
new file mode 100644
index 0000000..904bf70
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from "$lib/utils.js";
+	import { type ToggleVariants, toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	data-slot="toggle-group-item"
+	data-variant={ctx.variant || variant}
+	data-size={ctx.size || size}
+	data-spacing={ctx.spacing}
+	class={cn(
+		"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		className
+	)}
+	{value}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/toggle-group/toggle-group.svelte b/template/apps/web/src/lib/components/ui/toggle-group/toggle-group.svelte
new file mode 100644
index 0000000..3d67cb8
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -0,0 +1,75 @@
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+	import type { VariantProps } from "tailwind-variants";
+	import { toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+		orientation?: "horizontal" | "vertical";
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
+		setContext("toggleGroup", props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<Required<ToggleGroupContext>>("toggleGroup");
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		spacing = 0,
+		orientation = "horizontal",
+		variant = "default",
+		...restProps
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: "horizontal" | "vertical";
+		} = $props();
+
+	setToggleGroupCtx({
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		},
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	{orientation}
+	data-slot="toggle-group"
+	data-variant={variant}
+	data-size={size}
+	data-spacing={spacing}
+	style={`--gap: ${spacing}`}
+	class={cn(
+		"rounded-none data-[size=sm]:rounded-none group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/toggle/index.ts b/template/apps/web/src/lib/components/ui/toggle/index.ts
new file mode 100644
index 0000000..8cb2936
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/toggle/index.ts
@@ -0,0 +1,13 @@
+import Root from "./toggle.svelte";
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants,
+} from "./toggle.svelte";
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};
diff --git a/template/apps/web/src/lib/components/ui/toggle/toggle.svelte b/template/apps/web/src/lib/components/ui/toggle/toggle.svelte
new file mode 100644
index 0000000..eca68b1
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/toggle/toggle.svelte
@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-none text-xs font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline: "border-input hover:bg-muted border bg-transparent",
+			},
+			size: {
+				default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				sm: "h-7 min-w-7 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+				lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>
diff --git a/template/apps/web/src/lib/components/ui/tooltip/index.ts b/template/apps/web/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..1718604
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Portal from "./tooltip-portal.svelte";
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};
diff --git a/template/apps/web/src/lib/components/ui/tooltip/tooltip-content.svelte b/template/apps/web/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..4f27fa3
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import TooltipPortal from "./tooltip-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none bg-foreground fill-foreground z-50",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
+						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%-3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>
diff --git a/template/apps/web/src/lib/components/ui/tooltip/tooltip-portal.svelte b/template/apps/web/src/lib/components/ui/tooltip/tooltip-portal.svelte
new file mode 100644
index 0000000..d234f7d
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tooltip/tooltip-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/tooltip/tooltip-provider.svelte b/template/apps/web/src/lib/components/ui/tooltip/tooltip-provider.svelte
new file mode 100644
index 0000000..6dba9a6
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />
diff --git a/template/apps/web/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/template/apps/web/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 0000000..1acdaa4
--- /dev/null
+++ b/template/apps/web/src/lib/components/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/template/apps/web/src/lib/components/ui/tooltip/tooltip.svelte b/template/apps/web/src/lib/components/ui/tooltip/tooltip.svelte
new file mode 100644
index 0000000..44bee9f
--- /dev/null
+++ b/template/apps/web/src/lib/components/ui/tooltip/tooltip.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import TooltipProvider from "./tooltip-provider.svelte";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipProvider>
+	<TooltipPrimitive.Root bind:open {...restProps} />
+</TooltipProvider>
diff --git a/template/apps/web/src/lib/getconnectrouter.ts b/template/apps/web/src/lib/getconnectrouter.ts
new file mode 100644
index 0000000..8ee292c
--- /dev/null
+++ b/template/apps/web/src/lib/getconnectrouter.ts
@@ -0,0 +1,8 @@
+import {createRouter} from '@<@var(context.project.name)>/rpc'
+
+const router = createRouter("http://127.0.0.1:8080")
+
+export const getRouter = () => {
+  return router;
+}
+
diff --git a/template/apps/web/src/lib/hooks/is-mobile.svelte.ts b/template/apps/web/src/lib/hooks/is-mobile.svelte.ts
new file mode 100644
index 0000000..4829c00
--- /dev/null
+++ b/template/apps/web/src/lib/hooks/is-mobile.svelte.ts
@@ -0,0 +1,9 @@
+import { MediaQuery } from "svelte/reactivity";
+
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+
+export class IsMobile extends MediaQuery {
+	constructor(breakpoint: number = DEFAULT_MOBILE_BREAKPOINT) {
+		super(`max-width: ${breakpoint - 1}px`);
+	}
+}
diff --git a/template/apps/web/src/lib/index.ts b/template/apps/web/src/lib/index.ts
new file mode 100644
index 0000000..856f2b6
--- /dev/null
+++ b/template/apps/web/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/template/apps/web/src/lib/todocollectionscontext.ts b/template/apps/web/src/lib/todocollectionscontext.ts
new file mode 100644
index 0000000..479b6b3
--- /dev/null
+++ b/template/apps/web/src/lib/todocollectionscontext.ts
@@ -0,0 +1,5 @@
+import { createContext } from "svelte";
+import { type CollectionImpl } from '@tanstack/svelte-db'
+import type { Todo } from "@<@var(context.project.name)>/rpc";
+import { type ExtractPayload } from "./utils";
+export const [getTodoCollection,setTodoCollection] = createContext<CollectionImpl<ExtractPayload<Todo>,string>>()
diff --git a/template/apps/web/src/lib/utils.ts b/template/apps/web/src/lib/utils.ts
new file mode 100644
index 0000000..93ccb61
--- /dev/null
+++ b/template/apps/web/src/lib/utils.ts
@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+import {type Message} from "@bufbuild/protobuf"
+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 };
+export type ExtractPayload<T> = Omit<T, keyof Message<any>>;
diff --git a/template/apps/web/src/routes/+layout.svelte b/template/apps/web/src/routes/+layout.svelte
new file mode 100644
index 0000000..e3dbf37
--- /dev/null
+++ b/template/apps/web/src/routes/+layout.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { locales, localizeHref } from '$lib/paraglide/runtime';
+	import './layout.css';
+	import favicon from '$lib/assets/favicon.svg';
+	import { setTodoCollection } from '$lib/todocollectionscontext';
+	import { QueryClient,QueryClientProvider } from '@tanstack/svelte-query';
+	import { type Todo } from '@<@var(context.project.name)>/rpc';
+	import { browser } from '$app/environment';
+	import { createCollection } from '@tanstack/svelte-db';
+	import { queryCollectionOptions } from '@tanstack/query-db-collection';
+	import { getRouter } from "$lib/getconnectrouter"
+	import type { ExtractPayload } from '$lib/utils';
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				enabled: browser
+			}
+		},
+		
+	})
+	let { children } = $props();
+	const router = getRouter()
+	const todosCollection = createCollection(
+		queryCollectionOptions({
+			queryKey: ["todos"],
+			queryFn: async () => {
+				const todos = await router.todos.listTodos({})
+				return todos.todos as ExtractPayload<Todo>[];
+			},
+			queryClient,
+			getKey: (item) => item.id ? item.id : crypto.randomUUID(),
+			onInsert: async ({transaction}) => {
+				Promise.all(transaction.mutations.map((m) => {
+					router.todos.createTodo({ todo: m.modified })
+				}))
+			},
+			onDelete: async ({transaction}) => {
+				Promise.all(transaction.mutations.map((m) => {
+					router.todos.deleteTodo({todo: m.modified})
+				}))
+			},
+			onUpdate: async ({transaction}) => {
+				Promise.all(transaction.mutations.map((m) => {
+					router.todos.updateTodo({todo: m.modified})
+				}))
+			}
+		})
+	)
+	setTodoCollection(todosCollection)
+</script>
+
+<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+
+<QueryClientProvider client={queryClient}>
+	{@render children()}
+</QueryClientProvider>
+
+<div style="display:none">
+	{#each locales as locale}
+		<a href={localizeHref(page.url.pathname, { locale })}>{locale}</a>
+	{/each}
+</div>
diff --git a/template/apps/web/src/routes/+page.svelte b/template/apps/web/src/routes/+page.svelte
new file mode 100644
index 0000000..ac76563
--- /dev/null
+++ b/template/apps/web/src/routes/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import CreateTodo from "$lib/components/todos/CreateTodo.svelte";
+	import ListTodos from "$lib/components/todos/ListTodos.svelte";
+	import type { PageProps } from './$types'
+	let { data }:PageProps = $props();
+</script>
+
+<main class="flex justify-center items-center flex-col gap-5 h-screen">
+  <CreateTodo/>
+  <ListTodos initialTodos={data.todos}/>
+</main>
diff --git a/template/apps/web/src/routes/+page.ts b/template/apps/web/src/routes/+page.ts
new file mode 100644
index 0000000..0b79dc8
--- /dev/null
+++ b/template/apps/web/src/routes/+page.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types'
+import { getRouter } from "$lib/getconnectrouter"
+export const load: PageLoad = async () => {
+  const router = getRouter();
+  const todos = await router.todos.listTodos({})
+  return {todos: todos.todos};
+}
diff --git a/template/apps/web/src/routes/layout.css b/template/apps/web/src/routes/layout.css
new file mode 100644
index 0000000..00bce42
--- /dev/null
+++ b/template/apps/web/src/routes/layout.css
@@ -0,0 +1,130 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+@import "shadcn-svelte/tailwind.css";
+@import "@fontsource-variable/roboto";
+
+@custom-variant dark (&:is(.dark *));
+@plugin '@tailwindcss/typography';
+
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.148 0.004 228.8);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.148 0.004 228.8);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.148 0.004 228.8);
+	--primary: oklch(0.511 0.096 186.391);
+	--primary-foreground: oklch(0.984 0.014 180.72);
+	--secondary: oklch(0.967 0.001 286.375);
+	--secondary-foreground: oklch(0.21 0.006 285.885);
+	--muted: oklch(0.963 0.002 197.1);
+	--muted-foreground: oklch(0.56 0.021 213.5);
+	--accent: oklch(0.963 0.002 197.1);
+	--accent-foreground: oklch(0.218 0.008 223.9);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.925 0.005 214.3);
+	--input: oklch(0.925 0.005 214.3);
+	--ring: oklch(0.723 0.014 214.4);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--radius: 0.625rem;
+	--sidebar: oklch(0.987 0.002 197.1);
+	--sidebar-foreground: oklch(0.148 0.004 228.8);
+	--sidebar-primary: oklch(0.6 0.118 184.704);
+	--sidebar-primary-foreground: oklch(0.984 0.014 180.72);
+	--sidebar-accent: oklch(0.963 0.002 197.1);
+	--sidebar-accent-foreground: oklch(0.218 0.008 223.9);
+	--sidebar-border: oklch(0.925 0.005 214.3);
+	--sidebar-ring: oklch(0.723 0.014 214.4);
+}
+
+.dark {
+	--background: oklch(0.148 0.004 228.8);
+	--foreground: oklch(0.987 0.002 197.1);
+	--card: oklch(0.218 0.008 223.9);
+	--card-foreground: oklch(0.987 0.002 197.1);
+	--popover: oklch(0.218 0.008 223.9);
+	--popover-foreground: oklch(0.987 0.002 197.1);
+	--primary: oklch(0.437 0.078 188.216);
+	--primary-foreground: oklch(0.984 0.014 180.72);
+	--secondary: oklch(0.274 0.006 286.033);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.275 0.011 216.9);
+	--muted-foreground: oklch(0.723 0.014 214.4);
+	--accent: oklch(0.275 0.011 216.9);
+	--accent-foreground: oklch(0.987 0.002 197.1);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.56 0.021 213.5);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--sidebar: oklch(0.218 0.008 223.9);
+	--sidebar-foreground: oklch(0.987 0.002 197.1);
+	--sidebar-primary: oklch(0.704 0.14 182.503);
+	--sidebar-primary-foreground: oklch(0.277 0.046 192.524);
+	--sidebar-accent: oklch(0.275 0.011 216.9);
+	--sidebar-accent-foreground: oklch(0.987 0.002 197.1);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.56 0.021 213.5);
+}
+
+@theme inline {
+	--font-sans: 'Roboto Variable', sans-serif;
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--color-foreground: var(--foreground);
+	--color-background: var(--background);
+	--radius-sm: calc(var(--radius) * 0.6);
+	--radius-md: calc(var(--radius) * 0.8);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) * 1.4);
+	--radius-2xl: calc(var(--radius) * 1.8);
+	--radius-3xl: calc(var(--radius) * 2.2);
+	--radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+	html {
+		@apply font-sans;
+	}
+}
diff --git a/template/apps/web/static/robots.txt b/template/apps/web/static/robots.txt
new file mode 100644
index 0000000..b6dd667
--- /dev/null
+++ b/template/apps/web/static/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
diff --git a/template/apps/web/svelte.config.js b/template/apps/web/svelte.config.js
new file mode 100644
index 0000000..58d330b
--- /dev/null
+++ b/template/apps/web/svelte.config.js
@@ -0,0 +1,24 @@
+import adapter from '@sveltejs/adapter-auto';
+import { relative, sep } from 'node:path';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	compilerOptions: {
+		// defaults to rune mode for the project, except for `node_modules`. Can be removed in svelte 6.
+		runes: ({ filename }) => {
+			const relativePath = relative(import.meta.dirname, filename);
+			const pathSegments = relativePath.toLowerCase().split(sep);
+			const isExternalLibrary = pathSegments.includes('node_modules');
+
+			return isExternalLibrary ? undefined : true;
+		}
+	},
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;
diff --git a/template/apps/web/tsconfig.json b/template/apps/web/tsconfig.json
new file mode 100644
index 0000000..2c2ed3c
--- /dev/null
+++ b/template/apps/web/tsconfig.json
@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}
diff --git a/template/apps/web/vite.config.ts b/template/apps/web/vite.config.ts
new file mode 100644
index 0000000..0fbc1a4
--- /dev/null
+++ b/template/apps/web/vite.config.ts
@@ -0,0 +1,12 @@
+import { paraglideVitePlugin } from '@inlang/paraglide-js';
+import tailwindcss from '@tailwindcss/vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		tailwindcss(),
+		sveltekit(),
+		paraglideVitePlugin({ project: './project.inlang', outdir: './src/lib/paraglide' })
+	]
+});
diff --git a/template/devenv.nix b/template/devenv.nix
new file mode 100644
index 0000000..a33efe6
--- /dev/null
+++ b/template/devenv.nix
@@ -0,0 +1,52 @@
+{ pkgs, lib, config, inputs, ... }:
+
+{
+  packages = [
+     pkgs.bun
+     pkgs.watchexec
+     pkgs.sqlc
+     pkgs.dbmate
+     pkgs.air
+     pkgs.buf
+     pkgs.protoc-gen-go
+     pkgs.protoc-gen-connect-go
+     pkgs.protoc-gen-es
+     pkgs.cobra-cli
+  ];
+  
+  languages.go.enable = true;
+  languages.typescript.enable = true;
+  services.postgres = {
+    enable = true;
+    listen_addresses = "127.0.0.1";
+    initialDatabases = [
+      {
+        name = "<@var(context.project.name)>";
+        user = "pp";
+        pass = "<@var(context.project.name)>";
+      }
+    ];
+  };
+  processes = {
+    air = {
+      exec = "air";
+      cwd = "./services/api";
+    };
+    protowatcher = {
+      exec = "watchexec -r -e proto buf generate";
+      cwd = "./packages/proto";
+    };
+    protojswatcher = {
+      exec = "watchexec -e js,ts -w ./packages/rpc/src -r bun run ./scripts/gen-rpc-index.ts";
+      cwd = "./";
+    };
+    sqlwatcher = {
+      exec = "watchexec -w -r db -e sql sqlc generate";
+      cwd = "./services/api";
+    };
+    bundev = {
+      exec = "bun dev";
+      cwd = "./apps/web";
+    };
+  };
+}
diff --git a/template/devenv.yaml b/template/devenv.yaml
new file mode 100644
index 0000000..116a2ad
--- /dev/null
+++ b/template/devenv.yaml
@@ -0,0 +1,15 @@
+# yaml-language-server: $schema=https://devenv.sh/devenv.schema.json
+inputs:
+  nixpkgs:
+    url: github:cachix/devenv-nixpkgs/rolling
+
+# If you're using non-OSS software, you can set allowUnfree to true.
+# allowUnfree: true
+
+# If you're willing to use a package that's vulnerable
+# permittedInsecurePackages:
+#  - "openssl-1.1.1w"
+
+# If you have more than one devenv you can merge them
+#imports:
+# - ./backend
diff --git a/template/package.json b/template/package.json
new file mode 100644
index 0000000..8c3b883
--- /dev/null
+++ b/template/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "<@var(context.project.name)>",
+  "private": true,
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "scripts": {
+    "dev": "bun run --filter '*' dev",
+    "build": "bun run --filter '*' build"
+  }
+}
diff --git a/template/packages/proto/buf.gen.yaml b/template/packages/proto/buf.gen.yaml
new file mode 100644
index 0000000..21a4a30
--- /dev/null
+++ b/template/packages/proto/buf.gen.yaml
@@ -0,0 +1,15 @@
+version: v2
+plugins:
+  - local: protoc-gen-go
+    out: ../../services/api/gen
+    opt: paths=source_relative
+  - local: protoc-gen-connect-go
+    opt:
+      - paths=source_relative
+    out: ../../services/api/gen
+
+  # TypeScript
+  - local: protoc-gen-es
+    out: ../rpc/src
+    include_imports: true
+    opt: target=ts
diff --git a/template/packages/proto/buf.yaml b/template/packages/proto/buf.yaml
new file mode 100644
index 0000000..00c96c2
--- /dev/null
+++ b/template/packages/proto/buf.yaml
@@ -0,0 +1,9 @@
+version: v2
+deps:
+  - buf.build/bufbuild/protovalidate
+lint:
+  use:
+    - STANDARD
+breaking:
+  use:
+    - FILE
diff --git a/template/packages/proto/todo/v1/todo.proto b/template/packages/proto/todo/v1/todo.proto
new file mode 100644
index 0000000..af80c1b
--- /dev/null
+++ b/template/packages/proto/todo/v1/todo.proto
@@ -0,0 +1,49 @@
+syntax = "proto3";
+package todo.v1;
+
+option go_package = "<@var(context.project.goprefix)>/<@var(context.project.name)>/gen/todo/v1;todov1";
+
+service TodoService {
+  rpc CreateTodo (CreateTodoRequest) returns (CreateTodoResponse);
+  rpc ListTodos (ListTodosRequest) returns (ListTodosResponse);
+  rpc UpdateTodo (UpdateTodoRequest) returns (UpdateTodoResponse);
+  rpc DeleteTodo (DeleteTodoRequest) returns (DeleteTodoResponse);
+}
+
+message Todo {
+  optional string id = 1;
+  string task = 2;
+  optional string created_at = 3;
+  optional string updates_at = 4;
+  optional bool done = 5;
+  
+}
+
+message DeleteTodoRequest {
+  Todo todo = 1;
+}
+
+message DeleteTodoResponse {}
+
+message CreateTodoRequest {
+  Todo todo = 1;
+}
+
+message CreateTodoResponse {
+  Todo todo = 1;
+}
+message ListTodosRequest {
+}
+
+message ListTodosResponse {
+  repeated Todo todos = 1;
+}
+
+message UpdateTodoRequest {
+  Todo todo = 1;
+}
+
+message UpdateTodoResponse {
+  Todo todo = 1;
+}
+
diff --git a/template/packages/rpc/.gitignore b/template/packages/rpc/.gitignore
new file mode 100644
index 0000000..a14702c
--- /dev/null
+++ b/template/packages/rpc/.gitignore
@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
diff --git a/template/packages/rpc/CLAUDE.md b/template/packages/rpc/CLAUDE.md
new file mode 100644
index 0000000..764c1dd
--- /dev/null
+++ b/template/packages/rpc/CLAUDE.md
@@ -0,0 +1,106 @@
+
+Default to using Bun instead of Node.js.
+
+- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
+- Use `bun test` instead of `jest` or `vitest`
+- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild`
+- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`
+- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>`
+- Use `bunx <package> <command>` instead of `npx <package> <command>`
+- Bun automatically loads .env, so don't use dotenv.
+
+## APIs
+
+- `Bun.serve()` supports WebSockets, HTTPS, and routes. Don't use `express`.
+- `bun:sqlite` for SQLite. Don't use `better-sqlite3`.
+- `Bun.redis` for Redis. Don't use `ioredis`.
+- `Bun.sql` for Postgres. Don't use `pg` or `postgres.js`.
+- `WebSocket` is built-in. Don't use `ws`.
+- Prefer `Bun.file` over `node:fs`'s readFile/writeFile
+- Bun.$`ls` instead of execa.
+
+## Testing
+
+Use `bun test` to run tests.
+
+```ts#index.test.ts
+import { test, expect } from "bun:test";
+
+test("hello world", () => {
+  expect(1).toBe(1);
+});
+```
+
+## Frontend
+
+Use HTML imports with `Bun.serve()`. Don't use `vite`. HTML imports fully support React, CSS, Tailwind.
+
+Server:
+
+```ts#index.ts
+import index from "./index.html"
+
+Bun.serve({
+  routes: {
+    "/": index,
+    "/api/users/:id": {
+      GET: (req) => {
+        return new Response(JSON.stringify({ id: req.params.id }));
+      },
+    },
+  },
+  // optional websocket support
+  websocket: {
+    open: (ws) => {
+      ws.send("Hello, world!");
+    },
+    message: (ws, message) => {
+      ws.send(message);
+    },
+    close: (ws) => {
+      // handle close
+    }
+  },
+  development: {
+    hmr: true,
+    console: true,
+  }
+})
+```
+
+HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. `<link>` tags can point to stylesheets and Bun's CSS bundler will bundle.
+
+```html#index.html
+<html>
+  <body>
+    <h1>Hello, world!</h1>
+    <script type="module" src="./frontend.tsx"></script>
+  </body>
+</html>
+```
+
+With the following `frontend.tsx`:
+
+```tsx#frontend.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+// import .css files directly and it works
+import './index.css';
+
+const root = createRoot(document.body);
+
+export default function Frontend() {
+  return <h1>Hello, world!</h1>;
+}
+
+root.render(<Frontend />);
+```
+
+Then, run index.ts
+
+```sh
+bun --hot ./index.ts
+```
+
+For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.
diff --git a/template/packages/rpc/README.md b/template/packages/rpc/README.md
new file mode 100644
index 0000000..12949a3
--- /dev/null
+++ b/template/packages/rpc/README.md
@@ -0,0 +1,15 @@
+# rpc
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.10. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
diff --git a/template/packages/rpc/package.json b/template/packages/rpc/package.json
new file mode 100644
index 0000000..d2e1902
--- /dev/null
+++ b/template/packages/rpc/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@<@var(context.project.name)>/rpc",
+  "type": "module",
+  "main": "index.ts",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "types": "./index.ts"
+    }
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@bufbuild/protobuf": "^2.11.0",
+    "@connectrpc/connect": "^2.1.1",
+    "@connectrpc/connect-web": "^2.1.1"
+  }
+}
diff --git a/template/packages/rpc/tsconfig.json b/template/packages/rpc/tsconfig.json
new file mode 100644
index 0000000..bfa0fea
--- /dev/null
+++ b/template/packages/rpc/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}
diff --git a/template/scripts/.helix/languages.toml b/template/scripts/.helix/languages.toml
new file mode 100644
index 0000000..1813968
--- /dev/null
+++ b/template/scripts/.helix/languages.toml
@@ -0,0 +1,4 @@
+[[language]]
+name="typescript"
+roots = ["package.json"]
+language-servers = ["typescript-language-server"]
diff --git a/template/scripts/gen-rpc-index.ts b/template/scripts/gen-rpc-index.ts
new file mode 100644
index 0000000..0bdb137
--- /dev/null
+++ b/template/scripts/gen-rpc-index.ts
@@ -0,0 +1,324 @@
+import ts, { StringLiteral } from "typescript";
+import { resolve, relative, dirname, join } from "path";
+import { Glob } from "bun";
+
+const RPC_PKG = resolve(import.meta.dirname!, "../packages/rpc");
+const SRC_DIR = join(RPC_PKG, "src");
+const INDEX_FILE = join(RPC_PKG, "index.ts");
+
+const glob = new Glob("**/*_pb.ts");
+const files = Array.from(glob.scanSync({ cwd: SRC_DIR, absolute: true })).sort();
+
+if (files.length === 0) {
+  console.error("No _pb.ts files found in", SRC_DIR);
+  process.exit(1);
+}
+
+// Read the rpc package's tsconfig so module resolution finds @bufbuild/protobuf
+const tsconfigPath = join(RPC_PKG, "tsconfig.json");
+const { config } = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
+const parsed = ts.parseJsonConfigFileContent(config, ts.sys, RPC_PKG);
+
+const program = ts.createProgram(files, {
+  ...parsed.options,
+  noEmit: true,
+});
+
+const checker = program.getTypeChecker();
+const factory = ts.factory;
+
+function hasTypeNamed(type: ts.Type, name: string): boolean {
+  if (type.aliasSymbol?.name === name) return true;
+  if (type.symbol?.name === name) return true;
+  const target = (type as any).target as ts.Type | undefined;
+  if (target?.symbol?.name === name) return true;
+  if (type.isIntersection()) {
+    return type.types.some((t) => hasTypeNamed(t, name));
+  }
+  if (type.isUnion()) {
+    return type.types.some((t) => hasTypeNamed(t, name));
+  }
+  return false;
+}
+
+const isStringLiteral = (s: string | StringLiteral | undefined): s is StringLiteral => {
+  if (s === undefined) {
+    return false;
+  }
+  return (s as StringLiteral).forEachChild != undefined;
+}
+
+const serviceNameToRouterPropertyName = (n:string) : string => {
+  return n.toLowerCase().replace('service','') + 's'
+}
+
+const exportDecl = (exp: Map<string, boolean>, typesOnly:boolean = false, from?: string | StringLiteral) => {
+  return factory.createExportDeclaration(
+    undefined,
+    typesOnly,
+    factory.createNamedExports(
+      Array.from(exp.entries()).map((exp) => {
+        return factory.createExportSpecifier(
+          exp[1],
+          undefined,
+          exp[0]
+        )
+      })
+    ),
+    (
+      isStringLiteral(from) ?
+        from :
+        (
+          from != undefined ?
+            factory.createStringLiteral(from) :
+            from
+        )
+    )
+  )
+}
+
+const importDecl = (imp: Map<string, boolean>, from: string | StringLiteral, typesOnly: boolean = false) => {
+  return factory.createImportDeclaration(
+    undefined,
+    factory.createImportClause(
+      typesOnly,
+      undefined,
+      factory.createNamedImports(
+        Array.from(imp.entries()).map((k) => {
+          return factory.createImportSpecifier(
+            k[1],
+            undefined,
+            factory.createIdentifier(k[0])
+          )
+        })
+      )
+    ),
+    (isStringLiteral(from) ? from : factory.createStringLiteral(from))
+  )
+}
+
+const statements: ts.Statement[] = [];
+const serviceNames: string[] = [];
+const typeNames: string[] = [];
+
+for (const filePath of files) {
+  const sourceFile = program.getSourceFile(filePath);
+  if (!sourceFile) continue;
+
+  const symbol = checker.getSymbolAtLocation(sourceFile);
+  if (!symbol) continue;
+
+  const exports = checker.getExportsOfModule(symbol);
+
+  const fileServiceNames: string[] = [];
+  const fileTypeNames: string[] = [];
+
+  for (const exp of exports) {
+    const declarations = exp.getDeclarations();
+    if (!declarations || declarations.length === 0) continue;
+
+    const decl = declarations[0];
+
+    if (ts.isTypeAliasDeclaration(decl) || ts.isInterfaceDeclaration(decl)) {
+      const type = checker.getDeclaredTypeOfSymbol(exp);
+      if (hasTypeNamed(type, "Message")) {
+        fileTypeNames.push(exp.getName());
+      }
+    } else {
+      const type = checker.getTypeOfSymbolAtLocation(exp, decl);
+      if (hasTypeNamed(type, "GenService")) {
+        fileServiceNames.push(exp.getName());
+      }
+    }
+  }
+
+  let modulePath = "./" + relative(dirname(INDEX_FILE), filePath);
+  modulePath = modulePath.replace(/\.ts$/, "");
+
+  const moduleSpecifier = factory.createStringLiteral(modulePath);
+  statements.push(
+    importDecl(
+      new Map<string, boolean>([
+        ["Client", true],
+        ["createClient", false]
+      ]),
+      "@connectrpc/connect"
+    )
+  )
+  statements.push(
+    importDecl(
+      new Map<string, boolean>([
+        ["createConnectTransport", false]
+      ]),
+      "@connectrpc/connect-web"
+    )
+  )
+  if (fileServiceNames.length > 0) {
+    serviceNames.push(...fileServiceNames)
+    statements.push(importDecl(
+      new Map<string, boolean>(
+        fileServiceNames.map((v) => {
+          return [v, false] as const;
+        })
+      ),
+      moduleSpecifier
+    ))
+  }
+
+  if (fileTypeNames.length > 0) {
+    typeNames.push(...fileTypeNames)
+    statements.push(importDecl(
+      new Map<string, boolean>(
+        fileTypeNames.map((v) => {
+          return [v, false] as const;
+        })
+      ),
+      moduleSpecifier,
+      true
+    ))
+  }
+}
+
+statements.push(
+  exportDecl(
+    new Map<string, boolean>(serviceNames.map((service) => {
+      return [service, false] as const;
+    }))
+  )
+)
+
+statements.push(
+  exportDecl(
+    new Map<string, boolean>(typeNames.map((type) => {
+      return [type, false] as const;
+    })),
+    true
+  )
+)
+
+statements.push(
+  factory.createInterfaceDeclaration(
+    undefined,
+    factory.createIdentifier("Router"),
+    undefined,
+    undefined,
+    serviceNames.map((service) => {
+      return factory.createPropertySignature(
+        undefined,
+        serviceNameToRouterPropertyName(service),
+        undefined,
+        factory.createTypeReferenceNode(
+          factory.createIdentifier("Client"),
+          [
+            factory.createTypeQueryNode(
+              factory.createIdentifier(service)
+            )
+          ]
+        )
+      )
+    })
+  )
+)
+
+statements.push(exportDecl(
+  new Map<string, boolean>([
+    ['Router', true]
+  ])
+))
+
+statements.push(factory.createFunctionDeclaration(
+  undefined,
+  undefined,
+  'createRouter',
+  undefined,
+  [
+    factory.createParameterDeclaration(
+      undefined,
+      undefined,
+      'baseUrl',
+      undefined,
+      factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
+      undefined
+    )
+  ],
+  factory.createTypeReferenceNode(factory.createIdentifier("Router"), undefined),
+  factory.createBlock(
+    [
+      factory.createVariableStatement(
+        undefined,
+        factory.createVariableDeclarationList(
+          [
+            factory.createVariableDeclaration(
+              'transport',
+              undefined,
+              undefined,
+              factory.createCallExpression(
+                factory.createIdentifier("createConnectTransport"),
+                undefined,
+                [
+                  factory.createObjectLiteralExpression([
+                    factory.createPropertyAssignment(
+                      'baseUrl',
+                      factory.createIdentifier('baseUrl')
+                    )
+                  ])
+                ]
+              )
+            ),
+          ],
+          ts.NodeFlags.Const
+        ),
+      ),
+      factory.createVariableStatement(
+        undefined,
+        factory.createVariableDeclarationList(
+          [
+            factory.createVariableDeclaration(
+              'router',
+              undefined,
+              undefined,
+              factory.createObjectLiteralExpression(
+                [
+                  ...serviceNames.map((service) => {
+                    return factory.createPropertyAssignment(
+                      serviceNameToRouterPropertyName(service),
+
+                      factory.createCallExpression(
+                        factory.createIdentifier('createClient'),
+                        undefined,
+                        [
+                          factory.createIdentifier(service),
+                          factory.createIdentifier('transport')
+                        ]
+                      )
+                    )
+                  })
+                ]
+              )
+            )
+          ],
+          ts.NodeFlags.Const
+        )
+      ),
+      factory.createReturnStatement(
+        factory.createIdentifier('router')
+      )
+    ],
+    true
+  )
+))
+
+statements.push(exportDecl(new Map<string,boolean>([
+  ['createRouter', false]
+])))
+
+const outputFile = ts.createSourceFile(INDEX_FILE, "", ts.ScriptTarget.ESNext, false, ts.ScriptKind.TS);
+const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+
+const header = "// @generated by scripts/gen-rpc-index.ts — do not edit manually\n\n";
+const body = statements
+  .map((s) => printer.printNode(ts.EmitHint.Unspecified, s, outputFile))
+  .join("\n");
+
+await Bun.write(INDEX_FILE, header + body + "\n");
+console.log(`Wrote ${INDEX_FILE}`);
diff --git a/template/scripts/package.json b/template/scripts/package.json
new file mode 100644
index 0000000..6d062bb
--- /dev/null
+++ b/template/scripts/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@<@var(context.project.name)>/scripts",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "typescript": "^5"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.11"
+  }
+}
diff --git a/template/services/api/.air.toml b/template/services/api/.air.toml
new file mode 100644
index 0000000..9a2e4c2
--- /dev/null
+++ b/template/services/api/.air.toml
@@ -0,0 +1,58 @@
+#:schema https://json.schemastore.org/any.json
+
+env_files = []
+root = "."
+testdata_dir = "testdata"
+tmp_dir = "tmp"
+
+[build]
+  args_bin = []
+  bin = "./tmp/main"
+  cmd = "go build -o ./tmp/main ."
+  delay = 1000
+  entrypoint = ["./tmp/main","serve"]
+  exclude_dir = ["assets", "tmp", "vendor", "testdata"]
+  exclude_file = []
+  exclude_regex = ["_test.go"]
+  exclude_unchanged = false
+  follow_symlink = false
+  full_bin = ""
+  ignore_dangerous_root_dir = false
+  include_dir = []
+  include_ext = ["go", "tpl", "tmpl", "html"]
+  include_file = []
+  kill_delay = "0s"
+  log = "build-errors.log"
+  poll = false
+  poll_interval = 0
+  post_cmd = []
+  pre_cmd = []
+  rerun = false
+  rerun_delay = 500
+  send_interrupt = false
+  stop_on_error = false
+
+[color]
+  app = ""
+  build = "yellow"
+  main = "magenta"
+  runner = "green"
+  watcher = "cyan"
+
+[log]
+  main_only = false
+  silent = false
+  time = false
+
+[misc]
+  clean_on_exit = false
+
+[proxy]
+  app_port = 0
+  app_start_timeout = 0
+  enabled = false
+  proxy_port = 0
+
+[screen]
+  clear_on_rebuild = false
+  keep_scroll = true
diff --git a/template/services/api/.gitignore b/template/services/api/.gitignore
new file mode 100644
index 0000000..a9a5aec
--- /dev/null
+++ b/template/services/api/.gitignore
@@ -0,0 +1 @@
+tmp
diff --git a/template/services/api/LICENSE b/template/services/api/LICENSE
new file mode 100644
index 0000000..e69de29
diff --git a/template/services/api/cmd/configInit.go b/template/services/api/cmd/configInit.go
new file mode 100644
index 0000000..540d2a1
--- /dev/null
+++ b/template/services/api/cmd/configInit.go
@@ -0,0 +1,45 @@
+/*
+Copyright © 2026 NAME HERE <EMAIL ADDRESS>
+*/
+package cmd
+
+import (
+	"fmt"
+	"os"
+
+	"<@var(context.project.goprefix)>/<@var(context.project.name)>/config"
+	"github.com/spf13/cobra"
+)
+
+// configInitCmd represents the configInit command
+var configInitCmd = &cobra.Command{
+	Use:   "configInit",
+	Short: "A brief description of your command",
+	Long: `A longer description that spans multiple lines and likely contains examples
+and usage of using your command. For example:
+
+Cobra is a CLI library for Go that empowers applications.
+This application is a tool to generate the needed files
+to quickly create a Cobra application.`,
+	Run: func(cmd *cobra.Command, args []string) {
+		err := config.Write(*config.DefaultConf)
+		if err != nil {
+			fmt.Println(err.Error())
+			os.Exit(1)
+		}
+	},
+}
+
+func init() {
+	rootCmd.AddCommand(configInitCmd)
+
+	// Here you will define your flags and configuration settings.
+
+	// Cobra supports Persistent Flags which will work for this command
+	// and all subcommands, e.g.:
+	// configInitCmd.PersistentFlags().String("foo", "", "A help for foo")
+
+	// Cobra supports local flags which will only run when this command
+	// is called directly, e.g.:
+	// configInitCmd.Flags().BoolP("toggle", "t", false, "Help message for toggle")
+}
diff --git a/template/services/api/cmd/migrate.go b/template/services/api/cmd/migrate.go
new file mode 100644
index 0000000..beee0d0
--- /dev/null
+++ b/template/services/api/cmd/migrate.go
@@ -0,0 +1,37 @@
+/*
+Copyright © 2026 NAME HERE <EMAIL ADDRESS>
+*/
+package cmd
+
+import (
+	"<@var(context.project.goprefix)>/<@var(context.project.name)>/db"
+	"github.com/spf13/cobra"
+)
+
+// migrateCmd represents the migrate command
+var migrateCmd = &cobra.Command{
+	Use:   "migrate",
+	Short: "run database migrations",
+	Long:  ``,
+	RunE: func(cmd *cobra.Command, args []string) error {
+		err := db.RunDbMigrations()
+		if err != nil {
+			return err
+		}
+		return nil
+	},
+}
+
+func init() {
+	rootCmd.AddCommand(migrateCmd)
+
+	// Here you will define your flags and configuration settings.
+
+	// Cobra supports Persistent Flags which will work for this command
+	// and all subcommands, e.g.:
+	// migrateCmd.PersistentFlags().String("foo", "", "A help for foo")
+
+	// Cobra supports local flags which will only run when this command
+	// is called directly, e.g.:
+	// migrateCmd.Flags().BoolP("toggle", "t", false, "Help message for toggle")
+}
diff --git a/template/services/api/cmd/root.go b/template/services/api/cmd/root.go
new file mode 100644
index 0000000..6895c57
--- /dev/null
+++ b/template/services/api/cmd/root.go
@@ -0,0 +1,45 @@
+/*
+Copyright © 2026 NAME HERE <EMAIL ADDRESS>
+*/
+package cmd
+
+import (
+	"github.com/spf13/cobra"
+	"os"
+)
+
+// rootCmd represents the base command when called without any subcommands
+var rootCmd = &cobra.Command{
+	Use:   "<@var(context.project.name)>",
+	Short: "A brief description of your application",
+	Long: `A longer description that spans multiple lines and likely contains
+examples and usage of using your application. For example:
+
+Cobra is a CLI library for Go that empowers applications.
+This application is a tool to generate the needed files
+to quickly create a Cobra application.`,
+	// Uncomment the following line if your bare application
+	// has an action associated with it:
+	// Run: func(cmd *cobra.Command, args []string) { },
+}
+
+// Execute adds all child commands to the root command and sets flags appropriately.
+// This is called by main.main(). It only needs to happen once to the rootCmd.
+func Execute() {
+	err := rootCmd.Execute()
+	if err != nil {
+		os.Exit(1)
+	}
+}
+
+func init() {
+	// Here you will define your flags and configuration settings.
+	// Cobra supports persistent flags, which, if defined here,
+	// will be global for your application.
+
+	// rootCmd.PersistentFlags().StringVar(&cfgFile, "config", "", "config file (default is $HOME/.<@var(context.project.name)>.yaml)")
+
+	// Cobra also supports local flags, which will only run
+	// when this action is called directly.
+	rootCmd.Flags().BoolP("toggle", "t", false, "Help message for toggle")
+}
diff --git a/template/services/api/cmd/serve.go b/template/services/api/cmd/serve.go
new file mode 100644
index 0000000..42e0d3e
--- /dev/null
+++ b/template/services/api/cmd/serve.go
@@ -0,0 +1,81 @@
+/*
+Copyright © 2026 NAME HERE <EMAIL ADDRESS>
+*/
+package cmd
+
+import (
+	"<@var(context.project.goprefix)>/<@var(context.project.name)>/config"
+	"<@var(context.project.goprefix)>/<@var(context.project.name)>/db"
+	"<@var(context.project.goprefix)>/<@var(context.project.name)>/server/todo"
+	connectors "connectrpc.com/cors"
+	"context"
+	"github.com/jackc/pgx/v5/pgxpool"
+	"github.com/rs/cors"
+	"github.com/spf13/cobra"
+	"net/http"
+	"strconv"
+	"strings"
+)
+
+// serveCmd represents the serve command
+var serveCmd = &cobra.Command{
+	Use:   "serve",
+	Short: "start server",
+	Long:  ``,
+	RunE: func(cmd *cobra.Command, args []string) error {
+		err := config.Load()
+		if err != nil {
+			err := config.Write(*config.DefaultConf)
+			if err != nil {
+				return err
+			}
+		}
+		conf := *config.Conf
+		ctx := context.Background()
+		db_url := "postgres://" + conf.Database.User + ":" + conf.Database.Password + "@" + conf.Database.Host + ":" + strconv.Itoa(conf.Database.Port) + "/" + conf.Database.Name
+		db_url = db_url + "?sslmode=disable"
+		conn, err := pgxpool.New(ctx, db_url)
+		if err != nil {
+			panic(err.Error())
+		}
+		err = db.RunDbMigrations()
+		if err != nil {
+			return err
+		}
+		db.Q = db.New(conn)
+		middleware := cors.New(cors.Options{
+			AllowedOrigins: conf.Server.FrontendUrls,
+			AllowedMethods: connectors.AllowedMethods(),
+			AllowedHeaders: connectors.AllowedHeaders(),
+			ExposedHeaders: connectors.ExposedHeaders(),
+			Debug:          true,
+		})
+		mux := http.NewServeMux()
+		todoPath, todoHandler := todo.GetPathHandler()
+		mux.Handle(todoPath, todoHandler)
+		p := new(http.Protocols)
+		p.SetHTTP1(true)
+		p.SetUnencryptedHTTP2(true)
+		s := http.Server{
+			Addr:      strings.Join([]string{conf.Server.Host, strconv.Itoa(conf.Server.Port)}, ":"),
+			Handler:   middleware.Handler(mux),
+			Protocols: p,
+		}
+		s.ListenAndServe()
+		return nil
+	},
+}
+
+func init() {
+	rootCmd.AddCommand(serveCmd)
+
+	// Here you will define your flags and configuration settings.
+
+	// Cobra supports Persistent Flags which will work for this command
+	// and all subcommands, e.g.:
+	// serveCmd.PersistentFlags().String("foo", "", "A help for foo")
+
+	// Cobra supports local flags which will only run when this command
+	// is called directly, e.g.:
+	// serveCmd.Flags().BoolP("toggle", "t", false, "Help message for toggle")
+}
diff --git a/template/services/api/config/config.go b/template/services/api/config/config.go
new file mode 100644
index 0000000..3bb7e9d
--- /dev/null
+++ b/template/services/api/config/config.go
@@ -0,0 +1,81 @@
+package config
+
+import (
+	"github.com/adrg/xdg"
+	"github.com/pelletier/go-toml"
+	"os"
+	"path/filepath"
+)
+
+var confPath string
+var Conf *Config
+var DefaultConf *Config
+
+func init() {
+	confPath = filepath.Join(xdg.ConfigHome, "<@var(context.project.name)>", "config.toml")
+	Conf = &Config{}
+	DefaultConf = &Config{
+		Server: Server{
+			Host:         "127.0.0.1",
+			Port:         8080,
+			FrontendUrls: []string{"http://localhost:5173"},
+		},
+		Database: Database{
+			User:     "pp",
+			Password: "<@var(context.project.name)>",
+			Host:     "127.0.0.1",
+			Port:     5432,
+			Name:     "<@var(context.project.name)>",
+		},
+	}
+}
+
+func Load() error {
+	confContent, err := os.ReadFile(confPath)
+	if err != nil {
+		return err
+	}
+	return toml.Unmarshal(confContent, Conf)
+
+}
+
+func Write(config Config) error {
+	confContent, err := toml.Marshal(config)
+	if err != nil {
+		return err
+	}
+
+	dir := filepath.Dir(confPath)
+
+	if err := os.MkdirAll(dir, 0755); err != nil {
+		return err
+	}
+
+	if err := os.WriteFile(confPath, confContent, 0644); err != nil {
+		return err
+	}
+
+	if err := Load(); err != nil {
+		return err
+	}
+	return nil
+}
+
+type Server struct {
+	Host         string
+	Port         int
+	FrontendUrls []string
+}
+
+type Database struct {
+	User     string
+	Password string
+	Host     string
+	Port     int
+	Name     string
+}
+
+type Config struct {
+	Server   Server
+	Database Database
+}
diff --git a/template/services/api/db/db.go b/template/services/api/db/db.go
new file mode 100644
index 0000000..9d485b5
--- /dev/null
+++ b/template/services/api/db/db.go
@@ -0,0 +1,32 @@
+// Code generated by sqlc. DO NOT EDIT.
+// versions:
+//   sqlc v1.30.0
+
+package db
+
+import (
+	"context"
+
+	"github.com/jackc/pgx/v5"
+	"github.com/jackc/pgx/v5/pgconn"
+)
+
+type DBTX interface {
+	Exec(context.Context, string, ...interface{}) (pgconn.CommandTag, error)
+	Query(context.Context, string, ...interface{}) (pgx.Rows, error)
+	QueryRow(context.Context, string, ...interface{}) pgx.Row
+}
+
+func New(db DBTX) *Queries {
+	return &Queries{db: db}
+}
+
+type Queries struct {
+	db DBTX
+}
+
+func (q *Queries) WithTx(tx pgx.Tx) *Queries {
+	return &Queries{
+		db: tx,
+	}
+}
diff --git a/template/services/api/db/dbfs.go b/template/services/api/db/dbfs.go
new file mode 100644
index 0000000..6078ddf
--- /dev/null
+++ b/template/services/api/db/dbfs.go
@@ -0,0 +1,6 @@
+package db
+
+import "embed"
+
+//go:embed migrations/*.sql
+var MigrationsFs embed.FS
diff --git a/template/services/api/db/lib.go b/template/services/api/db/lib.go
new file mode 100644
index 0000000..c50948e
--- /dev/null
+++ b/template/services/api/db/lib.go
@@ -0,0 +1,60 @@
+package db
+
+import (
+	"<@var(context.project.goprefix)>/<@var(context.project.name)>/config"
+	"github.com/amacneil/dbmate/v2/pkg/dbmate"
+	_ "github.com/amacneil/dbmate/v2/pkg/driver/postgres"
+	"log"
+	"net/url"
+	"strconv"
+	"strings"
+)
+
+var Q *Queries
+
+func RunDbMigrations() error {
+
+	err := config.Load()
+	if err != nil {
+		return err
+	}
+	conf := *config.Conf
+	dbUrl, err := url.Parse(strings.Join([]string{
+		"postgresql://",
+		conf.Database.User,
+		":",
+		conf.Database.Password,
+		"@",
+		conf.Database.Host,
+		":",
+		strconv.Itoa(conf.Database.Port),
+		"/",
+		conf.Database.Name,
+	}, ""))
+	if err != nil {
+		return err
+	}
+	db := dbmate.New(dbUrl)
+	db.FS = MigrationsFs
+	db.MigrationsDir = []string{"migrations"}
+	migrations, err := db.FindMigrations()
+	if err != nil {
+		return err
+	}
+	for _, m := range migrations {
+		log.Default().Println(m.Version, m.FilePath)
+	}
+	db.AutoDumpSchema = false
+	log.Default().Println("\nApplying...")
+	err = db.CreateAndMigrate()
+	if err != nil {
+		log.Default().Println(err.Error())
+	}
+	err = db.DumpSchema()
+	if err != nil {
+		return err
+	}
+
+	return nil
+
+}
diff --git a/template/services/api/db/migrations/20260404121052_init.sql b/template/services/api/db/migrations/20260404121052_init.sql
new file mode 100644
index 0000000..eaf1dc6
--- /dev/null
+++ b/template/services/api/db/migrations/20260404121052_init.sql
@@ -0,0 +1,10 @@
+-- migrate:up
+CREATE TABLE todo (
+    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+    task VARCHAR(255) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    done bool DEFAULT false
+);
+-- migrate:down
+DROP TABLE todo;
diff --git a/template/services/api/db/models.go b/template/services/api/db/models.go
new file mode 100644
index 0000000..f098474
--- /dev/null
+++ b/template/services/api/db/models.go
@@ -0,0 +1,17 @@
+// Code generated by sqlc. DO NOT EDIT.
+// versions:
+//   sqlc v1.30.0
+
+package db
+
+import (
+	"github.com/jackc/pgx/v5/pgtype"
+)
+
+type Todo struct {
+	ID        pgtype.UUID
+	Task      string
+	CreatedAt pgtype.Timestamp
+	UpdatedAt pgtype.Timestamp
+	Done      pgtype.Bool
+}
diff --git a/template/services/api/db/query/todo.sql b/template/services/api/db/query/todo.sql
new file mode 100644
index 0000000..027107d
--- /dev/null
+++ b/template/services/api/db/query/todo.sql
@@ -0,0 +1,14 @@
+-- name: CreateTodo :one
+insert into todo (id,task) values ($1,$2) returning *;
+
+-- name: ListTodos :many
+select * from todo;
+
+-- name: GetTodo :one
+select * from todo where id = $1 limit 1;
+
+-- name: UpdateTodo :one
+update todo set task = $1, done = $2 where id = $3 returning *;
+
+-- name: DeleteTodo :exec
+delete from todo where id = $1;
diff --git a/template/services/api/db/schema.sql b/template/services/api/db/schema.sql
new file mode 100644
index 0000000..9c3f874
--- /dev/null
+++ b/template/services/api/db/schema.sql
@@ -0,0 +1,86 @@
+\restrict dbmate
+
+-- Dumped from database version 17.9
+-- Dumped by pg_dump version 17.9
+
+SET statement_timeout = 0;
+SET lock_timeout = 0;
+SET idle_in_transaction_session_timeout = 0;
+SET transaction_timeout = 0;
+SET client_encoding = 'UTF8';
+SET standard_conforming_strings = on;
+SELECT pg_catalog.set_config('search_path', '', false);
+SET check_function_bodies = false;
+SET xmloption = content;
+SET client_min_messages = warning;
+SET row_security = off;
+
+--
+-- Name: pgcrypto; Type: EXTENSION; Schema: -; Owner: -
+--
+
+CREATE EXTENSION IF NOT EXISTS pgcrypto WITH SCHEMA public;
+
+
+--
+-- Name: EXTENSION pgcrypto; Type: COMMENT; Schema: -; Owner: -
+--
+
+COMMENT ON EXTENSION pgcrypto IS 'cryptographic functions';
+
+
+SET default_tablespace = '';
+
+SET default_table_access_method = heap;
+
+--
+-- Name: schema_migrations; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.schema_migrations (
+    version character varying NOT NULL
+);
+
+
+--
+-- Name: todo; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.todo (
+    id uuid DEFAULT gen_random_uuid() NOT NULL,
+    task character varying(255) NOT NULL,
+    created_at timestamp without time zone DEFAULT CURRENT_TIMESTAMP,
+    updated_at timestamp without time zone DEFAULT CURRENT_TIMESTAMP,
+    done boolean DEFAULT false
+);
+
+
+--
+-- Name: schema_migrations schema_migrations_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.schema_migrations
+    ADD CONSTRAINT schema_migrations_pkey PRIMARY KEY (version);
+
+
+--
+-- Name: todo todo_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.todo
+    ADD CONSTRAINT todo_pkey PRIMARY KEY (id);
+
+
+--
+-- PostgreSQL database dump complete
+--
+
+\unrestrict dbmate
+
+
+--
+-- Dbmate schema migrations
+--
+
+INSERT INTO public.schema_migrations (version) VALUES
+    ('20260404121052');
diff --git a/template/services/api/db/todo.sql.go b/template/services/api/db/todo.sql.go
new file mode 100644
index 0000000..9f52618
--- /dev/null
+++ b/template/services/api/db/todo.sql.go
@@ -0,0 +1,113 @@
+// Code generated by sqlc. DO NOT EDIT.
+// versions:
+//   sqlc v1.30.0
+// source: todo.sql
+
+package db
+
+import (
+	"context"
+
+	"github.com/jackc/pgx/v5/pgtype"
+)
+
+const createTodo = `-- name: CreateTodo :one
+insert into todo (id,task) values ($1,$2) returning id, task, created_at, updated_at, done
+`
+
+type CreateTodoParams struct {
+	ID   pgtype.UUID
+	Task string
+}
+
+func (q *Queries) CreateTodo(ctx context.Context, arg CreateTodoParams) (Todo, error) {
+	row := q.db.QueryRow(ctx, createTodo, arg.ID, arg.Task)
+	var i Todo
+	err := row.Scan(
+		&i.ID,
+		&i.Task,
+		&i.CreatedAt,
+		&i.UpdatedAt,
+		&i.Done,
+	)
+	return i, err
+}
+
+const deleteTodo = `-- name: DeleteTodo :exec
+delete from todo where id = $1
+`
+
+func (q *Queries) DeleteTodo(ctx context.Context, id pgtype.UUID) error {
+	_, err := q.db.Exec(ctx, deleteTodo, id)
+	return err
+}
+
+const getTodo = `-- name: GetTodo :one
+select id, task, created_at, updated_at, done from todo where id = $1 limit 1
+`
+
+func (q *Queries) GetTodo(ctx context.Context, id pgtype.UUID) (Todo, error) {
+	row := q.db.QueryRow(ctx, getTodo, id)
+	var i Todo
+	err := row.Scan(
+		&i.ID,
+		&i.Task,
+		&i.CreatedAt,
+		&i.UpdatedAt,
+		&i.Done,
+	)
+	return i, err
+}
+
+const listTodos = `-- name: ListTodos :many
+select id, task, created_at, updated_at, done from todo
+`
+
+func (q *Queries) ListTodos(ctx context.Context) ([]Todo, error) {
+	rows, err := q.db.Query(ctx, listTodos)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []Todo
+	for rows.Next() {
+		var i Todo
+		if err := rows.Scan(
+			&i.ID,
+			&i.Task,
+			&i.CreatedAt,
+			&i.UpdatedAt,
+			&i.Done,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
+const updateTodo = `-- name: UpdateTodo :one
+update todo set task = $1, done = $2 where id = $3 returning id, task, created_at, updated_at, done
+`
+
+type UpdateTodoParams struct {
+	Task string
+	Done pgtype.Bool
+	ID   pgtype.UUID
+}
+
+func (q *Queries) UpdateTodo(ctx context.Context, arg UpdateTodoParams) (Todo, error) {
+	row := q.db.QueryRow(ctx, updateTodo, arg.Task, arg.Done, arg.ID)
+	var i Todo
+	err := row.Scan(
+		&i.ID,
+		&i.Task,
+		&i.CreatedAt,
+		&i.UpdatedAt,
+		&i.Done,
+	)
+	return i, err
+}
diff --git a/template/services/api/go.mod b/template/services/api/go.mod
new file mode 100644
index 0000000..d8f71d5
--- /dev/null
+++ b/template/services/api/go.mod
@@ -0,0 +1,34 @@
+module <@var(context.project.goprefix)>/<@var(context.project.name)>
+
+go 1.25.7
+
+require (
+	buf.build/gen/go/bufbuild/protovalidate/protocolbuffers/go v1.36.9-20250912141014-52f32327d4b0.1 // indirect
+	buf.build/go/protovalidate v1.0.0 // indirect
+	cel.dev/expr v0.24.0 // indirect
+	connectrpc.com/connect v1.19.1 // indirect
+	connectrpc.com/cors v0.1.0 // indirect
+	connectrpc.com/validate v0.6.0 // indirect
+	github.com/adrg/xdg v0.5.3 // indirect
+	github.com/amacneil/dbmate/v2 v2.32.0 // indirect
+	github.com/antlr4-go/antlr/v4 v4.13.1 // indirect
+	github.com/google/cel-go v0.26.1 // indirect
+	github.com/inconshreveable/mousetrap v1.1.0 // indirect
+	github.com/jackc/pgpassfile v1.0.0 // indirect
+	github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 // indirect
+	github.com/jackc/pgx/v5 v5.9.1 // indirect
+	github.com/jackc/puddle/v2 v2.2.2 // indirect
+	github.com/lib/pq v1.12.0 // indirect
+	github.com/pelletier/go-toml v1.9.5 // indirect
+	github.com/rs/cors v1.11.1 // indirect
+	github.com/spf13/cobra v1.10.2 // indirect
+	github.com/spf13/pflag v1.0.10 // indirect
+	github.com/stoewer/go-strcase v1.3.1 // indirect
+	golang.org/x/exp v0.0.0-20260312153236-7ab1446f8b90 // indirect
+	golang.org/x/sync v0.20.0 // indirect
+	golang.org/x/sys v0.42.0 // indirect
+	golang.org/x/text v0.35.0 // indirect
+	google.golang.org/genproto/googleapis/api v0.0.0-20260319201613-d00831a3d3e7 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20260319201613-d00831a3d3e7 // indirect
+	google.golang.org/protobuf v1.36.11 // indirect
+)
diff --git a/template/services/api/go.sum b/template/services/api/go.sum
new file mode 100644
index 0000000..331b399
--- /dev/null
+++ b/template/services/api/go.sum
@@ -0,0 +1,79 @@
+buf.build/gen/go/bufbuild/protovalidate/protocolbuffers/go v1.36.9-20250912141014-52f32327d4b0.1 h1:DQLS/rRxLHuugVzjJU5AvOwD57pdFl9he/0O7e5P294=
+buf.build/gen/go/bufbuild/protovalidate/protocolbuffers/go v1.36.9-20250912141014-52f32327d4b0.1/go.mod h1:aY3zbkNan5F+cGm9lITDP6oxJIwu0dn9KjJuJjWaHkg=
+buf.build/go/protovalidate v1.0.0 h1:IAG1etULddAy93fiBsFVhpj7es5zL53AfB/79CVGtyY=
+buf.build/go/protovalidate v1.0.0/go.mod h1:KQmEUrcQuC99hAw+juzOEAmILScQiKBP1Oc36vvCLW8=
+cel.dev/expr v0.24.0 h1:56OvJKSH3hDGL0ml5uSxZmz3/3Pq4tJ+fb1unVLAFcY=
+cel.dev/expr v0.24.0/go.mod h1:hLPLo1W4QUmuYdA72RBX06QTs6MXw941piREPl3Yfiw=
+connectrpc.com/connect v1.19.1 h1:R5M57z05+90EfEvCY1b7hBxDVOUl45PrtXtAV2fOC14=
+connectrpc.com/connect v1.19.1/go.mod h1:tN20fjdGlewnSFeZxLKb0xwIZ6ozc3OQs2hTXy4du9w=
+connectrpc.com/cors v0.1.0 h1:f3gTXJyDZPrDIZCQ567jxfD9PAIpopHiRDnJRt3QuOQ=
+connectrpc.com/cors v0.1.0/go.mod h1:v8SJZCPfHtGH1zsm+Ttajpozd4cYIUryl4dFB6QEpfg=
+connectrpc.com/validate v0.6.0 h1:DcrgDKt2ZScrUs/d/mh9itD2yeEa0UbBBa+i0mwzx+4=
+connectrpc.com/validate v0.6.0/go.mod h1:ihrpI+8gVbLH1fvVWJL1I3j0CfWnF8P/90LsmluRiZs=
+github.com/adrg/xdg v0.5.3 h1:xRnxJXne7+oWDatRhR1JLnvuccuIeCoBu2rtuLqQB78=
+github.com/adrg/xdg v0.5.3/go.mod h1:nlTsY+NNiCBGCK2tpm09vRqfVzrc2fLmXGpBLF0zlTQ=
+github.com/amacneil/dbmate/v2 v2.32.0 h1:DJWt+NRWlphTv1HXWWcAU7gsJKm/Ov8/+8k6yqLz8vA=
+github.com/amacneil/dbmate/v2 v2.32.0/go.mod h1:Kwax92bT+ZgqIXll9M+0QGuHVuu7O7AhsE+5p6PTqDc=
+github.com/antlr4-go/antlr/v4 v4.13.1 h1:SqQKkuVZ+zWkMMNkjy5FZe5mr5WURWnlpmOuzYWrPrQ=
+github.com/antlr4-go/antlr/v4 v4.13.1/go.mod h1:GKmUxMtwp6ZgGwZSva4eWPC5mS6vUAmOABFgjdkM7Nw=
+github.com/cpuguy83/go-md2man/v2 v2.0.6/go.mod h1:oOW0eioCTA6cOiMLiUPZOpcVxMig6NIQQ7OS05n1F4g=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/google/cel-go v0.26.1 h1:iPbVVEdkhTX++hpe3lzSk7D3G3QSYqLGoHOcEio+UXQ=
+github.com/google/cel-go v0.26.1/go.mod h1:A9O8OU9rdvrK5MQyrqfIxo1a0u4g3sF8KB6PUIaryMM=
+github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2s0bqwp9tc8=
+github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw=
+github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsIM=
+github.com/jackc/pgpassfile v1.0.0/go.mod h1:CEx0iS5ambNFdcRtxPj5JhEz+xB6uRky5eyVu/W2HEg=
+github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 h1:iCEnooe7UlwOQYpKFhBabPMi4aNAfoODPEFNiAnClxo=
+github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761/go.mod h1:5TJZWKEWniPve33vlWYSoGYefn3gLQRzjfDlhSJ9ZKM=
+github.com/jackc/pgx/v5 v5.9.1 h1:uwrxJXBnx76nyISkhr33kQLlUqjv7et7b9FjCen/tdc=
+github.com/jackc/pgx/v5 v5.9.1/go.mod h1:mal1tBGAFfLHvZzaYh77YS/eC6IX9OWbRV1QIIM0Jn4=
+github.com/jackc/puddle/v2 v2.2.2 h1:PR8nw+E/1w0GLuRFSmiioY6UooMp6KJv0/61nB7icHo=
+github.com/jackc/puddle/v2 v2.2.2/go.mod h1:vriiEXHvEE654aYKXXjOvZM39qJ0q+azkZFrfEOc3H4=
+github.com/lib/pq v1.12.0 h1:mC1zeiNamwKBecjHarAr26c/+d8V5w/u4J0I/yASbJo=
+github.com/lib/pq v1.12.0/go.mod h1:/p+8NSbOcwzAEI7wiMXFlgydTwcgTr3OSKMsD2BitpA=
+github.com/pelletier/go-toml v1.9.5 h1:4yBQzkHv+7BHq2PQUZF3Mx0IYxG7LsP222s7Agd3ve8=
+github.com/pelletier/go-toml v1.9.5/go.mod h1:u1nR/EPcESfeI/szUZKdtJ0xRNbUoANCkoOuaOx1Y+c=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/rs/cors v1.11.1 h1:eU3gRzXLRK57F5rKMGMZURNdIG4EoAmX8k94r9wXWHA=
+github.com/rs/cors v1.11.1/go.mod h1:XyqrcTp5zjWr1wsJ8PIRZssZ8b/WMcMf71DJnit4EMU=
+github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
+github.com/spf13/cobra v1.10.2 h1:DMTTonx5m65Ic0GOoRY2c16WCbHxOOw6xxezuLaBpcU=
+github.com/spf13/cobra v1.10.2/go.mod h1:7C1pvHqHw5A4vrJfjNwvOdzYu0Gml16OCs2GRiTUUS4=
+github.com/spf13/pflag v1.0.9/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/spf13/pflag v1.0.10 h1:4EBh2KAYBwaONj6b2Ye1GiHfwjqyROoF4RwYO+vPwFk=
+github.com/spf13/pflag v1.0.10/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/stoewer/go-strcase v1.3.1 h1:iS0MdW+kVTxgMoE1LAZyMiYJFKlOzLooE4MxjirtkAs=
+github.com/stoewer/go-strcase v1.3.1/go.mod h1:fAH5hQ5pehh+j3nZfvwdk2RgEgQjAoM8wodgtPmh1xo=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+go.yaml.in/yaml/v3 v3.0.4/go.mod h1:DhzuOOF2ATzADvBadXxruRBLzYTpT36CKvDb3+aBEFg=
+golang.org/x/exp v0.0.0-20260312153236-7ab1446f8b90 h1:jiDhWWeC7jfWqR9c/uplMOqJ0sbNlNWv0UkzE0vX1MA=
+golang.org/x/exp v0.0.0-20260312153236-7ab1446f8b90/go.mod h1:xE1HEv6b+1SCZ5/uscMRjUBKtIxworgEcEi+/n9NQDQ=
+golang.org/x/sync v0.20.0 h1:e0PTpb7pjO8GAtTs2dQ6jYa5BWYlMuX047Dco/pItO4=
+golang.org/x/sync v0.20.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
+golang.org/x/sys v0.26.0 h1:KHjCJyddX0LoSTb3J+vWpupP9p0oznkqVk/IfjymZbo=
+golang.org/x/sys v0.26.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.42.0 h1:omrd2nAlyT5ESRdCLYdm3+fMfNFE/+Rf4bDIQImRJeo=
+golang.org/x/sys v0.42.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
+golang.org/x/text v0.35.0 h1:JOVx6vVDFokkpaq1AEptVzLTpDe9KGpj5tR4/X+ybL8=
+golang.org/x/text v0.35.0/go.mod h1:khi/HExzZJ2pGnjenulevKNX1W67CUy0AsXcNubPGCA=
+google.golang.org/genproto v0.0.0-20260319201613-d00831a3d3e7 h1:XzmzkmB14QhVhgnawEVsOn6OFsnpyxNPRY9QV01dNB0=
+google.golang.org/genproto/googleapis/api v0.0.0-20260319201613-d00831a3d3e7 h1:41r6JMbpzBMen0R/4TZeeAmGXSJC7DftGINUodzTkPI=
+google.golang.org/genproto/googleapis/api v0.0.0-20260319201613-d00831a3d3e7/go.mod h1:EIQZ5bFCfRQDV4MhRle7+OgjNtZ6P1PiZBgAKuxXu/Y=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20260319201613-d00831a3d3e7 h1:ndE4FoJqsIceKP2oYSnUZqhTdYufCYYkqwtFzfrhI7w=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20260319201613-d00831a3d3e7/go.mod h1:4Hqkh8ycfw05ld/3BWL7rJOSfebL2Q+DVDeRgYgxUU8=
+google.golang.org/protobuf v1.36.9 h1:w2gp2mA27hUeUzj9Ex9FBjsBm40zfaDtEWow293U7Iw=
+google.golang.org/protobuf v1.36.9/go.mod h1:fuxRtAxBytpl4zzqUh6/eyUujkJdNiuEkXntxiD/uRU=
+google.golang.org/protobuf v1.36.11 h1:fV6ZwhNocDyBLK0dj+fg8ektcVegBBuEolpbTQyBNVE=
+google.golang.org/protobuf v1.36.11/go.mod h1:HTf+CrKn2C3g5S8VImy6tdcUvCska2kB7j23XfzDpco=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/template/services/api/main.go b/template/services/api/main.go
new file mode 100644
index 0000000..3dbb805
--- /dev/null
+++ b/template/services/api/main.go
@@ -0,0 +1,11 @@
+/*
+Copyright © 2026 NAME HERE <EMAIL ADDRESS>
+
+*/
+package main
+
+import "<@var(context.project.goprefix)>/<@var(context.project.name)>/cmd"
+
+func main() {
+	cmd.Execute()
+}
diff --git a/template/services/api/server/todo/todo.go b/template/services/api/server/todo/todo.go
new file mode 100644
index 0000000..d27d690
--- /dev/null
+++ b/template/services/api/server/todo/todo.go
@@ -0,0 +1,116 @@
+package todo
+
+import (
+	"connectrpc.com/connect"
+	"connectrpc.com/validate"
+	"context"
+	"<@var(context.project.goprefix)>/<@var(context.project.name)>/db"
+	todov1 "<@var(context.project.goprefix)>/<@var(context.project.name)>/gen/todo/v1"
+	"<@var(context.project.goprefix)>/<@var(context.project.name)>/gen/todo/v1/todov1connect"
+	. "<@var(context.project.goprefix)>/<@var(context.project.name)>/utils"
+	"github.com/jackc/pgx/v5/pgtype"
+	"net/http"
+	"time"
+)
+
+type TodoServer struct{}
+
+func (srv *TodoServer) CreateTodo(ctx context.Context, req *connect.Request[todov1.CreateTodoRequest]) (*connect.Response[todov1.CreateTodoResponse], error) {
+	var id pgtype.UUID
+	err := id.Scan(*req.Msg.Todo.Id)
+	if err != nil {
+		return nil, err
+	}
+	todo, err := db.Q.CreateTodo(ctx, db.CreateTodoParams{
+		ID:   id,
+		Task: req.Msg.Todo.Task,
+	})
+	if err != nil {
+		return nil, err
+	}
+	return &connect.Response[todov1.CreateTodoResponse]{
+		Msg: &todov1.CreateTodoResponse{
+			Todo: &todov1.Todo{
+				Id:        StrPtr(todo.ID.String()),
+				Task:      todo.Task,
+				CreatedAt: StrPtr(todo.CreatedAt.Time.Format(time.RFC3339)),
+				UpdatesAt: StrPtr(todo.UpdatedAt.Time.Format(time.RFC3339)),
+				Done:      BoolPtr(todo.Done.Bool),
+			},
+		},
+	}, nil
+}
+
+func (srv *TodoServer) ListTodos(ctx context.Context, req *connect.Request[todov1.ListTodosRequest]) (*connect.Response[todov1.ListTodosResponse], error) {
+	todos, err := db.Q.ListTodos(ctx)
+	if err != nil {
+		return nil, err
+	}
+	reponseTodos := []*todov1.Todo{}
+	for _, todo := range todos {
+		reponseTodos = append(reponseTodos, &todov1.Todo{
+			Id:        StrPtr(todo.ID.String()),
+			Task:      todo.Task,
+			CreatedAt: StrPtr(todo.CreatedAt.Time.Format(time.RFC3339)),
+			UpdatesAt: StrPtr(todo.UpdatedAt.Time.Format(time.RFC3339)),
+			Done:      BoolPtr(todo.Done.Bool),
+		})
+	}
+
+	return &connect.Response[todov1.ListTodosResponse]{
+		Msg: &todov1.ListTodosResponse{
+			Todos: reponseTodos,
+		},
+	}, nil
+}
+
+func (srv *TodoServer) UpdateTodo(ctx context.Context, req *connect.Request[todov1.UpdateTodoRequest]) (*connect.Response[todov1.UpdateTodoResponse], error) {
+	var id pgtype.UUID
+	err := id.Scan(*req.Msg.Todo.Id)
+	if err != nil {
+		return nil, err
+	}
+	todo, err := db.Q.UpdateTodo(ctx, db.UpdateTodoParams{
+		Task: req.Msg.Todo.Task,
+		Done: pgtype.Bool{
+			Bool:  *req.Msg.Todo.Done,
+			Valid: true,
+		},
+		ID: id,
+	})
+	if err != nil {
+		return nil, err
+	}
+	return &connect.Response[todov1.UpdateTodoResponse]{
+		Msg: &todov1.UpdateTodoResponse{
+			Todo: &todov1.Todo{
+				Id:        StrPtr(todo.ID.String()),
+				Task:      todo.Task,
+				CreatedAt: StrPtr(todo.CreatedAt.Time.Format(time.RFC3339)),
+				UpdatesAt: StrPtr(todo.UpdatedAt.Time.Format(time.RFC3339)),
+				Done:      BoolPtr(todo.Done.Bool),
+			},
+		},
+	}, nil
+
+}
+
+func (srv *TodoServer) DeleteTodo(ctx context.Context, req *connect.Request[todov1.DeleteTodoRequest]) (*connect.Response[todov1.DeleteTodoResponse], error) {
+	var id pgtype.UUID
+	err := id.Scan(*req.Msg.Todo.Id)
+	if err != nil {
+		return nil, err
+	}
+	err = db.Q.DeleteTodo(ctx, id)
+	if err != nil {
+		return nil, err
+	}
+	return &connect.Response[todov1.DeleteTodoResponse]{
+		Msg: &todov1.DeleteTodoResponse{},
+	}, nil
+}
+
+func GetPathHandler() (path string, handler http.Handler) {
+	path, handler = todov1connect.NewTodoServiceHandler(&TodoServer{}, connect.WithInterceptors(validate.NewInterceptor()))
+	return
+}
diff --git a/template/services/api/sqlc.yaml b/template/services/api/sqlc.yaml
new file mode 100644
index 0000000..6e40552
--- /dev/null
+++ b/template/services/api/sqlc.yaml
@@ -0,0 +1,10 @@
+version: "2"
+sql:
+  - engine: "postgresql"
+    queries: "db/query"
+    schema: "db/migrations"
+    gen:
+        go:
+            package: "db"
+            out: "db"
+            sql_package: "pgx/v5"
diff --git a/template/services/api/utils/utils.go b/template/services/api/utils/utils.go
new file mode 100644
index 0000000..8954b4b
--- /dev/null
+++ b/template/services/api/utils/utils.go
@@ -0,0 +1,9 @@
+package utils
+
+func StrPtr(v string) *string {
+	return &v
+}
+
+func BoolPtr(v bool) *bool {
+	return &v
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..bfa0fea
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}