From 3b8d3ca6399a099863cf37f86e8681707eaa37ec Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Wed, 19 Aug 2026 11:36:11 +1000
Subject: [PATCH] refactor(ui): promote current design system (#43200)

---
 .../timeline/session-tab-switch-probe.ts      |   2 +-
 .../regression/session-request-docks.spec.ts  |   4 +-
 .../session-timeline-tool-projection.spec.ts  |   9 +-
 .../app/e2e/smoke/session-timeline.spec.ts    |   2 +-
 packages/app/src/components/debug-bar.tsx     |  21 +-
 .../components/dialog-command-palette-v2.tsx  |  12 +-
 .../dialog-connect-provider.stories.tsx       |   4 +-
 .../components/dialog-connect-provider.tsx    |  25 +-
 .../src/components/dialog-custom-provider.tsx |  38 ++-
 .../src/components/dialog-edit-project-v2.tsx |  61 ++--
 packages/app/src/components/dialog-fork.tsx   |  41 ++-
 .../src/components/dialog-manage-models.tsx   | 171 +++++-----
 .../src/components/dialog-release-notes.tsx   |   4 +-
 .../components/dialog-select-directory-v2.tsx |  32 +-
 .../app/src/components/dialog-select-file.tsx | 187 -----------
 .../app/src/components/dialog-select-mcp.tsx  | 120 +++----
 .../dialog-select-model-unpaid-v2.stories.tsx |   2 +-
 .../dialog-select-model-unpaid-v2.tsx         |  20 +-
 .../components/dialog-select-model-unpaid.tsx | 201 ++++++------
 .../src/components/dialog-select-model.tsx    |  86 +++--
 .../src/components/dialog-select-server.tsx   |  51 ++-
 .../src/components/dialog-usage-exceeded.tsx  |  27 +-
 packages/app/src/components/file-tree-v2.tsx  |   4 +-
 .../project-settings-extensions.tsx           |  30 +-
 .../app/src/components/prompt-input-v2.tsx    |  22 +-
 .../components/prompt-project-selector.tsx    |  70 ++--
 .../components/prompt-workspace-selector.tsx  |  86 ++---
 .../src/components/server/server-row-menu.tsx |  42 +--
 .../app/src/components/server/server-row.tsx  |   1 +
 .../src/components/session-context-usage.tsx  |  30 +-
 .../src/components/session-workspace-menu.tsx |  62 ++--
 .../src/components/session/open-in-app-v2.tsx |  59 ++--
 .../src/components/session/session-header.tsx |  21 +-
 .../session/session-sortable-tab-v2.tsx       |  19 +-
 .../session-sortable-terminal-tab-v2.tsx      |  36 +-
 .../app/src/components/settings-keybinds.tsx  |  18 +-
 .../src/components/settings-v2/appearance.tsx |  12 +-
 .../settings-v2/dialog-server-v2.tsx          |  26 +-
 .../settings-v2/dialog-settings-v2.tsx        |  92 +++---
 .../src/components/settings-v2/extensions.tsx |  30 +-
 .../src/components/settings-v2/general.tsx    |  32 +-
 .../app/src/components/settings-v2/models.tsx |  14 +-
 .../components/settings-v2/notifications.tsx  |   7 +-
 .../settings-v2/parts/server-select.tsx       |   5 +-
 .../src/components/settings-v2/projects.tsx   |  10 +-
 .../src/components/settings-v2/providers.tsx  |  22 +-
 .../src/components/settings-v2/servers.tsx    |  16 +-
 .../components/settings-v2/settings-v2.css    |   4 +-
 .../src/components/settings-v2/workspaces.tsx |  81 +++--
 .../src/components/status-popover-body.tsx    |   4 +-
 .../app/src/components/status-popover.tsx     |   7 +-
 .../app/src/components/titlebar-tab-nav.tsx   |  14 +-
 packages/app/src/components/titlebar.tsx      |  28 +-
 .../app/src/components/windows-app-menu.tsx   |  59 ++--
 packages/app/src/context/layout.tsx           |   2 +-
 packages/app/src/index.css                    |  31 +-
 .../app/src/pages/home/home-projects-view.tsx |  82 ++---
 .../app/src/pages/home/home-sessions-view.tsx |  30 +-
 .../src/pages/layout/session-tab-avatar.tsx   |   5 +-
 .../pages/new-session/new-session-view.tsx    |  13 +-
 .../new-session/use-new-session-commands.tsx  |   4 +-
 packages/app/src/pages/session.tsx            |  32 +-
 .../composer/session-background-dock.tsx      |   4 +-
 .../composer/session-composer-pullout.tsx     |   3 +-
 .../composer/session-followup-dock.tsx        |   5 +-
 .../composer/session-permission-dock.tsx      |   4 +-
 .../composer/session-question-dock.tsx        |  18 +-
 .../session/composer/session-revert-dock.tsx  |  16 +-
 packages/app/src/pages/session/file-tabs.tsx  |  30 +-
 .../src/pages/session/session-side-panel.tsx  |  41 +--
 .../src/pages/session/terminal-panel-v2.tsx   |  16 +-
 .../src/pages/session/timeline/controller.tsx |  16 +-
 .../session/timeline/message-timeline.tsx     |  90 ++---
 .../pages/session/usage-exceeded-dialogs.tsx  |   3 +-
 .../pages/session/use-session-commands.tsx    |   4 +-
 .../src/pages/session/v2/review-panel-v2.tsx  |   2 +-
 .../pages/session/v2/session-file-list-v2.tsx |   2 +-
 packages/app/src/utils/toast.tsx              |  23 +-
 packages/app/src/wsl/dialog-add-server.tsx    |  71 ++--
 packages/app/src/wsl/settings.tsx             |  82 +++--
 packages/app/test-browser/toast-owner.test.ts |  38 +--
 .../desktop/src/renderer/migration-status.tsx |  26 +-
 packages/enterprise/src/app.css               |   1 +
 .../enterprise/src/routes/share/[shareID].tsx |   5 +-
 .../session-ui/src/components/basic-tool.css  |   2 +-
 .../src/components/line-comment-styles.ts     |   2 +-
 .../src/components/line-comment.tsx           |   2 +-
 .../session-ui/src/components/markdown.tsx    |  16 +-
 .../session-ui/src/components/message-nav.css |   7 +
 .../session-ui/src/components/message-nav.tsx |  49 ++-
 .../src/components/message-part.css           |  18 +-
 .../src/components/message-part.tsx           |  78 ++---
 .../src/components/session-retry.tsx          |   2 +-
 .../src/components/session-review.css         |  25 +-
 .../src/components/session-review.tsx         |  64 ++--
 .../src/components/session-turn.tsx           |   4 +-
 .../src/components/tool-error-card.css        |   2 +-
 .../src/components/tool-error-card.tsx        |   3 +-
 .../src/v2/components/basic-tool-v2.tsx       |   6 +-
 .../src/v2/components/comment-card-v2.tsx     |   6 +-
 .../line-comment-annotations-v2.tsx           |  13 +-
 .../src/v2/components/prompt-input/index.tsx  | 106 +++---
 .../session-review-empty-changes-v2.tsx       |   2 +-
 .../session-review-empty-no-git-v2.tsx        |   6 +-
 .../session-review-file-preview-v2.tsx        |  32 +-
 .../src/v2/components/session-review-v2.tsx   |  77 +++--
 .../components/tool-error-card-v2.stories.tsx |   6 +-
 packages/storybook/.storybook/preview.tsx     |   2 +-
 packages/ui/package.json                      |  40 ++-
 packages/ui/script/build-oc2-v2-overrides.ts  |   2 +-
 .../button/button.css}                        |   0
 .../button/button.stories.tsx}                |  48 +--
 .../button/button.tsx}                        |  16 +-
 .../icon-button/icon-button.css}              |   0
 .../icon-button/icon-button.stories.tsx}      |  38 +--
 .../src/actions/icon-button/icon-button.tsx   |  32 ++
 .../split-button/split-button.css}            |   7 +-
 .../split-button/split-button.stories.tsx     |  31 ++
 .../split-button/split-button.tsx}            |   8 +-
 .../ui/src/components/accordion.stories.tsx   | 149 ---------
 packages/ui/src/components/avatar.css         |  49 ---
 packages/ui/src/components/avatar.stories.tsx |  76 -----
 packages/ui/src/components/button.css         | 194 -----------
 packages/ui/src/components/button.stories.tsx | 108 ------
 packages/ui/src/components/button.tsx         |  33 --
 packages/ui/src/components/card.css           |   4 +-
 packages/ui/src/components/card.stories.tsx   |   4 +-
 packages/ui/src/components/card.tsx           |   2 +-
 .../ui/src/components/checkbox.stories.tsx    |  71 ----
 packages/ui/src/components/collapsible.tsx    |   2 +-
 packages/ui/src/components/dialog.css         | 181 ----------
 packages/ui/src/components/dialog.stories.tsx | 173 ----------
 packages/ui/src/components/dialog.tsx         |  72 ----
 .../src/components/diff-changes.stories.tsx   |  81 -----
 packages/ui/src/components/diff-changes.tsx   | 115 -------
 packages/ui/src/components/dropdown-menu.css  | 135 --------
 .../src/components/dropdown-menu.stories.tsx  |  97 ------
 packages/ui/src/components/dropdown-menu.tsx  | 308 ------------------
 packages/ui/src/components/icon-button.css    | 181 ----------
 .../ui/src/components/icon-button.stories.tsx |  74 -----
 packages/ui/src/components/icon-button.tsx    |  29 --
 packages/ui/src/components/icon.css           |  39 ---
 packages/ui/src/components/icon.stories.tsx   | 174 ----------
 .../src/components/image-preview.stories.tsx  |   4 +-
 packages/ui/src/components/image-preview.tsx  |   5 +-
 .../src/components/inline-input.stories.tsx   |  50 ---
 packages/ui/src/components/keybind.css        |  18 -
 .../ui/src/components/keybind.stories.tsx     |  43 ---
 packages/ui/src/components/keybind.tsx        |  20 --
 packages/ui/src/components/list.css           |  10 +-
 packages/ui/src/components/list.tsx           |   6 +-
 packages/ui/src/components/popover.tsx        |   5 +-
 .../ui/src/components/progress-circle.css     |  16 -
 .../components/progress-circle.stories.tsx    |  59 ----
 .../ui/src/components/progress-circle.tsx     |  64 ----
 packages/ui/src/components/radio-group.css    | 187 -----------
 .../ui/src/components/radio-group.stories.tsx |  92 ------
 packages/ui/src/components/radio-group.tsx    |  83 -----
 packages/ui/src/components/select.css         | 201 ------------
 packages/ui/src/components/select.stories.tsx | 113 -------
 packages/ui/src/components/select.tsx         | 174 ----------
 .../sticky-accordion-header.stories.tsx       |   2 +-
 .../components/sticky-accordion-header.tsx    |   2 +-
 packages/ui/src/components/switch.css         | 136 --------
 packages/ui/src/components/switch.stories.tsx |  68 ----
 packages/ui/src/components/switch.tsx         |  29 --
 packages/ui/src/components/tabs.stories.tsx   | 179 ----------
 packages/ui/src/components/tabs.tsx           | 126 -------
 packages/ui/src/components/tag.css            |  37 ---
 packages/ui/src/components/tag.stories.tsx    |  58 ----
 packages/ui/src/components/tag.tsx            |  22 --
 packages/ui/src/components/text-field.tsx     |  16 +-
 .../src/components/text-shimmer.stories.tsx   |  92 ------
 .../components/thinking-heading.stories.tsx   |   2 +-
 packages/ui/src/components/toast.css          | 236 --------------
 packages/ui/src/components/toast.stories.tsx  | 138 --------
 packages/ui/src/components/toast.tsx          | 187 -----------
 packages/ui/src/components/tooltip.css        |  74 -----
 .../ui/src/components/tooltip.stories.tsx     |  64 ----
 packages/ui/src/components/tooltip.tsx        | 163 ---------
 .../accordion}/accordion.css                  |   3 +-
 .../accordion/accordion.stories.tsx           | 105 ++++++
 .../accordion}/accordion.tsx                  |  28 +-
 .../avatar/avatar.css}                        |   0
 .../avatar/avatar.stories.tsx}                |   6 +-
 .../avatar}/avatar.tsx                        |   8 +-
 .../badge/badge.css}                          |  19 ++
 .../badge/badge.stories.tsx}                  |  26 +-
 .../badge/badge.tsx}                          |  10 +-
 .../diff-changes}/diff-changes.css            |  45 +--
 .../diff-changes/diff-changes.stories.tsx}    |  16 +-
 .../diff-changes/diff-changes.tsx}            |   9 +-
 .../keybind/keybind.css}                      |   0
 .../keybind/keybind.stories.tsx}              |  36 +-
 .../keybind/keybind.tsx}                      |   6 +-
 .../line-comment/line-comment.css}            |   0
 .../line-comment/line-comment.stories.tsx}    |  26 +-
 .../line-comment/line-comment.tsx}            |  30 +-
 .../project-avatar/project-avatar.css}        |   0
 .../project-avatar.stories.tsx}               |   6 +-
 .../project-avatar/project-avatar.tsx}        |   2 +-
 .../loader/loader.css}                        |   0
 .../loader/loader.stories.tsx}                |  16 +-
 .../loader/loader.tsx}                        |   4 +-
 .../progress-circle/progress-circle.css       |  28 ++
 .../progress-circle.stories.tsx               |  52 +++
 .../progress-circle/progress-circle.tsx       |  64 ++++
 .../toast-v2.css => feedback/toast/toast.css} |   0
 .../toast/toast.stories.tsx}                  |  42 +--
 .../toast-v2.tsx => feedback/toast/toast.tsx} | 116 +++----
 .../checkbox}/checkbox.css                    |   8 +-
 .../src/forms/checkbox/checkbox.stories.tsx   |  46 +++
 .../checkbox}/checkbox.tsx                    |  26 +-
 .../field-v2.css => forms/field/field.css}    |   0
 .../field/field.stories.tsx}                  |  28 +-
 .../field-v2.tsx => forms/field/field.tsx}    |  20 +-
 .../inline-input}/inline-input.css            |   0
 .../inline-input/inline-input.stories.tsx     |  27 ++
 .../inline-input}/inline-input.tsx            |   0
 .../radio-v2.css => forms/radio/radio.css}    |   0
 packages/ui/src/forms/radio/radio.stories.tsx |  92 ++++++
 .../radio-v2.tsx => forms/radio/radio.tsx}    |  50 +--
 .../select-v2.css => forms/select/select.css} |  10 +-
 .../select/select.stories.tsx}                |  64 +---
 .../select-v2.tsx => forms/select/select.tsx} |  70 ++--
 .../switch-v2.css => forms/switch/switch.css} | 110 +++++++
 .../switch/switch.stories.tsx}                |  23 +-
 packages/ui/src/forms/switch/switch.tsx       |  34 ++
 .../text-input/text-input.css}                |   0
 .../text-input/text-input.stories.tsx}        |  56 ++--
 .../text-input/text-input.tsx}                |   8 +-
 .../textarea/textarea.css}                    |   0
 .../textarea/textarea.stories.tsx}            |  48 +--
 .../textarea/textarea.tsx}                    |   6 +-
 .../icon/additional-icons.ts}                 |  76 +----
 packages/ui/src/icons/icon/icon.css           |   3 +
 packages/ui/src/icons/icon/icon.stories.tsx   |  82 +++++
 .../{v2/components => icons/icon}/icon.tsx    |  38 ++-
 .../divider/divider.css}                      |   0
 .../divider/divider.stories.tsx}              |  10 +-
 .../divider/divider.tsx}                      |   6 +-
 .../menu-v2.css => navigation/menu/menu.css}  | 121 +++++++
 .../ui/src/navigation/menu/menu.stories.tsx   | 242 ++++++++++++++
 .../menu-v2.tsx => navigation/menu/menu.tsx}  | 128 ++++++--
 .../segmented-control/segmented-control.css}  |   0
 .../segmented-control.stories.tsx             | 107 ++++++
 .../segmented-control/segmented-control.tsx}  |  17 +-
 .../tab-state-indicator.stories.tsx           |  20 ++
 .../tab-state-indicator.tsx                   |   0
 .../tabs/tabs-current.css}                    |  17 +-
 .../{components => navigation/tabs}/tabs.css  | 234 ++-----------
 .../tabs/tabs.stories.tsx}                    | 130 ++++----
 packages/ui/src/navigation/tabs/tabs.tsx      | 194 +++++++++++
 .../dialog/dialog.css}                        |   0
 .../dialog/dialog.stories.tsx}                | 150 ++++-----
 .../dialog/dialog.tsx}                        |  20 +-
 .../tooltip/tooltip.css}                      |  26 ++
 .../tooltip/tooltip.stories.tsx}              |  44 ++-
 .../tooltip/tooltip.tsx}                      |  27 +-
 .../file-tree-v2.css => styles/file-tree.css} |   0
 packages/ui/src/styles/index.css              |  24 +-
 .../{v2/styles => styles/tokens}/colors.css   |   0
 .../tailwind.css => styles/tokens/index.css}  |   0
 .../{v2/styles => styles/tokens}/theme.css    |   0
 .../text-shimmer}/text-shimmer.css            |   0
 .../text-shimmer/text-shimmer.stories.tsx}    |  20 +-
 .../text-shimmer}/text-shimmer.tsx            |   1 +
 .../typography/wordmark/wordmark.stories.tsx  |  16 +
 .../wordmark/wordmark.tsx}                    |   2 +-
 .../ui/src/v2/components/accordion-v2.css     | 139 --------
 .../v2/components/accordion-v2.stories.tsx    | 177 ----------
 .../ui/src/v2/components/accordion-v2.tsx     |  86 -----
 packages/ui/src/v2/components/avatar-v2.tsx   |  59 ----
 packages/ui/src/v2/components/checkbox-v2.css | 184 -----------
 .../src/v2/components/checkbox-v2.stories.tsx |  92 ------
 packages/ui/src/v2/components/checkbox-v2.tsx |  65 ----
 .../ui/src/v2/components/diff-changes-v2.css  |  26 --
 .../ui/src/v2/components/icon-button-v2.tsx   |  37 ---
 .../ui/src/v2/components/inline-input-v2.css  | 225 -------------
 .../v2/components/inline-input-v2.stories.tsx | 141 --------
 .../ui/src/v2/components/inline-input-v2.tsx  | 107 ------
 .../ui/src/v2/components/menu-v2.stories.tsx  | 216 ------------
 .../src/v2/components/progress-circle-v2.css  |  13 -
 .../src/v2/components/progress-circle-v2.tsx  |  52 ---
 .../ui/src/v2/components/radio-v2.stories.tsx |  92 ------
 .../segmented-control-v2.stories.tsx          | 107 ------
 packages/ui/src/v2/components/switch-v2.tsx   |  28 --
 packages/ui/src/v2/components/tabs-v2.tsx     | 149 ---------
 .../ui/src/v2/components/text-shimmer-v2.css  | 126 -------
 .../ui/src/v2/components/text-shimmer-v2.tsx  |  63 ----
 290 files changed, 3941 insertions(+), 10093 deletions(-)
 delete mode 100644 packages/app/src/components/dialog-select-file.tsx
 rename packages/ui/src/{v2/components/button-v2.css => actions/button/button.css} (100%)
 rename packages/ui/src/{v2/components/button-v2.stories.tsx => actions/button/button.stories.tsx} (76%)
 rename packages/ui/src/{v2/components/button-v2.tsx => actions/button/button.tsx} (75%)
 rename packages/ui/src/{v2/components/icon-button-v2.css => actions/icon-button/icon-button.css} (100%)
 rename packages/ui/src/{v2/components/icon-button-v2.stories.tsx => actions/icon-button/icon-button.stories.tsx} (71%)
 create mode 100644 packages/ui/src/actions/icon-button/icon-button.tsx
 rename packages/ui/src/{v2/components/split-button-v2.css => actions/split-button/split-button.css} (91%)
 create mode 100644 packages/ui/src/actions/split-button/split-button.stories.tsx
 rename packages/ui/src/{v2/components/split-button-v2.tsx => actions/split-button/split-button.tsx} (79%)
 delete mode 100644 packages/ui/src/components/accordion.stories.tsx
 delete mode 100644 packages/ui/src/components/avatar.css
 delete mode 100644 packages/ui/src/components/avatar.stories.tsx
 delete mode 100644 packages/ui/src/components/button.css
 delete mode 100644 packages/ui/src/components/button.stories.tsx
 delete mode 100644 packages/ui/src/components/button.tsx
 delete mode 100644 packages/ui/src/components/checkbox.stories.tsx
 delete mode 100644 packages/ui/src/components/dialog.css
 delete mode 100644 packages/ui/src/components/dialog.stories.tsx
 delete mode 100644 packages/ui/src/components/dialog.tsx
 delete mode 100644 packages/ui/src/components/diff-changes.stories.tsx
 delete mode 100644 packages/ui/src/components/diff-changes.tsx
 delete mode 100644 packages/ui/src/components/dropdown-menu.css
 delete mode 100644 packages/ui/src/components/dropdown-menu.stories.tsx
 delete mode 100644 packages/ui/src/components/dropdown-menu.tsx
 delete mode 100644 packages/ui/src/components/icon-button.css
 delete mode 100644 packages/ui/src/components/icon-button.stories.tsx
 delete mode 100644 packages/ui/src/components/icon-button.tsx
 delete mode 100644 packages/ui/src/components/icon.css
 delete mode 100644 packages/ui/src/components/icon.stories.tsx
 delete mode 100644 packages/ui/src/components/inline-input.stories.tsx
 delete mode 100644 packages/ui/src/components/keybind.css
 delete mode 100644 packages/ui/src/components/keybind.stories.tsx
 delete mode 100644 packages/ui/src/components/keybind.tsx
 delete mode 100644 packages/ui/src/components/progress-circle.css
 delete mode 100644 packages/ui/src/components/progress-circle.stories.tsx
 delete mode 100644 packages/ui/src/components/progress-circle.tsx
 delete mode 100644 packages/ui/src/components/radio-group.css
 delete mode 100644 packages/ui/src/components/radio-group.stories.tsx
 delete mode 100644 packages/ui/src/components/radio-group.tsx
 delete mode 100644 packages/ui/src/components/select.css
 delete mode 100644 packages/ui/src/components/select.stories.tsx
 delete mode 100644 packages/ui/src/components/select.tsx
 delete mode 100644 packages/ui/src/components/switch.css
 delete mode 100644 packages/ui/src/components/switch.stories.tsx
 delete mode 100644 packages/ui/src/components/switch.tsx
 delete mode 100644 packages/ui/src/components/tabs.stories.tsx
 delete mode 100644 packages/ui/src/components/tabs.tsx
 delete mode 100644 packages/ui/src/components/tag.css
 delete mode 100644 packages/ui/src/components/tag.stories.tsx
 delete mode 100644 packages/ui/src/components/tag.tsx
 delete mode 100644 packages/ui/src/components/text-shimmer.stories.tsx
 delete mode 100644 packages/ui/src/components/toast.css
 delete mode 100644 packages/ui/src/components/toast.stories.tsx
 delete mode 100644 packages/ui/src/components/toast.tsx
 delete mode 100644 packages/ui/src/components/tooltip.css
 delete mode 100644 packages/ui/src/components/tooltip.stories.tsx
 delete mode 100644 packages/ui/src/components/tooltip.tsx
 rename packages/ui/src/{components => data-display/accordion}/accordion.css (96%)
 create mode 100644 packages/ui/src/data-display/accordion/accordion.stories.tsx
 rename packages/ui/src/{components => data-display/accordion}/accordion.tsx (84%)
 rename packages/ui/src/{v2/components/avatar-v2.css => data-display/avatar/avatar.css} (100%)
 rename packages/ui/src/{v2/components/avatar-v2.stories.tsx => data-display/avatar/avatar.stories.tsx} (95%)
 rename packages/ui/src/{components => data-display/avatar}/avatar.tsx (89%)
 rename packages/ui/src/{v2/components/badge-v2.css => data-display/badge/badge.css} (56%)
 rename packages/ui/src/{v2/components/badge-v2.stories.tsx => data-display/badge/badge.stories.tsx} (62%)
 rename packages/ui/src/{v2/components/badge-v2.tsx => data-display/badge/badge.tsx} (62%)
 rename packages/ui/src/{components => data-display/diff-changes}/diff-changes.css (58%)
 rename packages/ui/src/{v2/components/diff-changes-v2.stories.tsx => data-display/diff-changes/diff-changes.stories.tsx} (71%)
 rename packages/ui/src/{v2/components/diff-changes-v2.tsx => data-display/diff-changes/diff-changes.tsx} (79%)
 rename packages/ui/src/{v2/components/keybind-v2.css => data-display/keybind/keybind.css} (100%)
 rename packages/ui/src/{v2/components/keybind-v2.stories.tsx => data-display/keybind/keybind.stories.tsx} (63%)
 rename packages/ui/src/{v2/components/keybind-v2.tsx => data-display/keybind/keybind.tsx} (81%)
 rename packages/ui/src/{v2/components/line-comment-v2.css => data-display/line-comment/line-comment.css} (100%)
 rename packages/ui/src/{v2/components/line-comment-v2.stories.tsx => data-display/line-comment/line-comment.stories.tsx} (68%)
 rename packages/ui/src/{v2/components/line-comment-v2.tsx => data-display/line-comment/line-comment.tsx} (90%)
 rename packages/ui/src/{v2/components/project-avatar-v2.css => data-display/project-avatar/project-avatar.css} (100%)
 rename packages/ui/src/{v2/components/project-avatar-v2.stories.tsx => data-display/project-avatar/project-avatar.stories.tsx} (95%)
 rename packages/ui/src/{v2/components/project-avatar-v2.tsx => data-display/project-avatar/project-avatar.tsx} (98%)
 rename packages/ui/src/{v2/components/loader-v2.css => feedback/loader/loader.css} (100%)
 rename packages/ui/src/{v2/components/loader-v2.stories.tsx => feedback/loader/loader.stories.tsx} (69%)
 rename packages/ui/src/{v2/components/loader-v2.tsx => feedback/loader/loader.tsx} (90%)
 create mode 100644 packages/ui/src/feedback/progress-circle/progress-circle.css
 create mode 100644 packages/ui/src/feedback/progress-circle/progress-circle.stories.tsx
 create mode 100644 packages/ui/src/feedback/progress-circle/progress-circle.tsx
 rename packages/ui/src/{v2/components/toast-v2.css => feedback/toast/toast.css} (100%)
 rename packages/ui/src/{v2/components/toast-v2.stories.tsx => feedback/toast/toast.stories.tsx} (88%)
 rename packages/ui/src/{v2/components/toast-v2.tsx => feedback/toast/toast.tsx} (71%)
 rename packages/ui/src/{components => forms/checkbox}/checkbox.css (94%)
 create mode 100644 packages/ui/src/forms/checkbox/checkbox.stories.tsx
 rename packages/ui/src/{components => forms/checkbox}/checkbox.tsx (58%)
 rename packages/ui/src/{v2/components/field-v2.css => forms/field/field.css} (100%)
 rename packages/ui/src/{v2/components/field-v2.stories.tsx => forms/field/field.stories.tsx} (80%)
 rename packages/ui/src/{v2/components/field-v2.tsx => forms/field/field.tsx} (93%)
 rename packages/ui/src/{components => forms/inline-input}/inline-input.css (100%)
 create mode 100644 packages/ui/src/forms/inline-input/inline-input.stories.tsx
 rename packages/ui/src/{components => forms/inline-input}/inline-input.tsx (100%)
 rename packages/ui/src/{v2/components/radio-v2.css => forms/radio/radio.css} (100%)
 create mode 100644 packages/ui/src/forms/radio/radio.stories.tsx
 rename packages/ui/src/{v2/components/radio-v2.tsx => forms/radio/radio.tsx} (56%)
 rename packages/ui/src/{v2/components/select-v2.css => forms/select/select.css} (97%)
 rename packages/ui/src/{v2/components/select-v2.stories.tsx => forms/select/select.stories.tsx} (66%)
 rename packages/ui/src/{v2/components/select-v2.tsx => forms/select/select.tsx} (78%)
 rename packages/ui/src/{v2/components/switch-v2.css => forms/switch/switch.css} (58%)
 rename packages/ui/src/{v2/components/switch-v2.stories.tsx => forms/switch/switch.stories.tsx} (68%)
 create mode 100644 packages/ui/src/forms/switch/switch.tsx
 rename packages/ui/src/{v2/components/text-input-v2.css => forms/text-input/text-input.css} (100%)
 rename packages/ui/src/{v2/components/text-input-v2.stories.tsx => forms/text-input/text-input.stories.tsx} (63%)
 rename packages/ui/src/{v2/components/text-input-v2.tsx => forms/text-input/text-input.tsx} (93%)
 rename packages/ui/src/{v2/components/textarea-v2.css => forms/textarea/textarea.css} (100%)
 rename packages/ui/src/{v2/components/textarea-v2.stories.tsx => forms/textarea/textarea.stories.tsx} (62%)
 rename packages/ui/src/{v2/components/textarea-v2.tsx => forms/textarea/textarea.tsx} (83%)
 rename packages/ui/src/{components/icon.tsx => icons/icon/additional-icons.ts} (95%)
 create mode 100644 packages/ui/src/icons/icon/icon.css
 create mode 100644 packages/ui/src/icons/icon/icon.stories.tsx
 rename packages/ui/src/{v2/components => icons/icon}/icon.tsx (92%)
 rename packages/ui/src/{v2/components/divider-v2.css => layout/divider/divider.css} (100%)
 rename packages/ui/src/{v2/components/divider-v2.stories.tsx => layout/divider/divider.stories.tsx} (81%)
 rename packages/ui/src/{v2/components/divider-v2.tsx => layout/divider/divider.tsx} (72%)
 rename packages/ui/src/{v2/components/menu-v2.css => navigation/menu/menu.css} (60%)
 create mode 100644 packages/ui/src/navigation/menu/menu.stories.tsx
 rename packages/ui/src/{v2/components/menu-v2.tsx => navigation/menu/menu.tsx} (56%)
 rename packages/ui/src/{v2/components/segmented-control-v2.css => navigation/segmented-control/segmented-control.css} (100%)
 create mode 100644 packages/ui/src/navigation/segmented-control/segmented-control.stories.tsx
 rename packages/ui/src/{v2/components/segmented-control-v2.tsx => navigation/segmented-control/segmented-control.tsx} (90%)
 create mode 100644 packages/ui/src/navigation/tab-state-indicator.stories.tsx
 rename packages/ui/src/{v2/components => navigation}/tab-state-indicator.tsx (100%)
 rename packages/ui/src/{v2/components/tabs-v2.css => navigation/tabs/tabs-current.css} (94%)
 rename packages/ui/src/{components => navigation/tabs}/tabs.css (76%)
 rename packages/ui/src/{v2/components/tabs-v2.stories.tsx => navigation/tabs/tabs.stories.tsx} (65%)
 create mode 100644 packages/ui/src/navigation/tabs/tabs.tsx
 rename packages/ui/src/{v2/components/dialog-v2.css => overlays/dialog/dialog.css} (100%)
 rename packages/ui/src/{v2/components/dialog-v2.stories.tsx => overlays/dialog/dialog.stories.tsx} (55%)
 rename packages/ui/src/{v2/components/dialog-v2.tsx => overlays/dialog/dialog.tsx} (83%)
 rename packages/ui/src/{v2/components/tooltip-v2.css => overlays/tooltip/tooltip.css} (63%)
 rename packages/ui/src/{v2/components/tooltip-v2.stories.tsx => overlays/tooltip/tooltip.stories.tsx} (67%)
 rename packages/ui/src/{v2/components/tooltip-v2.tsx => overlays/tooltip/tooltip.tsx} (88%)
 rename packages/ui/src/{v2/components/file-tree-v2.css => styles/file-tree.css} (100%)
 rename packages/ui/src/{v2/styles => styles/tokens}/colors.css (100%)
 rename packages/ui/src/{v2/styles/tailwind.css => styles/tokens/index.css} (100%)
 rename packages/ui/src/{v2/styles => styles/tokens}/theme.css (100%)
 rename packages/ui/src/{components => typography/text-shimmer}/text-shimmer.css (100%)
 rename packages/ui/src/{v2/components/text-shimmer-v2.stories.tsx => typography/text-shimmer/text-shimmer.stories.tsx} (68%)
 rename packages/ui/src/{components => typography/text-shimmer}/text-shimmer.tsx (98%)
 create mode 100644 packages/ui/src/typography/wordmark/wordmark.stories.tsx
 rename packages/ui/src/{v2/components/wordmark-v2.tsx => typography/wordmark/wordmark.tsx} (97%)
 delete mode 100644 packages/ui/src/v2/components/accordion-v2.css
 delete mode 100644 packages/ui/src/v2/components/accordion-v2.stories.tsx
 delete mode 100644 packages/ui/src/v2/components/accordion-v2.tsx
 delete mode 100644 packages/ui/src/v2/components/avatar-v2.tsx
 delete mode 100644 packages/ui/src/v2/components/checkbox-v2.css
 delete mode 100644 packages/ui/src/v2/components/checkbox-v2.stories.tsx
 delete mode 100644 packages/ui/src/v2/components/checkbox-v2.tsx
 delete mode 100644 packages/ui/src/v2/components/diff-changes-v2.css
 delete mode 100644 packages/ui/src/v2/components/icon-button-v2.tsx
 delete mode 100644 packages/ui/src/v2/components/inline-input-v2.css
 delete mode 100644 packages/ui/src/v2/components/inline-input-v2.stories.tsx
 delete mode 100644 packages/ui/src/v2/components/inline-input-v2.tsx
 delete mode 100644 packages/ui/src/v2/components/menu-v2.stories.tsx
 delete mode 100644 packages/ui/src/v2/components/progress-circle-v2.css
 delete mode 100644 packages/ui/src/v2/components/progress-circle-v2.tsx
 delete mode 100644 packages/ui/src/v2/components/radio-v2.stories.tsx
 delete mode 100644 packages/ui/src/v2/components/segmented-control-v2.stories.tsx
 delete mode 100644 packages/ui/src/v2/components/switch-v2.tsx
 delete mode 100644 packages/ui/src/v2/components/tabs-v2.tsx
 delete mode 100644 packages/ui/src/v2/components/text-shimmer-v2.css
 delete mode 100644 packages/ui/src/v2/components/text-shimmer-v2.tsx

diff --git a/packages/app/e2e/performance/timeline/session-tab-switch-probe.ts b/packages/app/e2e/performance/timeline/session-tab-switch-probe.ts
index 955da80367d..5dcfc3ac6b3 100644
--- a/packages/app/e2e/performance/timeline/session-tab-switch-probe.ts
+++ b/packages/app/e2e/performance/timeline/session-tab-switch-probe.ts
@@ -25,7 +25,7 @@ async function installSessionSwitchProbe(
     let running = true
     const reviewLevels: Record<string, string> = {
       panel: "#review-panel",
-      tabs: '#review-panel [data-component="tabs"]',
+    tabs: '#review-panel [data-component="tabs"]',
       body: '#review-panel [data-slot="session-review-v2-body"]',
       review: '#review-panel [data-component="session-review-v2"]',
       preview: '#review-panel [data-slot="session-review-v2-preview"]',
diff --git a/packages/app/e2e/regression/session-request-docks.spec.ts b/packages/app/e2e/regression/session-request-docks.spec.ts
index 356c0b7d466..b15dfb7a3e9 100644
--- a/packages/app/e2e/regression/session-request-docks.spec.ts
+++ b/packages/app/e2e/regression/session-request-docks.spec.ts
@@ -52,7 +52,7 @@ test("shows a pending question dock", async ({ page }) => {
       rejectRequests.push(request.url())
   })
 
-  await question.locator('[data-component="icon-button"][data-icon="chevron-down"]').click()
+  await question.getByRole("button", { name: "Minimize question" }).click()
   await expect(question).toBeVisible()
   await expect(question.getByText("Which implementation should be used?")).toBeVisible()
   await expect(question.getByText("Select one answer")).toBeHidden()
@@ -63,7 +63,7 @@ test("shows a pending question dock", async ({ page }) => {
   await expect(page.locator('[data-component="question-minimized-dock"]')).toHaveCount(0)
   expect(rejectRequests).toEqual([])
 
-  await question.locator('[data-component="icon-button"][data-icon="chevron-down"]').click()
+  await question.getByRole("button", { name: "Restore question" }).click()
   await expect(question).toBeVisible()
   await expect(question.getByText("Which implementation should be used?")).toBeVisible()
   await expect(question.getByRole("radio", { name: /Minimal/ })).toBeVisible()
diff --git a/packages/app/e2e/regression/session-timeline-tool-projection.spec.ts b/packages/app/e2e/regression/session-timeline-tool-projection.spec.ts
index 85485acbfeb..d7c44d96f17 100644
--- a/packages/app/e2e/regression/session-timeline-tool-projection.spec.ts
+++ b/packages/app/e2e/regression/session-timeline-tool-projection.spec.ts
@@ -131,15 +131,14 @@ test("labels V2 skill tools from IDs and result metadata", async ({ page }) => {
     "aria-label",
     "sample-skill",
   )
-  await expect(page.locator(`[data-timeline-part-id="${completed}"] [data-component="text-shimmer"]`)).toHaveAttribute(
-    "aria-label",
-    "OpenCode",
-  )
+  await expect(
+    page.locator(`[data-timeline-part-id="${completed}"] [data-component="text-shimmer"]`),
+  ).toHaveAttribute("aria-label", "OpenCode")
   for (const id of [pending, completed]) {
     const skill = page.locator(`[data-timeline-part-id="${id}"]`)
     await expect(skill.locator('[data-slot="skill-tool-label"]')).toHaveText("Skill")
     await expect(skill.locator('[data-slot="skill-tool-separator"]')).toHaveText("·")
-    await expect(skill.locator('use[href="#opencode-icon-post-skill"]')).toBeVisible()
+    await expect(skill.locator('use[href="#opencode-v2-icon-post-skill"]')).toBeVisible()
   }
 })
 
diff --git a/packages/app/e2e/smoke/session-timeline.spec.ts b/packages/app/e2e/smoke/session-timeline.spec.ts
index f4371a305da..d0fb0922f4f 100644
--- a/packages/app/e2e/smoke/session-timeline.spec.ts
+++ b/packages/app/e2e/smoke/session-timeline.spec.ts
@@ -477,7 +477,7 @@ async function configureSmokePage(page: Page, directory: string) {
     }
     let recordFrame: number | undefined
     const record = () => {
-      for (const toast of document.querySelectorAll<HTMLElement>('[data-component="toast"][data-variant="error"]')) {
+      for (const toast of document.querySelectorAll<HTMLElement>(".toast-v2--error")) {
         const text = toast.textContent?.trim()
         if (text && !smoke.__timelineSmokeErrorToasts!.includes(text)) smoke.__timelineSmokeErrorToasts!.push(text)
       }
diff --git a/packages/app/src/components/debug-bar.tsx b/packages/app/src/components/debug-bar.tsx
index 67cd0da0e92..94447b14608 100644
--- a/packages/app/src/components/debug-bar.tsx
+++ b/packages/app/src/components/debug-bar.tsx
@@ -3,7 +3,6 @@ import { batch, createEffect, onCleanup, onMount, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 
@@ -102,16 +101,8 @@ function Cell(props: {
     </div>
   )
 
-  if (props.inline) {
-    return (
-      <TooltipV2 value={props.tip} placement="top">
-        {content()}
-      </TooltipV2>
-    )
-  }
-
   return (
-    <Tooltip value={props.tip} placement="top">
+    <Tooltip appearance={props.inline ? "compact" : "standard"} value={props.tip} placement="top">
       {content()}
     </Tooltip>
   )
@@ -151,16 +142,8 @@ function ToggleCell(props: {
     </button>
   )
 
-  if (props.inline) {
-    return (
-      <TooltipV2 value={props.tip} placement="top">
-        {content()}
-      </TooltipV2>
-    )
-  }
-
   return (
-    <Tooltip value={props.tip} placement="top">
+    <Tooltip appearance={props.inline ? "compact" : "standard"} value={props.tip} placement="top">
       {content()}
     </Tooltip>
   )
diff --git a/packages/app/src/components/dialog-command-palette-v2.tsx b/packages/app/src/components/dialog-command-palette-v2.tsx
index 2756c2094dd..e2b11699f2f 100644
--- a/packages/app/src/components/dialog-command-palette-v2.tsx
+++ b/packages/app/src/components/dialog-command-palette-v2.tsx
@@ -1,10 +1,10 @@
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { Dialog, DialogBody } from "@opencode-ai/ui/v2/dialog-v2"
-import { Icon } from "@opencode-ai/ui/v2/icon"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Dialog, DialogBody } from "@opencode-ai/ui/dialog"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, Show, Switch } from "solid-js"
 import { commandPaletteOptions, formatKeybindParts, useCommand } from "@/context/command"
@@ -191,7 +191,7 @@ function CommandPaletteView(props: {
     <Dialog class="command-palette-v2" size="large">
       <DialogBody class="command-palette-v2-body">
         <div class="command-palette-v2-search">
-          <TextInputV2
+          <TextInput
             value={query()}
             autofocus
             autocomplete="off"
@@ -295,7 +295,7 @@ function PaletteRow(props: {
             </div>
           </div>
           <Show when={props.item.keybind}>
-            <KeybindV2 keys={formatKeybindParts(props.item.keybind ?? "", props.language.t)} variant="neutral" />
+            <Keybind keys={formatKeybindParts(props.item.keybind ?? "", props.language.t)} variant="neutral" />
           </Show>
         </Match>
         <Match when={props.item.type === "session"}>
diff --git a/packages/app/src/components/dialog-connect-provider.stories.tsx b/packages/app/src/components/dialog-connect-provider.stories.tsx
index 3aec6c9de33..3247ee2bf64 100644
--- a/packages/app/src/components/dialog-connect-provider.stories.tsx
+++ b/packages/app/src/components/dialog-connect-provider.stories.tsx
@@ -13,7 +13,7 @@ function ConnectProviderDialogStory() {
   onMount(open)
 
   return (
-    <Button variant="secondary" onClick={open}>
+    <Button variant="neutral" onClick={open}>
       Open connect provider dialog
     </Button>
   )
@@ -29,7 +29,7 @@ function ProviderConnectionDialogStory(props) {
   onMount(open)
 
   return (
-    <Button variant="secondary" onClick={open}>
+    <Button variant="neutral" onClick={open}>
       Open {props.provider} connection dialog
     </Button>
   )
diff --git a/packages/app/src/components/dialog-connect-provider.tsx b/packages/app/src/components/dialog-connect-provider.tsx
index 71833be4a5d..3e7bcff6307 100644
--- a/packages/app/src/components/dialog-connect-provider.tsx
+++ b/packages/app/src/components/dialog-connect-provider.tsx
@@ -5,9 +5,8 @@ import { List } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { DialogBody, DialogHeader, DialogTitle, Dialog } from "@opencode-ai/ui/dialog"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { showToast } from "@/utils/toast"
 import { type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
@@ -75,7 +74,7 @@ export const DialogConnectProvider: Component<{
   }
 
   return (
-    <DialogV2
+    <Dialog
       containerClass="!h-[min(calc(100vh_-_16px),512px)] !w-[min(calc(100vw_-_16px),640px)]"
       class="[font-family:var(--v2-font-family-sans)] [&_[data-slot=dialog-header]]:!px-5 [&_[data-slot=dialog-header-title]]:!text-[15px] [&_[data-slot=dialog-header-title]]:!tracking-[-0.13px]"
     >
@@ -99,7 +98,7 @@ export const DialogConnectProvider: Component<{
           <Content />
         </div>
       </DialogBody>
-    </DialogV2>
+    </Dialog>
   )
 }
 
@@ -168,7 +167,7 @@ function ProviderPicker(props: { directory?: string; onSelect: (provider: string
   return (
     <div ref={picker} class="flex min-h-0 flex-1 flex-col gap-4" onKeyDown={handleKeyDown}>
       <div class="shrink-0 px-1 pt-px">
-        <TextInputV2
+        <TextInput
           ref={search}
           type="search"
           class="!w-full [font-family:var(--v2-font-family-sans)]"
@@ -379,7 +378,7 @@ function ProviderConnection(props: {
                 setFormStore("value", field.key, value)
               }}
             />
-            <Button class="w-auto" type="submit" size="large" variant="primary" disabled={!valid()}>
+            <Button class="w-auto" type="submit" size="large" variant="contrast" disabled={!valid()}>
               {language.t("common.continue")}
             </Button>
           </Match>
@@ -516,7 +515,7 @@ function ProviderConnection(props: {
         <form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
           <label class="flex w-full flex-col gap-1 font-[530] leading-4 text-v2-text-text-base">
             {language.t("provider.connect.apiKey.label", { provider: provider().name })}
-            <TextInputV2
+            <TextInput
               ref={apiKey}
               class="!w-full"
               name="apiKey"
@@ -537,9 +536,9 @@ function ProviderConnection(props: {
               </div>
             )}
           </Show>
-          <ButtonV2 type="submit" variant="contrast" data-action="provider-connect-submit">
+          <Button type="submit" variant="contrast" data-action="provider-connect-submit">
             {language.t("common.continue")}
-          </ButtonV2>
+          </Button>
         </form>
       </div>
     )
@@ -585,7 +584,7 @@ function ProviderConnection(props: {
         <form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
           <label class="flex w-full flex-col gap-1 font-[530] leading-4 text-v2-text-text-base">
             {language.t("provider.connect.oauth.code.label", { method: controller.currentMethod()?.label ?? "" })}
-            <TextInputV2
+            <TextInput
               ref={codeInput}
               class="!w-full"
               name="code"
@@ -605,9 +604,9 @@ function ProviderConnection(props: {
               </div>
             )}
           </Show>
-          <ButtonV2 type="submit" variant="contrast">
+          <Button type="submit" variant="contrast">
             {language.t("common.continue")}
-          </ButtonV2>
+          </Button>
         </form>
       </div>
     )
diff --git a/packages/app/src/components/dialog-custom-provider.tsx b/packages/app/src/components/dialog-custom-provider.tsx
index 4adc8d37f7b..e14995c0dd3 100644
--- a/packages/app/src/components/dialog-custom-provider.tsx
+++ b/packages/app/src/components/dialog-custom-provider.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog } from "@opencode-ai/ui/dialog"
+import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
+import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { useMutation } from "@tanstack/solid-query"
@@ -21,20 +22,21 @@ export function DialogCustomProvider(props: Props) {
   const language = useLanguage()
 
   return (
-    <Dialog
-      class="h-full"
-      title={
-        <IconButton
-          tabIndex={-1}
-          icon="arrow-left"
-          variant="ghost"
-          onClick={props.onBack}
-          aria-label={language.t("common.goBack")}
-        />
-      }
-      transition
-    >
-      <CustomProviderForm />
+    <Dialog class="h-full">
+      <DialogHeader>
+        <DialogTitle>
+          <IconButton
+            tabIndex={-1}
+            icon={<Icon name="arrow-left" />}
+            variant="ghost"
+            onClick={props.onBack}
+            aria-label={language.t("common.goBack")}
+          />
+        </DialogTitle>
+      </DialogHeader>
+      <DialogBody>
+        <CustomProviderForm />
+      </DialogBody>
     </Dialog>
   )
 }
@@ -238,7 +240,7 @@ export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
                 </div>
                 <IconButton
                   type="button"
-                  icon="trash"
+                  icon={<Icon name="trash" />}
                   variant="ghost"
                   class="mt-1.5"
                   onClick={() => removeModel(i())}
@@ -282,7 +284,7 @@ export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
                 </div>
                 <IconButton
                   type="button"
-                  icon="trash"
+                  icon={<Icon name="trash" />}
                   variant="ghost"
                   class="mt-1.5"
                   onClick={() => removeHeader(i())}
@@ -301,7 +303,7 @@ export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
           class="w-auto self-start"
           type="submit"
           size="large"
-          variant="primary"
+          variant="contrast"
           disabled={saveMutation.isPending}
         >
           {saveMutation.isPending ? language.t("common.saving") : language.t("common.submit")}
diff --git a/packages/app/src/components/dialog-edit-project-v2.tsx b/packages/app/src/components/dialog-edit-project-v2.tsx
index fc5d958c5f0..2bcb518d435 100644
--- a/packages/app/src/components/dialog-edit-project-v2.tsx
+++ b/packages/app/src/components/dialog-edit-project-v2.tsx
@@ -1,12 +1,11 @@
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
-import { Field } from "@opencode-ai/ui/v2/field-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { Button } from "@opencode-ai/ui/button"
+import { Dialog, DialogFooter } from "@opencode-ai/ui/dialog"
+import { Field } from "@opencode-ai/ui/field"
 import { Icon } from "@opencode-ai/ui/icon"
-import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "@opencode-ai/ui/v2/project-avatar-v2"
-import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
-import { TextareaV2 } from "@opencode-ai/ui/v2/textarea-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "@opencode-ai/ui/project-avatar"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { Textarea } from "@opencode-ai/ui/textarea"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { For, Show, createSignal, startTransition } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
@@ -37,46 +36,46 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
 
   const Footer = () => (
     <DialogFooter>
-      <ButtonV2 type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
+      <Button type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
         {language.t("common.cancel")}
-      </ButtonV2>
-      <ButtonV2 type="submit" variant="contrast" disabled={!model.supported || model.save.isPending}>
+      </Button>
+      <Button type="submit" variant="contrast" disabled={!model.supported || model.save.isPending}>
         {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
-      </ButtonV2>
+      </Button>
     </DialogFooter>
   )
 
   return (
     <Dialog size="x-large" variant="settings" class="project-settings-v2-dialog">
-      <TabsV2
+      <Tabs
         orientation="vertical"
         variant="settings"
         value={tab()}
         onChange={(value) => void startTransition(() => setTab(value))}
         class="project-settings-v2"
       >
-        <TabsV2.List>
+        <Tabs.List>
           <div class="project-settings-v2-nav">
-            <TabsV2.Trigger value="general">
+            <Tabs.Trigger value="general">
               <ProjectAvatar
                 fallback={projectName()}
                 variant={getProjectAvatarVariant(props.project.icon?.color)}
                 class="!size-4 shrink-0"
               />
               <span class="truncate">{projectName()}</span>
-            </TabsV2.Trigger>
-            <TabsV2.Trigger value="scripts">
+            </Tabs.Trigger>
+            <Tabs.Trigger value="scripts">
               <Icon name="code" size="small" />
               {language.t("project.settings.scripts")}
-            </TabsV2.Trigger>
-            <TabsV2.Trigger value="extensions">
+            </Tabs.Trigger>
+            <Tabs.Trigger value="extensions">
               <Icon name="extensions" size="small" />
               {language.t("settings.tab.extensions")}
-            </TabsV2.Trigger>
+            </Tabs.Trigger>
           </div>
-        </TabsV2.List>
+        </Tabs.List>
 
-        <TabsV2.Content value="general" class="project-settings-v2-panel">
+        <Tabs.Content value="general" class="project-settings-v2-panel">
           <form onSubmit={model.submit} class="project-settings-v2-form">
             <div class="project-settings-v2-scroll">
               <div class="project-settings-page-header">
@@ -86,7 +85,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
 
               <Field>
                 <Field.Label>{language.t("dialog.project.edit.name")}</Field.Label>
-                <TextInputV2
+                <TextInput
                   autofocus
                   appearance="large"
                   class="!w-full"
@@ -132,7 +131,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
                         "opacity-0": !model.store.iconHover,
                       }}
                     >
-                      <IconV2 name={model.store.iconOverride ? "close" : "share"} />
+                      <Icon name={model.store.iconOverride ? "close" : "share"} />
                     </span>
                   </button>
                   <input
@@ -188,9 +187,9 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
             </div>
             <Footer />
           </form>
-        </TabsV2.Content>
+        </Tabs.Content>
 
-        <TabsV2.Content value="scripts" class="project-settings-v2-panel">
+        <Tabs.Content value="scripts" class="project-settings-v2-panel">
           <form onSubmit={model.submit} class="project-settings-v2-form">
             <div class="project-settings-v2-scroll">
               <div class="project-settings-page-header">
@@ -200,7 +199,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
               <Field>
                 <Field.Label>{language.t("dialog.project.edit.worktree.startup")}</Field.Label>
                 <Field.Prefix>{language.t("dialog.project.edit.worktree.startup.description")}</Field.Prefix>
-                <TextareaV2
+                <Textarea
                   class="!w-full [&_[data-slot=textarea-v2-textarea]]:font-mono"
                   rows={5}
                   value={model.store.startup}
@@ -212,12 +211,12 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
             </div>
             <Footer />
           </form>
-        </TabsV2.Content>
+        </Tabs.Content>
 
-        <TabsV2.Content value="extensions" class="project-settings-v2-panel">
+        <Tabs.Content value="extensions" class="project-settings-v2-panel">
           <ProjectSettingsExtensions />
-        </TabsV2.Content>
-      </TabsV2>
+        </Tabs.Content>
+      </Tabs>
     </Dialog>
   )
 }
diff --git a/packages/app/src/components/dialog-fork.tsx b/packages/app/src/components/dialog-fork.tsx
index 2823db5e0f5..4f7e0f290a0 100644
--- a/packages/app/src/components/dialog-fork.tsx
+++ b/packages/app/src/components/dialog-fork.tsx
@@ -3,7 +3,7 @@ import { useNavigate, useParams } from "@solidjs/router"
 import { useData } from "@/context/server"
 import { usePrompt } from "@/context/prompt"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog } from "@opencode-ai/ui/dialog"
+import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { showToast } from "@/utils/toast"
 import { useLanguage } from "@/context/language"
@@ -94,23 +94,28 @@ export const DialogFork: Component = () => {
   }
 
   return (
-    <Dialog title={language.t("command.session.fork")}>
-      <List
-        class="flex-1 px-3 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0"
-        search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
-        emptyMessage={language.t("dialog.fork.empty")}
-        key={(x) => x.id}
-        items={messages}
-        filterKeys={["text"]}
-        onSelect={handleSelect}
-      >
-        {(item) => (
-          <div class="w-full flex items-center gap-2">
-            <span class="truncate flex-1 min-w-0 text-left font-normal">{item.text}</span>
-            <span class="text-text-weak shrink-0 font-normal">{item.time}</span>
-          </div>
-        )}
-      </List>
+    <Dialog>
+      <DialogHeader>
+        <DialogTitle>{language.t("command.session.fork")}</DialogTitle>
+      </DialogHeader>
+      <DialogBody>
+        <List
+          class="flex-1 px-3 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0"
+          search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
+          emptyMessage={language.t("dialog.fork.empty")}
+          key={(x) => x.id}
+          items={messages}
+          filterKeys={["text"]}
+          onSelect={handleSelect}
+        >
+          {(item) => (
+            <div class="w-full flex items-center gap-2">
+              <span class="truncate flex-1 min-w-0 text-left font-normal">{item.text}</span>
+              <span class="text-text-weak shrink-0 font-normal">{item.time}</span>
+            </div>
+          )}
+        </List>
+      </DialogBody>
     </Dialog>
   )
 }
diff --git a/packages/app/src/components/dialog-manage-models.tsx b/packages/app/src/components/dialog-manage-models.tsx
index 660d5d4f217..398005d6196 100644
--- a/packages/app/src/components/dialog-manage-models.tsx
+++ b/packages/app/src/components/dialog-manage-models.tsx
@@ -1,15 +1,12 @@
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { List } from "@opencode-ai/ui/list"
-import { Switch } from "@opencode-ai/ui/switch"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Button } from "@opencode-ai/ui/button"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog as DialogV2, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/v2/dialog-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
-import { Switch as SwitchV2 } from "@opencode-ai/ui/v2/switch-v2"
+import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { List } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Switch } from "@opencode-ai/ui/switch"
+import { TextInput } from "@opencode-ai/ui/text-input"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { For, Show, type Component } from "solid-js"
 import { useLocal } from "@/context/local"
@@ -44,74 +41,80 @@ export const DialogManageModels: Component = () => {
   }
 
   return (
-    <Dialog
-      title={language.t("dialog.model.manage")}
-      description={language.t("dialog.model.manage.description")}
-      action={
+    <Dialog>
+      <DialogHeader hideClose>
+        <DialogTitleGroup
+          title={language.t("dialog.model.manage")}
+          description={language.t("dialog.model.manage.description")}
+        />
         <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={handleConnectProvider}>
           {language.t("command.provider.connect")}
         </Button>
-      }
-    >
-      <List
-        class="px-3"
-        search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true }}
-        emptyMessage={language.t("dialog.model.empty")}
-        key={(x) => `${x?.provider?.id}:${x?.id}`}
-        items={local.model.list()}
-        filterKeys={["provider.name", "name", "id"]}
-        sortBy={(a, b) => a.name.localeCompare(b.name)}
-        groupBy={(x) => x.provider.id}
-        groupHeader={(group) => {
-          const provider = group.items[0].provider
-          return (
-            <>
-              <span>{provider.name}</span>
-              <Tooltip
-                placement="top"
-                value={language.t("dialog.model.manage.provider.toggle", { provider: provider.name })}
-              >
-                <Switch
-                  class="-mr-1"
-                  checked={providerVisible(provider.id)}
-                  onChange={(checked) => setProviderVisibility(provider.id, checked)}
-                  hideLabel
+      </DialogHeader>
+      <DialogBody>
+        <List
+          class="px-3"
+          search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true }}
+          emptyMessage={language.t("dialog.model.empty")}
+          key={(x) => `${x?.provider?.id}:${x?.id}`}
+          items={local.model.list()}
+          filterKeys={["provider.name", "name", "id"]}
+          sortBy={(a, b) => a.name.localeCompare(b.name)}
+          groupBy={(x) => x.provider.id}
+          groupHeader={(group) => {
+            const provider = group.items[0].provider
+            return (
+              <>
+                <span>{provider.name}</span>
+                <Tooltip
+                  appearance="standard"
+                  placement="top"
+                  value={language.t("dialog.model.manage.provider.toggle", { provider: provider.name })}
                 >
-                  {provider.name}
-                </Switch>
-              </Tooltip>
-            </>
-          )
-        }}
-        sortGroupsBy={(a, b) => {
-          const aRank = providerRank(a.items[0].provider.id)
-          const bRank = providerRank(b.items[0].provider.id)
-          const aPopular = aRank >= 0
-          const bPopular = bRank >= 0
-          if (aPopular && !bPopular) return -1
-          if (!aPopular && bPopular) return 1
-          return aRank - bRank
-        }}
-        onSelect={(x) => {
-          if (!x) return
-          const key = { modelID: x.id, providerID: x.provider.id }
-          local.model.setVisibility(key, !local.model.visible(key))
-        }}
-      >
-        {(i) => (
-          <div class="w-full flex items-center justify-between gap-x-3">
-            <span>{i.name}</span>
-            <div onClick={(e) => e.stopPropagation()}>
-              <Switch
-                checked={!!local.model.visible({ modelID: i.id, providerID: i.provider.id })}
-                onChange={(checked) => {
-                  local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
-                }}
-              />
+                  <Switch
+                    appearance="standard"
+                    class="-mr-1"
+                    checked={providerVisible(provider.id)}
+                    onChange={(checked) => setProviderVisibility(provider.id, checked)}
+                    hideLabel
+                  >
+                    {provider.name}
+                  </Switch>
+                </Tooltip>
+              </>
+            )
+          }}
+          sortGroupsBy={(a, b) => {
+            const aRank = providerRank(a.items[0].provider.id)
+            const bRank = providerRank(b.items[0].provider.id)
+            const aPopular = aRank >= 0
+            const bPopular = bRank >= 0
+            if (aPopular && !bPopular) return -1
+            if (!aPopular && bPopular) return 1
+            return aRank - bRank
+          }}
+          onSelect={(x) => {
+            if (!x) return
+            const key = { modelID: x.id, providerID: x.provider.id }
+            local.model.setVisibility(key, !local.model.visible(key))
+          }}
+        >
+          {(i) => (
+            <div class="w-full flex items-center justify-between gap-x-3">
+              <span>{i.name}</span>
+              <div onClick={(e) => e.stopPropagation()}>
+                <Switch
+                  appearance="standard"
+                  checked={!!local.model.visible({ modelID: i.id, providerID: i.provider.id })}
+                  onChange={(checked) => {
+                    local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
+                  }}
+                />
+              </div>
             </div>
-          </div>
-        )}
-      </List>
+          )}
+        </List>
+      </DialogBody>
     </Dialog>
   )
 }
@@ -154,20 +157,20 @@ export const DialogManageModelsV2: Component = () => {
   })
 
   return (
-    <DialogV2 size="large" variant="settings" class="settings-v2-manage-models-dialog">
+    <Dialog size="large" variant="settings" class="settings-v2-manage-models-dialog">
       <DialogHeader hideClose={true} closeLabel={language.t("common.close")}>
         <DialogTitleGroup
           title={language.t("dialog.model.manage")}
           description={language.t("dialog.model.manage.description")}
         />
-        <ButtonV2 variant="neutral" icon="plus" onClick={handleConnectProvider}>
+        <Button variant="neutral" icon="plus" onClick={handleConnectProvider}>
           {language.t("command.provider.connect")}
-        </ButtonV2>
+        </Button>
       </DialogHeader>
       <DialogBody class="flex min-h-0 flex-1 flex-col">
         <div class="px-4 pt-px pb-3">
           <div class="relative">
-            <TextInputV2
+            <TextInput
               type="search"
               appearance="base"
               class="!w-full self-stretch"
@@ -182,12 +185,12 @@ export const DialogManageModelsV2: Component = () => {
               aria-label={language.t("dialog.model.search.placeholder")}
             />
             <Show when={list.filter()}>
-              <IconButtonV2
+              <IconButton
                 type="button"
                 variant="ghost-muted"
                 size="small"
                 class="settings-v2-tab-search-clear"
-                icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+                icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
                 onClick={() => list.clear()}
                 aria-label={language.t("common.clear")}
               />
@@ -225,14 +228,14 @@ export const DialogManageModelsV2: Component = () => {
                           <h3 class="settings-v2-section-title">{group.items[0].provider.name}</h3>
                         </div>
                         <div>
-                          <SwitchV2
+                          <Switch
                             class="mr-6"
                             checked={providerVisible(group.category)}
                             onChange={(checked) => setProviderVisibility(group.category, checked)}
                             hideLabel
                           >
                             {group.items[0].provider.name}
-                          </SwitchV2>
+                          </Switch>
                         </div>
                       </div>
                       <SettingsListV2>
@@ -240,13 +243,13 @@ export const DialogManageModelsV2: Component = () => {
                           {(item) => (
                             <SettingsRowV2 title={item.name} description="">
                               <div>
-                                <SwitchV2
+                                <Switch
                                   checked={local.model.visible({ modelID: item.id, providerID: item.provider.id })}
                                   onChange={(checked) => setModelVisibility(item, checked)}
                                   hideLabel
                                 >
                                   {item.name}
-                                </SwitchV2>
+                                </Switch>
                               </div>
                             </SettingsRowV2>
                           )}
@@ -260,6 +263,6 @@ export const DialogManageModelsV2: Component = () => {
           </div>
         </div>
       </DialogBody>
-    </DialogV2>
+    </Dialog>
   )
 }
diff --git a/packages/app/src/components/dialog-release-notes.tsx b/packages/app/src/components/dialog-release-notes.tsx
index 3827b9e9e7b..2bd390e4da7 100644
--- a/packages/app/src/components/dialog-release-notes.tsx
+++ b/packages/app/src/components/dialog-release-notes.tsx
@@ -86,12 +86,12 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
               <Show
                 when={isLast()}
                 fallback={
-                  <Button variant="secondary" size="large" onClick={handleNext}>
+                  <Button variant="neutral" size="large" onClick={handleNext}>
                     {language.t("dialog.releaseNotes.action.next")}
                   </Button>
                 }
               >
-                <Button variant="primary" size="large" onClick={handleClose}>
+                <Button variant="contrast" size="large" onClick={handleClose}>
                   {language.t("dialog.releaseNotes.action.getStarted")}
                 </Button>
               </Show>
diff --git a/packages/app/src/components/dialog-select-directory-v2.tsx b/packages/app/src/components/dialog-select-directory-v2.tsx
index 07c958058ba..1fc259695fd 100644
--- a/packages/app/src/components/dialog-select-directory-v2.tsx
+++ b/packages/app/src/components/dialog-select-directory-v2.tsx
@@ -1,8 +1,8 @@
 import "@pierre/trees/web-components"
 import { FileTree } from "@pierre/trees"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
+import { Button } from "@opencode-ai/ui/button"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createEffect, createMemo, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"
 import { useGlobal } from "@/context/global"
@@ -28,7 +28,7 @@ import {
   pickerRoot,
 } from "./directory-picker-domain"
 import "./dialog-select-directory-v2.css"
-import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { Divider } from "@opencode-ai/ui/divider"
 import { getFilename } from "@opencode-ai/util/path"
 
 interface DialogSelectDirectoryV2Props {
@@ -293,10 +293,10 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
       <DialogHeader>
         <DialogTitle>{props.title ?? language.t("command.project.open")}</DialogTitle>
       </DialogHeader>
-      <DividerV2 />
+      <Divider />
       <DialogBody class="directory-picker-v2-body pt-4!">
         <div class="directory-picker-v2-path" ref={pathArea}>
-          <TextInputV2
+          <TextInput
             value={input()}
             autofocus
             autocomplete="off"
@@ -318,15 +318,15 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
             onKeyDown={handleInputKey}
           />
           <div class="directory-picker-v2-actions">
-            <ButtonV2 size="small" variant="ghost" onClick={() => void navigate(home())}>
+            <Button size="small" variant="ghost" onClick={() => void navigate(home())}>
               ~
-            </ButtonV2>
-            <ButtonV2 size="small" variant="ghost" onClick={() => void navigate(pickerRoot(root()) || root())}>
+            </Button>
+            <Button size="small" variant="ghost" onClick={() => void navigate(pickerRoot(root()) || root())}>
               {language.t("dialog.directory.root")}
-            </ButtonV2>
-            <ButtonV2 size="small" variant="ghost" onClick={() => void navigate(pickerParent(root()))}>
+            </Button>
+            <Button size="small" variant="ghost" onClick={() => void navigate(pickerParent(root()))}>
               {language.t("dialog.directory.parent")}
-            </ButtonV2>
+            </Button>
           </div>
           <Show when={suggestionsOpen() && currentSuggestions().length > 0}>
             <div id="directory-picker-v2-suggestions" role="listbox" class="directory-picker-v2-suggestions">
@@ -379,12 +379,12 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
         <div class="directory-picker-v2-selection">{policy.result(root(), selected(), rootValid())}</div>
       </DialogBody>
       <DialogFooter>
-        <ButtonV2 variant="neutral" onClick={() => dialog.close()}>
+        <Button variant="neutral" onClick={() => dialog.close()}>
           {language.t("common.cancel")}
-        </ButtonV2>
-        <ButtonV2 variant="contrast" disabled={!policy.result(root(), selected(), rootValid())} onClick={resolve}>
+        </Button>
+        <Button variant="contrast" disabled={!policy.result(root(), selected(), rootValid())} onClick={resolve}>
           {action[policy.action]}
-        </ButtonV2>
+        </Button>
       </DialogFooter>
     </Dialog>
   )
diff --git a/packages/app/src/components/dialog-select-file.tsx b/packages/app/src/components/dialog-select-file.tsx
deleted file mode 100644
index a0b610d972b..00000000000
--- a/packages/app/src/components/dialog-select-file.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { FileIcon } from "@opencode-ai/ui/file-icon"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Keybind } from "@opencode-ai/ui/keybind"
-import { List } from "@opencode-ai/ui/list"
-import { getDirectory, getFilename } from "@opencode-ai/util/path"
-import { createMemo, createSignal, lazy, Match, Show, Switch } from "solid-js"
-import { formatKeybind } from "@/context/command"
-import { useServerSDK } from "@/context/server-sdk"
-import { useLanguage } from "@/context/language"
-import { usePlatform } from "@/context/platform"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { decode64 } from "@/utils/base64"
-import { getRelativeTime } from "@/utils/time"
-import {
-  createCommandPaletteFileEntry,
-  createCommandPaletteFileOpener,
-  createCommandPaletteModel,
-  uniqueCommandPaletteEntries,
-  type CommandPaletteEntry,
-} from "./command-palette"
-import { DialogCommandPaletteV2 } from "./dialog-command-palette-v2"
-
-const DialogSelectFileV2 = lazy(() =>
-  import("./dialog-select-directory-v2").then((module) => ({ default: module.DialogSelectDirectoryV2 })),
-)
-type DialogSelectFileMode = "all" | "files"
-
-export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFile?: (path: string) => void }) {
-  const platform = usePlatform()
-  const filesOnly = () => props.mode === "files"
-
-  if (!filesOnly()) {
-    return <DialogCommandPaletteV2 onOpenFile={props.onOpenFile} />
-  }
-
-  if (filesOnly() && platform.platform === "desktop") {
-    return <DialogSelectFileDesktopV2 onOpenFile={props.onOpenFile} />
-  }
-
-  return <DialogSelectFileLegacy filesOnly={filesOnly} onOpenFile={props.onOpenFile} />
-}
-
-function DialogSelectFileDesktopV2(props: { onOpenFile?: (path: string) => void }) {
-  const language = useLanguage()
-  const serverSDK = useServerSDK()
-  const { params } = useSessionLayout()
-  const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
-  const openFile = createCommandPaletteFileOpener(props.onOpenFile)
-
-  return (
-    <DialogSelectFileV2
-      server={serverSDK.server}
-      mode="file"
-      start={projectDirectory()}
-      title={language.t("session.header.searchFiles")}
-      onSelect={(result) => {
-        if (typeof result !== "string") return
-        openFile(result)
-      }}
-    />
-  )
-}
-
-function DialogSelectFileLegacy(props: { filesOnly: () => boolean; onOpenFile?: (path: string) => void }) {
-  const palette = createCommandPaletteModel(props)
-  const [grouped, setGrouped] = createSignal(false)
-
-  const items = async (text: string) => {
-    const query = text.trim()
-    setGrouped(query.length > 0)
-
-    if (!query && props.filesOnly()) {
-      const loaded = palette.file.tree.state("")?.loaded
-      const pending = loaded ? Promise.resolve() : palette.file.tree.list("")
-      const next = uniqueCommandPaletteEntries([...palette.recentFileEntries(), ...palette.rootFileEntries()])
-
-      if (loaded || next.length > 0) {
-        void pending
-        return next
-      }
-
-      await pending
-      return uniqueCommandPaletteEntries([...palette.recentFileEntries(), ...palette.rootFileEntries()])
-    }
-
-    if (!query) return [...palette.preferredCommandEntries(), ...palette.recentFileEntries()]
-
-    if (props.filesOnly()) {
-      const files = await palette.file.searchFiles(query)
-      const category = palette.language.t("palette.group.files")
-      return files.map((path) => createCommandPaletteFileEntry(path, category))
-    }
-
-    const [files, nextSessions] = await Promise.all([
-      palette.file.searchFiles(query),
-      Promise.resolve(palette.sessions(query)),
-    ])
-    const category = palette.language.t("palette.group.files")
-    const entries = files.map((path) => createCommandPaletteFileEntry(path, category))
-    return [...palette.commandEntries(), ...nextSessions, ...entries]
-  }
-
-  return (
-    <Dialog class="pt-3 pb-0 !max-h-[480px]" transition>
-      <List
-        class="px-3"
-        search={{
-          placeholder: props.filesOnly()
-            ? palette.language.t("session.header.searchFiles")
-            : palette.language.t("palette.search.placeholder"),
-          autofocus: true,
-          hideIcon: true,
-        }}
-        emptyMessage={palette.language.t("palette.empty")}
-        loadingMessage={palette.language.t("common.loading")}
-        items={items}
-        key={(item) => item.id}
-        filterKeys={["title", "description", "category"]}
-        skipFilter={(item) => item.type === "file"}
-        groupBy={grouped() ? (item) => item.category : () => ""}
-        onMove={(item: CommandPaletteEntry | undefined) => palette.highlight(item)}
-        onSelect={(item: CommandPaletteEntry | undefined) => palette.select(item)}
-      >
-        {(item) => (
-          <Switch
-            fallback={
-              <div class="w-full flex items-center justify-between rounded-md pl-1">
-                <div class="flex items-center gap-x-3 grow min-w-0">
-                  <FileIcon node={{ path: item.path ?? "", type: "file" }} class="shrink-0 size-4" />
-                  <div class="flex items-center text-14-regular">
-                    <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
-                      {getDirectory(item.path ?? "")}
-                    </span>
-                    <span class="text-text-strong whitespace-nowrap">{getFilename(item.path ?? "")}</span>
-                  </div>
-                </div>
-              </div>
-            }
-          >
-            <Match when={item.type === "command"}>
-              <div class="w-full flex items-center justify-between gap-4">
-                <div class="flex items-center gap-2 min-w-0">
-                  <span class="text-14-regular text-text-strong whitespace-nowrap">{item.title}</span>
-                  <Show when={item.description}>
-                    <span class="text-14-regular text-text-weak truncate">{item.description}</span>
-                  </Show>
-                </div>
-                <Show when={item.keybind}>
-                  <Keybind class="rounded-[4px]">{formatKeybind(item.keybind ?? "", palette.language.t)}</Keybind>
-                </Show>
-              </div>
-            </Match>
-            <Match when={item.type === "session"}>
-              <div class="w-full flex items-center justify-between rounded-md pl-1">
-                <div class="flex items-center gap-x-3 grow min-w-0">
-                  <Icon name="bubble-5" size="small" class="shrink-0 text-icon-weak" />
-                  <div class="flex items-center gap-2 min-w-0">
-                    <span
-                      class="text-14-regular text-text-strong truncate"
-                      classList={{ "opacity-70": !!item.archived }}
-                    >
-                      {item.title}
-                    </span>
-                    <Show when={item.description}>
-                      <span
-                        class="text-14-regular text-text-weak truncate"
-                        classList={{ "opacity-70": !!item.archived }}
-                      >
-                        {item.description}
-                      </span>
-                    </Show>
-                  </div>
-                </div>
-                <Show when={item.updated}>
-                  <span class="text-12-regular text-text-weak whitespace-nowrap ml-2">
-                    {getRelativeTime(new Date(item.updated!).toISOString(), palette.language.t)}
-                  </span>
-                </Show>
-              </div>
-            </Match>
-          </Switch>
-        )}
-      </List>
-    </Dialog>
-  )
-}
diff --git a/packages/app/src/components/dialog-select-mcp.tsx b/packages/app/src/components/dialog-select-mcp.tsx
index 94d03daa91a..00e25213ad0 100644
--- a/packages/app/src/components/dialog-select-mcp.tsx
+++ b/packages/app/src/components/dialog-select-mcp.tsx
@@ -1,7 +1,7 @@
 import { Component, createMemo, Show } from "solid-js"
 import { useData } from "@/context/server"
 import { useWorkspaceLocation } from "@/context/location"
-import { Dialog } from "@opencode-ai/ui/dialog"
+import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
 import { useLanguage } from "@/context/language"
@@ -31,65 +31,71 @@ export const DialogSelectMcp: Component = () => {
   const totalCount = createMemo(() => items().length)
 
   return (
-    <Dialog
-      title={language.t("dialog.mcp.title")}
-      description={language.t("dialog.mcp.description", { enabled: enabledCount(), total: totalCount() })}
-    >
-      <List
-        class="px-3"
-        search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
-        emptyMessage={language.t("dialog.mcp.empty")}
-        key={(x) => x?.name ?? ""}
-        items={items}
-        filterKeys={["name", "status"]}
-        sortBy={(a, b) => a.name.localeCompare(b.name)}
-        onSelect={(x) => {
-          if (!x || x.status === "pending" || toggle.isPending) return
-          toggle.mutate(x.name)
-        }}
-      >
-        {(i) => {
-          const mcpStatus = () =>
-            data.location.mcp.server.list({ directory: sdk().directory })?.find((server) => server.name === i.name)
-              ?.status
-          const status = () => mcpStatus()?.status
-          const statusLabel = () => {
-            const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
-            if (!key) return
-            return language.t(key)
-          }
-          const error = () => {
-            const s = mcpStatus()
-            if (s?.status === "failed") return s.error
-          }
-          const enabled = () => status() === "connected"
-          return (
-            <div class="w-full flex items-center justify-between gap-x-3">
-              <div class="flex flex-col gap-0.5 min-w-0">
-                <div class="flex items-center gap-2">
-                  <span class="truncate">{i.name}</span>
-                  <Show when={statusLabel()}>
-                    <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
+    <Dialog>
+      <DialogHeader>
+        <DialogTitleGroup
+          title={language.t("dialog.mcp.title")}
+          description={language.t("dialog.mcp.description", { enabled: enabledCount(), total: totalCount() })}
+        />
+      </DialogHeader>
+      <DialogBody>
+        <List
+          class="px-3"
+          search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
+          emptyMessage={language.t("dialog.mcp.empty")}
+          key={(x) => x?.name ?? ""}
+          items={items}
+          filterKeys={["name", "status"]}
+          sortBy={(a, b) => a.name.localeCompare(b.name)}
+          onSelect={(x) => {
+            if (!x || x.status === "pending" || toggle.isPending) return
+            toggle.mutate(x.name)
+          }}
+        >
+          {(i) => {
+            const mcpStatus = () =>
+              data.location.mcp.server.list({ directory: sdk().directory })?.find((server) => server.name === i.name)
+                ?.status
+            const status = () => mcpStatus()?.status
+            const statusLabel = () => {
+              const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
+              if (!key) return
+              return language.t(key)
+            }
+            const error = () => {
+              const s = mcpStatus()
+              if (s?.status === "failed") return s.error
+            }
+            const enabled = () => status() === "connected"
+            return (
+              <div class="w-full flex items-center justify-between gap-x-3">
+                <div class="flex flex-col gap-0.5 min-w-0">
+                  <div class="flex items-center gap-2">
+                    <span class="truncate">{i.name}</span>
+                    <Show when={statusLabel()}>
+                      <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
+                    </Show>
+                  </div>
+                  <Show when={error()}>
+                    <span class="text-11-regular text-text-weaker truncate">{error()}</span>
                   </Show>
                 </div>
-                <Show when={error()}>
-                  <span class="text-11-regular text-text-weaker truncate">{error()}</span>
-                </Show>
+                <div onClick={(e) => e.stopPropagation()}>
+                  <Switch
+                    appearance="standard"
+                    checked={enabled()}
+                    disabled={status() === "pending" || (toggle.isPending && toggle.variables === i.name)}
+                    onChange={() => {
+                      if (toggle.isPending) return
+                      toggle.mutate(i.name)
+                    }}
+                  />
+                </div>
               </div>
-              <div onClick={(e) => e.stopPropagation()}>
-                <Switch
-                  checked={enabled()}
-                  disabled={status() === "pending" || (toggle.isPending && toggle.variables === i.name)}
-                  onChange={() => {
-                    if (toggle.isPending) return
-                    toggle.mutate(i.name)
-                  }}
-                />
-              </div>
-            </div>
-          )
-        }}
-      </List>
+            )
+          }}
+        </List>
+      </DialogBody>
     </Dialog>
   )
 }
diff --git a/packages/app/src/components/dialog-select-model-unpaid-v2.stories.tsx b/packages/app/src/components/dialog-select-model-unpaid-v2.stories.tsx
index bd4beb2ec9b..0c16020eccc 100644
--- a/packages/app/src/components/dialog-select-model-unpaid-v2.stories.tsx
+++ b/packages/app/src/components/dialog-select-model-unpaid-v2.stories.tsx
@@ -39,7 +39,7 @@ function SelectModelWithoutProviders() {
   onMount(open)
 
   return (
-    <Button variant="secondary" onClick={open}>
+    <Button variant="neutral" onClick={open}>
       Open select model dialog
     </Button>
   )
diff --git a/packages/app/src/components/dialog-select-model-unpaid-v2.tsx b/packages/app/src/components/dialog-select-model-unpaid-v2.tsx
index e63ee35a800..f130cee1a44 100644
--- a/packages/app/src/components/dialog-select-model-unpaid-v2.tsx
+++ b/packages/app/src/components/dialog-select-model-unpaid-v2.tsx
@@ -1,8 +1,8 @@
-import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
-import { Icon } from "@opencode-ai/ui/v2/icon"
+import { DialogBody, DialogHeader, DialogTitle, Dialog } from "@opencode-ai/ui/dialog"
+import { Badge } from "@opencode-ai/ui/badge"
+import { Icon } from "@opencode-ai/ui/icon"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Tag } from "@opencode-ai/ui/v2/badge-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useTheme } from "@opencode-ai/ui/theme"
 import { createMemo, onCleanup, onMount, type Component, For, Show } from "solid-js"
@@ -66,7 +66,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
   })
 
   return (
-    <DialogV2
+    <Dialog
       fit
       containerClass="!h-auto max-h-[calc(100vh_-_16px)] !w-[min(calc(100vw_-_16px),640px)]"
       class="[font-family:var(--v2-font-family-sans)] [&_[data-slot=dialog-header]]:!px-5 [&_[data-slot=dialog-header-title]]:!text-[15px] [&_[data-slot=dialog-header-title]]:!tracking-[-0.13px]"
@@ -84,7 +84,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
             </div>
             <For each={freeModels()}>
               {(item) => (
-                <TooltipV2
+                <Tooltip
                   class="w-full"
                   placement="right-start"
                   gutter={6}
@@ -105,15 +105,15 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
                     onClick={() => selectModel(item)}
                   >
                     <span class="min-w-0 truncate">{displayModelName(item.name)}</span>
-                    <Tag class="shrink-0">{language.t("model.tag.free")}</Tag>
+                    <Badge class="shrink-0">{language.t("model.tag.free")}</Badge>
                     <Show when={item.latest}>
-                      <Tag class="shrink-0">{language.t("model.tag.latest")}</Tag>
+                      <Badge class="shrink-0">{language.t("model.tag.latest")}</Badge>
                     </Show>
                     <Show when={currentKey() === modelKey(item)}>
                       <Icon name="check" class="ml-auto size-4 shrink-0 text-v2-icon-icon-base" />
                     </Show>
                   </button>
-                </TooltipV2>
+                </Tooltip>
               )}
             </For>
           </div>
@@ -172,6 +172,6 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
           </div>
         </div>
       </DialogBody>
-    </DialogV2>
+    </Dialog>
   )
 }
diff --git a/packages/app/src/components/dialog-select-model-unpaid.tsx b/packages/app/src/components/dialog-select-model-unpaid.tsx
index 00ca16cb666..d77b8640cc3 100644
--- a/packages/app/src/components/dialog-select-model-unpaid.tsx
+++ b/packages/app/src/components/dialog-select-model-unpaid.tsx
@@ -1,9 +1,9 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog } from "@opencode-ai/ui/dialog"
+import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
 import { List, type ListRef } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Tag } from "@opencode-ai/ui/tag"
+import { Badge } from "@opencode-ai/ui/badge"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { type Component, Show } from "solid-js"
 import { useLocal } from "@/context/local"
@@ -40,108 +40,113 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
   }
 
   return (
-    <Dialog
-      title={language.t("dialog.model.select.title")}
-      class="overflow-y-auto [&_[data-slot=dialog-body]]:overflow-visible [&_[data-slot=dialog-body]]:flex-none"
-    >
-      <div class="flex flex-col gap-3 px-2.5" onKeyDown={handleKeyDown}>
-        <div class="text-14-medium text-text-base px-2.5">{language.t("dialog.model.unpaid.freeModels.title")}</div>
-        <List
-          class="px-3 [&_[data-slot=list-scroll]]:overflow-visible"
-          ref={(ref) => (listRef = ref)}
-          items={model.list}
-          current={model.current()}
-          key={(x) => `${x.provider.id}:${x.id}`}
-          itemWrapper={(item, node) => (
-            <Tooltip
-              class="w-full"
-              placement="right-start"
-              gutter={12}
-              value={
-                <ModelTooltip
-                  model={item}
-                  latest={item.latest}
-                  free={item.provider.id === "opencode" && (!item.cost || item.cost.input === 0)}
-                />
-              }
-            >
-              {node}
-            </Tooltip>
-          )}
-          onSelect={(x) => {
-            model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
-              recent: true,
-            })
-            dialog.close()
-          }}
-        >
-          {(i) => (
-            <div class="w-full flex items-center gap-x-2.5">
-              <span>{i.name}</span>
-              <Tag>{language.t("model.tag.free")}</Tag>
-              <Show when={i.latest}>
-                <Tag>{language.t("model.tag.latest")}</Tag>
-              </Show>
-            </div>
-          )}
-        </List>
-      </div>
-      <div class="px-1.5 pb-1.5">
-        <div class="w-full rounded-sm border border-border-weak-base bg-surface-raised-base">
-          <div class="w-full flex flex-col items-start gap-4 px-1.5 pt-4 pb-4">
-            <div class="px-2 text-14-medium text-text-base">{language.t("dialog.model.unpaid.addMore.title")}</div>
-            <div class="w-full">
-              <List
-                class="w-full px-3"
-                key={(p) => p.id}
-                items={providers.popular}
-                activeIcon="plus-small"
-                sortBy={(a, b) => {
-                  if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
-                    return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
-                  return a.name.localeCompare(b.name)
-                }}
-                onSelect={(x) => {
-                  if (!x) return
-                  connect(x.id)
-                }}
+    <Dialog class="overflow-y-auto [&_[data-slot=dialog-body]]:overflow-visible [&_[data-slot=dialog-body]]:flex-none">
+      <DialogHeader>
+        <DialogTitle>{language.t("dialog.model.select.title")}</DialogTitle>
+      </DialogHeader>
+      <DialogBody>
+        <div class="flex flex-col gap-3 px-2.5" onKeyDown={handleKeyDown}>
+          <div class="text-14-medium text-text-base px-2.5">{language.t("dialog.model.unpaid.freeModels.title")}</div>
+          <List
+            class="px-3 [&_[data-slot=list-scroll]]:overflow-visible"
+            ref={(ref) => (listRef = ref)}
+            items={model.list}
+            current={model.current()}
+            key={(x) => `${x.provider.id}:${x.id}`}
+            itemWrapper={(item, node) => (
+              <Tooltip
+                appearance="standard"
+                class="w-full"
+                placement="right-start"
+                gutter={12}
+                value={
+                  <ModelTooltip
+                    model={item}
+                    latest={item.latest}
+                    free={item.provider.id === "opencode" && (!item.cost || item.cost.input === 0)}
+                  />
+                }
               >
-                {(i) => (
-                  <div class="w-full flex items-center gap-x-3">
-                    <ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
-                    <span>{i.name}</span>
-                    <Show when={i.id === "opencode"}>
-                      <div class="text-14-regular text-text-weak">{language.t("dialog.provider.opencode.tagline")}</div>
-                    </Show>
-                    <Show when={i.id === "opencode"}>
-                      <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
-                    </Show>
-                    <Show when={i.id === "opencode-go"}>
-                      <>
+                {node}
+              </Tooltip>
+            )}
+            onSelect={(x) => {
+              model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+                recent: true,
+              })
+              dialog.close()
+            }}
+          >
+            {(i) => (
+              <div class="w-full flex items-center gap-x-2.5">
+                <span>{i.name}</span>
+                <Badge appearance="standard">{language.t("model.tag.free")}</Badge>
+                <Show when={i.latest}>
+                  <Badge appearance="standard">{language.t("model.tag.latest")}</Badge>
+                </Show>
+              </div>
+            )}
+          </List>
+        </div>
+        <div class="px-1.5 pb-1.5">
+          <div class="w-full rounded-sm border border-border-weak-base bg-surface-raised-base">
+            <div class="w-full flex flex-col items-start gap-4 px-1.5 pt-4 pb-4">
+              <div class="px-2 text-14-medium text-text-base">{language.t("dialog.model.unpaid.addMore.title")}</div>
+              <div class="w-full">
+                <List
+                  class="w-full px-3"
+                  key={(p) => p.id}
+                  items={providers.popular}
+                  activeIcon="plus-small"
+                  sortBy={(a, b) => {
+                    if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+                      return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+                    return a.name.localeCompare(b.name)
+                  }}
+                  onSelect={(x) => {
+                    if (!x) return
+                    connect(x.id)
+                  }}
+                >
+                  {(i) => (
+                    <div class="w-full flex items-center gap-x-3">
+                      <ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
+                      <span>{i.name}</span>
+                      <Show when={i.id === "opencode"}>
                         <div class="text-14-regular text-text-weak">
-                          {language.t("dialog.provider.opencodeGo.tagline")}
+                          {language.t("dialog.provider.opencode.tagline")}
                         </div>
-                        <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
-                      </>
-                    </Show>
-                    <Show when={i.id === "anthropic"}>
-                      <div class="text-14-regular text-text-weak">{language.t("dialog.provider.anthropic.note")}</div>
-                    </Show>
-                  </div>
-                )}
-              </List>
-              <Button
-                variant="ghost"
-                class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
-                icon="dot-grid"
-                onClick={all}
-              >
-                {language.t("dialog.provider.viewAll")}
-              </Button>
+                      </Show>
+                      <Show when={i.id === "opencode"}>
+                        <Badge appearance="standard">{language.t("dialog.provider.tag.recommended")}</Badge>
+                      </Show>
+                      <Show when={i.id === "opencode-go"}>
+                        <>
+                          <div class="text-14-regular text-text-weak">
+                            {language.t("dialog.provider.opencodeGo.tagline")}
+                          </div>
+                          <Badge appearance="standard">{language.t("dialog.provider.tag.recommended")}</Badge>
+                        </>
+                      </Show>
+                      <Show when={i.id === "anthropic"}>
+                        <div class="text-14-regular text-text-weak">{language.t("dialog.provider.anthropic.note")}</div>
+                      </Show>
+                    </div>
+                  )}
+                </List>
+                <Button
+                  variant="ghost"
+                  class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
+                  icon="dot-grid"
+                  onClick={all}
+                >
+                  {language.t("dialog.provider.viewAll")}
+                </Button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </DialogBody>
     </Dialog>
   )
 }
diff --git a/packages/app/src/components/dialog-select-model.tsx b/packages/app/src/components/dialog-select-model.tsx
index d01ac91aa42..4ccca554b19 100644
--- a/packages/app/src/components/dialog-select-model.tsx
+++ b/packages/app/src/components/dialog-select-model.tsx
@@ -5,16 +5,14 @@ import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { popularProviders } from "@/hooks/use-providers"
 import { Button } from "@opencode-ai/ui/button"
+import { Badge } from "@opencode-ai/ui/badge"
+import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
+import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { Tag } from "@opencode-ai/ui/tag"
-import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Icon } from "@opencode-ai/ui/v2/icon"
-import { Tag as TagV2 } from "@opencode-ai/ui/v2/badge-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Menu } from "@opencode-ai/ui/menu"
 import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 import { decode64 } from "@/utils/base64"
@@ -81,6 +79,7 @@ const ModelList: Component<{
       }}
       itemWrapper={(item, node) => (
         <Tooltip
+          appearance="standard"
           class="w-full"
           placement="right-start"
           gutter={12}
@@ -101,10 +100,10 @@ const ModelList: Component<{
         <div class="w-full flex items-center gap-x-2 text-13-regular">
           <span class="truncate">{i.name}</span>
           <Show when={isFree(i.provider.id, i.cost)}>
-            <Tag>{language.t("model.tag.free")}</Tag>
+            <Badge appearance="standard">{language.t("model.tag.free")}</Badge>
           </Show>
           <Show when={i.latest}>
-            <Tag>{language.t("model.tag.latest")}</Tag>
+            <Badge appearance="standard">{language.t("model.tag.latest")}</Badge>
           </Show>
         </div>
       )}
@@ -193,21 +192,19 @@ export function ModelSelectorPopover(props: {
             class="p-1"
             action={
               <div class="flex items-center gap-1">
-                <Tooltip placement="top" value={language.t("command.provider.connect")}>
+                <Tooltip appearance="standard" placement="top" value={language.t("command.provider.connect")}>
                   <IconButton
-                    icon="plus-small"
+                    icon={<Icon name="plus-small" />}
                     variant="ghost"
-                    iconSize="normal"
                     class="size-6"
                     aria-label={language.t("command.provider.connect")}
                     onClick={handleConnectProvider}
                   />
                 </Tooltip>
-                <Tooltip placement="top" value={language.t("dialog.model.manage")}>
+                <Tooltip appearance="standard" placement="top" value={language.t("dialog.model.manage")}>
                   <IconButton
-                    icon="sliders"
+                    icon={<Icon name="sliders" />}
                     variant="ghost"
-                    iconSize="normal"
                     class="size-6"
                     aria-label={language.t("dialog.model.manage")}
                     onClick={handleManage}
@@ -373,10 +370,10 @@ function ModelSelectorPopoverV2View(props: {
   })
 
   return (
-    <MenuV2 open={store.open} modal={false} placement="top-start" gutter={6} onOpenChange={setOpen}>
-      <MenuV2.Trigger as={props.trigger} />
-      <MenuV2.Portal>
-        <MenuV2.Content
+    <Menu open={store.open} modal={false} placement="top-start" gutter={6} onOpenChange={setOpen}>
+      <Menu.Trigger as={props.trigger} />
+      <Menu.Portal>
+        <Menu.Content
           ref={(element: HTMLDivElement) => (contentRef = element)}
           class="w-[284px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 !p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none"
           onPointerDownOutside={dismiss.preventTriggerRestore}
@@ -449,14 +446,14 @@ function ModelSelectorPopoverV2View(props: {
               >
                 <For each={groups()}>
                   {(group) => (
-                    <MenuV2.Group>
-                      <MenuV2.GroupLabel class="gap-2 px-3">
+                    <Menu.Group>
+                      <Menu.GroupLabel class="gap-2 px-3">
                         <span class="min-w-0 truncate">{group.items[0].provider.name}</span>
-                      </MenuV2.GroupLabel>
-                      <MenuV2.RadioGroup value={props.current}>
+                      </Menu.GroupLabel>
+                      <Menu.RadioGroup value={props.current}>
                         <For each={group.items}>
                           {(item) => (
-                            <TooltipV2
+                            <Tooltip
                               class="w-full"
                               placement="right-start"
                               gutter={6}
@@ -470,7 +467,7 @@ function ModelSelectorPopoverV2View(props: {
                                 />
                               }
                             >
-                              <MenuV2.RadioItem
+                              <Menu.RadioItem
                                 value={modelKey(item)}
                                 data-option-key={modelKey(item)}
                                 data-selected-model={props.current === modelKey(item) ? true : undefined}
@@ -484,17 +481,17 @@ function ModelSelectorPopoverV2View(props: {
                               >
                                 <span class="min-w-0 truncate leading-5">{item.name}</span>
                                 <Show when={isFree(item.provider.id, item.cost)}>
-                                  <TagV2 class="shrink-0">{language.t("model.tag.free")}</TagV2>
+                                  <Badge class="shrink-0">{language.t("model.tag.free")}</Badge>
                                 </Show>
                                 <Show when={item.latest}>
-                                  <TagV2 class="shrink-0">{language.t("model.tag.latest")}</TagV2>
+                                  <Badge class="shrink-0">{language.t("model.tag.latest")}</Badge>
                                 </Show>
-                              </MenuV2.RadioItem>
-                            </TooltipV2>
+                              </Menu.RadioItem>
+                            </Tooltip>
                           )}
                         </For>
-                      </MenuV2.RadioGroup>
-                    </MenuV2.Group>
+                      </Menu.RadioGroup>
+                    </Menu.Group>
                   )}
                 </For>
               </Show>
@@ -502,7 +499,7 @@ function ModelSelectorPopoverV2View(props: {
           </ScrollView>
           <div class="h-px bg-v2-border-border-muted" />
           <div class="flex flex-col p-0.5">
-            <MenuV2.Item
+            <Menu.Item
               data-option-key={manageKey}
               classList={{ "!bg-v2-overlay-simple-overlay-hover": store.active === manageKey }}
               onMouseEnter={() => {
@@ -513,11 +510,11 @@ function ModelSelectorPopoverV2View(props: {
             >
               <Icon name="outline-sliders" size="small" />
               <span class="min-w-0 flex-1 truncate leading-5">{language.t("dialog.model.manage")}</span>
-            </MenuV2.Item>
+            </Menu.Item>
           </div>
-        </MenuV2.Content>
-      </MenuV2.Portal>
-    </MenuV2>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
   )
 }
 
@@ -540,18 +537,19 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
   }
 
   return (
-    <Dialog
-      title={language.t("dialog.model.select.title")}
-      action={
+    <Dialog>
+      <DialogHeader hideClose>
+        <DialogTitle>{language.t("dialog.model.select.title")}</DialogTitle>
         <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={provider}>
           {language.t("command.provider.connect")}
         </Button>
-      }
-    >
-      <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
-      <Button variant="ghost" class="ml-3 mt-5 mb-6 text-text-base self-start" onClick={manage}>
-        {language.t("dialog.model.manage")}
-      </Button>
+      </DialogHeader>
+      <DialogBody>
+        <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
+        <Button variant="ghost" class="ml-3 mt-5 mb-6 text-text-base self-start" onClick={manage}>
+          {language.t("dialog.model.manage")}
+        </Button>
+      </DialogBody>
     </Dialog>
   )
 }
diff --git a/packages/app/src/components/dialog-select-server.tsx b/packages/app/src/components/dialog-select-server.tsx
index 3fb7b9ca357..5ac209de203 100644
--- a/packages/app/src/components/dialog-select-server.tsx
+++ b/packages/app/src/components/dialog-select-server.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@opencode-ai/ui/button"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
@@ -156,49 +157,47 @@ export function ServerConnectionList(props: {
               />
               <div class="flex items-center justify-center gap-4 pl-4">
                 <Show when={i.type === "http"}>
-                  <DropdownMenu>
-                    <DropdownMenu.Trigger
+                  <Menu appearance="standard">
+                    <Menu.Trigger
                       as={IconButton}
-                      icon="dot-grid"
+                      icon={<Icon name="dot-grid" />}
                       variant="ghost"
                       class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
                       onClick={(e: MouseEvent) => e.stopPropagation()}
                       onPointerDown={(e: PointerEvent) => e.stopPropagation()}
                     />
-                    <DropdownMenu.Portal>
-                      <DropdownMenu.Content class="mt-1">
-                        <DropdownMenu.Item
+                    <Menu.Portal>
+                      <Menu.Content class="mt-1">
+                        <Menu.Item
                           onSelect={() => {
                             if (i.type !== "http") return
                             props.onEdit(i)
                           }}
                         >
-                          <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
-                        </DropdownMenu.Item>
+                          {language.t("dialog.server.menu.edit")}
+                        </Menu.Item>
                         <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
-                          <DropdownMenu.Item onSelect={() => props.domain.defaults.set(key)}>
-                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.default")}</DropdownMenu.ItemLabel>
-                          </DropdownMenu.Item>
+                          <Menu.Item onSelect={() => props.domain.defaults.set(key)}>
+                            {language.t("dialog.server.menu.default")}
+                          </Menu.Item>
                         </Show>
                         <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
-                          <DropdownMenu.Item onSelect={() => props.domain.defaults.set(null)}>
-                            <DropdownMenu.ItemLabel>
-                              {language.t("dialog.server.menu.defaultRemove")}
-                            </DropdownMenu.ItemLabel>
-                          </DropdownMenu.Item>
+                          <Menu.Item onSelect={() => props.domain.defaults.set(null)}>
+                            {language.t("dialog.server.menu.defaultRemove")}
+                          </Menu.Item>
                         </Show>
                         <Show when={props.domain.connection.canRemove(key)}>
-                          <DropdownMenu.Separator />
-                          <DropdownMenu.Item
+                          <Menu.Separator />
+                          <Menu.Item
                             onSelect={() => props.domain.connection.remove(key)}
                             class="text-text-on-critical-base hover:bg-surface-critical-weak"
                           >
-                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
-                          </DropdownMenu.Item>
+                            {language.t("dialog.server.menu.delete")}
+                          </Menu.Item>
                         </Show>
-                      </DropdownMenu.Content>
-                    </DropdownMenu.Portal>
-                  </DropdownMenu>
+                      </Menu.Content>
+                    </Menu.Portal>
+                  </Menu>
                 </Show>
               </div>
             </div>
@@ -208,7 +207,7 @@ export function ServerConnectionList(props: {
 
       <div class="shrink-0 pb-5">
         <Button
-          variant="secondary"
+          variant="neutral"
           icon="plus-small"
           size="large"
           onClick={props.onAdd}
@@ -244,7 +243,7 @@ export function ServerConnectionForm(props: { form: ServerConnectionFormControll
       />
       <div class="shrink-0 pb-5">
         <Button
-          variant="primary"
+          variant="contrast"
           size="large"
           onClick={props.form.submit}
           disabled={props.form.state.busy()}
diff --git a/packages/app/src/components/dialog-usage-exceeded.tsx b/packages/app/src/components/dialog-usage-exceeded.tsx
index de6451a63b6..5df356b9d55 100644
--- a/packages/app/src/components/dialog-usage-exceeded.tsx
+++ b/packages/app/src/components/dialog-usage-exceeded.tsx
@@ -2,7 +2,7 @@ import { usePlatform } from "@/context/platform"
 import { useLanguage } from "@/context/language"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog } from "@opencode-ai/ui/dialog"
+import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
 import { JSX } from "solid-js"
 
 export type DialogGoUpsellProps = {
@@ -30,17 +30,22 @@ export function DialogUsageExceeded(props: DialogGoUpsellProps) {
   }
 
   return (
-    <Dialog title={props.title} description={props.description} fit>
-      <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
-        <div class="flex justify-end gap-2">
-          <Button variant="ghost" size="large" onClick={dismiss}>
-            {language.t("dialog.usageExceeded.dontShowAgain")}
-          </Button>
-          <Button variant="primary" size="large" onClick={runAction}>
-            {props.actionLabel}
-          </Button>
+    <Dialog fit>
+      <DialogHeader>
+        <DialogTitleGroup title={props.title} description={props.description} />
+      </DialogHeader>
+      <DialogBody>
+        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+          <div class="flex justify-end gap-2">
+            <Button variant="ghost" size="large" onClick={dismiss}>
+              {language.t("dialog.usageExceeded.dontShowAgain")}
+            </Button>
+            <Button variant="contrast" size="large" onClick={runAction}>
+              {props.actionLabel}
+            </Button>
+          </div>
         </div>
-      </div>
+      </DialogBody>
     </Dialog>
   )
 }
diff --git a/packages/app/src/components/file-tree-v2.tsx b/packages/app/src/components/file-tree-v2.tsx
index 6fe2dd1bf67..eaa70693fd1 100644
--- a/packages/app/src/components/file-tree-v2.tsx
+++ b/packages/app/src/components/file-tree-v2.tsx
@@ -1,6 +1,6 @@
 import { useFile } from "@/context/file"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
-import "@opencode-ai/ui/v2/file-tree-v2.css"
+import "@opencode-ai/ui/file-tree.css"
 import {
   createEffect,
   createMemo,
@@ -13,7 +13,7 @@ import {
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import type { FileNode } from "@/types"
-import { Icon } from "@opencode-ai/ui/v2/icon"
+import { Icon } from "@opencode-ai/ui/icon"
 import { pathToFileUrl, withFileDragImage, type Kind } from "@/components/file-tree"
 import { createVirtualizer, defaultRangeExtractor } from "@tanstack/solid-virtual"
 import {
diff --git a/packages/app/src/components/project-settings-extensions.tsx b/packages/app/src/components/project-settings-extensions.tsx
index 35014b3c925..4c98b0e3204 100644
--- a/packages/app/src/components/project-settings-extensions.tsx
+++ b/packages/app/src/components/project-settings-extensions.tsx
@@ -1,6 +1,6 @@
 import { Icon } from "@opencode-ai/ui/icon"
-import { Switch } from "@opencode-ai/ui/v2/switch-v2"
-import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { Switch } from "@opencode-ai/ui/switch"
+import { Tabs } from "@opencode-ai/ui/tabs"
 import { type Component, For, Show, createEffect, createMemo, createResource, createSignal } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useMcpToggle } from "@/context/mcp"
@@ -149,15 +149,15 @@ export const ProjectSettingsExtensions: Component = () => {
         <span>{language.t("project.settings.extensions.description")}</span>
       </div>
 
-      <TabsV2 variant="pill" defaultValue="mcps" class="project-settings-extension-tabs">
-        <TabsV2.List>
-          <TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
-          <TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
-          <TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
+      <Tabs variant="pill" defaultValue="mcps" class="project-settings-extension-tabs">
+        <Tabs.List>
+          <Tabs.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</Tabs.Trigger>
+          <Tabs.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</Tabs.Trigger>
+          <Tabs.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</Tabs.Trigger>
           {/* TODO: Restore LSP status when V2 exposes it. */}
-        </TabsV2.List>
+        </Tabs.List>
 
-        <TabsV2.Content value="mcps">
+        <Tabs.Content value="mcps">
           <div class="project-settings-extension-section">
             <div class="project-settings-extension-section-header">
               <span>{language.t("project.settings.extensions.added")}</span>
@@ -168,9 +168,9 @@ export const ProjectSettingsExtensions: Component = () => {
             </Show>
             <SharedSection count={globalMcpNames().length}>{mcpRows(globalMcpNames())}</SharedSection>
           </div>
-        </TabsV2.Content>
+        </Tabs.Content>
 
-        <TabsV2.Content value="plugins">
+        <Tabs.Content value="plugins">
           <div class="project-settings-extension-section">
             <div class="project-settings-extension-section-header">
               <span>{language.t("project.settings.extensions.added")}</span>
@@ -181,9 +181,9 @@ export const ProjectSettingsExtensions: Component = () => {
             </Show>
             <SharedSection count={globalPlugins().length}>{pluginRows(globalPlugins())}</SharedSection>
           </div>
-        </TabsV2.Content>
+        </Tabs.Content>
 
-        <TabsV2.Content value="skills">
+        <Tabs.Content value="skills">
           <div class="project-settings-extension-section">
             <div class="project-settings-extension-section-header">
               <span>{language.t("project.settings.extensions.added")}</span>
@@ -196,8 +196,8 @@ export const ProjectSettingsExtensions: Component = () => {
             </Show>
             <SharedSection count={serverSkills().length}>{skillRows(serverSkills())}</SharedSection>
           </div>
-        </TabsV2.Content>
-      </TabsV2>
+        </Tabs.Content>
+      </Tabs>
     </div>
   )
 }
diff --git a/packages/app/src/components/prompt-input-v2.tsx b/packages/app/src/components/prompt-input-v2.tsx
index 994070f6d19..1a1620c8797 100644
--- a/packages/app/src/components/prompt-input-v2.tsx
+++ b/packages/app/src/components/prompt-input-v2.tsx
@@ -1,10 +1,10 @@
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Icon } from "@opencode-ai/ui/v2/icon"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import type { ReferenceInfo } from "@opencode-ai/client/promise"
 import { createEffect, createMemo, on, Show } from "solid-js"
 import { ModelSelectorPopoverV2 } from "@/components/dialog-select-model"
@@ -503,20 +503,20 @@ function PromptInputV2ModelControl(props: {
   )
   return (
     <Show when={!props.loading}>
-      <TooltipV2
+      <Tooltip
         placement="top"
         gutter={4}
         value={
           <>
             {props.title}
-            <KeybindV2 keys={props.keybind} variant="neutral" />
+            <Keybind keys={props.keybind} variant="neutral" />
           </>
         }
       >
         <Show
           when={props.paid}
           fallback={
-            <ButtonV2
+            <Button
               data-action="prompt-model"
               data-control-type="dialog"
               variant="ghost-muted"
@@ -527,13 +527,13 @@ function PromptInputV2ModelControl(props: {
               onClick={props.onUnpaidClick}
             >
               {content()}
-            </ButtonV2>
+            </Button>
           }
         >
           <ModelSelectorPopoverV2
             model={props.model}
             trigger={(triggerProps) => (
-              <ButtonV2
+              <Button
                 {...triggerProps}
                 variant="ghost-muted"
                 size="normal"
@@ -544,12 +544,12 @@ function PromptInputV2ModelControl(props: {
                 data-control-type="popover"
               >
                 {content()}
-              </ButtonV2>
+              </Button>
             )}
             onClose={props.onClose}
           />
         </Show>
-      </TooltipV2>
+      </Tooltip>
     </Show>
   )
 }
diff --git a/packages/app/src/components/prompt-project-selector.tsx b/packages/app/src/components/prompt-project-selector.tsx
index b84afdb56bf..7196c7d420b 100644
--- a/packages/app/src/components/prompt-project-selector.tsx
+++ b/packages/app/src/components/prompt-project-selector.tsx
@@ -9,10 +9,9 @@ import {
   type ComponentProps,
 } from "solid-js"
 import { createStore } from "solid-js/store"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Menu } from "@opencode-ai/ui/menu"
 import { Icon } from "@opencode-ai/ui/icon"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
 import { getProjectAvatarVariant } from "@/context/layout"
 import { useLanguage } from "@/context/language"
 import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
@@ -277,7 +276,8 @@ export function PromptProjectSelector(props: {
   })
 
   return (
-    <DropdownMenu
+    <Menu
+      appearance="standard"
       open={triggerReady() && props.controller.open()}
       placement={props.placement ?? "bottom"}
       gutter={4}
@@ -287,9 +287,9 @@ export function PromptProjectSelector(props: {
         props.controller.setOpen(open)
       }}
     >
-      <DropdownMenu.Trigger as={ProjectTrigger} ref={setTriggerRef} controller={props.controller} />
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
+      <Menu.Trigger as={ProjectTrigger} ref={setTriggerRef} controller={props.controller} />
+      <Menu.Portal>
+        <Menu.Content
           ref={contentRef}
           id="prompt-project-menu"
           class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none [&[data-closed]]:!animate-none"
@@ -360,13 +360,13 @@ export function PromptProjectSelector(props: {
               <Show
                 when={props.controller.servers().length > 1}
                 fallback={
-                  <DropdownMenu.RadioGroup value={selectedValue()}>
+                  <Menu.RadioGroup value={selectedValue()}>
                     <For each={props.controller.projects()}>
                       {(project) => (
                         <ProjectItem project={project} controller={props.controller} onSelect={selectProject} />
                       )}
                     </For>
-                  </DropdownMenu.RadioGroup>
+                  </Menu.RadioGroup>
                 }
               >
                 <For
@@ -381,7 +381,7 @@ export function PromptProjectSelector(props: {
                       <div class="flex h-7 select-none items-center pl-1.5 pr-3 text-[11px] font-[530] leading-none tracking-[0.05px] text-v2-text-text-faint">
                         {server!.name}
                       </div>
-                      <DropdownMenu.RadioGroup value={selectedValue()}>
+                      <Menu.RadioGroup value={selectedValue()}>
                         <For
                           each={props.controller.projects().filter((project) => project.server?.key === server!.key)}
                         >
@@ -389,7 +389,7 @@ export function PromptProjectSelector(props: {
                             <ProjectItem project={project} controller={props.controller} onSelect={selectProject} />
                           )}
                         </For>
-                      </DropdownMenu.RadioGroup>
+                      </Menu.RadioGroup>
                     </div>
                   )}
                 </For>
@@ -408,8 +408,8 @@ export function PromptProjectSelector(props: {
                 />
               }
             >
-              <DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger
+              <Menu.Sub>
+                <Menu.SubTrigger
                   id={props.controller.actionKey()}
                   data-option-key={props.controller.actionKey()}
                   class={projectActionClass}
@@ -419,24 +419,23 @@ export function PromptProjectSelector(props: {
                   onMouseEnter={() => props.controller.setActive(props.controller.actionKey())}
                 >
                   <Icon name="plus" size="small" />
-                  <span data-slot="dropdown-menu-item-label" class="min-w-0 flex-1 truncate leading-5">
+                  <span class="min-w-0 flex-1 truncate leading-5">
                     {props.controller.labels.add()}
                   </span>
-                  <Icon name="chevron-right" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-                </DropdownMenu.SubTrigger>
-                <DropdownMenu.Portal>
-                  <DropdownMenu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0.5 shadow-[var(--v2-elevation-floating)] focus:outline-none">
+                </Menu.SubTrigger>
+                <Menu.Portal>
+                  <Menu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0.5 shadow-[var(--v2-elevation-floating)] focus:outline-none">
                     <For each={props.controller.servers()}>
                       {(server) => <ServerAction server={server!} onSelect={selectAction} />}
                     </For>
-                  </DropdownMenu.SubContent>
-                </DropdownMenu.Portal>
-              </DropdownMenu.Sub>
+                  </Menu.SubContent>
+                </Menu.Portal>
+              </Menu.Sub>
             </Show>
           </div>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
   )
 }
 
@@ -507,7 +506,7 @@ function ProjectItem(props: {
 }) {
   const key = () => props.controller.projectKey(props.project)
   return (
-    <DropdownMenu.RadioItem
+    <Menu.RadioItem
       id={key()}
       value={key()}
       data-option-key={key()}
@@ -534,11 +533,8 @@ function ProjectItem(props: {
         src={getProjectAvatarSource(props.project.id, props.project.icon)}
         variant={getProjectAvatarVariant(props.project.icon?.color)}
       />
-      <DropdownMenu.ItemLabel class="min-w-0 truncate leading-5">{displayName(props.project)}</DropdownMenu.ItemLabel>
-      <DropdownMenu.ItemIndicator style={{ width: "14px", height: "14px", right: "12px" }}>
-        <IconV2 name="check" size="small" class="shrink-0 text-v2-icon-icon-base" />
-      </DropdownMenu.ItemIndicator>
-    </DropdownMenu.RadioItem>
+      <span class="min-w-0 truncate leading-5">{displayName(props.project)}</span>
+    </Menu.RadioItem>
   )
 }
 
@@ -552,7 +548,7 @@ function ProjectAction(props: {
 }) {
   const key = () => props.controller.actionKey(props.server)
   return (
-    <DropdownMenu.Item
+    <Menu.Item
       id={key()}
       data-option-key={key()}
       class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
@@ -573,17 +569,17 @@ function ProjectAction(props: {
       onSelect={() => props.onSelect(props.server)}
     >
       <Icon name="plus" size="small" />
-      <DropdownMenu.ItemLabel class="min-w-0 truncate leading-5">
+      <span class="min-w-0 truncate leading-5">
         {props.controller.labels.add()}
-      </DropdownMenu.ItemLabel>
-    </DropdownMenu.Item>
+      </span>
+    </Menu.Item>
   )
 }
 
 function ServerAction(props: { server: { key: string; name: string }; onSelect: (server: string) => void }) {
   return (
-    <DropdownMenu.Item class={projectActionClass} onSelect={() => props.onSelect(props.server.key)}>
-      <DropdownMenu.ItemLabel class="min-w-0 flex-1 truncate leading-5">{props.server.name}</DropdownMenu.ItemLabel>
-    </DropdownMenu.Item>
+    <Menu.Item class={projectActionClass} onSelect={() => props.onSelect(props.server.key)}>
+      <span class="min-w-0 flex-1 truncate leading-5">{props.server.name}</span>
+    </Menu.Item>
   )
 }
diff --git a/packages/app/src/components/prompt-workspace-selector.tsx b/packages/app/src/components/prompt-workspace-selector.tsx
index fe9ae4f7394..aea043b8205 100644
--- a/packages/app/src/components/prompt-workspace-selector.tsx
+++ b/packages/app/src/components/prompt-workspace-selector.tsx
@@ -1,7 +1,7 @@
 import { createMemo, createSignal, For, Show } from "solid-js"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { Icon } from "@opencode-ai/ui/v2/icon"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Icon } from "@opencode-ai/ui/icon"
 import { getFilename } from "@opencode-ai/util/path"
 import { useLanguage } from "@/context/language"
 import { sameDirectory } from "@/utils/workspace"
@@ -58,7 +58,7 @@ export function PromptWorkspaceSelector(props: {
   return (
     <>
       <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
-      <TooltipV2
+      <Tooltip
         placement="top"
         openDelay={800}
         value={
@@ -77,8 +77,8 @@ export function PromptWorkspaceSelector(props: {
         contentClass={props.onboarding ? "max-w-[280px]" : undefined}
         class="min-w-0"
       >
-        <MenuV2 placement="bottom" gutter={4} onOpenChange={onOpenChange}>
-          <MenuV2.Trigger
+        <Menu placement="bottom" gutter={4} onOpenChange={onOpenChange}>
+          <Menu.Trigger
             aria-description={language.t("session.new.workspace.trigger.tooltip")}
             class="flex h-6 min-w-0 max-w-[203px] items-center gap-1.5 rounded-sm px-1.5 hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed data-[expanded]:text-v2-text-text-muted"
           >
@@ -92,14 +92,14 @@ export function PromptWorkspaceSelector(props: {
               />
             </Show>
             <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-          </MenuV2.Trigger>
-          <MenuV2.Portal>
-            <MenuV2.Content class="w-[200px]">
-              <MenuV2.Group>
-                <MenuV2.GroupLabel>{language.t("session.new.workspace.runIn")}</MenuV2.GroupLabel>
-                <MenuV2.Item onSelect={() => select("main")}>
+          </Menu.Trigger>
+          <Menu.Portal>
+            <Menu.Content class="w-[200px]">
+              <Menu.Group>
+                <Menu.GroupLabel>{language.t("session.new.workspace.runIn")}</Menu.GroupLabel>
+                <Menu.Item onSelect={() => select("main")}>
                   <Icon name="monitor" />
-                  <TooltipV2
+                  <Tooltip
                     placement="right"
                     openDelay={800}
                     value={
@@ -113,14 +113,14 @@ export function PromptWorkspaceSelector(props: {
                     class="min-w-0 flex-1"
                   >
                     <span class="min-w-0 truncate">{language.t("session.new.workspace.local")}</span>
-                  </TooltipV2>
+                  </Tooltip>
                   <Show when={selected() === "main"}>
                     <Icon name="check" size="small" class="shrink-0" />
                   </Show>
-                </MenuV2.Item>
-                <MenuV2.Item onSelect={() => select("create")}>
+                </Menu.Item>
+                <Menu.Item onSelect={() => select("create")}>
                   <Icon name="workspace-new" />
-                  <TooltipV2
+                  <Tooltip
                     placement="right"
                     openDelay={800}
                     value={
@@ -134,25 +134,25 @@ export function PromptWorkspaceSelector(props: {
                     class="min-w-0 flex-1"
                   >
                     <span class="min-w-0 truncate">{language.t("workspace.new")}</span>
-                  </TooltipV2>
+                  </Tooltip>
                   <Show when={selected() === "create"}>
                     <Icon name="check" size="small" class="shrink-0" />
                   </Show>
-                </MenuV2.Item>
-              </MenuV2.Group>
+                </Menu.Item>
+              </Menu.Group>
               <Show
                 when={props.workspaces.length > 0}
                 fallback={
                   <>
-                    <MenuV2.Separator class="h-[0.5px]" />
-                    <MenuV2.Item onSelect={() => (pending = { type: "viewAll" })}>
+                    <Menu.Separator class="h-[0.5px]" />
+                    <Menu.Item onSelect={() => (pending = { type: "viewAll" })}>
                       <span class="min-w-0 flex-1 truncate">{language.t("common.viewAll")}</span>
-                    </MenuV2.Item>
+                    </Menu.Item>
                   </>
                 }
               >
-                <MenuV2.Separator class="h-[0.5px]" />
-                <MenuV2.Sub
+                <Menu.Separator class="h-[0.5px]" />
+                <Menu.Sub
                   gutter={0}
                   overlap
                   overflowPadding={8}
@@ -166,7 +166,7 @@ export function PromptWorkspaceSelector(props: {
                     requestAnimationFrame(() => searchInput?.focus())
                   }}
                 >
-                  <MenuV2.SubTrigger
+                  <Menu.SubTrigger
                     onKeyDown={(event) => {
                       if (
                         event.key === "ArrowRight" ||
@@ -181,9 +181,9 @@ export function PromptWorkspaceSelector(props: {
                     <span class="min-w-0 flex-1 truncate">
                       {language.t("session.new.workspace.existing").replace(/(…|\.{3})$/, "")}
                     </span>
-                  </MenuV2.SubTrigger>
-                  <MenuV2.Portal>
-                    <MenuV2.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
+                  </Menu.SubTrigger>
+                  <Menu.Portal>
+                    <Menu.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
                       <Show when={props.workspaces.length >= 10}>
                         <div class="flex h-7 items-center gap-2 rounded-sm ps-3 pe-2 text-v2-icon-icon-muted">
                           <Icon name="magnifying-glass" size="small" class="shrink-0" />
@@ -211,27 +211,27 @@ export function PromptWorkspaceSelector(props: {
                       </Show>
                       <For each={workspaces()}>
                         {(workspace) => (
-                          <MenuV2.Item onSelect={() => select(workspace)}>
+                          <Menu.Item onSelect={() => select(workspace)}>
                             <Icon name="workspace-isolated" />
                             <span class="min-w-0 flex-1 truncate">{getFilename(workspace)}</span>
                             <Show when={selected() === workspace}>
                               <Icon name="check" size="small" class="shrink-0" />
                             </Show>
-                          </MenuV2.Item>
+                          </Menu.Item>
                         )}
                       </For>
-                      <MenuV2.Separator class="h-[0.5px]" />
-                      <MenuV2.Item onSelect={() => (pending = { type: "viewAll" })}>
+                      <Menu.Separator class="h-[0.5px]" />
+                      <Menu.Item onSelect={() => (pending = { type: "viewAll" })}>
                         <span class="min-w-0 flex-1 truncate">{language.t("common.viewAll")}</span>
-                      </MenuV2.Item>
-                    </MenuV2.SubContent>
-                  </MenuV2.Portal>
-                </MenuV2.Sub>
+                      </Menu.Item>
+                    </Menu.SubContent>
+                  </Menu.Portal>
+                </Menu.Sub>
               </Show>
-            </MenuV2.Content>
-          </MenuV2.Portal>
-        </MenuV2>
-      </TooltipV2>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+      </Tooltip>
       <PromptGitStatus branch={props.branch} from={selected() === "create"} class="ms-1" />
     </>
   )
@@ -255,7 +255,7 @@ export function PromptGitStatus(props: { branch?: string; noGit?: boolean; from?
   return (
     <Show when={label()}>
       {(value) => (
-        <TooltipV2
+        <Tooltip
           placement="top"
           value={value()}
           class={`min-w-0 max-w-[220px] ${props.class ?? ""}`}
@@ -265,7 +265,7 @@ export function PromptGitStatus(props: { branch?: string; noGit?: boolean; from?
             <Icon name={icon()} size="small" class="shrink-0 text-v2-icon-icon-muted" />
             <span class="min-w-0 truncate">{value()}</span>
           </div>
-        </TooltipV2>
+        </Tooltip>
       )}
     </Show>
   )
diff --git a/packages/app/src/components/server/server-row-menu.tsx b/packages/app/src/components/server/server-row-menu.tsx
index bf4eb2a7fc9..674da9f2445 100644
--- a/packages/app/src/components/server/server-row-menu.tsx
+++ b/packages/app/src/components/server/server-row-menu.tsx
@@ -1,6 +1,6 @@
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Menu } from "@opencode-ai/ui/menu"
 import { type Component, Show } from "solid-js"
 import type { ServerActionsController } from "@/components/server/server-management-controller"
 import { useLanguage } from "@/context/language"
@@ -59,19 +59,19 @@ export const ServerRowMenuView: Component<{
   const builtin = () => ServerConnection.builtin(props.server)
   const httpServer = () => (props.server.type === "http" ? props.server : undefined)
   return (
-    <MenuV2 gutter={6} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
-      <MenuV2.Trigger
-        as={IconButtonV2}
+    <Menu gutter={6} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
+      <Menu.Trigger
+        as={IconButton}
         variant="ghost-muted"
         size="small"
-        icon={<IconV2 name="outline-dots" />}
+        icon={<Icon name="outline-dots" />}
         aria-label={props.labels.more}
       />
-      <MenuV2.Portal>
-        <MenuV2.Content>
-          <MenuV2.Group>
-            <MenuV2.GroupLabel>{props.labels.server}</MenuV2.GroupLabel>
-            <MenuV2.Item
+      <Menu.Portal>
+        <Menu.Content>
+          <Menu.Group>
+            <Menu.GroupLabel>{props.labels.server}</Menu.GroupLabel>
+            <Menu.Item
               disabled={builtin() || !httpServer()}
               onSelect={() => {
                 const server = httpServer()
@@ -79,20 +79,20 @@ export const ServerRowMenuView: Component<{
               }}
             >
               {props.labels.edit}
-            </MenuV2.Item>
+            </Menu.Item>
             <Show when={props.canDefault && !props.isDefault}>
-              <MenuV2.Item onSelect={props.onSetDefault}>{props.labels.default}</MenuV2.Item>
+              <Menu.Item onSelect={props.onSetDefault}>{props.labels.default}</Menu.Item>
             </Show>
             <Show when={props.canDefault && props.isDefault}>
-              <MenuV2.Item onSelect={props.onRemoveDefault}>{props.labels.defaultRemove}</MenuV2.Item>
+              <Menu.Item onSelect={props.onRemoveDefault}>{props.labels.defaultRemove}</Menu.Item>
             </Show>
             <Show when={props.canRemove}>
-              <MenuV2.Separator />
-              <MenuV2.Item onSelect={props.onRemove}>{props.labels.delete}</MenuV2.Item>
+              <Menu.Separator />
+              <Menu.Item onSelect={props.onRemove}>{props.labels.delete}</Menu.Item>
             </Show>
-          </MenuV2.Group>
-        </MenuV2.Content>
-      </MenuV2.Portal>
-    </MenuV2>
+          </Menu.Group>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
   )
 }
diff --git a/packages/app/src/components/server/server-row.tsx b/packages/app/src/components/server/server-row.tsx
index 8bcf4db51ff..578c6959d30 100644
--- a/packages/app/src/components/server/server-row.tsx
+++ b/packages/app/src/components/server/server-row.tsx
@@ -64,6 +64,7 @@ export function ServerRow(props: ServerRowProps) {
 
   return (
     <Tooltip
+      appearance="standard"
       class="flex-1 min-w-0"
       value={tooltipValue()}
       contentStyle={{ "max-width": "none", "white-space": "nowrap" }}
diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx
index 11d12d031e7..d34ffe83ac1 100644
--- a/packages/app/src/components/session-context-usage.tsx
+++ b/packages/app/src/components/session-context-usage.tsx
@@ -1,8 +1,7 @@
 import { Show, createMemo, type ComponentProps, type JSX } from "solid-js"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
-import { ProgressCircleV2 } from "@opencode-ai/ui/v2/progress-circle-v2"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { createMediaQuery } from "@solid-primitives/media"
 
 import { useFile } from "@/context/file"
@@ -16,7 +15,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 
 interface SessionContextUsageProps {
   variant?: "button" | "indicator"
-  placement?: ComponentProps<typeof TooltipV2>["placement"]
+  placement?: ComponentProps<typeof Tooltip>["placement"]
 }
 
 function ContextTooltipRow(props: { name: JSX.Element; value: JSX.Element }) {
@@ -111,24 +110,21 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
   const circle = () => (
     <div class="flex items-center justify-center">
       <ProgressCircle
+        appearance="indicator"
         size={16}
         strokeWidth={2}
         percentage={context()?.usage ?? 0}
-        style={
-          variant() === "indicator"
-            ? {
-                "--progress-circle-background": "var(--v2-background-bg-layer-04, var(--border-weak-base))",
-                "--progress-circle-background-overlay": "var(--v2-overlay-simple-overlay-pressed, transparent)",
-                "--progress-circle-progress": "var(--v2-icon-icon-base, var(--icon-base))",
-              }
-            : undefined
-        }
+        style={{
+          "--progress-circle-background": "var(--v2-background-bg-layer-04, var(--border-weak-base))",
+          "--progress-circle-background-overlay": "var(--v2-overlay-simple-overlay-pressed, transparent)",
+          "--progress-circle-progress": "var(--v2-icon-icon-base, var(--icon-base))",
+        }}
       />
     </div>
   )
   const circleV2 = () => (
     <div class="flex items-center justify-center">
-      <ProgressCircleV2 percentage={context()?.usage ?? 0} />
+      <ProgressCircle appearance="compact" percentage={context()?.usage ?? 0} />
     </div>
   )
 
@@ -145,11 +141,11 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   return (
     <Show when={params.id}>
-      <TooltipV2 value={tooltipValue()} placement={props.placement ?? "top"} shift={-8}>
+      <Tooltip value={tooltipValue()} placement={props.placement ?? "top"} shift={-8}>
         <Show
           when={variant() === "indicator"}
           fallback={
-            <IconButtonV2
+            <IconButton
               type="button"
               variant="ghost-muted"
               size="large"
@@ -161,7 +157,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
         >
           {circle()}
         </Show>
-      </TooltipV2>
+      </Tooltip>
     </Show>
   )
 }
diff --git a/packages/app/src/components/session-workspace-menu.tsx b/packages/app/src/components/session-workspace-menu.tsx
index 7791ac261ab..c49207af049 100644
--- a/packages/app/src/components/session-workspace-menu.tsx
+++ b/packages/app/src/components/session-workspace-menu.tsx
@@ -1,5 +1,5 @@
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { Icon } from "@opencode-ai/ui/v2/icon"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Icon } from "@opencode-ai/ui/icon"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { createStore } from "solid-js/store"
 import { createSignal, For, Show, type ComponentProps, type JSX } from "solid-js"
@@ -17,7 +17,7 @@ export function SessionWorkspaceMenu(props: {
   sessionID: string
   project: Project
   directory: string
-  placement?: ComponentProps<typeof MenuV2>["placement"]
+  placement?: ComponentProps<typeof Menu>["placement"]
   gutter?: number
   class?: string
   contentClass?: string
@@ -71,57 +71,57 @@ export function SessionWorkspaceMenu(props: {
   }
 
   return (
-    <MenuV2
+    <Menu
       placement={props.placement ?? "bottom-end"}
       gutter={props.gutter ?? 4}
       modal={false}
       onOpenChange={onOpenChange}
     >
-      <MenuV2.Trigger class={props.class} disabled={blocked()}>
+      <Menu.Trigger class={props.class} disabled={blocked()}>
         {props.children}
-      </MenuV2.Trigger>
-      <MenuV2.Portal>
-        <MenuV2.Content class={`w-[200px] ${props.contentClass ?? ""}`}>
-          <MenuV2.Group>
-            <MenuV2.GroupLabel>{language.t("workspace.move.menu.title")}</MenuV2.GroupLabel>
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Content class={`w-[200px] ${props.contentClass ?? ""}`}>
+          <Menu.Group>
+            <Menu.GroupLabel>{language.t("workspace.move.menu.title")}</Menu.GroupLabel>
             <Show when={pathKey(props.directory) !== pathKey(props.project.worktree)}>
-              <MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move(props.project.worktree)}>
+              <Menu.Item disabled={!!store.selected || blocked()} onSelect={() => void move(props.project.worktree)}>
                 <Icon name="monitor" />
                 {language.t("session.new.workspace.local")}
-              </MenuV2.Item>
+              </Menu.Item>
             </Show>
-            <MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move("create")}>
+            <Menu.Item disabled={!!store.selected || blocked()} onSelect={() => void move("create")}>
               <Icon name="workspace-new" />
               {language.t("workspace.new")}
-            </MenuV2.Item>
+            </Menu.Item>
             <Show when={workspaces().length > 0}>
-              <MenuV2.Sub gutter={0} overlap overflowPadding={8}>
-                <MenuV2.SubTrigger>
+              <Menu.Sub gutter={0} overlap overflowPadding={8}>
+                <Menu.SubTrigger>
                   <Icon name="workspace-isolated" />
                   {language.t("session.new.workspace.existing").replace(/(…|\.{3})$/, "")}
-                </MenuV2.SubTrigger>
-                <MenuV2.Portal>
-                  <MenuV2.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
+                </Menu.SubTrigger>
+                <Menu.Portal>
+                  <Menu.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
                     <For each={workspaces()}>
                       {(workspace) => (
-                        <MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move(workspace)}>
+                        <Menu.Item disabled={!!store.selected || blocked()} onSelect={() => void move(workspace)}>
                           <Icon name="workspace-isolated" />
                           <span class="min-w-0 flex-1 truncate">{getFilename(workspace)}</span>
-                        </MenuV2.Item>
+                        </Menu.Item>
                       )}
                     </For>
-                  </MenuV2.SubContent>
-                </MenuV2.Portal>
-              </MenuV2.Sub>
+                  </Menu.SubContent>
+                </Menu.Portal>
+              </Menu.Sub>
             </Show>
-          </MenuV2.Group>
-          <MenuV2.Separator class="h-[0.5px] bg-v2-border-border-base" />
-          <MenuV2.Item onSelect={() => openWorkspaces()}>
+          </Menu.Group>
+          <Menu.Separator class="h-[0.5px] bg-v2-border-border-base" />
+          <Menu.Item onSelect={() => openWorkspaces()}>
             <span class="min-w-0 flex-1 truncate">{language.t("common.viewAll")}</span>
-          </MenuV2.Item>
-        </MenuV2.Content>
-      </MenuV2.Portal>
-    </MenuV2>
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
   )
 }
 
diff --git a/packages/app/src/components/session/open-in-app-v2.tsx b/packages/app/src/components/session/open-in-app-v2.tsx
index e26ff2e0eab..79337673745 100644
--- a/packages/app/src/components/session/open-in-app-v2.tsx
+++ b/packages/app/src/components/session/open-in-app-v2.tsx
@@ -2,10 +2,9 @@ import { For, Show } from "solid-js"
 import { AppIcon } from "@opencode-ai/ui/app-icon"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { SplitButtonV2, SplitButtonV2Action, SplitButtonV2MenuTrigger } from "@opencode-ai/ui/v2/split-button-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Menu } from "@opencode-ai/ui/menu"
+import { SplitButton, SplitButtonAction, SplitButtonMenuTrigger } from "@opencode-ai/ui/split-button"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useLanguage } from "@/context/language"
 import { type OpenApp, useOpenInApp } from "@/components/session/open-in-app"
 
@@ -15,13 +14,13 @@ export function OpenInAppV2(props: { directory: () => string }) {
 
   return (
     <Show when={props.directory() && state.canOpen()}>
-      <SplitButtonV2 class="session-review-v2-open-in-app" onPointerDown={(event) => event.stopPropagation()}>
-        <TooltipV2
+      <SplitButton class="session-review-v2-open-in-app" onPointerDown={(event) => event.stopPropagation()}>
+        <Tooltip
           placement="bottom"
           value={language.t("session.header.open.ariaLabel", { app: state.current().label })}
           class="flex items-center"
         >
-          <SplitButtonV2Action
+          <SplitButtonAction
             onPointerDown={(event) => event.stopPropagation()}
             onClick={(event) => {
               event.stopPropagation()
@@ -34,28 +33,28 @@ export function OpenInAppV2(props: { directory: () => string }) {
             <Show when={state.opening()} fallback={<AppIcon id={state.current().icon} class="size-[18px]" />}>
               <Spinner class="size-3.5" />
             </Show>
-          </SplitButtonV2Action>
-        </TooltipV2>
-        <MenuV2
+          </SplitButtonAction>
+        </Tooltip>
+        <Menu
           gutter={4}
           modal={false}
           placement="bottom-end"
           open={state.menu.open}
           onOpenChange={(open) => state.setMenu("open", open)}
         >
-          <MenuV2.Trigger
-            as={SplitButtonV2MenuTrigger}
+          <Menu.Trigger
+            as={SplitButtonMenuTrigger}
             disabled={state.opening()}
             aria-label={language.t("session.header.open.menu")}
             onPointerDown={(event) => event.stopPropagation()}
           >
-            <IconV2 name="chevron-down" size="small" />
-          </MenuV2.Trigger>
-          <MenuV2.Portal>
-            <MenuV2.Content class="open-in-app-v2-menu">
-              <MenuV2.Group>
-                <MenuV2.GroupLabel>{language.t("session.header.openIn")}</MenuV2.GroupLabel>
-                <MenuV2.RadioGroup
+            <Icon name="chevron-down" size="small" />
+          </Menu.Trigger>
+          <Menu.Portal>
+            <Menu.Content class="open-in-app-v2-menu">
+              <Menu.Group>
+                <Menu.GroupLabel>{language.t("session.header.openIn")}</Menu.GroupLabel>
+                <Menu.RadioGroup
                   value={state.current().id}
                   onChange={(value) => {
                     state.selectApp(value as OpenApp)
@@ -63,7 +62,7 @@ export function OpenInAppV2(props: { directory: () => string }) {
                 >
                   <For each={state.options()}>
                     {(option) => (
-                      <MenuV2.RadioItem
+                      <Menu.RadioItem
                         value={option.id}
                         disabled={state.opening()}
                         onSelect={() => {
@@ -74,13 +73,13 @@ export function OpenInAppV2(props: { directory: () => string }) {
                       >
                         <AppIcon id={option.icon} />
                         {option.label}
-                      </MenuV2.RadioItem>
+                      </Menu.RadioItem>
                     )}
                   </For>
-                </MenuV2.RadioGroup>
-              </MenuV2.Group>
-              <MenuV2.Separator />
-              <MenuV2.Item
+                </Menu.RadioGroup>
+              </Menu.Group>
+              <Menu.Separator />
+              <Menu.Item
                 onSelect={() => {
                   state.setMenu("open", false)
                   state.copyPath()
@@ -88,11 +87,11 @@ export function OpenInAppV2(props: { directory: () => string }) {
               >
                 <Icon name="copy" size="small" class="text-icon-weak" />
                 {language.t("session.header.open.copyPath")}
-              </MenuV2.Item>
-            </MenuV2.Content>
-          </MenuV2.Portal>
-        </MenuV2>
-      </SplitButtonV2>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+      </SplitButton>
     </Show>
   )
 }
diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index 2719f4c9faa..4f7b8a5ae0a 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { createMemo, Show } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
 import { Portal } from "solid-js/web"
@@ -7,10 +6,10 @@ import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { StatusPopoverV2 } from "../status-popover"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { reviewTooltipKeybind } from "../command-tooltip-keybind"
 import { useTitlebarRightMount } from "../titlebar"
 
@@ -60,24 +59,24 @@ function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
   return (
     <div class="flex items-center gap-2">
       <Show when={props.state.statusVisible}>
-        <Tooltip placement="bottom" value={props.state.statusLabel}>
+        <Tooltip appearance="standard" placement="bottom" value={props.state.statusLabel}>
           <StatusPopoverV2 />
         </Tooltip>
       </Show>
       <Show when={props.state.reviewVisible}>
-        <TooltipV2
+        <Tooltip
           class="shrink-0"
           placement="bottom"
           value={
             <>
               {props.state.reviewLabel}
               <Show when={props.state.reviewKeybind.length > 0}>
-                <KeybindV2 keys={props.state.reviewKeybind} variant="neutral" />
+                <Keybind keys={props.state.reviewKeybind} variant="neutral" />
               </Show>
             </>
           }
         >
-          <IconButtonV2
+          <IconButton
             type="button"
             variant="ghost-muted"
             size="large"
@@ -87,9 +86,9 @@ function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
             aria-label={props.state.reviewLabel}
             aria-expanded={props.state.reviewOpened}
             aria-controls="review-panel"
-            icon={<IconV2 name="sidebar-right" />}
+            icon={<Icon name="sidebar-right" />}
           />
-        </TooltipV2>
+        </Tooltip>
       </Show>
     </div>
   )
diff --git a/packages/app/src/components/session/session-sortable-tab-v2.tsx b/packages/app/src/components/session/session-sortable-tab-v2.tsx
index a78c286cf03..edf1e55ecdb 100644
--- a/packages/app/src/components/session/session-sortable-tab-v2.tsx
+++ b/packages/app/src/components/session/session-sortable-tab-v2.tsx
@@ -1,9 +1,8 @@
 import { createMemo, Show } from "solid-js"
 import type { JSX } from "solid-js"
 import { useSortable } from "@dnd-kit/solid/sortable"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
@@ -40,31 +39,29 @@ export function SortableTabV2(props: {
       <div class="relative">
         <Tabs.Trigger
           value={props.tab}
+          onMiddleClick={() => props.onTabClose(props.tab)}
+          onDblClick={() => props.onTabDoubleClick?.(props.tab)}
           closeButton={
-            <TooltipV2
+            <Tooltip
               value={
                 <>
                   {language.t("common.closeTab")}
                   <Show when={closeTabKeybind().length > 0}>
-                    <KeybindV2 keys={closeTabKeybind()} variant="neutral" />
+                    <Keybind keys={closeTabKeybind()} variant="neutral" />
                   </Show>
                 </>
               }
               placement="bottom"
               gutter={10}
             >
-              <IconButton
-                icon="close-small"
-                variant="ghost"
+              <Tabs.CloseButton
                 class="h-5 w-5"
                 onClick={() => props.onTabClose(props.tab)}
                 aria-label={language.t("common.closeTab")}
               />
-            </TooltipV2>
+            </Tooltip>
           }
           hideCloseButton
-          onMiddleClick={() => props.onTabClose(props.tab)}
-          onDblClick={() => props.onTabDoubleClick?.(props.tab)}
         >
           <Show when={content()}>{(value) => value()}</Show>
         </Tabs.Trigger>
diff --git a/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx b/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx
index 2e66923bdd0..dc63bf08a51 100644
--- a/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx
+++ b/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx
@@ -2,9 +2,8 @@ import type { JSX } from "solid-js"
 import { Show, createEffect, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useSortable } from "@dnd-kit/solid/sortable"
-import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { Menu } from "@opencode-ai/ui/menu"
 import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
 import { useTerminal, type LocalPTY } from "@/context/terminal"
 import { useLanguage } from "@/context/language"
@@ -116,8 +115,8 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
 
   return (
     <div ref={sortable.ref} class="h-full flex items-center outline-none focus:outline-none focus-visible:outline-none">
-      <MenuV2.Context>
-        <MenuV2.Context.Trigger class="relative" as="div">
+      <Menu.Context>
+        <Menu.Context.Trigger class="relative" as="div">
           <Tabs.Trigger
             value={props.terminal.id}
             onMouseDown={(e) => {
@@ -131,20 +130,11 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
               if (e.detail > 0) return
               focus()
             }}
+            onMiddleClick={close}
             closeButton={
-              <IconButton
-                icon="close-small"
-                variant="ghost"
-                class="h-5 w-5"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  close()
-                }}
-                aria-label={language.t("terminal.close")}
-              />
+              <Tabs.CloseButton class="h-5 w-5" onClick={close} aria-label={language.t("terminal.close")} />
             }
             hideCloseButton
-            onMiddleClick={close}
           >
             <span
               class="truncate"
@@ -169,9 +159,9 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
               />
             </div>
           </Show>
-        </MenuV2.Context.Trigger>
-        <MenuV2.Context.Portal>
-          <MenuV2.Context.Content
+        </Menu.Context.Trigger>
+        <Menu.Context.Portal>
+          <Menu.Context.Content
             onCloseAutoFocus={(e) => {
               if (!editRequested) return
               e.preventDefault()
@@ -179,11 +169,11 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
               requestAnimationFrame(() => edit())
             }}
           >
-            <MenuV2.Item onSelect={() => (editRequested = true)}>{language.t("common.rename")}</MenuV2.Item>
-            <MenuV2.Item onSelect={close}>{language.t("common.close")}</MenuV2.Item>
-          </MenuV2.Context.Content>
-        </MenuV2.Context.Portal>
-      </MenuV2.Context>
+            <Menu.Item onSelect={() => (editRequested = true)}>{language.t("common.rename")}</Menu.Item>
+            <Menu.Item onSelect={close}>{language.t("common.close")}</Menu.Item>
+          </Menu.Context.Content>
+        </Menu.Context.Portal>
+      </Menu.Context>
     </div>
   )
 }
diff --git a/packages/app/src/components/settings-keybinds.tsx b/packages/app/src/components/settings-keybinds.tsx
index 3a504164368..aa08a8f0acf 100644
--- a/packages/app/src/components/settings-keybinds.tsx
+++ b/packages/app/src/components/settings-keybinds.tsx
@@ -1,9 +1,9 @@
 import { For, Show, createMemo, lazy, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { showToast } from "@/utils/toast"
 import fuzzysort from "fuzzysort"
 import { DEFAULT_PALETTE_KEYBIND, formatKeybind, parseKeybind, useCommand } from "@/context/command"
@@ -11,7 +11,7 @@ import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { SettingsListV2 } from "./settings-v2/parts/list"
 
-const IconV2 = lazy(() => import("@opencode-ai/ui/v2/icon").then((module) => ({ default: module.Icon })))
+const Icon = lazy(() => import("@opencode-ai/ui/icon").then((module) => ({ default: module.Icon })))
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 const PALETTE_ID = "command.palette"
@@ -387,12 +387,12 @@ function SettingsKeybindsV2View(props: {
             <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.shortcuts.description")}</span>
           </div>
-          <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides}>
+          <Button variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides}>
             {language.t("settings.shortcuts.reset.button")}
-          </ButtonV2>
+          </Button>
         </div>
         <div class="settings-v2-tab-search">
-          <TextInputV2
+          <TextInput
             type="search"
             appearance="base"
             value={store.filter}
@@ -405,12 +405,12 @@ function SettingsKeybindsV2View(props: {
             aria-label={language.t("settings.shortcuts.search.placeholder")}
           />
           <Show when={store.filter}>
-            <IconButtonV2
+            <IconButton
               type="button"
               variant="ghost-muted"
               size="small"
               class="settings-v2-tab-search-clear"
-              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+              icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
               onClick={() => setStore("filter", "")}
             />
           </Show>
diff --git a/packages/app/src/components/settings-v2/appearance.tsx b/packages/app/src/components/settings-v2/appearance.tsx
index beb72b0b850..5ccb7f84deb 100644
--- a/packages/app/src/components/settings-v2/appearance.tsx
+++ b/packages/app/src/components/settings-v2/appearance.tsx
@@ -1,6 +1,6 @@
 import { Component, createMemo } from "solid-js"
-import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Select } from "@opencode-ai/ui/select"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { useLanguage } from "@/context/language"
 import { ExternalLink } from "../external-link"
 import { SettingsListV2 } from "./parts/list"
@@ -42,7 +42,7 @@ const FontSetting: Component<{
   return (
     <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
       <div class="w-full sm:w-[220px]">
-        <TextInputV2
+        <TextInput
           data-action={config().action}
           type="text"
           appearance="base"
@@ -83,8 +83,7 @@ export const SettingsAppearanceV2: Component = () => {
               title={language.t("settings.general.row.colorScheme.title")}
               description={language.t("settings.general.row.colorScheme.description")}
             >
-              <SelectV2
-                appearance="inline"
+              <Select
                 data-action="settings-color-scheme"
                 options={schemeOptions}
                 current={schemeOptions.find((option) => option === appearance.scheme.current())}
@@ -110,8 +109,7 @@ export const SettingsAppearanceV2: Component = () => {
                 </>
               }
             >
-              <SelectV2
-                appearance="inline"
+              <Select
                 data-action="settings-theme"
                 options={appearance.theme.options()}
                 current={appearance.theme.current()}
diff --git a/packages/app/src/components/settings-v2/dialog-server-v2.tsx b/packages/app/src/components/settings-v2/dialog-server-v2.tsx
index dade65ae089..0018c63d8f2 100644
--- a/packages/app/src/components/settings-v2/dialog-server-v2.tsx
+++ b/packages/app/src/components/settings-v2/dialog-server-v2.tsx
@@ -1,7 +1,7 @@
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
-import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
+import { Divider } from "@opencode-ai/ui/divider"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useMutation } from "@tanstack/solid-query"
 import { type Component, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
@@ -69,12 +69,12 @@ export const DialogServerV2: Component<{
       <DialogHeader hideClose={true}>
         <DialogTitle>{title()}</DialogTitle>
       </DialogHeader>
-      <DividerV2 />
+      <Divider />
       <DialogBody class="flex w-full min-w-0 flex-1 flex-col px-4 pt-4 pb-2">
         <div class="flex w-full min-w-0 flex-col gap-6">
           <div class="flex w-full min-w-0 flex-col gap-2">
             <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.url")}</label>
-            <TextInputV2
+            <TextInput
               type="text"
               appearance="large"
               class="!w-full self-stretch"
@@ -92,7 +92,7 @@ export const DialogServerV2: Component<{
           </div>
           <div class="flex w-full min-w-0 flex-col gap-2">
             <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.name")}</label>
-            <TextInputV2
+            <TextInput
               type="text"
               appearance="large"
               class="!w-full self-stretch"
@@ -106,7 +106,7 @@ export const DialogServerV2: Component<{
           <div class="grid w-full min-w-0 grid-cols-2 gap-4">
             <div class="flex min-w-0 flex-col gap-2">
               <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.username")}</label>
-              <TextInputV2
+              <TextInput
                 type="text"
                 appearance="large"
                 class="!w-full self-stretch"
@@ -119,7 +119,7 @@ export const DialogServerV2: Component<{
             </div>
             <div class="flex min-w-0 flex-col gap-2">
               <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.password")}</label>
-              <TextInputV2
+              <TextInput
                 type="password"
                 appearance="large"
                 class="!w-full self-stretch"
@@ -134,12 +134,12 @@ export const DialogServerV2: Component<{
         </div>
       </DialogBody>
       <DialogFooter>
-        <ButtonV2 variant="neutral" disabled={form.state.busy()} onClick={() => dialog.close()}>
+        <Button variant="neutral" disabled={form.state.busy()} onClick={() => dialog.close()}>
           {language.t("common.cancel")}
-        </ButtonV2>
-        <ButtonV2 variant="contrast" disabled={form.state.busy()} onClick={form.submit}>
+        </Button>
+        <Button variant="contrast" disabled={form.state.busy()} onClick={form.submit}>
           {submitLabel()}
-        </ButtonV2>
+        </Button>
       </DialogFooter>
     </Dialog>
   )
diff --git a/packages/app/src/components/settings-v2/dialog-settings-v2.tsx b/packages/app/src/components/settings-v2/dialog-settings-v2.tsx
index c1fc459e84c..5b47a1b37bd 100644
--- a/packages/app/src/components/settings-v2/dialog-settings-v2.tsx
+++ b/packages/app/src/components/settings-v2/dialog-settings-v2.tsx
@@ -1,6 +1,6 @@
 import { Component, createEffect, createMemo, createSignal, startTransition } from "solid-js"
-import { Dialog } from "@opencode-ai/ui/v2/dialog-v2"
-import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { Tabs } from "@opencode-ai/ui/tabs"
 import { Icon } from "@opencode-ai/ui/icon"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
@@ -73,66 +73,66 @@ export const DialogSettings: Component<{
 
   return (
     <Dialog size="x-large" variant="settings" class="settings-v2-dialog">
-      <TabsV2
+      <Tabs
         orientation="vertical"
         variant="settings"
         value={tab()}
         onChange={(value) => void startTransition(() => setTab(value))}
         class="settings-v2"
       >
-        <TabsV2.List>
+        <Tabs.List>
           <div class="flex flex-col justify-between h-full w-full">
             <div class="flex flex-col gap-4 w-full">
               {/* Group 1: Preferences */}
               <div class="flex flex-col gap-1 w-full">
-                <TabsV2.Trigger value="general">
+                <Tabs.Trigger value="general">
                   <Icon name="sliders" />
                   {language.t("settings.tab.preferences")}
-                </TabsV2.Trigger>
-                <TabsV2.Trigger value="appearance">
+                </Tabs.Trigger>
+                <Tabs.Trigger value="appearance">
                   <Icon name="appearance" />
                   {language.t("settings.general.section.appearance")}
-                </TabsV2.Trigger>
-                <TabsV2.Trigger value="notifications">
+                </Tabs.Trigger>
+                <Tabs.Trigger value="notifications">
                   <Icon name="notifications" />
                   {language.t("settings.tab.notifications")}
-                </TabsV2.Trigger>
-                <TabsV2.Trigger value="shortcuts">
+                </Tabs.Trigger>
+                <Tabs.Trigger value="shortcuts">
                   <Icon name="keyboard" />
                   {language.t("settings.tab.shortcuts")}
-                </TabsV2.Trigger>
+                </Tabs.Trigger>
               </div>
 
               {/* Group 2: Environment & Workspaces */}
               <div class="flex flex-col gap-1 w-full">
-                <TabsV2.Trigger value="servers">
+                <Tabs.Trigger value="servers">
                   <Icon name="server" />
                   {language.t("status.popover.tab.servers")}
-                </TabsV2.Trigger>
-                <TabsV2.Trigger value="projects">
+                </Tabs.Trigger>
+                <Tabs.Trigger value="projects">
                   <Icon name="folder" />
                   {language.t("settings.tab.projects")}
-                </TabsV2.Trigger>
-                <TabsV2.Trigger value="workspaces">
+                </Tabs.Trigger>
+                <Tabs.Trigger value="workspaces">
                   <Icon name="workspace-isolated" />
                   {language.t("settings.tab.workspaces")}
-                </TabsV2.Trigger>
+                </Tabs.Trigger>
               </div>
 
               {/* Group 3: Capabilities & Extensions */}
               <div class="flex flex-col gap-1 w-full">
-                <TabsV2.Trigger value="providers">
+                <Tabs.Trigger value="providers">
                   <Icon name="providers" />
                   {language.t("settings.providers.title")}
-                </TabsV2.Trigger>
-                <TabsV2.Trigger value="models">
+                </Tabs.Trigger>
+                <Tabs.Trigger value="models">
                   <Icon name="models" />
                   {language.t("settings.models.title")}
-                </TabsV2.Trigger>
-                <TabsV2.Trigger value="extensions">
+                </Tabs.Trigger>
+                <Tabs.Trigger value="extensions">
                   <Icon name="extensions" />
                   {language.t("settings.tab.extensions")}
-                </TabsV2.Trigger>
+                </Tabs.Trigger>
               </div>
             </div>
 
@@ -141,41 +141,41 @@ export const DialogSettings: Component<{
               <span>v{platform.version}</span>
             </div>
           </div>
-        </TabsV2.List>
+        </Tabs.List>
 
-        <TabsV2.Content value="general" class="settings-v2-panel">
+        <Tabs.Content value="general" class="settings-v2-panel">
           <SettingsGeneral server={server()} sessionID={props.sessionID} />
-        </TabsV2.Content>
-        <TabsV2.Content value="appearance" class="settings-v2-panel">
+        </Tabs.Content>
+        <Tabs.Content value="appearance" class="settings-v2-panel">
           <SettingsAppearanceV2 />
-        </TabsV2.Content>
-        <TabsV2.Content value="notifications" class="settings-v2-panel">
+        </Tabs.Content>
+        <Tabs.Content value="notifications" class="settings-v2-panel">
           <SettingsNotificationsV2 />
-        </TabsV2.Content>
-        <TabsV2.Content value="shortcuts" class="settings-v2-panel">
+        </Tabs.Content>
+        <Tabs.Content value="shortcuts" class="settings-v2-panel">
           <SettingsKeybinds />
-        </TabsV2.Content>
-        <TabsV2.Content value="servers" class="settings-v2-panel">
+        </Tabs.Content>
+        <Tabs.Content value="servers" class="settings-v2-panel">
           <SettingsServersV2 />
-        </TabsV2.Content>
-        <TabsV2.Content value="projects" class="settings-v2-panel">
+        </Tabs.Content>
+        <Tabs.Content value="projects" class="settings-v2-panel">
           <SettingsProjectsV2 />
-        </TabsV2.Content>
+        </Tabs.Content>
         <SettingsServerScope directory={directory()}>
-          <TabsV2.Content value="workspaces" class="settings-v2-panel">
+          <Tabs.Content value="workspaces" class="settings-v2-panel">
             <SettingsWorkspacesV2 activeDirectory={directory()} />
-          </TabsV2.Content>
-          <TabsV2.Content value="providers" class="settings-v2-panel">
+          </Tabs.Content>
+          <Tabs.Content value="providers" class="settings-v2-panel">
             <SettingsProvidersV2 directory={directory()} onBack={showProviders} />
-          </TabsV2.Content>
-          <TabsV2.Content value="models" class="settings-v2-panel">
+          </Tabs.Content>
+          <Tabs.Content value="models" class="settings-v2-panel">
             <SettingsModelsV2 />
-          </TabsV2.Content>
-          <TabsV2.Content value="extensions" class="settings-v2-panel">
+          </Tabs.Content>
+          <Tabs.Content value="extensions" class="settings-v2-panel">
             <SettingsExtensionsV2 />
-          </TabsV2.Content>
+          </Tabs.Content>
         </SettingsServerScope>
-      </TabsV2>
+      </Tabs>
     </Dialog>
   )
 }
diff --git a/packages/app/src/components/settings-v2/extensions.tsx b/packages/app/src/components/settings-v2/extensions.tsx
index a672f95e9d2..6df6a360987 100644
--- a/packages/app/src/components/settings-v2/extensions.tsx
+++ b/packages/app/src/components/settings-v2/extensions.tsx
@@ -1,7 +1,7 @@
 import { Component, For, createEffect, createMemo, createResource } from "solid-js"
 import { Icon } from "@opencode-ai/ui/icon"
-import { Switch } from "@opencode-ai/ui/v2/switch-v2"
-import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { Switch } from "@opencode-ai/ui/switch"
+import { Tabs } from "@opencode-ai/ui/tabs"
 import { useLanguage } from "@/context/language"
 import { useData } from "@/context/server"
 import { useServerSDK } from "@/context/server-sdk"
@@ -68,14 +68,14 @@ export const SettingsExtensionsV2: Component = () => {
       </div>
 
       <div class="settings-v2-tab-body">
-        <TabsV2 variant="pill" defaultValue="mcps" class="settings-v2-extensions-tabs">
-          <TabsV2.List>
-            <TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
-            <TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
-            <TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
-          </TabsV2.List>
+        <Tabs variant="pill" defaultValue="mcps" class="settings-v2-extensions-tabs">
+          <Tabs.List>
+            <Tabs.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</Tabs.Trigger>
+            <Tabs.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</Tabs.Trigger>
+            <Tabs.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</Tabs.Trigger>
+          </Tabs.List>
 
-          <TabsV2.Content value="mcps">
+          <Tabs.Content value="mcps">
             <div class="settings-v2-section">
               <div class="flex items-center justify-between">
                 <span class="text-13-medium text-v2-text-text-base">
@@ -99,9 +99,9 @@ export const SettingsExtensionsV2: Component = () => {
                 </For>
               </div>
             </div>
-          </TabsV2.Content>
+          </Tabs.Content>
 
-          <TabsV2.Content value="plugins">
+          <Tabs.Content value="plugins">
             <div class="settings-v2-section">
               <div class="flex items-center justify-between">
                 <span class="text-13-medium text-v2-text-text-base">
@@ -122,9 +122,9 @@ export const SettingsExtensionsV2: Component = () => {
                 </For>
               </div>
             </div>
-          </TabsV2.Content>
+          </Tabs.Content>
 
-          <TabsV2.Content value="skills">
+          <Tabs.Content value="skills">
             <div class="settings-v2-section">
               <div class="flex items-center justify-between">
                 <span class="text-13-medium text-v2-text-text-base">
@@ -150,8 +150,8 @@ export const SettingsExtensionsV2: Component = () => {
                 </For>
               </div>
             </div>
-          </TabsV2.Content>
-        </TabsV2>
+          </Tabs.Content>
+        </Tabs>
       </div>
     </>
   )
diff --git a/packages/app/src/components/settings-v2/general.tsx b/packages/app/src/components/settings-v2/general.tsx
index 17f602c424d..068acdeadaf 100644
--- a/packages/app/src/components/settings-v2/general.tsx
+++ b/packages/app/src/components/settings-v2/general.tsx
@@ -1,9 +1,9 @@
 import { Component, Show, createMemo, createResource } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
-import { Switch } from "@opencode-ai/ui/v2/switch-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Select } from "@opencode-ai/ui/select"
+import { Switch } from "@opencode-ai/ui/switch"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useUpdaterAction } from "../updater-action"
@@ -100,8 +100,7 @@ const WorkspaceDestinationSetting: Component = () => {
       title={language.t("settings.workspaces.default.title")}
       description={language.t("settings.workspaces.default.description")}
     >
-      <SelectV2
-        appearance="inline"
+      <Select
         options={options()}
         current={options().find((option) => option.value === settings.workspaces.defaultDestination())}
         value={(option) => option.value}
@@ -127,8 +126,7 @@ const ShellSetting: Component<{ controller: ShellSettingsController }> = (props)
       title={language.t("settings.general.row.shell.title")}
       description={language.t("settings.general.row.shell.description")}
     >
-      <SelectV2
-        appearance="inline"
+      <Select
         data-action="settings-shell"
         options={options()}
         current={options().find((option) => option.value === props.controller.current()) ?? options()[0]}
@@ -156,8 +154,7 @@ const AppearanceSection: Component<{ controller: AppearanceSettingsController }>
           title={language.t("settings.general.row.colorScheme.title")}
           description={language.t("settings.general.row.colorScheme.description")}
         >
-          <SelectV2
-            appearance="inline"
+          <Select
             data-action="settings-color-scheme"
             options={schemeOptions}
             current={schemeOptions.find((option) => option === props.controller.scheme.current())}
@@ -183,8 +180,7 @@ const AppearanceSection: Component<{ controller: AppearanceSettingsController }>
             </>
           }
         >
-          <SelectV2
-            appearance="inline"
+          <Select
             data-action="settings-theme"
             options={props.controller.theme.options()}
             current={props.controller.theme.current()}
@@ -213,7 +209,7 @@ const FontSetting: Component<{
   return (
     <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
       <div class="w-full sm:w-[220px]">
-        <TextInputV2
+        <TextInput
           data-action={config().action}
           type="text"
           appearance="base"
@@ -254,8 +250,7 @@ const SoundSetting: Component<{
   const config = () => soundSettings[props.kind]
   return (
     <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
-      <SelectV2
-        appearance="inline"
+      <Select
         data-action={config().action}
         options={soundOptions}
         current={props.channel.current()}
@@ -283,8 +278,7 @@ const LanguageSetting = () => {
       title={language.t("settings.general.row.language.title")}
       description={language.t("settings.general.row.language.description")}
     >
-      <SelectV2
-        appearance="inline"
+      <Select
         data-action="settings-language"
         options={options()}
         placement="bottom-end"
@@ -500,9 +494,9 @@ export const SettingsGeneral: Component<{
           title={language.t("settings.updates.row.check.title")}
           description={language.t("settings.updates.row.check.description")}
         >
-          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={() => updater.run()}>
+          <Button size="normal" variant="neutral" disabled={!updater.action().run} onClick={() => updater.run()}>
             {language.t(updater.action().label)}
-          </ButtonV2>
+          </Button>
         </SettingsRowV2>
       </SettingsListV2>
     </div>
diff --git a/packages/app/src/components/settings-v2/models.tsx b/packages/app/src/components/settings-v2/models.tsx
index 49b004fd1a7..5d080597f46 100644
--- a/packages/app/src/components/settings-v2/models.tsx
+++ b/packages/app/src/components/settings-v2/models.tsx
@@ -1,9 +1,9 @@
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Switch } from "@opencode-ai/ui/v2/switch-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Switch } from "@opencode-ai/ui/switch"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { type Component, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
@@ -62,7 +62,7 @@ export const SettingsModelsV2: Component = () => {
           <InlineServerSelect />
         </div>
         <div class="settings-v2-tab-search">
-          <TextInputV2
+          <TextInput
             type="search"
             appearance="base"
             value={list.filter()}
@@ -75,12 +75,12 @@ export const SettingsModelsV2: Component = () => {
             aria-label={language.t("dialog.model.search.placeholder")}
           />
           <Show when={list.filter()}>
-            <IconButtonV2
+            <IconButton
               type="button"
               variant="ghost-muted"
               size="small"
               class="settings-v2-tab-search-clear"
-              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+              icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
               onClick={() => list.clear()}
             />
           </Show>
diff --git a/packages/app/src/components/settings-v2/notifications.tsx b/packages/app/src/components/settings-v2/notifications.tsx
index 681c9c66fdb..0921bd20989 100644
--- a/packages/app/src/components/settings-v2/notifications.tsx
+++ b/packages/app/src/components/settings-v2/notifications.tsx
@@ -1,6 +1,6 @@
 import { Component } from "solid-js"
-import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
-import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { Select } from "@opencode-ai/ui/select"
+import { Switch } from "@opencode-ai/ui/switch"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { SettingsListV2 } from "./parts/list"
@@ -34,8 +34,7 @@ const SoundSetting: Component<{
   const config = () => soundSettings[props.kind]
   return (
     <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
-      <SelectV2
-        appearance="inline"
+      <Select
         data-action={config().action}
         options={soundOptions}
         current={props.channel.current()}
diff --git a/packages/app/src/components/settings-v2/parts/server-select.tsx b/packages/app/src/components/settings-v2/parts/server-select.tsx
index 816fdbd45f0..9e9e3500007 100644
--- a/packages/app/src/components/settings-v2/parts/server-select.tsx
+++ b/packages/app/src/components/settings-v2/parts/server-select.tsx
@@ -1,5 +1,5 @@
 import { Show, createMemo, type Component } from "solid-js"
-import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
+import { Select } from "@opencode-ai/ui/select"
 import { useGlobal } from "@/context/global"
 import { ServerConnection, serverName } from "@/context/servers"
 
@@ -20,8 +20,7 @@ export const InlineServerSelect: Component<{
 
   return (
     <Show when={options().length > 1}>
-      <SelectV2
-        appearance="inline"
+      <Select
         data-action="settings-server-select"
         options={options()}
         current={current()}
diff --git a/packages/app/src/components/settings-v2/projects.tsx b/packages/app/src/components/settings-v2/projects.tsx
index 1359378710d..817b51b43bd 100644
--- a/packages/app/src/components/settings-v2/projects.tsx
+++ b/packages/app/src/components/settings-v2/projects.tsx
@@ -1,7 +1,7 @@
 import { Component, For, Show, createMemo, createSignal } from "solid-js"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
 import { useGlobal } from "@/context/global"
@@ -51,11 +51,11 @@ export const SettingsProjectsV2: Component = () => {
           <span class="text-13-medium text-v2-text-text-base truncate">{name()}</span>
         </div>
         <div class="flex items-center gap-2 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
-          <IconButtonV2
+          <IconButton
             type="button"
             variant="ghost-muted"
             size="small"
-            icon={<IconV2 name="settings-gear" size="small" class="text-v2-icon-icon-muted" />}
+            icon={<Icon name="settings-gear" size="small" class="text-v2-icon-icon-muted" />}
             onClick={(event: MouseEvent) => {
               event.stopPropagation()
               openProjectSettings(props.project, props.server)
diff --git a/packages/app/src/components/settings-v2/providers.tsx b/packages/app/src/components/settings-v2/providers.tsx
index 0b59b21308a..49d5315a06b 100644
--- a/packages/app/src/components/settings-v2/providers.tsx
+++ b/packages/app/src/components/settings-v2/providers.tsx
@@ -1,5 +1,5 @@
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Badge } from "@opencode-ai/ui/badge"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { showToast } from "@/utils/toast"
@@ -160,7 +160,7 @@ export const SettingsProvidersV2: Component<{
                       />
                       <div class="settings-v2-provider-main">
                         <span class="settings-v2-provider-name truncate">{item.name}</span>
-                        <Tag>{type(item)}</Tag>
+                        <Badge>{type(item)}</Badge>
                       </div>
                     </div>
                     <Show
@@ -171,9 +171,9 @@ export const SettingsProvidersV2: Component<{
                         </span>
                       }
                     >
-                      <ButtonV2 size="normal" variant="ghost-muted" onClick={() => void disconnect(item.id, item.name)}>
+                      <Button size="normal" variant="ghost-muted" onClick={() => void disconnect(item.id, item.name)}>
                         {language.t("common.disconnect")}
-                      </ButtonV2>
+                      </Button>
                     </Show>
                   </div>
                 )}
@@ -199,7 +199,7 @@ export const SettingsProvidersV2: Component<{
                       <div class="settings-v2-provider-main">
                         <span class="settings-v2-provider-name">{item.name}</span>
                         <Show when={item.id === "opencode" || item.id === "opencode-go"}>
-                          <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                          <Badge>{language.t("dialog.provider.tag.recommended")}</Badge>
                         </Show>
                       </div>
                       <Show when={note(item.id)}>
@@ -207,9 +207,9 @@ export const SettingsProvidersV2: Component<{
                       </Show>
                     </div>
                   </div>
-                  <ButtonV2 size="normal" variant="neutral" icon="plus" onClick={() => connect(item.id)}>
+                  <Button size="normal" variant="neutral" icon="plus" onClick={() => connect(item.id)}>
                     {language.t("common.connect")}
-                  </ButtonV2>
+                  </Button>
                 </div>
               )}
             </For>
@@ -226,14 +226,14 @@ export const SettingsProvidersV2: Component<{
                   <div class="settings-v2-provider-copy">
                     <div class="settings-v2-provider-main">
                       <span class="settings-v2-provider-name">{language.t("provider.custom.title")}</span>
-                      <Tag>{language.t("settings.providers.tag.custom")}</Tag>
+                      <Badge>{language.t("settings.providers.tag.custom")}</Badge>
                     </div>
                     <p class="settings-v2-provider-description">
                       {language.t("settings.providers.custom.description")}
                     </p>
                   </div>
                 </div>
-                <ButtonV2
+                <Button
                   size="normal"
                   variant="neutral"
                   icon="plus"
@@ -246,7 +246,7 @@ export const SettingsProvidersV2: Component<{
                   }}
                 >
                   {language.t("common.connect")}
-                </ButtonV2>
+                </Button>
               </div>
             </Show>
           </SettingsListV2>
diff --git a/packages/app/src/components/settings-v2/servers.tsx b/packages/app/src/components/settings-v2/servers.tsx
index 748c477f9ec..4fb8c0b97bb 100644
--- a/packages/app/src/components/settings-v2/servers.tsx
+++ b/packages/app/src/components/settings-v2/servers.tsx
@@ -1,7 +1,7 @@
-import { Tag } from "@opencode-ai/ui/v2/badge-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Badge } from "@opencode-ai/ui/badge"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import fuzzysort from "fuzzysort"
 import { type Component, For, Show, createMemo } from "solid-js"
@@ -61,7 +61,7 @@ export const SettingsServersV2: Component = () => {
         </div>
         <Show when={showSearch()}>
           <div class="settings-v2-tab-search">
-            <TextInputV2
+            <TextInput
               type="search"
               appearance="base"
               value={store.filter}
@@ -74,12 +74,12 @@ export const SettingsServersV2: Component = () => {
               aria-label={language.t("dialog.server.search.placeholder")}
             />
             <Show when={store.filter}>
-              <IconButtonV2
+              <IconButton
                 type="button"
                 variant="ghost-muted"
                 size="small"
                 class="settings-v2-tab-search-clear"
-                icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+                icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
                 onClick={() => setStore("filter", "")}
               />
             </Show>
@@ -126,7 +126,7 @@ export const SettingsServersV2: Component = () => {
                     </div>
                     <div class="settings-v2-servers-actions">
                       <Show when={controller.defaults.available() && isDefault()}>
-                        <Tag>{language.t("dialog.server.status.default")}</Tag>
+                        <Badge>{language.t("dialog.server.status.default")}</Badge>
                       </Show>
                       <ServerRowMenu server={item} domain={controller} onEdit={openEdit} />
                     </div>
diff --git a/packages/app/src/components/settings-v2/settings-v2.css b/packages/app/src/components/settings-v2/settings-v2.css
index 1aa382803a7..880c13ba9ba 100644
--- a/packages/app/src/components/settings-v2/settings-v2.css
+++ b/packages/app/src/components/settings-v2/settings-v2.css
@@ -1,5 +1,5 @@
-@import "@opencode-ai/ui/v2/text-input-v2.css";
-@import "@opencode-ai/ui/v2/button-v2.css";
+@import "@opencode-ai/ui/text-input.css";
+@import "@opencode-ai/ui/button.css";
 
 [data-component="tabs-v2"][data-variant="settings"] {
   height: 100%;
diff --git a/packages/app/src/components/settings-v2/workspaces.tsx b/packages/app/src/components/settings-v2/workspaces.tsx
index edcc6dbc4fb..60776d61a12 100644
--- a/packages/app/src/components/settings-v2/workspaces.tsx
+++ b/packages/app/src/components/settings-v2/workspaces.tsx
@@ -3,12 +3,12 @@ import { For, Show, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import type { SessionInfo } from "@opencode-ai/client/promise"
 import { useQuery } from "@tanstack/solid-query"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogFooter, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/v2/dialog-v2"
-import { Icon } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Dialog, DialogFooter, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { getFilename } from "@opencode-ai/util/path"
 import { useLanguage } from "@/context/language"
@@ -273,33 +273,33 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
           </span>
           <div class="settings-v2-workspaces-toolbar-actions">
             <Show when={projects().length > 1}>
-              <MenuV2 placement="bottom-end" gutter={6}>
-                <MenuV2.Trigger class="flex h-6 max-w-48 items-center gap-1 rounded-sm px-2 text-13-medium hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed">
+              <Menu placement="bottom-end" gutter={6}>
+                <Menu.Trigger class="flex h-6 max-w-48 items-center gap-1 rounded-sm px-2 text-13-medium hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed">
                   <span class="min-w-0 truncate">
                     {projectOptions().find((option) => option.id === selectedProject())?.label}
                   </span>
                   <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-                </MenuV2.Trigger>
-                <MenuV2.Portal>
-                  <MenuV2.Content>
+                </Menu.Trigger>
+                <Menu.Portal>
+                  <Menu.Content>
                     <For each={projectOptions()}>
                       {(option) => (
-                        <MenuV2.Item onSelect={() => setStore("project", option.id)}>
+                        <Menu.Item onSelect={() => setStore("project", option.id)}>
                           <span class="min-w-0 flex-1 truncate">{option.label}</span>
                           <Show when={selectedProject() === option.id}>
                             <Icon name="check" size="small" class="shrink-0" />
                           </Show>
-                        </MenuV2.Item>
+                        </Menu.Item>
                       )}
                     </For>
-                  </MenuV2.Content>
-                </MenuV2.Portal>
-              </MenuV2>
+                  </Menu.Content>
+                </Menu.Portal>
+              </Menu>
             </Show>
             <Show when={filtered().length > 0}>
-              <MenuV2 placement="bottom-end" gutter={4}>
-                <MenuV2.Trigger
-                  as={IconButtonV2}
+              <Menu placement="bottom-end" gutter={4}>
+                <Menu.Trigger
+                  as={IconButton}
                   type="button"
                   variant="ghost-muted"
                   size="small"
@@ -307,16 +307,16 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
                   disabled={!!store.transaction}
                   icon={<Icon name="outline-dots" size="small" />}
                 />
-                <MenuV2.Portal>
-                  <MenuV2.Content>
-                    <MenuV2.Item onSelect={confirmDeleteAll}>
+                <Menu.Portal>
+                  <Menu.Content>
+                    <Menu.Item onSelect={confirmDeleteAll}>
                       <span class="settings-v2-workspaces-delete-all">
                         {language.t("settings.workspaces.deleteAll")}
                       </span>
-                    </MenuV2.Item>
-                  </MenuV2.Content>
-                </MenuV2.Portal>
-              </MenuV2>
+                    </Menu.Item>
+                  </Menu.Content>
+                </Menu.Portal>
+              </Menu>
             </Show>
           </div>
         </div>
@@ -335,7 +335,7 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
                       <div class="settings-v2-workspaces-row-header">
                         <div class="settings-v2-workspaces-copy">
                           <div class="settings-v2-workspaces-main">
-                            <TooltipV2
+                            <Tooltip
                               value={workspace.directory}
                               placement="top-start"
                               contentClass="max-w-[calc(100vw-32px)] break-all"
@@ -348,24 +348,21 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
                               >
                                 {workspace.directory}
                               </span>
-                            </TooltipV2>
+                            </Tooltip>
                           </div>
                           <span class="settings-v2-workspaces-meta">{sessionCount(workspace)}</span>
                         </div>
                         <div class="settings-v2-workspaces-row-actions">
                           <Show when={lastActive(workspace)}>
                             {(value) => (
-                              <TooltipV2
-                                value={language.t("settings.workspaces.lastActiveSession")}
-                                placement="top-end"
-                              >
+                              <Tooltip value={language.t("settings.workspaces.lastActiveSession")} placement="top-end">
                                 <span tabIndex={0} class="settings-v2-workspaces-active">
                                   {value()}
                                 </span>
-                              </TooltipV2>
+                              </Tooltip>
                             )}
                           </Show>
-                          <IconButtonV2
+                          <IconButton
                             type="button"
                             variant="ghost-muted"
                             size="small"
@@ -428,12 +425,12 @@ function DialogDeleteAllWorkspaces(props: { count: number; project: string; onDe
         />
       </DialogHeader>
       <DialogFooter>
-        <ButtonV2 type="button" variant="neutral" onClick={() => dialog.close()}>
+        <Button type="button" variant="neutral" onClick={() => dialog.close()}>
           {language.t("common.cancel")}
-        </ButtonV2>
-        <ButtonV2 type="button" variant="danger" onClick={remove}>
+        </Button>
+        <Button type="button" variant="danger" onClick={remove}>
           {language.t("settings.workspaces.deleteAll")}
-        </ButtonV2>
+        </Button>
       </DialogFooter>
     </Dialog>
   )
@@ -486,17 +483,17 @@ function DialogDeleteWorkspace(props: {
         />
       </DialogHeader>
       <DialogFooter>
-        <ButtonV2 type="button" variant="neutral" onClick={() => dialog.close()}>
+        <Button type="button" variant="neutral" onClick={() => dialog.close()}>
           {language.t("common.cancel")}
-        </ButtonV2>
-        <ButtonV2
+        </Button>
+        <Button
           type="button"
           variant="danger"
           disabled={status.isPending || status.isError || status.data?.result.active}
           onClick={remove}
         >
           {language.t("workspace.delete.button")}
-        </ButtonV2>
+        </Button>
       </DialogFooter>
     </Dialog>
   )
diff --git a/packages/app/src/components/status-popover-body.tsx b/packages/app/src/components/status-popover-body.tsx
index d17acb0ab05..79a1f4a0414 100644
--- a/packages/app/src/components/status-popover-body.tsx
+++ b/packages/app/src/components/status-popover-body.tsx
@@ -48,10 +48,9 @@ export function StatusPopoverBody(props: { shown: boolean }) {
       <Tabs
         aria-label={language.t("status.popover.ariaLabel")}
         class="tabs bg-background-strong rounded-xl overflow-hidden"
-        data-component="tabs"
         data-active="mcp"
         defaultValue="mcp"
-        variant="alt"
+        variant="underline"
       >
         <Tabs.List data-slot="tablist" class="bg-transparent border-b-0 px-4 pt-2 pb-0 gap-4 h-10">
           <Tabs.Trigger value="mcp" data-slot="tab" class="text-12-regular">
@@ -111,6 +110,7 @@ export function StatusPopoverBody(props: { shown: boolean }) {
                         </span>
                         <div onClick={(event) => event.stopPropagation()}>
                           <Switch
+                            appearance="standard"
                             checked={enabled()}
                             disabled={toggleMcp.isPending && toggleMcp.variables === name}
                             onChange={() => {
diff --git a/packages/app/src/components/status-popover.tsx b/packages/app/src/components/status-popover.tsx
index 8c3b2e134ce..3950d0a4828 100644
--- a/packages/app/src/components/status-popover.tsx
+++ b/packages/app/src/components/status-popover.tsx
@@ -1,7 +1,6 @@
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Popover } from "@opencode-ai/ui/popover"
 import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
@@ -157,7 +156,7 @@ function StatusPopoverView(props: { state: StatusPopoverState }) {
     <Popover
       open={props.state.shown}
       onOpenChange={props.state.onOpenChange}
-      triggerAs={IconButtonV2}
+      triggerAs={IconButton}
       triggerProps={{
         variant: "ghost-muted",
         size: "large",
@@ -167,7 +166,7 @@ function StatusPopoverView(props: { state: StatusPopoverState }) {
       }}
       trigger={
         <div class="relative size-4">
-          <IconV2 name={props.state.shown ? "status-active" : "status"} />
+          <Icon name={props.state.shown ? "status-active" : "status"} />
           <div
             class={`absolute -top-1 -right-1 size-2 rounded-full border border-[var(--v2-background-bg-deep)] ${serverStatusDotClass(props.state)}`}
           />
diff --git a/packages/app/src/components/titlebar-tab-nav.tsx b/packages/app/src/components/titlebar-tab-nav.tsx
index a64aec6687f..51d0644f496 100644
--- a/packages/app/src/components/titlebar-tab-nav.tsx
+++ b/packages/app/src/components/titlebar-tab-nav.tsx
@@ -2,8 +2,8 @@ import { createEffect, createMemo, createSignal, onCleanup, Show, type Ref } fro
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createMutation } from "@tanstack/solid-query"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
 import { useGlobal, useServerCtx } from "@/context/global"
 import { useLanguage } from "@/context/language"
 import { ServerConnection, serverName, useServers } from "@/context/servers"
@@ -281,7 +281,7 @@ export function TabNavItem(props: {
       </a>
 
       <div data-slot="tab-close">
-        <IconButtonV2
+        <IconButton
           size="small"
           variant="ghost-muted"
           class="hover-reveal relative z-10 group-hover:opacity-100 group-data-[active=true]:opacity-100 group-data-[editing=true]:opacity-100"
@@ -290,7 +290,7 @@ export function TabNavItem(props: {
             event.stopPropagation()
           }}
           onClick={closeTab}
-          icon={<IconV2 name="xmark-small" />}
+          icon={<Icon name="xmark-small" />}
         />
       </div>
     </div>
@@ -377,7 +377,7 @@ export function DraftTabItem(props: {
         class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base [-webkit-user-drag:none]"
       >
         <span class="flex size-4 shrink-0 items-center justify-center">
-          <IconV2 name="edit" />
+          <Icon name="edit" />
         </span>
         <span
           data-titlebar-tab-title
@@ -387,7 +387,7 @@ export function DraftTabItem(props: {
         </span>
       </a>
       <div data-slot="tab-close">
-        <IconButtonV2
+        <IconButton
           size="small"
           variant="ghost-muted"
           onPointerDown={(event) => {
@@ -400,7 +400,7 @@ export function DraftTabItem(props: {
           }}
           class="hover-reveal relative z-10 group-hover:opacity-100 group-data-[active=true]:opacity-100 group-data-[editing=true]:opacity-100"
           onClick={closeTab}
-          icon={<IconV2 name="xmark-small" />}
+          icon={<Icon name="xmark-small" />}
           aria-label={language.t("common.closeTab")}
         />
       </div>
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index 796ccd88aee..f52393e3706 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -12,10 +12,10 @@ import {
 } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLocation, useNavigate } from "@solidjs/router"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 
 import { LayoutRoute, useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
@@ -330,28 +330,28 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                 <Show when={windows() || linux()}>
                   <WindowsAppMenu command={command} platform={platform} />
                 </Show>
-                <TooltipV2
+                <Tooltip
                   placement="bottom"
                   value={
                     <>
                       {language.t("home.title")}
-                      <KeybindV2 keys={command.keybindParts("home.toggle")} variant="neutral" />
+                      <Keybind keys={command.keybindParts("home.toggle")} variant="neutral" />
                     </>
                   }
                   class="shrink-0"
                 >
-                  <IconButtonV2
+                  <IconButton
                     type="button"
                     variant="ghost-muted"
                     size="large"
                     class="!w-9 shrink-0"
-                    icon={<IconV2 name="grid-plus" />}
+                    icon={<Icon name="grid-plus" />}
                     state={layout.route().type === "home" ? "pressed" : undefined}
                     onClick={toggleHome}
                     aria-label={language.t("home.title")}
                     aria-pressed={layout.route().type === "home"}
                   />
-                </TooltipV2>
+                </Tooltip>
 
                 <TitlebarTabStrip
                   tabs={tabsStore}
@@ -368,25 +368,25 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                   }}
                   onReorder={(keys) => tabsStoreActions.reorder(keys)}
                 />
-                <TooltipV2
+                <Tooltip
                   placement="bottom"
                   value={
                     <>
                       {language.t("command.session.new")}
-                      <KeybindV2 keys={newTabTooltipKeybind(command)} variant="neutral" />
+                      <Keybind keys={newTabTooltipKeybind(command)} variant="neutral" />
                     </>
                   }
                 >
-                  <IconButtonV2
+                  <IconButton
                     type="button"
                     variant="ghost-muted"
                     size="large"
                     class="shrink-0"
-                    icon={<IconV2 name="plus" />}
+                    icon={<Icon name="plus" />}
                     onClick={openNewTab}
                     aria-label={language.t("command.session.new")}
                   />
-                </TooltipV2>
+                </Tooltip>
                 <div class="flex-1" />
                 <TitlebarV2Right state={v2RightState()} />
               </div>
diff --git a/packages/app/src/components/windows-app-menu.tsx b/packages/app/src/components/windows-app-menu.tsx
index e6d89dde422..a33aa94ef6e 100644
--- a/packages/app/src/components/windows-app-menu.tsx
+++ b/packages/app/src/components/windows-app-menu.tsx
@@ -1,8 +1,7 @@
-import { For, Show, type JSX } from "solid-js"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { For, type JSX } from "solid-js"
+import { Menu } from "@opencode-ai/ui/menu"
 import { Icon } from "@opencode-ai/ui/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 
 import { useCommand } from "@/context/command"
 import { DESKTOP_MENU, desktopMenuVisible, type DesktopMenuAction, type DesktopMenuEntry } from "@/desktop-menu"
@@ -47,32 +46,32 @@ export function WindowsAppMenu(props: {
   }
 
   return (
-    <DropdownMenu gutter={4} modal={false} placement="bottom-start">
+    <Menu appearance="standard" gutter={4} modal={false} placement="bottom-start">
       <div
         data-component="desktop-icon-button"
         class="flex h-7 w-9 shrink-0 items-center justify-center rounded-[6px] px-1"
       >
-        <DropdownMenu.Trigger
-          as={IconButtonV2}
+        <Menu.Trigger
+          as={IconButton}
           variant="ghost-muted"
           size="large"
-          icon={<IconV2 name="menu" />}
+          icon={<Icon name="menu" />}
           aria-label={language.t("desktop.menu.ariaLabel")}
           onPointerDown={rememberFocus}
           onKeyDown={rememberFocus}
         />
       </div>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content class="desktop-app-menu">
-          <DropdownMenu.Group>
-            <DropdownMenu.GroupLabel class="desktop-app-menu-heading">OpenCode</DropdownMenu.GroupLabel>
+      <Menu.Portal>
+        <Menu.Content class="desktop-app-menu">
+          <Menu.Group>
+            <Menu.GroupLabel class="desktop-app-menu-heading">OpenCode</Menu.GroupLabel>
             <For each={DESKTOP_MENU.filter((menu) => desktopMenuVisible(menu, "windows"))}>
               {(menu) => (
                 <DesktopMenuSubmenu label={language.t(menu.labelKey)}>
                   <For each={menu.items?.filter((entry) => desktopMenuVisible(entry, "windows"))}>
                     {(entry) => {
                       // Static menu data: an early return keeps the union narrowing a Show fallback would lose.
-                      if (entry.type === "separator") return <DropdownMenu.Separator />
+                      if (entry.type === "separator") return <Menu.Separator />
                       return (
                         <DesktopMenuItem
                           label={entry.labelKey ? language.t(entry.labelKey) : ""}
@@ -86,36 +85,28 @@ export function WindowsAppMenu(props: {
                 </DesktopMenuSubmenu>
               )}
             </For>
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu>
+          </Menu.Group>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
   )
 }
 
 function DesktopMenuSubmenu(props: { label: string; children: JSX.Element }) {
   return (
-    <DropdownMenu.Sub>
-      <DropdownMenu.SubTrigger>
-        <span data-slot="dropdown-menu-item-label">{props.label}</span>
-        <span data-slot="desktop-app-menu-chevron">
-          <Icon name="chevron-right" size="small" />
-        </span>
-      </DropdownMenu.SubTrigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.SubContent class="desktop-app-menu">{props.children}</DropdownMenu.SubContent>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Sub>
+    <Menu.Sub>
+      <Menu.SubTrigger>{props.label}</Menu.SubTrigger>
+      <Menu.Portal>
+        <Menu.SubContent class="desktop-app-menu desktop-app-menu-sub">{props.children}</Menu.SubContent>
+      </Menu.Portal>
+    </Menu.Sub>
   )
 }
 
 function DesktopMenuItem(props: { label: string; keybind?: string; disabled?: boolean; onSelect: () => void }) {
   return (
-    <DropdownMenu.Item disabled={props.disabled} onSelect={props.onSelect}>
-      <DropdownMenu.ItemLabel>{props.label}</DropdownMenu.ItemLabel>
-      <Show when={props.keybind}>
-        <span data-slot="desktop-app-menu-keybind">{props.keybind}</span>
-      </Show>
-    </DropdownMenu.Item>
+    <Menu.Item disabled={props.disabled} onSelect={props.onSelect} shortcut={props.keybind}>
+      {props.label}
+    </Menu.Item>
   )
 }
diff --git a/packages/app/src/context/layout.tsx b/packages/app/src/context/layout.tsx
index 4fb52c067e8..442392b09d8 100644
--- a/packages/app/src/context/layout.tsx
+++ b/packages/app/src/context/layout.tsx
@@ -11,7 +11,7 @@ import { decode64 } from "@/utils/base64"
 import { same } from "@/utils/same"
 import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
 import { createPathHelpers } from "./file/path"
-import type { ProjectAvatarVariant } from "@opencode-ai/ui/v2/project-avatar-v2"
+import type { ProjectAvatarVariant } from "@opencode-ai/ui/project-avatar"
 import { SessionStateKey } from "@/utils/server-scope"
 import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers"
 import { requireServerKey } from "@/utils/session-route"
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 5ccd718e6cb..357e47bd937 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -1,6 +1,6 @@
 @import "@opencode-ai/ui/styles/tailwind";
 @import "@opencode-ai/session-ui/styles";
-@import "@opencode-ai/ui/v2/styles/tailwind.css";
+@import "@opencode-ai/ui/styles/tokens";
 @import "tw-animate-css";
 
 @font-face {
@@ -30,23 +30,22 @@
     container-name: getting-started;
   }
 
-  [data-component="dropdown-menu-content"].desktop-app-menu,
-  [data-component="dropdown-menu-sub-content"].desktop-app-menu {
+  [data-component="menu-v2-content"].desktop-app-menu {
     min-width: 160px;
     padding: 2px;
   }
 
-  [data-component="dropdown-menu-content"].desktop-app-menu {
+  [data-component="menu-v2-content"].desktop-app-menu:not(.desktop-app-menu-sub) {
     width: 160px;
   }
 
-  [data-component="dropdown-menu-sub-content"].desktop-app-menu {
+  [data-component="menu-v2-content"].desktop-app-menu-sub {
     width: max-content;
     min-width: 240px;
     max-width: min(320px, calc(100vw - 24px));
   }
 
-  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-group-label"] {
+  [data-component="menu-v2-content"].desktop-app-menu [data-slot="menu-v2-group-label"] {
     display: flex;
     align-items: center;
     height: 28px;
@@ -57,10 +56,7 @@
     color: var(--text-weak);
   }
 
-  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-item"],
-  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-sub-trigger"],
-  [data-component="dropdown-menu-sub-content"].desktop-app-menu [data-slot="dropdown-menu-item"],
-  [data-component="dropdown-menu-sub-content"].desktop-app-menu [data-slot="dropdown-menu-sub-trigger"] {
+  [data-component="menu-v2-content"].desktop-app-menu [data-component="menu-v2-item"] {
     min-height: 28px;
     padding: 0 12px;
     gap: 8px;
@@ -68,12 +64,11 @@
     line-height: 1;
   }
 
-  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-item-label"],
-  [data-component="dropdown-menu-sub-content"].desktop-app-menu [data-slot="dropdown-menu-item-label"] {
+  [data-component="menu-v2-content"].desktop-app-menu [data-slot="menu-v2-item-content"] {
     white-space: nowrap;
   }
 
-  [data-slot="desktop-app-menu-keybind"] {
+  [data-component="menu-v2-content"].desktop-app-menu [data-slot="menu-v2-item-shortcut"] {
     margin-left: auto;
     color: var(--text-weak);
     font-size: var(--font-size-x-small);
@@ -81,19 +76,13 @@
     white-space: nowrap;
   }
 
-  [data-slot="desktop-app-menu-chevron"] {
-    display: flex;
-    margin-left: auto;
-    color: var(--icon-base);
-  }
-
   [data-component="getting-started-actions"] {
     display: flex;
     flex-direction: column;
     gap: 0.75rem; /* gap-3 */
   }
 
-  [data-component="getting-started-actions"] > [data-component="button"] {
+  [data-component="getting-started-actions"] > [data-component="button-v2"] {
     width: 100%;
   }
 
@@ -103,7 +92,7 @@
       align-items: center;
     }
 
-    [data-component="getting-started-actions"] > [data-component="button"] {
+    [data-component="getting-started-actions"] > [data-component="button-v2"] {
       width: auto;
     }
   }
diff --git a/packages/app/src/pages/home/home-projects-view.tsx b/packages/app/src/pages/home/home-projects-view.tsx
index a4e99b877a1..bed8a27b83b 100644
--- a/packages/app/src/pages/home/home-projects-view.tsx
+++ b/packages/app/src/pages/home/home-projects-view.tsx
@@ -6,11 +6,11 @@ import { AutoScroller, Feedback, PointerActivationConstraints } from "@dnd-kit/d
 import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers"
 import { RestrictToElement } from "@dnd-kit/dom/modifiers"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { getProjectAvatarVariant, type HomeProjectSelection, type LocalProject } from "@/context/layout"
 import { ServerConnection } from "@/context/servers"
 import { useLanguage } from "@/context/language"
@@ -82,18 +82,18 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
       <div class="flex h-7 min-w-0 shrink-0 items-center justify-between pl-1.5 pr-3">
         <div class="text-v2-text-text-muted [font-weight:530]">{props.language.t("home.projects")}</div>
         <Show when={props.servers.length === 1 && !(props.projects.length === 0 && props.recentlyClosed.length > 0)}>
-          <TooltipV2 placement="bottom" value={props.language.t("home.project.add")}>
-            <IconButtonV2
+          <Tooltip placement="bottom" value={props.language.t("home.project.add")}>
+            <IconButton
               data-action="home-add-project"
               variant="ghost-muted"
               size="large"
               class="titlebar-icon [&_[data-slot=icon-svg]]:text-v2-icon-icon-muted"
-              icon={<IconV2 name="folder-add-left" />}
+              icon={<Icon name="folder-add-left" />}
               disabled={props.serverHealth(props.servers[0])?.healthy === false}
               onClick={() => props.onChooseProject(props.servers[0])}
               aria-label={props.language.t("home.project.add")}
             />
-          </TooltipV2>
+          </Tooltip>
         </Show>
       </div>
       <ScrollView data-slot="home-projects-scroll" class="min-h-0 min-w-0 shrink">
@@ -161,7 +161,7 @@ export function HomeUtilityNav(props: {
         class="text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted"
         onClick={props.onOpenSettings}
       >
-        <IconV2 name="settings-gear" size="small" />
+        <Icon name="settings-gear" size="small" />
         <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.settings")}</span>
       </HomeProjectNavButton>
       <HomeProjectNavButton
@@ -169,7 +169,7 @@ export function HomeUtilityNav(props: {
         class="text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted"
         onClick={props.onOpenHelp}
       >
-        <IconV2 name="help" size="small" />
+        <Icon name="help" size="small" />
         <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.help")}</span>
       </HomeProjectNavButton>
     </div>
@@ -234,7 +234,7 @@ function HomeServerRow(props: {
           }}
           onPointerDown={(event) => event.preventDefault()}
         >
-          <IconV2
+          <Icon
             name="chevron-down"
             size="small"
             class="transition-transform duration-150 ease-in-out"
@@ -280,17 +280,17 @@ function HomeServerRow(props: {
           open={props.contextMenuOpen(contextMenuID())}
           onOpenChange={(open) => props.onSetContextMenuOpen(contextMenuID(), open)}
         />
-        <TooltipV2 class="flex shrink-0 items-center" placement="bottom" value={props.language.t("home.project.add")}>
-          <IconButtonV2
+        <Tooltip class="flex shrink-0 items-center" placement="bottom" value={props.language.t("home.project.add")}>
+          <IconButton
             data-action="home-add-project"
             variant="ghost-muted"
             size="small"
-            icon={<IconV2 name="folder-add-left" />}
+            icon={<Icon name="folder-add-left" />}
             aria-label={props.language.t("home.project.add")}
             disabled={props.health?.healthy === false}
             onClick={() => props.onChooseProject(props.server)}
           />
-        </TooltipV2>
+        </Tooltip>
       </div>
     </div>
   )
@@ -394,7 +394,7 @@ function HomeProjectEmpty(
         disabled={unreachable()}
         onClick={() => props.onChooseProject(props.server)}
       >
-        <IconV2 name="folder-add-left" size="small" />
+        <Icon name="folder-add-left" size="small" />
         <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.project.add")}</span>
       </HomeProjectNavButton>
       <Show when={props.items.length > 0}>
@@ -423,7 +423,7 @@ function HomeRecentlyClosedRow(
     return worktree
   }
   return (
-    <TooltipV2 placement="right" value={path()}>
+    <Tooltip placement="right" value={path()}>
       <HomeProjectNavButton
         type="button"
         data-component="home-recently-closed-row"
@@ -434,7 +434,7 @@ function HomeRecentlyClosedRow(
         <HomeProjectAvatar project={props.project} outline />
         <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
       </HomeProjectNavButton>
-    </TooltipV2>
+    </Tooltip>
   )
 }
 
@@ -523,55 +523,55 @@ function HomeProjectRow(
         `}
         data-menu={props.contextMenuOpen(contextMenuID())}
       >
-        <MenuV2
+        <Menu
           gutter={6}
           modal={false}
           placement="bottom-end"
           open={props.contextMenuOpen(contextMenuID())}
           onOpenChange={(open) => props.onSetContextMenuOpen(contextMenuID(), open)}
         >
-          <MenuV2.Trigger
-            as={IconButtonV2}
+          <Menu.Trigger
+            as={IconButton}
             data-action="home-project-menu"
             variant="ghost-muted"
             size="small"
-            icon={<IconV2 name="outline-dots" />}
+            icon={<Icon name="outline-dots" />}
             aria-label={props.language.t("common.moreOptions")}
           />
-          <MenuV2.Portal>
-            <MenuV2.Content>
-              <MenuV2.Item onSelect={() => props.onOpenProjectNewSession(props.server, props.project.worktree)}>
+          <Menu.Portal>
+            <Menu.Content>
+              <Menu.Item onSelect={() => props.onOpenProjectNewSession(props.server, props.project.worktree)}>
                 {props.language.t("command.session.new")}
-              </MenuV2.Item>
-              <MenuV2.Item onSelect={() => props.onEditProject(props.server, props.project)}>
+              </Menu.Item>
+              <Menu.Item onSelect={() => props.onEditProject(props.server, props.project)}>
                 {props.language.t("dialog.project.edit.title")}
-              </MenuV2.Item>
+              </Menu.Item>
               <Show when={props.canRevealProject(props.server)}>
-                <MenuV2.Item onSelect={() => props.onRevealProject(props.server, props.project)}>
+                <Menu.Item onSelect={() => props.onRevealProject(props.server, props.project)}>
                   {props.language.t(
                     fileManagerApp(platform.platform === "desktop" ? (platform.os ?? "unknown") : "unknown")
                       .actionLabel,
                   )}
-                </MenuV2.Item>
+                </Menu.Item>
               </Show>
-              <MenuV2.Item
+              <Menu.Item
                 disabled={props.unseen === 0}
                 onSelect={() => props.onClearNotifications(props.server, props.project)}
               >
                 {props.language.t("sidebar.project.clearNotifications")}
-              </MenuV2.Item>
-              <MenuV2.Separator />
-              <MenuV2.Item onSelect={() => props.onCloseProject(props.server, props.project.worktree)}>
+              </Menu.Item>
+              <Menu.Separator />
+              <Menu.Item onSelect={() => props.onCloseProject(props.server, props.project.worktree)}>
                 {props.language.t("common.close")}
-              </MenuV2.Item>
-            </MenuV2.Content>
-          </MenuV2.Portal>
-        </MenuV2>
-        <IconButtonV2
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+        <IconButton
           data-action="home-project-new-session"
           variant="ghost-muted"
           size="small"
-          icon={<IconV2 name="edit" />}
+          icon={<Icon name="edit" />}
           aria-label={props.language.t("command.session.new")}
           onClick={() => props.onOpenProjectNewSession(props.server, props.project.worktree)}
         />
diff --git a/packages/app/src/pages/home/home-sessions-view.tsx b/packages/app/src/pages/home/home-sessions-view.tsx
index 1d6133ba81a..1b3c64b15eb 100644
--- a/packages/app/src/pages/home/home-sessions-view.tsx
+++ b/packages/app/src/pages/home/home-sessions-view.tsx
@@ -2,10 +2,10 @@ import type { SessionInfo } from "@opencode-ai/client/promise"
 import { createMemo, For, Show, Suspense } from "solid-js"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useLanguage } from "@/context/language"
 import { ServerConnection } from "@/context/servers"
 import { SessionTabAvatarView } from "@/pages/layout/session-tab-avatar"
@@ -83,7 +83,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
         <Suspense>
           <Show when={props.groups.length > 0 && props.canCreateSession}>
             <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
-              <ButtonV2
+              <Button
                 data-action="home-new-session"
                 variant="ghost-muted"
                 size="normal"
@@ -92,7 +92,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
                 onClick={props.onCreateSession}
               >
                 {props.language.t("command.session.new")}
-              </ButtonV2>
+              </Button>
             </div>
           </Show>
         </Suspense>
@@ -273,7 +273,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
             duration-[120ms] ease-in-out hover:bg-v2-background-bg-layer-02 focus-within:bg-v2-background-bg-layer-02
           `}
         >
-          <IconV2 name="magnifying-glass" />
+          <Icon name="magnifying-glass" />
           <input
             ref={props.onSetSearchInput}
             class={`
@@ -317,12 +317,12 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
             }}
           />
           <Show when={props.searchValue}>
-            <IconButtonV2
+            <IconButton
               type="button"
               variant="ghost-muted"
               size="small"
               class="relative z-20 shrink-0"
-              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+              icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
               aria-label={props.searchPlaceholder}
               onClick={() => {
                 props.onSearchClose()
@@ -458,12 +458,12 @@ function HomeSessionRow(props: HomeSessionsViewProps & { record: HomeSessionReco
             group-hover/session:opacity-100 focus-within:opacity-100
           `}
         >
-          <TooltipV2 class="flex shrink-0 items-center" placement="bottom" value={props.language.t("common.archive")}>
-            <IconButtonV2
+          <Tooltip class="flex shrink-0 items-center" placement="bottom" value={props.language.t("common.archive")}>
+            <IconButton
               data-action="home-session-archive"
               variant="ghost-muted"
               size="large"
-              icon={<IconV2 name="archive" />}
+              icon={<Icon name="archive" />}
               aria-label={props.language.t("common.archive")}
               onClick={(event) => {
                 event.preventDefault()
@@ -471,7 +471,7 @@ function HomeSessionRow(props: HomeSessionsViewProps & { record: HomeSessionReco
                 void props.onArchiveSession(props.record.session)
               }}
             />
-          </TooltipV2>
+          </Tooltip>
         </div>
       </Show>
     </div>
@@ -525,9 +525,9 @@ function HomeSessionsEmpty(props: { onNewSession?: () => void; language: ReturnT
       </p>
       <Show when={props.onNewSession}>
         {(onNewSession) => (
-          <ButtonV2 data-action="home-new-session" variant="neutral" size="normal" icon="edit" onClick={onNewSession()}>
+          <Button data-action="home-new-session" variant="neutral" size="normal" icon="edit" onClick={onNewSession()}>
             {props.language.t("command.session.new")}
-          </ButtonV2>
+          </Button>
         )}
       </Show>
     </div>
diff --git a/packages/app/src/pages/layout/session-tab-avatar.tsx b/packages/app/src/pages/layout/session-tab-avatar.tsx
index 8a8ef28a5a3..2e1b820bd4e 100644
--- a/packages/app/src/pages/layout/session-tab-avatar.tsx
+++ b/packages/app/src/pages/layout/session-tab-avatar.tsx
@@ -1,9 +1,8 @@
-import type { LocalProject } from "@/context/layout"
-import { getProjectAvatarVariant } from "@/context/layout"
+import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
 import type { ServerConnection } from "@/context/servers"
 import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
 import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
 import { SessionProgressIndicatorV2 } from "@opencode-ai/session-ui/v2/session-progress-indicator-v2"
 import { Show } from "solid-js"
 
diff --git a/packages/app/src/pages/new-session/new-session-view.tsx b/packages/app/src/pages/new-session/new-session-view.tsx
index 86f523642d8..6cd73f4ae1b 100644
--- a/packages/app/src/pages/new-session/new-session-view.tsx
+++ b/packages/app/src/pages/new-session/new-session-view.tsx
@@ -1,8 +1,7 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Icon } from "@opencode-ai/ui/v2/icon"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Wordmark } from "@opencode-ai/ui/wordmark"
 import { Show, createMemo, createSignal } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Portal } from "solid-js/web"
@@ -47,7 +46,7 @@ export function NewSessionView(props: {
       >
         <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
           <div class={NEW_SESSION_CONTENT_WIDTH}>
-            <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
+            <Wordmark class="h-auto w-full text-v2-background-bg-inverse" />
             <div class="mt-8 flex flex-col gap-8">
               <PromptInputV2Composer controller={props.input} accentSubmit={props.workspace.selection.workspace()} />
               <Show when={props.project.empty()}>
@@ -96,7 +95,7 @@ export function NewSessionStatus(props: { mount: HTMLElement | null; visible: bo
       {(mount) => (
         <Portal mount={mount}>
           <Show when={props.visible}>
-            <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+            <Tooltip appearance="standard" placement="bottom" value={language.t("status.popover.trigger")}>
               <StatusPopoverV2 />
             </Tooltip>
           </Show>
@@ -153,7 +152,7 @@ function ProviderTip() {
               <Icon name="chevron-down" size="small" class="-rotate-90" />
             </span>
           </button>
-          <TooltipV2
+          <Tooltip
             class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
             placement="top"
             openDelay={1000}
@@ -167,7 +166,7 @@ function ProviderTip() {
             >
               <Icon name="xmark-small" />
             </button>
-          </TooltipV2>
+          </Tooltip>
         </div>
       </div>
     </Show>
diff --git a/packages/app/src/pages/new-session/use-new-session-commands.tsx b/packages/app/src/pages/new-session/use-new-session-commands.tsx
index a0d835f97f5..342dc7a0856 100644
--- a/packages/app/src/pages/new-session/use-new-session-commands.tsx
+++ b/packages/app/src/pages/new-session/use-new-session-commands.tsx
@@ -21,8 +21,8 @@ export function useNewSessionCommands(input: {
       title: language.t("command.palette"),
       hidden: true,
       onSelect: async () => {
-        const { DialogSelectFile } = await import("@/components/dialog-select-file")
-        void dialog.show(() => <DialogSelectFile />)
+        const { DialogCommandPaletteV2 } = await import("@/components/dialog-command-palette-v2")
+        void dialog.show(() => <DialogCommandPaletteV2 />)
       },
     },
     {
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index 0b3405996a7..1f7402427bf 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -30,10 +30,9 @@ import { createStore } from "solid-js/store"
 import type { SessionReviewLineComment } from "@opencode-ai/session-ui/session-review"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Select } from "@opencode-ai/ui/select"
-import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { isScrollKeyTarget, scrollKey, scrollKeyOwner } from "@opencode-ai/ui/scroll-view"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Button } from "@opencode-ai/ui/button"
 import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { previewSelectedLines } from "@opencode-ai/session-ui/pierre/selection-bridge"
 import { showToast } from "@/utils/toast"
@@ -195,9 +194,9 @@ function SessionErrorFallback(props: { error: unknown; sessionID?: string; serve
               </div>
             )}
           </Show>
-          <ButtonV2 variant="neutral" size="normal" icon="xmark-small" onClick={closeTab}>
+          <Button variant="neutral" size="normal" icon="xmark-small" onClick={closeTab}>
             {language.t("session.error.notFound.closeTab")}
-          </ButtonV2>
+          </Button>
         </div>
       </div>
     )
@@ -1039,25 +1038,6 @@ export default function Page() {
 
     return (
       <Select
-        options={changesOptions()}
-        current={reviewMode()}
-        label={changesLabel}
-        onSelect={(option) => option && controller.layout.view().review.setMode(option)}
-        variant="ghost"
-        size="small"
-        valueClass="text-14-medium"
-      />
-    )
-  }
-
-  const changesTitleV2 = () => {
-    if (!canReview()) {
-      return null
-    }
-
-    return (
-      <SelectV2
-        appearance="inline"
         options={changesOptions()}
         current={reviewMode()}
         label={changesLabel}
@@ -1161,7 +1141,7 @@ export default function Page() {
   // updates such as session switches.
   const reviewPanelV2Props = () => ({
     get title() {
-      return changesTitleV2()
+      return changesTitle()
     },
     get empty() {
       return reviewEmptyV2()
@@ -1752,22 +1732,22 @@ export default function Page() {
       >
         <Tabs.Trigger
           value="session"
+          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
           classList={{
             "!w-1/2 !max-w-none": true,
             "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
           }}
-          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
           onClick={() => setStore("mobileTab", "session")}
         >
           {language.t("session.tab.session")}
         </Tabs.Trigger>
         <Tabs.Trigger
           value="changes"
+          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
           classList={{
             "!w-1/2 !max-w-none !border-r-0": true,
             "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
           }}
-          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
           onClick={() => setStore("mobileTab", "changes")}
         >
           {hasReview()
diff --git a/packages/app/src/pages/session/composer/session-background-dock.tsx b/packages/app/src/pages/session/composer/session-background-dock.tsx
index 1814fc1c72c..89021a35b40 100644
--- a/packages/app/src/pages/session/composer/session-background-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-background-dock.tsx
@@ -1,6 +1,6 @@
 import { useLanguage } from "@/context/language"
 import { useCommand } from "@/context/command"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { Keybind } from "@opencode-ai/ui/keybind"
 import { For, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import { SessionComposerPullout } from "./session-composer-pullout"
@@ -52,7 +52,7 @@ export function SessionBackgroundDock(props: {
             <span>
               <span class="text-v2-text-text-muted">{moving()}</span>
               <span class="pl-2">
-                <KeybindV2 keys={command.keybindParts("session.background")} variant="neutral" />
+                <Keybind keys={command.keybindParts("session.background")} variant="neutral" />
               </span>
             </span>
           )}
diff --git a/packages/app/src/pages/session/composer/session-composer-pullout.tsx b/packages/app/src/pages/session/composer/session-composer-pullout.tsx
index 962ed013d4b..baba570c019 100644
--- a/packages/app/src/pages/session/composer/session-composer-pullout.tsx
+++ b/packages/app/src/pages/session/composer/session-composer-pullout.tsx
@@ -1,4 +1,5 @@
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
@@ -107,7 +108,7 @@ export function SessionComposerPullout(props: {
               <IconButton
                 data-action={`session-${props.name}-toggle-button`}
                 data-collapsed={props.collapsed ? "true" : "false"}
-                icon="chevron-down"
+                icon={<Icon name="chevron-down" />}
                 size="normal"
                 variant="ghost"
                 style={{ transform: `rotate(${value() * 180}deg)` }}
diff --git a/packages/app/src/pages/session/composer/session-followup-dock.tsx b/packages/app/src/pages/session/composer/session-followup-dock.tsx
index c96d2266896..03a24855be0 100644
--- a/packages/app/src/pages/session/composer/session-followup-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-followup-dock.tsx
@@ -3,6 +3,7 @@ import { createStore } from "solid-js/store"
 import { Button } from "@opencode-ai/ui/button"
 import { DockTray } from "@opencode-ai/ui/dock-surface"
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
 import { useLanguage } from "@/context/language"
 
 export function SessionFollowupDock(props: {
@@ -48,7 +49,7 @@ export function SessionFollowupDock(props: {
         <div class="ml-auto shrink-0">
           <IconButton
             data-collapsed={store.collapsed ? "true" : "false"}
-            icon="chevron-down"
+            icon={<Icon name="chevron-down" />}
             size="normal"
             variant="ghost"
             style={{ transform: `rotate(${store.collapsed ? 180 : 0}deg)` }}
@@ -79,7 +80,7 @@ export function SessionFollowupDock(props: {
                 <span class="min-w-0 flex-1 truncate text-13-regular text-text-strong">{item.text}</span>
                 <Button
                   size="small"
-                  variant="secondary"
+                  variant="neutral"
                   class="shrink-0"
                   disabled={!!props.sending}
                   onClick={() => props.onSend(item.id)}
diff --git a/packages/app/src/pages/session/composer/session-permission-dock.tsx b/packages/app/src/pages/session/composer/session-permission-dock.tsx
index 4b2c09a238b..1d9d003aa8b 100644
--- a/packages/app/src/pages/session/composer/session-permission-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-permission-dock.tsx
@@ -38,14 +38,14 @@ export function SessionPermissionDock(props: {
               {language.t("ui.permission.deny")}
             </Button>
             <Button
-              variant="secondary"
+              variant="neutral"
               size="normal"
               onClick={() => props.onDecide("always")}
               disabled={props.responding}
             >
               {language.t("ui.permission.allowAlways")}
             </Button>
-            <Button variant="primary" size="normal" onClick={() => props.onDecide("once")} disabled={props.responding}>
+            <Button variant="contrast" size="normal" onClick={() => props.onDecide("once")} disabled={props.responding}>
               {language.t("ui.permission.allowOnce")}
             </Button>
           </div>
diff --git a/packages/app/src/pages/session/composer/session-question-dock.tsx b/packages/app/src/pages/session/composer/session-question-dock.tsx
index 90a09db832b..7ec6a6f19e7 100644
--- a/packages/app/src/pages/session/composer/session-question-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-question-dock.tsx
@@ -2,6 +2,7 @@ import { For, Show, createEffect, createMemo, onCleanup, onMount, type Component
 import { createStore } from "solid-js/store"
 import { useMutation } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { DockPrompt } from "@opencode-ai/session-ui/dock-prompt"
 import { Icon } from "@opencode-ai/ui/icon"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
@@ -499,19 +500,14 @@ export const SessionQuestionDock: Component<{ request: FormInfo; onSubmit: () =>
                   </For>
                 </div>
               </Show>
-              <button
-                type="button"
-                data-component="icon-button"
-                data-icon="chevron-down"
-                data-size="normal"
-                data-variant="ghost"
+              <IconButton
+                icon={<Icon name="chevron-down" size="small" />}
+                variant="ghost"
                 disabled={sending()}
                 style={{ transform: `rotate(${hidden() * 180}deg)` }}
                 onClick={store.minimized ? restore : minimize}
                 aria-label={language.t(store.minimized ? "session.question.restore" : "session.question.minimize")}
-              >
-                <Icon name="chevron-down" size="small" />
-              </button>
+              />
             </div>
           </>
         }
@@ -522,12 +518,12 @@ export const SessionQuestionDock: Component<{ request: FormInfo; onSubmit: () =>
             </Button>
             <div data-slot="question-footer-actions">
               <Show when={store.tab > 0}>
-                <Button variant="secondary" size="large" disabled={sending()} onClick={back}>
+                <Button variant="neutral" size="large" disabled={sending()} onClick={back}>
                   {language.t("ui.common.back")}
                 </Button>
               </Show>
               <Button
-                variant={last() ? "primary" : "secondary"}
+                variant={last() ? "contrast" : "neutral"}
                 size="large"
                 disabled={sending()}
                 onClick={next}
diff --git a/packages/app/src/pages/session/composer/session-revert-dock.tsx b/packages/app/src/pages/session/composer/session-revert-dock.tsx
index 3b203a903ce..ed4048f2b92 100644
--- a/packages/app/src/pages/session/composer/session-revert-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-revert-dock.tsx
@@ -1,8 +1,8 @@
 import { For, Show, createEffect, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { useLanguage } from "@/context/language"
 
 export function SessionRevertDock(props: {
@@ -45,7 +45,7 @@ export function SessionRevertDock(props: {
         onClick={toggle}
         onKeyDown={onHeaderKeyDown}
       >
-        <IconV2 name="outline-reset" size="normal" class="text-v2-icon-icon-muted" />
+        <Icon name="outline-reset" size="normal" class="text-v2-icon-icon-muted" />
         <span
           classList={{
             "font-[440] shrink-0 cursor-default text-[13px] leading-5 tracking-[-0.04px]": true,
@@ -61,8 +61,8 @@ export function SessionRevertDock(props: {
           </span>
         </Show>
         <div class="ml-auto shrink-0">
-          <IconButtonV2
-            icon={<IconV2 name="outline-chevron-down" size="small" />}
+          <IconButton
+            icon={<Icon name="outline-chevron-down" size="small" />}
             size="large"
             variant="ghost-muted"
             style={{ transform: `rotate(${store.collapsed ? 180 : 0}deg)` }}
@@ -95,7 +95,7 @@ export function SessionRevertDock(props: {
                 <span class="min-w-0 flex-1 truncate text-[13px] font-[400] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
                   {item.text}
                 </span>
-                <ButtonV2
+                <Button
                   size="small"
                   variant="neutral"
                   class="shrink-0"
@@ -103,7 +103,7 @@ export function SessionRevertDock(props: {
                   onClick={() => props.onRestore(item.id)}
                 >
                   {language.t("session.revertDock.restore")}
-                </ButtonV2>
+                </Button>
               </div>
             )}
           </For>
diff --git a/packages/app/src/pages/session/file-tabs.tsx b/packages/app/src/pages/session/file-tabs.tsx
index 2abab58d874..35d1ab3c2b5 100644
--- a/packages/app/src/pages/session/file-tabs.tsx
+++ b/packages/app/src/pages/session/file-tabs.tsx
@@ -7,8 +7,8 @@ import { useFileComponent } from "@opencode-ai/ui/context/file"
 import { cloneSelectedLineRange, previewSelectedLines } from "@opencode-ai/session-ui/pierre/selection-bridge"
 import { createLineCommentControllerV2 } from "@opencode-ai/session-ui/v2/line-comment-annotations-v2"
 import { sampledChecksum } from "@opencode-ai/util/encode"
-import { LineCommentV2OverflowIcon } from "@opencode-ai/ui/v2/line-comment-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { LineCommentOverflowIcon } from "@opencode-ai/ui/line-comment"
+import { Menu } from "@opencode-ai/ui/menu"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { showToast } from "@/utils/toast"
@@ -26,7 +26,7 @@ type SessionFileViewProps = {
 
 const selectionSide = (range: SelectedLineRange) => range.endSide ?? range.side ?? "additions"
 
-function FileCommentMenuV2(props: {
+function FileCommentMenu(props: {
   moreLabel: string
   editLabel: string
   deleteLabel: string
@@ -35,17 +35,17 @@ function FileCommentMenuV2(props: {
 }) {
   return (
     <div onMouseDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}>
-      <MenuV2 gutter={4}>
-        <MenuV2.Trigger as="button" type="button" data-slot="line-comment-v2-overflow" aria-label={props.moreLabel}>
-          <LineCommentV2OverflowIcon />
-        </MenuV2.Trigger>
-        <MenuV2.Portal>
-          <MenuV2.Content>
-            <MenuV2.Item onSelect={props.onEdit}>{props.editLabel}</MenuV2.Item>
-            <MenuV2.Item onSelect={props.onDelete}>{props.deleteLabel}</MenuV2.Item>
-          </MenuV2.Content>
-        </MenuV2.Portal>
-      </MenuV2>
+      <Menu gutter={4}>
+        <Menu.Trigger as="button" type="button" data-slot="line-comment-v2-overflow" aria-label={props.moreLabel}>
+          <LineCommentOverflowIcon />
+        </Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Content>
+            <Menu.Item onSelect={props.onEdit}>{props.editLabel}</Menu.Item>
+            <Menu.Item onSelect={props.onDelete}>{props.deleteLabel}</Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
     </div>
   )
 }
@@ -331,7 +331,7 @@ export function SessionFileView(props: SessionFileViewProps) {
     },
     editSubmitLabel: language.t("common.save"),
     renderCommentActions: (_, controls) => (
-      <FileCommentMenuV2
+      <FileCommentMenu
         moreLabel={language.t("common.moreOptions")}
         editLabel={language.t("common.edit")}
         deleteLabel={language.t("common.delete")}
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index 9b2f96ffcfd..097a501d1a7 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -10,9 +10,8 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Mark } from "@opencode-ai/ui/logo"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import type { FileDiffInfo } from "@opencode-ai/client/promise"
 
 import FileTree from "@/components/file-tree"
@@ -313,30 +312,27 @@ export function SessionSidePanel(props: {
                           <Show when={contextOpen()}>
                             <Tabs.Trigger
                               value="context"
+                              onMiddleClick={() => tabs().close("context")}
                               closeButton={
-                                <TooltipV2
+                                <Tooltip
                                   value={
                                     <>
                                       {language.t("common.closeTab")}
                                       <Show when={closeTabKeybind().length > 0}>
-                                        <KeybindV2 keys={closeTabKeybind()} variant="neutral" />
+                                        <Keybind keys={closeTabKeybind()} variant="neutral" />
                                       </Show>
                                     </>
                                   }
                                   placement="bottom"
                                   gutter={10}
                                 >
-                                  <IconButton
-                                    icon="close-small"
-                                    variant="ghost"
-                                    class="h-5 w-5"
+                                  <Tabs.CloseButton
                                     onClick={() => tabs().close("context")}
                                     aria-label={language.t("common.closeTab")}
                                   />
-                                </TooltipV2>
+                                </Tooltip>
                               }
                               hideCloseButton
-                              onMiddleClick={() => tabs().close("context")}
                             >
                               <div class="flex items-center gap-2">
                                 <SessionContextUsage variant="indicator" />
@@ -360,30 +356,27 @@ export function SessionSidePanel(props: {
                               >
                                 <Tabs.Trigger
                                   value={SESSION_OPEN_FILE_TAB}
+                                  onMiddleClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
                                   closeButton={
-                                    <TooltipV2
+                                    <Tooltip
                                       value={
                                         <>
                                           {language.t("common.closeTab")}
                                           <Show when={closeTabKeybind().length > 0}>
-                                            <KeybindV2 keys={closeTabKeybind()} variant="neutral" />
+                                            <Keybind keys={closeTabKeybind()} variant="neutral" />
                                           </Show>
                                         </>
                                       }
                                       placement="bottom"
                                       gutter={10}
                                     >
-                                      <IconButton
-                                        icon="close-small"
-                                        variant="ghost"
-                                        class="h-5 w-5"
+                                      <Tabs.CloseButton
                                         onClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
                                         aria-label={language.t("common.closeTab")}
                                       />
-                                    </TooltipV2>
+                                    </Tooltip>
                                   }
                                   hideCloseButton
-                                  onMiddleClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
                                 >
                                   <div class="flex items-center gap-1.5 italic">
                                     <Icon name="open-file" size="small" />
@@ -394,26 +387,26 @@ export function SessionSidePanel(props: {
                             )}
                           </For>
                           <div class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center bg-v2-background-bg-base">
-                            <TooltipV2
+                            <Tooltip
                               value={
                                 <>
                                   {language.t("command.file.open")}
                                   <Show when={openFileKeybind().length > 0}>
-                                    <KeybindV2 keys={openFileKeybind()} variant="neutral" />
+                                    <Keybind keys={openFileKeybind()} variant="neutral" />
                                   </Show>
                                 </>
                               }
                               placement="bottom"
                               class="flex items-center"
                             >
-                              <IconButtonV2
+                              <IconButton
                                 icon={<Icon name="plus-small" />}
                                 variant="ghost-muted"
                                 size="large"
                                 onClick={() => openFileBrowser()}
                                 aria-label={language.t("command.file.open")}
                               />
-                            </TooltipV2>
+                            </Tooltip>
                           </div>
                         </Tabs.List>
                         <div
@@ -503,7 +496,7 @@ export function SessionSidePanel(props: {
                   classList={{ "border-l border-border-weaker-base": reviewOpen() }}
                 >
                   <Tabs
-                    variant="pill"
+                    variant="surface"
                     value={fileTreeTab()}
                     onChange={setFileTreeTabValue}
                     class="h-full"
diff --git a/packages/app/src/pages/session/terminal-panel-v2.tsx b/packages/app/src/pages/session/terminal-panel-v2.tsx
index c6fad6eec9f..fca4d34c1c7 100644
--- a/packages/app/src/pages/session/terminal-panel-v2.tsx
+++ b/packages/app/src/pages/session/terminal-panel-v2.tsx
@@ -10,8 +10,9 @@ import { RestrictToElement } from "@dnd-kit/dom/modifiers"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Keybind } from "@opencode-ai/ui/keybind"
 
 import { SortableTerminalTabV2 } from "@/components/session/session-sortable-terminal-tab-v2"
 import { Terminal } from "@/components/terminal"
@@ -249,7 +250,7 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
           >
             <div class="flex flex-col h-full">
               <Tabs
-                variant="normal"
+                variant="panel"
                 value={terminal.active()}
                 onChange={(id) => terminal.open(id)}
                 class="!h-[52px] !flex-none"
@@ -266,12 +267,12 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
                     {(pty, index) => <SortableTerminalTabV2 terminal={pty} index={index()} onClose={close} />}
                   </For>
                   <div class="h-full flex items-center justify-center">
-                    <TooltipV2
+                    <Tooltip
                       value={
                         <>
                           {language.t("command.terminal.new")}
                           <Show when={newTerminalKeybind().length > 0}>
-                            <KeybindV2 keys={newTerminalKeybind()} variant="neutral" />
+                            <Keybind keys={newTerminalKeybind()} variant="neutral" />
                           </Show>
                         </>
                       }
@@ -279,13 +280,12 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
                       class="flex items-center"
                     >
                       <IconButton
-                        icon="plus-small"
+                        icon={<Icon name="plus-small" size="large" />}
                         variant="ghost"
-                        iconSize="large"
                         onClick={() => terminal.new({ focus: true })}
                         aria-label={language.t("command.terminal.new")}
                       />
-                    </TooltipV2>
+                    </Tooltip>
                   </div>
                 </Tabs.List>
               </Tabs>
diff --git a/packages/app/src/pages/session/timeline/controller.tsx b/packages/app/src/pages/session/timeline/controller.tsx
index f346f8e8179..c10358511e6 100644
--- a/packages/app/src/pages/session/timeline/controller.tsx
+++ b/packages/app/src/pages/session/timeline/controller.tsx
@@ -1,6 +1,6 @@
 import type { SessionMessageInfo } from "@opencode-ai/client/promise"
-import { DialogFooter, DialogHeader, DialogTitleGroup, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { DialogFooter, DialogHeader, DialogTitleGroup, Dialog } from "@opencode-ai/ui/dialog"
+import { Button } from "@opencode-ai/ui/button"
 import { useNavigate } from "@solidjs/router"
 import { createEffect, createMemo, on } from "solid-js"
 import { createStore } from "solid-js/store"
@@ -186,7 +186,7 @@ export function createTimelineController(input: { session: TimelineSessionSource
       dialog.close()
     }
     return (
-      <DialogV2 fit>
+      <Dialog fit>
         <DialogHeader hideClose>
           <DialogTitleGroup
             title={language.t("session.delete.title")}
@@ -194,14 +194,14 @@ export function createTimelineController(input: { session: TimelineSessionSource
           />
         </DialogHeader>
         <DialogFooter>
-          <ButtonV2 variant="ghost" onClick={() => dialog.close()}>
+          <Button variant="ghost" onClick={() => dialog.close()}>
             {language.t("common.cancel")}
-          </ButtonV2>
-          <ButtonV2 variant="danger" onClick={confirm}>
+          </Button>
+          <Button variant="danger" onClick={confirm}>
             {language.t("session.delete.button")}
-          </ButtonV2>
+          </Button>
         </DialogFooter>
-      </DialogV2>
+      </Dialog>
     )
   }
 
diff --git a/packages/app/src/pages/session/timeline/message-timeline.tsx b/packages/app/src/pages/session/timeline/message-timeline.tsx
index 5880ccc58df..246958f3a2c 100644
--- a/packages/app/src/pages/session/timeline/message-timeline.tsx
+++ b/packages/app/src/pages/session/timeline/message-timeline.tsx
@@ -15,13 +15,13 @@ import { createVirtualizer, defaultRangeExtractor, elementScroll, type VirtualIt
 import { Card } from "@opencode-ai/ui/card"
 import { MessageDivider, SessionShellMessage, type UserActions } from "@opencode-ai/session-ui/message-part"
 import { DiffChanges } from "@opencode-ai/ui/diff-changes"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
+import { Button } from "@opencode-ai/ui/button"
 import { SessionRetry } from "@opencode-ai/session-ui/session-retry"
 import { isScrollKeyTarget, scrollKey, scrollKeyOwner, ScrollView } from "@opencode-ai/ui/scroll-view"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
@@ -138,7 +138,7 @@ function WorkspaceMoveAction(props: {
             : "flex h-[46px] w-full items-center gap-2 rounded-b-[6px] px-3 pe-9 pt-2.5 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted focus-visible:outline-none"
         }
       >
-        <IconV2 name="workspace-new" class="shrink-0 text-v2-icon-icon-muted" />
+        <Icon name="workspace-new" class="shrink-0 text-v2-icon-icon-muted" />
         <span class="min-w-0 truncate">{language.t("workspace.move.title")}</span>
       </SessionWorkspaceMenu>
       <button
@@ -154,7 +154,7 @@ function WorkspaceMoveAction(props: {
           props.onDismiss()
         }}
       >
-        <IconV2 name="xmark-small" />
+        <Icon name="xmark-small" />
       </button>
     </div>
   )
@@ -203,12 +203,12 @@ function SessionSummaryPanel(props: {
           gutter={-22}
           class={`${row} hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed`}
         >
-          <IconV2 name={props.local ? "monitor" : "workspace-isolated"} class="shrink-0 text-v2-icon-icon-muted" />
+          <Icon name={props.local ? "monitor" : "workspace-isolated"} class="shrink-0 text-v2-icon-icon-muted" />
           <span class="min-w-0 flex-1 truncate text-start">{location()}</span>
-          <IconV2 name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+          <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
         </SessionWorkspaceMenu>
         <div class={row}>
-          <IconV2 name="branch" class="shrink-0 text-v2-icon-icon-muted" />
+          <Icon name="branch" class="shrink-0 text-v2-icon-icon-muted" />
           <Show
             when={props.branch}
             fallback={
@@ -235,13 +235,13 @@ function SessionSummaryPanel(props: {
           class={`${row} hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none`}
           onClick={props.onReview}
         >
-          <IconV2 name="review" class="shrink-0 text-v2-icon-icon-muted" />
+          <Icon name="review" class="shrink-0 text-v2-icon-icon-muted" />
           <Show when={props.diffs} fallback={<span>{language.t("session.review.loadingChanges")}</span>}>
             {(diffs) => (
               <Show when={diffs().length > 0} fallback={<span>{language.t("session.review.noChanges")}</span>}>
                 <span>{language.plural("ui.sessionTurn.diffs.changed", diffs().length)}</span>
                 <span class="text-v2-text-text-muted">·</span>
-                <DiffChanges changes={diffs()} />
+                <DiffChanges appearance="standard" changes={diffs()} />
               </Show>
             )}
           </Show>
@@ -1175,11 +1175,11 @@ function MessageTimelineView(
                     when={workspaceSession()}
                     fallback={
                       <span class="flex size-6 shrink-0 items-center justify-center text-v2-icon-icon-muted">
-                        <IconV2 name="monitor" />
+                        <Icon name="monitor" />
                       </span>
                     }
                   >
-                    <TooltipV2
+                    <Tooltip
                       placement="bottom-start"
                       value={sessionDirectory()}
                       contentClass="max-w-[calc(100vw-32px)] break-all"
@@ -1189,9 +1189,9 @@ function MessageTimelineView(
                         aria-label={sessionDirectory()}
                         class="flex size-6 shrink-0 items-center justify-center text-v2-icon-icon-accent"
                       >
-                        <IconV2 name="workspace-isolated" />
+                        <Icon name="workspace-isolated" />
                       </span>
-                    </TooltipV2>
+                    </Tooltip>
                   </Show>
                   <Show when={parentID()}>
                     <button
@@ -1268,8 +1268,8 @@ function MessageTimelineView(
                           onOpenChange={setSummary}
                         >
                           <KobaltePopover.Trigger
-                            as={IconButtonV2}
-                            icon={<IconV2 name="window-analytics" />}
+                            as={IconButton}
+                            icon={<Icon name="window-analytics" />}
                             variant="ghost-muted"
                             size="large"
                             state={summaryOpen() ? "pressed" : undefined}
@@ -1300,7 +1300,7 @@ function MessageTimelineView(
                       )}
                     </Show>
                     <Show when={!parentID()}>
-                      <MenuV2
+                      <Menu
                         gutter={6}
                         placement="bottom-end"
                         open={title.menuOpen}
@@ -1309,9 +1309,9 @@ function MessageTimelineView(
                           if (open) return
                         }}
                       >
-                        <MenuV2.Trigger
-                          as={IconButtonV2}
-                          icon={<IconV2 name="outline-dots" />}
+                        <Menu.Trigger
+                          as={IconButton}
+                          icon={<Icon name="outline-dots" />}
                           variant="ghost-muted"
                           size="large"
                           state={share.open || title.pendingShare ? "pressed" : undefined}
@@ -1321,8 +1321,8 @@ function MessageTimelineView(
                             more = el
                           }}
                         />
-                        <MenuV2.Portal>
-                          <MenuV2.Content
+                        <Menu.Portal>
+                          <Menu.Content
                             style={{ width: "120px", "min-width": "120px" }}
                             onCloseAutoFocus={(event) => {
                               if (title.pendingRename) {
@@ -1340,34 +1340,34 @@ function MessageTimelineView(
                               }
                             }}
                           >
-                            <MenuV2.Item
+                            <Menu.Item
                               onSelect={() => {
                                 setTitle("pendingRename", true)
                                 setTitle("menuOpen", false)
                               }}
                             >
                               {language.t("common.rename")}
-                            </MenuV2.Item>
+                            </Menu.Item>
                             <Show when={shareEnabled()}>
-                              <MenuV2.Item
+                              <Menu.Item
                                 onSelect={() => {
                                   setTitle({ pendingShare: true, menuOpen: false })
                                 }}
                               >
                                 {language.t("session.share.action.share")}...
-                              </MenuV2.Item>
+                              </Menu.Item>
                             </Show>
-                            <MenuV2.Item onSelect={() => void props.action.export(id)}>
+                            <Menu.Item onSelect={() => void props.action.export(id)}>
                               {language.t("common.export")}...
-                            </MenuV2.Item>
+                            </Menu.Item>
                             {/* TODO: Need a V2 session archive API. */}
-                            <MenuV2.Separator />
-                            <MenuV2.Item onSelect={() => props.action.showDelete(id)}>
+                            <Menu.Separator />
+                            <Menu.Item onSelect={() => props.action.showDelete(id)}>
                               {language.t("common.delete")}...
-                            </MenuV2.Item>
-                          </MenuV2.Content>
-                        </MenuV2.Portal>
-                      </MenuV2>
+                            </Menu.Item>
+                          </Menu.Content>
+                        </Menu.Portal>
+                      </Menu>
 
                       <KobaltePopover
                         open={share.open}
@@ -1415,7 +1415,7 @@ function MessageTimelineView(
                               <Show
                                 when={shareUrl()}
                                 fallback={
-                                  <ButtonV2
+                                  <Button
                                     variant="contrast"
                                     class="w-full"
                                     onClick={() => void props.action.share()}
@@ -1424,7 +1424,7 @@ function MessageTimelineView(
                                     {props.pending.share()
                                       ? language.t("session.share.action.publishing")
                                       : language.t("session.share.action.publish")}
-                                  </ButtonV2>
+                                  </Button>
                                 }
                               >
                                 <div class="flex flex-col gap-2">
@@ -1441,26 +1441,26 @@ function MessageTimelineView(
                                     >
                                       {shareUrl()}
                                     </div>
-                                    <IconButtonV2
+                                    <IconButton
                                       type="button"
                                       size="small"
                                       variant="ghost-muted"
-                                      icon={<IconV2 name="outline-copy" />}
+                                      icon={<Icon name="outline-copy" />}
                                       aria-label={language.t("session.share.copy.copyLink")}
                                       onClick={() => void props.action.copyShareUrl()}
                                     />
-                                    <IconButtonV2
+                                    <IconButton
                                       type="button"
                                       size="small"
                                       variant="ghost-muted"
-                                      icon={<IconV2 name="outline-square-arrow" />}
+                                      icon={<Icon name="outline-square-arrow" />}
                                       aria-label={language.t("session.share.action.view")}
                                       onClick={props.action.viewShare}
                                       disabled={props.pending.unshare()}
                                     />
                                   </div>
                                   <div class="flex w-full">
-                                    <ButtonV2
+                                    <Button
                                       variant="outline"
                                       class="w-full"
                                       onClick={() => void props.action.unshare()}
@@ -1469,7 +1469,7 @@ function MessageTimelineView(
                                       {props.pending.unshare()
                                         ? language.t("session.share.action.unpublishing")
                                         : language.t("session.share.action.unpublish")}
-                                    </ButtonV2>
+                                    </Button>
                                   </div>
                                 </div>
                               </Show>
diff --git a/packages/app/src/pages/session/usage-exceeded-dialogs.tsx b/packages/app/src/pages/session/usage-exceeded-dialogs.tsx
index 472385f72fd..7214a800359 100644
--- a/packages/app/src/pages/session/usage-exceeded-dialogs.tsx
+++ b/packages/app/src/pages/session/usage-exceeded-dialogs.tsx
@@ -4,9 +4,8 @@ import type { SessionStatus } from "@opencode-ai/client/promise"
 import { onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useSessionLayout } from "./session-layout"
-import { useDialog } from "@opencode-ai/ui/context"
+import { useDialog, useI18n } from "@opencode-ai/ui/context"
 import { DialogUsageExceeded } from "@/components/dialog-usage-exceeded"
-import { useI18n } from "@opencode-ai/ui/context"
 
 const GO_UPSELL_FREE_TIER_LAST_SEEN_AT = "go_upsell_last_seen_at"
 const GO_UPSELL_FREE_TIER_DONT_SHOW = "go_upsell_dont_show"
diff --git a/packages/app/src/pages/session/use-session-commands.tsx b/packages/app/src/pages/session/use-session-commands.tsx
index ba50469c7e9..e3bc090e4a4 100644
--- a/packages/app/src/pages/session/use-session-commands.tsx
+++ b/packages/app/src/pages/session/use-session-commands.tsx
@@ -219,8 +219,8 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
 
   const openFile = () => {
     void openDialog(
-      () => import("@/components/dialog-select-file"),
-      (x) => dialog.show(() => <x.DialogSelectFile onOpenFile={showAllFiles} />),
+      () => import("@/components/dialog-command-palette-v2"),
+      (x) => dialog.show(() => <x.DialogCommandPaletteV2 onOpenFile={showAllFiles} />),
     )
   }
 
diff --git a/packages/app/src/pages/session/v2/review-panel-v2.tsx b/packages/app/src/pages/session/v2/review-panel-v2.tsx
index 209492dde9a..585a6e00475 100644
--- a/packages/app/src/pages/session/v2/review-panel-v2.tsx
+++ b/packages/app/src/pages/session/v2/review-panel-v2.tsx
@@ -7,7 +7,7 @@ import {
   SessionReviewV2Sidebar,
 } from "@opencode-ai/session-ui/v2/session-review-v2"
 import { SessionReviewFilePreviewV2 } from "@opencode-ai/session-ui/v2/session-review-file-preview-v2"
-import { DiffChanges } from "@opencode-ai/ui/v2/diff-changes-v2"
+import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import type {
   SessionReviewComment,
   SessionReviewCommentActions,
diff --git a/packages/app/src/pages/session/v2/session-file-list-v2.tsx b/packages/app/src/pages/session/v2/session-file-list-v2.tsx
index 5e940f29851..263e666b875 100644
--- a/packages/app/src/pages/session/v2/session-file-list-v2.tsx
+++ b/packages/app/src/pages/session/v2/session-file-list-v2.tsx
@@ -1,5 +1,5 @@
 import { FileIcon } from "@opencode-ai/ui/file-icon"
-import "@opencode-ai/ui/v2/file-tree-v2.css"
+import "@opencode-ai/ui/file-tree.css"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
 import { kindChange, kindLabel, type Kind } from "@/components/file-tree-v2"
diff --git a/packages/app/src/utils/toast.tsx b/packages/app/src/utils/toast.tsx
index e2cdc35c5aa..58f1000f2e3 100644
--- a/packages/app/src/utils/toast.tsx
+++ b/packages/app/src/utils/toast.tsx
@@ -1,15 +1,18 @@
 import { Icon, type IconProps } from "@opencode-ai/ui/icon"
-import type { ToastOptions, ToastVariant } from "@opencode-ai/ui/toast"
-import { ToastV2, showToastV2, toasterV2 } from "@opencode-ai/ui/v2/toast-v2"
+import { Toast, showToast, toaster, type ToastOptions } from "@opencode-ai/ui/toast"
 
-export function ToastRegion() {
-  return <ToastV2.Region />
+type AppToastOptions = Omit<ToastOptions, "icon"> & {
+  icon?: IconProps["name"]
 }
 
-export function showToast(options: ToastOptions | string) {
-  if (typeof options === "string") return showToastV2(options)
+export function ToastRegion() {
+  return <Toast.Region />
+}
 
-  return showToastV2({
+function showAppToast(options: AppToastOptions | string) {
+  if (typeof options === "string") return showToast(options)
+
+  return showToast({
     ...options,
     icon: resolveIcon(options.icon, options.variant),
     actions: options.actions?.map((action) => ({
@@ -19,11 +22,13 @@ export function showToast(options: ToastOptions | string) {
   })
 }
 
+export { showAppToast as showToast }
+
 export function dismissToast(toastId: number) {
-  return toasterV2.dismiss(toastId)
+  return toaster.dismiss(toastId)
 }
 
-function resolveIcon(icon: IconProps["name"] | undefined, variant: ToastVariant | undefined) {
+function resolveIcon(icon: IconProps["name"] | undefined, variant: ToastOptions["variant"]) {
   const name = icon ?? (variant === "success" ? "check" : undefined)
   if (!name) return
   return <Icon name={name} />
diff --git a/packages/app/src/wsl/dialog-add-server.tsx b/packages/app/src/wsl/dialog-add-server.tsx
index 3c0b7ee35b8..e244f35f268 100644
--- a/packages/app/src/wsl/dialog-add-server.tsx
+++ b/packages/app/src/wsl/dialog-add-server.tsx
@@ -1,15 +1,15 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { showToast } from "@opencode-ai/ui/toast"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
-import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
-import { LoaderV2 } from "@opencode-ai/ui/v2/loader-v2"
-import { RadioGroupV2, RadioItemV2 } from "@opencode-ai/ui/v2/radio-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
+import { Divider } from "@opencode-ai/ui/divider"
+import { Loader } from "@opencode-ai/ui/loader"
+import { RadioGroup, RadioItem } from "@opencode-ai/ui/radio"
+import { TextInput } from "@opencode-ai/ui/text-input"
 import { createMemo, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
+import { showToast } from "@/utils/toast"
 import { useWslAddServerProbes } from "./add-server-probes"
 import { useWslServers } from "./context"
 import { addServerViewModel, type AddServerText } from "./settings-model"
@@ -50,7 +50,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
             fallback={<div class="settings-v2-wsl-loading">{controller.loadError()}</div>}
           >
             <div class="settings-v2-wsl-loading">
-              <LoaderV2 />
+              <Loader />
             </div>
           </Show>
         </Dialog>
@@ -73,7 +73,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
           >
             <Dialog fit class="settings-v2-wsl-dialog">
               <div class="settings-v2-wsl-loading">
-                <LoaderV2 />
+                <Loader />
               </div>
             </Dialog>
           </Show>
@@ -85,13 +85,13 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
               {controller.view() === "main" ? language.t("wsl.server.add") : language.t("wsl.onboarding.installDistro")}
             </DialogTitle>
           </DialogHeader>
-          <DividerV2 />
+          <Divider />
           <Show
             when={controller.view() === "main"}
             fallback={
               <>
                 <DialogBody class="settings-v2-wsl-dialog-body settings-v2-wsl-catalog-picker">
-                  <TextInputV2
+                  <TextInput
                     class="settings-v2-wsl-catalog-search"
                     appearance="large"
                     placeholder={language.t("wsl.onboarding.searchDistros")}
@@ -100,7 +100,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                     onInput={(event) => controller.setCatalogSearch(event.currentTarget.value)}
                   />
                   <div class="settings-v2-wsl-catalog-list">
-                    <RadioGroupV2
+                    <RadioGroup
                       hideLabel
                       class="settings-v2-wsl-distro-group"
                       label={language.t("wsl.onboarding.installDistro")}
@@ -110,7 +110,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                     >
                       <For each={model().filteredInstallableDistros}>
                         {(item) => (
-                          <RadioItemV2
+                          <RadioItem
                             class="settings-v2-wsl-distro-row settings-v2-wsl-catalog-row"
                             value={item.name}
                             disabled={model().busy}
@@ -118,23 +118,23 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                           />
                         )}
                       </For>
-                    </RadioGroupV2>
+                    </RadioGroup>
                   </div>
                 </DialogBody>
                 <DialogFooter>
-                  <ButtonV2 variant="neutral" disabled={model().busy} onClick={controller.closeCatalog}>
+                  <Button variant="neutral" disabled={model().busy} onClick={controller.closeCatalog}>
                     {language.t("common.cancel")}
-                  </ButtonV2>
-                  <ButtonV2
+                  </Button>
+                  <Button
                     variant={model().installingCatalogDistro ? "loading" : "contrast"}
                     disabled={!model().installingCatalogDistro && (model().busy || !model().catalogTarget)}
                     style={{ width: "99px" }}
                     onClick={controller.installCatalogDistro}
                   >
                     <Show when={model().installingCatalogDistro} fallback={language.t("wsl.onboarding.installDistro")}>
-                      <LoaderV2 />
+                      <Loader />
                     </Show>
-                  </ButtonV2>
+                  </Button>
                 </DialogFooter>
               </>
             }
@@ -142,14 +142,9 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
             <DialogBody class="settings-v2-wsl-dialog-body">
               <div class="settings-v2-wsl-section-header">
                 <span class="settings-v2-wsl-section-title">{language.t("wsl.onboarding.installedDistros")}</span>
-                <ButtonV2
-                  variant="ghost-muted"
-                  size="small"
-                  disabled={model().busy}
-                  onClick={controller.refreshDistros}
-                >
+                <Button variant="ghost-muted" size="small" disabled={model().busy} onClick={controller.refreshDistros}>
                   {language.t("wsl.onboarding.checkAgain")}
-                </ButtonV2>
+                </Button>
               </div>
 
               <Show
@@ -165,7 +160,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                 }
               >
                 <div class="settings-v2-wsl-distro-list">
-                  <RadioGroupV2
+                  <RadioGroup
                     hideLabel
                     class="settings-v2-wsl-distro-group"
                     label={language.t("wsl.onboarding.installedDistros")}
@@ -177,7 +172,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                       {(item) => {
                         const status = () => model().distroStatuses[item.name] ?? null
                         return (
-                          <RadioItemV2
+                          <RadioItem
                             class={`settings-v2-wsl-distro-row${item.version === 1 ? " settings-v2-wsl-distro-row--unsupported" : ""}`}
                             value={item.name}
                             disabled={item.version === 1 || model().busy}
@@ -195,7 +190,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                         )
                       }}
                     </For>
-                  </RadioGroupV2>
+                  </RadioGroup>
                 </div>
               </Show>
 
@@ -230,19 +225,19 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
             </DialogBody>
 
             <DialogFooter>
-              <ButtonV2 variant="neutral" disabled={controller.adding()} onClick={controller.close}>
+              <Button variant="neutral" disabled={controller.adding()} onClick={controller.close}>
                 {language.t("common.cancel")}
-              </ButtonV2>
-              <ButtonV2
+              </Button>
+              <Button
                 variant={primaryButton().loading ? "loading" : primaryButton().variant}
                 disabled={!primaryButton().loading && primaryButton().disabled}
                 style={primaryButtonStyle()}
                 onClick={controller.runPrimary}
               >
                 <Show when={primaryButton().loading} fallback={translate(language, primaryButton().label)}>
-                  <LoaderV2 />
+                  <Loader />
                 </Show>
-              </ButtonV2>
+              </Button>
             </DialogFooter>
           </Show>
         </Dialog>
@@ -439,14 +434,14 @@ function DialogWslSetup(props: {
           </Show>
         </div>
         <Show when={props.state === "unavailable" && props.installable}>
-          <ButtonV2 variant="neutral" disabled={props.busy} onClick={props.onInstall}>
+          <Button variant="neutral" disabled={props.busy} onClick={props.onInstall}>
             {language.t("wsl.onboarding.installWsl")}
-          </ButtonV2>
+          </Button>
         </Show>
         <Show when={props.state !== "unavailable"}>
-          <ButtonV2 variant="neutral" onClick={() => dialog.close()}>
+          <Button variant="neutral" onClick={() => dialog.close()}>
             {language.t("common.close")}
-          </ButtonV2>
+          </Button>
         </Show>
       </div>
     </Dialog>
diff --git a/packages/app/src/wsl/settings.tsx b/packages/app/src/wsl/settings.tsx
index 62c981c9f32..b421930184e 100644
--- a/packages/app/src/wsl/settings.tsx
+++ b/packages/app/src/wsl/settings.tsx
@@ -1,9 +1,9 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Tag } from "@opencode-ai/ui/v2/badge-v2"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { Badge } from "@opencode-ai/ui/badge"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Menu } from "@opencode-ai/ui/menu"
 import { useMutation } from "@tanstack/solid-query"
 import fuzzysort from "fuzzysort"
 import { type Accessor, For, Show, createMemo } from "solid-js"
@@ -32,22 +32,22 @@ export function AddServerMenu(props: { onAddServer: () => void }) {
     <Show
       when={platform.wslServers}
       fallback={
-        <ButtonV2 variant="ghost-muted" icon="plus" onClick={props.onAddServer}>
+        <Button variant="ghost-muted" icon="plus" onClick={props.onAddServer}>
           {language.t("dialog.server.add.button")}
-        </ButtonV2>
+        </Button>
       }
     >
-      <MenuV2 gutter={4} modal={false} placement="bottom-end">
-        <MenuV2.Trigger as={ButtonV2} variant="ghost-muted" icon="plus">
+      <Menu gutter={4} modal={false} placement="bottom-end">
+        <Menu.Trigger as={Button} variant="ghost-muted" icon="plus">
           {language.t("dialog.server.add.button")}
-        </MenuV2.Trigger>
-        <MenuV2.Portal>
-          <MenuV2.Content>
-            <MenuV2.Item onSelect={props.onAddServer}>{language.t("dialog.server.add.button")}</MenuV2.Item>
-            <MenuV2.Item onSelect={openAddWsl}>{language.t("wsl.server.add")}</MenuV2.Item>
-          </MenuV2.Content>
-        </MenuV2.Portal>
-      </MenuV2>
+        </Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Content>
+            <Menu.Item onSelect={props.onAddServer}>{language.t("dialog.server.add.button")}</Menu.Item>
+            <Menu.Item onSelect={openAddWsl}>{language.t("wsl.server.add")}</Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
     </Show>
   )
 }
@@ -113,54 +113,52 @@ export function WslServerSettings(props: {
               </div>
               <div class="settings-v2-servers-actions">
                 <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
-                  <Tag>{language.t("dialog.server.status.default")}</Tag>
+                  <Badge>{language.t("dialog.server.status.default")}</Badge>
                 </Show>
                 <Show when={opencodeAction()}>
                   {(label) => (
-                    <ButtonV2
+                    <Button
                       size="small"
                       disabled={busy() || request.isPending}
                       onClick={() => api && request.mutate(() => api.installOpencode(item.config.distro))}
                     >
                       {busy() ? language.t("wsl.server.updating") : language.t(label())}
-                    </ButtonV2>
+                    </Button>
                   )}
                 </Show>
-                <MenuV2 gutter={4} modal={false} placement="bottom-end">
-                  <MenuV2.Trigger
-                    as={IconButtonV2}
+                <Menu gutter={4} modal={false} placement="bottom-end">
+                  <Menu.Trigger
+                    as={IconButton}
                     variant="ghost-muted"
                     size="small"
-                    icon={<IconV2 name="outline-dots" />}
+                    icon={<Icon name="outline-dots" />}
                     aria-label={language.t("common.moreOptions")}
                   />
-                  <MenuV2.Portal>
-                    <MenuV2.Content>
-                      <MenuV2.Group>
-                        <MenuV2.GroupLabel>{language.t("wsl.server.menu.label")}</MenuV2.GroupLabel>
+                  <Menu.Portal>
+                    <Menu.Content>
+                      <Menu.Group>
+                        <Menu.GroupLabel>{language.t("wsl.server.menu.label")}</Menu.GroupLabel>
                         <Show when={wslRuntimeRetryable(item.runtime)}>
-                          <MenuV2.Item onSelect={() => api && request.mutate(() => api.startServer(key))}>
+                          <Menu.Item onSelect={() => api && request.mutate(() => api.startServer(key))}>
                             {language.t("wsl.server.retryStart")}
-                          </MenuV2.Item>
+                          </Menu.Item>
                         </Show>
                         <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
-                          <MenuV2.Item onSelect={() => props.domain.defaults.set(key)}>
+                          <Menu.Item onSelect={() => props.domain.defaults.set(key)}>
                             {language.t("dialog.server.menu.default")}
-                          </MenuV2.Item>
+                          </Menu.Item>
                         </Show>
                         <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
-                          <MenuV2.Item onSelect={() => props.domain.defaults.set(null)}>
+                          <Menu.Item onSelect={() => props.domain.defaults.set(null)}>
                             {language.t("dialog.server.menu.defaultRemove")}
-                          </MenuV2.Item>
+                          </Menu.Item>
                         </Show>
-                        <MenuV2.Separator />
-                        <MenuV2.Item onSelect={() => remove(key)}>
-                          {language.t("dialog.server.menu.delete")}
-                        </MenuV2.Item>
-                      </MenuV2.Group>
-                    </MenuV2.Content>
-                  </MenuV2.Portal>
-                </MenuV2>
+                        <Menu.Separator />
+                        <Menu.Item onSelect={() => remove(key)}>{language.t("dialog.server.menu.delete")}</Menu.Item>
+                      </Menu.Group>
+                    </Menu.Content>
+                  </Menu.Portal>
+                </Menu>
               </div>
             </div>
           )
diff --git a/packages/app/test-browser/toast-owner.test.ts b/packages/app/test-browser/toast-owner.test.ts
index 25ba5c000e1..867e8a5faa0 100644
--- a/packages/app/test-browser/toast-owner.test.ts
+++ b/packages/app/test-browser/toast-owner.test.ts
@@ -1,44 +1,44 @@
 import { beforeEach, describe, expect, test } from "bun:test"
 import { createSignal, type JSX } from "solid-js"
-import { showToastV2, toasterV2 } from "@opencode-ai/ui/v2/toast-v2"
+import { showToast, toaster } from "@opencode-ai/ui/toast"
 
-describe("showToastV2", () => {
+describe("showToast", () => {
   // The toast registry is module state, so each test starts from an empty stack.
   beforeEach(() => {
-    toasterV2.dismiss()
+    toaster.dismiss()
   })
 
   test("coalesces exact active content", () => {
-    const first = showToastV2({ title: "Repeated error", description: "Try again" })
-    const second = showToastV2({ title: "Repeated error", description: "Try again" })
-    const different = showToastV2({ title: "Repeated error", description: "A different error" })
+    const first = showToast({ title: "Repeated error", description: "Try again" })
+    const second = showToast({ title: "Repeated error", description: "Try again" })
+    const different = showToast({ title: "Repeated error", description: "A different error" })
 
     expect(second).toBe(first)
     expect(different).not.toBe(first)
 
-    toasterV2.dismiss(first)
-    toasterV2.dismiss(different)
+    toaster.dismiss(first)
+    toaster.dismiss(different)
   })
 
   test("allows dismissed content to appear again", () => {
-    const first = showToastV2("Dismiss and retry")
-    toasterV2.dismiss(first)
+    const first = showToast("Dismiss and retry")
+    toaster.dismiss(first)
 
-    const second = showToastV2("Dismiss and retry")
+    const second = showToast("Dismiss and retry")
     expect(second).not.toBe(first)
 
-    toasterV2.dismiss(second)
+    toaster.dismiss(second)
   })
 
   test("recreates matching content when it is not the topmost toast", () => {
-    const first = showToastV2("First toast")
-    const topmost = showToastV2("Topmost toast")
-    const repeated = showToastV2("First toast")
+    const first = showToast("First toast")
+    const topmost = showToast("Topmost toast")
+    const repeated = showToast("First toast")
 
     expect(repeated).not.toBe(first)
 
-    toasterV2.dismiss(topmost)
-    toasterV2.dismiss(repeated)
+    toaster.dismiss(topmost)
+    toaster.dismiss(repeated)
   })
 
   test("creates no reactive computations at call time", () => {
@@ -50,7 +50,7 @@ describe("showToastV2", () => {
       return undefined
     }) as unknown as JSX.Element
 
-    const id = showToastV2({ description: "test", icon })
+    const id = showToast({ description: "test", icon })
 
     // Resolving the icon at call time creates an ownerless computation that is
     // never disposed and tracks its dependencies forever; it must only resolve
@@ -59,6 +59,6 @@ describe("showToastV2", () => {
     setTick(1)
     expect(reads).toBe(0)
 
-    toasterV2.dismiss(id)
+    toaster.dismiss(id)
   })
 })
diff --git a/packages/desktop/src/renderer/migration-status.tsx b/packages/desktop/src/renderer/migration-status.tsx
index 3f8ec4bef0b..6f49e686299 100644
--- a/packages/desktop/src/renderer/migration-status.tsx
+++ b/packages/desktop/src/renderer/migration-status.tsx
@@ -1,7 +1,7 @@
 import { OpenCode, type MigrationV1StatusOutput } from "@opencode-ai/client/promise"
 import { useLanguage } from "@opencode-ai/app"
-import { LoaderV2 } from "@opencode-ai/ui/v2/loader-v2"
-import { showToastV2, toasterV2, ToastV2 } from "@opencode-ai/ui/v2/toast-v2"
+import { Loader } from "@opencode-ai/ui/loader"
+import { showToast, toaster, Toast } from "@opencode-ai/ui/toast"
 import { createRoot, createSignal, onCleanup, onMount } from "solid-js"
 import type { ServerReadyData } from "../shared/ipc-contract"
 
@@ -15,7 +15,7 @@ export function MigrationStatus(props: { server: ServerReadyData }) {
   let disposeToast: (() => void) | undefined
 
   const hide = () => {
-    if (toastID !== undefined) toasterV2.dismiss(toastID)
+    if (toastID !== undefined) toaster.dismiss(toastID)
     toastID = undefined
     disposeToast?.()
     disposeToast = undefined
@@ -23,22 +23,22 @@ export function MigrationStatus(props: { server: ServerReadyData }) {
 
   const show = () => {
     if (toastID !== undefined) return
-    toastID = toasterV2.show(
+    toastID = toaster.show(
       ({ toastId }) =>
         createRoot((dispose) => {
           disposeToast?.()
           disposeToast = dispose
           return (
-            <ToastV2 toastId={toastId}>
+            <Toast toastId={toastId}>
               <div data-slot="toast-v2-header" class="col-span-full">
-                <ToastV2.Icon>
-                  <LoaderV2 />
-                </ToastV2.Icon>
-                <ToastV2.Content>
-                  <ToastV2.Title dir="auto">{format(progress())}</ToastV2.Title>
-                </ToastV2.Content>
+                <Toast.Icon>
+                  <Loader />
+                </Toast.Icon>
+                <Toast.Content>
+                  <Toast.Title dir="auto">{format(progress())}</Toast.Title>
+                </Toast.Content>
               </div>
-            </ToastV2>
+            </Toast>
           )
         }),
       { persistent: true },
@@ -69,7 +69,7 @@ export function MigrationStatus(props: { server: ServerReadyData }) {
     })().catch((error) => {
       if (abort.signal.aborted) return
       hide()
-      showToastV2({
+      showToast({
         variant: "error",
         title: language.t("toast.migration.failed.title"),
         description: error instanceof Error ? error.message : String(error),
diff --git a/packages/enterprise/src/app.css b/packages/enterprise/src/app.css
index 1d3a4abf855..ba08d986853 100644
--- a/packages/enterprise/src/app.css
+++ b/packages/enterprise/src/app.css
@@ -1,2 +1,3 @@
 @import "@opencode-ai/ui/styles/tailwind";
 @import "@opencode-ai/session-ui/styles";
+@import "@opencode-ai/ui/styles/tokens";
diff --git a/packages/enterprise/src/routes/share/[shareID].tsx b/packages/enterprise/src/routes/share/[shareID].tsx
index ba124b98b04..72521b5e594 100644
--- a/packages/enterprise/src/routes/share/[shareID].tsx
+++ b/packages/enterprise/src/routes/share/[shareID].tsx
@@ -10,6 +10,7 @@ import { createMemo, createSignal, ErrorBoundary, For, Match, Show, Switch } fro
 import { Share } from "~/core/share"
 import { Logo, Mark } from "@opencode-ai/ui/logo"
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { iife } from "@opencode-ai/core/util/iife"
 import { Binary } from "@opencode-ai/util/binary"
@@ -283,14 +284,14 @@ export default function () {
                                 as={"a"}
                                 href="https://github.com/anomalyco/opencode"
                                 target="_blank"
-                                icon="github"
+                                icon={<Icon name="github" />}
                                 variant="ghost"
                               />
                               <IconButton
                                 as={"a"}
                                 href="https://opencode.ai/discord"
                                 target="_blank"
-                                icon="discord"
+                                icon={<Icon name="discord" />}
                                 variant="ghost"
                               />
                             </div>
diff --git a/packages/session-ui/src/components/basic-tool.css b/packages/session-ui/src/components/basic-tool.css
index 6f54204d199..82f9e8999ee 100644
--- a/packages/session-ui/src/components/basic-tool.css
+++ b/packages/session-ui/src/components/basic-tool.css
@@ -279,7 +279,7 @@
       justify-content: center;
       flex-shrink: 0;
 
-      [data-component="icon"] {
+      [data-slot="icon-svg"] {
         color: var(--task-agent-color, var(--v2-icon-icon-base));
       }
     }
diff --git a/packages/session-ui/src/components/line-comment-styles.ts b/packages/session-ui/src/components/line-comment-styles.ts
index ce7df7879f4..214413fb677 100644
--- a/packages/session-ui/src/components/line-comment-styles.ts
+++ b/packages/session-ui/src/components/line-comment-styles.ts
@@ -36,7 +36,7 @@ export const lineCommentStyles = `
   border: none;
 }
 
-[data-component="line-comment"] [data-component="icon"] {
+[data-component="line-comment"] [data-slot="icon-svg"] {
   color: var(--white);
 }
 
diff --git a/packages/session-ui/src/components/line-comment.tsx b/packages/session-ui/src/components/line-comment.tsx
index 076b6fe8ca2..daabc238b6d 100644
--- a/packages/session-ui/src/components/line-comment.tsx
+++ b/packages/session-ui/src/components/line-comment.tsx
@@ -411,7 +411,7 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
             <Button size="small" variant="ghost" onClick={split.onCancel}>
               {split.cancelLabel ?? i18n.t("ui.common.cancel")}
             </Button>
-            <Button size="small" variant="primary" disabled={split.value.trim().length === 0} onClick={submit}>
+            <Button size="small" variant="contrast" disabled={split.value.trim().length === 0} onClick={submit}>
               {split.submitLabel ?? i18n.t("ui.lineComment.submit")}
             </Button>
           </Show>
diff --git a/packages/session-ui/src/components/markdown.tsx b/packages/session-ui/src/components/markdown.tsx
index 2e12fce1aeb..dd7850351cc 100644
--- a/packages/session-ui/src/components/markdown.tsx
+++ b/packages/session-ui/src/components/markdown.tsx
@@ -12,9 +12,9 @@ import {
   splitProps,
 } from "solid-js"
 import { isServer, render } from "solid-js/web"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { canReusePendingBlock, completedProjection } from "./markdown-projection"
 import type { Block, Projection } from "./markdown-stream"
 import {
@@ -133,20 +133,20 @@ function createCopyButton(labels: CopyLabels) {
 function MarkdownCopyButton(props: { labels: CopyLabels; copied: boolean }) {
   const label = () => (props.copied ? props.labels.copied : props.labels.copy)
   return (
-    <TooltipV2 placement="top" value={label()}>
-      <IconButtonV2
+    <Tooltip placement="top" value={label()}>
+      <IconButton
         type="button"
         size="normal"
         variant="ghost-muted"
         aria-label={label()}
         icon={
           <>
-            <IconV2 name="outline-copy" data-copy-icon />
-            <IconV2 name="check" data-check-icon />
+            <Icon name="outline-copy" data-copy-icon />
+            <Icon name="check" data-check-icon />
           </>
         }
       />
-    </TooltipV2>
+    </Tooltip>
   )
 }
 
diff --git a/packages/session-ui/src/components/message-nav.css b/packages/session-ui/src/components/message-nav.css
index a08ee69897b..d0ffbf84c7f 100644
--- a/packages/session-ui/src/components/message-nav.css
+++ b/packages/session-ui/src/components/message-nav.css
@@ -71,6 +71,13 @@
   border-radius: var(--radius-sm);
 }
 
+[data-slot="message-nav-diff-bars"] {
+  display: block;
+  width: 18px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
 [data-slot="message-nav-title-preview"] {
   font-size: 14px; /* text-14-regular */
   color: var(--text-base);
diff --git a/packages/session-ui/src/components/message-nav.tsx b/packages/session-ui/src/components/message-nav.tsx
index f971679c192..a4b1ae682d1 100644
--- a/packages/session-ui/src/components/message-nav.tsx
+++ b/packages/session-ui/src/components/message-nav.tsx
@@ -1,7 +1,6 @@
 import type { UserMessage } from "../presentation"
 import { HoverCard } from "@kobalte/core/hover-card"
-import { ComponentProps, For, Match, Show, createSignal, splitProps, Switch } from "solid-js"
-import { DiffChanges } from "@opencode-ai/ui/diff-changes"
+import { ComponentProps, For, Match, Show, createMemo, createSignal, splitProps, Switch } from "solid-js"
 import { useI18n } from "@opencode-ai/ui/context/i18n"
 
 export function MessageNav(
@@ -51,7 +50,7 @@ export function MessageNav(
                 </Match>
                 <Match when={local.size === "normal"}>
                   <button data-slot="message-nav-message-button" onClick={handleClick} onKeyDown={handleKeyPress}>
-                    <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
+                    <MessageDiffBars changes={message.summary?.diffs ?? []} />
                     <div
                       data-slot="message-nav-title-preview"
                       data-active={message.id === local.current?.id || undefined}
@@ -100,3 +99,47 @@ export function MessageNav(
     </Switch>
   )
 }
+
+function MessageDiffBars(props: { changes: { additions: number; deletions: number }[] }) {
+  const additions = createMemo(() => props.changes.reduce((total, diff) => total + diff.additions, 0))
+  const deletions = createMemo(() => props.changes.reduce((total, diff) => total + diff.deletions, 0))
+  const colors = createMemo(() => {
+    const added = additions()
+    const deleted = deletions()
+    if (added === 0 && deleted === 0) return Array(5).fill("var(--icon-weak-base)")
+
+    if (added + deleted < 5) {
+      return [
+        ...Array(added > 0 ? 1 : 0).fill("var(--icon-diff-add-base)"),
+        ...Array(deleted > 0 ? 1 : 0).fill("var(--icon-diff-delete-base)"),
+        ...Array(5 - (added > 0 ? 1 : 0) - (deleted > 0 ? 1 : 0)).fill("var(--icon-weak-base)"),
+      ]
+    }
+
+    const total = added + deleted
+    const ratio = added > deleted ? added / deleted : deleted / added
+    const colored = total < 20 || ratio < 4 ? 4 : 5
+    const addedRaw = (added / total) * colored
+    const deletedRaw = (deleted / total) * colored
+    const addedBars =
+      added === 0 ? 0 : Math.min(added <= 5 ? 1 : added <= 10 ? 2 : colored, Math.max(1, Math.round(addedRaw)))
+    const deletedBars =
+      deleted === 0 ? 0 : Math.min(deleted <= 5 ? 1 : deleted <= 10 ? 2 : colored, Math.max(1, Math.round(deletedRaw)))
+    const overflow = Math.max(0, addedBars + deletedBars - colored)
+    const adjustedAdded = overflow > 0 && addedRaw > deletedRaw ? addedBars - overflow : addedBars
+    const adjustedDeleted = overflow > 0 && addedRaw <= deletedRaw ? deletedBars - overflow : deletedBars
+    return [
+      ...Array(adjustedAdded).fill("var(--icon-diff-add-base)"),
+      ...Array(adjustedDeleted).fill("var(--icon-diff-delete-base)"),
+      ...Array(5 - adjustedAdded - adjustedDeleted).fill("var(--icon-weak-base)"),
+    ]
+  })
+
+  return (
+    <svg data-slot="message-nav-diff-bars" viewBox="0 0 18 14" aria-hidden="true">
+      <For each={colors().slice(0, 5)}>
+        {(color, index) => <rect x={index() * 4} width="2" height="14" rx="1" fill={color} />}
+      </For>
+    </svg>
+  )
+}
diff --git a/packages/session-ui/src/components/message-part.css b/packages/session-ui/src/components/message-part.css
index f98d614d0cd..5617f637e6c 100644
--- a/packages/session-ui/src/components/message-part.css
+++ b/packages/session-ui/src/components/message-part.css
@@ -94,7 +94,7 @@
     justify-content: center;
     color: var(--icon-weak);
 
-    [data-component="icon"] {
+    [data-slot="icon-svg"] {
       width: 20px;
       height: 20px;
     }
@@ -172,7 +172,7 @@
     transition: opacity 0.15s ease;
     will-change: opacity;
 
-    [data-component="tooltip-trigger"] {
+    [data-component="tooltip-v2-trigger"] {
       display: inline-flex;
       width: fit-content;
     }
@@ -240,7 +240,7 @@
     transition: opacity 0.15s ease;
     will-change: opacity;
 
-    [data-component="tooltip-trigger"] {
+    [data-component="tooltip-v2-trigger"] {
       display: inline-flex;
       width: fit-content;
     }
@@ -766,7 +766,7 @@
     justify-content: center;
   }
 
-  [data-slot="permission-icon"] [data-component="icon"] {
+  [data-slot="permission-icon"] [data-slot="icon-svg"] {
     color: var(--icon-warning-base);
   }
 
@@ -833,7 +833,7 @@
     align-items: center;
     gap: 8px;
 
-    [data-component="button"] {
+    [data-component="button-v2"] {
       padding-left: 12px;
       padding-right: 12px;
     }
@@ -1024,7 +1024,7 @@
       background-color 0.15s ease,
       border-color 0.15s ease;
 
-    [data-component="icon"] {
+    [data-slot="icon-svg"] {
       opacity: 0;
       color: var(--icon-base);
     }
@@ -1044,7 +1044,7 @@
     &[data-picked="true"] {
       border-color: var(--icon-interactive-base);
 
-      [data-component="icon"] {
+      [data-slot="icon-svg"] {
         opacity: 1;
         color: var(--icon-invert-base);
       }
@@ -1170,7 +1170,7 @@
       opacity: 0.6;
     }
 
-    [data-component="icon"] {
+    [data-slot="icon-svg"] {
       transform: rotate(180deg);
     }
   }
@@ -1331,7 +1331,7 @@
   line-height: var(--line-height-large);
   color: var(--v2-text-text-muted);
 
-  [data-component="icon"] {
+  [data-slot="icon-svg"] {
     flex-shrink: 0;
     color: var(--icon-weak);
   }
diff --git a/packages/session-ui/src/components/message-part.tsx b/packages/session-ui/src/components/message-part.tsx
index df468376241..18c85270dfe 100644
--- a/packages/session-ui/src/components/message-part.tsx
+++ b/packages/session-ui/src/components/message-part.tsx
@@ -39,7 +39,7 @@ import { Accordion } from "@opencode-ai/ui/accordion"
 import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
 import { Collapsible } from "@opencode-ai/ui/collapsible"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
-import { Icon } from "@opencode-ai/ui/icon"
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
 import { ToolErrorCard } from "./tool-error-card"
 import { Checkbox } from "@opencode-ai/ui/checkbox"
 import { DiffChanges } from "@opencode-ai/ui/diff-changes"
@@ -51,10 +51,7 @@ import { CommentCardV2 } from "../v2/components/comment-card-v2"
 import { checksum } from "@opencode-ai/util/encode"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Button } from "@opencode-ai/ui/button"
 import { TextShimmer } from "@opencode-ai/ui/text-shimmer"
 import { AnimatedCountList } from "./tool-count-summary"
 import { ToolStatusTitle } from "./tool-status-title"
@@ -213,34 +210,17 @@ function MessageActionButton(
 ) {
   const icon = () => (props.icon === "copy" ? "outline-copy" : props.icon)
   return (
-    <Show
-      when={props.useV2}
-      fallback={
-        <Tooltip value={props.label} placement="top" gutter={4}>
-          <IconButton
-            icon={props.icon}
-            size="normal"
-            variant="ghost"
-            disabled={props.disabled}
-            onMouseDown={props.onMouseDown}
-            onClick={props.onClick}
-            aria-label={props["aria-label"]}
-          />
-        </Tooltip>
-      }
-    >
-      <TooltipV2 value={props.label} placement="top" gutter={4}>
-        <IconButtonV2
-          icon={<IconV2 name={icon()} size="small" />}
-          size="normal"
-          variant="ghost-muted"
-          disabled={props.disabled}
-          onMouseDown={props.onMouseDown}
-          onClick={props.onClick}
-          aria-label={props["aria-label"]}
-        />
-      </TooltipV2>
-    </Show>
+    <Tooltip appearance={props.useV2 ? "compact" : "standard"} value={props.label} placement="top" gutter={4}>
+      <IconButton
+        icon={<Icon name={icon()} size="small" />}
+        size="normal"
+        variant="ghost-muted"
+        disabled={props.disabled}
+        onMouseDown={props.onMouseDown}
+        onClick={props.onClick}
+        aria-label={props["aria-label"]}
+      />
+    </Tooltip>
   )
 }
 
@@ -363,7 +343,6 @@ function displayDirectory(path: string | undefined) {
   return relativizeProjectPath(getDirectory(path), data.directory)
 }
 
-import type { IconProps } from "@opencode-ai/ui/icon"
 import { normalize, resolveFileDiff } from "./session-diff"
 
 export type ToolInfo = {
@@ -1191,9 +1170,9 @@ function UserMessageComments(props: { comments: UserMessageComment[]; bounded: b
         )}
       </For>
       <Show when={props.bounded && props.comments.length > 5 && !state.expanded}>
-        <ButtonV2 size="small" variant="ghost-muted" onClick={() => setState("expanded", true)}>
+        <Button size="small" variant="ghost-muted" onClick={() => setState("expanded", true)}>
           {i18n.t("ui.common.showMore")}
-        </ButtonV2>
+        </Button>
       </Show>
     </div>
   )
@@ -2144,16 +2123,16 @@ function ConsoleOutput(props: { copy: string; children: JSX.Element }) {
   return (
     <div data-component="bash-output" dir="ltr">
       <div data-slot="bash-copy">
-        <TooltipV2 value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copy")} placement="top">
-          <IconButtonV2
-            icon={<IconV2 name={copied() ? "check" : "outline-copy"} size="small" />}
+        <Tooltip value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copy")} placement="top">
+          <IconButton
+            icon={<Icon name={copied() ? "check" : "outline-copy"} size="small" />}
             size="normal"
             variant="ghost-muted"
             onMouseDown={(event) => event.preventDefault()}
             onClick={copy}
             aria-label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copy")}
           />
-        </TooltipV2>
+        </Tooltip>
       </div>
       <div
         data-slot="bash-scroll"
@@ -2350,7 +2329,7 @@ ToolRegistry.register({
               </div>
               <div data-slot="message-part-actions">
                 <Show when={!pending() && props.metadata.filediff}>
-                  <DiffChanges changes={props.metadata.filediff} />
+                  <DiffChanges appearance="standard" changes={props.metadata.filediff} />
                 </Show>
               </div>
             </div>
@@ -2361,7 +2340,7 @@ ToolRegistry.register({
               path={path()}
               actions={
                 <Show when={!pending() && props.metadata.filediff}>
-                  <DiffChanges changes={props.metadata.filediff!} />
+                  <DiffChanges appearance="standard" changes={props.metadata.filediff!} />
                 </Show>
               }
             >
@@ -2543,7 +2522,10 @@ ToolRegistry.register({
                                       </span>
                                     </Match>
                                     <Match when={true}>
-                                      <DiffChanges changes={{ additions: file.additions, deletions: file.deletions }} />
+                                      <DiffChanges
+                                        appearance="standard"
+                                        changes={{ additions: file.additions, deletions: file.deletions }}
+                                      />
                                     </Match>
                                   </Switch>
                                   <Icon name="chevron-grabber-vertical" size="small" />
@@ -2599,7 +2581,10 @@ ToolRegistry.register({
                 </div>
                 <div data-slot="message-part-actions">
                   <Show when={!pending()}>
-                    <DiffChanges changes={{ additions: single()!.additions, deletions: single()!.deletions }} />
+                    <DiffChanges
+                      appearance="standard"
+                      changes={{ additions: single()!.additions, deletions: single()!.deletions }}
+                    />
                   </Show>
                 </div>
               </div>
@@ -2625,7 +2610,10 @@ ToolRegistry.register({
                     </span>
                   </Match>
                   <Match when={true}>
-                    <DiffChanges changes={{ additions: single()!.additions, deletions: single()!.deletions }} />
+                    <DiffChanges
+                      appearance="standard"
+                      changes={{ additions: single()!.additions, deletions: single()!.deletions }}
+                    />
                   </Match>
                 </Switch>
               }
diff --git a/packages/session-ui/src/components/session-retry.tsx b/packages/session-ui/src/components/session-retry.tsx
index 1ce2128d62f..2c7c019bad7 100644
--- a/packages/session-ui/src/components/session-retry.tsx
+++ b/packages/session-ui/src/components/session-retry.tsx
@@ -58,7 +58,7 @@ export function SessionRetry(props: { status: SessionStatus; show?: boolean }) {
             <Spinner class="size-4 mt-0.5" />
             <div class="min-w-0">
               <Show when={truncated()} fallback={<div data-slot="session-turn-retry-message">{message()}</div>}>
-                <Tooltip value={retry()?.message ?? ""} placement="top">
+                <Tooltip appearance="standard" value={retry()?.message ?? ""} placement="top">
                   <div data-slot="session-turn-retry-message" class="cursor-help truncate">
                     {message()}
                   </div>
diff --git a/packages/session-ui/src/components/session-review.css b/packages/session-ui/src/components/session-review.css
index 4763591399e..34fb46de2d2 100644
--- a/packages/session-ui/src/components/session-review.css
+++ b/packages/session-ui/src/components/session-review.css
@@ -45,20 +45,6 @@
     column-gap: 12px;
   }
 
-  [data-slot="session-review-actions"] [data-component="radio-group"] {
-    [data-slot="radio-group-wrapper"],
-    [data-slot="radio-group-indicator"],
-    [data-slot="radio-group-item-control"] {
-      border-radius: 6px;
-    }
-
-    [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
-      + [data-slot="radio-group-item-label"]:hover
-      [data-slot="radio-group-item-control"] {
-      border-radius: 4px;
-    }
-  }
-
   [data-component="sticky-accordion-header"] {
     --sticky-accordion-top: 0px;
   }
@@ -237,3 +223,14 @@
     margin-top: 10px;
   }
 }
+
+[data-slot="segmented-control-v2"].session-review-diff-style {
+  width: fit-content;
+  height: 24px;
+
+  [data-slot="segmented-control-v2-item"] {
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+  }
+}
diff --git a/packages/session-ui/src/components/session-review.tsx b/packages/session-ui/src/components/session-review.tsx
index 207f34ea89b..e30a704cd2f 100644
--- a/packages/session-ui/src/components/session-review.tsx
+++ b/packages/session-ui/src/components/session-review.tsx
@@ -1,7 +1,7 @@
 import { Accordion } from "@opencode-ai/ui/accordion"
 import { Button } from "@opencode-ai/ui/button"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { RadioGroup } from "@opencode-ai/ui/radio-group"
+import { Menu } from "@opencode-ai/ui/menu"
+import { SegmentedControl, SegmentedControlItem } from "@opencode-ai/ui/segmented-control"
 import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -127,26 +127,22 @@ function ReviewCommentMenu(props: {
 }) {
   return (
     <div onMouseDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}>
-      <DropdownMenu gutter={4} placement="bottom-end">
-        <DropdownMenu.Trigger
+      <Menu appearance="standard" gutter={4} placement="bottom-end">
+        <Menu.Trigger
           as={IconButton}
-          icon="dot-grid"
+          icon={<Icon name="dot-grid" />}
           variant="ghost"
           size="small"
           class="size-6 rounded-md"
           aria-label={props.labels.moreLabel}
         />
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content>
-            <DropdownMenu.Item onSelect={props.onEdit}>
-              <DropdownMenu.ItemLabel>{props.labels.editLabel}</DropdownMenu.ItemLabel>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onSelect={props.onDelete}>
-              <DropdownMenu.ItemLabel>{props.labels.deleteLabel}</DropdownMenu.ItemLabel>
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu>
+        <Menu.Portal>
+          <Menu.Content>
+            <Menu.Item onSelect={props.onEdit}>{props.labels.editLabel}</Menu.Item>
+            <Menu.Item onSelect={props.onDelete}>{props.labels.deleteLabel}</Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
     </div>
   )
 }
@@ -345,16 +341,24 @@ export const SessionReview = (props: SessionReviewProps) => {
         </div>
         <div data-slot="session-review-actions">
           <Show when={hasDiffs() && props.onDiffStyleChange}>
-            <RadioGroup
-              options={["unified", "split"] as const}
-              current={diffStyle()}
-              size="small"
-              value={(style) => style}
-              label={(style) =>
-                i18n.t(style === "unified" ? "ui.sessionReview.diffStyle.unified" : "ui.sessionReview.diffStyle.split")
-              }
-              onSelect={(style) => style && props.onDiffStyleChange?.(style)}
-            />
+            <SegmentedControl
+              class="session-review-diff-style"
+              value={diffStyle()}
+              onChange={(style) => {
+                if (style !== "unified" && style !== "split") return
+                props.onDiffStyleChange?.(style)
+              }}
+            >
+              <For each={["unified", "split"] as const}>
+                {(style) => (
+                  <SegmentedControlItem value={style}>
+                    {i18n.t(
+                      style === "unified" ? "ui.sessionReview.diffStyle.unified" : "ui.sessionReview.diffStyle.split",
+                    )}
+                  </SegmentedControlItem>
+                )}
+              </For>
+            </SegmentedControl>
           </Show>
           <Show when={hasDiffs()}>
             <Button
@@ -521,7 +525,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                                   </Show>
                                   <span data-slot="session-review-filename">{getFilename(file)}</span>
                                   <Show when={props.onViewFile && diffCanRender()}>
-                                    <Tooltip value={openFileLabel()} placement="top" gutter={4}>
+                                    <Tooltip appearance="standard" value={openFileLabel()} placement="top" gutter={4}>
                                       <button
                                         data-slot="session-review-view-button"
                                         type="button"
@@ -544,7 +548,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                                       <span data-slot="session-review-change" data-type="added">
                                         {i18n.t("ui.sessionReview.change.added")}
                                       </span>
-                                      <DiffChanges changes={diff()} />
+                                      <DiffChanges appearance="standard" changes={diff()} />
                                     </div>
                                   </Match>
                                   <Match when={isDeleted()}>
@@ -558,7 +562,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                                     </span>
                                   </Match>
                                   <Match when={true}>
-                                    <DiffChanges changes={diff()} />
+                                    <DiffChanges appearance="standard" changes={diff()} />
                                   </Match>
                                 </Switch>
                                 <Show when={diffCanRender()}>
@@ -602,7 +606,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                                     <div data-slot="session-review-large-diff-actions">
                                       <Button
                                         size="normal"
-                                        variant="secondary"
+                                        variant="neutral"
                                         onClick={() => setStore("force", file, true)}
                                       >
                                         {i18n.t("ui.sessionReview.largeDiff.renderAnyway")}
diff --git a/packages/session-ui/src/components/session-turn.tsx b/packages/session-ui/src/components/session-turn.tsx
index 89ffefa9e46..82f83dc7e63 100644
--- a/packages/session-ui/src/components/session-turn.tsx
+++ b/packages/session-ui/src/components/session-turn.tsx
@@ -437,7 +437,7 @@ export function SessionTurn(
                     <span data-slot="session-turn-diffs-label">
                       {i18n.plural("ui.sessionTurn.diffs.changed", edited())}
                     </span>
-                    <DiffChanges changes={diffs()} />
+                    <DiffChanges appearance="standard" changes={diffs()} />
                     <Show when={overflow() > 0}>
                       <span data-slot="session-turn-diffs-toggle" onClick={toggleAll}>
                         {showAll() ? i18n.t("ui.sessionTurn.diffs.showLess") : i18n.t("ui.sessionTurn.diffs.showAll")}
@@ -490,7 +490,7 @@ export function SessionTurn(
                                     </span>
                                     <div data-slot="session-turn-diff-meta">
                                       <span data-slot="session-turn-diff-changes">
-                                        <DiffChanges changes={diff} />
+                                        <DiffChanges appearance="standard" changes={diff} />
                                       </span>
                                       <span data-slot="session-turn-diff-chevron">
                                         <Icon name="chevron-down" size="small" />
diff --git a/packages/session-ui/src/components/tool-error-card.css b/packages/session-ui/src/components/tool-error-card.css
index 2d83f8d53fb..fbc7a7f4eae 100644
--- a/packages/session-ui/src/components/tool-error-card.css
+++ b/packages/session-ui/src/components/tool-error-card.css
@@ -23,7 +23,7 @@
     gap: 4px;
   }
 
-  [data-component="tool-error-card-icon"] [data-component="icon"] {
+  [data-component="tool-error-card-icon"] [data-slot="icon-svg"] {
     color: var(--card-accent);
   }
 
diff --git a/packages/session-ui/src/components/tool-error-card.tsx b/packages/session-ui/src/components/tool-error-card.tsx
index e03b65141c4..105af934339 100644
--- a/packages/session-ui/src/components/tool-error-card.tsx
+++ b/packages/session-ui/src/components/tool-error-card.tsx
@@ -136,12 +136,13 @@ export function ToolErrorCard(props: ToolErrorCardProps) {
             <Show when={open()}>
               <div data-slot="tool-error-card-copy">
                 <Tooltip
+                  appearance="standard"
                   value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.toolErrorCard.copyError")}
                   placement="top"
                   gutter={4}
                 >
                   <IconButton
-                    icon={copied() ? "check" : "copy"}
+                    icon={<Icon name={copied() ? "check" : "copy"} />}
                     size="normal"
                     variant="ghost"
                     onMouseDown={(e) => e.preventDefault()}
diff --git a/packages/session-ui/src/v2/components/basic-tool-v2.tsx b/packages/session-ui/src/v2/components/basic-tool-v2.tsx
index 70bb87cce71..ee8a3e7ab7d 100644
--- a/packages/session-ui/src/v2/components/basic-tool-v2.tsx
+++ b/packages/session-ui/src/v2/components/basic-tool-v2.tsx
@@ -1,7 +1,7 @@
 import { Collapsible } from "@kobalte/core/collapsible"
 import { type ComponentProps, type JSX, For, Show, createMemo, splitProps } from "solid-js"
-import { DiffChanges } from "@opencode-ai/ui/v2/diff-changes-v2"
-import { TextShimmerV2 } from "@opencode-ai/ui/v2/text-shimmer-v2"
+import { DiffChanges } from "@opencode-ai/ui/diff-changes"
+import { TextShimmer } from "@opencode-ai/ui/text-shimmer"
 import "./basic-tool-v2.css"
 
 function ChevronIcon() {
@@ -91,7 +91,7 @@ export function BasicToolV2(props: BasicToolV2Props) {
             {(title) => (
               <>
                 <span data-slot="basic-tool-v2-title">
-                  <TextShimmerV2 text={title().title} active={pending()} />
+                  <TextShimmer text={title().title} active={pending()} />
                 </span>
                 <Show when={!pending() && title().subtitle}>
                   <span data-slot="basic-tool-v2-sep" aria-hidden="true">
diff --git a/packages/session-ui/src/v2/components/comment-card-v2.tsx b/packages/session-ui/src/v2/components/comment-card-v2.tsx
index 02f4d1cb589..5168458c913 100644
--- a/packages/session-ui/src/v2/components/comment-card-v2.tsx
+++ b/packages/session-ui/src/v2/components/comment-card-v2.tsx
@@ -1,7 +1,7 @@
 import { createSignal, onCleanup, onMount, Show } from "solid-js"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { getFilenameTruncated } from "@opencode-ai/util/path"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { AttachmentCardV2 } from "./attachment-card-v2"
 
 export function CommentCardV2(props: {
@@ -30,7 +30,7 @@ export function CommentCardV2(props: {
   })
 
   return (
-    <TooltipV2
+    <Tooltip
       placement="top"
       openDelay={1000}
       value={props.title ?? props.comment}
@@ -59,6 +59,6 @@ export function CommentCardV2(props: {
           </Show>
         </span>
       </AttachmentCardV2>
-    </TooltipV2>
+    </Tooltip>
   )
 }
diff --git a/packages/session-ui/src/v2/components/line-comment-annotations-v2.tsx b/packages/session-ui/src/v2/components/line-comment-annotations-v2.tsx
index c08deab1593..72a69886ba3 100644
--- a/packages/session-ui/src/v2/components/line-comment-annotations-v2.tsx
+++ b/packages/session-ui/src/v2/components/line-comment-annotations-v2.tsx
@@ -10,8 +10,7 @@ import {
 } from "../../components/line-comment-annotations"
 import { useI18n } from "@opencode-ai/ui/context/i18n"
 import { cloneSelectedLineRange, formatSelectedLineLabel } from "../../pierre/selection-bridge"
-import { LineCommentEditorV2, LineCommentV2 } from "@opencode-ai/ui/v2/line-comment-v2"
-import type { LineCommentEditorV2Mention } from "@opencode-ai/ui/v2/line-comment-v2"
+import { LineCommentEditor, LineComment, type LineCommentEditorMention } from "@opencode-ai/ui/line-comment"
 
 type LineCommentControllerV2Props<T extends LineCommentShape> = {
   comments: Accessor<T[]>
@@ -24,7 +23,7 @@ type LineCommentControllerV2Props<T extends LineCommentShape> = {
   onDelete?: (comment: T) => void
   renderCommentActions?: (comment: T, controls: { edit: VoidFunction; remove: VoidFunction }) => JSX.Element
   editSubmitLabel?: string
-  mention?: LineCommentEditorV2Mention
+  mention?: LineCommentEditorMention
 }
 
 type CommentProps = {
@@ -45,7 +44,7 @@ type DraftProps = {
   onSubmit: (value: string) => void
   cancelLabel?: string
   submitLabel?: string
-  mention?: LineCommentEditorV2Mention
+  mention?: LineCommentEditorMention
 }
 
 function lineCommentElementV2(view: Accessor<CommentProps>) {
@@ -60,12 +59,12 @@ function lineCommentElementV2(view: Accessor<CommentProps>) {
           onClick={view().onClick}
           onMouseEnter={view().onMouseEnter}
         >
-          <LineCommentV2 comment={view().comment} selection={view().selection} actions={view().actions} />
+          <LineComment comment={view().comment} selection={view().selection} actions={view().actions} />
         </div>
       }
     >
       <div data-prevent-autofocus="" data-comment-id={view().id} onMouseDown={(event) => event.stopPropagation()}>
-        <LineCommentEditorV2
+        <LineCommentEditor
           value={view().editor!.value}
           selection={view().editor!.selection}
           onInput={view().editor!.onInput}
@@ -83,7 +82,7 @@ function lineCommentElementV2(view: Accessor<CommentProps>) {
 function lineCommentDraftElementV2(view: Accessor<DraftProps>) {
   return (
     <div data-prevent-autofocus="" onMouseDown={(event) => event.stopPropagation()}>
-      <LineCommentEditorV2
+      <LineCommentEditor
         value={view().value}
         selection={view().selection}
         onInput={view().onInput}
diff --git a/packages/session-ui/src/v2/components/prompt-input/index.tsx b/packages/session-ui/src/v2/components/prompt-input/index.tsx
index 15c5ca9d75a..887b44c05bb 100644
--- a/packages/session-ui/src/v2/components/prompt-input/index.tsx
+++ b/packages/session-ui/src/v2/components/prompt-input/index.tsx
@@ -4,12 +4,10 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { useI18n } from "@opencode-ai/ui/context/i18n"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { AttachmentCardV2 } from "../attachment-card-v2"
 import { CommentCardV2 } from "../comment-card-v2"
 import { typeLabel } from "../../../components/message-file"
@@ -403,7 +401,7 @@ export function PromptInputV2Attachments(props: {
           <For each={props.comments ?? []}>
             {(comment) => (
               <div class="relative group shrink-0">
-                <TooltipV2
+                <Tooltip
                   value={comment.comment}
                   placement="top"
                   openDelay={800}
@@ -416,14 +414,14 @@ export function PromptInputV2Attachments(props: {
                     active={comment.key === props.activeCommentID}
                     onClick={() => props.onCommentClick?.(comment)}
                   />
-                </TooltipV2>
+                </Tooltip>
                 <button
                   type="button"
                   onClick={() => props.onCommentRemove?.(comment)}
                   class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                   aria-label={props.removeLabel}
                 >
-                  <IconV2 name="outline-xmark" class="text-v2-icon-icon-contrast" />
+                  <Icon name="outline-xmark" class="text-v2-icon-icon-contrast" />
                 </button>
               </div>
             )}
@@ -431,7 +429,7 @@ export function PromptInputV2Attachments(props: {
           <For each={props.attachments}>
             {(attachment) => (
               <div class="relative group shrink-0">
-                <TooltipV2 value={attachment.filename} placement="top" contentClass="break-all">
+                <Tooltip value={attachment.filename} placement="top" contentClass="break-all">
                   <Show
                     when={attachment.mime.startsWith("image/")}
                     fallback={
@@ -448,14 +446,14 @@ export function PromptInputV2Attachments(props: {
                     />
                     <div class="absolute inset-0 rounded-[6px] shadow-[inset_0_0_0_0.5px_var(--v2-border-border-base)] pointer-events-none" />
                   </Show>
-                </TooltipV2>
+                </Tooltip>
                 <button
                   type="button"
                   onClick={() => props.onAttachmentRemove(attachment)}
                   class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                   aria-label={props.removeLabel}
                 >
-                  <IconV2 name="outline-xmark" class="text-v2-icon-icon-contrast" />
+                  <Icon name="outline-xmark" class="text-v2-icon-icon-contrast" />
                 </button>
               </div>
             )}
@@ -489,45 +487,45 @@ export function PromptInputV2AddMenu(props: {
   onShell: () => void
 }) {
   return (
-    <TooltipV2
+    <Tooltip
       placement="top"
       value={
         <>
           {props.title}
-          <KeybindV2 keys={props.keybind ?? []} variant="neutral" />
+          <Keybind keys={props.keybind ?? []} variant="neutral" />
         </>
       }
     >
-      <MenuV2 gutter={6} modal={false} placement="top-start">
-        <MenuV2.Trigger
-          as={IconButtonV2}
+      <Menu gutter={6} modal={false} placement="top-start">
+        <Menu.Trigger
+          as={IconButton}
           data-action="prompt-attach"
           type="button"
-          icon={<IconV2 name="plus" />}
+          icon={<Icon name="plus" />}
           variant="ghost-muted"
           size="large"
           disabled={props.disabled}
           aria-label={props.title}
         />
-        <MenuV2.Portal>
-          <MenuV2.Content style={{ "min-width": "180px" }}>
-            <MenuV2.Item onSelect={props.onAttach} shortcut={props.attachShortcut}>
+        <Menu.Portal>
+          <Menu.Content style={{ "min-width": "180px" }}>
+            <Menu.Item onSelect={props.onAttach} shortcut={props.attachShortcut}>
               {props.attachLabel}
-            </MenuV2.Item>
-            <MenuV2.Separator />
-            <MenuV2.Item onSelect={props.onCommands} shortcut="/">
+            </Menu.Item>
+            <Menu.Separator />
+            <Menu.Item onSelect={props.onCommands} shortcut="/">
               {props.commandsLabel}
-            </MenuV2.Item>
-            <MenuV2.Item onSelect={props.onContext} shortcut="@">
+            </Menu.Item>
+            <Menu.Item onSelect={props.onContext} shortcut="@">
               {props.contextLabel}
-            </MenuV2.Item>
-            <MenuV2.Item onSelect={props.onShell} shortcut="!">
+            </Menu.Item>
+            <Menu.Item onSelect={props.onShell} shortcut="!">
               {props.shellLabel}
-            </MenuV2.Item>
-          </MenuV2.Content>
-        </MenuV2.Portal>
-      </MenuV2>
-    </TooltipV2>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </Tooltip>
   )
 }
 
@@ -566,18 +564,18 @@ export function PromptInputV2Select(props: {
   onSelect: (id: string) => void
 }) {
   return (
-    <TooltipV2
+    <Tooltip
       placement="top"
       value={
         <>
           {props.title}
-          <KeybindV2 keys={props.keybind ?? []} variant="neutral" />
+          <Keybind keys={props.keybind ?? []} variant="neutral" />
         </>
       }
     >
-      <MenuV2 gutter={6} modal={false} placement="top-start" onOpenChange={props.onOpenChange}>
-        <MenuV2.Trigger
-          as={ButtonV2}
+      <Menu gutter={6} modal={false} placement="top-start" onOpenChange={props.onOpenChange}>
+        <Menu.Trigger
+          as={Button}
           variant="ghost-muted"
           size="normal"
           class={`max-w-[220px] justify-start ![font-weight:440] ${props.class ?? ""}`}
@@ -588,24 +586,24 @@ export function PromptInputV2Select(props: {
             {props.options.find((option) => option.id === props.current)?.label ?? props.current}
           </span>
           <span class="-ms-0.5 -me-1 flex shrink-0">
-            <IconV2 name="chevron-down" />
+            <Icon name="chevron-down" />
           </span>
-        </MenuV2.Trigger>
-        <MenuV2.Portal>
-          <MenuV2.Content>
-            <MenuV2.RadioGroup value={props.current} onChange={props.onSelect}>
+        </Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Content>
+            <Menu.RadioGroup value={props.current} onChange={props.onSelect}>
               <For each={props.options}>
                 {(option) => (
-                  <MenuV2.RadioItem value={option.id} class="capitalize" closeOnSelect>
+                  <Menu.RadioItem value={option.id} class="capitalize" closeOnSelect>
                     {option.label}
-                  </MenuV2.RadioItem>
+                  </Menu.RadioItem>
                 )}
               </For>
-            </MenuV2.RadioGroup>
-          </MenuV2.Content>
-        </MenuV2.Portal>
-      </MenuV2>
-    </TooltipV2>
+            </Menu.RadioGroup>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </Tooltip>
   )
 }
 
@@ -687,7 +685,7 @@ export function PromptInputV2SubmitButton(props: {
   onStop: () => void
 }) {
   return (
-    <TooltipV2
+    <Tooltip
       placement="top"
       inactive={!props.stopping && props.disabled}
       value={props.stopping ? props.stopLabel : props.sendLabel}
@@ -697,8 +695,8 @@ export function PromptInputV2SubmitButton(props: {
         type="button"
         disabled={!props.stopping && props.disabled}
         tabIndex={props.mode === "normal" ? undefined : -1}
-        icon={props.stopping ? "stop" : props.mode === "shell" ? "arrow-undo-down" : "arrow-up"}
-        variant="primary"
+        icon={<Icon name={props.stopping ? "stop" : props.mode === "shell" ? "arrow-undo-down" : "arrow-up"} />}
+        variant="contrast"
         class="size-7 rounded-md p-[6px] shadow-[var(--v2-elevation-button-contrast)] disabled:opacity-50"
         classList={{
           "text-v2-text-text-contrast": !!props.accent && !props.stopping && !props.disabled,
@@ -721,7 +719,7 @@ export function PromptInputV2SubmitButton(props: {
           props.onSubmit()
         }}
       />
-    </TooltipV2>
+    </Tooltip>
   )
 }
 
diff --git a/packages/session-ui/src/v2/components/session-review-empty-changes-v2.tsx b/packages/session-ui/src/v2/components/session-review-empty-changes-v2.tsx
index 35ce3692d88..368ed3338f1 100644
--- a/packages/session-ui/src/v2/components/session-review-empty-changes-v2.tsx
+++ b/packages/session-ui/src/v2/components/session-review-empty-changes-v2.tsx
@@ -1,5 +1,5 @@
 import { useI18n } from "@opencode-ai/ui/context/i18n"
-import { Icon } from "@opencode-ai/ui/v2/icon"
+import { Icon } from "@opencode-ai/ui/icon"
 import "./session-review-v2.css"
 
 export function SessionReviewEmptyChangesV2() {
diff --git a/packages/session-ui/src/v2/components/session-review-empty-no-git-v2.tsx b/packages/session-ui/src/v2/components/session-review-empty-no-git-v2.tsx
index 542855c5f18..f96a9b6b120 100644
--- a/packages/session-ui/src/v2/components/session-review-empty-no-git-v2.tsx
+++ b/packages/session-ui/src/v2/components/session-review-empty-no-git-v2.tsx
@@ -1,6 +1,6 @@
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { useI18n } from "@opencode-ai/ui/context/i18n"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Button } from "@opencode-ai/ui/button"
 import "./session-review-v2.css"
 
 export type SessionReviewEmptyNoGitV2Props = {
@@ -18,11 +18,11 @@ export function SessionReviewEmptyNoGitV2(props: SessionReviewEmptyNoGitV2Props)
       <div data-slot="session-review-v2-empty-no-git-description">
         {i18n.t("ui.sessionReviewV2.empty.noGit.description")}
       </div>
-      <ButtonV2 variant="neutral" size="normal" disabled={props.pending} onClick={props.onInitGit}>
+      <Button variant="neutral" size="normal" disabled={props.pending} onClick={props.onInitGit}>
         {props.pending
           ? i18n.t("ui.sessionReviewV2.empty.noGit.actionLoading")
           : i18n.t("ui.sessionReviewV2.empty.noGit.action")}
-      </ButtonV2>
+      </Button>
     </div>
   )
 }
diff --git a/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx b/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx
index 9998a177bcd..48d6b1be8f0 100644
--- a/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx
+++ b/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx
@@ -1,6 +1,6 @@
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import type { SelectedLineRange } from "@pierre/diffs"
-import { DiffChanges } from "@opencode-ai/ui/v2/diff-changes-v2"
+import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { useFileComponent } from "@opencode-ai/ui/context/file"
 import { useI18n } from "@opencode-ai/ui/context/i18n"
@@ -24,8 +24,8 @@ import type {
 import type { SessionReviewExpandMode } from "./session-review-v2"
 import { createLineCommentControllerV2 } from "./line-comment-annotations-v2"
 import { shouldVirtualizeReviewDiff } from "./session-review-file-preview-v2-virtualize"
-import { LineCommentV2OverflowIcon } from "@opencode-ai/ui/v2/line-comment-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { LineCommentOverflowIcon } from "@opencode-ai/ui/line-comment"
+import { Menu } from "@opencode-ai/ui/menu"
 import "./session-review-v2.css"
 
 type ReviewDiff = (PresentationFileDiff & { file: string }) | FileDiffInfo
@@ -68,29 +68,29 @@ function selectionPreview(diff: ViewDiff, range: SelectedLineRange) {
   return previewSelectedLines(contents, range)
 }
 
-function ReviewCommentMenuV2(props: {
+function ReviewCommentMenu(props: {
   labels: SessionReviewCommentActions
   onEdit: VoidFunction
   onDelete: VoidFunction
 }) {
   return (
     <div onMouseDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}>
-      <MenuV2 gutter={4}>
-        <MenuV2.Trigger
+      <Menu gutter={4}>
+        <Menu.Trigger
           as="button"
           type="button"
           data-slot="line-comment-v2-overflow"
           aria-label={props.labels.moreLabel}
         >
-          <LineCommentV2OverflowIcon />
-        </MenuV2.Trigger>
-        <MenuV2.Portal>
-          <MenuV2.Content>
-            <MenuV2.Item onSelect={props.onEdit}>{props.labels.editLabel}</MenuV2.Item>
-            <MenuV2.Item onSelect={props.onDelete}>{props.labels.deleteLabel}</MenuV2.Item>
-          </MenuV2.Content>
-        </MenuV2.Portal>
-      </MenuV2>
+          <LineCommentOverflowIcon />
+        </Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Content>
+            <Menu.Item onSelect={props.onEdit}>{props.labels.editLabel}</Menu.Item>
+            <Menu.Item onSelect={props.onDelete}>{props.labels.deleteLabel}</Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
     </div>
   )
 }
@@ -156,7 +156,7 @@ export function SessionReviewFilePreviewV2(props: SessionReviewFilePreviewV2Prop
     editSubmitLabel: props.lineCommentActions?.saveLabel,
     renderCommentActions: props.lineCommentActions
       ? (comment, controls) => (
-          <ReviewCommentMenuV2 labels={props.lineCommentActions!} onEdit={controls.edit} onDelete={controls.remove} />
+          <ReviewCommentMenu labels={props.lineCommentActions!} onEdit={controls.edit} onDelete={controls.remove} />
         )
       : undefined,
   })
diff --git a/packages/session-ui/src/v2/components/session-review-v2.tsx b/packages/session-ui/src/v2/components/session-review-v2.tsx
index cb0a6bd8cb1..cc90adff61f 100644
--- a/packages/session-ui/src/v2/components/session-review-v2.tsx
+++ b/packages/session-ui/src/v2/components/session-review-v2.tsx
@@ -1,11 +1,10 @@
-import { IconButton } from "@opencode-ai/ui/icon-button"
 import { useI18n } from "@opencode-ai/ui/context/i18n"
-import { SegmentedControlItemV2, SegmentedControlV2 } from "@opencode-ai/ui/v2/segmented-control-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
-import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
-import { Icon } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { SegmentedControlItem, SegmentedControl } from "@opencode-ai/ui/segmented-control"
+import { TextInput } from "@opencode-ai/ui/text-input"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import type { SessionReviewDiffStyle } from "../../components/session-review"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
@@ -87,7 +86,7 @@ export function SessionReviewV2Sidebar(props: SessionReviewV2SidebarProps) {
             {props.stats}
           </div>
           <div data-slot="session-review-v2-sidebar-filter">
-            <TextInputV2
+            <TextInput
               type="search"
               value={props.filter}
               onInput={(event) => props.onFilterChange(event.currentTarget.value)}
@@ -219,18 +218,18 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
         </div>
       </Show>
       <div class="flex items-center">
-        <TooltipV2
+        <Tooltip
           openDelay={2000}
           inactive={!prev()}
           value={
             <>
               {i18n.t("ui.sessionReviewV2.previousFile")}
-              <KeybindV2 keys={[locale.direction() === "rtl" ? "→" : "←"]} variant="neutral" />
+              <Keybind keys={[locale.direction() === "rtl" ? "→" : "←"]} variant="neutral" />
             </>
           }
         >
           <IconButton
-            icon="arrow-left"
+            icon={<Icon name="arrow-left" />}
             variant="ghost"
             size="small"
             class="session-review-v2-file-nav-button"
@@ -238,19 +237,19 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
             onClick={() => cycle(prev())}
             aria-label={i18n.t("ui.sessionReviewV2.previousFile")}
           />
-        </TooltipV2>
-        <TooltipV2
+        </Tooltip>
+        <Tooltip
           openDelay={2000}
           inactive={!next()}
           value={
             <>
               {i18n.t("ui.sessionReviewV2.nextFile")}
-              <KeybindV2 keys={[locale.direction() === "rtl" ? "←" : "→"]} variant="neutral" />
+              <Keybind keys={[locale.direction() === "rtl" ? "←" : "→"]} variant="neutral" />
             </>
           }
         >
           <IconButton
-            icon="arrow-right"
+            icon={<Icon name="arrow-right" />}
             variant="ghost"
             size="small"
             class="session-review-v2-file-nav-button"
@@ -258,14 +257,14 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
             onClick={() => cycle(next())}
             aria-label={i18n.t("ui.sessionReviewV2.nextFile")}
           />
-        </TooltipV2>
+        </Tooltip>
       </div>
     </>
   )
 
   const toolbarEnd = () => (
     <>
-      <SegmentedControlV2
+      <SegmentedControl
         value={props.expandMode}
         onChange={(value) => {
           if (value !== "expand" && value !== "collapse") return
@@ -274,19 +273,19 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
         class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
         aria-label={i18n.t("ui.sessionReviewV2.expandMode")}
       >
-        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.showAllLines")}>
-          <SegmentedControlItemV2 value="expand" aria-label={i18n.t("ui.sessionReviewV2.showAllLines")}>
+        <Tooltip openDelay={2000} value={i18n.t("ui.sessionReviewV2.showAllLines")}>
+          <SegmentedControlItem value="expand" aria-label={i18n.t("ui.sessionReviewV2.showAllLines")}>
             <Icon name="expand" />
-          </SegmentedControlItemV2>
-        </TooltipV2>
-        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
-          <SegmentedControlItemV2 value="collapse" aria-label={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+          </SegmentedControlItem>
+        </Tooltip>
+        <Tooltip openDelay={2000} value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+          <SegmentedControlItem value="collapse" aria-label={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
             <Icon name="collapse" />
-          </SegmentedControlItemV2>
-        </TooltipV2>
-      </SegmentedControlV2>
+          </SegmentedControlItem>
+        </Tooltip>
+      </SegmentedControl>
       <Show when={props.onDiffStyleChange}>
-        <SegmentedControlV2
+        <SegmentedControl
           value={props.diffStyle}
           onChange={(value) => {
             if (value !== "unified" && value !== "split") return
@@ -295,17 +294,17 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
           class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
           aria-label={i18n.t("ui.sessionReviewV2.diffView")}
         >
-          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
-            <SegmentedControlItemV2 value="unified" aria-label={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+          <Tooltip openDelay={2000} value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+            <SegmentedControlItem value="unified" aria-label={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
               <Icon name="unified" />
-            </SegmentedControlItemV2>
-          </TooltipV2>
-          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.splitDiff")}>
-            <SegmentedControlItemV2 value="split" aria-label={i18n.t("ui.sessionReviewV2.splitDiff")}>
+            </SegmentedControlItem>
+          </Tooltip>
+          <Tooltip openDelay={2000} value={i18n.t("ui.sessionReviewV2.splitDiff")}>
+            <SegmentedControlItem value="split" aria-label={i18n.t("ui.sessionReviewV2.splitDiff")}>
               <Icon name="split" />
-            </SegmentedControlItemV2>
-          </TooltipV2>
-        </SegmentedControlV2>
+            </SegmentedControlItem>
+          </Tooltip>
+        </SegmentedControl>
       </Show>
     </>
   )
@@ -330,8 +329,8 @@ export function SessionReviewV2SidebarToggle(props: { opened: boolean; disabled?
   const i18n = useI18n()
 
   return (
-    <TooltipV2 value={i18n.t("ui.sessionReviewV2.toggleSidebar")}>
-      <IconButtonV2
+    <Tooltip value={i18n.t("ui.sessionReviewV2.toggleSidebar")}>
+      <IconButton
         variant="ghost"
         size="small"
         class="session-review-v2-sidebar-toggle"
@@ -342,6 +341,6 @@ export function SessionReviewV2SidebarToggle(props: { opened: boolean; disabled?
         onClick={props.onToggle}
         icon={<Icon name="filetree" />}
       />
-    </TooltipV2>
+    </Tooltip>
   )
 }
diff --git a/packages/session-ui/src/v2/components/tool-error-card-v2.stories.tsx b/packages/session-ui/src/v2/components/tool-error-card-v2.stories.tsx
index 1642e53a810..bef59685d2c 100644
--- a/packages/session-ui/src/v2/components/tool-error-card-v2.stories.tsx
+++ b/packages/session-ui/src/v2/components/tool-error-card-v2.stories.tsx
@@ -1,5 +1,5 @@
 import { createSignal } from "solid-js"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Button } from "@opencode-ai/ui/button"
 import { ToolErrorCardV2, type ToolErrorCardV2Props } from "./tool-error-card-v2"
 
 const docs = `### Overview
@@ -75,9 +75,9 @@ export const Controlled = {
     const [open, setOpen] = createSignal(false)
     return (
       <div style={{ display: "flex", "flex-direction": "column", gap: "24px", "max-width": "420px" }}>
-        <ButtonV2 type="button" classList={{ "w-fit": true }} onClick={() => setOpen((o) => !o)}>
+        <Button type="button" classList={{ "w-fit": true }} onClick={() => setOpen((o) => !o)}>
           Toggle from outside: {open() ? "Open" : "Closed"}
-        </ButtonV2>
+        </Button>
         <ToolErrorCardV2
           title="Grep"
           subtitle="Timeout"
diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
index 8cfa936c10c..7d31971101a 100644
--- a/packages/storybook/.storybook/preview.tsx
+++ b/packages/storybook/.storybook/preview.tsx
@@ -1,6 +1,6 @@
 import "@opencode-ai/ui/styles/tailwind"
 import "@opencode-ai/session-ui/styles"
-import "@opencode-ai/ui/v2/styles/tailwind.css"
+import "@opencode-ai/ui/styles/tokens"
 
 import { createEffect, onCleanup, onMount } from "solid-js"
 import addonA11y from "@storybook/addon-a11y"
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4707337d193..773b63fd7ad 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -34,6 +34,40 @@
   ],
   "exports": {
     "./package.json": "./package.json",
+    "./accordion": "./src/data-display/accordion/accordion.tsx",
+    "./avatar": "./src/data-display/avatar/avatar.tsx",
+    "./badge": "./src/data-display/badge/badge.tsx",
+    "./button": "./src/actions/button/button.tsx",
+    "./button.css": "./src/actions/button/button.css",
+    "./checkbox": "./src/forms/checkbox/checkbox.tsx",
+    "./dialog": "./src/overlays/dialog/dialog.tsx",
+    "./diff-changes": "./src/data-display/diff-changes/diff-changes.tsx",
+    "./divider": "./src/layout/divider/divider.tsx",
+    "./field": "./src/forms/field/field.tsx",
+    "./file-tree.css": "./src/styles/file-tree.css",
+    "./icon": "./src/icons/icon/icon.tsx",
+    "./icon-button": "./src/actions/icon-button/icon-button.tsx",
+    "./inline-input": "./src/forms/inline-input/inline-input.tsx",
+    "./keybind": "./src/data-display/keybind/keybind.tsx",
+    "./line-comment": "./src/data-display/line-comment/line-comment.tsx",
+    "./loader": "./src/feedback/loader/loader.tsx",
+    "./menu": "./src/navigation/menu/menu.tsx",
+    "./progress-circle": "./src/feedback/progress-circle/progress-circle.tsx",
+    "./project-avatar": "./src/data-display/project-avatar/project-avatar.tsx",
+    "./radio": "./src/forms/radio/radio.tsx",
+    "./segmented-control": "./src/navigation/segmented-control/segmented-control.tsx",
+    "./select": "./src/forms/select/select.tsx",
+    "./split-button": "./src/actions/split-button/split-button.tsx",
+    "./switch": "./src/forms/switch/switch.tsx",
+    "./tab-state-indicator": "./src/navigation/tab-state-indicator.tsx",
+    "./tabs": "./src/navigation/tabs/tabs.tsx",
+    "./text-input": "./src/forms/text-input/text-input.tsx",
+    "./text-input.css": "./src/forms/text-input/text-input.css",
+    "./textarea": "./src/forms/textarea/textarea.tsx",
+    "./text-shimmer": "./src/typography/text-shimmer/text-shimmer.tsx",
+    "./toast": "./src/feedback/toast/toast.tsx",
+    "./tooltip": "./src/overlays/tooltip/tooltip.tsx",
+    "./wordmark": "./src/typography/wordmark/wordmark.tsx",
     "./*": "./src/components/*.tsx",
     "./i18n/*": "./src/i18n/*.ts",
     "./hooks": "./src/hooks/index.ts",
@@ -42,6 +76,7 @@
     "./storybook/scaffold": "./src/storybook/scaffold.tsx",
     "./storybook/fixtures": "./src/storybook/fixtures.ts",
     "./styles": "./src/styles/index.css",
+    "./styles/tokens": "./src/styles/tokens/index.css",
     "./styles/tailwind": "./src/styles/tailwind/index.css",
     "./theme": "./src/theme/index.ts",
     "./theme/*": "./src/theme/*.ts",
@@ -50,10 +85,7 @@
     "./icons/file-type": "./src/components/file-icons/types.ts",
     "./icons/app": "./src/components/app-icons/types.ts",
     "./fonts/*": "./src/assets/fonts/*",
-    "./audio/*": "./src/assets/audio/*",
-    "./v2/*.css": "./src/v2/components/*.css",
-    "./v2/*": "./src/v2/components/*.tsx",
-    "./v2/styles/*": "./src/v2/styles/*"
+    "./audio/*": "./src/assets/audio/*"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
diff --git a/packages/ui/script/build-oc2-v2-overrides.ts b/packages/ui/script/build-oc2-v2-overrides.ts
index e5dae76ef37..4980eaaf598 100644
--- a/packages/ui/script/build-oc2-v2-overrides.ts
+++ b/packages/ui/script/build-oc2-v2-overrides.ts
@@ -5,7 +5,7 @@ import type { DesktopTheme } from "../src/theme/types"
 
 const themePath = import.meta.dir + "/../src/theme/themes/oc-2.json"
 const theme = (await Bun.file(themePath).json()) as DesktopTheme
-const css = await Bun.file(import.meta.dir + "/../src/v2/styles/theme.css").text()
+const css = await Bun.file(import.meta.dir + "/../src/styles/tokens/theme.css").text()
 
 const light = { ...V2_PRIMITIVES_DEFAULT, ...readTokens("light") }
 const dark = { ...V2_PRIMITIVES_DEFAULT, ...readTokens("dark") }
diff --git a/packages/ui/src/v2/components/button-v2.css b/packages/ui/src/actions/button/button.css
similarity index 100%
rename from packages/ui/src/v2/components/button-v2.css
rename to packages/ui/src/actions/button/button.css
diff --git a/packages/ui/src/v2/components/button-v2.stories.tsx b/packages/ui/src/actions/button/button.stories.tsx
similarity index 76%
rename from packages/ui/src/v2/components/button-v2.stories.tsx
rename to packages/ui/src/actions/button/button.stories.tsx
index ca2578257a1..0e85bf7651b 100644
--- a/packages/ui/src/v2/components/button-v2.stories.tsx
+++ b/packages/ui/src/actions/button/button.stories.tsx
@@ -1,5 +1,5 @@
 import { For } from "solid-js"
-import { ButtonV2 } from "./button-v2"
+import { Button } from "./button"
 
 const docs = `### Overview
 Button v2 with visual variants and three sizes.
@@ -16,9 +16,9 @@ Button v2 with visual variants and three sizes.
 `
 
 export default {
-  title: "UI V2/Button",
-  id: "components-button-v2",
-  component: ButtonV2,
+  title: "UI/Button",
+  id: "ui-button",
+  component: Button,
   tags: ["autodocs"],
   parameters: {
     frameHeight: "240px",
@@ -61,15 +61,15 @@ export const Variants = {
         "flex-wrap": "wrap",
       }}
     >
-      <ButtonV2 variant="neutral">Neutral</ButtonV2>
-      <ButtonV2 variant="danger">Danger</ButtonV2>
-      <ButtonV2 variant="warning">Warning</ButtonV2>
-      <ButtonV2 variant="contrast">Contrast</ButtonV2>
-      <ButtonV2 variant="ghost">Ghost</ButtonV2>
-      <ButtonV2 variant="ghost-muted" icon="edit">
+      <Button variant="neutral">Neutral</Button>
+      <Button variant="danger">Danger</Button>
+      <Button variant="warning">Warning</Button>
+      <Button variant="contrast">Contrast</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="ghost-muted" icon="edit">
         Ghost muted
-      </ButtonV2>
-      <ButtonV2 variant="loading">Loading</ButtonV2>
+      </Button>
+      <Button variant="loading">Loading</Button>
     </div>
   ),
 }
@@ -84,15 +84,15 @@ export const Sizes = {
         "flex-wrap": "wrap",
       }}
     >
-      <ButtonV2 size="small" variant="neutral">
+      <Button size="small" variant="neutral">
         Small
-      </ButtonV2>
-      <ButtonV2 size="normal" variant="neutral">
+      </Button>
+      <Button size="normal" variant="neutral">
         Normal
-      </ButtonV2>
-      <ButtonV2 size="large" variant="neutral">
+      </Button>
+      <Button size="large" variant="neutral">
         Large
-      </ButtonV2>
+      </Button>
     </div>
   ),
 }
@@ -107,12 +107,12 @@ export const Icon = {
         "flex-wrap": "wrap",
       }}
     >
-      <ButtonV2 variant="neutral" size="normal" icon="plus">
+      <Button variant="neutral" size="normal" icon="plus">
         Normal
-      </ButtonV2>
-      <ButtonV2 variant="contrast" size="large" icon="plus">
+      </Button>
+      <Button variant="contrast" size="large" icon="plus">
         Large
-      </ButtonV2>
+      </Button>
     </div>
   ),
 }
@@ -139,13 +139,13 @@ export const AllStates = {
               <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
                 <For each={states}>
                   {(state) => (
-                    <ButtonV2
+                    <Button
                       variant={variant}
                       data-state={state === "default" ? undefined : state}
                       disabled={state === "disabled"}
                     >
                       {toTitleCase(state)}
-                    </ButtonV2>
+                    </Button>
                   )}
                 </For>
               </div>
diff --git a/packages/ui/src/v2/components/button-v2.tsx b/packages/ui/src/actions/button/button.tsx
similarity index 75%
rename from packages/ui/src/v2/components/button-v2.tsx
rename to packages/ui/src/actions/button/button.tsx
index 14b793ba11a..fe44c971df1 100644
--- a/packages/ui/src/v2/components/button-v2.tsx
+++ b/packages/ui/src/actions/button/button.tsx
@@ -1,21 +1,21 @@
-import { Button as Kobalte } from "@kobalte/core/button"
+import { Root } from "@kobalte/core/button"
 import { type ComponentProps, Show, createMemo, splitProps } from "solid-js"
-import { Icon, type IconProps } from "./icon"
-import "./button-v2.css"
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
+import "./button.css"
 
-export interface ButtonV2Props
-  extends ComponentProps<typeof Kobalte>,
+export interface ButtonProps
+  extends ComponentProps<typeof Root>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
   variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
   icon?: IconProps["name"]
 }
 
-export function ButtonV2(props: ButtonV2Props) {
+export function Button(props: ButtonProps) {
   const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
   const resolvedIcon = createMemo(() => split.icon)
   return (
-    <Kobalte
+    <Root
       {...rest}
       data-component="button-v2"
       data-size={split.size || "normal"}
@@ -30,6 +30,6 @@ export function ButtonV2(props: ButtonV2Props) {
         <Icon name={resolvedIcon()!} />
       </Show>
       {props.children}
-    </Kobalte>
+    </Root>
   )
 }
diff --git a/packages/ui/src/v2/components/icon-button-v2.css b/packages/ui/src/actions/icon-button/icon-button.css
similarity index 100%
rename from packages/ui/src/v2/components/icon-button-v2.css
rename to packages/ui/src/actions/icon-button/icon-button.css
diff --git a/packages/ui/src/v2/components/icon-button-v2.stories.tsx b/packages/ui/src/actions/icon-button/icon-button.stories.tsx
similarity index 71%
rename from packages/ui/src/v2/components/icon-button-v2.stories.tsx
rename to packages/ui/src/actions/icon-button/icon-button.stories.tsx
index eb6f3107fa3..12ceb742a26 100644
--- a/packages/ui/src/v2/components/icon-button-v2.stories.tsx
+++ b/packages/ui/src/actions/icon-button/icon-button.stories.tsx
@@ -1,14 +1,14 @@
 import { For } from "solid-js"
-import { IconButtonV2 } from "./icon-button-v2"
+import { IconButton } from "./icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
 
 const docs = `### Overview
-Square icon-only button v2 with three visual variants and three sizes.
+Square icon-only button with three visual variants and three sizes.
 
 ### API
-- \`icon\`: Icon name from the icon component.
+- \`icon\`: Icon content.
 - \`variant\`: "neutral" | "contrast" | "ghost".
 - \`size\`: "small" | "normal" | "large".
-- \`iconSize\`: Optional explicit icon size override.
 - Inherits Kobalte Button props and native button attributes.
 
 ### States
@@ -17,9 +17,9 @@ Square icon-only button v2 with three visual variants and three sizes.
 `
 
 export default {
-  title: "UI V2/IconButton",
-  id: "components-icon-button-v2",
-  component: IconButtonV2,
+  title: "UI/IconButton",
+  id: "ui-icon-button",
+  component: IconButton,
   tags: ["autodocs"],
   parameters: {
     frameHeight: "300px",
@@ -31,13 +31,13 @@ export default {
     },
   },
   args: {
-    icon: "plus",
+    icon: <Icon name="plus" />,
     variant: "neutral",
     size: "normal",
   },
   argTypes: {
     icon: {
-      control: "text",
+      control: false,
     },
     variant: {
       control: "select",
@@ -47,10 +47,6 @@ export default {
       control: "select",
       options: ["small", "normal", "large"],
     },
-    iconSize: {
-      control: "select",
-      options: ["small", "normal", "large"],
-    },
   },
 }
 
@@ -59,9 +55,9 @@ export const Playground = {}
 export const Variants = {
   render: () => (
     <div style={{ display: "flex", gap: "12px", "align-items": "center", "flex-wrap": "wrap" }}>
-      <IconButtonV2 icon="plus" variant="neutral" />
-      <IconButtonV2 icon="plus" variant="contrast" />
-      <IconButtonV2 icon="plus" variant="ghost" />
+      <IconButton icon={<Icon name="plus" />} variant="neutral" />
+      <IconButton icon={<Icon name="plus" />} variant="contrast" />
+      <IconButton icon={<Icon name="plus" />} variant="ghost" />
     </div>
   ),
 }
@@ -69,9 +65,9 @@ export const Variants = {
 export const Sizes = {
   render: () => (
     <div style={{ display: "flex", gap: "12px", "align-items": "center", "flex-wrap": "wrap" }}>
-      <IconButtonV2 icon="plus" size="small" variant="neutral" />
-      <IconButtonV2 icon="plus" size="normal" variant="neutral" />
-      <IconButtonV2 icon="plus" size="large" variant="neutral" />
+      <IconButton icon={<Icon name="plus" />} size="small" variant="neutral" />
+      <IconButton icon={<Icon name="plus" />} size="normal" variant="neutral" />
+      <IconButton icon={<Icon name="plus" />} size="large" variant="neutral" />
     </div>
   ),
 }
@@ -92,8 +88,8 @@ export const AllStates = {
               <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
                 <For each={states}>
                   {(state) => (
-                    <IconButtonV2
-                      icon="plus"
+                    <IconButton
+                      icon={<Icon name="plus" />}
                       variant={variant}
                       data-state={state === "default" ? undefined : state}
                       disabled={state === "disabled"}
diff --git a/packages/ui/src/actions/icon-button/icon-button.tsx b/packages/ui/src/actions/icon-button/icon-button.tsx
new file mode 100644
index 00000000000..b515126dbd2
--- /dev/null
+++ b/packages/ui/src/actions/icon-button/icon-button.tsx
@@ -0,0 +1,32 @@
+import { Root } from "@kobalte/core/button"
+import { type ComponentProps, splitProps } from "solid-js"
+import { JSX } from "solid-js"
+import "./icon-button.css"
+
+export interface IconButtonProps
+  extends ComponentProps<typeof Root>,
+    Pick<ComponentProps<"button">, "class" | "classList"> {
+  icon?: JSX.Element
+  size?: "small" | "normal" | "large"
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  state?: "rest" | "hover" | "pressed"
+}
+
+export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
+  const [local, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList", "state"])
+  return (
+    <Root
+      {...rest}
+      data-component="icon-button-v2"
+      data-size={local.size || "normal"}
+      data-variant={local.variant || "neutral"}
+      data-state={local.state}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.icon}
+    </Root>
+  )
+}
diff --git a/packages/ui/src/v2/components/split-button-v2.css b/packages/ui/src/actions/split-button/split-button.css
similarity index 91%
rename from packages/ui/src/v2/components/split-button-v2.css
rename to packages/ui/src/actions/split-button/split-button.css
index e8469f494d5..254cc3fa05e 100644
--- a/packages/ui/src/v2/components/split-button-v2.css
+++ b/packages/ui/src/actions/split-button/split-button.css
@@ -87,13 +87,8 @@
   flex-shrink: 0;
 }
 
-[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] {
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-slot="icon-svg"] {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }
-
-[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] [data-slot="icon-svg"] {
-  width: 16px;
-  height: 16px;
-}
diff --git a/packages/ui/src/actions/split-button/split-button.stories.tsx b/packages/ui/src/actions/split-button/split-button.stories.tsx
new file mode 100644
index 00000000000..cb66e00c79d
--- /dev/null
+++ b/packages/ui/src/actions/split-button/split-button.stories.tsx
@@ -0,0 +1,31 @@
+import { Icon } from "@opencode-ai/ui/icon"
+import { SplitButton, SplitButtonAction, SplitButtonMenuTrigger } from "./split-button"
+
+export default {
+  title: "UI/SplitButton",
+  id: "ui-split-button",
+  component: SplitButton,
+  tags: ["autodocs"],
+}
+
+export const Basic = {
+  render: () => (
+    <SplitButton>
+      <SplitButtonAction>Open</SplitButtonAction>
+      <SplitButtonMenuTrigger aria-label="More open options">
+        <Icon name="chevron-down" size="small" />
+      </SplitButtonMenuTrigger>
+    </SplitButton>
+  ),
+}
+
+export const Disabled = {
+  render: () => (
+    <SplitButton>
+      <SplitButtonAction disabled>Open</SplitButtonAction>
+      <SplitButtonMenuTrigger disabled aria-label="More open options">
+        <Icon name="chevron-down" size="small" />
+      </SplitButtonMenuTrigger>
+    </SplitButton>
+  ),
+}
diff --git a/packages/ui/src/v2/components/split-button-v2.tsx b/packages/ui/src/actions/split-button/split-button.tsx
similarity index 79%
rename from packages/ui/src/v2/components/split-button-v2.tsx
rename to packages/ui/src/actions/split-button/split-button.tsx
index 9585f8a4a7f..b488bfd1f45 100644
--- a/packages/ui/src/v2/components/split-button-v2.tsx
+++ b/packages/ui/src/actions/split-button/split-button.tsx
@@ -1,7 +1,7 @@
 import { splitProps, type ComponentProps, type ParentProps } from "solid-js"
-import "./split-button-v2.css"
+import "./split-button.css"
 
-export function SplitButtonV2(props: ParentProps<ComponentProps<"div">>) {
+export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
     <div
@@ -17,7 +17,7 @@ export function SplitButtonV2(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export function SplitButtonV2Action(props: ComponentProps<"button">) {
+export function SplitButtonAction(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button
@@ -32,7 +32,7 @@ export function SplitButtonV2Action(props: ComponentProps<"button">) {
   )
 }
 
-export function SplitButtonV2MenuTrigger(props: ComponentProps<"button">) {
+export function SplitButtonMenuTrigger(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button
diff --git a/packages/ui/src/components/accordion.stories.tsx b/packages/ui/src/components/accordion.stories.tsx
deleted file mode 100644
index c53b6d3da9a..00000000000
--- a/packages/ui/src/components/accordion.stories.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-// @ts-nocheck
-import { createEffect, createSignal } from "solid-js"
-import * as mod from "./accordion"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Accordion for collapsible content sections with optional multi-open behavior.
-
-Use one trigger per item; keep content concise.
-
-### API
-- Root supports Kobalte Accordion props: \`value\`, \`multiple\`, \`collapsible\`, \`onChange\`.
-- Compose with \`Accordion.Item\`, \`Header\`, \`Trigger\`, \`Content\`.
-
-### Variants and states
-- Single or multiple open items.
-- Collapsible or fixed-open behavior.
-
-### Behavior
-- Controlled via \`value\`/\`onChange\` when provided.
-
-### Accessibility
-- TODO: confirm keyboard navigation from Kobalte Accordion.
-
-### Theming/tokens
-- Uses \`data-component="accordion"\` and slot data attributes.
-
-`
-
-const story = create({ title: "UI/Accordion", mod })
-export default {
-  title: "UI/Accordion",
-  id: "components-accordion",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-export const Basic = {
-  args: {
-    collapsible: true,
-    multiple: false,
-    value: "first",
-  },
-  argTypes: {
-    collapsible: { control: "boolean" },
-    multiple: { control: "boolean" },
-    value: {
-      control: "select",
-      options: ["first", "second", "none"],
-      mapping: {
-        none: undefined,
-      },
-    },
-  },
-  render: (props) => {
-    const [value, setValue] = createSignal(props.value)
-    createEffect(() => {
-      setValue(props.value)
-    })
-
-    const current = () => {
-      if (props.multiple) {
-        if (Array.isArray(value())) return value()
-        if (value()) return [value()]
-        return []
-      }
-
-      if (Array.isArray(value())) return value()[0]
-      return value()
-    }
-
-    return (
-      <div style={{ display: "grid", gap: "8px", width: "420px" }}>
-        <mod.Accordion collapsible={props.collapsible} multiple={props.multiple} value={current()} onChange={setValue}>
-          <mod.Accordion.Item value="first">
-            <mod.Accordion.Header>
-              <mod.Accordion.Trigger>First</mod.Accordion.Trigger>
-            </mod.Accordion.Header>
-            <mod.Accordion.Content>
-              <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>Accordion content.</div>
-            </mod.Accordion.Content>
-          </mod.Accordion.Item>
-          <mod.Accordion.Item value="second">
-            <mod.Accordion.Header>
-              <mod.Accordion.Trigger>Second</mod.Accordion.Trigger>
-            </mod.Accordion.Header>
-            <mod.Accordion.Content>
-              <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>More content.</div>
-            </mod.Accordion.Content>
-          </mod.Accordion.Item>
-        </mod.Accordion>
-      </div>
-    )
-  },
-}
-
-export const Multiple = {
-  args: {
-    collapsible: true,
-    multiple: true,
-    value: ["first", "second"],
-  },
-  render: (props) => (
-    <mod.Accordion collapsible={props.collapsible} multiple={props.multiple} value={props.value}>
-      <mod.Accordion.Item value="first">
-        <mod.Accordion.Header>
-          <mod.Accordion.Trigger>First</mod.Accordion.Trigger>
-        </mod.Accordion.Header>
-        <mod.Accordion.Content>
-          <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>Accordion content.</div>
-        </mod.Accordion.Content>
-      </mod.Accordion.Item>
-      <mod.Accordion.Item value="second">
-        <mod.Accordion.Header>
-          <mod.Accordion.Trigger>Second</mod.Accordion.Trigger>
-        </mod.Accordion.Header>
-        <mod.Accordion.Content>
-          <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>More content.</div>
-        </mod.Accordion.Content>
-      </mod.Accordion.Item>
-    </mod.Accordion>
-  ),
-}
-
-export const NonCollapsible = {
-  args: {
-    collapsible: false,
-    multiple: false,
-    value: "first",
-  },
-  render: (props) => (
-    <mod.Accordion collapsible={props.collapsible} multiple={props.multiple} value={props.value}>
-      <mod.Accordion.Item value="first">
-        <mod.Accordion.Header>
-          <mod.Accordion.Trigger>First</mod.Accordion.Trigger>
-        </mod.Accordion.Header>
-        <mod.Accordion.Content>
-          <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>Accordion content.</div>
-        </mod.Accordion.Content>
-      </mod.Accordion.Item>
-    </mod.Accordion>
-  ),
-}
diff --git a/packages/ui/src/components/avatar.css b/packages/ui/src/components/avatar.css
deleted file mode 100644
index 5872160771c..00000000000
--- a/packages/ui/src/components/avatar.css
+++ /dev/null
@@ -1,49 +0,0 @@
-[data-component="avatar"] {
-  --avatar-bg: var(--color-surface-info-base);
-  --avatar-fg: var(--color-text-base);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border-weak-base);
-  font-family: var(--font-mono);
-  font-weight: 500;
-  text-transform: uppercase;
-  background-color: var(--avatar-bg);
-  color: var(--avatar-fg);
-}
-
-[data-component="avatar"][data-has-image] {
-  background-color: transparent;
-  border: none;
-}
-
-[data-component="avatar"][data-size="small"] {
-  width: 1.25rem;
-  height: 1.25rem;
-  font-size: 0.75rem;
-  line-height: 1;
-}
-
-[data-component="avatar"][data-size="normal"] {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-}
-
-[data-component="avatar"][data-size="large"] {
-  width: 2rem;
-  height: 2rem;
-  font-size: 1.25rem;
-  line-height: 2rem;
-}
-
-[data-component="avatar"] [data-slot="avatar-image"] {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-  border-radius: inherit;
-}
diff --git a/packages/ui/src/components/avatar.stories.tsx b/packages/ui/src/components/avatar.stories.tsx
deleted file mode 100644
index 044224ae8c3..00000000000
--- a/packages/ui/src/components/avatar.stories.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// @ts-nocheck
-import * as mod from "./avatar"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-User avatar with image fallback to initials.
-
-Use in user lists and headers.
-
-### API
-- Required: \`fallback\` string.
-- Optional: \`src\`, \`background\`, \`foreground\`, \`size\`.
-
-### Variants and states
-- Sizes: small, normal, large.
-- Image vs fallback state.
-
-### Behavior
-- Uses grapheme-aware fallback rendering.
-
-### Accessibility
-- TODO: provide alt text when using images; currently image is decorative.
-
-### Theming/tokens
-- Uses \`data-component="avatar"\` with size and image state attributes.
-
-`
-
-const story = create({ title: "UI/Avatar", mod, args: { fallback: "A" } })
-
-export default {
-  title: "UI/Avatar",
-  id: "components-avatar",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["small", "normal", "large"],
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const WithImage = {
-  args: {
-    src: "https://placehold.co/80x80/png",
-    fallback: "J",
-  },
-}
-
-export const Sizes = {
-  render: () => (
-    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
-      <mod.Avatar size="small" fallback="S" />
-      <mod.Avatar size="normal" fallback="N" />
-      <mod.Avatar size="large" fallback="L" />
-    </div>
-  ),
-}
-
-export const CustomColors = {
-  args: {
-    fallback: "C",
-    background: "#1f2a44",
-    foreground: "#f2f5ff",
-  },
-}
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
deleted file mode 100644
index 923b2bab374..00000000000
--- a/packages/ui/src/components/button.css
+++ /dev/null
@@ -1,194 +0,0 @@
-[data-component="button"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  user-select: none;
-  cursor: default;
-  outline: none;
-  white-space: nowrap;
-
-  &[data-variant="primary"] {
-    background-color: var(--button-primary-base);
-    border-color: var(--border-weak-base);
-    color: var(--icon-invert-base);
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-invert-base);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--icon-strong-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--icon-strong-focus);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--icon-strong-active);
-    }
-    &:disabled {
-      background-color: var(--icon-strong-disabled);
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-invert-base);
-      }
-    }
-  }
-
-  &[data-variant="ghost"] {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--text-strong);
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &:focus-visible:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--surface-base-active);
-    }
-    &:disabled {
-      color: var(--text-weak);
-      cursor: not-allowed;
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-disabled);
-      }
-    }
-    &[data-selected="true"]:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &[data-active="true"] {
-      background-color: var(--surface-base-active);
-    }
-  }
-
-  &[data-variant="secondary"] {
-    border: transparent;
-    background-color: var(--button-secondary-base);
-    color: var(--text-strong);
-    box-shadow: var(--shadow-xs-border-base);
-
-    &:hover:not(:disabled) {
-      background-color: var(--button-secondary-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-    &:focus-visible:not(:active) {
-      background-color: var(--button-secondary-base);
-      box-shadow: var(--shadow-xs-border-focus);
-    }
-    &:focus-visible:active {
-      box-shadow: none;
-    }
-    &:active:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-    &:disabled {
-      border-color: var(--border-disabled);
-      background-color: var(--surface-disabled);
-      color: var(--text-weak);
-      cursor: not-allowed;
-    }
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
-  }
-
-  &[data-size="small"] {
-    height: 24px;
-    padding: 0 8px;
-    &[data-icon] {
-      padding: 0 12px 0 4px;
-    }
-
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
-    gap: 8px;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &[data-size="normal"] {
-    height: 28px;
-    line-height: 28px;
-    padding: 0 6px;
-    &[data-icon] {
-      padding: 0 12px 0 4px;
-    }
-
-    font-size: var(--font-size-small);
-    gap: 8px;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &[data-size="large"] {
-    height: 32px;
-    padding: 6px 12px;
-
-    &[data-icon] {
-      padding: 0 12px 0 8px;
-    }
-
-    gap: 8px;
-
-    /* text-14-medium */
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 142.857% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] {
-  background-color: var(--surface-base-active);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] [data-slot="icon-svg"] {
-  color: var(--icon-strong-base);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
-  background-color: var(--surface-base-active);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] {
-  background-color: var(--surface-base-active);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] [data-slot="icon-svg"] {
-  color: var(--icon-strong-base);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"]:hover:not(:disabled) {
-  background-color: var(--surface-base-active);
-}
diff --git a/packages/ui/src/components/button.stories.tsx b/packages/ui/src/components/button.stories.tsx
deleted file mode 100644
index 24fad5c8a0f..00000000000
--- a/packages/ui/src/components/button.stories.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-// @ts-nocheck
-import { Button } from "./button"
-
-const docs = `### Overview
-Primary action button with size, variant, and optional icon support.
-
-Use \`IconButton\` for icon-only actions.
-
-### API
-- \`variant\`: "primary" | "secondary" | "ghost".
-- \`size\`: "small" | "normal" | "large".
-- \`icon\`: Icon name for a leading icon.
-- Inherits Kobalte Button props and native button attributes.
-
-### Variants and states
-- Variants: primary, secondary, ghost.
-- States: disabled.
-
-### Behavior
-- Renders an Icon when \`icon\` is set.
-
-### Accessibility
-- Provide clear label text; use \`aria-label\` for icon-only buttons.
-
-### Theming/tokens
-- Uses \`data-component="button"\` with size/variant data attributes.
-
-`
-
-export default {
-  title: "UI/Button",
-  id: "components-button",
-  component: Button,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  args: {
-    children: "Button",
-    variant: "secondary",
-    size: "normal",
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["primary", "secondary", "ghost"],
-    },
-    size: {
-      control: "select",
-      options: ["small", "normal", "large"],
-    },
-    icon: {
-      control: "select",
-      options: ["none", "check", "plus", "arrow-right"],
-      mapping: {
-        none: undefined,
-      },
-    },
-  },
-}
-
-export const Primary = {
-  args: {
-    variant: "primary",
-  },
-}
-
-export const Secondary = {}
-
-export const Ghost = {
-  args: {
-    variant: "ghost",
-  },
-}
-
-export const WithIcon = {
-  args: {
-    children: "Continue",
-    icon: "arrow-right",
-  },
-}
-
-export const Disabled = {
-  args: {
-    variant: "primary",
-    disabled: true,
-  },
-}
-
-export const Sizes = {
-  render: () => (
-    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
-      <Button size="small" variant="secondary">
-        Small
-      </Button>
-      <Button size="normal" variant="secondary">
-        Normal
-      </Button>
-      <Button size="large" variant="secondary">
-        Large
-      </Button>
-    </div>
-  ),
-}
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
deleted file mode 100644
index d1652145f51..00000000000
--- a/packages/ui/src/components/button.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button"
-import { type ComponentProps, Show, splitProps } from "solid-js"
-import { Icon, IconProps } from "./icon"
-
-export interface ButtonProps
-  extends ComponentProps<typeof Kobalte>,
-    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
-  size?: "small" | "normal" | "large"
-  variant?: "primary" | "secondary" | "ghost"
-  icon?: IconProps["name"]
-}
-
-export function Button(props: ButtonProps) {
-  const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
-  return (
-    <Kobalte
-      {...rest}
-      data-component="button"
-      data-size={split.size || "normal"}
-      data-variant={split.variant || "secondary"}
-      data-icon={split.icon}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      <Show when={split.icon}>
-        <Icon name={split.icon!} size="small" />
-      </Show>
-      {props.children}
-    </Kobalte>
-  )
-}
diff --git a/packages/ui/src/components/card.css b/packages/ui/src/components/card.css
index 1546ee54a83..801b2a58949 100644
--- a/packages/ui/src/components/card.css
+++ b/packages/ui/src/components/card.css
@@ -58,7 +58,7 @@
     gap: var(--card-gap);
   }
 
-  :where([data-slot="card-title"]) [data-component="icon"] {
+  :where([data-slot="card-title"]) [data-slot="icon-svg"] {
     color: var(--card-accent);
   }
 
@@ -71,7 +71,7 @@
     flex: 0 0 auto;
   }
 
-  :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
+  :where([data-slot="card-title-icon"][data-placeholder]) [data-slot="icon-svg"] {
     color: var(--v2-text-text-faint);
   }
 
diff --git a/packages/ui/src/components/card.stories.tsx b/packages/ui/src/components/card.stories.tsx
index 5b9cf3830e5..d057c44d3ff 100644
--- a/packages/ui/src/components/card.stories.tsx
+++ b/packages/ui/src/components/card.stories.tsx
@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { Card, CardActions, CardDescription, CardTitle } from "./card"
-import { Button } from "./button"
+import { Button } from "@opencode-ai/ui/button"
 
 const docs = `### Overview
 Surface container for grouping related content and actions.
@@ -52,7 +52,7 @@ export default {
         <CardTitle variant={props.variant}>Card title</CardTitle>
         <CardDescription>Small supporting text.</CardDescription>
         <CardActions>
-          <Button size="small" variant="secondary">
+          <Button size="small" variant="neutral">
             Action
           </Button>
         </CardActions>
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
index da82d4f4575..e9d0d555aef 100644
--- a/packages/ui/src/components/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -1,5 +1,5 @@
 import { type ComponentProps, Show, splitProps } from "solid-js"
-import { Icon, type IconProps } from "./icon"
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
 
 type Variant = "normal" | "error" | "warning" | "success" | "info"
 
diff --git a/packages/ui/src/components/checkbox.stories.tsx b/packages/ui/src/components/checkbox.stories.tsx
deleted file mode 100644
index ceb09f103e5..00000000000
--- a/packages/ui/src/components/checkbox.stories.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// @ts-nocheck
-import { Icon } from "./icon"
-import * as mod from "./checkbox"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Checkbox control for multi-select or agreement inputs.
-
-Use in forms and multi-select lists.
-
-### API
-- Uses Kobalte Checkbox props (\`checked\`, \`defaultChecked\`, \`onChange\`).
-- Optional: \`hideLabel\`, \`description\`, \`icon\`.
-- Children render as the label.
-
-### Variants and states
-- Checked/unchecked, indeterminate, disabled (via Kobalte).
-
-### Behavior
-- Controlled or uncontrolled usage.
-
-### Accessibility
-- TODO: confirm aria attributes from Kobalte.
-
-### Theming/tokens
-- Uses \`data-component="checkbox"\` and related slots.
-
-`
-
-const story = create({ title: "UI/Checkbox", mod, args: { children: "Checkbox", defaultChecked: true } })
-export default {
-  title: "UI/Checkbox",
-  id: "components-checkbox",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const States = {
-  render: () => (
-    <div style={{ display: "grid", gap: "12px" }}>
-      <mod.Checkbox defaultChecked>Checked</mod.Checkbox>
-      <mod.Checkbox>Unchecked</mod.Checkbox>
-      <mod.Checkbox disabled>Disabled</mod.Checkbox>
-      <mod.Checkbox description="Helper text">With description</mod.Checkbox>
-    </div>
-  ),
-}
-
-export const CustomIcon = {
-  render: () => (
-    <mod.Checkbox icon={<Icon name="check" size="small" />} defaultChecked>
-      Custom icon
-    </mod.Checkbox>
-  ),
-}
-
-export const HiddenLabel = {
-  args: {
-    children: "Hidden label",
-    hideLabel: true,
-  },
-}
diff --git a/packages/ui/src/components/collapsible.tsx b/packages/ui/src/components/collapsible.tsx
index b2a60326464..d2520c9eb8c 100644
--- a/packages/ui/src/components/collapsible.tsx
+++ b/packages/ui/src/components/collapsible.tsx
@@ -1,6 +1,6 @@
 import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
 import { ComponentProps, ParentProps, splitProps } from "solid-js"
-import { Icon } from "./icon"
+import { Icon } from "@opencode-ai/ui/icon"
 
 export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
   class?: string
diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
deleted file mode 100644
index f17232c3507..00000000000
--- a/packages/ui/src/components/dialog.css
+++ /dev/null
@@ -1,181 +0,0 @@
-/* [data-component="dialog-trigger"] { } */
-
-[data-component="dialog-overlay"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: hsl(from var(--background-base) h s l / 0.2);
-}
-
-[data-component="dialog"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-
-  [data-slot="dialog-container"] {
-    position: relative;
-    z-index: 50;
-    width: min(calc(100vw - 16px), 640px);
-    height: min(calc(100vh - 16px), 512px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-items: start;
-    overflow: visible;
-
-    [data-slot="dialog-content"] {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      align-self: stretch;
-      width: 100%;
-      max-height: 100%;
-      min-height: 280px;
-      overflow: auto;
-      pointer-events: auto;
-
-      /* Hide scrollbar */
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      /* padding: 8px; */
-      /* padding: 8px 8px 0 8px; */
-      border-radius: var(--radius-xl);
-      background: var(--surface-raised-stronger-non-alpha);
-      background-clip: padding-box;
-      box-shadow: var(--shadow-lg-border-base);
-
-      [data-slot="dialog-header"] {
-        display: flex;
-        padding: 16px 20px;
-        justify-content: space-between;
-        align-items: center;
-        flex-shrink: 0;
-        align-self: stretch;
-
-        [data-slot="dialog-title"] {
-          color: var(--text-strong);
-
-          /* text-16-medium */
-          font-family: var(--font-family-sans);
-          font-size: var(--font-size-large);
-          font-style: normal;
-          font-weight: var(--font-weight-medium);
-          line-height: var(--line-height-x-large); /* 150% */
-          letter-spacing: var(--letter-spacing-tight);
-        }
-        /* [data-slot="dialog-close-button"] {} */
-      }
-
-      [data-slot="dialog-description"] {
-        display: flex;
-        padding: 16px;
-        padding-left: 24px;
-        padding-top: 0;
-        margin-top: -8px;
-        justify-content: space-between;
-        align-items: center;
-        flex-shrink: 0;
-        align-self: stretch;
-
-        color: var(--text-base);
-
-        /* text-14-regular */
-        font-family: var(--font-family-sans);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: var(--font-weight-regular);
-        line-height: var(--line-height-large); /* 142.857% */
-        letter-spacing: var(--letter-spacing-normal);
-      }
-
-      [data-slot="dialog-body"] {
-        width: 100%;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        overflow: hidden;
-
-        &:focus-visible {
-          outline: none;
-        }
-      }
-      &:focus-visible {
-        outline: none;
-      }
-    }
-  }
-
-  &[data-fit] {
-    [data-slot="dialog-container"] {
-      height: auto;
-
-      [data-slot="dialog-content"] {
-        min-height: 0;
-      }
-    }
-  }
-
-  &[data-size="large"] [data-slot="dialog-container"] {
-    width: min(calc(100vw - 32px), 800px);
-    height: min(calc(100vh - 32px), 600px);
-  }
-
-  &[data-size="x-large"] [data-slot="dialog-container"] {
-    width: min(calc(100vw - 32px), 980px);
-    height: min(calc(100vh - 92px), 600px);
-  }
-}
-
-[data-component="dialog"][data-transition] [data-slot="dialog-content"] {
-  animation: contentHide 100ms ease-in forwards;
-
-  &[data-expanded] {
-    animation: contentShow 150ms ease-out;
-  }
-}
-
-@keyframes overlayShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes overlayHide {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes contentShow {
-  from {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes contentHide {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-}
diff --git a/packages/ui/src/components/dialog.stories.tsx b/packages/ui/src/components/dialog.stories.tsx
deleted file mode 100644
index 60cd0a1c191..00000000000
--- a/packages/ui/src/components/dialog.stories.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-// @ts-nocheck
-import { onMount } from "solid-js"
-import * as mod from "./dialog"
-import { Button } from "./button"
-import { useDialog } from "../context/dialog"
-
-const docs = `### Overview
-Dialog content wrapper used with the DialogProvider for modal flows.
-
-Provide concise title/description and keep body focused.
-
-### API
-- Optional: \`title\`, \`description\`, \`action\`.
-- \`size\`: normal | large | x-large.
-- \`fit\` and \`transition\` control layout and animation.
-
-### Variants and states
-- Sizes and optional header/action controls.
-
-### Behavior
-- Intended to be rendered via \`useDialog().show\`.
-
-### Accessibility
-- TODO: confirm focus trapping and aria attributes from Kobalte Dialog.
-
-### Theming/tokens
-- Uses \`data-component="dialog"\` and slot attributes.
-
-`
-
-export default {
-  title: "UI/Dialog",
-  id: "components-dialog",
-  component: mod.Dialog,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = {
-  render: () => {
-    const dialog = useDialog()
-    const open = () =>
-      dialog.show(() => (
-        <mod.Dialog title="Dialog" description="Description">
-          Dialog body content.
-        </mod.Dialog>
-      ))
-
-    onMount(open)
-
-    return (
-      <Button variant="secondary" onClick={open}>
-        Open dialog
-      </Button>
-    )
-  },
-}
-
-export const Sizes = {
-  render: () => {
-    const dialog = useDialog()
-    return (
-      <div style={{ display: "flex", gap: "12px" }}>
-        <Button
-          variant="secondary"
-          onClick={() =>
-            dialog.show(() => (
-              <mod.Dialog title="Normal" description="Normal size">
-                Normal dialog content.
-              </mod.Dialog>
-            ))
-          }
-        >
-          Normal
-        </Button>
-        <Button
-          variant="secondary"
-          onClick={() =>
-            dialog.show(() => (
-              <mod.Dialog size="large" title="Large" description="Large size">
-                Large dialog content.
-              </mod.Dialog>
-            ))
-          }
-        >
-          Large
-        </Button>
-        <Button
-          variant="secondary"
-          onClick={() =>
-            dialog.show(() => (
-              <mod.Dialog size="x-large" title="Extra large" description="X-large size">
-                X-large dialog content.
-              </mod.Dialog>
-            ))
-          }
-        >
-          X-Large
-        </Button>
-      </div>
-    )
-  },
-}
-
-export const Transition = {
-  render: () => {
-    const dialog = useDialog()
-    return (
-      <Button
-        variant="secondary"
-        onClick={() =>
-          dialog.show(() => (
-            <mod.Dialog title="Transition" description="Animated" transition>
-              Transition enabled.
-            </mod.Dialog>
-          ))
-        }
-      >
-        Open transition dialog
-      </Button>
-    )
-  },
-}
-
-export const CustomAction = {
-  render: () => {
-    const dialog = useDialog()
-    return (
-      <Button
-        variant="secondary"
-        onClick={() =>
-          dialog.show(() => (
-            <mod.Dialog
-              title="Custom action"
-              description="Dialog with a custom header action"
-              action={<Button variant="ghost">Help</Button>}
-            >
-              Dialog body content.
-            </mod.Dialog>
-          ))
-        }
-      >
-        Open action dialog
-      </Button>
-    )
-  },
-}
-
-export const Fit = {
-  render: () => {
-    const dialog = useDialog()
-    return (
-      <Button
-        variant="secondary"
-        onClick={() =>
-          dialog.show(() => (
-            <mod.Dialog title="Fit content" fit>
-              Dialog fits its content.
-            </mod.Dialog>
-          ))
-        }
-      >
-        Open fit dialog
-      </Button>
-    )
-  },
-}
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
deleted file mode 100644
index 981e3f45d74..00000000000
--- a/packages/ui/src/components/dialog.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Dialog as Kobalte } from "@kobalte/core/dialog"
-import { ComponentProps, JSXElement, Match, ParentProps, Show, Switch } from "solid-js"
-import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
-
-export interface DialogProps extends ParentProps {
-  title?: JSXElement
-  description?: JSXElement
-  action?: JSXElement
-  size?: "normal" | "large" | "x-large"
-  class?: ComponentProps<"div">["class"]
-  classList?: ComponentProps<"div">["classList"]
-  fit?: boolean
-  transition?: boolean
-}
-
-export function Dialog(props: DialogProps) {
-  const i18n = useI18n()
-  return (
-    <div
-      data-component="dialog"
-      data-fit={props.fit ? true : undefined}
-      data-size={props.size || "normal"}
-      data-transition={props.transition ? true : undefined}
-    >
-      <div data-slot="dialog-container">
-        <Kobalte.Content
-          data-slot="dialog-content"
-          data-no-header={!props.title && !props.action ? "" : undefined}
-          classList={{
-            ...props.classList,
-            [props.class ?? ""]: !!props.class,
-          }}
-          onOpenAutoFocus={(e) => {
-            const target = e.currentTarget as HTMLElement | null
-            const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
-            if (autofocusEl) {
-              e.preventDefault()
-              autofocusEl.focus()
-            }
-          }}
-        >
-          <Show when={props.title || props.action}>
-            <div data-slot="dialog-header">
-              <Show when={props.title}>
-                <Kobalte.Title data-slot="dialog-title">{props.title}</Kobalte.Title>
-              </Show>
-              <Switch>
-                <Match when={props.action}>{props.action}</Match>
-                <Match when={true}>
-                  <Kobalte.CloseButton
-                    data-slot="dialog-close-button"
-                    as={IconButton}
-                    icon="close"
-                    variant="ghost"
-                    aria-label={i18n.t("ui.common.close")}
-                  />
-                </Match>
-              </Switch>
-            </div>
-          </Show>
-          <Show when={props.description}>
-            <Kobalte.Description data-slot="dialog-description" style={{ "margin-left": "-4px" }}>
-              {props.description}
-            </Kobalte.Description>
-          </Show>
-          <div data-slot="dialog-body">{props.children}</div>
-        </Kobalte.Content>
-      </div>
-    </div>
-  )
-}
diff --git a/packages/ui/src/components/diff-changes.stories.tsx b/packages/ui/src/components/diff-changes.stories.tsx
deleted file mode 100644
index fe0ba6eb4f2..00000000000
--- a/packages/ui/src/components/diff-changes.stories.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-// @ts-nocheck
-import * as mod from "./diff-changes"
-import { create } from "../storybook/scaffold"
-import { changes } from "../storybook/fixtures"
-
-const docs = `### Overview
-Summarize additions/deletions as text or compact bars.
-
-Pair with \`Diff\`/\`DiffSSR\` to contextualize a change set.
-
-### API
-- Required: \`changes\` as { additions, deletions } or an array of those objects.
-- Optional: \`variant\` ("default" | "bars").
-
-### Variants and states
-- Default text summary or bar visualization.
-- Handles zero-change state (renders nothing in default variant).
-
-### Behavior
-- Aggregates arrays into total additions/deletions.
-
-### Accessibility
-- Ensure surrounding context conveys meaning of the counts/bars.
-
-### Theming/tokens
-- Uses \`data-component="diff-changes"\` and diff color tokens.
-
-`
-
-const story = create({
-  title: "UI/DiffChanges",
-  mod,
-  args: {
-    changes,
-    variant: "default",
-  },
-})
-
-export default {
-  title: "UI/DiffChanges",
-  id: "components-diff-changes",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "bars"],
-    },
-  },
-}
-
-export const Default = story.Basic
-
-export const Bars = {
-  args: {
-    variant: "bars",
-  },
-}
-
-export const MultipleFiles = {
-  args: {
-    changes: [
-      { additions: 4, deletions: 1 },
-      { additions: 8, deletions: 3 },
-      { additions: 2, deletions: 0 },
-    ],
-  },
-}
-
-export const Zero = {
-  args: {
-    changes: { additions: 0, deletions: 0 },
-  },
-}
diff --git a/packages/ui/src/components/diff-changes.tsx b/packages/ui/src/components/diff-changes.tsx
deleted file mode 100644
index 0794b972869..00000000000
--- a/packages/ui/src/components/diff-changes.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { createMemo, For, Match, Show, Switch } from "solid-js"
-
-export function DiffChanges(props: {
-  class?: string
-  changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
-  variant?: "default" | "bars"
-}) {
-  const variant = () => props.variant ?? "default"
-
-  const additions = createMemo(() =>
-    Array.isArray(props.changes)
-      ? props.changes.reduce((acc, diff) => acc + (diff.additions ?? 0), 0)
-      : props.changes.additions,
-  )
-  const deletions = createMemo(() =>
-    Array.isArray(props.changes)
-      ? props.changes.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0)
-      : props.changes.deletions,
-  )
-  const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
-
-  const blockCounts = createMemo(() => {
-    const TOTAL_BLOCKS = 5
-
-    const adds = additions() ?? 0
-    const dels = deletions() ?? 0
-
-    if (adds === 0 && dels === 0) {
-      return { added: 0, deleted: 0, neutral: TOTAL_BLOCKS }
-    }
-
-    const total = adds + dels
-
-    if (total < 5) {
-      const added = adds > 0 ? 1 : 0
-      const deleted = dels > 0 ? 1 : 0
-      const neutral = TOTAL_BLOCKS - added - deleted
-      return { added, deleted, neutral }
-    }
-
-    const ratio = adds > dels ? adds / dels : dels / adds
-    let BLOCKS_FOR_COLORS = TOTAL_BLOCKS
-
-    if (total < 20) {
-      BLOCKS_FOR_COLORS = TOTAL_BLOCKS - 1
-    } else if (ratio < 4) {
-      BLOCKS_FOR_COLORS = TOTAL_BLOCKS - 1
-    }
-
-    const percentAdded = adds / total
-    const percentDeleted = dels / total
-
-    const added_raw = percentAdded * BLOCKS_FOR_COLORS
-    const deleted_raw = percentDeleted * BLOCKS_FOR_COLORS
-
-    let added = adds > 0 ? Math.max(1, Math.round(added_raw)) : 0
-    let deleted = dels > 0 ? Math.max(1, Math.round(deleted_raw)) : 0
-
-    // Cap bars based on actual change magnitude
-    if (adds > 0 && adds <= 5) added = Math.min(added, 1)
-    if (adds > 5 && adds <= 10) added = Math.min(added, 2)
-    if (dels > 0 && dels <= 5) deleted = Math.min(deleted, 1)
-    if (dels > 5 && dels <= 10) deleted = Math.min(deleted, 2)
-
-    let total_allocated = added + deleted
-    if (total_allocated > BLOCKS_FOR_COLORS) {
-      if (added_raw > deleted_raw) {
-        added = BLOCKS_FOR_COLORS - deleted
-      } else {
-        deleted = BLOCKS_FOR_COLORS - added
-      }
-      total_allocated = added + deleted
-    }
-
-    const neutral = Math.max(0, TOTAL_BLOCKS - total_allocated)
-
-    return { added, deleted, neutral }
-  })
-
-  const ADD_COLOR = "var(--icon-diff-add-base)"
-  const DELETE_COLOR = "var(--icon-diff-delete-base)"
-  const NEUTRAL_COLOR = "var(--icon-weak-base)"
-
-  const visibleBlocks = createMemo(() => {
-    const counts = blockCounts()
-    const blocks = [
-      ...Array(counts.added).fill(ADD_COLOR),
-      ...Array(counts.deleted).fill(DELETE_COLOR),
-      ...Array(counts.neutral).fill(NEUTRAL_COLOR),
-    ]
-    return blocks.slice(0, 5)
-  })
-
-  return (
-    <Show when={variant() === "default" ? total() > 0 : true}>
-      <div data-component="diff-changes" data-variant={variant()} classList={{ [props.class ?? ""]: true }}>
-        <Switch>
-          <Match when={variant() === "bars"}>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 14" fill="none">
-              <g>
-                <For each={visibleBlocks()}>
-                  {(color, i) => <rect x={i() * 4} width="2" height="14" rx="1" fill={color} />}
-                </For>
-              </g>
-            </svg>
-          </Match>
-          <Match when={variant() === "default"}>
-            <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
-            <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
-          </Match>
-        </Switch>
-      </div>
-    </Show>
-  )
-}
diff --git a/packages/ui/src/components/dropdown-menu.css b/packages/ui/src/components/dropdown-menu.css
deleted file mode 100644
index f8a9fa60ee3..00000000000
--- a/packages/ui/src/components/dropdown-menu.css
+++ /dev/null
@@ -1,135 +0,0 @@
-[data-component="dropdown-menu-content"],
-[data-component="dropdown-menu-sub-content"] {
-  min-width: 8rem;
-  overflow: hidden;
-  border-radius: var(--radius-md);
-  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
-  background-clip: padding-box;
-  background-color: var(--surface-raised-stronger-non-alpha);
-  padding: 4px;
-  box-shadow: var(--shadow-md);
-  z-index: 50;
-  transform-origin: var(--kb-menu-content-transform-origin);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-
-  &[data-closed] {
-    animation: dropdown-menu-close 0.15s ease-out;
-  }
-
-  &[data-expanded] {
-    animation: dropdown-menu-open 0.15s ease-out;
-  }
-}
-
-[data-component="dropdown-menu-content"],
-[data-component="dropdown-menu-sub-content"] {
-  [data-slot="dropdown-menu-item"],
-  [data-slot="dropdown-menu-checkbox-item"],
-  [data-slot="dropdown-menu-radio-item"],
-  [data-slot="dropdown-menu-sub-trigger"] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 8px;
-    border-radius: var(--radius-sm);
-    cursor: default;
-    user-select: none;
-    outline: none;
-
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-    color: var(--text-strong);
-
-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
-    }
-
-    &[data-disabled] {
-      color: var(--text-weak);
-      pointer-events: none;
-    }
-  }
-
-  [data-slot="dropdown-menu-checkbox-item"],
-  [data-slot="dropdown-menu-radio-item"] {
-    padding-inline-end: 28px;
-  }
-
-  [data-slot="dropdown-menu-sub-trigger"] {
-    &[data-expanded] {
-      background: var(--surface-raised-base-hover);
-    }
-  }
-
-  [data-slot="dropdown-menu-item-indicator"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    inset-inline-end: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  [data-slot="dropdown-menu-item-label"] {
-    flex: 1;
-  }
-
-  [data-slot="dropdown-menu-item-description"] {
-    font-size: var(--font-size-x-small);
-    color: var(--text-weak);
-  }
-
-  [data-slot="dropdown-menu-separator"] {
-    height: 1px;
-    margin: 4px -4px;
-    border-top-color: var(--border-weak-base);
-  }
-
-  [data-slot="dropdown-menu-group-label"] {
-    display: block;
-    padding: 4px 8px;
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-x-small);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-    color: var(--text-weak);
-  }
-
-  [data-slot="dropdown-menu-arrow"] {
-    fill: var(--surface-raised-stronger-non-alpha);
-  }
-}
-
-@keyframes dropdown-menu-open {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes dropdown-menu-close {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-}
diff --git a/packages/ui/src/components/dropdown-menu.stories.tsx b/packages/ui/src/components/dropdown-menu.stories.tsx
deleted file mode 100644
index 7a2d644fac3..00000000000
--- a/packages/ui/src/components/dropdown-menu.stories.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-// @ts-nocheck
-import * as mod from "./dropdown-menu"
-import { Button } from "./button"
-
-const docs = `### Overview
-Dropdown menu built on Kobalte with composable items, groups, and submenus.
-
-Use \`DropdownMenu.ItemLabel\`/\`ItemDescription\` for richer rows.
-
-### API
-- Root accepts Kobalte DropdownMenu props (\`open\`, \`defaultOpen\`, \`onOpenChange\`).
-- Compose with \`Trigger\`, \`Content\`, \`Item\`, \`Separator\`, and optional \`Sub\` sections.
-
-### Variants and states
-- Supports item groups, separators, and nested submenus.
-
-### Behavior
-- Menu opens from trigger and renders in a portal by default.
-
-### Accessibility
-- TODO: confirm keyboard navigation from Kobalte.
-
-### Theming/tokens
-- Uses \`data-component="dropdown-menu"\` and slot attributes for styling.
-
-`
-
-export default {
-  title: "UI/DropdownMenu",
-  id: "components-dropdown-menu",
-  component: mod.DropdownMenu,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = {
-  render: () => (
-    <mod.DropdownMenu defaultOpen>
-      <mod.DropdownMenu.Trigger as={Button} variant="secondary" size="small">
-        Open menu
-      </mod.DropdownMenu.Trigger>
-      <mod.DropdownMenu.Portal>
-        <mod.DropdownMenu.Content>
-          <mod.DropdownMenu.Group>
-            <mod.DropdownMenu.GroupLabel>Actions</mod.DropdownMenu.GroupLabel>
-            <mod.DropdownMenu.Item>
-              <mod.DropdownMenu.ItemLabel>New file</mod.DropdownMenu.ItemLabel>
-            </mod.DropdownMenu.Item>
-            <mod.DropdownMenu.Item>
-              <mod.DropdownMenu.ItemLabel>Rename</mod.DropdownMenu.ItemLabel>
-              <mod.DropdownMenu.ItemDescription>Shift+R</mod.DropdownMenu.ItemDescription>
-            </mod.DropdownMenu.Item>
-          </mod.DropdownMenu.Group>
-          <mod.DropdownMenu.Separator />
-          <mod.DropdownMenu.Sub>
-            <mod.DropdownMenu.SubTrigger>More options</mod.DropdownMenu.SubTrigger>
-            <mod.DropdownMenu.SubContent>
-              <mod.DropdownMenu.Item>
-                <mod.DropdownMenu.ItemLabel>Duplicate</mod.DropdownMenu.ItemLabel>
-              </mod.DropdownMenu.Item>
-              <mod.DropdownMenu.Item>
-                <mod.DropdownMenu.ItemLabel>Move</mod.DropdownMenu.ItemLabel>
-              </mod.DropdownMenu.Item>
-            </mod.DropdownMenu.SubContent>
-          </mod.DropdownMenu.Sub>
-        </mod.DropdownMenu.Content>
-      </mod.DropdownMenu.Portal>
-    </mod.DropdownMenu>
-  ),
-}
-
-export const CheckboxRadio = {
-  render: () => (
-    <mod.DropdownMenu defaultOpen>
-      <mod.DropdownMenu.Trigger as={Button} variant="secondary" size="small">
-        Open menu
-      </mod.DropdownMenu.Trigger>
-      <mod.DropdownMenu.Portal>
-        <mod.DropdownMenu.Content>
-          <mod.DropdownMenu.CheckboxItem checked>Show line numbers</mod.DropdownMenu.CheckboxItem>
-          <mod.DropdownMenu.CheckboxItem>Wrap lines</mod.DropdownMenu.CheckboxItem>
-          <mod.DropdownMenu.Separator />
-          <mod.DropdownMenu.RadioGroup value="compact">
-            <mod.DropdownMenu.RadioItem value="compact">Compact</mod.DropdownMenu.RadioItem>
-            <mod.DropdownMenu.RadioItem value="comfortable">Comfortable</mod.DropdownMenu.RadioItem>
-          </mod.DropdownMenu.RadioGroup>
-        </mod.DropdownMenu.Content>
-      </mod.DropdownMenu.Portal>
-    </mod.DropdownMenu>
-  ),
-}
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
deleted file mode 100644
index 259cb791abb..00000000000
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-import { DropdownMenu as Kobalte } from "@kobalte/core/dropdown-menu"
-import { splitProps } from "solid-js"
-import type { ComponentProps, ParentProps } from "solid-js"
-
-export interface DropdownMenuProps extends ComponentProps<typeof Kobalte> {}
-export interface DropdownMenuTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
-export interface DropdownMenuIconProps extends ComponentProps<typeof Kobalte.Icon> {}
-export interface DropdownMenuPortalProps extends ComponentProps<typeof Kobalte.Portal> {}
-export interface DropdownMenuContentProps extends ComponentProps<typeof Kobalte.Content> {}
-export interface DropdownMenuArrowProps extends ComponentProps<typeof Kobalte.Arrow> {}
-export interface DropdownMenuSeparatorProps extends ComponentProps<typeof Kobalte.Separator> {}
-export interface DropdownMenuGroupProps extends ComponentProps<typeof Kobalte.Group> {}
-export interface DropdownMenuGroupLabelProps extends ComponentProps<typeof Kobalte.GroupLabel> {}
-export interface DropdownMenuItemProps extends ComponentProps<typeof Kobalte.Item> {}
-export interface DropdownMenuItemLabelProps extends ComponentProps<typeof Kobalte.ItemLabel> {}
-export interface DropdownMenuItemDescriptionProps extends ComponentProps<typeof Kobalte.ItemDescription> {}
-export interface DropdownMenuItemIndicatorProps extends ComponentProps<typeof Kobalte.ItemIndicator> {}
-export interface DropdownMenuRadioGroupProps extends ComponentProps<typeof Kobalte.RadioGroup> {}
-export interface DropdownMenuRadioItemProps extends ComponentProps<typeof Kobalte.RadioItem> {}
-export interface DropdownMenuCheckboxItemProps extends ComponentProps<typeof Kobalte.CheckboxItem> {}
-export interface DropdownMenuSubProps extends ComponentProps<typeof Kobalte.Sub> {}
-export interface DropdownMenuSubTriggerProps extends ComponentProps<typeof Kobalte.SubTrigger> {}
-export interface DropdownMenuSubContentProps extends ComponentProps<typeof Kobalte.SubContent> {}
-
-function DropdownMenuRoot(props: DropdownMenuProps) {
-  return <Kobalte {...props} data-component="dropdown-menu" />
-}
-
-function DropdownMenuTrigger(props: ParentProps<DropdownMenuTriggerProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Trigger
-      {...rest}
-      data-slot="dropdown-menu-trigger"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Trigger>
-  )
-}
-
-function DropdownMenuIcon(props: ParentProps<DropdownMenuIconProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Icon
-      {...rest}
-      data-slot="dropdown-menu-icon"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Icon>
-  )
-}
-
-function DropdownMenuPortal(props: DropdownMenuPortalProps) {
-  return <Kobalte.Portal {...props} />
-}
-
-function DropdownMenuContent(props: ParentProps<DropdownMenuContentProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...rest}
-      data-component="dropdown-menu-content"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Content>
-  )
-}
-
-function DropdownMenuArrow(props: DropdownMenuArrowProps) {
-  const [local, rest] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.Arrow
-      {...rest}
-      data-slot="dropdown-menu-arrow"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    />
-  )
-}
-
-function DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {
-  const [local, rest] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.Separator
-      {...rest}
-      data-slot="dropdown-menu-separator"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    />
-  )
-}
-
-function DropdownMenuGroup(props: ParentProps<DropdownMenuGroupProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Group
-      {...rest}
-      data-slot="dropdown-menu-group"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Group>
-  )
-}
-
-function DropdownMenuGroupLabel(props: ParentProps<DropdownMenuGroupLabelProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.GroupLabel
-      {...rest}
-      data-slot="dropdown-menu-group-label"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.GroupLabel>
-  )
-}
-
-function DropdownMenuItem(props: ParentProps<DropdownMenuItemProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Item
-      {...rest}
-      data-slot="dropdown-menu-item"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Item>
-  )
-}
-
-function DropdownMenuItemLabel(props: ParentProps<DropdownMenuItemLabelProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.ItemLabel
-      {...rest}
-      data-slot="dropdown-menu-item-label"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.ItemLabel>
-  )
-}
-
-function DropdownMenuItemDescription(props: ParentProps<DropdownMenuItemDescriptionProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.ItemDescription
-      {...rest}
-      data-slot="dropdown-menu-item-description"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.ItemDescription>
-  )
-}
-
-function DropdownMenuItemIndicator(props: ParentProps<DropdownMenuItemIndicatorProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.ItemIndicator
-      {...rest}
-      data-slot="dropdown-menu-item-indicator"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.ItemIndicator>
-  )
-}
-
-function DropdownMenuRadioGroup(props: ParentProps<DropdownMenuRadioGroupProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.RadioGroup
-      {...rest}
-      data-slot="dropdown-menu-radio-group"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.RadioGroup>
-  )
-}
-
-function DropdownMenuRadioItem(props: ParentProps<DropdownMenuRadioItemProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.RadioItem
-      {...rest}
-      data-slot="dropdown-menu-radio-item"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.RadioItem>
-  )
-}
-
-function DropdownMenuCheckboxItem(props: ParentProps<DropdownMenuCheckboxItemProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.CheckboxItem
-      {...rest}
-      data-slot="dropdown-menu-checkbox-item"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.CheckboxItem>
-  )
-}
-
-function DropdownMenuSub(props: DropdownMenuSubProps) {
-  return <Kobalte.Sub {...props} />
-}
-
-function DropdownMenuSubTrigger(props: ParentProps<DropdownMenuSubTriggerProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.SubTrigger
-      {...rest}
-      data-slot="dropdown-menu-sub-trigger"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent(props: ParentProps<DropdownMenuSubContentProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.SubContent
-      {...rest}
-      data-component="dropdown-menu-sub-content"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.SubContent>
-  )
-}
-
-export const DropdownMenu = Object.assign(DropdownMenuRoot, {
-  Trigger: DropdownMenuTrigger,
-  Icon: DropdownMenuIcon,
-  Portal: DropdownMenuPortal,
-  Content: DropdownMenuContent,
-  Arrow: DropdownMenuArrow,
-  Separator: DropdownMenuSeparator,
-  Group: DropdownMenuGroup,
-  GroupLabel: DropdownMenuGroupLabel,
-  Item: DropdownMenuItem,
-  ItemLabel: DropdownMenuItemLabel,
-  ItemDescription: DropdownMenuItemDescription,
-  ItemIndicator: DropdownMenuItemIndicator,
-  RadioGroup: DropdownMenuRadioGroup,
-  RadioItem: DropdownMenuRadioItem,
-  CheckboxItem: DropdownMenuCheckboxItem,
-  Sub: DropdownMenuSub,
-  SubTrigger: DropdownMenuSubTrigger,
-  SubContent: DropdownMenuSubContent,
-})
diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
deleted file mode 100644
index 7a47270fe9a..00000000000
--- a/packages/ui/src/components/icon-button.css
+++ /dev/null
@@ -1,181 +0,0 @@
-[data-component="icon-button"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  user-select: none;
-  aspect-ratio: 1;
-  flex-shrink: 0;
-
-  &[data-variant="primary"] {
-    background-color: var(--icon-strong-base);
-
-    [data-slot="icon-svg"] {
-      /* color: var(--icon-weak-base); */
-      color: var(--icon-invert-base);
-
-      /* &:hover:not(:disabled) { */
-      /*   color: var(--icon-weak-hover); */
-      /* } */
-      /* &:active:not(:disabled) { */
-      /*   color: var(--icon-strong-active); */
-      /* } */
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--icon-strong-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--icon-strong-focus);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--icon-strong-active);
-    }
-    &:disabled {
-      background-color: var(--icon-strong-disabled);
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-invert-base);
-      }
-    }
-  }
-
-  &[data-variant="secondary"] {
-    border: transparent;
-    background-color: var(--button-secondary-base);
-    color: var(--text-strong);
-    box-shadow: var(--shadow-xs-border-base);
-
-    &:hover:not(:disabled) {
-      background-color: var(--button-secondary-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-    &:focus-visible:not(:active) {
-      background-color: var(--button-secondary-base);
-      box-shadow: var(--shadow-xs-border-focus);
-    }
-    &:focus-visible:active {
-      box-shadow: none;
-    }
-    &:active:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-strong-base);
-    }
-
-    &:disabled {
-      background-color: var(--icon-strong-disabled);
-      color: var(--icon-invert-base);
-      cursor: not-allowed;
-    }
-  }
-
-  &[data-variant="ghost"] {
-    background-color: transparent;
-    /* color: var(--icon-base); */
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--surface-base-hover);
-
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-hover); */
-      /* } */
-    }
-    &:focus-visible:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--surface-base-active);
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-active); */
-      /* } */
-    }
-    &:selected:not(:disabled) {
-      background-color: var(--surface-base-active);
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-selected); */
-      /* } */
-    }
-    &:disabled {
-      color: var(--icon-invert-base);
-      cursor: not-allowed;
-    }
-  }
-
-  &[data-size="normal"] {
-    width: 24px;
-    height: 24px;
-
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
-    gap: calc(var(--spacing) * 0.5);
-  }
-
-  &[data-size="small"] {
-    width: 20px;
-    height: 20px;
-  }
-
-  &[data-size="large"] {
-    height: 32px;
-    /* padding: 0 8px 0 6px; */
-    gap: 8px;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  [data-component="icon-button"][data-icon="stop"] [data-slot="icon-svg"] rect {
-    transform-origin: center;
-    transform-box: fill-box;
-    animation: stop-pulse 1.8s ease-in-out infinite;
-  }
-}
-
-@keyframes stop-pulse {
-  0%,
-  100% {
-    transform: scale(0.95);
-  }
-  50% {
-    transform: scale(1.12);
-  }
-}
-
-[data-component="icon-button"].titlebar-icon {
-  width: 32px;
-  height: 24px;
-  aspect-ratio: auto;
-}
-
-[data-component="icon-button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] {
-  background-color: var(--surface-raised-base-active);
-}
-
-[data-component="icon-button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] [data-slot="icon-svg"] {
-  color: var(--icon-strong-base);
-}
-
-[data-component="icon-button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
-  background-color: var(--surface-raised-base-active);
-}
diff --git a/packages/ui/src/components/icon-button.stories.tsx b/packages/ui/src/components/icon-button.stories.tsx
deleted file mode 100644
index 9782759f823..00000000000
--- a/packages/ui/src/components/icon-button.stories.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// @ts-nocheck
-import * as mod from "./icon-button"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Compact icon-only button with size and variant control.
-
-Use \`Button\` for text labels and primary actions.
-
-### API
-- Required: \`icon\` icon name.
-- Optional: \`size\`, \`iconSize\`, \`variant\`.
-- Inherits Kobalte Button props and native button attributes.
-
-### Variants and states
-- Variants: primary, secondary, ghost.
-- Sizes: small, normal, large.
-
-### Behavior
-- Icon size adapts to button size unless overridden.
-
-### Accessibility
-- Provide \`aria-label\` when there is no visible text.
-
-### Theming/tokens
-- Uses \`data-component="icon-button"\` and size/variant data attributes.
-
-`
-
-const story = create({ title: "UI/IconButton", mod, args: { icon: "check", "aria-label": "Icon" } })
-export default {
-  title: "UI/IconButton",
-  id: "components-icon-button",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const Sizes = {
-  render: () => (
-    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
-      <mod.IconButton icon="check" size="small" aria-label="Small" />
-      <mod.IconButton icon="check" size="normal" aria-label="Normal" />
-      <mod.IconButton icon="check" size="large" aria-label="Large" />
-    </div>
-  ),
-}
-
-export const Variants = {
-  render: () => (
-    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
-      <mod.IconButton icon="check" variant="primary" aria-label="Primary" />
-      <mod.IconButton icon="check" variant="secondary" aria-label="Secondary" />
-      <mod.IconButton icon="check" variant="ghost" aria-label="Ghost" />
-    </div>
-  ),
-}
-
-export const IconSizeOverride = {
-  render: () => (
-    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
-      <mod.IconButton icon="check" size="small" iconSize="large" aria-label="Small with large icon" />
-      <mod.IconButton icon="check" size="large" iconSize="small" aria-label="Large with small icon" />
-    </div>
-  ),
-}
diff --git a/packages/ui/src/components/icon-button.tsx b/packages/ui/src/components/icon-button.tsx
deleted file mode 100644
index 457283aa039..00000000000
--- a/packages/ui/src/components/icon-button.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button"
-import { type ComponentProps, splitProps } from "solid-js"
-import { Icon, IconProps } from "./icon"
-
-export interface IconButtonProps extends ComponentProps<typeof Kobalte> {
-  icon: IconProps["name"]
-  size?: "small" | "normal" | "large"
-  iconSize?: IconProps["size"]
-  variant?: "primary" | "secondary" | "ghost"
-}
-
-export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
-  const [split, rest] = splitProps(props, ["variant", "size", "iconSize", "class", "classList"])
-  return (
-    <Kobalte
-      {...rest}
-      data-component="icon-button"
-      data-icon={props.icon}
-      data-size={split.size || "normal"}
-      data-variant={split.variant || "secondary"}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      <Icon name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />
-    </Kobalte>
-  )
-}
diff --git a/packages/ui/src/components/icon.css b/packages/ui/src/components/icon.css
deleted file mode 100644
index e386ecf1457..00000000000
--- a/packages/ui/src/components/icon.css
+++ /dev/null
@@ -1,39 +0,0 @@
-[data-component="icon"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  /* resize: both; */
-  aspect-ratio: 1/1;
-  color: var(--icon-base);
-
-  &[data-size="small"] {
-    width: 16px;
-    height: 16px;
-  }
-
-  &[data-size="normal"] {
-    width: 20px;
-    height: 20px;
-  }
-
-  &[data-size="medium"] {
-    width: 24px;
-    height: 24px;
-  }
-
-  &[data-size="large"] {
-    width: 24px;
-    height: 24px;
-  }
-
-  [data-slot="icon-svg"] {
-    width: 100%;
-    height: auto;
-  }
-}
-
-:dir(rtl) [data-component="icon"][data-directional] [data-slot="icon-svg"],
-:dir(rtl) [data-slot="menu-v2-item-chevron"] {
-  transform: scaleX(-1);
-}
diff --git a/packages/ui/src/components/icon.stories.tsx b/packages/ui/src/components/icon.stories.tsx
deleted file mode 100644
index 6134a0b8ee6..00000000000
--- a/packages/ui/src/components/icon.stories.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-// @ts-nocheck
-import { For } from "solid-js"
-import * as mod from "./icon"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Inline icon renderer using the built-in OpenCode icon set.
-
-Use with \`Button\`, \`IconButton\`, and menu items.
-
-### API
-- Required: \`name\` (icon key).
-- Optional: \`size\` (small | normal | medium | large).
-- Accepts standard SVG props.
-
-### Variants and states
-- Size variants only.
-
-### Behavior
-- Uses an internal SVG path map.
-
-### Accessibility
-- Icons are aria-hidden by default; wrap with accessible text when needed.
-
-### Theming/tokens
-- Uses \`data-component="icon"\` with size data attributes.
-
-`
-
-const names = [
-  "align-right",
-  "arrow-up",
-  "arrow-left",
-  "arrow-right",
-  "archive",
-  "bubble-5",
-  "prompt",
-  "brain",
-  "bullet-list",
-  "check-small",
-  "chevron-down",
-  "chevron-left",
-  "chevron-right",
-  "chevron-grabber-vertical",
-  "chevron-double-right",
-  "circle-x",
-  "close",
-  "close-small",
-  "checklist",
-  "console",
-  "expand",
-  "collapse",
-  "code",
-  "code-lines",
-  "circle-ban-sign",
-  "edit-small-2",
-  "eye",
-  "enter",
-  "folder",
-  "file-tree",
-  "file-tree-active",
-  "magnifying-glass",
-  "plus-small",
-  "plus",
-  "new-session",
-  "pencil-line",
-  "mcp",
-  "glasses",
-  "magnifying-glass-menu",
-  "window-cursor",
-  "task",
-  "subagent",
-  "stop",
-  "layout-left",
-  "layout-left-partial",
-  "layout-left-full",
-  "layout-right",
-  "layout-right-partial",
-  "layout-right-full",
-  "square-arrow-top-right",
-  "open-file",
-  "speech-bubble",
-  "comment",
-  "folder-add-left",
-  "github",
-  "discord",
-  "layout-bottom",
-  "layout-bottom-partial",
-  "layout-bottom-full",
-  "dot-grid",
-  "circle-check",
-  "copy",
-  "check",
-  "photo",
-  "share",
-  "download",
-  "menu",
-  "server",
-  "branch",
-  "edit",
-  "help",
-  "settings-gear",
-  "dash",
-  "cloud-upload",
-  "trash",
-  "sliders",
-  "keyboard",
-  "selector",
-  "arrow-down-to-line",
-  "warning",
-  "link",
-  "providers",
-  "models",
-]
-
-const story = create({ title: "UI/Icon", mod, args: { name: "check" } })
-
-export default {
-  title: "UI/Icon",
-  id: "components-icon",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  argTypes: {
-    name: {
-      control: "select",
-      options: names,
-    },
-    size: {
-      control: "select",
-      options: ["small", "normal", "medium", "large"],
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const Sizes = {
-  render: () => (
-    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
-      <mod.Icon name="check" size="small" />
-      <mod.Icon name="check" size="normal" />
-      <mod.Icon name="check" size="medium" />
-      <mod.Icon name="check" size="large" />
-    </div>
-  ),
-}
-
-export const Gallery = {
-  render: () => (
-    <div
-      style={{
-        display: "grid",
-        gap: "12px",
-        "grid-template-columns": "repeat(auto-fill, minmax(88px, 1fr))",
-      }}
-    >
-      <For each={names}>
-        {(name) => (
-          <div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
-            <mod.Icon name={name} />
-            <div style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{name}</div>
-          </div>
-        )}
-      </For>
-    </div>
-  ),
-}
diff --git a/packages/ui/src/components/image-preview.stories.tsx b/packages/ui/src/components/image-preview.stories.tsx
index f0a00c78251..82231b4a103 100644
--- a/packages/ui/src/components/image-preview.stories.tsx
+++ b/packages/ui/src/components/image-preview.stories.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { onMount } from "solid-js"
 import * as mod from "./image-preview"
-import { Button } from "./button"
+import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "../context/dialog"
 
 const docs = `### Overview
@@ -51,7 +51,7 @@ export const Basic = {
     onMount(open)
 
     return (
-      <Button variant="secondary" onClick={open}>
+      <Button variant="neutral" onClick={open}>
         Open image preview
       </Button>
     )
diff --git a/packages/ui/src/components/image-preview.tsx b/packages/ui/src/components/image-preview.tsx
index 8462ce2560b..aaf016185e6 100644
--- a/packages/ui/src/components/image-preview.tsx
+++ b/packages/ui/src/components/image-preview.tsx
@@ -1,6 +1,7 @@
 import { Dialog as Kobalte } from "@kobalte/core/dialog"
 import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 
 export interface ImagePreviewProps {
   src: string
@@ -17,7 +18,7 @@ export function ImagePreview(props: ImagePreviewProps) {
             <Kobalte.CloseButton
               data-slot="image-preview-close"
               as={IconButton}
-              icon="close"
+              icon={<Icon name="close" />}
               variant="ghost"
               aria-label={i18n.t("ui.common.close")}
             />
diff --git a/packages/ui/src/components/inline-input.stories.tsx b/packages/ui/src/components/inline-input.stories.tsx
deleted file mode 100644
index e364c896315..00000000000
--- a/packages/ui/src/components/inline-input.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// @ts-nocheck
-import * as mod from "./inline-input"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Compact inline input for short values.
-
-Use inside text or table rows for quick edits.
-
-### API
-- Optional: \`width\` to set a fixed width.
-- Accepts standard input props.
-
-### Variants and states
-- No built-in variants; style via class or width.
-
-### Behavior
-- Uses inline width when provided.
-
-### Accessibility
-- Provide a label or aria-label when used standalone.
-
-### Theming/tokens
-- Uses \`data-component="inline-input"\`.
-
-`
-
-const story = create({ title: "UI/InlineInput", mod, args: { placeholder: "Type...", value: "Inline" } })
-export default {
-  title: "UI/InlineInput",
-  id: "components-inline-input",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const FixedWidth = {
-  args: {
-    value: "80px",
-    width: "80px",
-  },
-}
diff --git a/packages/ui/src/components/keybind.css b/packages/ui/src/components/keybind.css
deleted file mode 100644
index 420619ae4af..00000000000
--- a/packages/ui/src/components/keybind.css
+++ /dev/null
@@ -1,18 +0,0 @@
-[data-component="keybind"] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  height: 20px;
-  padding: 0 8px;
-  border-radius: 2px;
-  background: var(--surface-base);
-  box-shadow: var(--shadow-xxs-border);
-
-  /* text-12-regular */
-  font-family: var(--font-family-sans);
-  font-size: 12px;
-  font-weight: var(--font-weight-regular);
-  line-height: 1;
-  color: var(--text-weak);
-}
diff --git a/packages/ui/src/components/keybind.stories.tsx b/packages/ui/src/components/keybind.stories.tsx
deleted file mode 100644
index a458a53a742..00000000000
--- a/packages/ui/src/components/keybind.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// @ts-nocheck
-import * as mod from "./keybind"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Keyboard shortcut pill for displaying keybindings.
-
-Pair with menu items or command palettes.
-
-### API
-- Children render the key sequence text.
-- Accepts standard span props.
-
-### Variants and states
-- Single visual style.
-
-### Behavior
-- Presentational only.
-
-### Accessibility
-- Ensure text conveys the shortcut (e.g., "Cmd+K").
-
-### Theming/tokens
-- Uses \`data-component="keybind"\`.
-
-`
-
-const story = create({ title: "UI/Keybind", mod, args: { children: "Cmd+K" } })
-export default {
-  title: "UI/Keybind",
-  id: "components-keybind",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = story.Basic
diff --git a/packages/ui/src/components/keybind.tsx b/packages/ui/src/components/keybind.tsx
deleted file mode 100644
index 5c347cb541c..00000000000
--- a/packages/ui/src/components/keybind.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { ComponentProps, ParentProps } from "solid-js"
-
-export interface KeybindProps extends ParentProps {
-  class?: string
-  classList?: ComponentProps<"span">["classList"]
-}
-
-export function Keybind(props: KeybindProps) {
-  return (
-    <span
-      data-component="keybind"
-      classList={{
-        ...props.classList,
-        [props.class ?? ""]: !!props.class,
-      }}
-    >
-      {props.children}
-    </span>
-  )
-}
diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css
index a10df733030..fe9b404d6a9 100644
--- a/packages/ui/src/components/list.css
+++ b/packages/ui/src/components/list.css
@@ -31,7 +31,7 @@
     align-self: stretch;
     margin-bottom: 4px;
 
-    > [data-component="icon-button"] {
+    > [data-component="icon-button-v2"] {
       width: 24px;
       height: 24px;
       flex-shrink: 0;
@@ -83,7 +83,7 @@
       }
     }
 
-    > [data-component="icon-button"] {
+    > [data-component="icon-button-v2"] {
       width: 20px;
       height: 20px;
       background-color: transparent;
@@ -106,7 +106,7 @@
       }
     }
 
-    > [data-component="icon-button"] {
+    > [data-component="icon-button-v2"] {
       background-color: transparent;
 
       &:hover:not(:disabled),
@@ -252,7 +252,7 @@
             justify-content: center;
             flex-shrink: 0;
             aspect-ratio: 1/1;
-            [data-component="icon"] {
+            [data-slot="icon-svg"] {
               color: var(--icon-strong-base);
             }
           }
@@ -262,7 +262,7 @@
             justify-content: center;
             flex-shrink: 0;
             aspect-ratio: 1/1;
-            [data-component="icon"] {
+            [data-slot="icon-svg"] {
               color: var(--icon-strong-base);
             }
           }
diff --git a/packages/ui/src/components/list.tsx b/packages/ui/src/components/list.tsx
index 2863c5593b6..49951518210 100644
--- a/packages/ui/src/components/list.tsx
+++ b/packages/ui/src/components/list.tsx
@@ -3,8 +3,8 @@ import { createEffect, For, type JSX, on, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { useI18n } from "../context/i18n"
-import { Icon, type IconProps } from "./icon"
-import { IconButton } from "./icon-button"
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TextField } from "./text-field"
 
 function findByKey(container: HTMLElement, key: string) {
@@ -302,7 +302,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
             </div>
             <Show when={internalFilter()}>
               <IconButton
-                icon="circle-x"
+                icon={<Icon name="circle-x" />}
                 variant="ghost"
                 onClick={() => {
                   setInternalFilter("")
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
index be5b7851918..7084f9d736b 100644
--- a/packages/ui/src/components/popover.tsx
+++ b/packages/ui/src/components/popover.tsx
@@ -3,7 +3,8 @@ import { ComponentProps, JSXElement, ParentProps, Show, createEffect, splitProps
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 
 export interface PopoverProps<T extends ValidComponent = "div">
   extends ParentProps,
@@ -122,7 +123,7 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
           <Kobalte.CloseButton
             data-slot="popover-close-button"
             as={IconButton}
-            icon="close"
+            icon={<Icon name="close" />}
             variant="ghost"
             aria-label={i18n.t("ui.common.close")}
           />
diff --git a/packages/ui/src/components/progress-circle.css b/packages/ui/src/components/progress-circle.css
deleted file mode 100644
index 4d1e79cddc6..00000000000
--- a/packages/ui/src/components/progress-circle.css
+++ /dev/null
@@ -1,16 +0,0 @@
-[data-component="progress-circle"] {
-  transform: rotate(-90deg);
-
-  [data-slot="progress-circle-background"] {
-    stroke: var(--progress-circle-background, var(--border-weak-base));
-  }
-
-  [data-slot="progress-circle-background-overlay"] {
-    stroke: var(--progress-circle-background-overlay, transparent);
-  }
-
-  [data-slot="progress-circle-progress"] {
-    stroke: var(--progress-circle-progress, var(--border-active));
-    transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
-  }
-}
diff --git a/packages/ui/src/components/progress-circle.stories.tsx b/packages/ui/src/components/progress-circle.stories.tsx
deleted file mode 100644
index 5bc23c3108c..00000000000
--- a/packages/ui/src/components/progress-circle.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// @ts-nocheck
-import * as mod from "./progress-circle"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Circular progress indicator for compact loading states.
-
-Pair with labels for clarity in dashboards.
-
-### API
-- Required: \`percentage\` (0-100).
-- Optional: \`size\`, \`strokeWidth\`.
-
-### Variants and states
-- Single visual style; size and stroke width adjust appearance.
-
-### Behavior
-- Percentage is clamped between 0 and 100.
-
-### Accessibility
-- Use alongside text or aria-live messaging for progress context.
-
-### Theming/tokens
-- Uses \`data-component="progress-circle"\` with background/progress slots.
-
-`
-
-const story = create({ title: "UI/ProgressCircle", mod, args: { percentage: 65, size: 48 } })
-
-export default {
-  title: "UI/ProgressCircle",
-  id: "components-progress-circle",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  argTypes: {
-    percentage: {
-      control: { type: "range", min: 0, max: 100, step: 1 },
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const States = {
-  render: () => (
-    <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
-      <mod.ProgressCircle percentage={0} size={32} />
-      <mod.ProgressCircle percentage={50} size={32} />
-      <mod.ProgressCircle percentage={100} size={32} />
-    </div>
-  ),
-}
diff --git a/packages/ui/src/components/progress-circle.tsx b/packages/ui/src/components/progress-circle.tsx
deleted file mode 100644
index 7c764b5dd1c..00000000000
--- a/packages/ui/src/components/progress-circle.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { type ComponentProps, createMemo, splitProps } from "solid-js"
-
-export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
-  percentage: number
-  size?: number
-  strokeWidth?: number
-}
-
-export function ProgressCircle(props: ProgressCircleProps) {
-  const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
-
-  const size = () => split.size || 16
-  const strokeWidth = () => split.strokeWidth || 3
-
-  const viewBoxSize = 16
-  const center = viewBoxSize / 2
-  const radius = () => center - strokeWidth() / 2
-  const circumference = createMemo(() => 2 * Math.PI * radius())
-
-  const offset = createMemo(() => {
-    const clampedPercentage = Math.max(0, Math.min(100, split.percentage || 0))
-    const progress = clampedPercentage / 100
-    return circumference() * (1 - progress)
-  })
-
-  return (
-    <svg
-      {...rest}
-      width={size()}
-      height={size()}
-      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-      fill="none"
-      data-component="progress-circle"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        data-slot="progress-circle-background"
-        stroke-width={strokeWidth()}
-      />
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        data-slot="progress-circle-background-overlay"
-        stroke-width={strokeWidth()}
-      />
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        data-slot="progress-circle-progress"
-        stroke-width={strokeWidth()}
-        stroke-dasharray={circumference().toString()}
-        stroke-dashoffset={offset()}
-      />
-    </svg>
-  )
-}
diff --git a/packages/ui/src/components/radio-group.css b/packages/ui/src/components/radio-group.css
deleted file mode 100644
index e9cc7118463..00000000000
--- a/packages/ui/src/components/radio-group.css
+++ /dev/null
@@ -1,187 +0,0 @@
-[data-component="radio-group"] {
-  --radio-group-height: 28px;
-  --radio-group-gap: 4px;
-  --radio-group-padding: 2px;
-
-  display: inline-flex;
-
-  [data-slot="radio-group-wrapper"] {
-    all: unset;
-    background-color: var(--surface-inset-base);
-    border-radius: var(--radius-sm);
-    box-shadow: var(--shadow-xxs-border);
-    display: inline-flex;
-    height: var(--radio-group-height);
-    margin: 0;
-    overflow: visible;
-    padding: 0;
-    position: relative;
-    width: fit-content;
-  }
-
-  &[data-fill] [data-slot="radio-group-wrapper"] {
-    width: 100%;
-  }
-
-  [data-slot="radio-group-items"] {
-    display: inline-flex;
-    flex-direction: row;
-    gap: var(--radio-group-gap);
-    height: 100%;
-    list-style: none;
-    position: relative;
-    z-index: 1;
-  }
-
-  &[data-fill] [data-slot="radio-group-items"] {
-    width: 100%;
-  }
-
-  [data-slot="radio-group-indicator"] {
-    background: var(--button-secondary-base);
-    border-radius: var(--radius-sm);
-    box-shadow: var(--shadow-xs-border-base);
-    content: "";
-    opacity: var(--indicator-opacity, 1);
-    pointer-events: none;
-    position: absolute;
-    transition:
-      opacity 200ms ease-out,
-      box-shadow 100ms ease-in-out,
-      width 200ms cubic-bezier(0.22, 1.2, 0.36, 1),
-      height 200ms cubic-bezier(0.22, 1.2, 0.36, 1),
-      transform 300ms cubic-bezier(0.22, 1.2, 0.36, 1);
-    will-change: transform;
-    z-index: 0;
-  }
-
-  [data-slot="radio-group-item"] {
-    display: flex;
-    height: 100%;
-    min-width: 0;
-    position: relative;
-  }
-
-  &[data-fill] [data-slot="radio-group-item"] {
-    flex: 1;
-  }
-
-  [data-slot="radio-group-item-input"] {
-    border-width: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  [data-slot="radio-group-item-label"] {
-    color: var(--text-weak);
-    cursor: default;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    flex: 1;
-    height: 100%;
-    line-height: 1;
-    padding: var(--radio-group-padding);
-    position: relative;
-    transition:
-      color 200ms ease-out,
-      opacity 200ms ease-out;
-    user-select: none;
-  }
-
-  [data-slot="radio-group-item-control"] {
-    align-items: center;
-    border-radius: var(--radius-xs);
-    display: inline-flex;
-    height: 100%;
-    justify-content: center;
-    min-width: 0;
-    padding: var(--radio-group-control-padding, 0 10px);
-    transition: background-color 200ms ease-out;
-    width: 100%;
-  }
-
-  &[data-pad="none"] {
-    --radio-group-control-padding: 0;
-  }
-
-  &[data-pad="normal"] {
-    --radio-group-control-padding: 0 10px;
-  }
-
-  /* Checked state */
-  [data-slot="radio-group-item-input"][data-checked] + [data-slot="radio-group-item-label"] {
-    color: var(--text-strong);
-  }
-
-  /* Hover state: match the inset background (adds subtle density) */
-  [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
-    + [data-slot="radio-group-item-label"]:hover
-    [data-slot="radio-group-item-control"] {
-    background-color: var(--surface-inset-base);
-  }
-
-  /* Do not overlay hover on the active segment */
-  [data-slot="radio-group-item-input"][data-checked]
-    + [data-slot="radio-group-item-label"]:hover
-    [data-slot="radio-group-item-control"] {
-    background-color: transparent;
-  }
-
-  /* Disabled state */
-  [data-slot="radio-group-item-input"][data-disabled] + [data-slot="radio-group-item-label"] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  /* Focus state */
-  [data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible)
-    [data-slot="radio-group-indicator"] {
-    box-shadow: var(--shadow-xs-border-focus);
-  }
-
-  /* Hide indicator when nothing is checked */
-  [data-slot="radio-group-wrapper"]:not(:has([data-slot="radio-group-item-input"][data-checked]))
-    [data-slot="radio-group-indicator"] {
-    --indicator-opacity: 0;
-  }
-
-  /* Vertical orientation */
-  &[aria-orientation="vertical"] [data-slot="radio-group-items"] {
-    flex-direction: column;
-  }
-
-  /* Small size variant */
-  &[data-size="small"] {
-    --radio-group-height: 24px;
-    --radio-group-gap: 3px;
-    --radio-group-padding: 2px;
-
-    [data-slot="radio-group-item-label"] {
-      font-size: 12px;
-    }
-
-    [data-slot="radio-group-item-control"] {
-      padding: var(--radio-group-control-padding, 0 8px);
-    }
-  }
-
-  &[data-size="small"][data-pad="normal"] {
-    --radio-group-control-padding: 0 8px;
-  }
-
-  /* Disabled root state */
-  &[data-disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
diff --git a/packages/ui/src/components/radio-group.stories.tsx b/packages/ui/src/components/radio-group.stories.tsx
deleted file mode 100644
index 4900ead8467..00000000000
--- a/packages/ui/src/components/radio-group.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// @ts-nocheck
-import * as mod from "./radio-group"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Segmented radio group for choosing a single option.
-
-Use for view toggles or mode selection.
-
-### API
-- Required: \`options\`.
-- Optional: \`current\`, \`defaultValue\`, \`value\`, \`label\`, \`onSelect\`.
-- Optional layout: \`size\`, \`fill\`, \`pad\`.
-
-### Variants and states
-- Size variants: small, medium.
-- Optional fill and padding behavior.
-
-### Behavior
-- Maps options to segmented items and manages selection.
-
-### Accessibility
-- TODO: confirm role/aria attributes from Kobalte SegmentedControl.
-
-### Theming/tokens
-- Uses \`data-component="radio-group"\` with size/pad data attributes.
-
-`
-
-const story = create({
-  title: "UI/RadioGroup",
-  mod,
-  args: {
-    options: ["One", "Two", "Three"],
-    defaultValue: "One",
-  },
-})
-
-export default {
-  title: "UI/RadioGroup",
-  id: "components-radio-group",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["small", "medium"],
-    },
-    pad: {
-      control: "select",
-      options: ["none", "normal"],
-    },
-    fill: {
-      control: "boolean",
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const Sizes = {
-  render: () => (
-    <div style={{ display: "grid", gap: "12px" }}>
-      <mod.RadioGroup options={["One", "Two"]} defaultValue="One" size="small" />
-      <mod.RadioGroup options={["One", "Two"]} defaultValue="One" size="medium" />
-    </div>
-  ),
-}
-
-export const Filled = {
-  args: {
-    fill: true,
-    pad: "none",
-  },
-}
-
-export const CustomLabels = {
-  render: () => (
-    <mod.RadioGroup
-      options={["list", "grid"]}
-      defaultValue="list"
-      label={(value) => (value === "list" ? "List view" : "Grid view")}
-    />
-  ),
-}
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
deleted file mode 100644
index 9151a24b0f9..00000000000
--- a/packages/ui/src/components/radio-group.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { SegmentedControl as Kobalte } from "@kobalte/core/segmented-control"
-import { For, splitProps } from "solid-js"
-import type { ComponentProps, JSX } from "solid-js"
-
-export type RadioGroupProps<T> = Omit<
-  ComponentProps<typeof Kobalte>,
-  "value" | "defaultValue" | "onChange" | "children"
-> & {
-  options: T[]
-  current?: T
-  defaultValue?: T
-  value?: (x: T) => string
-  label?: (x: T) => JSX.Element | string
-  onSelect?: (value: T | undefined) => void
-  class?: ComponentProps<"div">["class"]
-  classList?: ComponentProps<"div">["classList"]
-  size?: "small" | "medium"
-  fill?: boolean
-  pad?: "none" | "normal"
-}
-
-export function RadioGroup<T>(props: RadioGroupProps<T>) {
-  const [local, others] = splitProps(props, [
-    "class",
-    "classList",
-    "options",
-    "current",
-    "defaultValue",
-    "value",
-    "label",
-    "onSelect",
-    "size",
-    "fill",
-    "pad",
-  ])
-
-  const getValue = (item: T): string => {
-    if (local.value) return local.value(item)
-    return String(item)
-  }
-
-  const getLabel = (item: T): JSX.Element | string => {
-    if (local.label) return local.label(item)
-    return String(item)
-  }
-
-  const findOption = (v: string): T | undefined => {
-    return local.options.find((opt) => getValue(opt) === v)
-  }
-
-  return (
-    <Kobalte
-      {...others}
-      data-component="radio-group"
-      data-size={local.size ?? "medium"}
-      data-fill={local.fill ? "" : undefined}
-      data-pad={local.pad ?? "normal"}
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-      value={local.current ? getValue(local.current) : undefined}
-      defaultValue={local.defaultValue ? getValue(local.defaultValue) : undefined}
-      onChange={(v) => local.onSelect?.(findOption(v))}
-    >
-      <div role="presentation" data-slot="radio-group-wrapper">
-        <Kobalte.Indicator data-slot="radio-group-indicator" />
-        <div role="presentation" data-slot="radio-group-items">
-          <For each={local.options}>
-            {(option) => (
-              <Kobalte.Item value={getValue(option)} data-slot="radio-group-item" data-value={getValue(option)}>
-                <Kobalte.ItemInput data-slot="radio-group-item-input" />
-                <Kobalte.ItemLabel data-slot="radio-group-item-label">
-                  <span data-slot="radio-group-item-control">{getLabel(option)}</span>
-                </Kobalte.ItemLabel>
-              </Kobalte.Item>
-            )}
-          </For>
-        </div>
-      </div>
-    </Kobalte>
-  )
-}
diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css
deleted file mode 100644
index f78fe296f66..00000000000
--- a/packages/ui/src/components/select.css
+++ /dev/null
@@ -1,201 +0,0 @@
-[data-component="select"] {
-  [data-slot="select-select-trigger"] {
-    padding-block: 0;
-    padding-inline: 8px 4px;
-    box-shadow: none;
-
-    [data-slot="select-select-trigger-value"] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    [data-slot="select-select-trigger-icon"] {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      color: var(--text-weak);
-      transition: transform 0.1s ease-in-out;
-    }
-
-    &[data-expanded] {
-      &[data-variant="secondary"] {
-        background-color: var(--button-secondary-hover);
-      }
-      &[data-variant="ghost"] {
-        background-color: var(--surface-raised-base-active);
-      }
-      &[data-variant="primary"] {
-        background-color: var(--icon-strong-active);
-      }
-    }
-
-    &:not([data-expanded]):focus-visible {
-      &[data-variant="secondary"] {
-        background-color: var(--button-secondary-base);
-      }
-      &[data-variant="ghost"] {
-        background-color: var(--surface-raised-base-hover);
-      }
-      &[data-variant="primary"] {
-        background-color: var(--icon-strong-base);
-      }
-    }
-  }
-
-  &[data-trigger-style="settings"] {
-    [data-slot="select-select-trigger"] {
-      padding-block: 6px;
-      padding-inline: 12px 6px;
-      box-shadow: none;
-      border-radius: 6px;
-      min-width: 160px;
-      height: 32px;
-      justify-content: flex-end;
-      gap: 12px;
-      background-color: transparent;
-
-      [data-slot="select-select-trigger-value"] {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: var(--font-size-base);
-        font-weight: var(--font-weight-regular);
-      }
-      [data-slot="select-select-trigger-icon"] {
-        width: 16px;
-        height: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        color: var(--text-weak);
-        background-color: var(--surface-raised-base);
-        border-radius: 4px;
-        transition: transform 0.1s ease-in-out;
-      }
-
-      &[data-slot="select-select-trigger"]:hover:not(:disabled),
-      &[data-slot="select-select-trigger"][data-expanded],
-      &[data-slot="select-select-trigger"][data-expanded]:hover:not(:disabled) {
-        background-color: var(--input-base);
-        box-shadow: var(--shadow-xs-border-base);
-      }
-
-      &:not([data-expanded]):not(:focus-visible):focus {
-        background-color: transparent;
-        box-shadow: none;
-      }
-    }
-  }
-}
-
-[data-component="select-content"] {
-  min-width: 104px;
-  max-width: 23rem;
-  overflow: hidden;
-  border-radius: var(--radius-md);
-  background-color: var(--surface-raised-stronger-non-alpha);
-  padding: 4px;
-  box-shadow: var(--shadow-xs-border);
-  z-index: 60;
-
-  &[data-expanded] {
-    animation: select-open 0.15s ease-out;
-  }
-
-  [data-slot="select-select-content-list"] {
-    overflow-y: auto;
-    max-height: 12rem;
-    white-space: nowrap;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-
-    &:focus {
-      outline: none;
-    }
-
-    > *:not([role="presentation"]) + *:not([role="presentation"]) {
-      margin-top: 2px;
-    }
-  }
-
-  [data-slot="select-select-item"] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 2px 8px;
-    gap: 12px;
-    border-radius: 4px;
-    cursor: default;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-
-    color: var(--text-strong);
-
-    outline: none;
-    user-select: none;
-
-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
-    }
-    &[data-disabled] {
-      background-color: var(--surface-raised-base);
-      pointer-events: none;
-    }
-    [data-slot="select-select-item-indicator"] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-inline-start: auto;
-      width: 16px;
-      height: 16px;
-    }
-    &:focus {
-      outline: none;
-    }
-    &:hover {
-      background: var(--surface-raised-base-hover);
-    }
-  }
-}
-
-[data-component="select-content"][data-trigger-style="settings"] {
-  min-width: 160px;
-  border-radius: 8px;
-  padding: 0;
-
-  [data-slot="select-select-content-list"] {
-    padding: 4px;
-  }
-
-  [data-slot="select-select-item"] {
-    /* text-14-regular */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-}
-
-@keyframes select-open {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
diff --git a/packages/ui/src/components/select.stories.tsx b/packages/ui/src/components/select.stories.tsx
deleted file mode 100644
index 1ee00ab851e..00000000000
--- a/packages/ui/src/components/select.stories.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-// @ts-nocheck
-import * as mod from "./select"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Select menu for choosing a single option with optional grouping.
-
-Use \`children\` to customize option rendering.
-
-### API
-- Required: \`options\`.
-- Optional: \`current\`, \`placeholder\`, \`value\`, \`label\`, \`groupBy\`.
-- Accepts Button props for the trigger (\`variant\`, \`size\`).
-
-### Variants and states
-- Trigger supports "settings" style via \`triggerVariant\`.
-
-### Behavior
-- Uses Kobalte Select with optional item highlight callbacks.
-
-### Accessibility
-- TODO: confirm keyboard navigation and aria attributes from Kobalte.
-
-### Theming/tokens
-- Uses \`data-component="select"\` with slot attributes.
-
-`
-
-const story = create({
-  title: "UI/Select",
-  mod,
-  args: {
-    options: ["One", "Two", "Three"],
-    current: "One",
-    placeholder: "Choose...",
-    variant: "secondary",
-    size: "normal",
-  },
-})
-
-export default {
-  title: "UI/Select",
-  id: "components-select",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  argTypes: {
-    triggerVariant: {
-      control: "select",
-      options: ["settings", undefined],
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const Grouped = {
-  render: () => {
-    const options = [
-      { id: "alpha", label: "Alpha", group: "Group A" },
-      { id: "bravo", label: "Bravo", group: "Group A" },
-      { id: "delta", label: "Delta", group: "Group B" },
-    ]
-    return (
-      <mod.Select
-        options={options}
-        current={options[0]}
-        value={(item) => item.id}
-        label={(item) => item.label}
-        groupBy={(item) => item.group}
-        placeholder="Choose..."
-        variant="secondary"
-      />
-    )
-  },
-}
-
-export const SettingsTrigger = {
-  args: {
-    triggerVariant: "settings",
-  },
-}
-
-export const CustomRender = {
-  render: () => (
-    <mod.Select
-      options={["Primary", "Secondary", "Ghost"]}
-      current="Primary"
-      placeholder="Choose..."
-      variant="secondary"
-    >
-      {(item) => <span style={{ "text-transform": "uppercase" }}>{item}</span>}
-    </mod.Select>
-  ),
-}
-
-export const CustomTriggerStyle = {
-  args: {
-    triggerStyle: { "min-width": "180px", "justify-content": "space-between" },
-  },
-}
-
-export const Disabled = {
-  args: {
-    disabled: true,
-  },
-}
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
deleted file mode 100644
index 67becf2d9c4..00000000000
--- a/packages/ui/src/components/select.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { Select as Kobalte } from "@kobalte/core/select"
-import { createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
-import { pipe, groupBy, entries, map } from "remeda"
-import { Button, ButtonProps } from "./button"
-import { Icon } from "./icon"
-
-export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "onSelect" | "children"> & {
-  placeholder?: string
-  options: T[]
-  current?: T
-  value?: (x: T) => string
-  label?: (x: T) => string
-  groupBy?: (x: T) => string
-  valueClass?: ComponentProps<"div">["class"]
-  onSelect?: (value: T | undefined) => void
-  onHighlight?: (value: T | undefined) => (() => void) | void
-  class?: ComponentProps<"div">["class"]
-  classList?: ComponentProps<"div">["classList"]
-  children?: (item: T | undefined) => JSX.Element
-  triggerStyle?: JSX.CSSProperties
-  triggerVariant?: "settings"
-  triggerProps?: Record<string, string | number | boolean | undefined>
-}
-
-export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">) {
-  const [local, others] = splitProps(props, [
-    "class",
-    "classList",
-    "placeholder",
-    "options",
-    "current",
-    "value",
-    "label",
-    "groupBy",
-    "valueClass",
-    "onSelect",
-    "onHighlight",
-    "onOpenChange",
-    "children",
-    "triggerStyle",
-    "triggerVariant",
-    "triggerProps",
-  ])
-
-  const state = {
-    key: undefined as string | undefined,
-    cleanup: undefined as (() => void) | void,
-  }
-
-  const stop = () => {
-    state.cleanup?.()
-    state.cleanup = undefined
-    state.key = undefined
-  }
-
-  const keyFor = (item: T) => (local.value ? local.value(item) : (item as string))
-
-  const move = (item: T | undefined) => {
-    if (!local.onHighlight) return
-    if (!item) {
-      stop()
-      return
-    }
-
-    const key = keyFor(item)
-    if (state.key === key) return
-    state.cleanup?.()
-    state.cleanup = local.onHighlight(item)
-    state.key = key
-  }
-
-  onCleanup(stop)
-
-  const grouped = createMemo(() => {
-    const result = pipe(
-      local.options,
-      groupBy((x) => (local.groupBy ? local.groupBy(x) : "")),
-      // mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))),
-      entries(),
-      map(([k, v]) => ({ category: k, options: v })),
-    )
-    return result
-  })
-
-  return (
-    // @ts-ignore
-    <Kobalte<T, { category: string; options: T[] }>
-      {...others}
-      data-component="select"
-      data-trigger-style={local.triggerVariant}
-      placement={local.triggerVariant === "settings" ? "bottom-end" : "bottom-start"}
-      gutter={4}
-      value={local.current}
-      options={grouped()}
-      optionValue={(x) => (local.value ? local.value(x) : (x as string))}
-      optionTextValue={(x) => (local.label ? local.label(x) : (x as string))}
-      optionGroupChildren="options"
-      placeholder={local.placeholder}
-      sectionComponent={(local) => (
-        <Kobalte.Section data-slot="select-section">{local.section.rawValue.category}</Kobalte.Section>
-      )}
-      itemComponent={(itemProps) => (
-        <Kobalte.Item
-          {...itemProps}
-          data-slot="select-select-item"
-          classList={{
-            ...local.classList,
-            [local.class ?? ""]: !!local.class,
-          }}
-          onPointerEnter={() => move(itemProps.item.rawValue)}
-          onPointerMove={() => move(itemProps.item.rawValue)}
-          onFocus={() => move(itemProps.item.rawValue)}
-        >
-          <Kobalte.ItemLabel data-slot="select-select-item-label">
-            {local.children
-              ? local.children(itemProps.item.rawValue)
-              : local.label
-                ? local.label(itemProps.item.rawValue)
-                : (itemProps.item.rawValue as string)}
-          </Kobalte.ItemLabel>
-          <Kobalte.ItemIndicator data-slot="select-select-item-indicator">
-            <Icon name="check-small" size="small" />
-          </Kobalte.ItemIndicator>
-        </Kobalte.Item>
-      )}
-      onChange={(v) => {
-        local.onSelect?.(v ?? undefined)
-        stop()
-      }}
-      onOpenChange={(open) => {
-        local.onOpenChange?.(open)
-        if (!open) stop()
-      }}
-    >
-      <Kobalte.Trigger
-        {...local.triggerProps}
-        disabled={props.disabled}
-        data-slot="select-select-trigger"
-        as={Button}
-        size={props.size}
-        variant={props.variant}
-        style={local.triggerStyle}
-        classList={{
-          ...local.classList,
-          [local.class ?? ""]: !!local.class,
-        }}
-      >
-        <Kobalte.Value<T> data-slot="select-select-trigger-value" class={local.valueClass}>
-          {(state) => {
-            const selected = state.selectedOption() ?? local.current
-            if (!selected) return local.placeholder || ""
-            if (local.label) return local.label(selected)
-            return selected as string
-          }}
-        </Kobalte.Value>
-        <Kobalte.Icon data-slot="select-select-trigger-icon">
-          <Icon name={local.triggerVariant === "settings" ? "selector" : "chevron-down"} size="small" />
-        </Kobalte.Icon>
-      </Kobalte.Trigger>
-      <Kobalte.Portal>
-        <Kobalte.Content
-          classList={{
-            ...local.classList,
-            [local.class ?? ""]: !!local.class,
-          }}
-          data-component="select-content"
-          data-trigger-style={local.triggerVariant}
-        >
-          <Kobalte.Listbox data-slot="select-select-content-list" />
-        </Kobalte.Content>
-      </Kobalte.Portal>
-    </Kobalte>
-  )
-}
diff --git a/packages/ui/src/components/sticky-accordion-header.stories.tsx b/packages/ui/src/components/sticky-accordion-header.stories.tsx
index 3f033562677..9aff390ca17 100644
--- a/packages/ui/src/components/sticky-accordion-header.stories.tsx
+++ b/packages/ui/src/components/sticky-accordion-header.stories.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Accordion } from "./accordion"
+import { Accordion } from "@opencode-ai/ui/accordion"
 import * as mod from "./sticky-accordion-header"
 
 const docs = `### Overview
diff --git a/packages/ui/src/components/sticky-accordion-header.tsx b/packages/ui/src/components/sticky-accordion-header.tsx
index b877aa16e7b..974b3b690c8 100644
--- a/packages/ui/src/components/sticky-accordion-header.tsx
+++ b/packages/ui/src/components/sticky-accordion-header.tsx
@@ -1,4 +1,4 @@
-import { Accordion } from "./accordion"
+import { Accordion } from "@opencode-ai/ui/accordion"
 import { ParentProps } from "solid-js"
 
 export function StickyAccordionHeader(
diff --git a/packages/ui/src/components/switch.css b/packages/ui/src/components/switch.css
deleted file mode 100644
index 86fc1432894..00000000000
--- a/packages/ui/src/components/switch.css
+++ /dev/null
@@ -1,136 +0,0 @@
-[data-component="switch"] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: default;
-
-  [data-slot="switch-input"] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  [data-slot="switch-control"] {
-    display: inline-flex;
-    align-items: center;
-    width: 28px;
-    height: 16px;
-    flex-shrink: 0;
-    border-radius: 3px;
-    border: 1px solid var(--border-weak-base);
-    background: var(--surface-base);
-    transition:
-      background-color 150ms,
-      border-color 150ms;
-  }
-
-  [data-slot="switch-thumb"] {
-    width: 14px;
-    height: 14px;
-    box-sizing: content-box;
-
-    border-radius: 2px;
-    border: 1px solid var(--border-base);
-    background: var(--icon-invert-base);
-
-    /* shadows/shadow-xs */
-    box-shadow:
-      0 1px 2px -1px rgba(19, 16, 16, 0.04),
-      0 1px 2px 0 rgba(19, 16, 16, 0.06),
-      0 1px 3px 0 rgba(19, 16, 16, 0.08);
-
-    transform: translateX(-1px);
-    transition:
-      transform 150ms,
-      background-color 150ms;
-  }
-
-  [data-slot="switch-label"] {
-    user-select: none;
-    color: var(--text-base);
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-description"] {
-    color: var(--text-base);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-error"] {
-    color: var(--text-error);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background-color: var(--surface-hover);
-  }
-
-  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
-    border-color: var(--border-focus);
-    box-shadow: var(--shadow-xs-border-focus);
-  }
-
-  &[data-checked] [data-slot="switch-control"] {
-    box-sizing: border-box;
-    border-color: var(--icon-strong-base);
-    background-color: var(--icon-strong-base);
-  }
-
-  &[data-checked] [data-slot="switch-thumb"] {
-    border: none;
-    transform: translateX(12px);
-    background-color: var(--icon-invert-base);
-  }
-
-  &:dir(rtl)[data-checked] [data-slot="switch-thumb"] {
-    transform: translateX(-12px);
-  }
-
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background-color: var(--surface-hover);
-  }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-  }
-
-  &[data-disabled] [data-slot="switch-control"] {
-    border-color: var(--border-disabled);
-    background-color: var(--surface-disabled);
-  }
-
-  &[data-disabled] [data-slot="switch-thumb"] {
-    background-color: var(--icon-disabled);
-  }
-
-  &[data-invalid] [data-slot="switch-control"] {
-    border-color: var(--border-error);
-  }
-
-  &[data-readonly] {
-    cursor: default;
-    pointer-events: none;
-  }
-}
diff --git a/packages/ui/src/components/switch.stories.tsx b/packages/ui/src/components/switch.stories.tsx
deleted file mode 100644
index 540e91e3654..00000000000
--- a/packages/ui/src/components/switch.stories.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-// @ts-nocheck
-import * as mod from "./switch"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Toggle control for binary settings.
-
-Use in settings panels or forms.
-
-### API
-- Uses Kobalte Switch props (\`checked\`, \`defaultChecked\`, \`onChange\`).
-- Optional: \`hideLabel\`, \`description\`.
-- Children render as the label.
-
-### Variants and states
-- Checked/unchecked, disabled states.
-
-### Behavior
-- Controlled or uncontrolled usage via Kobalte props.
-
-### Accessibility
-- TODO: confirm aria attributes from Kobalte.
-
-### Theming/tokens
-- Uses \`data-component="switch"\` and slot attributes.
-
-`
-
-const story = create({
-  title: "UI/Switch",
-  mod,
-  args: { defaultChecked: true, children: "Enable notifications" },
-})
-
-export default {
-  title: "UI/Switch",
-  id: "components-switch",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const States = {
-  render: () => (
-    <div style={{ display: "grid", gap: "12px" }}>
-      <mod.Switch defaultChecked>Enabled</mod.Switch>
-      <mod.Switch>Disabled</mod.Switch>
-      <mod.Switch disabled>Disabled switch</mod.Switch>
-      <mod.Switch description="Optional description">With description</mod.Switch>
-    </div>
-  ),
-}
-
-export const HiddenLabel = {
-  args: {
-    children: "Hidden label",
-    hideLabel: true,
-    defaultChecked: true,
-  },
-}
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
deleted file mode 100644
index f4f95baf57d..00000000000
--- a/packages/ui/src/components/switch.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Switch as Kobalte } from "@kobalte/core/switch"
-import { Show, splitProps } from "solid-js"
-import type { ComponentProps, ParentProps } from "solid-js"
-
-export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
-  hideLabel?: boolean
-  description?: string
-}
-
-export function Switch(props: SwitchProps) {
-  const [local, others] = splitProps(props, ["children", "class", "hideLabel", "description"])
-  return (
-    <Kobalte {...others} class={local.class} data-component="switch">
-      <Kobalte.Input data-slot="switch-input" />
-      <Show when={local.children}>
-        <Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
-          {local.children}
-        </Kobalte.Label>
-      </Show>
-      <Show when={local.description}>
-        <Kobalte.Description data-slot="switch-description">{local.description}</Kobalte.Description>
-      </Show>
-      <Kobalte.ErrorMessage data-slot="switch-error" />
-      <Kobalte.Control data-slot="switch-control">
-        <Kobalte.Thumb data-slot="switch-thumb" />
-      </Kobalte.Control>
-    </Kobalte>
-  )
-}
diff --git a/packages/ui/src/components/tabs.stories.tsx b/packages/ui/src/components/tabs.stories.tsx
deleted file mode 100644
index 8e09764dcc6..00000000000
--- a/packages/ui/src/components/tabs.stories.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-// @ts-nocheck
-import { IconButton } from "./icon-button"
-import { createSignal } from "solid-js"
-import * as mod from "./tabs"
-
-const docs = `### Overview
-Tabbed navigation for switching between related panels.
-
-Compose \`Tabs.List\` + \`Tabs.Trigger\` + \`Tabs.Content\`.
-
-### API
-- Root accepts Kobalte Tabs props (\`value\`, \`defaultValue\`, \`onChange\`).
-- \`variant\` sets visual style: normal, alt, pill, settings.
-- \`orientation\` supports horizontal or vertical layouts.
-- Trigger supports \`closeButton\`, \`hideCloseButton\`, and \`onMiddleClick\`.
-
-### Variants and states
-- Normal, alt, pill, settings variants.
-- Horizontal and vertical orientations.
-
-### Behavior
-- Uses Kobalte Tabs for roving focus and selection management.
-
-### Accessibility
-- TODO: confirm keyboard interactions from Kobalte Tabs.
-
-### Theming/tokens
-- Uses \`data-component="tabs"\` with variant/orientation data attributes.
-
-`
-
-export default {
-  title: "UI/Tabs",
-  id: "components-tabs",
-  component: mod.Tabs,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["normal", "alt", "pill", "settings"],
-    },
-    orientation: {
-      control: "select",
-      options: ["horizontal", "vertical"],
-    },
-  },
-}
-
-export const Basic = {
-  args: {
-    variant: "normal",
-    orientation: "horizontal",
-    defaultValue: "overview",
-  },
-  render: (props) => (
-    <mod.Tabs {...props}>
-      <mod.Tabs.List>
-        <mod.Tabs.Trigger value="overview">Overview</mod.Tabs.Trigger>
-        <mod.Tabs.Trigger value="details">Details</mod.Tabs.Trigger>
-        <mod.Tabs.Trigger value="activity">Activity</mod.Tabs.Trigger>
-      </mod.Tabs.List>
-      <mod.Tabs.Content value="overview">Overview content</mod.Tabs.Content>
-      <mod.Tabs.Content value="details">Details content</mod.Tabs.Content>
-      <mod.Tabs.Content value="activity">Activity content</mod.Tabs.Content>
-    </mod.Tabs>
-  ),
-}
-
-export const Settings = {
-  args: {
-    variant: "settings",
-    orientation: "horizontal",
-    defaultValue: "general",
-  },
-  render: (props) => (
-    <mod.Tabs {...props}>
-      <mod.Tabs.List>
-        <mod.Tabs.Trigger value="general">General</mod.Tabs.Trigger>
-        <mod.Tabs.Trigger value="appearance">Appearance</mod.Tabs.Trigger>
-      </mod.Tabs.List>
-      <mod.Tabs.Content value="general">General settings</mod.Tabs.Content>
-      <mod.Tabs.Content value="appearance">Appearance settings</mod.Tabs.Content>
-    </mod.Tabs>
-  ),
-}
-
-export const Alt = {
-  args: {
-    variant: "alt",
-    orientation: "horizontal",
-    defaultValue: "first",
-  },
-  render: (props) => (
-    <mod.Tabs {...props}>
-      <mod.Tabs.List>
-        <mod.Tabs.Trigger value="first">First</mod.Tabs.Trigger>
-        <mod.Tabs.Trigger value="second">Second</mod.Tabs.Trigger>
-      </mod.Tabs.List>
-      <mod.Tabs.Content value="first">Alt content</mod.Tabs.Content>
-      <mod.Tabs.Content value="second">Alt content 2</mod.Tabs.Content>
-    </mod.Tabs>
-  ),
-}
-
-export const Vertical = {
-  args: {
-    variant: "pill",
-    orientation: "vertical",
-    defaultValue: "alpha",
-  },
-  render: (props) => (
-    <mod.Tabs {...props}>
-      <mod.Tabs.List>
-        <mod.Tabs.Trigger value="alpha">Alpha</mod.Tabs.Trigger>
-        <mod.Tabs.Trigger value="beta">Beta</mod.Tabs.Trigger>
-      </mod.Tabs.List>
-      <mod.Tabs.Content value="alpha">Alpha content</mod.Tabs.Content>
-      <mod.Tabs.Content value="beta">Beta content</mod.Tabs.Content>
-    </mod.Tabs>
-  ),
-}
-
-export const Closable = {
-  args: {
-    variant: "normal",
-    orientation: "horizontal",
-    defaultValue: "tab-1",
-  },
-  render: (props) => (
-    <mod.Tabs {...props}>
-      <mod.Tabs.List>
-        <mod.Tabs.Trigger
-          value="tab-1"
-          closeButton={<IconButton icon="close" size="small" variant="ghost" aria-label="Close tab" />}
-        >
-          Tab 1
-        </mod.Tabs.Trigger>
-        <mod.Tabs.Trigger value="tab-2">Tab 2</mod.Tabs.Trigger>
-      </mod.Tabs.List>
-      <mod.Tabs.Content value="tab-1">Closable content</mod.Tabs.Content>
-      <mod.Tabs.Content value="tab-2">Standard content</mod.Tabs.Content>
-    </mod.Tabs>
-  ),
-}
-
-export const MiddleClick = {
-  args: {
-    variant: "normal",
-    orientation: "horizontal",
-    defaultValue: "tab-1",
-  },
-  render: (props) => {
-    const [message, setMessage] = createSignal("Middle click a tab")
-    return (
-      <div style={{ display: "grid", gap: "8px" }}>
-        <div style={{ "font-size": "12px", color: "var(--text-weak)" }}>{message()}</div>
-        <mod.Tabs {...props}>
-          <mod.Tabs.List>
-            <mod.Tabs.Trigger value="tab-1" onMiddleClick={() => setMessage("Middle clicked tab-1")}>
-              Tab 1
-            </mod.Tabs.Trigger>
-            <mod.Tabs.Trigger value="tab-2" onMiddleClick={() => setMessage("Middle clicked tab-2")}>
-              Tab 2
-            </mod.Tabs.Trigger>
-          </mod.Tabs.List>
-          <mod.Tabs.Content value="tab-1">Tab 1 content</mod.Tabs.Content>
-          <mod.Tabs.Content value="tab-2">Tab 2 content</mod.Tabs.Content>
-        </mod.Tabs>
-      </div>
-    )
-  },
-}
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
deleted file mode 100644
index 0dd5fb3e236..00000000000
--- a/packages/ui/src/components/tabs.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Tabs as Kobalte } from "@kobalte/core/tabs"
-import { Show, splitProps, type JSX } from "solid-js"
-import type { ComponentProps, ParentProps, Component } from "solid-js"
-
-export interface TabsProps extends ComponentProps<typeof Kobalte> {
-  variant?: "normal" | "alt" | "pill" | "settings"
-  orientation?: "horizontal" | "vertical"
-}
-export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
-export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-  classes?: {
-    button?: string
-  }
-  hideCloseButton?: boolean
-  closeButton?: JSX.Element
-  onMiddleClick?: () => void
-}
-export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {}
-
-function TabsRoot(props: TabsProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
-  return (
-    <Kobalte
-      {...rest}
-      orientation={split.orientation}
-      data-component="tabs"
-      data-variant={split.variant || "normal"}
-      data-orientation={split.orientation || "horizontal"}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsList(props: TabsListProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.List
-      {...rest}
-      data-slot="tabs-list"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
-  const [split, rest] = splitProps(props, [
-    "class",
-    "classList",
-    "classes",
-    "children",
-    "closeButton",
-    "hideCloseButton",
-    "onMiddleClick",
-  ])
-  return (
-    <div
-      data-slot="tabs-trigger-wrapper"
-      data-value={props.value}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-      onMouseDown={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-        }
-      }}
-      onAuxClick={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-          split.onMiddleClick()
-        }
-      }}
-    >
-      <Kobalte.Trigger
-        {...rest}
-        dir={rest.dir ?? "auto"}
-        data-slot="tabs-trigger"
-        data-value={props.value}
-        classList={{ [split.classes?.button ?? ""]: split.classes?.button }}
-      >
-        {split.children}
-      </Kobalte.Trigger>
-      <Show when={split.closeButton}>
-        {(closeButton) => (
-          <div data-slot="tabs-trigger-close-button" data-hidden={split.hideCloseButton}>
-            {closeButton()}
-          </div>
-        )}
-      </Show>
-    </div>
-  )
-}
-
-function TabsContent(props: ParentProps<TabsContentProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...rest}
-      data-slot="tabs-content"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {split.children}
-    </Kobalte.Content>
-  )
-}
-
-const TabsSectionTitle: Component<ParentProps> = (props) => {
-  return <div data-slot="tabs-section-title">{props.children}</div>
-}
-
-export const Tabs = Object.assign(TabsRoot, {
-  List: TabsList,
-  Trigger: TabsTrigger,
-  Content: TabsContent,
-  SectionTitle: TabsSectionTitle,
-})
diff --git a/packages/ui/src/components/tag.css b/packages/ui/src/components/tag.css
deleted file mode 100644
index 0e8b7b9f104..00000000000
--- a/packages/ui/src/components/tag.css
+++ /dev/null
@@ -1,37 +0,0 @@
-[data-component="tag"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-
-  border-radius: var(--radius-xs);
-  border: 0.5px solid var(--border-weak-base);
-  background: var(--surface-raised-base);
-  color: var(--text-base);
-
-  &[data-size="normal"] {
-    height: 18px;
-    padding: 0 6px;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &[data-size="large"] {
-    height: 22px;
-    padding: 0 8px;
-
-    /* text-14-medium */
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 142.857% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-}
diff --git a/packages/ui/src/components/tag.stories.tsx b/packages/ui/src/components/tag.stories.tsx
deleted file mode 100644
index 73ae880ba1c..00000000000
--- a/packages/ui/src/components/tag.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// @ts-nocheck
-import * as mod from "./tag"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Small label tag for metadata and status chips.
-
-Use alongside headings or lists for quick metadata.
-
-### API
-- Optional: \`size\` (normal | large).
-- Accepts standard span props.
-
-### Variants and states
-- Size variants only.
-
-### Behavior
-- Inline element; size controls padding and font size via CSS.
-
-### Accessibility
-- Ensure text conveys meaning; avoid color-only distinction.
-
-### Theming/tokens
-- Uses \`data-component="tag"\` with size data attributes.
-
-`
-
-const story = create({ title: "UI/Tag", mod, args: { children: "Tag" } })
-export default {
-  title: "UI/Tag",
-  id: "components-tag",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["normal", "large"],
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const Sizes = {
-  render: () => (
-    <div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
-      <mod.Tag size="normal">Normal</mod.Tag>
-      <mod.Tag size="large">Large</mod.Tag>
-    </div>
-  ),
-}
diff --git a/packages/ui/src/components/tag.tsx b/packages/ui/src/components/tag.tsx
deleted file mode 100644
index c54e4d47479..00000000000
--- a/packages/ui/src/components/tag.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { type ComponentProps, splitProps } from "solid-js"
-
-export interface TagProps extends ComponentProps<"span"> {
-  size?: "normal" | "large"
-}
-
-export function Tag(props: TagProps) {
-  const [split, rest] = splitProps(props, ["size", "class", "classList", "children"])
-  return (
-    <span
-      {...rest}
-      data-component="tag"
-      data-size={split.size || "normal"}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {split.children}
-    </span>
-  )
-}
diff --git a/packages/ui/src/components/text-field.tsx b/packages/ui/src/components/text-field.tsx
index 82be20f9ea1..778fbe761ae 100644
--- a/packages/ui/src/components/text-field.tsx
+++ b/packages/ui/src/components/text-field.tsx
@@ -2,8 +2,9 @@ import { TextField as Kobalte } from "@kobalte/core/text-field"
 import { createSignal, Show, splitProps } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
-import { Tooltip } from "./tooltip"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 
 export interface TextFieldProps
   extends ComponentProps<typeof Kobalte.Input>,
@@ -106,10 +107,17 @@ export function TextField(props: TextFieldProps) {
           <Kobalte.TextArea {...others} autoResize data-slot="input-input" class={local.class} />
         </Show>
         <Show when={local.copyable}>
-          <Tooltip value={label()} placement="top" gutter={4} forceOpen={copied()} skipDelayDuration={0}>
+          <Tooltip
+            appearance="standard"
+            value={label()}
+            placement="top"
+            gutter={4}
+            forceOpen={copied() ? true : undefined}
+            skipDelayDuration={0}
+          >
             <IconButton
               type="button"
-              icon={icon()}
+              icon={<Icon name={icon()} />}
               variant="ghost"
               onClick={handleCopy}
               tabIndex={-1}
diff --git a/packages/ui/src/components/text-shimmer.stories.tsx b/packages/ui/src/components/text-shimmer.stories.tsx
deleted file mode 100644
index a88a7158b11..00000000000
--- a/packages/ui/src/components/text-shimmer.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// @ts-nocheck
-import * as mod from "./text-shimmer"
-import { useArgs } from "storybook/preview-api"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Animated shimmer effect for loading text placeholders.
-
-Use for pending states inside buttons or list rows.
-
-### API
-- Required: \`text\` string.
-- Optional: \`as\`, \`active\`, \`offset\`, \`class\`.
-
-### Variants and states
-- Active/inactive state via \`active\`.
-
-### Behavior
-- Uses a moving gradient sweep clipped to text.
-- \`offset\` lets multiple shimmers run out-of-phase.
-
-### Accessibility
-- Uses \`aria-label\` with the full text.
-
-### Theming/tokens
-- Uses \`data-component="text-shimmer"\` and CSS custom properties for timing.
-
-`
-
-const defaults = {
-  text: "Loading...",
-  active: true,
-  class: "text-14-medium text-text-strong",
-  offset: 0,
-} as const
-
-const story = create({ title: "UI/TextShimmer", mod, args: defaults })
-
-export default {
-  title: "UI/TextShimmer",
-  id: "components-text-shimmer",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  args: defaults,
-  argTypes: {
-    text: { control: "text" },
-    class: { control: "text" },
-    active: { control: "boolean" },
-    offset: { control: { type: "range", min: 0, max: 80, step: 1 } },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = {
-  args: defaults,
-  render: (args) => {
-    const [, updateArgs] = useArgs()
-    const reset = () => updateArgs(defaults)
-    return (
-      <div style={{ display: "grid", gap: "12px", "justify-items": "start" }}>
-        <mod.TextShimmer {...args} />
-        <button
-          onClick={reset}
-          style={{
-            padding: "4px 10px",
-            "font-size": "12px",
-            "border-radius": "6px",
-            border: "1px solid var(--color-divider, #333)",
-            background: "var(--color-fill-element, #222)",
-            color: "var(--color-text, #eee)",
-            cursor: "pointer",
-          }}
-        >
-          Reset controls
-        </button>
-      </div>
-    )
-  },
-}
-
-export const Inactive = {
-  args: {
-    text: "Static text",
-    active: false,
-  },
-}
diff --git a/packages/ui/src/components/thinking-heading.stories.tsx b/packages/ui/src/components/thinking-heading.stories.tsx
index a2d7fc12ca3..64eb61cea60 100644
--- a/packages/ui/src/components/thinking-heading.stories.tsx
+++ b/packages/ui/src/components/thinking-heading.stories.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { createEffect, For, on, onMount, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
-import { TextShimmer } from "./text-shimmer"
+import { TextShimmer } from "@opencode-ai/ui/text-shimmer"
 import { TextReveal } from "./text-reveal"
 
 export default {
diff --git a/packages/ui/src/components/toast.css b/packages/ui/src/components/toast.css
deleted file mode 100644
index a7b40923c82..00000000000
--- a/packages/ui/src/components/toast.css
+++ /dev/null
@@ -1,236 +0,0 @@
-[data-component="toast-region"] {
-  position: fixed;
-  bottom: 48px;
-  inset-inline-end: 32px;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-width: min(400px, calc(100vw - 64px));
-  max-height: calc(100dvh - 96px);
-  width: 100%;
-  overflow: hidden;
-  pointer-events: none;
-
-  [data-slot="toast-list"] {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    max-height: 100%;
-    overflow-y: auto;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-}
-
-[data-component="toast"] {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
-  padding: 16px 20px;
-  max-height: min(420px, calc(100dvh - 96px));
-  overflow: hidden;
-  pointer-events: auto;
-  transition: all 150ms ease-out;
-
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-weak-base);
-  background: var(--surface-float-base);
-  color: var(--text-invert-base);
-  box-shadow: var(--shadow-md);
-
-  [data-slot="toast-inner"] {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-  }
-
-  &[data-opened] {
-    animation: toastPopIn 150ms ease-out;
-  }
-
-  &[data-closed] {
-    animation: toastPopOut 100ms ease-in forwards;
-  }
-
-  &[data-swipe="move"] {
-    transform: translateX(var(--kb-toast-swipe-move-x));
-  }
-
-  &[data-swipe="cancel"] {
-    transform: translateX(0);
-    transition: transform 200ms ease-out;
-  }
-
-  &[data-swipe="end"] {
-    animation: toastSwipeOut 100ms ease-out forwards;
-  }
-
-  /* &[data-variant="success"] { */
-  /*   border-color: var(--color-semantic-positive); */
-  /* } */
-  /**/
-  /* &[data-variant="error"] { */
-  /*   border-color: var(--color-semantic-danger); */
-  /* } */
-  /**/
-  /* &[data-variant="loading"] { */
-  /*   border-color: var(--color-semantic-info); */
-  /* } */
-
-  [data-slot="toast-icon"] {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    [data-component="icon"] {
-      color: var(--text-invert-stronger);
-      /* color: var(--icon-invert-base); */
-    }
-  }
-
-  [data-slot="toast-content"] {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-height: 0;
-    min-width: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  [data-slot="toast-title"] {
-    color: var(--text-invert-strong);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    /* text-14-medium */
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 142.857% */
-    letter-spacing: var(--letter-spacing-normal);
-
-    margin: 0;
-  }
-
-  [data-slot="toast-description"] {
-    color: var(--text-invert-base);
-    text-wrap-style: pretty;
-    overflow-wrap: anywhere;
-    word-break: break-word;
-
-    /* text-14-regular */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-x-large); /* 171.429% */
-    letter-spacing: var(--letter-spacing-normal);
-
-    margin: 0;
-  }
-
-  [data-slot="toast-actions"] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-top: 8px;
-  }
-
-  [data-slot="toast-action"] {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    min-width: 0;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    color: var(--text-invert-weak);
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &:first-child {
-      color: var(--text-invert-strong);
-    }
-  }
-
-  [data-slot="toast-close-button"] {
-    flex-shrink: 0;
-  }
-
-  [data-slot="toast-progress-track"] {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background-color: var(--surface-base);
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-    overflow: hidden;
-  }
-
-  [data-slot="toast-progress-fill"] {
-    height: 100%;
-    width: var(--kb-toast-progress-fill-width);
-    background-color: var(--color-primary);
-    transition: width 250ms linear;
-  }
-}
-
-@keyframes toastPopIn {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes toastPopOut {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-}
-
-@keyframes toastSwipeOut {
-  from {
-    transform: translateX(var(--kb-toast-swipe-end-x));
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
diff --git a/packages/ui/src/components/toast.stories.tsx b/packages/ui/src/components/toast.stories.tsx
deleted file mode 100644
index ef9cbb68ef2..00000000000
--- a/packages/ui/src/components/toast.stories.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-// @ts-nocheck
-import * as mod from "./toast"
-import { Button } from "./button"
-
-const docs = `### Overview
-Toast notifications with optional icons, actions, and progress.
-
-Use brief titles/descriptions; limit actions to 1-2.
-
-### API
-- Use \`showToast\` or \`showPromiseToast\` to trigger toasts.
-- Render \`Toast.Region\` once per page.
-- \`Toast\` subcomponents compose the structure.
-
-### Variants and states
-- Variants: default, success, error, loading.
-- Optional actions and persistent toasts.
-
-### Behavior
-- Toasts render in a portal and auto-dismiss unless persistent.
-
-### Accessibility
-- TODO: confirm aria-live behavior from Kobalte Toast.
-
-### Theming/tokens
-- Uses \`data-component="toast"\` and slot data attributes.
-
-`
-
-export default {
-  title: "UI/Toast",
-  id: "components-toast",
-  component: mod.Toast,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = {
-  render: () => (
-    <div style={{ display: "grid", gap: "12px" }}>
-      <mod.Toast.Region />
-      <Button
-        variant="primary"
-        onClick={() =>
-          mod.showToast({
-            title: "Saved",
-            description: "Your changes are stored.",
-            variant: "success",
-            icon: "check",
-          })
-        }
-      >
-        Show success toast
-      </Button>
-      <Button
-        variant="secondary"
-        onClick={() =>
-          mod.showToast({
-            description: "This action needs attention.",
-            variant: "error",
-            icon: "warning",
-          })
-        }
-      >
-        Show error toast
-      </Button>
-    </div>
-  ),
-}
-
-export const Actions = {
-  render: () => (
-    <div style={{ display: "grid", gap: "12px" }}>
-      <mod.Toast.Region />
-      <Button
-        variant="secondary"
-        onClick={() =>
-          mod.showToast({
-            title: "Update available",
-            description: "Restart to apply the update.",
-            actions: [
-              { label: "Restart", onClick: "dismiss" },
-              { label: "Later", onClick: "dismiss" },
-            ],
-          })
-        }
-      >
-        Show action toast
-      </Button>
-    </div>
-  ),
-}
-
-export const Promise = {
-  render: () => (
-    <div style={{ display: "grid", gap: "12px" }}>
-      <mod.Toast.Region />
-      <Button
-        variant="secondary"
-        onClick={() =>
-          mod.showPromiseToast(() => new Promise((resolve) => setTimeout(() => resolve(true), 800)), {
-            loading: "Saving...",
-            success: () => "Saved",
-            error: () => "Failed",
-          })
-        }
-      >
-        Show promise toast
-      </Button>
-    </div>
-  ),
-}
-
-export const Loading = {
-  render: () => (
-    <div style={{ display: "grid", gap: "12px" }}>
-      <mod.Toast.Region />
-      <Button
-        variant="secondary"
-        onClick={() =>
-          mod.showToast({
-            description: "Syncing...",
-            variant: "loading",
-            persistent: true,
-          })
-        }
-      >
-        Show loading toast
-      </Button>
-    </div>
-  ),
-}
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
deleted file mode 100644
index b43a0b5b566..00000000000
--- a/packages/ui/src/components/toast.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { Toast as Kobalte, toaster } from "@kobalte/core/toast"
-import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescriptionProps } from "@kobalte/core/toast"
-import type { ComponentProps, JSX } from "solid-js"
-import { For, Show } from "solid-js"
-import { Portal } from "solid-js/web"
-import { useI18n } from "../context/i18n"
-import { Icon, type IconProps } from "./icon"
-import { IconButton } from "./icon-button"
-
-export interface ToastRegionProps extends ComponentProps<typeof Kobalte.Region> {}
-
-function ToastRegion(props: ToastRegionProps) {
-  return (
-    <Portal>
-      <Kobalte.Region data-component="toast-region" {...props}>
-        <Kobalte.List data-slot="toast-list" />
-      </Kobalte.Region>
-    </Portal>
-  )
-}
-
-export interface ToastRootComponentProps extends ToastRootProps {
-  class?: string
-  classList?: ComponentProps<"li">["classList"]
-  children?: JSX.Element
-}
-
-function ToastRoot(props: ToastRootComponentProps) {
-  return (
-    <Kobalte
-      data-component="toast"
-      classList={{
-        ...props.classList,
-        [props.class ?? ""]: !!props.class,
-      }}
-      {...props}
-    />
-  )
-}
-
-function ToastIcon(props: { name: IconProps["name"] }) {
-  return (
-    <div data-slot="toast-icon">
-      <Icon name={props.name} />
-    </div>
-  )
-}
-
-function ToastContent(props: ComponentProps<"div">) {
-  return <div data-slot="toast-content" {...props} />
-}
-
-function ToastTitle(props: ToastTitleProps & ComponentProps<"div">) {
-  return <Kobalte.Title data-slot="toast-title" {...props} />
-}
-
-function ToastDescription(props: ToastDescriptionProps & ComponentProps<"div">) {
-  return <Kobalte.Description data-slot="toast-description" {...props} />
-}
-
-function ToastActions(props: ComponentProps<"div">) {
-  return <div data-slot="toast-actions" {...props} />
-}
-
-function ToastCloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
-  const i18n = useI18n()
-  return (
-    <Kobalte.CloseButton
-      data-slot="toast-close-button"
-      as={IconButton}
-      icon="close"
-      variant="ghost"
-      aria-label={i18n.t("ui.common.dismiss")}
-      {...props}
-    />
-  )
-}
-
-function ToastProgressTrack(props: ComponentProps<typeof Kobalte.ProgressTrack>) {
-  return <Kobalte.ProgressTrack data-slot="toast-progress-track" {...props} />
-}
-
-function ToastProgressFill(props: ComponentProps<typeof Kobalte.ProgressFill>) {
-  return <Kobalte.ProgressFill data-slot="toast-progress-fill" {...props} />
-}
-
-export const Toast = Object.assign(ToastRoot, {
-  Region: ToastRegion,
-  Icon: ToastIcon,
-  Content: ToastContent,
-  Title: ToastTitle,
-  Description: ToastDescription,
-  Actions: ToastActions,
-  CloseButton: ToastCloseButton,
-  ProgressTrack: ToastProgressTrack,
-  ProgressFill: ToastProgressFill,
-})
-
-export { toaster }
-
-export type ToastVariant = "default" | "success" | "error" | "loading"
-
-export interface ToastAction {
-  label: string
-  onClick: "dismiss" | (() => void)
-}
-
-export interface ToastOptions {
-  title?: string
-  description?: string
-  icon?: IconProps["name"]
-  variant?: ToastVariant
-  duration?: number
-  persistent?: boolean
-  actions?: ToastAction[]
-}
-
-export function showToast(options: ToastOptions | string) {
-  const opts = typeof options === "string" ? { description: options } : options
-  return toaster.show((props) => (
-    <Toast
-      toastId={props.toastId}
-      duration={opts.duration}
-      persistent={opts.persistent}
-      data-variant={opts.variant ?? "default"}
-    >
-      <Show when={opts.icon}>
-        <Toast.Icon name={opts.icon!} />
-      </Show>
-      <Toast.Content>
-        <Show when={opts.title}>
-          <Toast.Title>{opts.title}</Toast.Title>
-        </Show>
-        <Show when={opts.description}>
-          <Toast.Description>{opts.description}</Toast.Description>
-        </Show>
-        <Show when={opts.actions?.length}>
-          <Toast.Actions>
-            <For each={opts.actions}>
-              {(action) => (
-                <button
-                  data-slot="toast-action"
-                  onClick={() => {
-                    if (typeof action.onClick === "function") {
-                      action.onClick()
-                    }
-                    toaster.dismiss(props.toastId)
-                  }}
-                >
-                  {action.label}
-                </button>
-              )}
-            </For>
-          </Toast.Actions>
-        </Show>
-      </Toast.Content>
-      <Toast.CloseButton />
-    </Toast>
-  ))
-}
-
-export interface ToastPromiseOptions<T, U = unknown> {
-  loading?: JSX.Element
-  success?: (data: T) => JSX.Element
-  error?: (error: U) => JSX.Element
-}
-
-export function showPromiseToast<T, U = unknown>(
-  promise: Promise<T> | (() => Promise<T>),
-  options: ToastPromiseOptions<T, U>,
-) {
-  return toaster.promise(promise, (props) => (
-    <Toast
-      toastId={props.toastId}
-      data-variant={props.state === "pending" ? "loading" : props.state === "fulfilled" ? "success" : "error"}
-    >
-      <Toast.Content>
-        <Toast.Description>
-          {props.state === "pending" && options.loading}
-          {props.state === "fulfilled" && options.success?.(props.data!)}
-          {props.state === "rejected" && options.error?.(props.error)}
-        </Toast.Description>
-      </Toast.Content>
-      <Toast.CloseButton />
-    </Toast>
-  ))
-}
diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css
deleted file mode 100644
index f02c2ca6392..00000000000
--- a/packages/ui/src/components/tooltip.css
+++ /dev/null
@@ -1,74 +0,0 @@
-[data-component="tooltip-trigger"] {
-  display: flex;
-}
-
-[data-slot="tooltip-keybind"] {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-[data-slot="tooltip-keybind-key"] {
-  color: var(--text-invert-base);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large);
-}
-
-[data-component="tooltip"] {
-  z-index: 1000;
-  max-width: 320px;
-  border-radius: var(--radius-sm);
-  background-color: var(--surface-float-base);
-  color: var(--text-invert-strong);
-  background: var(--surface-float-base);
-  padding: 2px 8px;
-  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
-
-  box-shadow: var(--shadow-md);
-  pointer-events: none !important;
-  /* transition: all 150ms ease-out; */
-  /* transform: translate3d(0, 0, 0); */
-  /* transform-origin: var(--kb-tooltip-content-transform-origin); */
-
-  /* text-12-medium */
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large); /* 166.667% */
-  letter-spacing: var(--letter-spacing-normal);
-
-  &[data-expanded] {
-    opacity: 1;
-    /* transform: translate3d(0, 0, 0); */
-  }
-
-  &[data-closed]:not([data-force-open="true"]) {
-    opacity: 0;
-  }
-
-  /* &[data-placement="top"] { */
-  /*   &[data-closed] { */
-  /*     transform: translate3d(0, 4px, 0); */
-  /*   } */
-  /* } */
-  /**/
-  /* &[data-placement="bottom"] { */
-  /*   &[data-closed] { */
-  /*     transform: translate3d(0, -4px, 0); */
-  /*   } */
-  /* } */
-  /**/
-  /* &[data-placement="left"] { */
-  /*   &[data-closed] { */
-  /*     transform: translate3d(4px, 0, 0); */
-  /*   } */
-  /* } */
-  /**/
-  /* &[data-placement="right"] { */
-  /*   &[data-closed] { */
-  /*     transform: translate3d(-4px, 0, 0); */
-  /*   } */
-  /* } */
-}
diff --git a/packages/ui/src/components/tooltip.stories.tsx b/packages/ui/src/components/tooltip.stories.tsx
deleted file mode 100644
index efe11d92efb..00000000000
--- a/packages/ui/src/components/tooltip.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// @ts-nocheck
-import * as mod from "./tooltip"
-import { create } from "../storybook/scaffold"
-
-const docs = `### Overview
-Tooltip for contextual hints and keybind callouts.
-
-Use for short hints; avoid long descriptions.
-
-### API
-- Required: \`value\` (tooltip content).
-- Optional: \`inactive\`, \`forceOpen\`, placement props from Kobalte.
-
-### Variants and states
-- Supports keybind-style tooltip via \`TooltipKeybind\`.
-
-### Behavior
-- Opens on hover/focus; can be forced open.
-
-### Accessibility
-- TODO: confirm trigger semantics and focus behavior.
-
-### Theming/tokens
-- Uses \`data-component="tooltip"\` and related slots.
-
-`
-
-const story = create({ title: "UI/Tooltip", mod, args: { value: "Tooltip", children: "Hover me" } })
-
-export default {
-  title: "UI/Tooltip",
-  id: "components-tooltip",
-  component: story.meta.component,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = story.Basic
-
-export const Keybind = {
-  render: () => (
-    <mod.TooltipKeybind title="Search" keybind="Cmd+K">
-      <span style={{ "text-decoration": "underline" }}>Hover for keybind</span>
-    </mod.TooltipKeybind>
-  ),
-}
-
-export const ForcedOpen = {
-  args: {
-    forceOpen: true,
-  },
-}
-
-export const Inactive = {
-  args: {
-    inactive: true,
-  },
-}
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
deleted file mode 100644
index 6a2f4b55d45..00000000000
--- a/packages/ui/src/components/tooltip.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
-import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
-import type { ComponentProps } from "solid-js"
-import { createStore } from "solid-js/store"
-
-export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
-  value: JSX.Element
-  class?: string
-  contentClass?: string
-  contentStyle?: JSX.CSSProperties
-  inactive?: boolean
-  forceOpen?: boolean
-}
-
-export interface TooltipKeybindProps extends Omit<TooltipProps, "value"> {
-  title: string
-  keybind: string
-}
-
-export function TooltipKeybind(props: TooltipKeybindProps) {
-  const [local, others] = splitProps(props, ["title", "keybind"])
-  return (
-    <Tooltip
-      {...others}
-      value={
-        <div data-slot="tooltip-keybind">
-          <span>{local.title}</span>
-          <span data-slot="tooltip-keybind-key">{local.keybind}</span>
-        </div>
-      }
-    />
-  )
-}
-
-export function Tooltip(props: TooltipProps) {
-  let ref: HTMLDivElement | undefined
-  const [state, setState] = createStore({
-    open: false,
-    block: false,
-    expand: false,
-  })
-  const [local, others] = splitProps(props, [
-    "children",
-    "class",
-    "contentClass",
-    "contentStyle",
-    "inactive",
-    "forceOpen",
-    "ignoreSafeArea",
-    "value",
-  ])
-
-  const close = () => setState("open", false)
-
-  const inside = () => {
-    const active = document.activeElement
-    if (!ref || !active) return false
-    return ref.contains(active)
-  }
-
-  const drop = (expand = state.expand) => {
-    if (expand) return
-    if (ref?.matches(":hover")) return
-    if (inside()) return
-    setState("block", false)
-  }
-
-  const sync = () => {
-    const expand = !!ref?.querySelector('[aria-expanded="true"], [data-expanded]')
-    setState("expand", expand)
-    if (expand) {
-      setState("block", true)
-      close()
-      return
-    }
-    drop(expand)
-  }
-
-  const arm = () => {
-    setState("block", true)
-    close()
-  }
-
-  const leave = () => {
-    if (!inside()) close()
-    drop()
-  }
-
-  createEffect(() => {
-    if (!ref) return
-    sync()
-    const obs = new MutationObserver(sync)
-    obs.observe(ref, {
-      subtree: true,
-      childList: true,
-      attributes: true,
-      attributeFilter: ["aria-expanded", "data-expanded"],
-    })
-    onCleanup(() => obs.disconnect())
-  })
-
-  let justClickedTrigger = false
-
-  return (
-    <Switch>
-      <Match when={local.inactive}>{local.children}</Match>
-      <Match when={true}>
-        <KobalteTooltip
-          gutter={4}
-          openDelay={400}
-          skipDelayDuration={300}
-          {...others}
-          closeDelay={0}
-          ignoreSafeArea={local.ignoreSafeArea ?? true}
-          open={local.forceOpen || state.open}
-          onOpenChange={(open) => {
-            if (local.forceOpen) return
-            if (state.block && open) return
-            if (justClickedTrigger) {
-              justClickedTrigger = false
-              return
-            }
-            setState("open", open)
-          }}
-        >
-          <KobalteTooltip.Trigger
-            ref={ref}
-            as={"div"}
-            data-component="tooltip-trigger"
-            class={local.class}
-            onPointerDownCapture={arm}
-            onKeyDownCapture={(event: KeyboardEvent) => {
-              if (event.key !== "Enter" && event.key !== " ") return
-              arm()
-            }}
-            onPointerLeave={leave}
-            onFocusOut={() => requestAnimationFrame(() => drop())}
-          >
-            {local.children}
-          </KobalteTooltip.Trigger>
-          <KobalteTooltip.Portal>
-            <KobalteTooltip.Content
-              data-component="tooltip"
-              data-placement={props.placement}
-              data-force-open={local.forceOpen}
-              class={local.contentClass}
-              style={local.contentStyle}
-              onPointerDownOutside={(e) => {
-                if (ref === e.target || (e.target instanceof Node && ref?.contains(e.target))) {
-                  justClickedTrigger = true
-                }
-                e.preventDefault()
-              }}
-            >
-              {local.value}
-              {/* <KobalteTooltip.Arrow data-slot="tooltip-arrow" /> */}
-            </KobalteTooltip.Content>
-          </KobalteTooltip.Portal>
-        </KobalteTooltip>
-      </Match>
-    </Switch>
-  )
-}
diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/data-display/accordion/accordion.css
similarity index 96%
rename from packages/ui/src/components/accordion.css
rename to packages/ui/src/data-display/accordion/accordion.css
index 0860362d425..41bf56675be 100644
--- a/packages/ui/src/components/accordion.css
+++ b/packages/ui/src/data-display/accordion/accordion.css
@@ -43,12 +43,11 @@
         color: var(--v2-text-text-base);
         transition: background-color 0.15s ease;
 
-        /* text-12-regular */
         font-family: var(--font-family-sans);
         font-size: var(--font-size-small);
         font-style: normal;
         font-weight: var(--font-weight-regular);
-        line-height: var(--line-height-large); /* 166.667% */
+        line-height: var(--line-height-large);
         letter-spacing: var(--letter-spacing-normal);
 
         &:hover:not([data-disabled]) {
diff --git a/packages/ui/src/data-display/accordion/accordion.stories.tsx b/packages/ui/src/data-display/accordion/accordion.stories.tsx
new file mode 100644
index 00000000000..db73544154f
--- /dev/null
+++ b/packages/ui/src/data-display/accordion/accordion.stories.tsx
@@ -0,0 +1,105 @@
+// @ts-nocheck
+import { createEffect, createSignal } from "solid-js"
+import { Accordion } from "./accordion"
+
+const docs = `### Overview
+Accordion for collapsible content sections with optional multi-open behavior.
+
+Use one trigger per item; keep content concise.
+
+### API
+- Root supports Kobalte Accordion props: \`value\`, \`multiple\`, \`collapsible\`, \`onChange\`.
+- Compose with \`Accordion.Item\`, \`Header\`, \`Trigger\`, \`Content\`.
+
+### Variants and states
+- Single or multiple open items.
+- Collapsible or fixed-open behavior.
+
+### Behavior
+- Controlled via \`value\`/\`onChange\` when provided.
+
+### Accessibility
+- Uses Kobalte Accordion keyboard and ARIA behavior.
+
+### Theming/tokens
+- Uses \`data-component="accordion"\` and slot data attributes.
+`
+
+export default {
+  title: "UI/Accordion",
+  id: "ui-accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  parameters: { docs: { description: { component: docs } } },
+}
+
+export const Basic = {
+  args: { collapsible: true, multiple: false, value: "first" },
+  argTypes: {
+    collapsible: { control: "boolean" },
+    multiple: { control: "boolean" },
+    value: { control: "select", options: ["first", "second", "none"], mapping: { none: undefined } },
+  },
+  render: (props) => {
+    const [value, setValue] = createSignal(props.value)
+    createEffect(() => setValue(props.value))
+    const current = () => {
+      if (props.multiple) return Array.isArray(value()) ? value() : value() ? [value()] : []
+      return Array.isArray(value()) ? value()[0] : value()
+    }
+    return (
+      <div style={{ display: "grid", gap: "8px", width: "420px" }}>
+        <Accordion collapsible={props.collapsible} multiple={props.multiple} value={current()} onChange={setValue}>
+          <Accordion.Item value="first">
+            <Accordion.Header>
+              <Accordion.Trigger>First</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>Accordion content.</div>
+            </Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item value="second">
+            <Accordion.Header>
+              <Accordion.Trigger>Second</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>More content.</div>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </div>
+    )
+  },
+}
+
+export const Multiple = {
+  render: () => (
+    <Accordion multiple value={["first", "second"]}>
+      <Accordion.Item value="first">
+        <Accordion.Header>
+          <Accordion.Trigger>First</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content>Accordion content.</Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="second">
+        <Accordion.Header>
+          <Accordion.Trigger>Second</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content>More content.</Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  ),
+}
+
+export const NonCollapsible = {
+  render: () => (
+    <Accordion value="first">
+      <Accordion.Item value="first">
+        <Accordion.Header>
+          <Accordion.Trigger>First</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content>Accordion content.</Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  ),
+}
diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/data-display/accordion/accordion.tsx
similarity index 84%
rename from packages/ui/src/components/accordion.tsx
rename to packages/ui/src/data-display/accordion/accordion.tsx
index 3179b8a1535..7c32d9d7f4c 100644
--- a/packages/ui/src/components/accordion.tsx
+++ b/packages/ui/src/data-display/accordion/accordion.tsx
@@ -1,17 +1,17 @@
-import { Accordion as Kobalte } from "@kobalte/core/accordion"
+import { Content, Header, Item, Root, Trigger } from "@kobalte/core/accordion"
 import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
-export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
-export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
-export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
-export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
-export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
+export interface AccordionProps extends ComponentProps<typeof Root> {}
+export interface AccordionItemProps extends ComponentProps<typeof Item> {}
+export interface AccordionHeaderProps extends ComponentProps<typeof Header> {}
+export interface AccordionTriggerProps extends ComponentProps<typeof Trigger> {}
+export interface AccordionContentProps extends ComponentProps<typeof Content> {}
 
 function AccordionRoot(props: AccordionProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <Kobalte
+    <Root
       {...rest}
       data-component="accordion"
       classList={{
@@ -25,7 +25,7 @@ function AccordionRoot(props: AccordionProps) {
 function AccordionItem(props: AccordionItemProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <Kobalte.Item
+    <Item
       {...rest}
       data-slot="accordion-item"
       classList={{
@@ -39,7 +39,7 @@ function AccordionItem(props: AccordionItemProps) {
 function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Kobalte.Header
+    <Header
       {...rest}
       data-slot="accordion-header"
       classList={{
@@ -48,14 +48,14 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
       }}
     >
       {split.children}
-    </Kobalte.Header>
+    </Header>
   )
 }
 
 function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Kobalte.Trigger
+    <Trigger
       {...rest}
       data-slot="accordion-trigger"
       classList={{
@@ -64,14 +64,14 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
       }}
     >
       {split.children}
-    </Kobalte.Trigger>
+    </Trigger>
   )
 }
 
 function AccordionContent(props: ParentProps<AccordionContentProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Kobalte.Content
+    <Content
       {...rest}
       data-slot="accordion-content"
       classList={{
@@ -80,7 +80,7 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
       }}
     >
       {split.children}
-    </Kobalte.Content>
+    </Content>
   )
 }
 
diff --git a/packages/ui/src/v2/components/avatar-v2.css b/packages/ui/src/data-display/avatar/avatar.css
similarity index 100%
rename from packages/ui/src/v2/components/avatar-v2.css
rename to packages/ui/src/data-display/avatar/avatar.css
diff --git a/packages/ui/src/v2/components/avatar-v2.stories.tsx b/packages/ui/src/data-display/avatar/avatar.stories.tsx
similarity index 95%
rename from packages/ui/src/v2/components/avatar-v2.stories.tsx
rename to packages/ui/src/data-display/avatar/avatar.stories.tsx
index f857aa933ea..11f214cd4e6 100644
--- a/packages/ui/src/v2/components/avatar-v2.stories.tsx
+++ b/packages/ui/src/data-display/avatar/avatar.stories.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Avatar } from "./avatar-v2"
+import { Avatar } from "./avatar"
 
 const docs = `### Overview
 Avatar matching OpenCode DS variants from Figma.
@@ -27,8 +27,8 @@ Use in user lists and headers.
 `
 
 export default {
-  title: "UI V2/Avatar",
-  id: "components-avatar-v2",
+  title: "UI/Avatar",
+  id: "ui-avatar",
   component: Avatar,
   tags: ["autodocs"],
   parameters: {
diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/data-display/avatar/avatar.tsx
similarity index 89%
rename from packages/ui/src/components/avatar.tsx
rename to packages/ui/src/data-display/avatar/avatar.tsx
index 035c2d30414..8858ba54236 100644
--- a/packages/ui/src/components/avatar.tsx
+++ b/packages/ui/src/data-display/avatar/avatar.tsx
@@ -1,4 +1,5 @@
 import { type ComponentProps, splitProps, Show } from "solid-js"
+import "./avatar.css"
 
 const segmenter =
   typeof Intl !== "undefined" && "Segmenter" in Intl
@@ -17,6 +18,7 @@ export interface AvatarProps extends ComponentProps<"div"> {
   background?: string
   foreground?: string
   size?: "small" | "normal" | "large"
+  kind?: "user" | "org"
 }
 
 export function Avatar(props: AvatarProps) {
@@ -26,6 +28,7 @@ export function Avatar(props: AvatarProps) {
     "background",
     "foreground",
     "size",
+    "kind",
     "class",
     "classList",
     "style",
@@ -34,8 +37,9 @@ export function Avatar(props: AvatarProps) {
   return (
     <div
       {...rest}
-      data-component="avatar"
-      data-size={split.size || "normal"}
+      data-component="avatar-v2"
+      data-size={split.size || "large"}
+      data-kind={split.kind || "user"}
       data-has-image={src ? "" : undefined}
       classList={{
         ...split.classList,
diff --git a/packages/ui/src/v2/components/badge-v2.css b/packages/ui/src/data-display/badge/badge.css
similarity index 56%
rename from packages/ui/src/v2/components/badge-v2.css
rename to packages/ui/src/data-display/badge/badge.css
index 5c7a59e0aae..962d3d0f176 100644
--- a/packages/ui/src/v2/components/badge-v2.css
+++ b/packages/ui/src/data-display/badge/badge.css
@@ -31,3 +31,22 @@
   background: var(--v2-background-bg-accent);
   color: var(--v2-text-text-contrast);
 }
+
+[data-component="tag"][data-appearance="standard"] {
+  height: 18px;
+  padding: 0 6px;
+  border-radius: var(--radius-xs);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+  font-variant-numeric: normal;
+}
+
+[data-component="tag"][data-appearance="standard"][data-variant="neutral"] {
+  border: 0.5px solid var(--border-weak-base);
+  background: var(--surface-raised-base);
+  color: var(--text-base);
+}
diff --git a/packages/ui/src/v2/components/badge-v2.stories.tsx b/packages/ui/src/data-display/badge/badge.stories.tsx
similarity index 62%
rename from packages/ui/src/v2/components/badge-v2.stories.tsx
rename to packages/ui/src/data-display/badge/badge.stories.tsx
index 19af508bc2d..633ee4a71f6 100644
--- a/packages/ui/src/v2/components/badge-v2.stories.tsx
+++ b/packages/ui/src/data-display/badge/badge.stories.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Tag } from "./badge-v2"
+import { Badge } from "./badge"
 
 const docs = `### Overview
 Small label tag for metadata and status chips.
@@ -8,11 +8,12 @@ Use alongside headings or lists for quick metadata.
 
 ### API
 - Accepts standard span props.
+- Optional: \`appearance\` is \`compact\` (default) or \`standard\`.
 - Optional: \`variant\` is \`neutral\` (default) or \`accent\`.
 - Optional: \`data-high-contrast\` attribute for stronger border contrast.
 
 ### Variants and states
-- Neutral and accent variants.
+- Compact and standard appearances; neutral and accent variants.
 - Optional high-contrast border style.
 
 ### Behavior
@@ -27,9 +28,9 @@ Use alongside headings or lists for quick metadata.
 `
 
 export default {
-  title: "UI V2/Badge",
-  id: "components-badge-v2",
-  component: Tag,
+  title: "UI/Badge",
+  id: "ui-badge",
+  component: Badge,
   tags: ["autodocs"],
   parameters: {
     docs: {
@@ -45,15 +46,24 @@ export default {
 
 export const Basic = {}
 
+export const Appearances = {
+  render: () => (
+    <div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
+      <Badge appearance="standard">Standard</Badge>
+      <Badge appearance="compact">Compact</Badge>
+    </div>
+  ),
+}
+
 export const HighContrast = {
   render: () => (
     <div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
-      <Tag>Label</Tag>
-      <Tag data-high-contrast>Label</Tag>
+      <Badge>Label</Badge>
+      <Badge data-high-contrast>Label</Badge>
     </div>
   ),
 }
 
 export const Accent = {
-  render: () => <Tag variant="accent">New</Tag>,
+  render: () => <Badge variant="accent">New</Badge>,
 }
diff --git a/packages/ui/src/v2/components/badge-v2.tsx b/packages/ui/src/data-display/badge/badge.tsx
similarity index 62%
rename from packages/ui/src/v2/components/badge-v2.tsx
rename to packages/ui/src/data-display/badge/badge.tsx
index 8583d46da9f..d3c94a2272a 100644
--- a/packages/ui/src/v2/components/badge-v2.tsx
+++ b/packages/ui/src/data-display/badge/badge.tsx
@@ -1,16 +1,18 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./badge-v2.css"
+import "./badge.css"
 
-export interface TagProps extends ComponentProps<"span"> {
+export interface BadgeProps extends ComponentProps<"span"> {
+  appearance?: "standard" | "compact"
   variant?: "neutral" | "accent"
 }
 
-export function Tag(props: TagProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "variant"])
+export function Badge(props: BadgeProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "appearance", "variant"])
   return (
     <span
       {...rest}
       data-component="tag"
+      data-appearance={split.appearance ?? "compact"}
       data-variant={split.variant ?? "neutral"}
       classList={{
         ...split.classList,
diff --git a/packages/ui/src/components/diff-changes.css b/packages/ui/src/data-display/diff-changes/diff-changes.css
similarity index 58%
rename from packages/ui/src/components/diff-changes.css
rename to packages/ui/src/data-display/diff-changes/diff-changes.css
index a2078048871..5207dd53d58 100644
--- a/packages/ui/src/components/diff-changes.css
+++ b/packages/ui/src/data-display/diff-changes/diff-changes.css
@@ -6,18 +6,27 @@
   justify-content: flex-end;
   align-items: center;
 
-  [data-slot="diff-changes-additions"] {
-    font-family: var(--font-family-mono);
-    font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: 14px;
+  [data-slot="diff-changes-additions"],
+  [data-slot="diff-changes-deletions"] {
+    font-size: 11px;
     font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
     text-align: right;
-    color: var(--text-diff-add-base);
   }
 
+  [data-slot="diff-changes-additions"] {
+    color: var(--v2-state-fg-success);
+  }
+
+  [data-slot="diff-changes-deletions"] {
+    color: var(--v2-state-fg-danger);
+  }
+}
+
+[data-component="diff-changes"][data-appearance="standard"] {
+  [data-slot="diff-changes-additions"],
   [data-slot="diff-changes-deletions"] {
     font-family: var(--font-family-mono);
     font-feature-settings: var(--font-family-mono--font-feature-settings);
@@ -26,19 +35,13 @@
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-    text-align: right;
+  }
+
+  [data-slot="diff-changes-additions"] {
+    color: var(--text-diff-add-base);
+  }
+
+  [data-slot="diff-changes-deletions"] {
     color: var(--text-diff-delete-base);
   }
 }
-
-[data-component="diff-changes"][data-variant="bars"] {
-  width: 18px;
-  height: 14px;
-  flex-shrink: 0;
-
-  svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-}
diff --git a/packages/ui/src/v2/components/diff-changes-v2.stories.tsx b/packages/ui/src/data-display/diff-changes/diff-changes.stories.tsx
similarity index 71%
rename from packages/ui/src/v2/components/diff-changes-v2.stories.tsx
rename to packages/ui/src/data-display/diff-changes/diff-changes.stories.tsx
index cc855412ad0..e15f952bc3b 100644
--- a/packages/ui/src/v2/components/diff-changes-v2.stories.tsx
+++ b/packages/ui/src/data-display/diff-changes/diff-changes.stories.tsx
@@ -1,4 +1,4 @@
-import { DiffChanges } from "./diff-changes-v2"
+import { DiffChanges } from "./diff-changes"
 
 const docs = `### Overview  
 Summarize additions/deletions as compact text.
@@ -7,6 +7,7 @@ Pair with \`Diff\`/\`DiffSSR\` to contextualize a change set.
 
 ### API
 - Required: \`changes\` as { additions, deletions } or an array of those objects.
+- Optional: \`appearance\` is \`compact\` (default) or \`standard\`.
 
 ### Variants and states
 - Handles zero-change state (renders nothing).
@@ -25,8 +26,8 @@ Pair with \`Diff\`/\`DiffSSR\` to contextualize a change set.
 const changes = { additions: 12, deletions: 5 }
 
 export default {
-  title: "UI V2/DiffChanges",
-  id: "components-diff-changes-v2",
+  title: "UI/DiffChanges",
+  id: "ui-diff-changes",
   component: DiffChanges,
   tags: ["autodocs"],
   parameters: {
@@ -43,6 +44,15 @@ export default {
 
 export const Default = {}
 
+export const Appearances = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
+      <DiffChanges appearance="standard" changes={changes} />
+      <DiffChanges appearance="compact" changes={changes} />
+    </div>
+  ),
+}
+
 export const MultipleFiles = {
   args: {
     changes: [
diff --git a/packages/ui/src/v2/components/diff-changes-v2.tsx b/packages/ui/src/data-display/diff-changes/diff-changes.tsx
similarity index 79%
rename from packages/ui/src/v2/components/diff-changes-v2.tsx
rename to packages/ui/src/data-display/diff-changes/diff-changes.tsx
index 9413d2e9c24..3820947537d 100644
--- a/packages/ui/src/v2/components/diff-changes-v2.tsx
+++ b/packages/ui/src/data-display/diff-changes/diff-changes.tsx
@@ -1,8 +1,9 @@
 import { createMemo, Show } from "solid-js"
-import "./diff-changes-v2.css"
+import "./diff-changes.css"
 
 export function DiffChanges(props: {
   class?: string
+  appearance?: "standard" | "compact"
   changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
 }) {
   const additions = createMemo(() =>
@@ -19,7 +20,11 @@ export function DiffChanges(props: {
 
   return (
     <Show when={total() > 0}>
-      <div data-component="diff-changes" classList={{ [props.class ?? ""]: true }}>
+      <div
+        data-component="diff-changes"
+        data-appearance={props.appearance ?? "compact"}
+        classList={{ [props.class ?? ""]: true }}
+      >
         <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
         <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
       </div>
diff --git a/packages/ui/src/v2/components/keybind-v2.css b/packages/ui/src/data-display/keybind/keybind.css
similarity index 100%
rename from packages/ui/src/v2/components/keybind-v2.css
rename to packages/ui/src/data-display/keybind/keybind.css
diff --git a/packages/ui/src/v2/components/keybind-v2.stories.tsx b/packages/ui/src/data-display/keybind/keybind.stories.tsx
similarity index 63%
rename from packages/ui/src/v2/components/keybind-v2.stories.tsx
rename to packages/ui/src/data-display/keybind/keybind.stories.tsx
index 9b9a657a8f0..1d1b1f0e402 100644
--- a/packages/ui/src/v2/components/keybind-v2.stories.tsx
+++ b/packages/ui/src/data-display/keybind/keybind.stories.tsx
@@ -1,4 +1,4 @@
-import { KeybindV2 } from "./keybind-v2"
+import { Keybind } from "./keybind"
 
 const docs = `### Overview
 Inline keybind indicator that renders one or more keyboard keys in a compact row.
@@ -14,9 +14,9 @@ Inline keybind indicator that renders one or more keyboard keys in a compact row
 `
 
 export default {
-  title: "UI V2/Keybind",
-  id: "components-keybind-v2",
-  component: KeybindV2,
+  title: "UI/Keybind",
+  id: "ui-keybind",
+  component: Keybind,
   tags: ["autodocs"],
   parameters: {
     frameHeight: "200px",
@@ -47,8 +47,8 @@ export const Playground = {}
 export const Variants = {
   render: () => (
     <div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
-      <KeybindV2 keys={["⌘"]} variant="neutral" />
-      <KeybindV2 keys={["⌘"]} variant="ghost" />
+      <Keybind keys={["⌘"]} variant="neutral" />
+      <Keybind keys={["⌘"]} variant="ghost" />
     </div>
   ),
 }
@@ -56,10 +56,10 @@ export const Variants = {
 export const MultipleKeys = {
   render: () => (
     <div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
-      <KeybindV2 keys={["⌘", "K"]} variant="neutral" />
-      <KeybindV2 keys={["⌘", "K"]} variant="ghost" />
-      <KeybindV2 keys={["Ctrl", "B"]} variant="neutral" />
-      <KeybindV2 keys={["Ctrl", "B"]} variant="ghost" />
+      <Keybind keys={["⌘", "K"]} variant="neutral" />
+      <Keybind keys={["⌘", "K"]} variant="ghost" />
+      <Keybind keys={["Ctrl", "B"]} variant="neutral" />
+      <Keybind keys={["Ctrl", "B"]} variant="ghost" />
     </div>
   ),
 }
@@ -69,17 +69,17 @@ export const AllExamples = {
     <div style={{ display: "flex", "flex-direction": "column", gap: "16px" }}>
       <div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
         <span style={{ "font-size": "11px", color: "#808080", width: "50px" }}>Neutral</span>
-        <KeybindV2 keys={["⌘"]} variant="neutral" />
-        <KeybindV2 keys={["⌘", "K"]} variant="neutral" />
-        <KeybindV2 keys={["⌘", "⇧", "P"]} variant="neutral" />
-        <KeybindV2 keys={["Ctrl", "Shift", "B"]} variant="neutral" />
+        <Keybind keys={["⌘"]} variant="neutral" />
+        <Keybind keys={["⌘", "K"]} variant="neutral" />
+        <Keybind keys={["⌘", "⇧", "P"]} variant="neutral" />
+        <Keybind keys={["Ctrl", "Shift", "B"]} variant="neutral" />
       </div>
       <div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
         <span style={{ "font-size": "11px", color: "#808080", width: "50px" }}>Ghost</span>
-        <KeybindV2 keys={["⌘"]} variant="ghost" />
-        <KeybindV2 keys={["⌘", "K"]} variant="ghost" />
-        <KeybindV2 keys={["⌘", "⇧", "P"]} variant="ghost" />
-        <KeybindV2 keys={["Ctrl", "Shift", "B"]} variant="ghost" />
+        <Keybind keys={["⌘"]} variant="ghost" />
+        <Keybind keys={["⌘", "K"]} variant="ghost" />
+        <Keybind keys={["⌘", "⇧", "P"]} variant="ghost" />
+        <Keybind keys={["Ctrl", "Shift", "B"]} variant="ghost" />
       </div>
     </div>
   ),
diff --git a/packages/ui/src/v2/components/keybind-v2.tsx b/packages/ui/src/data-display/keybind/keybind.tsx
similarity index 81%
rename from packages/ui/src/v2/components/keybind-v2.tsx
rename to packages/ui/src/data-display/keybind/keybind.tsx
index 4286465613a..5755b4dbc23 100644
--- a/packages/ui/src/v2/components/keybind-v2.tsx
+++ b/packages/ui/src/data-display/keybind/keybind.tsx
@@ -1,12 +1,12 @@
 import { type ComponentProps, For, splitProps } from "solid-js"
-import "./keybind-v2.css"
+import "./keybind.css"
 
-export interface KeybindV2Props extends ComponentProps<"div"> {
+export interface KeybindProps extends ComponentProps<"div"> {
   keys: string[]
   variant?: "neutral" | "ghost"
 }
 
-export function KeybindV2(props: KeybindV2Props) {
+export function Keybind(props: KeybindProps) {
   const [local, rest] = splitProps(props, ["keys", "variant", "class", "classList"])
   return (
     <div
diff --git a/packages/ui/src/v2/components/line-comment-v2.css b/packages/ui/src/data-display/line-comment/line-comment.css
similarity index 100%
rename from packages/ui/src/v2/components/line-comment-v2.css
rename to packages/ui/src/data-display/line-comment/line-comment.css
diff --git a/packages/ui/src/v2/components/line-comment-v2.stories.tsx b/packages/ui/src/data-display/line-comment/line-comment.stories.tsx
similarity index 68%
rename from packages/ui/src/v2/components/line-comment-v2.stories.tsx
rename to packages/ui/src/data-display/line-comment/line-comment.stories.tsx
index 6284408d00e..cc1e3a5a917 100644
--- a/packages/ui/src/v2/components/line-comment-v2.stories.tsx
+++ b/packages/ui/src/data-display/line-comment/line-comment.stories.tsx
@@ -1,23 +1,23 @@
 // @ts-nocheck
 import { createSignal } from "solid-js"
-import { LineCommentEditorV2, LineCommentV2, LineCommentV2OverflowIcon } from "./line-comment-v2"
+import { LineCommentEditor, LineComment, LineCommentOverflowIcon } from "./line-comment"
 
 const docs = `### Overview
-Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`ButtonV2\` neutral + contrast actions).
+Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`Button\` neutral + contrast actions).
 
 ### Display
-- \`LineCommentV2\`: column stack (body + meta) beside optional \`actions\` (overflow).
-- Use \`LineCommentV2OverflowIcon\` inside a \`data-slot="line-comment-v2-overflow"\` button for the Figma dots control.
+- \`LineComment\`: column stack (body + meta) beside optional \`actions\` (overflow).
+- Use \`LineCommentOverflowIcon\` inside a \`data-slot="line-comment-v2-overflow"\` button for the Figma dots control.
 
 ### Editor
-- \`LineCommentEditorV2\`: optional \`heading\` above the textarea (default “Comment”), footer (selection meta + Cancel / Comment).
+- \`LineCommentEditor\`: optional \`heading\` above the textarea (default “Comment”), footer (selection meta + Cancel / Comment).
 - \`Enter\` submits (Shift+Enter newline); \`Escape\` cancels. Controlled via \`value\` / \`onInput\`.
 `
 
 export default {
-  title: "UI V2/LineComment",
-  id: "components-line-comment-v2",
-  component: LineCommentV2,
+  title: "UI/LineComment",
+  id: "ui-line-comment",
+  component: LineComment,
   tags: ["autodocs"],
   parameters: {
     docs: {
@@ -31,12 +31,12 @@ export default {
 export const Display = {
   render: () => (
     <div style={{ width: "400px" }}>
-      <LineCommentV2
+      <LineComment
         comment="Consider guarding against empty arrays."
         selection="Comment on line 40"
         actions={
           <button type="button" data-slot="line-comment-v2-overflow" aria-label="Comment actions">
-            <LineCommentV2OverflowIcon />
+            <LineCommentOverflowIcon />
           </button>
         }
       />
@@ -47,7 +47,7 @@ export const Display = {
 export const DisplayWithoutActions = {
   render: () => (
     <div style={{ width: "400px" }}>
-      <LineCommentV2 comment="Consider guarding against empty arrays." selection="Comment on line 40" />
+      <LineComment comment="Consider guarding against empty arrays." selection="Comment on line 40" />
     </div>
   ),
 }
@@ -57,7 +57,7 @@ export const Editor = {
     const [value, setValue] = createSignal("")
     return (
       <div style={{ width: "400px" }}>
-        <LineCommentEditorV2
+        <LineCommentEditor
           value={value()}
           onInput={setValue}
           onCancel={() => setValue("")}
@@ -74,7 +74,7 @@ export const EditorFilled = {
     const [value, setValue] = createSignal("Use a sentinel or early return when the list is empty.")
     return (
       <div style={{ width: "400px" }}>
-        <LineCommentEditorV2
+        <LineCommentEditor
           value={value()}
           onInput={setValue}
           onCancel={() => setValue("")}
diff --git a/packages/ui/src/v2/components/line-comment-v2.tsx b/packages/ui/src/data-display/line-comment/line-comment.tsx
similarity index 90%
rename from packages/ui/src/v2/components/line-comment-v2.tsx
rename to packages/ui/src/data-display/line-comment/line-comment.tsx
index c10286cba27..7118897842d 100644
--- a/packages/ui/src/v2/components/line-comment-v2.tsx
+++ b/packages/ui/src/data-display/line-comment/line-comment.tsx
@@ -1,12 +1,12 @@
 import { For, Show, createSignal, onMount, splitProps, type ComponentProps, type JSX } from "solid-js"
-import { FileIcon } from "../../components/file-icon"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { useI18n } from "../../context/i18n"
 import { useFilteredList } from "../../hooks"
-import { ButtonV2 } from "./button-v2"
-import "./line-comment-v2.css"
+import { Button } from "@opencode-ai/ui/button"
+import "./line-comment.css"
 
 /** Horizontal “more” glyph for the display-card overflow control (Figma outline-dots). */
-export function LineCommentV2OverflowIcon(props: ComponentProps<"svg">) {
+export function LineCommentOverflowIcon(props: ComponentProps<"svg">) {
   return (
     <svg
       {...props}
@@ -24,16 +24,16 @@ export function LineCommentV2OverflowIcon(props: ComponentProps<"svg">) {
   )
 }
 
-export interface LineCommentV2Props extends ComponentProps<"div"> {
+export interface LineCommentProps extends ComponentProps<"div"> {
   /** Main comment body (text or rich content). */
   comment: JSX.Element
   /** Line / selection context (e.g. “Comment on line 40”). */
   selection: JSX.Element
-  /** Typically an overflow menu trigger; use `LineCommentV2OverflowIcon` inside `line-comment-v2-overflow`. */
+  /** Typically an overflow menu trigger; use `LineCommentOverflowIcon` inside `line-comment-v2-overflow`. */
   actions?: JSX.Element
 }
 
-export function LineCommentV2(props: LineCommentV2Props) {
+export function LineComment(props: LineCommentProps) {
   const [local, rest] = splitProps(props, ["comment", "selection", "actions", "class", "classList"])
   return (
     <div
@@ -56,11 +56,11 @@ export function LineCommentV2(props: LineCommentV2Props) {
   )
 }
 
-export type LineCommentEditorV2Mention = {
+export type LineCommentEditorMention = {
   items: (query: string) => string[] | Promise<string[]>
 }
 
-export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
+export interface LineCommentEditorProps extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
   /** Visible field label above the textarea (default: “Comment”). */
   heading?: JSX.Element | string
   value: string
@@ -73,7 +73,7 @@ export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "c
   cancelLabel?: string
   submitLabel?: string
   autofocus?: boolean
-  mention?: LineCommentEditorV2Mention
+  mention?: LineCommentEditorMention
 }
 
 function pathFilename(path: string) {
@@ -86,7 +86,7 @@ function pathDirectory(path: string) {
   return index === -1 ? "" : path.slice(0, index + 1)
 }
 
-export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
+export function LineCommentEditor(props: LineCommentEditorProps) {
   const i18n = useI18n()
   let textareaRef: HTMLTextAreaElement | undefined
   const [mentionOpen, setMentionOpen] = createSignal(false)
@@ -294,12 +294,12 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
         <div data-slot="line-comment-v2-footer">
           <div data-slot="line-comment-v2-footer-meta">{local.selection}</div>
           <div data-slot="line-comment-v2-footer-actions">
-            <ButtonV2 type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
+            <Button type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
               {local.cancelLabel ?? i18n.t("ui.lineComment.cancel")}
-            </ButtonV2>
-            <ButtonV2 type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
+            </Button>
+            <Button type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
               {local.submitLabel ?? i18n.t("ui.lineComment.submit")}
-            </ButtonV2>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/packages/ui/src/v2/components/project-avatar-v2.css b/packages/ui/src/data-display/project-avatar/project-avatar.css
similarity index 100%
rename from packages/ui/src/v2/components/project-avatar-v2.css
rename to packages/ui/src/data-display/project-avatar/project-avatar.css
diff --git a/packages/ui/src/v2/components/project-avatar-v2.stories.tsx b/packages/ui/src/data-display/project-avatar/project-avatar.stories.tsx
similarity index 95%
rename from packages/ui/src/v2/components/project-avatar-v2.stories.tsx
rename to packages/ui/src/data-display/project-avatar/project-avatar.stories.tsx
index 3a2babcd9ed..f5302646081 100644
--- a/packages/ui/src/v2/components/project-avatar-v2.stories.tsx
+++ b/packages/ui/src/data-display/project-avatar/project-avatar.stories.tsx
@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { For } from "solid-js"
-import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "./project-avatar-v2"
+import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "./project-avatar"
 
 const docs = `### Overview
 Saturated 16px project avatar with color variants and optional unread dot.
@@ -20,8 +20,8 @@ Saturated 16px project avatar with color variants and optional unread dot.
 `
 
 export default {
-  title: "UI V2/ProjectAvatar",
-  id: "components-project-avatar-v2",
+  title: "UI/ProjectAvatar",
+  id: "ui-project-avatar",
   component: ProjectAvatar,
   tags: ["autodocs"],
   parameters: {
diff --git a/packages/ui/src/v2/components/project-avatar-v2.tsx b/packages/ui/src/data-display/project-avatar/project-avatar.tsx
similarity index 98%
rename from packages/ui/src/v2/components/project-avatar-v2.tsx
rename to packages/ui/src/data-display/project-avatar/project-avatar.tsx
index cbc571ab533..981f9fa5e0e 100644
--- a/packages/ui/src/v2/components/project-avatar-v2.tsx
+++ b/packages/ui/src/data-display/project-avatar/project-avatar.tsx
@@ -1,5 +1,5 @@
 import { type ComponentProps, splitProps, Show } from "solid-js"
-import "./project-avatar-v2.css"
+import "./project-avatar.css"
 
 const segmenter =
   typeof Intl !== "undefined" && "Segmenter" in Intl
diff --git a/packages/ui/src/v2/components/loader-v2.css b/packages/ui/src/feedback/loader/loader.css
similarity index 100%
rename from packages/ui/src/v2/components/loader-v2.css
rename to packages/ui/src/feedback/loader/loader.css
diff --git a/packages/ui/src/v2/components/loader-v2.stories.tsx b/packages/ui/src/feedback/loader/loader.stories.tsx
similarity index 69%
rename from packages/ui/src/v2/components/loader-v2.stories.tsx
rename to packages/ui/src/feedback/loader/loader.stories.tsx
index 2160d545c4e..e5baaa296e6 100644
--- a/packages/ui/src/v2/components/loader-v2.stories.tsx
+++ b/packages/ui/src/feedback/loader/loader.stories.tsx
@@ -1,4 +1,4 @@
-import { LoaderV2 } from "./loader-v2"
+import { Loader } from "./loader"
 
 const docs = `### Overview
 Circular v2 loader for compact loading states.
@@ -14,9 +14,9 @@ Circular v2 loader for compact loading states.
 `
 
 export default {
-  title: "UI V2/Loader",
-  id: "components-loader-v2",
-  component: LoaderV2,
+  title: "UI/Loader",
+  id: "ui-loader",
+  component: Loader,
   tags: ["autodocs"],
   parameters: {
     docs: {
@@ -28,15 +28,15 @@ export default {
 }
 
 export const Basic = {
-  render: () => <LoaderV2 />,
+  render: () => <Loader />,
 }
 
 export const Sizes = {
   render: () => (
     <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
-      <LoaderV2 width={12} height={12} />
-      <LoaderV2 />
-      <LoaderV2 width={24} height={24} />
+      <Loader width={12} height={12} />
+      <Loader />
+      <Loader width={24} height={24} />
     </div>
   ),
 }
diff --git a/packages/ui/src/v2/components/loader-v2.tsx b/packages/ui/src/feedback/loader/loader.tsx
similarity index 90%
rename from packages/ui/src/v2/components/loader-v2.tsx
rename to packages/ui/src/feedback/loader/loader.tsx
index eb3697ad74d..3a9ccb552c8 100644
--- a/packages/ui/src/v2/components/loader-v2.tsx
+++ b/packages/ui/src/feedback/loader/loader.tsx
@@ -1,7 +1,7 @@
 import { splitProps, type ComponentProps } from "solid-js"
-import "./loader-v2.css"
+import "./loader.css"
 
-export function LoaderV2(props: ComponentProps<"svg">) {
+export function Loader(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
   return (
     <svg
diff --git a/packages/ui/src/feedback/progress-circle/progress-circle.css b/packages/ui/src/feedback/progress-circle/progress-circle.css
new file mode 100644
index 00000000000..7616c7e6379
--- /dev/null
+++ b/packages/ui/src/feedback/progress-circle/progress-circle.css
@@ -0,0 +1,28 @@
+[data-component="progress-circle"] {
+  display: block;
+  transform: rotate(-90deg);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-background"] {
+  stroke: var(--v2-background-bg-layer-04);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-progress"] {
+  stroke: var(--v2-icon-icon-base);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background"] {
+  stroke: var(--progress-circle-background, var(--border-weak-base));
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background-overlay"] {
+  stroke: var(--progress-circle-background-overlay, transparent);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-progress"] {
+  stroke: var(--progress-circle-progress, var(--border-active));
+}
+
+[data-component="progress-circle"] [data-slot="progress-circle-progress"] {
+  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
+}
diff --git a/packages/ui/src/feedback/progress-circle/progress-circle.stories.tsx b/packages/ui/src/feedback/progress-circle/progress-circle.stories.tsx
new file mode 100644
index 00000000000..9ae87f9fa94
--- /dev/null
+++ b/packages/ui/src/feedback/progress-circle/progress-circle.stories.tsx
@@ -0,0 +1,52 @@
+import { For } from "solid-js"
+import { ProgressCircle } from "./progress-circle"
+
+export default {
+  title: "UI/ProgressCircle",
+  id: "ui-progress-circle",
+  component: ProgressCircle,
+  tags: ["autodocs"],
+  args: {
+    percentage: 60,
+  },
+  argTypes: {
+    percentage: { control: { type: "range", min: 0, max: 100, step: 1 } },
+    appearance: { control: "select", options: ["compact", "indicator"] },
+  },
+}
+
+export const Playground = {}
+
+export const Progress = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
+      <For each={[0, 25, 50, 75, 100]}>{(percentage) => <ProgressCircle percentage={percentage} />}</For>
+    </div>
+  ),
+}
+
+export const Sizes = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
+      <ProgressCircle percentage={60} size={12} />
+      <ProgressCircle percentage={60} />
+      <ProgressCircle percentage={60} size={20} strokeWidth={2} />
+    </div>
+  ),
+}
+
+export const Indicator = {
+  render: () => (
+    <ProgressCircle
+      appearance="indicator"
+      percentage={60}
+      size={16}
+      strokeWidth={2}
+      style={{
+        "--progress-circle-background": "var(--v2-background-bg-layer-04, var(--border-weak-base))",
+        "--progress-circle-background-overlay": "var(--v2-overlay-simple-overlay-pressed, transparent)",
+        "--progress-circle-progress": "var(--v2-icon-icon-base, var(--icon-base))",
+      }}
+    />
+  ),
+}
diff --git a/packages/ui/src/feedback/progress-circle/progress-circle.tsx b/packages/ui/src/feedback/progress-circle/progress-circle.tsx
new file mode 100644
index 00000000000..863b0256cd2
--- /dev/null
+++ b/packages/ui/src/feedback/progress-circle/progress-circle.tsx
@@ -0,0 +1,64 @@
+import { type ComponentProps, createMemo, Show, splitProps } from "solid-js"
+import "./progress-circle.css"
+
+export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
+  percentage: number
+  appearance?: "compact" | "indicator"
+  size?: number
+  strokeWidth?: number
+}
+
+export function ProgressCircle(props: ProgressCircleProps) {
+  const [local, rest] = splitProps(props, ["percentage", "appearance", "size", "strokeWidth", "class", "classList"])
+
+  const appearance = () => local.appearance ?? "compact"
+  const viewBoxSize = () => (appearance() === "indicator" ? 16 : 14)
+  const size = () => local.size ?? viewBoxSize()
+  const strokeWidth = () => local.strokeWidth ?? (appearance() === "indicator" ? 3 : 1.5)
+  const center = () => viewBoxSize() / 2
+  const radius = () => center() - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+  const offset = createMemo(() => circumference() * (1 - Math.max(0, Math.min(100, local.percentage || 0)) / 100))
+
+  return (
+    <svg
+      {...rest}
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize()} ${viewBoxSize()}`}
+      fill="none"
+      data-component="progress-circle"
+      data-appearance={appearance()}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-background"
+        stroke-width={strokeWidth()}
+      />
+      <Show when={appearance() === "indicator"}>
+        <circle
+          cx={center()}
+          cy={center()}
+          r={radius()}
+          data-slot="progress-circle-background-overlay"
+          stroke-width={strokeWidth()}
+        />
+      </Show>
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+      />
+    </svg>
+  )
+}
diff --git a/packages/ui/src/v2/components/toast-v2.css b/packages/ui/src/feedback/toast/toast.css
similarity index 100%
rename from packages/ui/src/v2/components/toast-v2.css
rename to packages/ui/src/feedback/toast/toast.css
diff --git a/packages/ui/src/v2/components/toast-v2.stories.tsx b/packages/ui/src/feedback/toast/toast.stories.tsx
similarity index 88%
rename from packages/ui/src/v2/components/toast-v2.stories.tsx
rename to packages/ui/src/feedback/toast/toast.stories.tsx
index b2af8c038dd..effd85a8214 100644
--- a/packages/ui/src/v2/components/toast-v2.stories.tsx
+++ b/packages/ui/src/feedback/toast/toast.stories.tsx
@@ -1,5 +1,5 @@
-import * as mod from "./toast-v2"
-import { ButtonV2 } from "./button-v2"
+import { Toast, showToast } from "./toast"
+import { Button } from "@opencode-ai/ui/button"
 
 const docs = `### Overview
 Toast notifications with optional icons, actions, and progress.
@@ -7,9 +7,9 @@ Toast notifications with optional icons, actions, and progress.
 Use brief titles/descriptions; limit actions to 1-2.
 
 ### API
-- Use \`showToastV2\` or \`showPromiseToastV2\` to trigger toasts.
-- Render \`ToastV2.Region\` once per page.
-- \`ToastV2\` subcomponents compose the structure.
+- Use \`showToast\` to trigger toasts.
+- Render \`Toast.Region\` once per page.
+- \`Toast\` subcomponents compose the structure.
 
 ### Styling and states
 - Single toast style; provide any custom icon element via \`icon\`.
@@ -27,9 +27,9 @@ Use brief titles/descriptions; limit actions to 1-2.
 `
 
 export default {
-  title: "UI V2/Toast",
-  id: "components-toast-v2",
-  component: mod.ToastV2,
+  title: "UI/Toast",
+  id: "ui-toast",
+  component: Toast,
   tags: ["autodocs"],
   parameters: {
     frameHeight: "320px",
@@ -45,12 +45,12 @@ export default {
 export const AllExamples = {
   render: () => (
     <div style={{ display: "grid", gap: "12px" }}>
-      <mod.ToastV2.Region />
-      <ButtonV2
+      <Toast.Region />
+      <Button
         class="w-fit"
         variant="neutral"
         onClick={() =>
-          mod.showToastV2({
+          showToast({
             title: "Download started...",
             description: "23% · 2 min left",
             icon: (
@@ -75,12 +75,12 @@ export const AllExamples = {
         }
       >
         Show download toast
-      </ButtonV2>
-      <ButtonV2
+      </Button>
+      <Button
         class="w-fit"
         variant="neutral"
         onClick={() =>
-          mod.showToastV2({
+          showToast({
             title: "Saved",
             description: "Your changes are stored",
             icon: (
@@ -96,12 +96,12 @@ export const AllExamples = {
         }
       >
         Show saved toast
-      </ButtonV2>
-      <ButtonV2
+      </Button>
+      <Button
         class="w-fit"
         variant="neutral"
         onClick={() =>
-          mod.showToastV2({
+          showToast({
             title: "Saving...",
             icon: (
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -120,12 +120,12 @@ export const AllExamples = {
         }
       >
         Show saving toast
-      </ButtonV2>
-      <ButtonV2
+      </Button>
+      <Button
         class="w-fit"
         variant="neutral"
         onClick={() =>
-          mod.showToastV2({
+          showToast({
             title: "Unsaved changes",
             description: "You have made 4 edits...",
             icon: (
@@ -145,7 +145,7 @@ export const AllExamples = {
         }
       >
         Show unsaved changes toast
-      </ButtonV2>
+      </Button>
     </div>
   ),
 }
diff --git a/packages/ui/src/v2/components/toast-v2.tsx b/packages/ui/src/feedback/toast/toast.tsx
similarity index 71%
rename from packages/ui/src/v2/components/toast-v2.tsx
rename to packages/ui/src/feedback/toast/toast.tsx
index ae757e0d138..7c966e4cefc 100644
--- a/packages/ui/src/v2/components/toast-v2.tsx
+++ b/packages/ui/src/feedback/toast/toast.tsx
@@ -4,12 +4,12 @@ import type { ComponentProps, JSX } from "solid-js"
 import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
 import { Portal } from "solid-js/web"
 import { useI18n } from "../../context/i18n"
-import "./button-v2.css"
-import "./toast-v2.css"
+import "../../actions/button/button.css"
+import "./toast.css"
 
-export interface ToastV2RegionProps extends ToasterProps {}
+export interface ToastRegionProps extends ToasterProps {}
 
-function ToastV2Region(props: ToastV2RegionProps) {
+function ToastRegion(props: ToastRegionProps) {
   const i18n = useI18n()
   const [local, rest] = splitProps(props, ["class", "className", "style", "toastOptions", "swipeDirections"])
   onMount(() => {
@@ -67,40 +67,40 @@ function ToastV2Region(props: ToastV2RegionProps) {
   )
 }
 
-const ToastV2Context = createContext<number>()
+const ToastContext = createContext<number>()
 
-export interface ToastV2RootComponentProps {
+export interface ToastRootComponentProps {
   toastId: number
   children?: JSX.Element
 }
 
-function ToastV2Root(props: ToastV2RootComponentProps) {
-  return <ToastV2Context.Provider value={props.toastId}>{props.children}</ToastV2Context.Provider>
+function ToastRoot(props: ToastRootComponentProps) {
+  return <ToastContext.Provider value={props.toastId}>{props.children}</ToastContext.Provider>
 }
 
-function ToastV2Icon(props: ComponentProps<"div">) {
+function ToastIcon(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-icon" {...props} />
 }
 
-function ToastV2Content(props: ComponentProps<"div">) {
+function ToastContent(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-content" {...props} />
 }
 
-function ToastV2Title(props: ComponentProps<"div">) {
+function ToastTitle(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-title" {...props} />
 }
 
-function ToastV2Description(props: ComponentProps<"div">) {
+function ToastDescription(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-description" {...props} />
 }
 
-function ToastV2Actions(props: ComponentProps<"div">) {
+function ToastActions(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-actions" {...props} />
 }
 
-function ToastV2CloseButton(props: ComponentProps<"button">) {
+function ToastCloseButton(props: ComponentProps<"button">) {
   const i18n = useI18n()
-  const toastId = useContext(ToastV2Context)
+  const toastId = useContext(ToastContext)
   const [local, rest] = splitProps(props, ["children", "onClick"])
   return (
     <button
@@ -110,7 +110,7 @@ function ToastV2CloseButton(props: ComponentProps<"button">) {
       {...rest}
       onClick={(event) => {
         if (typeof local.onClick === "function") local.onClick(event)
-        if (!event.defaultPrevented && toastId !== undefined) toasterV2.dismiss(toastId)
+        if (!event.defaultPrevented && toastId !== undefined) toaster.dismiss(toastId)
       }}
     >
       {local.children ?? <CloseIcon />}
@@ -127,19 +127,19 @@ function CloseIcon() {
   )
 }
 
-export const ToastV2 = Object.assign(ToastV2Root, {
-  Region: ToastV2Region,
-  Icon: ToastV2Icon,
-  Content: ToastV2Content,
-  Title: ToastV2Title,
-  Description: ToastV2Description,
-  Actions: ToastV2Actions,
-  CloseButton: ToastV2CloseButton,
+export const Toast = Object.assign(ToastRoot, {
+  Region: ToastRegion,
+  Icon: ToastIcon,
+  Content: ToastContent,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  CloseButton: ToastCloseButton,
 })
 
 let toastV2Id = 0
 
-export const toasterV2 = {
+export const toaster = {
   show(render: (props: { toastId: number }) => JSX.Element, options?: { duration?: number; persistent?: boolean }) {
     const toastId = --toastV2Id
     toast.custom((id) => render({ toastId: Number(id) }), {
@@ -152,43 +152,43 @@ export const toasterV2 = {
   },
   dismiss(toastId?: number) {
     if (toastId === undefined) {
-      activeToastV2ByKey.clear()
-      activeToastV2ById.clear()
+      activeToastByKey.clear()
+      activeToastById.clear()
     } else {
-      releaseToastV2(activeToastV2ById.get(toastId))
+      releaseToast(activeToastById.get(toastId))
     }
     return toast.dismiss(toastId)
   },
 }
 
-export interface ToastV2Action {
+export interface ToastAction {
   label: string
   variant?: "primary" | "secondary"
   onClick: "dismiss" | (() => void)
 }
 
-export interface ToastV2Options {
+export interface ToastOptions {
   title?: string
   description?: string
   icon?: JSX.Element
   variant?: "default" | "success" | "error" | "loading"
   duration?: number
   persistent?: boolean
-  actions?: ToastV2Action[]
+  actions?: ToastAction[]
 }
 
-interface ActiveToastV2 {
+interface ActiveToast {
   id: number
   key: string
-  options: ToastV2Options
+  options: ToastOptions
   actions?: JSX.Element
 }
 
-const activeToastV2ByKey = new Map<string, ActiveToastV2>()
-const activeToastV2ById = new Map<number, ActiveToastV2>()
+const activeToastByKey = new Map<string, ActiveToast>()
+const activeToastById = new Map<number, ActiveToast>()
 
-export function showToastV2(options: ToastV2Options | string) {
-  const opts: ToastV2Options = typeof options === "string" ? { description: options } : options
+export function showToast(options: ToastOptions | string) {
+  const opts: ToastOptions = typeof options === "string" ? { description: options } : options
   const key = JSON.stringify({
     title: opts.title,
     description: opts.description,
@@ -197,29 +197,29 @@ export function showToastV2(options: ToastV2Options | string) {
     persistent: opts.persistent,
     actions: opts.actions?.map((action) => [action.label, action.variant]),
   })
-  const active = activeToastV2ByKey.get(key)
+  const active = activeToastByKey.get(key)
   const toasts = toast.getToasts()
 
   if (active && toasts.at(-1)?.id === active.id) {
     active.options = opts
-    publishToastV2(active)
-    pulseToastV2(active.id)
+    publishToast(active)
+    pulseToast(active.id)
     return active.id
   }
 
-  if (active && toasts.some((item) => item.id === active.id)) toasterV2.dismiss(active.id)
-  releaseToastV2(active)
+  if (active && toasts.some((item) => item.id === active.id)) toaster.dismiss(active.id)
+  releaseToast(active)
 
-  const entry: ActiveToastV2 = { id: --toastV2Id, key, options: opts }
-  entry.actions = createToastV2Actions(entry)
-  activeToastV2ByKey.set(key, entry)
-  activeToastV2ById.set(entry.id, entry)
-  publishToastV2(entry)
+  const entry: ActiveToast = { id: --toastV2Id, key, options: opts }
+  entry.actions = createToastActions(entry)
+  activeToastByKey.set(key, entry)
+  activeToastById.set(entry.id, entry)
+  publishToast(entry)
   return entry.id
 }
 
-function publishToastV2(entry: ActiveToastV2) {
-  const release = () => releaseToastV2(entry)
+function publishToast(entry: ActiveToast) {
+  const release = () => releaseToast(entry)
   toast(entry.options.title ?? "", {
     id: entry.id,
     description: entry.options.description,
@@ -235,10 +235,10 @@ function publishToastV2(entry: ActiveToastV2) {
   })
 }
 
-function createToastV2Actions(entry: ActiveToastV2) {
+function createToastActions(entry: ActiveToast) {
   if (!entry.options.actions?.length) return undefined
   return (
-    <ToastV2.Actions>
+    <Toast.Actions>
       {/* Static map, not <For>: this JSX is created imperatively outside any Solid
           root, where a <For> computation would never be disposed. */}
       {entry.options.actions.map((action, index) => (
@@ -251,17 +251,17 @@ function createToastV2Actions(entry: ActiveToastV2) {
           onClick={() => {
             const onClick = entry.options.actions?.[index]?.onClick
             if (typeof onClick === "function") onClick()
-            toasterV2.dismiss(entry.id)
+            toaster.dismiss(entry.id)
           }}
         >
           {action.label}
         </button>
       ))}
-    </ToastV2.Actions>
+    </Toast.Actions>
   )
 }
 
-function pulseToastV2(toastId: number) {
+function pulseToast(toastId: number) {
   if (typeof document === "undefined" || typeof requestAnimationFrame === "undefined") return
   requestAnimationFrame(() => {
     const element = document.querySelector<HTMLElement>(`[data-testid="toast-v2-${toastId}"]`)
@@ -270,13 +270,13 @@ function pulseToastV2(toastId: number) {
   })
 }
 
-function releaseToastV2(entry: ActiveToastV2 | undefined) {
+function releaseToast(entry: ActiveToast | undefined) {
   if (!entry) return
-  if (activeToastV2ByKey.get(entry.key) === entry) activeToastV2ByKey.delete(entry.key)
-  if (activeToastV2ById.get(entry.id) === entry) activeToastV2ById.delete(entry.id)
+  if (activeToastByKey.get(entry.key) === entry) activeToastByKey.delete(entry.key)
+  if (activeToastById.get(entry.id) === entry) activeToastById.delete(entry.id)
 }
 
-export interface ToastV2PromiseOptions<T, U = unknown> {
+export interface ToastPromiseOptions<T, U = unknown> {
   loading?: JSX.Element
   success?: (data: T) => JSX.Element
   error?: (error: U) => JSX.Element
diff --git a/packages/ui/src/components/checkbox.css b/packages/ui/src/forms/checkbox/checkbox.css
similarity index 94%
rename from packages/ui/src/components/checkbox.css
rename to packages/ui/src/forms/checkbox/checkbox.css
index 30417996591..751560e5521 100644
--- a/packages/ui/src/components/checkbox.css
+++ b/packages/ui/src/forms/checkbox/checkbox.css
@@ -32,7 +32,6 @@
       border-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
       background-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
       box-shadow 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
-    /* background-color: var(--surface-weak); */
   }
 
   [data-slot="checkbox-checkbox-indicator"] {
@@ -49,19 +48,14 @@
       transform 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
   }
 
-  /* [data-slot="checkbox-checkbox-content"] { */
-  /* } */
-
   [data-slot="checkbox-checkbox-label"] {
     user-select: none;
     color: var(--text-base);
-
-    /* text-12-regular */
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
     font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large); /* 166.667% */
+    line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
   }
 
diff --git a/packages/ui/src/forms/checkbox/checkbox.stories.tsx b/packages/ui/src/forms/checkbox/checkbox.stories.tsx
new file mode 100644
index 00000000000..35a89339aad
--- /dev/null
+++ b/packages/ui/src/forms/checkbox/checkbox.stories.tsx
@@ -0,0 +1,46 @@
+// @ts-nocheck
+import { Icon } from "@opencode-ai/ui/icon"
+import { Checkbox } from "./checkbox"
+
+const docs = `### Overview
+Checkbox control for multi-select or agreement inputs.
+
+### API
+- Uses Kobalte Checkbox props.
+- Optional: \`hideLabel\`, \`description\`, \`icon\`.
+- Children render as the label.
+
+### Theming/tokens
+- Uses \`data-component="checkbox"\` and related slots.
+`
+
+export default {
+  title: "UI/Checkbox",
+  id: "ui-checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  parameters: { docs: { description: { component: docs } } },
+}
+
+export const Basic = { render: () => <Checkbox defaultChecked>Checkbox</Checkbox> }
+
+export const States = {
+  render: () => (
+    <div style={{ display: "grid", gap: "12px" }}>
+      <Checkbox defaultChecked>Checked</Checkbox>
+      <Checkbox>Unchecked</Checkbox>
+      <Checkbox disabled>Disabled</Checkbox>
+      <Checkbox description="Helper text">With description</Checkbox>
+    </div>
+  ),
+}
+
+export const CustomIcon = {
+  render: () => (
+    <Checkbox icon={<Icon name="check" size="small" />} defaultChecked>
+      Custom icon
+    </Checkbox>
+  ),
+}
+
+export const HiddenLabel = { render: () => <Checkbox hideLabel>Hidden label</Checkbox> }
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/forms/checkbox/checkbox.tsx
similarity index 58%
rename from packages/ui/src/components/checkbox.tsx
rename to packages/ui/src/forms/checkbox/checkbox.tsx
index 7187e4ac300..a9f050133f4 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/forms/checkbox/checkbox.tsx
@@ -1,8 +1,8 @@
-import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
+import { Control, Description, ErrorMessage, Indicator, Input, Label, Root } from "@kobalte/core/checkbox"
 import { Show, splitProps } from "solid-js"
 import type { ComponentProps, JSX, ParentProps } from "solid-js"
 
-export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+export interface CheckboxProps extends ParentProps<ComponentProps<typeof Root>> {
   hideLabel?: boolean
   description?: string
   icon?: JSX.Element
@@ -11,10 +11,10 @@ export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte
 export function Checkbox(props: CheckboxProps) {
   const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
   return (
-    <Kobalte {...others} data-component="checkbox">
-      <Kobalte.Input data-slot="checkbox-checkbox-input" />
-      <Kobalte.Control data-slot="checkbox-checkbox-control">
-        <Kobalte.Indicator data-slot="checkbox-checkbox-indicator">
+    <Root {...others} data-component="checkbox">
+      <Input data-slot="checkbox-checkbox-input" />
+      <Control data-slot="checkbox-checkbox-control">
+        <Indicator data-slot="checkbox-checkbox-indicator">
           {local.icon || (
             <svg viewBox="0 0 12 12" fill="none" width="10" height="10" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -25,19 +25,19 @@ export function Checkbox(props: CheckboxProps) {
               />
             </svg>
           )}
-        </Kobalte.Indicator>
-      </Kobalte.Control>
+        </Indicator>
+      </Control>
       <div data-slot="checkbox-checkbox-content">
         <Show when={props.children}>
-          <Kobalte.Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
+          <Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
             {props.children}
-          </Kobalte.Label>
+          </Label>
         </Show>
         <Show when={local.description}>
-          <Kobalte.Description data-slot="checkbox-checkbox-description">{local.description}</Kobalte.Description>
+          <Description data-slot="checkbox-checkbox-description">{local.description}</Description>
         </Show>
-        <Kobalte.ErrorMessage data-slot="checkbox-checkbox-error" />
+        <ErrorMessage data-slot="checkbox-checkbox-error" />
       </div>
-    </Kobalte>
+    </Root>
   )
 }
diff --git a/packages/ui/src/v2/components/field-v2.css b/packages/ui/src/forms/field/field.css
similarity index 100%
rename from packages/ui/src/v2/components/field-v2.css
rename to packages/ui/src/forms/field/field.css
diff --git a/packages/ui/src/v2/components/field-v2.stories.tsx b/packages/ui/src/forms/field/field.stories.tsx
similarity index 80%
rename from packages/ui/src/v2/components/field-v2.stories.tsx
rename to packages/ui/src/forms/field/field.stories.tsx
index 2bc5fd252ae..5b065dd830b 100644
--- a/packages/ui/src/v2/components/field-v2.stories.tsx
+++ b/packages/ui/src/forms/field/field.stories.tsx
@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { createSignal } from "solid-js"
-import { Field } from "./field-v2"
-import { InlineInputV2 } from "./inline-input-v2"
-import { TextInputV2 } from "./text-input-v2"
-import { TextareaV2 } from "./textarea-v2"
+import { Field } from "./field"
+import { InlineInput } from "@opencode-ai/ui/inline-input"
+import { TextInput } from "@opencode-ai/ui/text-input"
+import { Textarea } from "@opencode-ai/ui/textarea"
 
 const docs = `### Overview
-Composable field layout for TextInput, Textarea, and InlineInput v2.
+Composable field layout for TextInput, Textarea, and InlineInput.
 
 ### Usage
 \`\`\`tsx
@@ -14,7 +14,7 @@ Composable field layout for TextInput, Textarea, and InlineInput v2.
   <Field.Label tooltip="Helper">Label</Field.Label>
   <Field.Prefix>Prefix</Field.Prefix>
   <Field.Control>
-    <TextInputV2 placeholder="Text" />
+    <TextInput placeholder="Text" />
   </Field.Control>
   <Field.Suffix>Suffix</Field.Suffix>
 </Field>
@@ -30,8 +30,8 @@ Omit \`Field.Control\` and place the input directly inside \`Field\` — a11y pr
 `
 
 export default {
-  title: "UI V2/Field",
-  id: "components-field-v2",
+  title: "UI/Field",
+  id: "ui-field",
   subcomponents: {
     Label: Field.Label,
     Prefix: Field.Prefix,
@@ -57,7 +57,7 @@ export const TextInputExample = {
         <Field.Label tooltip="Additional context">Label</Field.Label>
         <Field.Prefix>Prefix</Field.Prefix>
         <Field.Control>
-          <TextInputV2 placeholder="Text" showCopyButton />
+          <TextInput placeholder="Text" showCopyButton />
         </Field.Control>
         <Field.Suffix>Suffix</Field.Suffix>
       </Field>
@@ -71,7 +71,7 @@ export const TextInputDirectChild = {
       <Field>
         <Field.Label>Label</Field.Label>
         <Field.Prefix>Prefix</Field.Prefix>
-        <TextInputV2 placeholder="Text" />
+        <TextInput placeholder="Text" />
         <Field.Suffix>Suffix</Field.Suffix>
       </Field>
     </div>
@@ -84,7 +84,7 @@ export const TextareaExample = {
       <Field>
         <Field.Label>Label</Field.Label>
         <Field.Prefix>Prefix</Field.Prefix>
-        <TextareaV2 placeholder="Text" />
+        <Textarea placeholder="Text" />
         <Field.Suffix>Suffix</Field.Suffix>
       </Field>
     </div>
@@ -97,7 +97,7 @@ export const InlineInputExample = {
       <Field>
         <Field.Label>Label</Field.Label>
         <Field.Prefix>Prefix</Field.Prefix>
-        <InlineInputV2 prefix="USD" placeholder="0.00" numeric showCopyButton />
+        <InlineInput placeholder="0.00" width="100%" />
         <Field.Suffix>Suffix</Field.Suffix>
       </Field>
     </div>
@@ -110,7 +110,7 @@ export const Invalid = {
       <Field invalid>
         <Field.Label>Label</Field.Label>
         <Field.Prefix>Prefix</Field.Prefix>
-        <TextInputV2 placeholder="Text" defaultValue="Invalid" showCopyButton />
+        <TextInput placeholder="Text" defaultValue="Invalid" showCopyButton />
         <Field.Suffix>Suffix</Field.Suffix>
       </Field>
     </div>
@@ -125,7 +125,7 @@ export const Controlled = {
         <Field>
           <Field.Label>Amount</Field.Label>
           <Field.Control>
-            <TextInputV2 placeholder="0.00" value={value()} onInput={(e) => setValue(e.currentTarget.value)} numeric />
+            <TextInput placeholder="0.00" value={value()} onInput={(e) => setValue(e.currentTarget.value)} numeric />
           </Field.Control>
           <Field.Suffix>{value() ? `Entered: ${value()}` : "Suffix"}</Field.Suffix>
         </Field>
diff --git a/packages/ui/src/v2/components/field-v2.tsx b/packages/ui/src/forms/field/field.tsx
similarity index 93%
rename from packages/ui/src/v2/components/field-v2.tsx
rename to packages/ui/src/forms/field/field.tsx
index 45b5a70b2ef..609bc304dbc 100644
--- a/packages/ui/src/v2/components/field-v2.tsx
+++ b/packages/ui/src/forms/field/field.tsx
@@ -11,8 +11,8 @@ import {
   type ComponentProps,
   type ParentProps,
 } from "solid-js"
-import { TooltipV2 } from "./tooltip-v2"
-import "./field-v2.css"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import "./field.css"
 
 type FieldContextValue = {
   controlId: string
@@ -40,14 +40,14 @@ function useField() {
 const CONTROL_SELECTOR = [
   "[data-slot='text-input-v2-input']",
   "[data-slot='textarea-v2-textarea']",
-  "[data-slot='inline-input-v2-input']",
+  "[data-component='inline-input']",
 ].join(", ")
 
-export interface FieldV2Props extends ComponentProps<"div"> {
+export interface FieldProps extends ComponentProps<"div"> {
   invalid?: boolean
 }
 
-function FieldV2Root(props: ParentProps<FieldV2Props>) {
+function FieldRoot(props: ParentProps<FieldProps>) {
   const [local, rest] = splitProps(props, ["invalid", "class", "classList", "children"])
 
   const controlId = `field-control-${createUniqueId()}`
@@ -86,7 +86,7 @@ function FieldV2Root(props: ParentProps<FieldV2Props>) {
     if (!control) return
 
     const shell = control.closest(
-      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input-v2']",
+      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input']",
     ) as HTMLElement | null
 
     control.id = controlId
@@ -173,7 +173,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
       <span data-slot="field-v2-label-text">{local.children}</span>
       <Show when={local.tooltip}>
         {(tooltip) => (
-          <TooltipV2 value={tooltip()}>
+          <Tooltip value={tooltip()}>
             <button
               type="button"
               data-slot="field-v2-label-info"
@@ -182,7 +182,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
             >
               <FieldLabelInfoIcon />
             </button>
-          </TooltipV2>
+          </Tooltip>
         )}
       </Show>
     </label>
@@ -255,11 +255,9 @@ function FieldControl(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export const FieldV2 = Object.assign(FieldV2Root, {
+export const Field = Object.assign(FieldRoot, {
   Label: FieldLabel,
   Prefix: FieldPrefix,
   Suffix: FieldSuffix,
   Control: FieldControl,
 })
-
-export const Field = FieldV2
diff --git a/packages/ui/src/components/inline-input.css b/packages/ui/src/forms/inline-input/inline-input.css
similarity index 100%
rename from packages/ui/src/components/inline-input.css
rename to packages/ui/src/forms/inline-input/inline-input.css
diff --git a/packages/ui/src/forms/inline-input/inline-input.stories.tsx b/packages/ui/src/forms/inline-input/inline-input.stories.tsx
new file mode 100644
index 00000000000..58f99967bb7
--- /dev/null
+++ b/packages/ui/src/forms/inline-input/inline-input.stories.tsx
@@ -0,0 +1,27 @@
+// @ts-nocheck
+import { InlineInput } from "./inline-input"
+
+const docs = `### Overview
+Compact inline input for short values.
+
+### API
+- Optional: \`width\` to set a fixed width.
+- Accepts standard input props.
+
+### Accessibility
+- Provide a label or aria-label when used standalone.
+
+### Theming/tokens
+- Uses \`data-component="inline-input"\`.
+`
+
+export default {
+  title: "UI/InlineInput",
+  id: "ui-inline-input",
+  component: InlineInput,
+  tags: ["autodocs"],
+  parameters: { docs: { description: { component: docs } } },
+}
+
+export const Basic = { args: { placeholder: "Type...", value: "Inline" } }
+export const FixedWidth = { args: { value: "80px", width: "80px" } }
diff --git a/packages/ui/src/components/inline-input.tsx b/packages/ui/src/forms/inline-input/inline-input.tsx
similarity index 100%
rename from packages/ui/src/components/inline-input.tsx
rename to packages/ui/src/forms/inline-input/inline-input.tsx
diff --git a/packages/ui/src/v2/components/radio-v2.css b/packages/ui/src/forms/radio/radio.css
similarity index 100%
rename from packages/ui/src/v2/components/radio-v2.css
rename to packages/ui/src/forms/radio/radio.css
diff --git a/packages/ui/src/forms/radio/radio.stories.tsx b/packages/ui/src/forms/radio/radio.stories.tsx
new file mode 100644
index 00000000000..b89eb6aa619
--- /dev/null
+++ b/packages/ui/src/forms/radio/radio.stories.tsx
@@ -0,0 +1,92 @@
+// @ts-nocheck
+import { createSignal } from "solid-js"
+import { RadioGroup, RadioItem } from "./radio"
+
+const docs = `### Overview
+Single-select options using Kobalte RadioGroup.
+
+### API
+- \`RadioGroup\` forwards Kobalte RadioGroup props (\`value\`, \`defaultValue\`, \`onChange\`, \`name\`, \`required\`, \`validationState\`, \`disabled\`).
+- \`RadioItem\` forwards Kobalte item props (\`value\`, \`disabled\`), and adds \`label\` and optional \`description\`.
+
+### Behavior
+- Controlled or uncontrolled via \`value\` / \`defaultValue\` on the group (items declare \`value\` only).
+
+### Theming/tokens
+- Uses \`data-component="radio-v2"\` and slot attributes.
+`
+
+export default {
+  title: "UI/Radio",
+  id: "ui-radio",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = {
+  render: () => (
+    <RadioGroup label="Notification frequency" defaultValue="daily" name="frequency">
+      <RadioItem value="daily" label="Daily" description="Once per day at 9am." />
+      <RadioItem value="weekly" label="Weekly" description="Every Monday morning." />
+      <RadioItem value="never" label="Never" description="No notifications." />
+    </RadioGroup>
+  ),
+}
+
+export const Controlled = {
+  render: () => {
+    const [value, setValue] = createSignal("weekly")
+    return (
+      <div style={{ display: "grid", gap: "12px" }}>
+        <RadioGroup label="Controlled" value={value()} onChange={(v) => setValue(v)} name="controlled-frequency">
+          <RadioItem value="daily" label="Daily" />
+          <RadioItem value="weekly" label="Weekly" />
+          <RadioItem value="never" label="Never" />
+        </RadioGroup>
+        <div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
+          Selected: {value()}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const States = {
+  render: () => (
+    <div style={{ display: "grid", gap: "20px" }}>
+      <RadioGroup label="Default" defaultValue="a" name="state-default">
+        <RadioItem value="a" label="Option A" />
+        <RadioItem value="b" label="Option B" description="Has a description." />
+      </RadioGroup>
+
+      <RadioGroup label="Disabled group" defaultValue="a" name="state-disabled" disabled>
+        <RadioItem value="a" label="Option A" />
+        <RadioItem value="b" label="Option B" />
+      </RadioGroup>
+
+      <RadioGroup label="Disabled item" defaultValue="a" name="state-disabled-item">
+        <RadioItem value="a" label="Enabled" />
+        <RadioItem value="b" label="Disabled" disabled />
+      </RadioGroup>
+
+      <RadioGroup
+        label="Invalid"
+        description="Pick one option."
+        defaultValue="a"
+        name="state-invalid"
+        validationState="invalid"
+        required
+      >
+        <RadioItem value="a" label="Option A" />
+        <RadioItem value="b" label="Option B" />
+      </RadioGroup>
+    </div>
+  ),
+}
diff --git a/packages/ui/src/v2/components/radio-v2.tsx b/packages/ui/src/forms/radio/radio.tsx
similarity index 56%
rename from packages/ui/src/v2/components/radio-v2.tsx
rename to packages/ui/src/forms/radio/radio.tsx
index 6035ffd30b7..932f35f107a 100644
--- a/packages/ui/src/v2/components/radio-v2.tsx
+++ b/packages/ui/src/forms/radio/radio.tsx
@@ -1,18 +1,28 @@
-import { RadioGroup as Kobalte } from "@kobalte/core/radio-group"
+import {
+  Description,
+  ErrorMessage,
+  Item,
+  ItemControl,
+  ItemIndicator,
+  ItemInput,
+  ItemLabel,
+  Label,
+  Root,
+} from "@kobalte/core/radio-group"
 import { Show, splitProps, type JSX } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
-import "./radio-v2.css"
+import "./radio.css"
 
-export interface RadioGroupV2Props extends ParentProps<ComponentProps<typeof Kobalte>> {
+export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>> {
   label?: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioGroupV2(props: RadioGroupV2Props) {
+export function RadioGroup(props: RadioGroupProps) {
   const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
   return (
-    <Kobalte
+    <Root
       {...others}
       data-component="radio-v2"
       classList={{
@@ -22,30 +32,30 @@ export function RadioGroupV2(props: RadioGroupV2Props) {
     >
       <Show when={local.label}>
         {(label) => (
-          <Kobalte.Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
+          <Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
             {label()}
-          </Kobalte.Label>
+          </Label>
         )}
       </Show>
       <Show when={local.description}>
-        {(description) => <Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>}
+        {(description) => <Description data-slot="radio-v2-description">{description()}</Description>}
       </Show>
       <div data-slot="radio-v2-items">{local.children}</div>
-      <Kobalte.ErrorMessage data-slot="radio-v2-error" />
-    </Kobalte>
+      <ErrorMessage data-slot="radio-v2-error" />
+    </Root>
   )
 }
 
-export interface RadioItemV2Props extends ComponentProps<typeof Kobalte.Item> {
+export interface RadioItemProps extends ComponentProps<typeof Item> {
   label: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioItemV2(props: RadioItemV2Props) {
+export function RadioItem(props: RadioItemProps) {
   const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
   return (
-    <Kobalte.Item
+    <Item
       {...others}
       data-slot="radio-v2-item"
       classList={{
@@ -53,20 +63,20 @@ export function RadioItemV2(props: RadioItemV2Props) {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <Kobalte.ItemInput data-slot="radio-v2-item-input" />
+      <ItemInput data-slot="radio-v2-item-input" />
       <div data-slot="radio-v2-item-control-stack">
-        <Kobalte.ItemControl data-slot="radio-v2-item-control">
-          <Kobalte.ItemIndicator data-slot="radio-v2-item-indicator" />
-        </Kobalte.ItemControl>
+        <ItemControl data-slot="radio-v2-item-control">
+          <ItemIndicator data-slot="radio-v2-item-indicator" />
+        </ItemControl>
       </div>
-      <Kobalte.ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
+      <ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
         <div data-slot="radio-v2-item-text">
           <span data-slot="radio-v2-item-label-text">{local.label}</span>
           <Show when={local.description}>
             {(description) => <span data-slot="radio-v2-item-description">{description()}</span>}
           </Show>
         </div>
-      </Kobalte.ItemLabel>
-    </Kobalte.Item>
+      </ItemLabel>
+    </Item>
   )
 }
diff --git a/packages/ui/src/v2/components/select-v2.css b/packages/ui/src/forms/select/select.css
similarity index 97%
rename from packages/ui/src/v2/components/select-v2.css
rename to packages/ui/src/forms/select/select.css
index faed53b9f78..ed92313788c 100644
--- a/packages/ui/src/v2/components/select-v2.css
+++ b/packages/ui/src/forms/select/select.css
@@ -1,4 +1,4 @@
-@import "./menu-v2.css";
+@import "../../navigation/menu/menu.css";
 
 /* Above modal dialogs (z-index 50); matches legacy select-content. */
 [data-popper-positioner]:has([data-slot="select-v2-content"]) {
@@ -46,7 +46,7 @@
   }
 }
 
-/* Trigger shell — aligned with text-input-v2 */
+/* Shared trigger structure for the inline control. */
 [data-component="select-v2"] {
   box-sizing: border-box;
   display: flex;
@@ -73,12 +73,6 @@
     box-shadow 85ms ease-out;
 }
 
-[data-component="select-v2"][data-appearance="large"] {
-  height: 32px;
-  padding-block: 0;
-  padding-inline: 0 8px;
-}
-
 [data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
     [data-expanded]
   ) {
diff --git a/packages/ui/src/v2/components/select-v2.stories.tsx b/packages/ui/src/forms/select/select.stories.tsx
similarity index 66%
rename from packages/ui/src/v2/components/select-v2.stories.tsx
rename to packages/ui/src/forms/select/select.stories.tsx
index 2e52be49c22..68018086048 100644
--- a/packages/ui/src/v2/components/select-v2.stories.tsx
+++ b/packages/ui/src/forms/select/select.stories.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { createSignal } from "solid-js"
-import { Field as FieldV2 } from "./field-v2"
-import { SelectV2 } from "./select-v2"
+import { Field } from "@opencode-ai/ui/field"
+import { Select } from "./select"
 
 const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
 
@@ -15,22 +15,21 @@ const cities: { city: string; region: Region }[] = [
 ]
 
 const docs = `### Overview
-Single-select built on Kobalte with a **TextInput v2** trigger surface and **Menu v2** list styling.
+Single-select built on Kobalte with an inline trigger and current menu styling.
 
 ### API
 - \`placeholder\`: Shown in the trigger when nothing is selected (same idea as text inputs).
 - \`options\`, \`current\`, \`onSelect\`: controlled selection (\`current\` is the selected option object).
 - \`value\` / \`label\`: accessors when options are not plain strings.
 - \`groupBy\`: groups options; section headers use menu group label styling.
-- \`appearance\`: \`base\` (28px), \`large\` (32px), or \`inline\` (compact settings-row trigger).
-- \`placement\`, \`gutter\`, \`sameWidth\`, \`flip\`, \`slide\`, \`fitViewport\`: forwarded to Kobalte popper (defaults match legacy \`Select\`: gutter 4, flip/slide on; inline uses \`bottom-end\` and \`sameWidth: false\`).
+- \`placement\`, \`gutter\`, \`sameWidth\`, \`flip\`, \`slide\`, \`fitViewport\`: forwarded to Kobalte popper.
 - \`invalid\`, \`disabled\`, \`numeric\`: match text input conventions.
 `
 
 export default {
-  title: "UI V2/Select",
-  id: "components-select-v2",
-  component: SelectV2,
+  title: "UI/Select",
+  id: "ui-select",
+  component: Select,
   tags: ["autodocs"],
   parameters: {
     frameHeight: "420px",
@@ -45,7 +44,6 @@ export default {
     placeholder: "Pick a fruit",
     invalid: false,
     disabled: false,
-    appearance: "base",
   },
   argTypes: {
     placeholder: {
@@ -57,10 +55,6 @@ export default {
     disabled: {
       control: "boolean",
     },
-    appearance: {
-      control: "select",
-      options: ["base", "large", "inline"],
-    },
   },
 }
 
@@ -68,28 +62,10 @@ export const Playground = {
   render: (args) => {
     const [current, setCurrent] = createSignal(undefined)
     return (
-      <SelectV2
+      <Select
         placeholder={args.placeholder}
         invalid={args.invalid}
         disabled={args.disabled}
-        appearance={args.appearance}
-        options={fruits}
-        current={current()}
-        onSelect={(v) => setCurrent(v === null ? undefined : v)}
-      />
-    )
-  },
-}
-
-export const Large = {
-  render: (args) => {
-    const [current, setCurrent] = createSignal(undefined)
-    return (
-      <SelectV2
-        placeholder={args.placeholder}
-        invalid={args.invalid}
-        disabled={args.disabled}
-        appearance="large"
         options={fruits}
         current={current()}
         onSelect={(v) => setCurrent(v === null ? undefined : v)}
@@ -102,11 +78,10 @@ export const Grouped = {
   render: (args) => {
     const [current, setCurrent] = createSignal(undefined)
     return (
-      <SelectV2<(typeof cities)[0]>
+      <Select<(typeof cities)[0]>
         placeholder={args.placeholder}
         invalid={args.invalid}
         disabled={args.disabled}
-        appearance={args.appearance}
         options={cities}
         current={current()}
         onSelect={(v) => setCurrent(v === null ? undefined : v)}
@@ -122,11 +97,10 @@ export const Invalid = {
   render: (args) => {
     const [current, setCurrent] = createSignal(undefined)
     return (
-      <SelectV2
+      <Select
         placeholder={args.placeholder}
         invalid
         disabled={args.disabled}
-        appearance={args.appearance}
         options={fruits}
         current={current()}
         onSelect={(v) => setCurrent(v === null ? undefined : v)}
@@ -137,11 +111,10 @@ export const Invalid = {
 
 export const Disabled = {
   render: (args) => (
-    <SelectV2
+    <Select
       placeholder={args.placeholder}
       invalid={args.invalid}
       disabled
-      appearance={args.appearance}
       options={fruits}
       current="Cherry"
       onSelect={() => {}}
@@ -149,26 +122,25 @@ export const Disabled = {
   ),
 }
 
-export const Field = {
+export const WithField = {
   parameters: { frameHeight: "500px" },
   render: (args) => {
     const [current, setCurrent] = createSignal(undefined)
     return (
       <div style={{ width: "280px" }}>
-        <FieldV2>
-          <FieldV2.Label tooltip="Choose one of the available options.">Fruit</FieldV2.Label>
-          <FieldV2.Prefix>Optional helper</FieldV2.Prefix>
-          <SelectV2
+        <Field>
+          <Field.Label tooltip="Choose one of the available options.">Fruit</Field.Label>
+          <Field.Prefix>Optional helper</Field.Prefix>
+          <Select
             placeholder={args.placeholder}
             invalid={args.invalid}
             disabled={args.disabled}
-            appearance={args.appearance}
             options={fruits}
             current={current()}
             onSelect={(v) => setCurrent(v === null ? undefined : v)}
           />
-          <FieldV2.Suffix>After selection</FieldV2.Suffix>
-        </FieldV2>
+          <Field.Suffix>After selection</Field.Suffix>
+        </Field>
       </div>
     )
   },
diff --git a/packages/ui/src/v2/components/select-v2.tsx b/packages/ui/src/forms/select/select.tsx
similarity index 78%
rename from packages/ui/src/v2/components/select-v2.tsx
rename to packages/ui/src/forms/select/select.tsx
index 57348ed3920..b806975d545 100644
--- a/packages/ui/src/v2/components/select-v2.tsx
+++ b/packages/ui/src/forms/select/select.tsx
@@ -1,6 +1,17 @@
-import { Select as Kobalte } from "@kobalte/core/select"
+import {
+  Content,
+  Item,
+  ItemIndicator,
+  ItemLabel,
+  Listbox,
+  Portal,
+  Root,
+  Section,
+  Trigger,
+  Value,
+} from "@kobalte/core/select"
 import { Show, createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
-import "./select-v2.css"
+import "./select.css"
 
 function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category: string; options: T[] }[] {
   if (!groupBy) {
@@ -40,8 +51,8 @@ const CheckSmall = () => (
   </svg>
 )
 
-export type SelectV2Props<T> = Omit<
-  ComponentProps<typeof Kobalte<T, { category: string; options: T[] }>>,
+export type SelectProps<T> = Omit<
+  ComponentProps<typeof Root<T, { category: string; options: T[] }>>,
   "value" | "onSelect" | "children" | "options" | "itemComponent" | "sectionComponent" | "defaultValue" | "multiple"
 > & {
   placeholder?: string
@@ -53,15 +64,13 @@ export type SelectV2Props<T> = Omit<
   groupBy?: (x: T) => string
   onSelect?: (value: T | null) => void
   onHighlight?: (value: T | undefined) => void | (() => void)
-  /** `base` / `large` match text-input-v2; `inline` is a compact settings-row trigger. */
-  appearance?: "base" | "large" | "inline"
   invalid?: boolean
   numeric?: boolean
   children?: (item: T) => JSX.Element
   valueClass?: string
 }
 
-export function SelectV2<T>(props: SelectV2Props<T>) {
+export function Select<T>(props: SelectProps<T>) {
   const [local, others] = splitProps(props, [
     "class",
     "classList",
@@ -75,7 +84,6 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
     "onHighlight",
     "onOpenChange",
     "children",
-    "appearance",
     "invalid",
     "numeric",
     "disabled",
@@ -88,8 +96,6 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
     "fitViewport",
   ])
 
-  const inline = () => (local.appearance ?? "base") === "inline"
-
   const state: { key?: string; cleanup?: void | (() => void) } = {}
 
   const stop = () => {
@@ -118,15 +124,15 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
   const grouped = createMemo(() => groupOptions(local.options, local.groupBy))
 
   return (
-    <Kobalte<T, { category: string; options: T[] }>
+    <Root<T, { category: string; options: T[] }>
       {...others}
       multiple={false}
       allowDuplicateSelectionEvents={false}
       disabled={local.disabled}
       data-component="select-v2-root"
-      placement={local.placement ?? (inline() ? "bottom-end" : "bottom-start")}
+      placement={local.placement ?? "bottom-end"}
       gutter={local.gutter ?? 4}
-      sameWidth={local.sameWidth ?? !inline()}
+      sameWidth={local.sameWidth ?? false}
       flip={local.flip ?? true}
       slide={local.slide ?? true}
       fitViewport={local.fitViewport ?? false}
@@ -137,31 +143,31 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
       optionGroupChildren="options"
       placeholder={local.placeholder}
       sectionComponent={(sectionProps) => (
-        <Kobalte.Section>
+        <Section>
           <Show when={sectionProps.section.rawValue.category}>
             <div data-slot="menu-v2-group-label">{sectionProps.section.rawValue.category}</div>
           </Show>
-        </Kobalte.Section>
+        </Section>
       )}
       itemComponent={(itemProps) => (
-        <Kobalte.Item
+        <Item
           {...itemProps}
           data-component="menu-v2-item"
           onPointerEnter={() => move(itemProps.item.rawValue)}
           onPointerMove={() => move(itemProps.item.rawValue)}
           onFocus={() => move(itemProps.item.rawValue)}
         >
-          <Kobalte.ItemLabel data-slot="menu-v2-item-content" as="span">
+          <ItemLabel data-slot="menu-v2-item-content" as="span">
             {local.children
               ? local.children(itemProps.item.rawValue)
               : local.label
                 ? local.label(itemProps.item.rawValue)
                 : String(itemProps.item.rawValue as string)}
-          </Kobalte.ItemLabel>
-          <Kobalte.ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
+          </ItemLabel>
+          <ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
             <CheckSmall />
-          </Kobalte.ItemIndicator>
-        </Kobalte.Item>
+          </ItemIndicator>
+        </Item>
       )}
       onChange={(next) => {
         const v = next == null ? null : Array.isArray(next) ? ((next[0] as T) ?? null) : (next as T)
@@ -173,10 +179,10 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
         if (!open) stop()
       }}
     >
-      <Kobalte.Trigger
+      <Trigger
         as="div"
         data-component="select-v2"
-        data-appearance={local.appearance ?? "base"}
+        data-appearance="inline"
         data-invalid={local.invalid ? "" : undefined}
         data-numeric={local.numeric ? "" : undefined}
         disabled={local.disabled}
@@ -187,23 +193,23 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
         }}
       >
         <div data-slot="select-v2-value">
-          <Kobalte.Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
+          <Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
             {(st) => {
               const selected = st.selectedOption()
               if (local.label && selected != null) return local.label(selected)
               return selected != null ? (selected as string) : ""
             }}
-          </Kobalte.Value>
+          </Value>
         </div>
         <span data-slot="select-v2-chevron" aria-hidden="true">
           <ChevronDown />
         </span>
-      </Kobalte.Trigger>
-      <Kobalte.Portal>
-        <Kobalte.Content data-component="menu-v2-content" data-slot="select-v2-content">
-          <Kobalte.Listbox data-slot="select-v2-listbox" />
-        </Kobalte.Content>
-      </Kobalte.Portal>
-    </Kobalte>
+      </Trigger>
+      <Portal>
+        <Content data-component="menu-v2-content" data-slot="select-v2-content">
+          <Listbox data-slot="select-v2-listbox" />
+        </Content>
+      </Portal>
+    </Root>
   )
 }
diff --git a/packages/ui/src/v2/components/switch-v2.css b/packages/ui/src/forms/switch/switch.css
similarity index 58%
rename from packages/ui/src/v2/components/switch-v2.css
rename to packages/ui/src/forms/switch/switch.css
index d16f259bfef..2b73627243c 100644
--- a/packages/ui/src/v2/components/switch-v2.css
+++ b/packages/ui/src/forms/switch/switch.css
@@ -160,3 +160,113 @@
     pointer-events: none;
   }
 }
+
+[data-component="switch"][data-appearance="standard"] {
+  [data-slot="switch-control"] {
+    padding: 0;
+    width: 28px;
+    height: 16px;
+    border-radius: 3px;
+    border: 1px solid var(--border-weak-base);
+    background: var(--surface-base);
+    box-shadow: none;
+    transition:
+      background-color 150ms,
+      border-color 150ms;
+  }
+
+  [data-slot="switch-thumb"] {
+    box-sizing: content-box;
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+    border: 1px solid var(--border-base);
+    background: var(--icon-invert-base);
+    box-shadow:
+      0 1px 2px -1px rgba(19, 16, 16, 0.04),
+      0 1px 2px 0 rgba(19, 16, 16, 0.06),
+      0 1px 3px 0 rgba(19, 16, 16, 0.08);
+    transform: translateX(-1px);
+    transition:
+      transform 150ms,
+      background-color 150ms;
+  }
+
+  [data-slot="switch-label"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="switch-description"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="switch-error"] {
+    color: var(--text-error);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    border-color: var(--border-hover);
+    background: var(--surface-hover);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    width: 14px;
+    border-radius: 2px;
+  }
+
+  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
+    border-color: var(--border-focus);
+    outline: none;
+    box-shadow: var(--shadow-xs-border-focus);
+  }
+
+  &[data-checked] [data-slot="switch-control"] {
+    border-color: var(--icon-strong-base);
+    background: var(--icon-strong-base);
+    box-shadow: none;
+  }
+
+  &[data-checked] [data-slot="switch-thumb"],
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    width: 14px;
+    border: none;
+    border-radius: 2px;
+    transform: translateX(12px);
+    background: var(--icon-invert-base);
+  }
+
+  &:dir(rtl)[data-checked] [data-slot="switch-thumb"],
+  &:dir(rtl)[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    transform: translateX(-12px);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    border-color: var(--border-hover);
+    background: var(--surface-hover);
+  }
+
+  &[data-disabled] [data-slot="switch-control"] {
+    border-color: var(--border-disabled);
+    background: var(--surface-disabled);
+    opacity: 1;
+  }
+
+  &[data-disabled] [data-slot="switch-thumb"] {
+    background: var(--icon-disabled);
+  }
+
+  &[data-invalid] [data-slot="switch-control"] {
+    border-color: var(--border-error);
+  }
+}
diff --git a/packages/ui/src/v2/components/switch-v2.stories.tsx b/packages/ui/src/forms/switch/switch.stories.tsx
similarity index 68%
rename from packages/ui/src/v2/components/switch-v2.stories.tsx
rename to packages/ui/src/forms/switch/switch.stories.tsx
index 85c056c7e3c..2cc0eb32801 100644
--- a/packages/ui/src/v2/components/switch-v2.stories.tsx
+++ b/packages/ui/src/forms/switch/switch.stories.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Switch } from "./switch-v2"
+import { Switch } from "./switch"
 
 const docs = `### Overview
 Toggle control for binary settings.
@@ -8,11 +8,11 @@ Use in settings panels or forms.
 
 ### API
 - Uses Kobalte Switch props (\`checked\`, \`defaultChecked\`, \`onChange\`).
-- Optional: \`hideLabel\`.
+- Optional: \`appearance\`, \`hideLabel\`, and \`description\`.
 - Children render as the label.
 
 ### Variants and states
-- Checked/unchecked, disabled states.
+- Standard and compact appearances; checked/unchecked and disabled states.
 
 ### Behavior
 - Controlled or uncontrolled usage via Kobalte props.
@@ -26,8 +26,8 @@ Use in settings panels or forms.
 `
 
 export default {
-  title: "UI V2/Switch",
-  id: "components-switch-v2",
+  title: "UI/Switch",
+  id: "ui-switch",
   component: Switch,
   tags: ["autodocs"],
   parameters: {
@@ -45,6 +45,19 @@ export default {
 
 export const Basic = {}
 
+export const Appearances = {
+  render: () => (
+    <div style={{ display: "grid", gap: "12px" }}>
+      <Switch appearance="standard" defaultChecked>
+        Standard
+      </Switch>
+      <Switch appearance="compact" defaultChecked>
+        Compact
+      </Switch>
+    </div>
+  ),
+}
+
 export const States = {
   render: () => (
     <div style={{ display: "grid", gap: "12px" }}>
diff --git a/packages/ui/src/forms/switch/switch.tsx b/packages/ui/src/forms/switch/switch.tsx
new file mode 100644
index 00000000000..51e78a972bb
--- /dev/null
+++ b/packages/ui/src/forms/switch/switch.tsx
@@ -0,0 +1,34 @@
+import { Control, Description, ErrorMessage, Input, Label, Root, Thumb } from "@kobalte/core/switch"
+import { Show, splitProps } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+import "./switch.css"
+
+export interface SwitchProps extends ParentProps<ComponentProps<typeof Root>> {
+  // I think we should consolidate - ask designers.
+  appearance?: "standard" | "compact"
+  hideLabel?: boolean
+  description?: string
+}
+
+export function Switch(props: SwitchProps) {
+  const [local, others] = splitProps(props, ["children", "class", "appearance", "hideLabel", "description"])
+  return (
+    <Root {...others} class={local.class} data-component="switch" data-appearance={local.appearance ?? "compact"}>
+      <Input data-slot="switch-input" />
+      <Show when={local.children}>
+        {(label) => (
+          <Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
+            {label()}
+          </Label>
+        )}
+      </Show>
+      <Show when={local.description}>
+        <Description data-slot="switch-description">{local.description}</Description>
+      </Show>
+      <Control data-slot="switch-control">
+        <Thumb data-slot="switch-thumb" />
+      </Control>
+      <ErrorMessage data-slot="switch-error" />
+    </Root>
+  )
+}
diff --git a/packages/ui/src/v2/components/text-input-v2.css b/packages/ui/src/forms/text-input/text-input.css
similarity index 100%
rename from packages/ui/src/v2/components/text-input-v2.css
rename to packages/ui/src/forms/text-input/text-input.css
diff --git a/packages/ui/src/v2/components/text-input-v2.stories.tsx b/packages/ui/src/forms/text-input/text-input.stories.tsx
similarity index 63%
rename from packages/ui/src/v2/components/text-input-v2.stories.tsx
rename to packages/ui/src/forms/text-input/text-input.stories.tsx
index 8a77b891a8b..809031721d4 100644
--- a/packages/ui/src/v2/components/text-input-v2.stories.tsx
+++ b/packages/ui/src/forms/text-input/text-input.stories.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { createSignal } from "solid-js"
-import { Field as FieldV2 } from "./field-v2"
-import { TextInputV2 } from "./text-input-v2"
+import { Field } from "@opencode-ai/ui/field"
+import { TextInput } from "./text-input"
 
 const docs = `### Overview
 Compact single-line text field with neutral elevation, optional trailing copy action, and theme tokens.
@@ -26,9 +26,9 @@ Compose with \`Field\` for label, helper prefix/suffix, and tooltip — see the
 `
 
 export default {
-  title: "UI V2/TextInput",
-  id: "components-text-input-v2",
-  component: TextInputV2,
+  title: "UI/TextInput",
+  id: "ui-text-input",
+  component: TextInput,
   tags: ["autodocs"],
   parameters: {
     frameHeight: "300px",
@@ -82,7 +82,7 @@ export const Controlled = {
     const [value, setValue] = createSignal("Controlled value")
     return (
       <div style={{ display: "grid", gap: "12px" }}>
-        <TextInputV2 value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
+        <TextInput value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
         <div
           style={{
             "font-family": "var(--v2-font-family-sans)",
@@ -100,29 +100,29 @@ export const Controlled = {
 export const Appearances = {
   render: () => (
     <div style={{ display: "grid", gap: "20px", width: "280px" }}>
-      <TextInputV2 appearance="base" placeholder="Base (28px)" defaultValue="Base" />
-      <TextInputV2 appearance="large" placeholder="Large (32px)" defaultValue="Large" />
-      <TextInputV2 appearance="large" placeholder="Large with copy" defaultValue="copy-me" showCopyButton />
+      <TextInput appearance="base" placeholder="Base (28px)" defaultValue="Base" />
+      <TextInput appearance="large" placeholder="Large (32px)" defaultValue="Large" />
+      <TextInput appearance="large" placeholder="Large with copy" defaultValue="copy-me" showCopyButton />
     </div>
   ),
 }
 
-export const Field = {
+export const WithField = {
   parameters: { frameHeight: "500px" },
   render: () => (
     <div style={{ display: "grid", gap: "24px", width: "280px" }}>
-      <FieldV2>
-        <FieldV2.Label tooltip="Additional context">Label</FieldV2.Label>
-        <FieldV2.Prefix>Prefix</FieldV2.Prefix>
-        <TextInputV2 placeholder="Text" showCopyButton />
-        <FieldV2.Suffix>Suffix</FieldV2.Suffix>
-      </FieldV2>
-      <FieldV2 invalid>
-        <FieldV2.Label>Label</FieldV2.Label>
-        <FieldV2.Prefix>Prefix</FieldV2.Prefix>
-        <TextInputV2 placeholder="Text" defaultValue="Invalid" showCopyButton />
-        <FieldV2.Suffix>Suffix</FieldV2.Suffix>
-      </FieldV2>
+      <Field>
+        <Field.Label tooltip="Additional context">Label</Field.Label>
+        <Field.Prefix>Prefix</Field.Prefix>
+        <TextInput placeholder="Text" showCopyButton />
+        <Field.Suffix>Suffix</Field.Suffix>
+      </Field>
+      <Field invalid>
+        <Field.Label>Label</Field.Label>
+        <Field.Prefix>Prefix</Field.Prefix>
+        <TextInput placeholder="Text" defaultValue="Invalid" showCopyButton />
+        <Field.Suffix>Suffix</Field.Suffix>
+      </Field>
     </div>
   ),
 }
@@ -130,12 +130,12 @@ export const Field = {
 export const States = {
   render: () => (
     <div style={{ display: "grid", gap: "20px", width: "280px" }}>
-      <TextInputV2 placeholder="Default" />
-      <TextInputV2 placeholder="With value" defaultValue="Hello world" />
-      <TextInputV2 placeholder="With copy" defaultValue="copy-me" showCopyButton />
-      <TextInputV2 placeholder="Invalid" defaultValue="Invalid value" invalid showCopyButton />
-      <TextInputV2 placeholder="Disabled" disabled />
-      <TextInputV2 placeholder="Disabled with value" defaultValue="Read only" disabled showCopyButton />
+      <TextInput placeholder="Default" />
+      <TextInput placeholder="With value" defaultValue="Hello world" />
+      <TextInput placeholder="With copy" defaultValue="copy-me" showCopyButton />
+      <TextInput placeholder="Invalid" defaultValue="Invalid value" invalid showCopyButton />
+      <TextInput placeholder="Disabled" disabled />
+      <TextInput placeholder="Disabled with value" defaultValue="Read only" disabled showCopyButton />
     </div>
   ),
 }
diff --git a/packages/ui/src/v2/components/text-input-v2.tsx b/packages/ui/src/forms/text-input/text-input.tsx
similarity index 93%
rename from packages/ui/src/v2/components/text-input-v2.tsx
rename to packages/ui/src/forms/text-input/text-input.tsx
index 8b1e748a3bf..df1015f301d 100644
--- a/packages/ui/src/v2/components/text-input-v2.tsx
+++ b/packages/ui/src/forms/text-input/text-input.tsx
@@ -1,9 +1,9 @@
 import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
-import { Icon } from "./icon"
+import { Icon } from "@opencode-ai/ui/icon"
 import { useI18n } from "../../context/i18n"
-import "./text-input-v2.css"
+import "./text-input.css"
 
-export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
+export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
   /** Icon or adornment shown before the field value. */
   leadingIcon?: JSX.Element
   /** Show the trailing copy action. */
@@ -25,7 +25,7 @@ export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type">
   type?: ComponentProps<"input">["type"]
 }
 
-export function TextInputV2(props: TextInputV2Props) {
+export function TextInput(props: TextInputProps) {
   const i18n = useI18n()
   const [local, inputProps] = splitProps(props, [
     "class",
diff --git a/packages/ui/src/v2/components/textarea-v2.css b/packages/ui/src/forms/textarea/textarea.css
similarity index 100%
rename from packages/ui/src/v2/components/textarea-v2.css
rename to packages/ui/src/forms/textarea/textarea.css
diff --git a/packages/ui/src/v2/components/textarea-v2.stories.tsx b/packages/ui/src/forms/textarea/textarea.stories.tsx
similarity index 62%
rename from packages/ui/src/v2/components/textarea-v2.stories.tsx
rename to packages/ui/src/forms/textarea/textarea.stories.tsx
index 36c4f4a61ab..7bbfa6e361d 100644
--- a/packages/ui/src/v2/components/textarea-v2.stories.tsx
+++ b/packages/ui/src/forms/textarea/textarea.stories.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { createSignal } from "solid-js"
-import { Field as FieldV2 } from "./field-v2"
-import { TextareaV2 } from "./textarea-v2"
+import { Field } from "@opencode-ai/ui/field"
+import { Textarea } from "./textarea"
 
 const docs = `### Overview
 Multiline text field with the same neutral elevation, states, and tokens as TextInput v2.
@@ -21,9 +21,9 @@ Compose with \`Field\` for label, helper prefix/suffix, and tooltip — see the
 `
 
 export default {
-  title: "UI V2/Textarea",
-  id: "components-textarea-v2",
-  component: TextareaV2,
+  title: "UI/Textarea",
+  id: "ui-textarea",
+  component: Textarea,
   tags: ["autodocs"],
   parameters: {
     frameHeight: "400px",
@@ -63,7 +63,7 @@ export const Controlled = {
     const [value, setValue] = createSignal("Controlled value")
     return (
       <div style={{ display: "grid", gap: "12px", width: "280px" }}>
-        <TextareaV2 value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
+        <Textarea value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
         <div
           style={{
             "font-family": "var(--v2-font-family-sans)",
@@ -78,22 +78,22 @@ export const Controlled = {
   },
 }
 
-export const Field = {
+export const WithField = {
   parameters: { frameHeight: "500px" },
   render: () => (
     <div style={{ display: "grid", gap: "24px", width: "280px" }}>
-      <FieldV2>
-        <FieldV2.Label tooltip="Additional context">Label</FieldV2.Label>
-        <FieldV2.Prefix>Prefix</FieldV2.Prefix>
-        <TextareaV2 placeholder="Text" />
-        <FieldV2.Suffix>Suffix</FieldV2.Suffix>
-      </FieldV2>
-      <FieldV2 invalid>
-        <FieldV2.Label>Label</FieldV2.Label>
-        <FieldV2.Prefix>Prefix</FieldV2.Prefix>
-        <TextareaV2 placeholder="Text" defaultValue="Invalid value" />
-        <FieldV2.Suffix>Suffix</FieldV2.Suffix>
-      </FieldV2>
+      <Field>
+        <Field.Label tooltip="Additional context">Label</Field.Label>
+        <Field.Prefix>Prefix</Field.Prefix>
+        <Textarea placeholder="Text" />
+        <Field.Suffix>Suffix</Field.Suffix>
+      </Field>
+      <Field invalid>
+        <Field.Label>Label</Field.Label>
+        <Field.Prefix>Prefix</Field.Prefix>
+        <Textarea placeholder="Text" defaultValue="Invalid value" />
+        <Field.Suffix>Suffix</Field.Suffix>
+      </Field>
     </div>
   ),
 }
@@ -101,11 +101,11 @@ export const Field = {
 export const States = {
   render: () => (
     <div style={{ display: "grid", gap: "20px", width: "280px" }}>
-      <TextareaV2 placeholder="Default" />
-      <TextareaV2 placeholder="With value" defaultValue="Hello world" />
-      <TextareaV2 placeholder="Invalid" defaultValue="Invalid value" invalid />
-      <TextareaV2 placeholder="Disabled" disabled />
-      <TextareaV2 placeholder="Disabled with value" defaultValue="Read only" disabled />
+      <Textarea placeholder="Default" />
+      <Textarea placeholder="With value" defaultValue="Hello world" />
+      <Textarea placeholder="Invalid" defaultValue="Invalid value" invalid />
+      <Textarea placeholder="Disabled" disabled />
+      <Textarea placeholder="Disabled with value" defaultValue="Read only" disabled />
     </div>
   ),
 }
diff --git a/packages/ui/src/v2/components/textarea-v2.tsx b/packages/ui/src/forms/textarea/textarea.tsx
similarity index 83%
rename from packages/ui/src/v2/components/textarea-v2.tsx
rename to packages/ui/src/forms/textarea/textarea.tsx
index 3d01499f3c8..02bde2473aa 100644
--- a/packages/ui/src/v2/components/textarea-v2.tsx
+++ b/packages/ui/src/forms/textarea/textarea.tsx
@@ -1,12 +1,12 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./textarea-v2.css"
+import "./textarea.css"
 
-export interface TextareaV2Props extends ComponentProps<"textarea"> {
+export interface TextareaProps extends ComponentProps<"textarea"> {
   /** Error styling for the field and value text. */
   invalid?: boolean
 }
 
-export function TextareaV2(props: TextareaV2Props) {
+export function Textarea(props: TextareaProps) {
   const [local, textareaProps] = splitProps(props, ["class", "classList", "invalid", "disabled", "rows"])
 
   return (
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/icons/icon/additional-icons.ts
similarity index 95%
rename from packages/ui/src/components/icon.tsx
rename to packages/ui/src/icons/icon/additional-icons.ts
index 09d161faa68..3e61e193f38 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/icons/icon/additional-icons.ts
@@ -1,6 +1,4 @@
-import { onMount, splitProps, type ComponentProps } from "solid-js"
-
-const icons = {
+export const additionalIcons = {
   "align-right": `<path d="M12.292 6.04167L16.2503 9.99998L12.292 13.9583M2.91699 9.99998H15.6253M17.0837 3.75V16.25" stroke="currentColor" stroke-linecap="square"/>`,
   "arrow-up": `<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99991 2.24121L16.0921 8.33343L15.2083 9.21731L10.6249 4.63397V17.5001H9.37492V4.63398L4.7916 9.21731L3.90771 8.33343L9.99991 2.24121Z" fill="currentColor"/>`,
   "arrow-left": `<path d="M8.33464 4.58398L2.91797 10.0007L8.33464 15.4173M3.33464 10.0007H17.0846" stroke="currentColor" stroke-linecap="square"/>`,
@@ -112,76 +110,6 @@ const icons = {
   "arrow-undo-down": `<path d="M4.08333 11.0859L1.75 8.7526L4.08333 6.41927M2.33333 8.7526L12.5417 8.7526L12.5417 3.21094L7 3.21094" stroke="currentColor" stroke-width="1" stroke-linecap="square"/>`,
 }
 
-const spriteID = "opencode-icon-sprite"
-const symbol = (name: keyof typeof icons) => `opencode-icon-${name}`
-let spriteInserted = false
-
-function viewBox(name: keyof typeof icons) {
+export function additionalIconViewBox(name: keyof typeof additionalIcons) {
   return name === "magnifying-glass" || name === "arrow-undo-down" || name === "subagent" ? "0 0 16 16" : "0 0 20 20"
 }
-
-function ensureSprite() {
-  if (spriteInserted) return
-  if (typeof document === "undefined") return
-  if (document.getElementById(spriteID)) {
-    spriteInserted = true
-    return
-  }
-  const body = document.body as HTMLElement | null
-  if (!body) return
-
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-  svg.id = spriteID
-  svg.setAttribute("aria-hidden", "true")
-  svg.setAttribute("width", "0")
-  svg.setAttribute("height", "0")
-  svg.style.position = "absolute"
-  svg.style.overflow = "hidden"
-  svg.innerHTML = Object.entries(icons)
-    .map(([name, path]) => {
-      const key = name as keyof typeof icons
-      return `<symbol id="${symbol(key)}" viewBox="${viewBox(key)}">${path}</symbol>`
-    })
-    .join("")
-  body.insertBefore(svg, body.firstChild)
-  spriteInserted = true
-}
-
-export interface IconProps extends ComponentProps<"svg"> {
-  name: keyof typeof icons
-  size?: "small" | "normal" | "medium" | "large"
-}
-
-export function Icon(props: IconProps) {
-  const [local, others] = splitProps(props, ["name", "size", "class", "classList"])
-  onMount(ensureSprite)
-
-  return (
-    <div
-      data-component="icon"
-      data-size={local.size || "normal"}
-      data-directional={
-        local.name === "arrow-left" ||
-        local.name === "arrow-right" ||
-        local.name === "chevron-left" ||
-        local.name === "chevron-right"
-          ? true
-          : undefined
-      }
-    >
-      <svg
-        data-slot="icon-svg"
-        classList={{
-          ...local.classList,
-          [local.class ?? ""]: !!local.class,
-        }}
-        fill="none"
-        viewBox={viewBox(local.name)}
-        aria-hidden="true"
-        {...others}
-      >
-        <use href={`#${symbol(local.name)}`} />
-      </svg>
-    </div>
-  )
-}
diff --git a/packages/ui/src/icons/icon/icon.css b/packages/ui/src/icons/icon/icon.css
new file mode 100644
index 00000000000..e6fd04c8d52
--- /dev/null
+++ b/packages/ui/src/icons/icon/icon.css
@@ -0,0 +1,3 @@
+:dir(rtl) [data-slot="icon-svg"][data-directional] {
+  transform: scaleX(-1);
+}
diff --git a/packages/ui/src/icons/icon/icon.stories.tsx b/packages/ui/src/icons/icon/icon.stories.tsx
new file mode 100644
index 00000000000..bd06cf3dcc6
--- /dev/null
+++ b/packages/ui/src/icons/icon/icon.stories.tsx
@@ -0,0 +1,82 @@
+import { For } from "solid-js"
+import { Icon, type IconProps } from "./icon"
+
+const names = [
+  "archive",
+  "arrow-left",
+  "arrow-right",
+  "branch",
+  "check",
+  "chevron-down",
+  "close",
+  "edit",
+  "folder",
+  "help",
+  "magnifying-glass",
+  "menu",
+  "monitor",
+  "outline-copy",
+  "outline-dots",
+  "plus",
+  "review",
+  "settings-gear",
+  "trash",
+  "workspace",
+] satisfies IconProps["name"][]
+
+export default {
+  title: "UI/Icon",
+  id: "ui-icon",
+  component: Icon,
+  tags: ["autodocs"],
+  args: {
+    name: "check",
+    size: "normal",
+  },
+  argTypes: {
+    name: { control: "select", options: names },
+    size: { control: "select", options: ["small", "normal", "large"] },
+  },
+}
+
+export const Playground = {}
+
+export const Sizes = {
+  render: () => (
+    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
+      <Icon name="check" size="small" />
+      <Icon name="check" size="normal" />
+      <Icon name="check" size="large" />
+    </div>
+  ),
+}
+
+export const Directional = {
+  render: () => (
+    <div style={{ display: "grid", gap: "12px" }}>
+      <div dir="ltr" style={{ display: "flex", gap: "8px" }}>
+        <Icon name="arrow-left" />
+        <Icon name="arrow-right" />
+      </div>
+      <div dir="rtl" style={{ display: "flex", gap: "8px" }}>
+        <Icon name="arrow-left" />
+        <Icon name="arrow-right" />
+      </div>
+    </div>
+  ),
+}
+
+export const Gallery = {
+  render: () => (
+    <div style={{ display: "grid", gap: "12px", "grid-template-columns": "repeat(5, minmax(88px, 1fr))" }}>
+      <For each={names}>
+        {(name) => (
+          <div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
+            <Icon name={name} />
+            <span style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{name}</span>
+          </div>
+        )}
+      </For>
+    </div>
+  ),
+}
diff --git a/packages/ui/src/v2/components/icon.tsx b/packages/ui/src/icons/icon/icon.tsx
similarity index 92%
rename from packages/ui/src/v2/components/icon.tsx
rename to packages/ui/src/icons/icon/icon.tsx
index 2b933bcabd1..7ccb251420a 100644
--- a/packages/ui/src/v2/components/icon.tsx
+++ b/packages/ui/src/icons/icon/icon.tsx
@@ -1,4 +1,6 @@
 import { onMount, type ComponentProps, splitProps } from "solid-js"
+import { additionalIcons, additionalIconViewBox } from "./additional-icons"
+import "./icon.css"
 
 // Consumers center the SVG viewport, so each icon must center its artwork within its viewBox.
 const icons = {
@@ -164,10 +166,19 @@ const icons = {
   },
 }
 
+type IconName = keyof typeof icons | keyof typeof additionalIcons
+
 const spriteID = "opencode-v2-icon-sprite"
-const symbol = (name: keyof typeof icons) => `opencode-v2-icon-${name}`
+const symbol = (name: IconName) => `opencode-v2-icon-${name}`
 let spriteInserted = false
 
+function getIcon(name: IconName) {
+  const icon = icons[name as keyof typeof icons]
+  if (icon) return icon
+  const body = additionalIcons[name as keyof typeof additionalIcons]
+  return { body, viewBox: additionalIconViewBox(name as keyof typeof additionalIcons) }
+}
+
 function ensureSprite() {
   if (spriteInserted) return
   if (typeof document === "undefined") return
@@ -183,25 +194,26 @@ function ensureSprite() {
   svg.setAttribute("height", "0")
   svg.style.position = "absolute"
   svg.style.overflow = "hidden"
-  svg.innerHTML = Object.entries(icons)
-    .map(
-      ([name, icon]) =>
-        `<symbol id="${symbol(name as keyof typeof icons)}" viewBox="${icon.viewBox}">${icon.body}</symbol>`,
-    )
+  svg.innerHTML = Array.from(new Set<IconName>([...Object.keys(additionalIcons), ...Object.keys(icons)] as IconName[]))
+    .map((name) => `<symbol id="${symbol(name)}" viewBox="${getIcon(name).viewBox}">${getIcon(name).body}</symbol>`)
     .join("")
   document.body.insertBefore(svg, document.body.firstChild)
   spriteInserted = true
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
-  name: keyof typeof icons | (string & {})
+  name: IconName | (string & {})
   size?: "small" | "normal" | "large"
 }
 
 export function Icon(props: IconProps) {
   const [split, rest] = splitProps(props, ["name", "size"])
-  const iconName = () => (icons[split.name as keyof typeof icons] ? (split.name as keyof typeof icons) : "plus")
-  const icon = () => icons[iconName()]
+  const iconName = (): IconName => {
+    if (icons[split.name as keyof typeof icons]) return split.name as keyof typeof icons
+    if (additionalIcons[split.name as keyof typeof additionalIcons]) return split.name as keyof typeof additionalIcons
+    return "plus"
+  }
+  const icon = () => getIcon(iconName())
   const pixelSize = split.size === "small" ? 14 : split.size === "large" ? 20 : 16
   onMount(ensureSprite)
 
@@ -209,6 +221,14 @@ export function Icon(props: IconProps) {
     <svg
       {...rest}
       data-slot="icon-svg"
+      data-directional={
+        iconName() === "arrow-left" ||
+        iconName() === "arrow-right" ||
+        iconName() === "chevron-left" ||
+        iconName() === "chevron-right"
+          ? ""
+          : undefined
+      }
       width={pixelSize}
       height={pixelSize}
       viewBox={icon().viewBox}
diff --git a/packages/ui/src/v2/components/divider-v2.css b/packages/ui/src/layout/divider/divider.css
similarity index 100%
rename from packages/ui/src/v2/components/divider-v2.css
rename to packages/ui/src/layout/divider/divider.css
diff --git a/packages/ui/src/v2/components/divider-v2.stories.tsx b/packages/ui/src/layout/divider/divider.stories.tsx
similarity index 81%
rename from packages/ui/src/v2/components/divider-v2.stories.tsx
rename to packages/ui/src/layout/divider/divider.stories.tsx
index e2807ec717a..6bf13d18f8b 100644
--- a/packages/ui/src/v2/components/divider-v2.stories.tsx
+++ b/packages/ui/src/layout/divider/divider.stories.tsx
@@ -1,4 +1,4 @@
-import { DividerV2 } from "./divider-v2"
+import { Divider } from "./divider"
 
 const docs = `### Overview
 Horizontal hairline divider for v2 layouts.
@@ -13,9 +13,9 @@ Horizontal hairline divider for v2 layouts.
 `
 
 export default {
-  title: "UI V2/Divider",
-  id: "components-divider-v2",
-  component: DividerV2,
+  title: "UI/Divider",
+  id: "ui-divider",
+  component: Divider,
   tags: ["autodocs"],
   parameters: {
     frameWidth: "320px",
@@ -31,7 +31,7 @@ export const Basic = {
   render: () => (
     <div style={{ display: "flex", "flex-direction": "column", gap: "16px", padding: "16px" }}>
       <span>Above</span>
-      <DividerV2 />
+      <Divider />
       <span>Below</span>
     </div>
   ),
diff --git a/packages/ui/src/v2/components/divider-v2.tsx b/packages/ui/src/layout/divider/divider.tsx
similarity index 72%
rename from packages/ui/src/v2/components/divider-v2.tsx
rename to packages/ui/src/layout/divider/divider.tsx
index 2c9f4dbea0c..9647836cee7 100644
--- a/packages/ui/src/v2/components/divider-v2.tsx
+++ b/packages/ui/src/layout/divider/divider.tsx
@@ -1,9 +1,9 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./divider-v2.css"
+import "./divider.css"
 
-export interface DividerV2Props extends ComponentProps<"div"> {}
+export interface DividerProps extends ComponentProps<"div"> {}
 
-export function DividerV2(props: DividerV2Props) {
+export function Divider(props: DividerProps) {
   const [local, rest] = splitProps(props, ["class", "classList"])
   return (
     <div
diff --git a/packages/ui/src/v2/components/menu-v2.css b/packages/ui/src/navigation/menu/menu.css
similarity index 60%
rename from packages/ui/src/v2/components/menu-v2.css
rename to packages/ui/src/navigation/menu/menu.css
index 5fb669a3c34..0d676a0d33d 100644
--- a/packages/ui/src/v2/components/menu-v2.css
+++ b/packages/ui/src/navigation/menu/menu.css
@@ -31,6 +31,10 @@
   }
 }
 
+:dir(rtl) [data-slot="menu-v2-item-chevron"] {
+  transform: scaleX(-1);
+}
+
 [data-component="menu-v2-item"] {
   --menu-v2-fg: var(--v2-text-text-base);
   --menu-v2-fg-muted: var(--v2-text-text-faint);
@@ -178,6 +182,123 @@
   font-variant-numeric: tabular-nums;
 }
 
+[data-component="menu-v2-content"][data-appearance="standard"] {
+  min-width: 8rem;
+  padding: 4px;
+  overflow: hidden;
+  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-stronger-non-alpha);
+  background-clip: padding-box;
+  box-shadow: var(--shadow-md);
+  z-index: 60;
+  animation: dropdown-menu-open 150ms ease-out;
+
+  &[data-closed] {
+    animation: dropdown-menu-close 150ms ease-out;
+  }
+
+  [data-component="menu-v2-item"] {
+    position: relative;
+    height: auto;
+    min-height: 0;
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    color: var(--text-strong);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    font-variant-numeric: normal;
+    -webkit-font-smoothing: auto;
+    text-rendering: auto;
+
+    [data-slot="menu-v2-item-content"] {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+    }
+
+    &[data-highlighted] {
+      background: var(--surface-raised-base-hover);
+    }
+
+    &[data-disabled] {
+      color: var(--text-weak);
+      opacity: 1;
+    }
+
+    &[data-checked] {
+      padding-inline-end: 28px;
+    }
+
+    &[data-checked] [data-slot="menu-v2-item-content"] {
+      font-weight: inherit;
+      color: inherit;
+    }
+
+    [data-slot="menu-v2-item-indicator"] {
+      position: absolute;
+      inset-inline-end: 8px;
+      top: 50%;
+      width: 16px;
+      height: 16px;
+      transform: translateY(-50%);
+      color: var(--icon-base);
+    }
+
+    [data-slot="menu-v2-item-chevron"] {
+      margin-inline-start: auto;
+      color: var(--icon-base);
+    }
+  }
+
+  [data-slot="menu-v2-separator"] {
+    width: calc(100% + 8px);
+    height: 1px;
+    margin: 4px -4px;
+    background: var(--border-weak-base);
+  }
+
+  [data-slot="menu-v2-group-label"] {
+    height: auto;
+    padding: 4px 8px;
+    color: var(--text-weak);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-x-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    font-variant-numeric: normal;
+  }
+}
+
+@keyframes dropdown-menu-open {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dropdown-menu-close {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
 @keyframes menu-v2-in {
   from {
     opacity: 0;
diff --git a/packages/ui/src/navigation/menu/menu.stories.tsx b/packages/ui/src/navigation/menu/menu.stories.tsx
new file mode 100644
index 00000000000..71343adc991
--- /dev/null
+++ b/packages/ui/src/navigation/menu/menu.stories.tsx
@@ -0,0 +1,242 @@
+// @ts-nocheck
+import { createSignal } from "solid-js"
+import { Menu } from "./menu"
+import { Button } from "@opencode-ai/ui/button"
+import { Avatar } from "@opencode-ai/ui/avatar"
+import { Icon } from "@opencode-ai/ui/icon"
+
+const docs = `### Overview
+Composable menu primitive built on Kobalte's \`DropdownMenu\` and \`ContextMenu\`. The same item components (\`Item\`, \`CheckboxItem\`, \`RadioItem\`, \`SubTrigger\`) work inside either container.
+
+### API
+- \`Menu\` / \`Menu.Trigger\` / \`Menu.Portal\` / \`Menu.Content\` — dropdown root + popper plumbing.
+- \`Menu.Context\` namespace mirrors the same shape for right-click menus.
+- \`appearance\`: \`compact\` (default) or \`standard\`.
+- \`Menu.Item\` — supports a freeform \`children\` slot (avatar, icon, text — whatever) plus \`shortcut\` and \`badge\` props.
+- \`Menu.CheckboxItem\` / \`Menu.RadioItem\` — same item shape; auto-render a check indicator that turns blue when selected.
+- \`Menu.Sub\` / \`Menu.SubTrigger\` / \`Menu.SubContent\` — nested submenus; \`SubTrigger\` auto-renders the trailing chevron.
+
+### Behavior
+- Items expose Kobalte's data attributes — \`data-highlighted\`, \`data-checked\`, \`data-disabled\`.
+- Blue selected state is reserved for \`CheckboxItem\` / \`RadioItem\` (the rest just highlight on hover).
+- Chevron is only rendered on \`SubTrigger\`.
+`
+
+export default {
+  title: "UI/Menu",
+  id: "ui-menu",
+  component: Menu,
+  tags: ["autodocs"],
+  parameters: {
+    frameHeight: "360px",
+    frameBackground: "#fff",
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = {
+  render: () => (
+    <Menu gutter={6}>
+      <Menu.Trigger as={Button}>Open menu</Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Content>
+          <Menu.Item>New file</Menu.Item>
+          <Menu.Item>Open file</Menu.Item>
+          <Menu.Item>Save</Menu.Item>
+          <Menu.Separator />
+          <Menu.Item disabled>Print</Menu.Item>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
+  ),
+}
+
+export const Appearances = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px" }}>
+      <Menu appearance="standard" gutter={6} defaultOpen>
+        <Menu.Trigger as={Button}>Standard</Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Content>
+            <Menu.Item>New file</Menu.Item>
+            <Menu.Item>Open file</Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+      <Menu appearance="compact" gutter={6} defaultOpen>
+        <Menu.Trigger as={Button}>Compact</Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Content>
+            <Menu.Item>New file</Menu.Item>
+            <Menu.Item>Open file</Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </div>
+  ),
+}
+
+export const Rich = {
+  render: () => (
+    <Menu gutter={6}>
+      <Menu.Trigger as={Button}>Open rich menu</Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Content style={{ "min-width": "240px" }}>
+          <Menu.Item shortcut="⇧ D" badge="Label">
+            <Avatar size="small" kind="org" fallback="A" />
+            <Icon name="settings" size="small" />
+            Text
+          </Menu.Item>
+          <Menu.Item shortcut="⌘ N">
+            <Icon name="plus" size="small" />
+            New window
+          </Menu.Item>
+          <Menu.Item shortcut="⌘ S" badge="Beta">
+            <Icon name="save" size="small" />
+            Save as…
+          </Menu.Item>
+          <Menu.Separator />
+          <Menu.Item disabled shortcut="⌘ P">
+            <Icon name="print" size="small" />
+            Print
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
+  ),
+}
+
+export const WithCheckbox = {
+  render: () => {
+    const [wrap, setWrap] = createSignal(true)
+    const [minimap, setMinimap] = createSignal(false)
+    const [ruler, setRuler] = createSignal(false)
+    return (
+      <Menu gutter={6}>
+        <Menu.Trigger as={Button}>View</Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Content style={{ "min-width": "200px" }}>
+            <Menu.CheckboxItem checked={wrap()} onChange={setWrap} shortcut="⌥ Z">
+              Word wrap
+            </Menu.CheckboxItem>
+            <Menu.CheckboxItem checked={minimap()} onChange={setMinimap}>
+              Minimap
+            </Menu.CheckboxItem>
+            <Menu.CheckboxItem checked={ruler()} onChange={setRuler} disabled>
+              Ruler
+            </Menu.CheckboxItem>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    )
+  },
+}
+
+export const WithRadio = {
+  render: () => {
+    const [theme, setTheme] = createSignal("system")
+    return (
+      <Menu gutter={6}>
+        <Menu.Trigger as={Button}>Theme</Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Content style={{ "min-width": "200px" }}>
+            <Menu.Group>
+              <Menu.GroupLabel>Appearance</Menu.GroupLabel>
+              <Menu.RadioGroup value={theme()} onChange={setTheme}>
+                <Menu.RadioItem value="light">Light</Menu.RadioItem>
+                <Menu.RadioItem value="dark">Dark</Menu.RadioItem>
+                <Menu.RadioItem value="system" badge="Auto">
+                  System
+                </Menu.RadioItem>
+              </Menu.RadioGroup>
+            </Menu.Group>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    )
+  },
+}
+
+export const WithSubmenu = {
+  render: () => (
+    <Menu gutter={6}>
+      <Menu.Trigger as={Button}>File</Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Content style={{ "min-width": "200px" }}>
+          <Menu.Item shortcut="⌘ N">New file</Menu.Item>
+          <Menu.Item shortcut="⌘ O">Open file</Menu.Item>
+          <Menu.Sub gutter={0}>
+            <Menu.SubTrigger>Open recent</Menu.SubTrigger>
+            <Menu.Portal>
+              <Menu.SubContent>
+                <Menu.Item>project-alpha.tsx</Menu.Item>
+                <Menu.Item>project-beta.tsx</Menu.Item>
+                <Menu.Item>project-gamma.tsx</Menu.Item>
+                <Menu.Separator />
+                <Menu.Item>Clear recent</Menu.Item>
+              </Menu.SubContent>
+            </Menu.Portal>
+          </Menu.Sub>
+          <Menu.Separator />
+          <Menu.Item shortcut="⌘ S">Save</Menu.Item>
+          <Menu.Item shortcut="⇧⌘ S">Save as…</Menu.Item>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
+  ),
+}
+
+export const Context = {
+  render: () => (
+    <Menu.Context gutter={6}>
+      <Menu.Context.Trigger>
+        <div
+          style={{
+            display: "flex",
+            "align-items": "center",
+            "justify-content": "center",
+            width: "320px",
+            height: "180px",
+            "border-radius": "8px",
+            border: "1px dashed rgba(0, 0, 0, 0.2)",
+            color: "#5c5c5c",
+            "font-size": "13px",
+            "font-family": "var(--v2-font-family-sans)",
+            "user-select": "none",
+          }}
+        >
+          Right-click this area
+        </div>
+      </Menu.Context.Trigger>
+      <Menu.Context.Portal>
+        <Menu.Context.Content style={{ "min-width": "200px" }}>
+          <Menu.Item shortcut="⌘ C">
+            <Avatar size="small" kind="org" fallback="C" />
+            Copy
+          </Menu.Item>
+          <Menu.Item shortcut="⌘ X">
+            <Icon name="cut" size="small" />
+            Cut
+          </Menu.Item>
+          <Menu.Item shortcut="⌘ V">
+            <Icon name="paste" size="small" />
+            Paste
+          </Menu.Item>
+          <Menu.Separator />
+          <Menu.Item badge="New">
+            <Icon name="inspect" size="small" />
+            Inspect element
+          </Menu.Item>
+          <Menu.Item disabled>
+            <Icon name="trash" size="small" />
+            Delete
+          </Menu.Item>
+        </Menu.Context.Content>
+      </Menu.Context.Portal>
+    </Menu.Context>
+  ),
+}
diff --git a/packages/ui/src/v2/components/menu-v2.tsx b/packages/ui/src/navigation/menu/menu.tsx
similarity index 56%
rename from packages/ui/src/v2/components/menu-v2.tsx
rename to packages/ui/src/navigation/menu/menu.tsx
index 7cea2c51535..4731797551b 100644
--- a/packages/ui/src/v2/components/menu-v2.tsx
+++ b/packages/ui/src/navigation/menu/menu.tsx
@@ -1,7 +1,17 @@
 import { DropdownMenu } from "@kobalte/core/dropdown-menu"
 import { ContextMenu } from "@kobalte/core/context-menu"
-import { Show, splitProps, type Component, type ComponentProps, type JSX, type ParentProps } from "solid-js"
-import "./menu-v2.css"
+import {
+  createContext,
+  Show,
+  splitProps,
+  useContext,
+  type Accessor,
+  type Component,
+  type ComponentProps,
+  type JSX,
+  type ParentProps,
+} from "solid-js"
+import "./menu.css"
 
 const ChevronRight: Component = () => (
   <svg
@@ -29,6 +39,18 @@ const CheckMark: Component = () => (
   </svg>
 )
 
+export type MenuAppearance = "standard" | "compact"
+
+const MenuAppearanceContext = createContext<{ appearance: Accessor<MenuAppearance> }>({
+  appearance: (): MenuAppearance => "compact",
+})
+
+function useMenuContext() {
+  const ctx = useContext(MenuAppearanceContext)
+  if (!ctx) throw new Error("Menu components must be used inside Menu or Menu.Context")
+  return ctx
+}
+
 function ItemBody(
   props: ParentProps<{
     shortcut?: JSX.Element | string
@@ -46,15 +68,21 @@ function ItemBody(
   )
 }
 
-export interface MenuV2ItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
+function MenuItem(props: ParentProps<MenuItemProps>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
-    <DropdownMenu.Item {...r} data-component="menu-v2-item" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
+    <DropdownMenu.Item
+      {...r}
+      data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
       <ItemBody shortcut={s.shortcut} badge={s.badge}>
         {s.children}
       </ItemBody>
@@ -62,17 +90,19 @@ function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
   )
 }
 
-export interface MenuV2CheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
+export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2CheckboxItem(props: ParentProps<MenuV2CheckboxItemProps>) {
+function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
     <DropdownMenu.CheckboxItem
       {...r}
       data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     >
       <ItemBody
@@ -90,17 +120,19 @@ function MenuV2CheckboxItem(props: ParentProps<MenuV2CheckboxItemProps>) {
   )
 }
 
-export interface MenuV2RadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
+export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2RadioItem(props: ParentProps<MenuV2RadioItemProps>) {
+function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
     <DropdownMenu.RadioItem
       {...r}
       data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     >
       <ItemBody
@@ -118,17 +150,19 @@ function MenuV2RadioItem(props: ParentProps<MenuV2RadioItemProps>) {
   )
 }
 
-export interface MenuV2SubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+export interface MenuSubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2SubTrigger(props: ParentProps<MenuV2SubTriggerProps>) {
+function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
     <DropdownMenu.SubTrigger
       {...r}
       data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     >
       <ItemBody shortcut={s.shortcut} badge={s.badge} trailing={<ChevronRight />}>
@@ -138,88 +172,118 @@ function MenuV2SubTrigger(props: ParentProps<MenuV2SubTriggerProps>) {
   )
 }
 
-function MenuV2SubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
+function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.SubContent
       {...r}
       data-component="menu-v2-content"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuV2GroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
+function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.GroupLabel
       {...r}
       data-slot="menu-v2-group-label"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuV2Separator(props: ComponentProps<typeof DropdownMenu.Separator>) {
+function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.Separator
       {...r}
       data-slot="menu-v2-separator"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuV2Content(props: ComponentProps<typeof DropdownMenu.Content>) {
+function MenuContent(props: ComponentProps<typeof DropdownMenu.Content>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.Content
       {...r}
       data-component="menu-v2-content"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuV2Root(props: ComponentProps<typeof DropdownMenu>) {
-  return <DropdownMenu {...props} />
+export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
+  appearance?: MenuAppearance
 }
 
-function MenuV2ContextRoot(props: ComponentProps<typeof ContextMenu>) {
-  return <ContextMenu {...props} />
+function MenuRoot(props: MenuProps) {
+  const [local, rest] = splitProps(props, ["appearance", "children"])
+  const appearance = () => local.appearance ?? "compact"
+  return (
+    <MenuAppearanceContext.Provider value={{ appearance }}>
+      <DropdownMenu {...rest}>{local.children}</DropdownMenu>
+    </MenuAppearanceContext.Provider>
+  )
 }
 
-function MenuV2ContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
+export interface MenuContextProps extends ComponentProps<typeof ContextMenu> {
+  appearance?: MenuAppearance
+}
+
+function MenuContextRoot(props: MenuContextProps) {
+  const [local, rest] = splitProps(props, ["appearance", "children"])
+  const appearance = () => local.appearance ?? "compact"
+  return (
+    <MenuAppearanceContext.Provider value={{ appearance }}>
+      <ContextMenu {...rest}>{local.children}</ContextMenu>
+    </MenuAppearanceContext.Provider>
+  )
+}
+
+function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <ContextMenu.Content
       {...r}
       data-component="menu-v2-content"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-const MenuV2Context = Object.assign(MenuV2ContextRoot, {
+const MenuContext = Object.assign(MenuContextRoot, {
   Trigger: ContextMenu.Trigger,
   Portal: ContextMenu.Portal,
-  Content: MenuV2ContextContent,
+  Content: MenuContextContent,
 })
 
-export const MenuV2 = Object.assign(MenuV2Root, {
+export const Menu = Object.assign(MenuRoot, {
   Trigger: DropdownMenu.Trigger,
   Portal: DropdownMenu.Portal,
-  Content: MenuV2Content,
-  Item: MenuV2Item,
-  CheckboxItem: MenuV2CheckboxItem,
+  Content: MenuContent,
+  Item: MenuItem,
+  CheckboxItem: MenuCheckboxItem,
   RadioGroup: DropdownMenu.RadioGroup,
-  RadioItem: MenuV2RadioItem,
+  RadioItem: MenuRadioItem,
   Group: DropdownMenu.Group,
-  GroupLabel: MenuV2GroupLabel,
-  Separator: MenuV2Separator,
+  GroupLabel: MenuGroupLabel,
+  Separator: MenuSeparator,
   Sub: DropdownMenu.Sub,
-  SubTrigger: MenuV2SubTrigger,
-  SubContent: MenuV2SubContent,
-  Context: MenuV2Context,
+  SubTrigger: MenuSubTrigger,
+  SubContent: MenuSubContent,
+  Context: MenuContext,
 })
diff --git a/packages/ui/src/v2/components/segmented-control-v2.css b/packages/ui/src/navigation/segmented-control/segmented-control.css
similarity index 100%
rename from packages/ui/src/v2/components/segmented-control-v2.css
rename to packages/ui/src/navigation/segmented-control/segmented-control.css
diff --git a/packages/ui/src/navigation/segmented-control/segmented-control.stories.tsx b/packages/ui/src/navigation/segmented-control/segmented-control.stories.tsx
new file mode 100644
index 00000000000..6af435ee6b4
--- /dev/null
+++ b/packages/ui/src/navigation/segmented-control/segmented-control.stories.tsx
@@ -0,0 +1,107 @@
+import { createSignal } from "solid-js"
+import { SegmentedControlItem, SegmentedControl } from "./segmented-control"
+
+const docs = `### Overview
+Single-select segmented control with **custom state** and native \`<button type="button">\` segments.
+
+### Accessibility (toggle group style)
+- Root: \`role="group"\` — pass \`aria-label\` or \`aria-labelledby\` (standard div attributes).
+- Segments: \`aria-pressed\` reflects selection; \`data-pressed\` is set for styling.
+- **Arrow Left / Right** move focus between enabled segments; **Home** / **End** focus first / last enabled segment.
+
+### API
+- **SegmentedControl:** \`value?\`, \`defaultValue?\`, \`onChange?(value: string | null)\`, \`allowDeselect?\` (default \`false\`), \`disabled?\`, plus native div attributes (\`class\`, \`aria-*\`, \`ref\`, etc.).
+- **SegmentedControlItem:** \`value\` (string), \`disabled?\`, \`children\` (label), plus other button attributes except \`type\`.
+
+### Behavior
+- With default \`allowDeselect={false}\`, clicking the active segment does nothing; selection is never cleared.
+- With \`allowDeselect\`, clicking the active segment clears selection and \`onChange(null)\` runs.
+
+### Theming
+- \`data-slot="segmented-control-v2"\` on the track; items use \`data-slot="segmented-control-v2-item"\` and \`data-pressed\` when selected.
+`
+
+export default {
+  title: "UI/SegmentedControl",
+  id: "ui-segmented-control",
+  component: SegmentedControl,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = {
+  render: () => (
+    <SegmentedControl defaultValue="a" aria-label="Demo segment control">
+      <SegmentedControlItem value="a">Label</SegmentedControlItem>
+      <SegmentedControlItem value="b">Label</SegmentedControlItem>
+      <SegmentedControlItem value="c">Label</SegmentedControlItem>
+      <SegmentedControlItem value="d">Label</SegmentedControlItem>
+    </SegmentedControl>
+  ),
+}
+
+export const Controlled = {
+  render: () => {
+    const [value, setValue] = createSignal("b")
+    return (
+      <div style={{ display: "grid", gap: "12px", "justify-items": "start" }}>
+        <SegmentedControl value={value()} onChange={setValue} aria-label="View mode">
+          <SegmentedControlItem value="a">List</SegmentedControlItem>
+          <SegmentedControlItem value="b">Grid</SegmentedControlItem>
+          <SegmentedControlItem value="c">Board</SegmentedControlItem>
+        </SegmentedControl>
+        <div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
+          Value: {value()}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const AllowDeselect = {
+  render: () => {
+    const [value, setValue] = createSignal<string | null>("a")
+    return (
+      <div style={{ display: "grid", gap: "12px", "justify-items": "start" }}>
+        <SegmentedControl value={value()} allowDeselect onChange={setValue} aria-label="Optional selection">
+          <SegmentedControlItem value="a">A</SegmentedControlItem>
+          <SegmentedControlItem value="b">B</SegmentedControlItem>
+          <SegmentedControlItem value="c">C</SegmentedControlItem>
+        </SegmentedControl>
+        <div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
+          Value: {value() === null ? "none" : value()}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithDisabledItem = {
+  render: () => (
+    <SegmentedControl defaultValue="a" aria-label="Segments with one disabled">
+      <SegmentedControlItem value="a">One</SegmentedControlItem>
+      <SegmentedControlItem value="b" disabled>
+        Two
+      </SegmentedControlItem>
+      <SegmentedControlItem value="c">Three</SegmentedControlItem>
+    </SegmentedControl>
+  ),
+}
+
+export const FullWidth = {
+  render: () => (
+    <div style={{ width: "320px" }}>
+      <SegmentedControl defaultValue="x" class="segmented-control-v2--full-width" aria-label="Full width">
+        <SegmentedControlItem value="x">A</SegmentedControlItem>
+        <SegmentedControlItem value="y">B</SegmentedControlItem>
+        <SegmentedControlItem value="z">C</SegmentedControlItem>
+      </SegmentedControl>
+    </div>
+  ),
+}
diff --git a/packages/ui/src/v2/components/segmented-control-v2.tsx b/packages/ui/src/navigation/segmented-control/segmented-control.tsx
similarity index 90%
rename from packages/ui/src/v2/components/segmented-control-v2.tsx
rename to packages/ui/src/navigation/segmented-control/segmented-control.tsx
index 006b28394f3..c1b94511995 100644
--- a/packages/ui/src/v2/components/segmented-control-v2.tsx
+++ b/packages/ui/src/navigation/segmented-control/segmented-control.tsx
@@ -10,7 +10,7 @@ import {
   type ParentProps,
 } from "solid-js"
 import type { ComponentProps } from "solid-js"
-import "./segmented-control-v2.css"
+import "./segmented-control.css"
 
 type OnChange = (value: string | null) => void
 
@@ -26,11 +26,11 @@ const SegmentedControlContext = createContext<SegmentedControlContextValue>()
 
 function useSegmentedControlContext() {
   const ctx = useContext(SegmentedControlContext)
-  if (!ctx) throw new Error("SegmentedControlItemV2 must be used inside SegmentedControlV2")
+  if (!ctx) throw new Error("SegmentedControlItem must be used inside SegmentedControl")
   return ctx
 }
 
-export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
+export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
   ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
     value?: string | null
@@ -42,7 +42,7 @@ export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
     disabled?: boolean
   }>
 
-export function SegmentedControlV2(props: SegmentedControlV2Props) {
+export function SegmentedControl(props: SegmentedControlProps) {
   const isControlled = createMemo(() => Object.hasOwn(props as object, "value"))
   const merged = mergeProps({ allowDeselect: false, disabled: false }, props)
   const [local, rest] = splitProps(merged, [
@@ -119,7 +119,7 @@ export function SegmentedControlV2(props: SegmentedControlV2Props) {
   )
 }
 
-export type SegmentedControlItemV2Props = Omit<ComponentProps<"button">, "type" | "children"> &
+export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" | "children"> &
   ParentProps<{
     value: string
     children: JSX.Element
@@ -132,7 +132,7 @@ function invokeButtonHandler<E extends Event>(
   if (typeof handler === "function") (handler as (ev: typeof e) => void)(e)
 }
 
-export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
+export function SegmentedControlItem(props: SegmentedControlItemProps) {
   const merged = mergeProps({ disabled: false }, props)
   const [local, rest] = splitProps(merged, [
     "class",
@@ -159,13 +159,14 @@ export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
     invokeButtonHandler(local.onKeyDown, e)
     if (e.defaultPrevented || disabled()) return
     const t = e.currentTarget
+    const horizontal = t.closest(`[data-slot="segmented-control-v2"]`)?.matches(":dir(rtl)") ? -1 : 1
 
     if (e.key === "ArrowRight") {
       e.preventDefault()
-      ctx.focusNext(t, 1)
+      ctx.focusNext(t, horizontal)
     } else if (e.key === "ArrowLeft") {
       e.preventDefault()
-      ctx.focusNext(t, -1)
+      ctx.focusNext(t, -horizontal as 1 | -1)
     }
 
     // accessibility stuff
diff --git a/packages/ui/src/navigation/tab-state-indicator.stories.tsx b/packages/ui/src/navigation/tab-state-indicator.stories.tsx
new file mode 100644
index 00000000000..4037a662ddf
--- /dev/null
+++ b/packages/ui/src/navigation/tab-state-indicator.stories.tsx
@@ -0,0 +1,20 @@
+import { TabStateIndicator } from "./tab-state-indicator"
+
+export default {
+  title: "UI/TabStateIndicator",
+  id: "ui-tab-state-indicator",
+  component: TabStateIndicator,
+  tags: ["autodocs"],
+}
+
+export const Basic = {}
+
+export const Sizes = {
+  render: () => (
+    <div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
+      <TabStateIndicator width={12} height={12} />
+      <TabStateIndicator />
+      <TabStateIndicator width={24} height={24} />
+    </div>
+  ),
+}
diff --git a/packages/ui/src/v2/components/tab-state-indicator.tsx b/packages/ui/src/navigation/tab-state-indicator.tsx
similarity index 100%
rename from packages/ui/src/v2/components/tab-state-indicator.tsx
rename to packages/ui/src/navigation/tab-state-indicator.tsx
diff --git a/packages/ui/src/v2/components/tabs-v2.css b/packages/ui/src/navigation/tabs/tabs-current.css
similarity index 94%
rename from packages/ui/src/v2/components/tabs-v2.css
rename to packages/ui/src/navigation/tabs/tabs-current.css
index 0438ca2a5d9..53cc348effb 100644
--- a/packages/ui/src/v2/components/tabs-v2.css
+++ b/packages/ui/src/navigation/tabs/tabs-current.css
@@ -68,22 +68,29 @@
   box-shadow: none;
 }
 
-[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"] {
-  width: 20px;
-  height: 20px;
+[data-slot="tabs-v2-trigger-close-button"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-inline-start: -5px;
   flex: none;
+}
+
+[data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"] {
+  width: 20px;
+  height: 20px;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--v2-text-text-faint);
 }
 
-[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"]:hover {
+[data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"]:hover {
   color: var(--v2-text-text-muted);
 }
 
-[data-component="tabs-v2"] [data-component="icon-button"] {
+[data-component="tabs-v2"] [data-component="icon-button-v2"] {
   margin: 0;
 }
 
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/navigation/tabs/tabs.css
similarity index 76%
rename from packages/ui/src/components/tabs.css
rename to packages/ui/src/navigation/tabs/tabs.css
index efc36d087d4..3ba36add1d8 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/navigation/tabs/tabs.css
@@ -18,15 +18,13 @@
     display: flex;
     align-items: center;
     overflow-x: auto;
-
-    /* Hide scrollbar */
     scrollbar-width: none;
     -ms-overflow-style: none;
+
     &::-webkit-scrollbar {
       display: none;
     }
 
-    /* After element to fill remaining space */
     &::after {
       content: "";
       display: block;
@@ -48,15 +46,12 @@
     align-items: center;
     gap: 12px;
     color: var(--text-base);
-
-    /* text-14-medium */
     font-family: var(--font-family-sans);
     font-size: 14px;
     font-style: normal;
     font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 142.857% */
+    line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-
     white-space: nowrap;
     flex-shrink: 0;
     max-width: 280px;
@@ -86,6 +81,13 @@
       justify-content: center;
     }
 
+    [data-slot="tabs-close-button"] {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     [data-component="icon-button"] {
       margin: -0.25rem;
     }
@@ -94,14 +96,17 @@
       pointer-events: none;
       color: var(--text-weaker);
     }
+
     &:focus-visible {
       outline: none;
       box-shadow: none;
     }
+
     &:has([data-selected]) {
       color: var(--text-strong);
       background-color: transparent;
       border-bottom-color: transparent;
+
       [data-slot="tabs-trigger-close-button"] {
         opacity: 1;
       }
@@ -110,6 +115,7 @@
     &:hover:not(:disabled):not([data-selected]) {
       color: var(--text-strong);
     }
+
     &:has([data-slot="tabs-trigger-close-button"]) {
       padding-inline-end: 12px;
 
@@ -122,10 +128,9 @@
   [data-slot="tabs-content"] {
     overflow-y: auto;
     flex: 1;
-
-    /* Hide scrollbar */
     scrollbar-width: none;
     -ms-overflow-style: none;
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -218,6 +223,7 @@
 
       &:has([data-slot="tabs-trigger-close-button"]) {
         padding-inline-end: 5px;
+
         [data-slot="tabs-trigger"] {
           padding-inline-end: 0 !important;
         }
@@ -239,10 +245,6 @@
         background-color: var(--surface-base-hover);
       }
 
-      /*
-        File tabs: use monochrome icon by default.
-        Full-color icon is shown on hover/selected.
-      */
       [data-slot="tabs-trigger"] {
         .tab-fileicon-color,
         .tab-fileicon-mono {
@@ -329,9 +331,6 @@
         border: none;
         background-color: transparent;
       }
-      &:empty::after {
-        display: none;
-      }
     }
 
     [data-slot="tabs-trigger-wrapper"] {
@@ -342,13 +341,11 @@
       border-bottom-style: solid;
       border-bottom-color: transparent;
       gap: 4px;
-
-      /* text-14-regular */
       font-family: var(--font-family-sans);
       font-size: var(--font-size-base);
       font-style: normal;
       font-weight: var(--font-weight-regular);
-      line-height: var(--line-height-x-large); /* 171.429% */
+      line-height: var(--line-height-x-large);
       letter-spacing: var(--letter-spacing-normal);
 
       [data-slot="tabs-trigger"] {
@@ -359,18 +356,6 @@
         border-bottom-color: transparent;
       }
 
-      [data-slot="tabs-trigger-close-button"] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      [data-component="icon-button"] {
-        width: 16px;
-        height: 16px;
-        margin: 0;
-      }
-
       &:has([data-selected]) {
         color: var(--text-strong);
         background-color: transparent;
@@ -383,14 +368,12 @@
 
       &:has([data-slot="tabs-trigger-close-button"]) {
         padding-inline-end: 0;
+
         [data-slot="tabs-trigger"] {
           padding-inline-end: 0;
         }
       }
     }
-
-    /* [data-slot="tabs-content"] { */
-    /* } */
   }
 
   &[data-variant="pill"][data-orientation="horizontal"] {
@@ -413,8 +396,6 @@
       border-radius: var(--radius-sm);
       background-color: transparent;
       gap: 0;
-
-      /* text-13-medium */
       font-family: var(--font-family-sans);
       font-size: var(--font-size-small);
       font-style: normal;
@@ -434,17 +415,13 @@
         color: var(--text-strong);
       }
 
-      &:active:not(:disabled) {
+      &:active:not(:disabled),
+      &:has([data-selected]) {
         background-color: var(--surface-base-active);
       }
 
       &:has([data-selected]) {
-        background-color: var(--surface-base-active);
         color: var(--text-strong);
-
-        &:hover:not(:disabled) {
-          background-color: var(--surface-base-active);
-        }
       }
     }
   }
@@ -481,170 +458,6 @@
       }
     }
   }
-
-  &[data-orientation="vertical"] {
-    flex-direction: row;
-
-    [data-slot="tabs-list"] {
-      flex-direction: column;
-      width: auto;
-      height: 100%;
-      overflow-x: hidden;
-      overflow-y: auto;
-      padding: 8px;
-      gap: 4px;
-      background-color: var(--background-base);
-      border-inline-end: 1px solid var(--border-weak-base);
-
-      &::after {
-        display: none;
-      }
-    }
-
-    [data-slot="tabs-trigger-wrapper"] {
-      width: 100%;
-      height: 32px;
-      border: none;
-      border-radius: 8px;
-      background-color: transparent;
-
-      [data-slot="tabs-trigger"] {
-        height: 100%;
-        padding: 0 8px;
-        gap: 8px;
-        justify-content: flex-start;
-      }
-
-      &:hover:not(:disabled) {
-        background-color: var(--surface-base-hover);
-      }
-
-      &:has([data-selected]) {
-        background-color: var(--surface-base-active);
-        color: var(--text-strong);
-      }
-    }
-
-    [data-slot="tabs-content"] {
-      overflow-x: auto;
-      overflow-y: auto;
-    }
-
-    &[data-variant="alt"] {
-      [data-slot="tabs-list"] {
-        padding: 8px;
-        gap: 4px;
-        border: none;
-
-        &::after {
-          display: none;
-        }
-      }
-
-      [data-slot="tabs-trigger-wrapper"] {
-        height: 32px;
-        border: none;
-        border-radius: 8px;
-
-        [data-slot="tabs-trigger"] {
-          border: none;
-          padding: 0 8px;
-          gap: 8px;
-          justify-content: flex-start;
-        }
-
-        &:hover:not(:disabled) {
-          background-color: var(--surface-base-hover);
-        }
-
-        &:has([data-selected]) {
-          background-color: var(--surface-base-hover);
-          color: var(--text-strong);
-        }
-      }
-    }
-
-    &[data-variant="settings"] {
-      [data-slot="tabs-list"] {
-        width: 150px;
-        min-width: 150px;
-
-        @media (min-width: 640px) {
-          width: 200px;
-          min-width: 200px;
-        }
-        padding: 12px;
-        gap: 0;
-        background-color: var(--background-base);
-        border-inline-end: 1px solid var(--border-weak-base);
-
-        &::after {
-          display: none;
-        }
-      }
-
-      [data-slot="tabs-section-title"] {
-        width: 100%;
-        padding: 0;
-        padding-inline-start: 4px;
-        font-family: var(--font-family-sans);
-        font-size: var(--font-size-small);
-        font-weight: var(--font-weight-medium);
-        color: var(--text-weak);
-      }
-
-      [data-slot="tabs-trigger-wrapper"] {
-        height: 32px;
-        border: none;
-        border-radius: var(--radius-md);
-
-        /* text-14-medium */
-        font-family: var(--font-family-sans);
-        font-size: var(--font-size-base);
-        font-weight: var(--font-weight-medium);
-        line-height: var(--line-height-large);
-
-        [data-slot="tabs-trigger"] {
-          border: none;
-          padding: 0 8px;
-          gap: 12px;
-          justify-content: flex-start;
-          width: 100%;
-          height: 100%;
-        }
-
-        [data-component="icon"] {
-          color: var(--icon-base);
-        }
-
-        &:hover:not(:disabled) {
-          background-color: var(--surface-base-hover);
-        }
-
-        &:has([data-slot="tabs-trigger"]:focus-visible) {
-          background-color: var(--surface-base-hover);
-          box-shadow: var(--shadow-xs-border-focus);
-        }
-
-        &:has([data-selected]) {
-          background-color: var(--surface-base-active);
-          color: var(--text-strong);
-
-          [data-component="icon"] {
-            color: var(--icon-strong-base);
-          }
-
-          &:hover:not(:disabled) {
-            background-color: var(--surface-base-active);
-          }
-        }
-      }
-
-      [data-slot="tabs-content"] {
-        background-color: var(--surface-stronger-non-alpha);
-      }
-    }
-  }
 }
 
 [data-component="tabs-drag-preview"] {
@@ -765,12 +578,11 @@
     [data-slot="icon-svg"] {
       margin-inline-start: -2px;
     }
-  }
 
-  /* Preview/temporary tabs: beat trigger + .text-14-medium upright defaults */
-  [data-slot="tabs-trigger"] .italic {
-    font-style: italic !important;
-    font-variation-settings: "slnt" -10 !important;
+    .italic {
+      font-style: italic !important;
+      font-variation-settings: "slnt" -10 !important;
+    }
   }
 }
 
diff --git a/packages/ui/src/v2/components/tabs-v2.stories.tsx b/packages/ui/src/navigation/tabs/tabs.stories.tsx
similarity index 65%
rename from packages/ui/src/v2/components/tabs-v2.stories.tsx
rename to packages/ui/src/navigation/tabs/tabs.stories.tsx
index c275c25c3b0..a4db8647697 100644
--- a/packages/ui/src/v2/components/tabs-v2.stories.tsx
+++ b/packages/ui/src/navigation/tabs/tabs.stories.tsx
@@ -1,18 +1,16 @@
-import { Show } from "solid-js"
-import * as mod from "./tabs-v2"
-import type { TabsV2Props } from "./tabs-v2"
+import { Tabs, type TabsProps } from "./tabs"
 
 const docs = `
-Tabbed navigation for switching between related panels. Compose \`TabsV2.List\` + \`TabsV2.Trigger\` + \`TabsV2.Content\`.
+Tabbed navigation for switching between related panels. Compose \`Tabs.List\` + \`Tabs.Trigger\` + \`Tabs.Content\`.
 
 > Haven't used tokens since this is an independent repo, but that's an easy change.
 
 `
 
 export default {
-  title: "UI V2/Tabs",
-  id: "components-tabs-v2",
-  component: mod.TabsV2,
+  title: "UI/Tabs",
+  id: "ui-tabs",
+  component: Tabs,
   tags: ["autodocs"],
   parameters: {
     frameHeight: "240px",
@@ -26,7 +24,7 @@ export default {
   argTypes: {
     variant: {
       control: "select",
-      options: ["normal", "pill", "settings"],
+      options: ["panel", "underline", "surface", "line", "pill", "settings"],
     },
     orientation: {
       control: "select",
@@ -41,10 +39,10 @@ export const Settings = {
     orientation: "vertical",
     defaultValue: "general",
   },
-  render: (props: TabsV2Props) => (
-    <mod.TabsV2 {...props}>
-      <mod.TabsV2.List>
-        <mod.TabsV2.Trigger value="general">
+  render: (props: TabsProps) => (
+    <Tabs {...props}>
+      <Tabs.List>
+        <Tabs.Trigger value="general">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               fill-rule="evenodd"
@@ -60,8 +58,8 @@ export const Settings = {
             />
           </svg>
           General
-        </mod.TabsV2.Trigger>
-        <mod.TabsV2.Trigger value="appearance">
+        </Tabs.Trigger>
+        <Tabs.Trigger value="appearance">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               fill-rule="evenodd"
@@ -77,37 +75,37 @@ export const Settings = {
             />
           </svg>
           Appearance
-        </mod.TabsV2.Trigger>
-      </mod.TabsV2.List>
-      <mod.TabsV2.Content value="general">
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="general">
         <p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">General settings</p>
-      </mod.TabsV2.Content>
-      <mod.TabsV2.Content value="appearance">
+      </Tabs.Content>
+      <Tabs.Content value="appearance">
         <p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">Appearance settings</p>
-      </mod.TabsV2.Content>
-    </mod.TabsV2>
+      </Tabs.Content>
+    </Tabs>
   ),
 }
 
 export const Normal = {
   args: {
-    variant: "normal",
+    variant: "line",
     orientation: "horizontal",
     defaultValue: "first",
   },
-  render: (props: TabsV2Props) => (
-    <mod.TabsV2 {...props}>
-      <mod.TabsV2.List>
-        <mod.TabsV2.Trigger value="first">First</mod.TabsV2.Trigger>
-        <mod.TabsV2.Trigger value="second">Second</mod.TabsV2.Trigger>
-      </mod.TabsV2.List>
-      <mod.TabsV2.Content value="first">
+  render: (props: TabsProps) => (
+    <Tabs {...props}>
+      <Tabs.List>
+        <Tabs.Trigger value="first">First</Tabs.Trigger>
+        <Tabs.Trigger value="second">Second</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="first">
         <p class="text-[12px] text-[#5c5c5c] mx-3.5 my-2">Normal content</p>
-      </mod.TabsV2.Content>
-      <mod.TabsV2.Content value="second">
+      </Tabs.Content>
+      <Tabs.Content value="second">
         <p class="text-[12px] text-[#5c5c5c] mx-3.5 my-2">Some more alt content</p>
-      </mod.TabsV2.Content>
-    </mod.TabsV2>
+      </Tabs.Content>
+    </Tabs>
   ),
 }
 
@@ -117,52 +115,54 @@ export const Pill = {
     orientation: "horizontal",
     defaultValue: "first",
   },
-  render: (props: TabsV2Props) => (
-    <mod.TabsV2 {...props}>
-      <mod.TabsV2.List>
-        <mod.TabsV2.Trigger value="first">First</mod.TabsV2.Trigger>
-        <mod.TabsV2.Trigger value="second">Second</mod.TabsV2.Trigger>
-        <mod.TabsV2.Trigger value="third">
+  render: (props: TabsProps) => (
+    <Tabs {...props}>
+      <Tabs.List>
+        <Tabs.Trigger value="first">First</Tabs.Trigger>
+        <Tabs.Trigger value="second">Second</Tabs.Trigger>
+        <Tabs.Trigger
+          value="third"
+          closeButton={<Tabs.CloseButton onClick={() => console.log("Close tab-3")} />}
+        >
           Closable
-          <mod.TabsV2.CloseButton onClick={() => console.log("Close tab-3")} />
-        </mod.TabsV2.Trigger>
-      </mod.TabsV2.List>
-      <mod.TabsV2.Content value="first">
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="first">
         <p class="text-[12px] text-[#5c5c5c] mx-3.5 my-2">Normal content</p>
-      </mod.TabsV2.Content>
-      <mod.TabsV2.Content value="second">
+      </Tabs.Content>
+      <Tabs.Content value="second">
         <p class="text-[12px] text-[#5c5c5c] mx-3.5 my-2">Some more alt content</p>
-      </mod.TabsV2.Content>
-      <mod.TabsV2.Content value="third">
+      </Tabs.Content>
+      <Tabs.Content value="third">
         <p class="text-[12px] text-[#5c5c5c] mx-3.5 my-2">Closable content</p>
-      </mod.TabsV2.Content>
-    </mod.TabsV2>
+      </Tabs.Content>
+    </Tabs>
   ),
 }
 
 export const Closable = {
   args: {
-    variant: "normal",
+    variant: "panel",
     orientation: "horizontal",
     defaultValue: "tab-1",
   },
-  render: (props: TabsV2Props) => (
-    <mod.TabsV2 {...props}>
-      <mod.TabsV2.List>
-        <mod.TabsV2.Trigger value="tab-1">
+  render: (props: TabsProps) => (
+    <Tabs {...props}>
+      <Tabs.List>
+        <Tabs.Trigger
+          value="tab-1"
+          closeButton={<Tabs.CloseButton onClick={() => console.log("Close tab-1")} />}
+        >
           Tab 1
-          <Show when={true}>
-            <mod.TabsV2.CloseButton onClick={() => console.log("Close tab-1")} />
-          </Show>
-        </mod.TabsV2.Trigger>
-        <mod.TabsV2.Trigger value="tab-2">Tab 2</mod.TabsV2.Trigger>
-      </mod.TabsV2.List>
-      <mod.TabsV2.Content value="tab-1">
+        </Tabs.Trigger>
+        <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="tab-1">
         <p class="text-[12px] text-[#5c5c5c] mx-3.5 my-2">Closable content</p>
-      </mod.TabsV2.Content>
-      <mod.TabsV2.Content value="tab-2">
+      </Tabs.Content>
+      <Tabs.Content value="tab-2">
         <p class="text-[12px] text-[#5c5c5c] mx-3.5 my-2">Standard content</p>
-      </mod.TabsV2.Content>
-    </mod.TabsV2>
+      </Tabs.Content>
+    </Tabs>
   ),
 }
diff --git a/packages/ui/src/navigation/tabs/tabs.tsx b/packages/ui/src/navigation/tabs/tabs.tsx
new file mode 100644
index 00000000000..b863c7acbf7
--- /dev/null
+++ b/packages/ui/src/navigation/tabs/tabs.tsx
@@ -0,0 +1,194 @@
+import { Content, List, Root, Trigger } from "@kobalte/core/tabs"
+import { createContext, Show, splitProps, useContext, type JSX } from "solid-js"
+import type { Component, ComponentProps, ParentProps } from "solid-js"
+import { useI18n } from "../../context/i18n"
+import "./tabs-current.css"
+
+export type TabsVariant = "panel" | "underline" | "surface" | "line" | "pill" | "settings"
+
+export interface TabsProps extends ComponentProps<typeof Root> {
+  variant?: TabsVariant
+  orientation?: "horizontal" | "vertical"
+}
+export interface TabsListProps extends ComponentProps<typeof List> {}
+export interface TabsTriggerProps extends ComponentProps<typeof Trigger> {
+  classes?: { button?: string }
+  closeButton?: JSX.Element
+  hideCloseButton?: boolean
+  onMiddleClick?: () => void
+  subtext?: JSX.Element | string
+}
+export interface TabsCloseButtonProps extends ComponentProps<"button"> {}
+export interface TabsContentProps extends ComponentProps<typeof Content> {}
+
+const TabsContext = createContext<{ current: () => boolean }>({ current: () => false })
+
+function TabsRoot(props: TabsProps) {
+  const [local, rest] = splitProps(props, ["class", "classList", "variant", "orientation", "children"])
+  const variant = () => local.variant ?? "panel"
+  const current = () => variant() === "line" || variant() === "pill" || variant() === "settings"
+  const dataVariant = () => {
+    if (variant() === "panel" || variant() === "line") return "normal"
+    if (variant() === "underline") return "alt"
+    if (variant() === "surface") return "pill"
+    return variant()
+  }
+  return (
+    <TabsContext.Provider value={{ current }}>
+      <Root
+        {...rest}
+        orientation={local.orientation}
+        data-component={current() ? "tabs-v2" : "tabs"}
+        data-variant={dataVariant()}
+        data-orientation={local.orientation || "horizontal"}
+        classList={{
+          ...local.classList,
+          [local.class ?? ""]: !!local.class,
+        }}
+      >
+        {local.children}
+      </Root>
+    </TabsContext.Provider>
+  )
+}
+
+function TabsList(props: TabsListProps) {
+  const ctx = useContext(TabsContext)
+  const [local, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <List
+      {...rest}
+      data-slot={ctx.current() ? "tabs-v2-list" : "tabs-list"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    />
+  )
+}
+
+function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
+  const ctx = useContext(TabsContext)
+  const [local, rest] = splitProps(props, [
+    "class",
+    "classList",
+    "classes",
+    "children",
+    "closeButton",
+    "hideCloseButton",
+    "onMiddleClick",
+    "subtext",
+    "dir",
+  ])
+  const wrapperSlot = () => (ctx.current() ? "tabs-v2-trigger-wrapper" : "tabs-trigger-wrapper")
+  const triggerSlot = () => (ctx.current() ? "tabs-v2-trigger" : "tabs-trigger")
+  const closeSlot = () => (ctx.current() ? "tabs-v2-trigger-close-button" : "tabs-trigger-close-button")
+  return (
+    <div
+      data-slot={wrapperSlot()}
+      data-value={props.value}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      onMouseDown={(event) => {
+        if (event.button !== 1 || !local.onMiddleClick) return
+        event.preventDefault()
+      }}
+      onAuxClick={(event) => {
+        if (event.button !== 1 || !local.onMiddleClick) return
+        event.preventDefault()
+        local.onMiddleClick()
+      }}
+    >
+      <Trigger
+        {...rest}
+        dir={local.dir ?? "auto"}
+        data-slot={triggerSlot()}
+        data-value={props.value}
+        classList={{ [local.classes?.button ?? ""]: !!local.classes?.button }}
+      >
+        <Show when={ctx.current()} fallback={local.children}>
+          <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
+            {local.children}
+            <Show when={local.subtext}>
+              {(subtext) => (
+                <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
+                  {subtext()}
+                </span>
+              )}
+            </Show>
+          </span>
+        </Show>
+      </Trigger>
+      <Show when={local.closeButton}>
+        {(closeButton) => (
+          <div data-slot={closeSlot()} data-hidden={local.hideCloseButton ? "" : undefined}>
+            {closeButton()}
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}
+
+function TabsCloseButton(props: TabsCloseButtonProps) {
+  const i18n = useI18n()
+  const [local, rest] = splitProps(props, ["class", "classList", "onClick", "onPointerDown", "aria-label"])
+  return (
+    <button
+      type="button"
+      {...rest}
+      aria-label={local["aria-label"] ?? i18n.t("ui.tabs.close")}
+      data-slot="tabs-close-button"
+      classList={{
+        [local.class ?? ""]: !!local.class,
+        ...local.classList,
+      }}
+      onPointerDown={(event) => {
+        event.stopPropagation()
+        if (typeof local.onPointerDown === "function") local.onPointerDown(event)
+      }}
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        if (typeof local.onClick === "function") local.onClick(event)
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M10.8889 3.11108L3.11108 10.8889" stroke="currentColor" stroke-linejoin="round" />
+        <path d="M3.11108 3.11108L10.8889 10.8889" stroke="currentColor" stroke-linejoin="round" />
+      </svg>
+    </button>
+  )
+}
+
+function TabsContent(props: ParentProps<TabsContentProps>) {
+  const ctx = useContext(TabsContext)
+  const [local, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Content
+      {...rest}
+      data-slot={ctx.current() ? "tabs-v2-content" : "tabs-content"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.children}
+    </Content>
+  )
+}
+
+const TabsSectionTitle: Component<ParentProps> = (props) => {
+  const ctx = useContext(TabsContext)
+  return <div data-slot={ctx.current() ? "tabs-v2-section-title" : "tabs-section-title"}>{props.children}</div>
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  CloseButton: TabsCloseButton,
+  Content: TabsContent,
+  SectionTitle: TabsSectionTitle,
+})
diff --git a/packages/ui/src/v2/components/dialog-v2.css b/packages/ui/src/overlays/dialog/dialog.css
similarity index 100%
rename from packages/ui/src/v2/components/dialog-v2.css
rename to packages/ui/src/overlays/dialog/dialog.css
diff --git a/packages/ui/src/v2/components/dialog-v2.stories.tsx b/packages/ui/src/overlays/dialog/dialog.stories.tsx
similarity index 55%
rename from packages/ui/src/v2/components/dialog-v2.stories.tsx
rename to packages/ui/src/overlays/dialog/dialog.stories.tsx
index 198da5c663d..4d39a88c094 100644
--- a/packages/ui/src/v2/components/dialog-v2.stories.tsx
+++ b/packages/ui/src/overlays/dialog/dialog.stories.tsx
@@ -1,6 +1,6 @@
-import { Dialog as KobalteDialog } from "@kobalte/core/dialog"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle, DialogTitleGroup } from "./dialog-v2"
-import { ButtonV2 } from "./button-v2"
+import { Overlay, Portal, Root, Trigger } from "@kobalte/core/dialog"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle, DialogTitleGroup } from "./dialog"
+import { Button } from "@opencode-ai/ui/button"
 
 const docs = `### Overview
 Dialog content wrapper built on Kobalte's dialog primitive with v2 styling.
@@ -21,8 +21,8 @@ Compose with \`DialogHeader\`, \`DialogTitle\`, \`DialogTitleGroup\`, \`DialogBo
 `
 
 export default {
-  title: "UI V2/Dialog",
-  id: "components-dialog-v2",
+  title: "UI/Dialog",
+  id: "ui-dialog",
   component: Dialog,
   tags: ["autodocs"],
   parameters: {
@@ -44,163 +44,163 @@ function dialogHeader(title: string, description: string) {
 
 export const Basic = {
   render: () => (
-    <KobalteDialog defaultOpen>
-      <KobalteDialog.Trigger as={ButtonV2} variant="neutral">
+    <Root defaultOpen>
+      <Trigger as={Button} variant="neutral">
         Open dialog
-      </KobalteDialog.Trigger>
-      <KobalteDialog.Portal>
-        <KobalteDialog.Overlay />
+      </Trigger>
+      <Portal>
+        <Overlay />
         <Dialog>
           {dialogHeader("Dialog", "Description")}
           <DialogBody>Dialog body content.</DialogBody>
         </Dialog>
-      </KobalteDialog.Portal>
-    </KobalteDialog>
+      </Portal>
+    </Root>
   ),
 }
 
 export const Sizes = {
   render: () => (
     <div style={{ display: "flex", gap: "12px" }}>
-      <KobalteDialog>
-        <KobalteDialog.Trigger as={ButtonV2} variant="neutral">
+      <Root>
+        <Trigger as={Button} variant="neutral">
           Normal
-        </KobalteDialog.Trigger>
-        <KobalteDialog.Portal>
-          <KobalteDialog.Overlay />
+        </Trigger>
+        <Portal>
+          <Overlay />
           <Dialog>
             {dialogHeader("Normal", "Normal size")}
             <DialogBody>Normal dialog content.</DialogBody>
           </Dialog>
-        </KobalteDialog.Portal>
-      </KobalteDialog>
+        </Portal>
+      </Root>
 
-      <KobalteDialog>
-        <KobalteDialog.Trigger as={ButtonV2} variant="neutral">
+      <Root>
+        <Trigger as={Button} variant="neutral">
           Large
-        </KobalteDialog.Trigger>
-        <KobalteDialog.Portal>
-          <KobalteDialog.Overlay />
+        </Trigger>
+        <Portal>
+          <Overlay />
           <Dialog size="large">
             {dialogHeader("Large", "Large size")}
             <DialogBody>Large dialog content.</DialogBody>
           </Dialog>
-        </KobalteDialog.Portal>
-      </KobalteDialog>
+        </Portal>
+      </Root>
 
-      <KobalteDialog>
-        <KobalteDialog.Trigger as={ButtonV2} variant="neutral">
+      <Root>
+        <Trigger as={Button} variant="neutral">
           X-Large
-        </KobalteDialog.Trigger>
-        <KobalteDialog.Portal>
-          <KobalteDialog.Overlay />
+        </Trigger>
+        <Portal>
+          <Overlay />
           <Dialog size="x-large">
             {dialogHeader("Extra large", "X-large size")}
             <DialogBody>X-large dialog content.</DialogBody>
           </Dialog>
-        </KobalteDialog.Portal>
-      </KobalteDialog>
+        </Portal>
+      </Root>
     </div>
   ),
 }
 
 export const TitleOnly = {
   render: () => (
-    <KobalteDialog defaultOpen>
-      <KobalteDialog.Trigger as={ButtonV2} variant="neutral">
+    <Root defaultOpen>
+      <Trigger as={Button} variant="neutral">
         Open dialog
-      </KobalteDialog.Trigger>
-      <KobalteDialog.Portal>
-        <KobalteDialog.Overlay />
+      </Trigger>
+      <Portal>
+        <Overlay />
         <Dialog>
           <DialogHeader>
             <DialogTitle>Open project</DialogTitle>
           </DialogHeader>
           <DialogBody>Dialog body content.</DialogBody>
         </Dialog>
-      </KobalteDialog.Portal>
-    </KobalteDialog>
+      </Portal>
+    </Root>
   ),
 }
 
 export const HeaderControls = {
   render: () => (
-    <KobalteDialog>
-      <KobalteDialog.Trigger as={ButtonV2} variant="neutral">
+    <Root>
+      <Trigger as={Button} variant="neutral">
         Open dialog
-      </KobalteDialog.Trigger>
-      <KobalteDialog.Portal>
-        <KobalteDialog.Overlay />
+      </Trigger>
+      <Portal>
+        <Overlay />
         <Dialog>
           <DialogHeader>
             <DialogTitleGroup title="Custom header" description="Dialog with an extra header control" />
-            <ButtonV2 variant="neutral" size="small">
+            <Button variant="neutral" size="small">
               Help
-            </ButtonV2>
+            </Button>
           </DialogHeader>
           <DialogBody>Dialog body content.</DialogBody>
         </Dialog>
-      </KobalteDialog.Portal>
-    </KobalteDialog>
+      </Portal>
+    </Root>
   ),
 }
 
 export const WithFooter = {
   render: () => (
-    <KobalteDialog defaultOpen>
-      <KobalteDialog.Trigger as={ButtonV2} variant="neutral">
+    <Root defaultOpen>
+      <Trigger as={Button} variant="neutral">
         Open dialog
-      </KobalteDialog.Trigger>
-      <KobalteDialog.Portal>
-        <KobalteDialog.Overlay />
+      </Trigger>
+      <Portal>
+        <Overlay />
         <Dialog fit>
           {dialogHeader("Save changes", "Your changes will be lost if you don't save them.")}
           <DialogFooter>
-            <ButtonV2 variant="neutral">Cancel</ButtonV2>
-            <ButtonV2 variant="contrast">Save</ButtonV2>
+            <Button variant="neutral">Cancel</Button>
+            <Button variant="contrast">Save</Button>
           </DialogFooter>
         </Dialog>
-      </KobalteDialog.Portal>
-    </KobalteDialog>
+      </Portal>
+    </Root>
   ),
 }
 
 export const WithFooterThreeButtons = {
   render: () => (
-    <KobalteDialog defaultOpen>
-      <KobalteDialog.Trigger as={ButtonV2} variant="neutral">
+    <Root defaultOpen>
+      <Trigger as={Button} variant="neutral">
         Open dialog
-      </KobalteDialog.Trigger>
-      <KobalteDialog.Portal>
-        <KobalteDialog.Overlay />
+      </Trigger>
+      <Portal>
+        <Overlay />
         <Dialog fit>
           {dialogHeader("Unsaved changes", "You have unsaved changes. What would you like to do?")}
           <DialogFooter>
             <span style={{ "margin-right": "auto" }}>
-              <ButtonV2 variant="ghost">Remind me later</ButtonV2>
+              <Button variant="ghost">Remind me later</Button>
             </span>
-            <ButtonV2 variant="neutral">Cancel</ButtonV2>
-            <ButtonV2 variant="contrast">Save</ButtonV2>
+            <Button variant="neutral">Cancel</Button>
+            <Button variant="contrast">Save</Button>
           </DialogFooter>
         </Dialog>
-      </KobalteDialog.Portal>
-    </KobalteDialog>
+      </Portal>
+    </Root>
   ),
 }
 
 export const Fit = {
   render: () => (
-    <KobalteDialog>
-      <KobalteDialog.Trigger as={ButtonV2} variant="neutral">
+    <Root>
+      <Trigger as={Button} variant="neutral">
         Open fit dialog
-      </KobalteDialog.Trigger>
-      <KobalteDialog.Portal>
-        <KobalteDialog.Overlay />
+      </Trigger>
+      <Portal>
+        <Overlay />
         <Dialog fit>
           {dialogHeader("Fit content", "Dialog fits its content.")}
           <DialogBody>Dialog fits its content.</DialogBody>
         </Dialog>
-      </KobalteDialog.Portal>
-    </KobalteDialog>
+      </Portal>
+    </Root>
   ),
 }
diff --git a/packages/ui/src/v2/components/dialog-v2.tsx b/packages/ui/src/overlays/dialog/dialog.tsx
similarity index 83%
rename from packages/ui/src/v2/components/dialog-v2.tsx
rename to packages/ui/src/overlays/dialog/dialog.tsx
index 0094f6f72e4..646e2e3c043 100644
--- a/packages/ui/src/v2/components/dialog-v2.tsx
+++ b/packages/ui/src/overlays/dialog/dialog.tsx
@@ -1,7 +1,7 @@
-import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { CloseButton, Content, Description, Title } from "@kobalte/core/dialog"
 import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js"
 import { useI18n } from "../../context/i18n"
-import "./dialog-v2.css"
+import "./dialog.css"
 
 export interface DialogProps extends ParentProps {
   size?: "normal" | "large" | "x-large"
@@ -36,7 +36,7 @@ export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">[
 }
 
 export function DialogTitle(props: ParentProps) {
-  return <Kobalte.Title data-slot="dialog-header-title">{props.children}</Kobalte.Title>
+  return <Title data-slot="dialog-header-title">{props.children}</Title>
 }
 
 export function DialogTitleGroup(props: DialogTitleGroupProps) {
@@ -45,8 +45,8 @@ export function DialogTitleGroup(props: DialogTitleGroupProps) {
 
   return (
     <div data-slot="dialog-title-group">
-      <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
-      <Kobalte.Description data-slot="dialog-description">{description()}</Kobalte.Description>
+      <Show when={title()}>{(t) => <Title data-slot="dialog-title">{t()}</Title>}</Show>
+      <Description data-slot="dialog-description">{description()}</Description>
     </div>
   )
 }
@@ -60,7 +60,7 @@ export function DialogHeader(props: DialogHeaderProps) {
     <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
       {local.children}
       <Show when={!hideClose()}>
-        <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
+        <CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
           <svg
             width="16"
             height="16"
@@ -75,7 +75,7 @@ export function DialogHeader(props: DialogHeaderProps) {
               stroke-linejoin="round"
             />
           </svg>
-        </Kobalte.CloseButton>
+        </CloseButton>
       </Show>
     </div>
   )
@@ -92,7 +92,7 @@ export function Dialog(props: DialogProps) {
       data-size={local.size || "normal"}
     >
       <div data-slot="dialog-container" class={local.containerClass}>
-        <Kobalte.Content
+        <Content
           data-slot="dialog-content"
           classList={{
             ...local.classList,
@@ -108,10 +108,8 @@ export function Dialog(props: DialogProps) {
           }}
         >
           {local.children}
-        </Kobalte.Content>
+        </Content>
       </div>
     </div>
   )
 }
-
-export const DialogV2 = Dialog
diff --git a/packages/ui/src/v2/components/tooltip-v2.css b/packages/ui/src/overlays/tooltip/tooltip.css
similarity index 63%
rename from packages/ui/src/v2/components/tooltip-v2.css
rename to packages/ui/src/overlays/tooltip/tooltip.css
index 315d1f7cdbc..b78a8da0812 100644
--- a/packages/ui/src/v2/components/tooltip-v2.css
+++ b/packages/ui/src/overlays/tooltip/tooltip.css
@@ -39,6 +39,32 @@
   }
 }
 
+[data-component="tooltip-v2"][data-appearance="standard"] {
+  display: block;
+  max-width: 320px;
+  padding: 2px 8px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+  border-radius: var(--radius-sm);
+  background: var(--surface-float-base);
+  color: var(--text-invert-strong);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+  font-variant-numeric: normal;
+  font-variation-settings: normal;
+  user-select: text;
+  animation: none;
+
+  &[data-closed]:not([data-force-open="true"]) {
+    opacity: 0;
+    animation: none;
+  }
+}
+
 @keyframes tooltipV2In {
   from {
     opacity: 0;
diff --git a/packages/ui/src/v2/components/tooltip-v2.stories.tsx b/packages/ui/src/overlays/tooltip/tooltip.stories.tsx
similarity index 67%
rename from packages/ui/src/v2/components/tooltip-v2.stories.tsx
rename to packages/ui/src/overlays/tooltip/tooltip.stories.tsx
index 68595c79ae4..3089b9e27ca 100644
--- a/packages/ui/src/v2/components/tooltip-v2.stories.tsx
+++ b/packages/ui/src/overlays/tooltip/tooltip.stories.tsx
@@ -1,22 +1,23 @@
-import { TooltipV2 } from "./tooltip-v2"
-import { KeybindV2 } from "./keybind-v2"
+import { Tooltip } from "./tooltip"
+import { Keybind } from "@opencode-ai/ui/keybind"
 
 const docs = `### Overview
-Floating tooltip built on Kobalte's tooltip primitive with v2 styling.
+Floating tooltip built on Kobalte's tooltip primitive.
 
 ### API
 - \`value\`: Content rendered inside the floating tooltip.
 - \`children\`: The trigger element that activates the tooltip on hover/focus.
 - \`placement\`: Kobalte placement string (e.g. "top", "bottom", "left", "right").
+- \`appearance\`: \`compact\` (default) or \`standard\`.
 - \`inactive\`: When true, renders only the trigger without tooltip behavior.
 - \`forceOpen\`: Forces the tooltip to stay open.
 - Inherits Kobalte Tooltip root props.
 `
 
 export default {
-  title: "UI V2/Tooltip",
-  id: "components-tooltip-v2",
-  component: TooltipV2,
+  title: "UI/Tooltip",
+  id: "ui-tooltip",
+  component: Tooltip,
   tags: ["autodocs"],
   parameters: {
     frameHeight: "300px",
@@ -32,9 +33,22 @@ export default {
 export const Simple = {
   render: () => (
     <div style={{ padding: "80px", display: "flex", "justify-content": "center" }}>
-      <TooltipV2 value="Tooltip Text">
+      <Tooltip value="Tooltip Text">
         <span>Hover me</span>
-      </TooltipV2>
+      </Tooltip>
+    </div>
+  ),
+}
+
+export const Appearances = {
+  render: () => (
+    <div style={{ padding: "80px", display: "flex", gap: "32px", "justify-content": "center" }}>
+      <Tooltip appearance="standard" value="Standard tooltip">
+        <span>Standard</span>
+      </Tooltip>
+      <Tooltip appearance="compact" value="Compact tooltip">
+        <span>Compact</span>
+      </Tooltip>
     </div>
   ),
 }
@@ -42,16 +56,16 @@ export const Simple = {
 export const WithKeybind = {
   render: () => (
     <div style={{ padding: "80px", display: "flex", "justify-content": "center" }}>
-      <TooltipV2
+      <Tooltip
         value={
           <>
             Tooltip Text
-            <KeybindV2 keys={["⌘", "⌘"]} variant="neutral" />
+            <Keybind keys={["⌘", "⌘"]} variant="neutral" />
           </>
         }
       >
         <span>Hover me</span>
-      </TooltipV2>
+      </Tooltip>
     </div>
   ),
 }
@@ -59,7 +73,7 @@ export const WithKeybind = {
 export const Path = {
   render: () => (
     <div style={{ padding: "80px", display: "flex", "justify-content": "center" }}>
-      <TooltipV2
+      <Tooltip
         value={
           <>
             Components <span style={{ color: "var(--text-text-faint)" }}>/</span> Tooltip
@@ -67,7 +81,7 @@ export const Path = {
         }
       >
         <span>Hover me</span>
-      </TooltipV2>
+      </Tooltip>
     </div>
   ),
 }
@@ -75,7 +89,7 @@ export const Path = {
 export const TitleDescription = {
   render: () => (
     <div style={{ padding: "80px", display: "flex", "justify-content": "center" }}>
-      <TooltipV2
+      <Tooltip
         value={
           <>
             <span>Title</span>
@@ -85,7 +99,7 @@ export const TitleDescription = {
         }
       >
         <span>Hover me</span>
-      </TooltipV2>
+      </Tooltip>
     </div>
   ),
 }
diff --git a/packages/ui/src/v2/components/tooltip-v2.tsx b/packages/ui/src/overlays/tooltip/tooltip.tsx
similarity index 88%
rename from packages/ui/src/v2/components/tooltip-v2.tsx
rename to packages/ui/src/overlays/tooltip/tooltip.tsx
index 67d23928391..a203b9676fa 100644
--- a/packages/ui/src/v2/components/tooltip-v2.tsx
+++ b/packages/ui/src/overlays/tooltip/tooltip.tsx
@@ -1,11 +1,12 @@
-import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
+import { Content, Portal, Root, Trigger } from "@kobalte/core/tooltip"
 import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
-import "./tooltip-v2.css"
+import "./tooltip.css"
 
-export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
+export interface TooltipProps extends ComponentProps<typeof Root> {
   value: JSX.Element
+  appearance?: "standard" | "compact"
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
@@ -13,7 +14,7 @@ export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
   forceOpen?: boolean
 }
 
-export function TooltipV2(props: TooltipV2Props) {
+export function Tooltip(props: TooltipProps) {
   let ref: HTMLDivElement | undefined
   const [state, setState] = createStore({
     open: false,
@@ -22,6 +23,7 @@ export function TooltipV2(props: TooltipV2Props) {
   })
   const [local, others] = splitProps(props, [
     "children",
+    "appearance",
     "class",
     "contentClass",
     "contentStyle",
@@ -87,7 +89,7 @@ export function TooltipV2(props: TooltipV2Props) {
     <Switch>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={true}>
-        <KobalteTooltip
+        <Root
           gutter={4}
           openDelay={400}
           skipDelayDuration={300}
@@ -105,7 +107,7 @@ export function TooltipV2(props: TooltipV2Props) {
             setState("open", open)
           }}
         >
-          <KobalteTooltip.Trigger
+          <Trigger
             ref={ref}
             as="div"
             data-component="tooltip-v2-trigger"
@@ -119,14 +121,15 @@ export function TooltipV2(props: TooltipV2Props) {
             onFocusOut={() => requestAnimationFrame(() => drop())}
           >
             {local.children}
-          </KobalteTooltip.Trigger>
-          <KobalteTooltip.Portal>
-            <KobalteTooltip.Content
+          </Trigger>
+          <Portal>
+            <Content
               ref={(el) => {
                 const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
+              data-appearance={local.appearance ?? "compact"}
               data-placement={props.placement}
               data-force-open={local.forceOpen}
               class={local.contentClass}
@@ -139,9 +142,9 @@ export function TooltipV2(props: TooltipV2Props) {
               }}
             >
               {local.value}
-            </KobalteTooltip.Content>
-          </KobalteTooltip.Portal>
-        </KobalteTooltip>
+            </Content>
+          </Portal>
+        </Root>
       </Match>
     </Switch>
   )
diff --git a/packages/ui/src/v2/components/file-tree-v2.css b/packages/ui/src/styles/file-tree.css
similarity index 100%
rename from packages/ui/src/v2/components/file-tree-v2.css
rename to packages/ui/src/styles/file-tree.css
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 729e19cd33d..9a5fc2d3a97 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -6,47 +6,31 @@
 @import "./base.css" layer(base);
 @import "katex/dist/katex.min.css" layer(base);
 
-@import "../components/accordion.css" layer(components);
+@import "../data-display/accordion/accordion.css" layer(components);
 @import "../components/animated-number.css" layer(components);
 @import "../components/app-icon.css" layer(components);
-@import "../components/avatar.css" layer(components);
-@import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
-@import "../components/checkbox.css" layer(components);
+@import "../forms/checkbox/checkbox.css" layer(components);
 @import "../components/collapsible.css" layer(components);
-@import "../components/diff-changes.css" layer(components);
 @import "../components/context-menu.css" layer(components);
-@import "../components/dropdown-menu.css" layer(components);
-@import "../components/dialog.css" layer(components);
 @import "../components/file-icon.css" layer(components);
 @import "../components/hover-card.css" layer(components);
 @import "../components/provider-icon.css" layer(components);
 @import "../components/dock-surface.css" layer(components);
-@import "../components/icon.css" layer(components);
-@import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
-@import "../components/keybind.css" layer(components);
+@import "../forms/inline-input/inline-input.css" layer(components);
 @import "../components/text-field.css" layer(components);
-@import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);
 @import "../components/logo.css" layer(components);
 @import "../components/popover.css" layer(components);
 @import "../components/progress.css" layer(components);
-@import "../components/progress-circle.css" layer(components);
-@import "../components/radio-group.css" layer(components);
 @import "../components/resize-handle.css" layer(components);
-@import "../components/select.css" layer(components);
 @import "../components/spinner.css" layer(components);
-@import "../components/switch.css" layer(components);
 @import "../components/scroll-view.css" layer(components);
 @import "../components/sticky-accordion-header.css" layer(components);
-@import "../components/tabs.css" layer(components);
-@import "../components/tag.css" layer(components);
+@import "../navigation/tabs/tabs.css" layer(components);
 @import "../components/text-reveal.css" layer(components);
 @import "../components/text-strikethrough.css" layer(components);
-@import "../components/text-shimmer.css" layer(components);
-@import "../components/toast.css" layer(components);
-@import "../components/tooltip.css" layer(components);
 @import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);
diff --git a/packages/ui/src/v2/styles/colors.css b/packages/ui/src/styles/tokens/colors.css
similarity index 100%
rename from packages/ui/src/v2/styles/colors.css
rename to packages/ui/src/styles/tokens/colors.css
diff --git a/packages/ui/src/v2/styles/tailwind.css b/packages/ui/src/styles/tokens/index.css
similarity index 100%
rename from packages/ui/src/v2/styles/tailwind.css
rename to packages/ui/src/styles/tokens/index.css
diff --git a/packages/ui/src/v2/styles/theme.css b/packages/ui/src/styles/tokens/theme.css
similarity index 100%
rename from packages/ui/src/v2/styles/theme.css
rename to packages/ui/src/styles/tokens/theme.css
diff --git a/packages/ui/src/components/text-shimmer.css b/packages/ui/src/typography/text-shimmer/text-shimmer.css
similarity index 100%
rename from packages/ui/src/components/text-shimmer.css
rename to packages/ui/src/typography/text-shimmer/text-shimmer.css
diff --git a/packages/ui/src/v2/components/text-shimmer-v2.stories.tsx b/packages/ui/src/typography/text-shimmer/text-shimmer.stories.tsx
similarity index 68%
rename from packages/ui/src/v2/components/text-shimmer-v2.stories.tsx
rename to packages/ui/src/typography/text-shimmer/text-shimmer.stories.tsx
index 871d48cb1a7..1a36045277b 100644
--- a/packages/ui/src/v2/components/text-shimmer-v2.stories.tsx
+++ b/packages/ui/src/typography/text-shimmer/text-shimmer.stories.tsx
@@ -1,4 +1,4 @@
-import { TextShimmerV2 } from "./text-shimmer-v2"
+import { TextShimmer } from "./text-shimmer"
 
 const docs = `### Overview
 Animated shimmer effect for loading text placeholders.
@@ -15,13 +15,13 @@ Animated shimmer effect for loading text placeholders.
 - Uses \`aria-label\` with the full text.
 
 ### Theming
-- Uses \`data-component="text-shimmer-v2"\` and CSS custom properties for timing and colors.
+- Uses \`data-component="text-shimmer"\` and CSS custom properties for timing and colors.
 `
 
 export default {
-  title: "UI V2/TextShimmer",
-  id: "components-text-shimmer-v2",
-  component: TextShimmerV2,
+  title: "UI/TextShimmer",
+  id: "ui-text-shimmer",
+  component: TextShimmer,
   tags: ["autodocs"],
   parameters: {
     frameBackground: "#fff",
@@ -37,7 +37,7 @@ export default {
 export const Active = {
   render: () => (
     <span style={{ "font-size": "13px", "font-weight": "440", "font-family": "Inter, system-ui, sans-serif" }}>
-      <TextShimmerV2 text="Loading..." active={true} />
+      <TextShimmer text="Loading..." active={true} />
     </span>
   ),
 }
@@ -45,7 +45,7 @@ export const Active = {
 export const Inactive = {
   render: () => (
     <span style={{ "font-size": "13px", "font-weight": "440", "font-family": "Inter, system-ui, sans-serif" }}>
-      <TextShimmerV2 text="Static text" active={false} />
+      <TextShimmer text="Static text" active={false} />
     </span>
   ),
 }
@@ -62,9 +62,9 @@ export const WithOffset = {
         "font-family": "Inter, system-ui, sans-serif",
       }}
     >
-      <TextShimmerV2 text="First line" active={true} offset={0} />
-      <TextShimmerV2 text="Second line" active={true} offset={5} />
-      <TextShimmerV2 text="Third line" active={true} offset={10} />
+      <TextShimmer text="First line" active={true} offset={0} />
+      <TextShimmer text="Second line" active={true} offset={5} />
+      <TextShimmer text="Third line" active={true} offset={10} />
     </div>
   ),
 }
diff --git a/packages/ui/src/components/text-shimmer.tsx b/packages/ui/src/typography/text-shimmer/text-shimmer.tsx
similarity index 98%
rename from packages/ui/src/components/text-shimmer.tsx
rename to packages/ui/src/typography/text-shimmer/text-shimmer.tsx
index 3ab077d92df..71b2b6e1839 100644
--- a/packages/ui/src/components/text-shimmer.tsx
+++ b/packages/ui/src/typography/text-shimmer/text-shimmer.tsx
@@ -1,5 +1,6 @@
 import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
 import { Dynamic } from "solid-js/web"
+import "./text-shimmer.css"
 
 export const TextShimmer = <T extends ValidComponent = "span">(props: {
   text: string
diff --git a/packages/ui/src/typography/wordmark/wordmark.stories.tsx b/packages/ui/src/typography/wordmark/wordmark.stories.tsx
new file mode 100644
index 00000000000..e3d953149fe
--- /dev/null
+++ b/packages/ui/src/typography/wordmark/wordmark.stories.tsx
@@ -0,0 +1,16 @@
+import { Wordmark } from "./wordmark"
+
+export default {
+  title: "UI/Wordmark",
+  id: "ui-wordmark",
+  component: Wordmark,
+  tags: ["autodocs"],
+}
+
+export const Basic = {
+  render: () => (
+    <div style={{ width: "360px", color: "var(--text-base)" }}>
+      <Wordmark />
+    </div>
+  ),
+}
diff --git a/packages/ui/src/v2/components/wordmark-v2.tsx b/packages/ui/src/typography/wordmark/wordmark.tsx
similarity index 97%
rename from packages/ui/src/v2/components/wordmark-v2.tsx
rename to packages/ui/src/typography/wordmark/wordmark.tsx
index 1abe1cd8286..ab8474a2447 100644
--- a/packages/ui/src/v2/components/wordmark-v2.tsx
+++ b/packages/ui/src/typography/wordmark/wordmark.tsx
@@ -1,6 +1,6 @@
 import { createUniqueId, type ComponentProps } from "solid-js"
 
-export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
+export function Wordmark(props: Pick<ComponentProps<"svg">, "class">) {
   const mask = createUniqueId()
   const maskGradient = createUniqueId()
 
diff --git a/packages/ui/src/v2/components/accordion-v2.css b/packages/ui/src/v2/components/accordion-v2.css
deleted file mode 100644
index 281a031c36e..00000000000
--- a/packages/ui/src/v2/components/accordion-v2.css
+++ /dev/null
@@ -1,139 +0,0 @@
-[data-component="accordion-v2"] {
-  --accordion-v2-fg: var(--v2-text-text-base);
-  --accordion-v2-icon: var(--v2-icon-icon-base);
-  --accordion-v2-border: var(--v2-border-border-strong);
-  --accordion-v2-bg: var(--v2-background-bg-base);
-
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  width: 100%;
-  background: var(--accordion-v2-bg);
-  border-radius: 6px;
-  box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
-  overflow: hidden;
-
-  color: var(--accordion-v2-fg);
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="accordion-v2-item"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  background: var(--accordion-v2-bg);
-  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
-}
-
-[data-component="accordion-v2-item"]:last-child {
-  box-shadow: none;
-}
-
-[data-slot="accordion-v2-header"] {
-  display: flex;
-  margin: 0;
-}
-
-[data-component="accordion-v2-trigger"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-
-  width: 100%;
-  min-height: 30px;
-  padding: 0 12px;
-
-  background: transparent;
-  border: 0;
-  outline: none;
-  cursor: default;
-  user-select: none;
-
-  font-size: 13px;
-  font-weight: 440;
-  line-height: 100%;
-  letter-spacing: -0.04px;
-  color: var(--accordion-v2-fg);
-  text-align: left;
-}
-
-[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-trigger-content"] {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  height: 30px;
-}
-
-[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-chevron"] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  color: var(--accordion-v2-icon);
-  transition: transform 150ms ease;
-}
-
-[data-component="accordion-v2-trigger"][data-expanded] [data-slot="accordion-v2-chevron"] {
-  transform: rotate(180deg);
-}
-
-[data-component="accordion-v2-item"][data-expanded] [data-component="accordion-v2-trigger"] {
-  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
-}
-
-[data-component="accordion-v2-trigger"][data-disabled] {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-[data-component="accordion-v2-content"] {
-  overflow: hidden;
-  font-size: 13px;
-  line-height: 140%;
-  color: var(--accordion-v2-fg);
-}
-
-[data-component="accordion-v2-content"][data-expanded] {
-  animation: accordion-v2-down 180ms ease-out;
-}
-
-[data-component="accordion-v2-content"][data-closed] {
-  animation: accordion-v2-up 180ms ease-out;
-}
-
-[data-component="accordion-v2-content"] [data-slot="accordion-v2-content-inner"] {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  padding: 12px;
-}
-
-@keyframes accordion-v2-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--kb-collapsible-content-height);
-  }
-}
-
-@keyframes accordion-v2-up {
-  from {
-    height: var(--kb-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
diff --git a/packages/ui/src/v2/components/accordion-v2.stories.tsx b/packages/ui/src/v2/components/accordion-v2.stories.tsx
deleted file mode 100644
index 70fba2dbda5..00000000000
--- a/packages/ui/src/v2/components/accordion-v2.stories.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-// @ts-nocheck
-import { AccordionV2 } from "./accordion-v2"
-
-const docs = `### Overview
-Compound accordion built on Kobalte's \`Accordion\` primitive. The trigger automatically renders a chevron that rotates open.
-
-### API
-- \`AccordionV2\` — root; forwards Kobalte props (\`multiple\`, \`collapsible\`, \`value\`, \`defaultValue\`, \`onChange\`, etc.).
-- \`AccordionV2.Item\` — one expandable row; requires a unique \`value: string\`.
-- \`AccordionV2.Header\` — wraps the trigger; preserves heading semantics.
-- \`AccordionV2.Trigger\` — auto-renders a trailing chevron; pass \`hideChevron\` to opt out.
-- \`AccordionV2.Content\` — body shown when the item is expanded; height-animated.
-
-### Behavior
-- Single-select by default (\`collapsible\` allows closing the active item). Use \`multiple\` to let several items open at once.
-- Open/closed state is reflected on items, triggers, and content via \`data-expanded\` / \`data-closed\`.
-- Content height animates using Kobalte's \`--kb-collapsible-content-height\` variable.
-`
-
-export default {
-  title: "UI V2/Accordion",
-  id: "components-accordion-v2",
-  component: AccordionV2,
-  tags: ["autodocs"],
-  parameters: {
-    frameBackground: "#f5f5f5",
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-const frame = { width: "346px", "font-family": "var(--v2-font-family-sans)", "font-size": "13px" } as const
-
-export const Basic = {
-  render: () => (
-    <div style={frame}>
-      <AccordionV2 collapsible defaultValue={["item-1"]}>
-        <AccordionV2.Item value="item-1">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Is it accessible?</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>
-            Yes. It follows the WAI-ARIA Accordion pattern and ships with full keyboard support.
-          </AccordionV2.Content>
-        </AccordionV2.Item>
-        <AccordionV2.Item value="item-2">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Is it styled?</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>Yeah</AccordionV2.Content>
-        </AccordionV2.Item>
-        <AccordionV2.Item value="item-3">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Is it animated?</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>Yes. Height animates via Kobalte's collapsible height variable.</AccordionV2.Content>
-        </AccordionV2.Item>
-      </AccordionV2>
-    </div>
-  ),
-}
-
-export const Multiple = {
-  render: () => (
-    <div style={frame}>
-      <AccordionV2 multiple defaultValue={["a", "c"]}>
-        <AccordionV2.Item value="a">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Section A</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>Multiple items can be open at once.</AccordionV2.Content>
-        </AccordionV2.Item>
-        <AccordionV2.Item value="b">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Section B</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>Open me too.</AccordionV2.Content>
-        </AccordionV2.Item>
-        <AccordionV2.Item value="c">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Section C</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>Already open by default.</AccordionV2.Content>
-        </AccordionV2.Item>
-      </AccordionV2>
-    </div>
-  ),
-}
-
-export const Disabled = {
-  render: () => (
-    <div style={frame}>
-      <AccordionV2 collapsible>
-        <AccordionV2.Item value="one">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Enabled item</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>Body content.</AccordionV2.Content>
-        </AccordionV2.Item>
-        <AccordionV2.Item value="two" disabled>
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Disabled item</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>You can't open this one.</AccordionV2.Content>
-        </AccordionV2.Item>
-        <AccordionV2.Item value="three">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Another enabled item</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>Body content.</AccordionV2.Content>
-        </AccordionV2.Item>
-      </AccordionV2>
-    </div>
-  ),
-}
-
-export const LongContent = {
-  render: () => (
-    <div style={frame}>
-      <AccordionV2 collapsible defaultValue={["long"]}>
-        <AccordionV2.Item value="long">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>What's inside?</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>
-            <div style={{ display: "grid", gap: "8px" }}>
-              <p style={{ margin: 0 }}>
-                Accordions are useful for compressing dense content into scannable sections. They preserve heading
-                semantics and announce open/closed state to screen readers.
-              </p>
-              <p style={{ margin: 0 }}>
-                The body can hold arbitrary content — paragraphs, lists, even nested components.
-              </p>
-              <ul style={{ margin: 0, "padding-left": "16px" }}>
-                <li>Keyboard navigable</li>
-                <li>Animated</li>
-                <li>Themeable via CSS variables</li>
-              </ul>
-            </div>
-          </AccordionV2.Content>
-        </AccordionV2.Item>
-        <AccordionV2.Item value="short">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>One more</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>Short body.</AccordionV2.Content>
-        </AccordionV2.Item>
-      </AccordionV2>
-    </div>
-  ),
-}
-
-export const NoChevron = {
-  render: () => (
-    <div style={frame}>
-      <AccordionV2 collapsible>
-        <AccordionV2.Item value="x">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger hideChevron>Trigger without chevron</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>
-            Pass <code>hideChevron</code> on the trigger.
-          </AccordionV2.Content>
-        </AccordionV2.Item>
-        <AccordionV2.Item value="y">
-          <AccordionV2.Header>
-            <AccordionV2.Trigger>Default trigger</AccordionV2.Trigger>
-          </AccordionV2.Header>
-          <AccordionV2.Content>Chevron renders by default.</AccordionV2.Content>
-        </AccordionV2.Item>
-      </AccordionV2>
-    </div>
-  ),
-}
diff --git a/packages/ui/src/v2/components/accordion-v2.tsx b/packages/ui/src/v2/components/accordion-v2.tsx
deleted file mode 100644
index 5a996a02a21..00000000000
--- a/packages/ui/src/v2/components/accordion-v2.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Accordion as Kobalte } from "@kobalte/core/accordion"
-import { Show, splitProps, type Component, type ComponentProps, type ParentProps } from "solid-js"
-import "./accordion-v2.css"
-
-const ChevronDown: Component = () => (
-  <svg
-    data-slot="accordion-v2-chevron"
-    width="14"
-    height="14"
-    viewBox="0 0 14 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-  >
-    <path d="M4 5.5L7 8.5L10 5.5" stroke="currentColor" />
-  </svg>
-)
-
-export interface AccordionV2Props extends ComponentProps<typeof Kobalte> {}
-export interface AccordionV2ItemProps extends ComponentProps<typeof Kobalte.Item> {}
-export interface AccordionV2HeaderProps extends ComponentProps<typeof Kobalte.Header> {}
-export interface AccordionV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-  hideChevron?: boolean
-}
-export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
-
-function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
-  const [s, r] = splitProps(props, ["class", "classList"])
-  return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
-}
-
-function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
-  const [s, r] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.Item
-      {...r}
-      data-component="accordion-v2-item"
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    />
-  )
-}
-
-function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
-  const [s, r] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
-      {s.children}
-    </Kobalte.Header>
-  )
-}
-
-function AccordionV2Trigger(props: ParentProps<AccordionV2TriggerProps>) {
-  const [s, r] = splitProps(props, ["class", "classList", "children", "hideChevron"])
-  return (
-    <Kobalte.Trigger
-      {...r}
-      data-component="accordion-v2-trigger"
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    >
-      <span data-slot="accordion-v2-trigger-content">{s.children}</span>
-      <Show when={!s.hideChevron}>
-        <ChevronDown />
-      </Show>
-    </Kobalte.Trigger>
-  )
-}
-
-function AccordionV2Content(props: ParentProps<AccordionV2ContentProps>) {
-  const [s, r] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...r}
-      data-component="accordion-v2-content"
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    >
-      <div data-slot="accordion-v2-content-inner">{s.children}</div>
-    </Kobalte.Content>
-  )
-}
-
-export const AccordionV2 = Object.assign(AccordionV2Root, {
-  Item: AccordionV2Item,
-  Header: AccordionV2Header,
-  Trigger: AccordionV2Trigger,
-  Content: AccordionV2Content,
-})
diff --git a/packages/ui/src/v2/components/avatar-v2.tsx b/packages/ui/src/v2/components/avatar-v2.tsx
deleted file mode 100644
index 37b223772f2..00000000000
--- a/packages/ui/src/v2/components/avatar-v2.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { type ComponentProps, splitProps, Show } from "solid-js"
-import "./avatar-v2.css"
-
-const segmenter =
-  typeof Intl !== "undefined" && "Segmenter" in Intl
-    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
-    : undefined
-
-function first(value: string) {
-  if (!value) return ""
-  if (!segmenter) return Array.from(value)[0] ?? ""
-  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
-}
-
-export interface AvatarProps extends ComponentProps<"div"> {
-  fallback: string
-  src?: string
-  background?: string
-  foreground?: string
-  size?: "small" | "normal" | "large"
-  kind?: "user" | "org"
-}
-
-export function Avatar(props: AvatarProps) {
-  const [split, rest] = splitProps(props, [
-    "fallback",
-    "src",
-    "background",
-    "foreground",
-    "size",
-    "kind",
-    "class",
-    "classList",
-    "style",
-  ])
-  const src = split.src // did this so i can zero it out to test fallback
-  return (
-    <div
-      {...rest}
-      data-component="avatar-v2"
-      data-size={split.size || "large"}
-      data-kind={split.kind || "user"}
-      data-has-image={src ? "" : undefined}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-      style={{
-        ...(typeof split.style === "object" ? split.style : {}),
-        ...(!src && split.background ? { "--avatar-bg": split.background } : {}),
-        ...(!src && split.foreground ? { "--avatar-fg": split.foreground } : {}),
-      }}
-    >
-      <Show when={src} fallback={first(split.fallback)}>
-        {(src) => <img src={src()} draggable={false} data-slot="avatar-image" />}
-      </Show>
-    </div>
-  )
-}
diff --git a/packages/ui/src/v2/components/checkbox-v2.css b/packages/ui/src/v2/components/checkbox-v2.css
deleted file mode 100644
index 47e3de9f5e7..00000000000
--- a/packages/ui/src/v2/components/checkbox-v2.css
+++ /dev/null
@@ -1,184 +0,0 @@
-[data-slot="checkbox-v2"] {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  cursor: default;
-
-  &:where([data-disabled]) {
-    cursor: not-allowed;
-  }
-
-  [data-slot="checkbox-v2-error"] {
-    color: var(--v2-state-fg-danger);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="checkbox-v2-error"]:empty {
-    display: none;
-  }
-}
-
-[data-slot="checkbox-v2-row"] {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: 0px;
-  gap: 8px;
-
-  [data-slot="checkbox-v2-input"] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  [data-slot="checkbox-v2-control-stack"] {
-    position: relative;
-    width: 16px;
-    height: 20px;
-    flex: none;
-  }
-
-  [data-slot="checkbox-v2-control"] {
-    box-sizing: border-box;
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    flex: none;
-    flex-shrink: 0;
-    left: 0;
-    top: calc(50% - 16px / 2);
-    border-radius: 4px;
-    border: none;
-    box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
-
-    background:
-      linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
-    transition:
-      background 170ms ease-out,
-      opacity 170ms ease-out,
-      outline-color 170ms ease-out;
-  }
-
-  [data-slot="checkbox-v2-indicator"] {
-    position: absolute;
-    inset: 0;
-    width: 16px;
-    height: 16px;
-    pointer-events: none;
-  }
-
-  [data-slot="checkbox-v2-text"] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-    gap: 6px;
-  }
-
-  [data-slot="checkbox-v2-label"] {
-    display: inline-flex;
-    user-select: none;
-    color: inherit;
-    font-style: normal;
-    font-weight: 440;
-    font-variant-numeric: tabular-nums;
-    font-variation-settings: "slnt" 0;
-  }
-
-  [data-slot="checkbox-v2-label-text"] {
-    display: inline-flex;
-    align-items: center;
-    user-select: none;
-    color: var(--v2-text-text-base);
-    font-size: 13px;
-    line-height: 20px;
-    letter-spacing: -0.04px;
-  }
-
-  [data-slot="checkbox-v2-description"] {
-    color: var(--v2-text-text-muted);
-    font-size: 11px;
-    font-weight: 440;
-    line-height: 1;
-    letter-spacing: 0.05px;
-    font-variant-numeric: tabular-nums;
-    user-select: none;
-  }
-}
-
-[data-slot="checkbox-v2"]:where(:not([data-readonly]))
-  [data-slot="checkbox-v2-input"]:focus-visible
-  ~ [data-slot="checkbox-v2-control-stack"]
-  [data-slot="checkbox-v2-control"] {
-  outline: 2px solid var(--v2-border-border-focus);
-  outline-offset: 1px;
-}
-
-[data-slot="checkbox-v2"]:where(:hover):where(:not([data-disabled], [data-readonly], [data-invalid])):where(
-    :not([data-checked], [data-indeterminate])
-  )
-  [data-slot="checkbox-v2-control"] {
-  background:
-    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
-}
-
-[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
-  opacity: 0.5;
-}
-
-[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
-  background:
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
-}
-
-[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
-    :not([data-disabled], [data-readonly])
-  )
-  [data-slot="checkbox-v2-control"] {
-  background:
-    linear-gradient(
-      0deg,
-      var(--v2-overlay-simple-overlay-contrast-hover),
-      var(--v2-overlay-simple-overlay-contrast-hover)
-    ),
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
-}
-
-[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))
-  [data-slot="checkbox-v2-control"] {
-  background: var(--v2-state-bg-danger);
-  box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
-}
-
-[data-slot="checkbox-v2"] .checkbox-v2-icon {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  display: none;
-}
-
-[data-slot="checkbox-v2"]:where([data-checked]):where(:not([data-indeterminate])) .checkbox-v2-icon--check {
-  display: block;
-}
-
-[data-slot="checkbox-v2"]:where([data-indeterminate]) .checkbox-v2-icon--minus {
-  display: block;
-}
-
-[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-label"],
-[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-description"] {
-  opacity: 0.5;
-}
diff --git a/packages/ui/src/v2/components/checkbox-v2.stories.tsx b/packages/ui/src/v2/components/checkbox-v2.stories.tsx
deleted file mode 100644
index 8ca32efbb18..00000000000
--- a/packages/ui/src/v2/components/checkbox-v2.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// @ts-nocheck
-import { createSignal } from "solid-js"
-import { CheckboxV2 } from "./checkbox-v2"
-
-const docs = `### Overview
-Binary and tri-state checkbox using Kobalte Checkbox.
-
-### API
-- Forwards Kobalte Checkbox props (\`checked\`, \`defaultChecked\`, \`onChange\`, \`indeterminate\`, \`name\`, \`required\`, \`validationState\`, \`disabled\`, etc.).
-- Adds \`label\`, optional \`description\`, and \`hideLabel\`.
-
-### Behavior
-- Controlled or uncontrolled via \`checked\` / \`defaultChecked\`.
-- Indeterminate is driven by the \`indeterminate\` prop (pass a reactive boolean, e.g. \`indeterminate={flag()}\`).
-
-### Theming/tokens
-- Uses \`data-slot="checkbox-v2"\` and slot attributes aligned with radio item layout.
-`
-
-export default {
-  title: "UI V2/Checkbox",
-  id: "components-checkbox-v2",
-  component: CheckboxV2,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = {
-  render: () => (
-    <CheckboxV2 defaultChecked={false} name="terms" label="Accept terms" description="You must accept to continue." />
-  ),
-}
-
-export const Controlled = {
-  render: () => {
-    const [checked, setChecked] = createSignal(false)
-    return (
-      <div style={{ display: "grid", gap: "12px" }}>
-        <CheckboxV2
-          name="controlled"
-          checked={checked()}
-          onChange={setChecked}
-          label="Controlled checkbox"
-          description="Toggled from Storybook state."
-        />
-        <div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
-          Checked: {String(checked())}
-        </div>
-      </div>
-    )
-  },
-}
-
-export const Indeterminate = {
-  render: () => {
-    const [indeterminate, setIndeterminate] = createSignal(true)
-    const [checked, setChecked] = createSignal(false)
-    return (
-      <CheckboxV2
-        name="indeterminate-demo"
-        checked={checked()}
-        indeterminate={indeterminate()}
-        onChange={(v) => {
-          setChecked(v)
-          if (v) setIndeterminate(false)
-        }}
-        label="Select all"
-        description="Starts indeterminate; checking clears mixed state."
-      />
-    )
-  },
-}
-
-export const States = {
-  render: () => (
-    <div style={{ display: "grid", gap: "20px" }}>
-      <CheckboxV2 name="s1" label="Default" description="Helper text." />
-      <CheckboxV2 name="s2" defaultChecked label="Checked" />
-      <CheckboxV2 name="s3" indeterminate label="Indeterminate" />
-      <CheckboxV2 name="s4" disabled label="Disabled" />
-      <CheckboxV2 name="s5" disabled defaultChecked label="Checked disabled" />
-      <CheckboxV2 name="s6" disabled indeterminate label="Indeterminate disabled" />
-      <CheckboxV2 name="s7" label="Invalid" description="Must be checked." required validationState="invalid" />
-    </div>
-  ),
-}
diff --git a/packages/ui/src/v2/components/checkbox-v2.tsx b/packages/ui/src/v2/components/checkbox-v2.tsx
deleted file mode 100644
index b66a99f6562..00000000000
--- a/packages/ui/src/v2/components/checkbox-v2.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
-import { Show, splitProps, type JSX } from "solid-js"
-import type { ComponentProps } from "solid-js"
-import "./checkbox-v2.css"
-
-export interface CheckboxV2Props extends ComponentProps<typeof Kobalte> {
-  label: JSX.Element
-  description?: JSX.Element
-  hideLabel?: boolean
-}
-
-export function CheckboxV2(props: CheckboxV2Props) {
-  const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
-  return (
-    <Kobalte
-      {...others}
-      data-slot="checkbox-v2"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      <div data-slot="checkbox-v2-row">
-        <Kobalte.Input data-slot="checkbox-v2-input" />
-        <div data-slot="checkbox-v2-control-stack">
-          <Kobalte.Control data-slot="checkbox-v2-control">
-            <Kobalte.Indicator data-slot="checkbox-v2-indicator">
-              <svg
-                class="checkbox-v2-icon checkbox-v2-icon--check"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <path d="M3.53564 8.17857L6.39279 11.75L12.4642 4.25" stroke="#FAFAFA" stroke-width="1" />
-              </svg>
-              <svg
-                class="checkbox-v2-icon checkbox-v2-icon--minus"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <path d="M12.75 8H3.25" stroke="#FAFAFA" stroke-linejoin="round" stroke-width="1" />
-              </svg>
-            </Kobalte.Indicator>
-          </Kobalte.Control>
-        </div>
-        <Kobalte.Label data-slot="checkbox-v2-label" classList={{ "sr-only": local.hideLabel }}>
-          <div data-slot="checkbox-v2-text">
-            <span data-slot="checkbox-v2-label-text">{local.label}</span>
-            <Show when={local.description}>
-              {(description) => <span data-slot="checkbox-v2-description">{description()}</span>}
-            </Show>
-          </div>
-        </Kobalte.Label>
-      </div>
-      <Kobalte.ErrorMessage data-slot="checkbox-v2-error" />
-    </Kobalte>
-  )
-}
diff --git a/packages/ui/src/v2/components/diff-changes-v2.css b/packages/ui/src/v2/components/diff-changes-v2.css
deleted file mode 100644
index 0f6f260521c..00000000000
--- a/packages/ui/src/v2/components/diff-changes-v2.css
+++ /dev/null
@@ -1,26 +0,0 @@
-[data-component="diff-changes"] {
-  display: flex;
-  direction: ltr;
-  unicode-bidi: isolate;
-  gap: 8px;
-  justify-content: flex-end;
-  align-items: center;
-
-  [data-slot="diff-changes-additions"],
-  [data-slot="diff-changes-deletions"] {
-    font-size: 11px;
-    font-style: normal;
-    font-weight: 440;
-    line-height: 1;
-    letter-spacing: 0.05px;
-    text-align: right;
-  }
-
-  [data-slot="diff-changes-additions"] {
-    color: var(--v2-state-fg-success);
-  }
-
-  [data-slot="diff-changes-deletions"] {
-    color: var(--v2-state-fg-danger);
-  }
-}
diff --git a/packages/ui/src/v2/components/icon-button-v2.tsx b/packages/ui/src/v2/components/icon-button-v2.tsx
deleted file mode 100644
index 1f7ce3efabf..00000000000
--- a/packages/ui/src/v2/components/icon-button-v2.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button"
-import { type ComponentProps, splitProps } from "solid-js"
-import { JSX } from "solid-js"
-import "./icon-button-v2.css"
-
-export interface IconButtonV2Props
-  extends ComponentProps<typeof Kobalte>,
-    Pick<ComponentProps<"button">, "class" | "classList"> {
-  // temporary
-  icon?: JSX.Element
-  // icon: IconProps["name"]
-  size?: "small" | "normal" | "large"
-  // iconSize?: IconProps["size"]
-  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
-  state?: "rest" | "hover" | "pressed"
-}
-
-export function IconButtonV2(props: ComponentProps<"button"> & IconButtonV2Props) {
-  const [split, rest] = splitProps(props, ["variant", "size", "iconSize", "class", "classList", "state"])
-  return (
-    <Kobalte
-      {...rest}
-      data-component="icon-button-v2"
-      // data-icon={props.icon}
-      data-size={split.size || "normal"}
-      data-variant={split.variant || "neutral"}
-      data-state={split.state}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {props.icon}
-      {/*<Icon name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />*/}
-    </Kobalte>
-  )
-}
diff --git a/packages/ui/src/v2/components/inline-input-v2.css b/packages/ui/src/v2/components/inline-input-v2.css
deleted file mode 100644
index c2f13e605da..00000000000
--- a/packages/ui/src/v2/components/inline-input-v2.css
+++ /dev/null
@@ -1,225 +0,0 @@
-[data-component="inline-input-v2"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  padding: 0;
-  width: 280px;
-  height: 28px;
-  border: 0;
-  border-radius: 6px;
-  outline: 1px solid transparent;
-  outline-offset: 0;
-  background:
-    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
-  box-shadow: var(--v2-elevation-button-neutral);
-  flex: none;
-  align-self: stretch;
-  overflow: hidden;
-  transition:
-    background 85ms ease-out,
-    outline-color 85ms ease-out,
-    box-shadow 85ms ease-out;
-}
-
-[data-component="inline-input-v2"][data-appearance="large"] {
-  height: 32px;
-}
-
-[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
-  background:
-    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
-}
-
-[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within)
-  [data-slot="inline-input-v2-prefix"] {
-  background: transparent;
-}
-
-[data-component="inline-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
-  outline-color: var(--v2-border-border-focus);
-  box-shadow: none;
-}
-
-[data-component="inline-input-v2"]:where([data-invalid]):not([data-disabled]) {
-  outline-color: var(--v2-state-fg-danger);
-  box-shadow: none;
-}
-
-[data-component="inline-input-v2"]:where([data-disabled]) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-prefix"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  flex: none;
-  align-self: stretch;
-  width: fit-content;
-  min-width: 0;
-  max-width: 100%;
-  padding: 4px 8px;
-  gap: 4px;
-  background: var(--v2-background-bg-layer-01);
-  border-radius: 4px 0 0 4px;
-  cursor: default;
-  transition: background 85ms ease-out;
-}
-
-[data-component="inline-input-v2"]:where([data-disabled]) [data-slot="inline-input-v2-prefix"] {
-  cursor: not-allowed;
-}
-
-[data-component="inline-input-v2"][data-label-width] [data-slot="inline-input-v2-prefix"] {
-  width: var(--inline-input-v2-label-width);
-  min-width: var(--inline-input-v2-label-width);
-  max-width: var(--inline-input-v2-label-width);
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-prefix-text"] {
-  display: block;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-style: normal;
-  font-weight: 440;
-  font-size: 13px;
-  line-height: 1;
-  letter-spacing: -0.04px;
-  color: var(--v2-text-text-muted);
-  font-variation-settings: "slnt" 0;
-  user-select: none;
-}
-
-[data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-prefix-text"] {
-  font-variant-numeric: tabular-nums;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-divider"] {
-  flex: none;
-  align-self: stretch;
-  width: 0.5px;
-  min-width: 0.5px;
-  background: var(--v2-border-border-base);
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-field"] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  align-self: stretch;
-  flex: 1 1 auto;
-  min-width: 0;
-  padding: 4px 8px;
-  gap: 8px;
-}
-
-[data-component="inline-input-v2"][data-appearance="large"] [data-slot="inline-input-v2-field"] {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-value"] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-input"] {
-  display: block;
-  width: 100%;
-  min-width: 0;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  background: transparent;
-  outline: none;
-  font-style: normal;
-  font-weight: 440;
-  font-size: 13px;
-  line-height: 1;
-  letter-spacing: -0.04px;
-  color: var(--v2-text-text-base);
-  font-variation-settings: "slnt" 0;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-input"]::placeholder {
-  color: var(--v2-text-text-faint);
-  user-select: none;
-}
-
-[data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-input"] {
-  font-variant-numeric: tabular-nums;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"] {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  flex: none;
-  width: 20px;
-  height: 20px;
-  padding: 2px;
-  gap: 3px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--v2-icon-icon-muted);
-  cursor: pointer;
-  outline: none;
-}
-
-[data-component="inline-input-v2"]
-  [data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
-  background-color: var(--v2-overlay-simple-overlay-hover);
-}
-
-[data-component="inline-input-v2"]
-  [data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
-  background-color: var(--v2-overlay-simple-overlay-pressed);
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus {
-  outline: none;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus-visible {
-  outline: 2px solid var(--v2-border-border-focus);
-  outline-offset: 1px;
-}
-
-[data-component="inline-input-v2"]:where([data-disabled]) [data-slot="inline-input-v2-icon-button"] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"] [data-slot="icon-svg"] {
-  display: block;
-  flex: none;
-  color: currentColor;
-}
-
-[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-prefix-text"] {
-  color: var(--v2-text-text-muted);
-}
-
-[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"] {
-  color: var(--v2-state-fg-danger);
-  caret-color: var(--v2-state-fg-danger);
-}
-
-[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"]::placeholder {
-  color: var(--v2-state-fg-danger);
-  opacity: 1;
-}
diff --git a/packages/ui/src/v2/components/inline-input-v2.stories.tsx b/packages/ui/src/v2/components/inline-input-v2.stories.tsx
deleted file mode 100644
index c1871dc5c97..00000000000
--- a/packages/ui/src/v2/components/inline-input-v2.stories.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-// @ts-nocheck
-import { createSignal } from "solid-js"
-import { Field as FieldV2 } from "./field-v2"
-import { InlineInputV2 } from "./inline-input-v2"
-
-const docs = `### Overview
-Single-line field with an inline prefix label, vertical divider, and the same states as TextInput v2.
-
-### API
-- \`prefix\`: Inline label in the leading segment (required).
-- \`labelWidth\`: Fixed prefix width (px number or CSS length). Omit for fit-content.
-- Forwards native \`input\` props (\`value\`, \`defaultValue\`, \`placeholder\`, \`disabled\`, etc.).
-- \`showCopyButton\`, \`copyLabel\`, \`onCopyClick\`: Optional trailing copy control.
-- \`invalid\`: Error outline and danger text color.
-- \`appearance\`: \`"base"\` (28px) or \`"large"\` (32px).
-- \`numeric\`: Tabular numerals on prefix and value.
-
-### States
-- **Hover**, **Focus**, **Invalid**, **Disabled** — same as TextInput v2 on the outer shell.
-
-### Field
-Compose with \`Field\` for label, helper prefix/suffix, and tooltip — see the **Field** story.
-`
-
-export default {
-  title: "UI V2/InlineInput",
-  id: "components-inline-input-v2",
-  component: InlineInputV2,
-  tags: ["autodocs"],
-  parameters: {
-    frameHeight: "400px",
-    frameBackground: "#fff",
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-  args: {
-    prefix: "Label",
-    placeholder: "Text",
-    showCopyButton: true,
-    disabled: false,
-    invalid: false,
-    appearance: "base",
-  },
-  argTypes: {
-    prefix: {
-      control: "text",
-    },
-    labelWidth: {
-      control: "number",
-    },
-    appearance: {
-      control: "select",
-      options: ["base", "large"],
-    },
-    showCopyButton: {
-      control: "boolean",
-    },
-    disabled: {
-      control: "boolean",
-    },
-    invalid: {
-      control: "boolean",
-    },
-    placeholder: {
-      control: "text",
-    },
-  },
-}
-
-export const Playground = {}
-
-export const Controlled = {
-  render: () => {
-    const [value, setValue] = createSignal("42")
-    return (
-      <div style={{ display: "grid", gap: "12px", width: "280px" }}>
-        <InlineInputV2
-          prefix="Amount"
-          value={value()}
-          onInput={(e) => setValue(e.currentTarget.value)}
-          placeholder="0.00"
-          numeric
-        />
-        <div
-          style={{
-            "font-family": "var(--v2-font-family-sans)",
-            "font-size": "12px",
-            color: "var(--text-text-faint)",
-          }}
-        >
-          Value: {value()}
-        </div>
-      </div>
-    )
-  },
-}
-
-export const Appearances = {
-  render: () => (
-    <div style={{ display: "grid", gap: "20px", width: "280px" }}>
-      <InlineInputV2 prefix="Label" appearance="base" placeholder="Text" showCopyButton />
-      <InlineInputV2 prefix="Label" appearance="large" placeholder="Text" showCopyButton />
-      <InlineInputV2 prefix="Label" labelWidth={50} placeholder="Text" showCopyButton />
-      <InlineInputV2 prefix="Long label" placeholder="Text" showCopyButton />
-    </div>
-  ),
-}
-
-export const Field = {
-  parameters: { frameHeight: "500px" },
-  render: () => (
-    <div style={{ display: "grid", gap: "24px", width: "280px" }}>
-      <FieldV2>
-        <FieldV2.Label tooltip="Additional context">Label</FieldV2.Label>
-        <FieldV2.Prefix>Prefix</FieldV2.Prefix>
-        <InlineInputV2 prefix="USD" placeholder="0.00" numeric showCopyButton />
-        <FieldV2.Suffix>Suffix</FieldV2.Suffix>
-      </FieldV2>
-      <FieldV2 invalid>
-        <FieldV2.Label>Label</FieldV2.Label>
-        <FieldV2.Prefix>Prefix</FieldV2.Prefix>
-        <InlineInputV2 prefix="USD" placeholder="0.00" defaultValue="Invalid" showCopyButton />
-        <FieldV2.Suffix>Suffix</FieldV2.Suffix>
-      </FieldV2>
-    </div>
-  ),
-}
-
-export const States = {
-  render: () => (
-    <div style={{ display: "grid", gap: "20px", width: "280px" }}>
-      <InlineInputV2 prefix="Label" placeholder="Text" showCopyButton />
-      <InlineInputV2 prefix="Label" placeholder="Text" defaultValue="Hello" showCopyButton />
-      <InlineInputV2 prefix="Label" placeholder="Text" defaultValue="Invalid" invalid showCopyButton />
-      <InlineInputV2 prefix="Label" placeholder="Text" disabled showCopyButton />
-    </div>
-  ),
-}
diff --git a/packages/ui/src/v2/components/inline-input-v2.tsx b/packages/ui/src/v2/components/inline-input-v2.tsx
deleted file mode 100644
index 4f8a0cc0744..00000000000
--- a/packages/ui/src/v2/components/inline-input-v2.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
-import { Icon } from "./icon"
-import { useI18n } from "../../context/i18n"
-import "./inline-input-v2.css"
-
-export interface InlineInputV2Props extends Omit<ComponentProps<"input">, "type" | "prefix"> {
-  /** Inline label shown before the field (prefix segment). */
-  prefix: JSX.Element
-  /** Fixed width for the prefix segment (px number or CSS length). Omit for fit-content. */
-  labelWidth?: number | string
-  /** Show the trailing copy action. */
-  showCopyButton?: boolean
-  /** Accessible label for the copy button. */
-  copyLabel?: string
-  onCopyClick?: (event: MouseEvent) => void
-  /** Apply tabular numerals to the prefix and field value. */
-  numeric?: boolean
-  /** Error styling for the field and value text. */
-  invalid?: boolean
-  /** `base` is 28px tall; `large` is 32px tall. */
-  appearance?: "base" | "large"
-  type?: ComponentProps<"input">["type"]
-}
-
-export function InlineInputV2(props: InlineInputV2Props) {
-  const i18n = useI18n()
-  const [local, inputProps] = splitProps(props, [
-    "class",
-    "classList",
-    "prefix",
-    "labelWidth",
-    "showCopyButton",
-    "copyLabel",
-    "onCopyClick",
-    "numeric",
-    "invalid",
-    "appearance",
-    "disabled",
-    "style",
-  ])
-
-  let input: HTMLInputElement | undefined
-
-  return (
-    <div
-      data-component="inline-input-v2"
-      data-disabled={local.disabled ? "" : undefined}
-      data-invalid={local.invalid ? "" : undefined}
-      data-numeric={local.numeric ? "" : undefined}
-      data-appearance={local.appearance ?? "base"}
-      data-label-width={local.labelWidth != null ? "" : undefined}
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-      style={{
-        ...(typeof local.style === "object" && local.style != null ? local.style : {}),
-        ...(local.labelWidth != null
-          ? {
-              "--inline-input-v2-label-width":
-                typeof local.labelWidth === "number" ? `${local.labelWidth}px` : local.labelWidth,
-            }
-          : {}),
-      }}
-    >
-      <div
-        data-slot="inline-input-v2-prefix"
-        onMouseDown={(event) => {
-          if (local.disabled || event.button !== 0) return
-          // Keep focus on the input without using a native <label>, so external labels still work.
-          event.preventDefault()
-          input?.focus()
-        }}
-      >
-        <span data-slot="inline-input-v2-prefix-text">{local.prefix}</span>
-      </div>
-      <div data-slot="inline-input-v2-divider" aria-hidden="true" />
-      <div data-slot="inline-input-v2-field">
-        <div data-slot="inline-input-v2-value">
-          <input
-            {...inputProps}
-            ref={(el) => {
-              input = el
-              const ref = inputProps.ref
-              if (typeof ref === "function") ref(el)
-            }}
-            type={inputProps.type ?? "text"}
-            disabled={local.disabled}
-            aria-invalid={local.invalid ? true : undefined}
-            data-slot="inline-input-v2-input"
-          />
-        </div>
-        <Show when={local.showCopyButton}>
-          <button
-            type="button"
-            data-slot="inline-input-v2-icon-button"
-            aria-label={local.copyLabel ?? i18n.t("ui.message.copy")}
-            disabled={local.disabled}
-            onClick={local.onCopyClick}
-          >
-            <Icon name="copy" />
-          </button>
-        </Show>
-      </div>
-    </div>
-  )
-}
diff --git a/packages/ui/src/v2/components/menu-v2.stories.tsx b/packages/ui/src/v2/components/menu-v2.stories.tsx
deleted file mode 100644
index e674fb27ed3..00000000000
--- a/packages/ui/src/v2/components/menu-v2.stories.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-// @ts-nocheck
-import { createSignal } from "solid-js"
-import { MenuV2 } from "./menu-v2"
-import { ButtonV2 } from "./button-v2"
-import { Avatar } from "./avatar-v2"
-import { Icon } from "./icon"
-
-const docs = `### Overview
-Composable menu primitive built on Kobalte's \`DropdownMenu\` and \`ContextMenu\`. The same item components (\`Item\`, \`CheckboxItem\`, \`RadioItem\`, \`SubTrigger\`) work inside either container.
-
-### API
-- \`MenuV2\` / \`MenuV2.Trigger\` / \`MenuV2.Portal\` / \`MenuV2.Content\` — dropdown root + popper plumbing.
-- \`MenuV2.Context\` namespace mirrors the same shape for right-click menus.
-- \`MenuV2.Item\` — supports a freeform \`children\` slot (avatar, icon, text — whatever) plus \`shortcut\` and \`badge\` props.
-- \`MenuV2.CheckboxItem\` / \`MenuV2.RadioItem\` — same item shape; auto-render a check indicator that turns blue when selected.
-- \`MenuV2.Sub\` / \`MenuV2.SubTrigger\` / \`MenuV2.SubContent\` — nested submenus; \`SubTrigger\` auto-renders the trailing chevron.
-
-### Behavior
-- Items expose Kobalte's data attributes — \`data-highlighted\`, \`data-checked\`, \`data-disabled\`.
-- Blue selected state is reserved for \`CheckboxItem\` / \`RadioItem\` (the rest just highlight on hover).
-- Chevron is only rendered on \`SubTrigger\`.
-`
-
-export default {
-  title: "UI V2/Menu",
-  id: "components-menu-v2",
-  component: MenuV2,
-  tags: ["autodocs"],
-  parameters: {
-    frameHeight: "360px",
-    frameBackground: "#fff",
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = {
-  render: () => (
-    <MenuV2 gutter={6}>
-      <MenuV2.Trigger as={ButtonV2}>Open menu</MenuV2.Trigger>
-      <MenuV2.Portal>
-        <MenuV2.Content>
-          <MenuV2.Item>New file</MenuV2.Item>
-          <MenuV2.Item>Open file</MenuV2.Item>
-          <MenuV2.Item>Save</MenuV2.Item>
-          <MenuV2.Separator />
-          <MenuV2.Item disabled>Print</MenuV2.Item>
-        </MenuV2.Content>
-      </MenuV2.Portal>
-    </MenuV2>
-  ),
-}
-
-export const Rich = {
-  render: () => (
-    <MenuV2 gutter={6}>
-      <MenuV2.Trigger as={ButtonV2}>Open rich menu</MenuV2.Trigger>
-      <MenuV2.Portal>
-        <MenuV2.Content style={{ "min-width": "240px" }}>
-          <MenuV2.Item shortcut="⇧ D" badge="Label">
-            <Avatar size="small" kind="org" fallback="A" />
-            <Icon name="settings" size="small" />
-            Text
-          </MenuV2.Item>
-          <MenuV2.Item shortcut="⌘ N">
-            <Icon name="plus" size="small" />
-            New window
-          </MenuV2.Item>
-          <MenuV2.Item shortcut="⌘ S" badge="Beta">
-            <Icon name="save" size="small" />
-            Save as…
-          </MenuV2.Item>
-          <MenuV2.Separator />
-          <MenuV2.Item disabled shortcut="⌘ P">
-            <Icon name="print" size="small" />
-            Print
-          </MenuV2.Item>
-        </MenuV2.Content>
-      </MenuV2.Portal>
-    </MenuV2>
-  ),
-}
-
-export const WithCheckbox = {
-  render: () => {
-    const [wrap, setWrap] = createSignal(true)
-    const [minimap, setMinimap] = createSignal(false)
-    const [ruler, setRuler] = createSignal(false)
-    return (
-      <MenuV2 gutter={6}>
-        <MenuV2.Trigger as={ButtonV2}>View</MenuV2.Trigger>
-        <MenuV2.Portal>
-          <MenuV2.Content style={{ "min-width": "200px" }}>
-            <MenuV2.CheckboxItem checked={wrap()} onChange={setWrap} shortcut="⌥ Z">
-              Word wrap
-            </MenuV2.CheckboxItem>
-            <MenuV2.CheckboxItem checked={minimap()} onChange={setMinimap}>
-              Minimap
-            </MenuV2.CheckboxItem>
-            <MenuV2.CheckboxItem checked={ruler()} onChange={setRuler} disabled>
-              Ruler
-            </MenuV2.CheckboxItem>
-          </MenuV2.Content>
-        </MenuV2.Portal>
-      </MenuV2>
-    )
-  },
-}
-
-export const WithRadio = {
-  render: () => {
-    const [theme, setTheme] = createSignal("system")
-    return (
-      <MenuV2 gutter={6}>
-        <MenuV2.Trigger as={ButtonV2}>Theme</MenuV2.Trigger>
-        <MenuV2.Portal>
-          <MenuV2.Content style={{ "min-width": "200px" }}>
-            <MenuV2.Group>
-              <MenuV2.GroupLabel>Appearance</MenuV2.GroupLabel>
-              <MenuV2.RadioGroup value={theme()} onChange={setTheme}>
-                <MenuV2.RadioItem value="light">Light</MenuV2.RadioItem>
-                <MenuV2.RadioItem value="dark">Dark</MenuV2.RadioItem>
-                <MenuV2.RadioItem value="system" badge="Auto">
-                  System
-                </MenuV2.RadioItem>
-              </MenuV2.RadioGroup>
-            </MenuV2.Group>
-          </MenuV2.Content>
-        </MenuV2.Portal>
-      </MenuV2>
-    )
-  },
-}
-
-export const WithSubmenu = {
-  render: () => (
-    <MenuV2 gutter={6}>
-      <MenuV2.Trigger as={ButtonV2}>File</MenuV2.Trigger>
-      <MenuV2.Portal>
-        <MenuV2.Content style={{ "min-width": "200px" }}>
-          <MenuV2.Item shortcut="⌘ N">New file</MenuV2.Item>
-          <MenuV2.Item shortcut="⌘ O">Open file</MenuV2.Item>
-          <MenuV2.Sub gutter={0}>
-            <MenuV2.SubTrigger>Open recent</MenuV2.SubTrigger>
-            <MenuV2.Portal>
-              <MenuV2.SubContent>
-                <MenuV2.Item>project-alpha.tsx</MenuV2.Item>
-                <MenuV2.Item>project-beta.tsx</MenuV2.Item>
-                <MenuV2.Item>project-gamma.tsx</MenuV2.Item>
-                <MenuV2.Separator />
-                <MenuV2.Item>Clear recent</MenuV2.Item>
-              </MenuV2.SubContent>
-            </MenuV2.Portal>
-          </MenuV2.Sub>
-          <MenuV2.Separator />
-          <MenuV2.Item shortcut="⌘ S">Save</MenuV2.Item>
-          <MenuV2.Item shortcut="⇧⌘ S">Save as…</MenuV2.Item>
-        </MenuV2.Content>
-      </MenuV2.Portal>
-    </MenuV2>
-  ),
-}
-
-export const Context = {
-  render: () => (
-    <MenuV2.Context gutter={6}>
-      <MenuV2.Context.Trigger>
-        <div
-          style={{
-            display: "flex",
-            "align-items": "center",
-            "justify-content": "center",
-            width: "320px",
-            height: "180px",
-            "border-radius": "8px",
-            border: "1px dashed rgba(0, 0, 0, 0.2)",
-            color: "#5c5c5c",
-            "font-size": "13px",
-            "font-family": "var(--v2-font-family-sans)",
-            "user-select": "none",
-          }}
-        >
-          Right-click this area
-        </div>
-      </MenuV2.Context.Trigger>
-      <MenuV2.Context.Portal>
-        <MenuV2.Context.Content style={{ "min-width": "200px" }}>
-          <MenuV2.Item shortcut="⌘ C">
-            <Avatar size="small" kind="org" fallback="C" />
-            Copy
-          </MenuV2.Item>
-          <MenuV2.Item shortcut="⌘ X">
-            <Icon name="cut" size="small" />
-            Cut
-          </MenuV2.Item>
-          <MenuV2.Item shortcut="⌘ V">
-            <Icon name="paste" size="small" />
-            Paste
-          </MenuV2.Item>
-          <MenuV2.Separator />
-          <MenuV2.Item badge="New">
-            <Icon name="inspect" size="small" />
-            Inspect element
-          </MenuV2.Item>
-          <MenuV2.Item disabled>
-            <Icon name="trash" size="small" />
-            Delete
-          </MenuV2.Item>
-        </MenuV2.Context.Content>
-      </MenuV2.Context.Portal>
-    </MenuV2.Context>
-  ),
-}
diff --git a/packages/ui/src/v2/components/progress-circle-v2.css b/packages/ui/src/v2/components/progress-circle-v2.css
deleted file mode 100644
index 350442f8479..00000000000
--- a/packages/ui/src/v2/components/progress-circle-v2.css
+++ /dev/null
@@ -1,13 +0,0 @@
-[data-component="progress-circle-v2"] {
-  display: block;
-  transform: rotate(-90deg);
-}
-
-[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-background"] {
-  stroke: var(--v2-background-bg-layer-04);
-}
-
-[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-progress"] {
-  stroke: var(--v2-icon-icon-base);
-  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
-}
diff --git a/packages/ui/src/v2/components/progress-circle-v2.tsx b/packages/ui/src/v2/components/progress-circle-v2.tsx
deleted file mode 100644
index 32393446ab0..00000000000
--- a/packages/ui/src/v2/components/progress-circle-v2.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { type ComponentProps, createMemo, splitProps } from "solid-js"
-import "./progress-circle-v2.css"
-
-export interface ProgressCircleV2Props extends Pick<ComponentProps<"svg">, "class" | "classList"> {
-  percentage: number
-  size?: number
-  strokeWidth?: number
-}
-
-export function ProgressCircleV2(props: ProgressCircleV2Props) {
-  const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
-
-  const size = () => split.size ?? 14
-  const strokeWidth = () => split.strokeWidth ?? 1.5
-  const viewBoxSize = 14
-  const center = viewBoxSize / 2
-  const radius = () => center - strokeWidth() / 2
-  const circumference = createMemo(() => 2 * Math.PI * radius())
-  const offset = createMemo(() => circumference() * (1 - Math.max(0, Math.min(100, split.percentage || 0)) / 100))
-
-  return (
-    <svg
-      {...rest}
-      width={size()}
-      height={size()}
-      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-      fill="none"
-      data-component="progress-circle-v2"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        data-slot="progress-circle-v2-background"
-        stroke-width={strokeWidth()}
-      />
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        data-slot="progress-circle-v2-progress"
-        stroke-width={strokeWidth()}
-        stroke-dasharray={circumference().toString()}
-        stroke-dashoffset={offset()}
-      />
-    </svg>
-  )
-}
diff --git a/packages/ui/src/v2/components/radio-v2.stories.tsx b/packages/ui/src/v2/components/radio-v2.stories.tsx
deleted file mode 100644
index d54e39f275d..00000000000
--- a/packages/ui/src/v2/components/radio-v2.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// @ts-nocheck
-import { createSignal } from "solid-js"
-import { RadioGroupV2, RadioItemV2 } from "./radio-v2"
-
-const docs = `### Overview
-Single-select options using Kobalte RadioGroup.
-
-### API
-- \`RadioGroupV2\` forwards Kobalte RadioGroup props (\`value\`, \`defaultValue\`, \`onChange\`, \`name\`, \`required\`, \`validationState\`, \`disabled\`).
-- \`RadioItemV2\` forwards Kobalte item props (\`value\`, \`disabled\`), and adds \`label\` and optional \`description\`.
-
-### Behavior
-- Controlled or uncontrolled via \`value\` / \`defaultValue\` on the group (items declare \`value\` only).
-
-### Theming/tokens
-- Uses \`data-component="radio-v2"\` and slot attributes.
-`
-
-export default {
-  title: "UI V2/Radio",
-  id: "components-radio-v2",
-  component: RadioGroupV2,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = {
-  render: () => (
-    <RadioGroupV2 label="Notification frequency" defaultValue="daily" name="frequency">
-      <RadioItemV2 value="daily" label="Daily" description="Once per day at 9am." />
-      <RadioItemV2 value="weekly" label="Weekly" description="Every Monday morning." />
-      <RadioItemV2 value="never" label="Never" description="No notifications." />
-    </RadioGroupV2>
-  ),
-}
-
-export const Controlled = {
-  render: () => {
-    const [value, setValue] = createSignal("weekly")
-    return (
-      <div style={{ display: "grid", gap: "12px" }}>
-        <RadioGroupV2 label="Controlled" value={value()} onChange={(v) => setValue(v)} name="controlled-frequency">
-          <RadioItemV2 value="daily" label="Daily" />
-          <RadioItemV2 value="weekly" label="Weekly" />
-          <RadioItemV2 value="never" label="Never" />
-        </RadioGroupV2>
-        <div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
-          Selected: {value()}
-        </div>
-      </div>
-    )
-  },
-}
-
-export const States = {
-  render: () => (
-    <div style={{ display: "grid", gap: "20px" }}>
-      <RadioGroupV2 label="Default" defaultValue="a" name="state-default">
-        <RadioItemV2 value="a" label="Option A" />
-        <RadioItemV2 value="b" label="Option B" description="Has a description." />
-      </RadioGroupV2>
-
-      <RadioGroupV2 label="Disabled group" defaultValue="a" name="state-disabled" disabled>
-        <RadioItemV2 value="a" label="Option A" />
-        <RadioItemV2 value="b" label="Option B" />
-      </RadioGroupV2>
-
-      <RadioGroupV2 label="Disabled item" defaultValue="a" name="state-disabled-item">
-        <RadioItemV2 value="a" label="Enabled" />
-        <RadioItemV2 value="b" label="Disabled" disabled />
-      </RadioGroupV2>
-
-      <RadioGroupV2
-        label="Invalid"
-        description="Pick one option."
-        defaultValue="a"
-        name="state-invalid"
-        validationState="invalid"
-        required
-      >
-        <RadioItemV2 value="a" label="Option A" />
-        <RadioItemV2 value="b" label="Option B" />
-      </RadioGroupV2>
-    </div>
-  ),
-}
diff --git a/packages/ui/src/v2/components/segmented-control-v2.stories.tsx b/packages/ui/src/v2/components/segmented-control-v2.stories.tsx
deleted file mode 100644
index fbca955e83b..00000000000
--- a/packages/ui/src/v2/components/segmented-control-v2.stories.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { createSignal } from "solid-js"
-import { SegmentedControlItemV2, SegmentedControlV2 } from "./segmented-control-v2"
-
-const docs = `### Overview
-Single-select segmented control with **custom state** and native \`<button type="button">\` segments.
-
-### Accessibility (toggle group style)
-- Root: \`role="group"\` — pass \`aria-label\` or \`aria-labelledby\` (standard div attributes).
-- Segments: \`aria-pressed\` reflects selection; \`data-pressed\` is set for styling.
-- **Arrow Left / Right** move focus between enabled segments; **Home** / **End** focus first / last enabled segment.
-
-### API
-- **SegmentedControlV2:** \`value?\`, \`defaultValue?\`, \`onChange?(value: string | null)\`, \`allowDeselect?\` (default \`false\`), \`disabled?\`, plus native div attributes (\`class\`, \`aria-*\`, \`ref\`, etc.).
-- **SegmentedControlItemV2:** \`value\` (string), \`disabled?\`, \`children\` (label), plus other button attributes except \`type\`.
-
-### Behavior
-- With default \`allowDeselect={false}\`, clicking the active segment does nothing; selection is never cleared.
-- With \`allowDeselect\`, clicking the active segment clears selection and \`onChange(null)\` runs.
-
-### Theming
-- \`data-slot="segmented-control-v2"\` on the track; items use \`data-slot="segmented-control-v2-item"\` and \`data-pressed\` when selected.
-`
-
-export default {
-  title: "UI V2/SegmentedControl",
-  id: "components-segmented-control-v2",
-  component: SegmentedControlV2,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: docs,
-      },
-    },
-  },
-}
-
-export const Basic = {
-  render: () => (
-    <SegmentedControlV2 defaultValue="a" aria-label="Demo segment control">
-      <SegmentedControlItemV2 value="a">Label</SegmentedControlItemV2>
-      <SegmentedControlItemV2 value="b">Label</SegmentedControlItemV2>
-      <SegmentedControlItemV2 value="c">Label</SegmentedControlItemV2>
-      <SegmentedControlItemV2 value="d">Label</SegmentedControlItemV2>
-    </SegmentedControlV2>
-  ),
-}
-
-export const Controlled = {
-  render: () => {
-    const [value, setValue] = createSignal("b")
-    return (
-      <div style={{ display: "grid", gap: "12px", "justify-items": "start" }}>
-        <SegmentedControlV2 value={value()} onChange={setValue} aria-label="View mode">
-          <SegmentedControlItemV2 value="a">List</SegmentedControlItemV2>
-          <SegmentedControlItemV2 value="b">Grid</SegmentedControlItemV2>
-          <SegmentedControlItemV2 value="c">Board</SegmentedControlItemV2>
-        </SegmentedControlV2>
-        <div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
-          Value: {value()}
-        </div>
-      </div>
-    )
-  },
-}
-
-export const AllowDeselect = {
-  render: () => {
-    const [value, setValue] = createSignal<string | null>("a")
-    return (
-      <div style={{ display: "grid", gap: "12px", "justify-items": "start" }}>
-        <SegmentedControlV2 value={value()} allowDeselect onChange={setValue} aria-label="Optional selection">
-          <SegmentedControlItemV2 value="a">A</SegmentedControlItemV2>
-          <SegmentedControlItemV2 value="b">B</SegmentedControlItemV2>
-          <SegmentedControlItemV2 value="c">C</SegmentedControlItemV2>
-        </SegmentedControlV2>
-        <div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
-          Value: {value() === null ? "none" : value()}
-        </div>
-      </div>
-    )
-  },
-}
-
-export const WithDisabledItem = {
-  render: () => (
-    <SegmentedControlV2 defaultValue="a" aria-label="Segments with one disabled">
-      <SegmentedControlItemV2 value="a">One</SegmentedControlItemV2>
-      <SegmentedControlItemV2 value="b" disabled>
-        Two
-      </SegmentedControlItemV2>
-      <SegmentedControlItemV2 value="c">Three</SegmentedControlItemV2>
-    </SegmentedControlV2>
-  ),
-}
-
-export const FullWidth = {
-  render: () => (
-    <div style={{ width: "320px" }}>
-      <SegmentedControlV2 defaultValue="x" class="segmented-control-v2--full-width" aria-label="Full width">
-        <SegmentedControlItemV2 value="x">A</SegmentedControlItemV2>
-        <SegmentedControlItemV2 value="y">B</SegmentedControlItemV2>
-        <SegmentedControlItemV2 value="z">C</SegmentedControlItemV2>
-      </SegmentedControlV2>
-    </div>
-  ),
-}
diff --git a/packages/ui/src/v2/components/switch-v2.tsx b/packages/ui/src/v2/components/switch-v2.tsx
deleted file mode 100644
index 26b085fda48..00000000000
--- a/packages/ui/src/v2/components/switch-v2.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Switch as Kobalte } from "@kobalte/core/switch"
-import { Show, splitProps } from "solid-js"
-import type { ComponentProps, ParentProps } from "solid-js"
-import "./switch-v2.css"
-
-export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
-  hideLabel?: boolean
-}
-
-export function Switch(props: SwitchProps) {
-  const [local, others] = splitProps(props, ["children", "class", "hideLabel"])
-  return (
-    <Kobalte {...others} class={local.class} data-component="switch">
-      <Kobalte.Input data-slot="switch-input" />
-      <Show when={local.children}>
-        {(label) => (
-          <Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
-            {label()}
-          </Kobalte.Label>
-        )}
-      </Show>
-      <Kobalte.Control data-slot="switch-control">
-        <Kobalte.Thumb data-slot="switch-thumb" />
-      </Kobalte.Control>
-      <Kobalte.ErrorMessage data-slot="switch-error" />
-    </Kobalte>
-  )
-}
diff --git a/packages/ui/src/v2/components/tabs-v2.tsx b/packages/ui/src/v2/components/tabs-v2.tsx
deleted file mode 100644
index a5b1697df6c..00000000000
--- a/packages/ui/src/v2/components/tabs-v2.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { Tabs as Kobalte } from "@kobalte/core/tabs"
-import { Show, splitProps, type JSX } from "solid-js"
-import type { ComponentProps, ParentProps, Component } from "solid-js"
-import { useI18n } from "../../context/i18n"
-import "./tabs-v2.css"
-
-export interface TabsV2Props extends ComponentProps<typeof Kobalte> {
-  variant?: "normal" | "pill" | "settings"
-  orientation?: "horizontal" | "vertical"
-}
-export interface TabsV2ListProps extends ComponentProps<typeof Kobalte.List> {}
-export interface TabsV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-  onMiddleClick?: () => void
-  /** Optional subtext shown beside the primary content (muted style) */
-  subtext?: JSX.Element | string
-}
-export interface TabsV2CloseButtonProps extends ComponentProps<"div"> {}
-export interface TabsV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
-
-function TabsV2Root(props: TabsV2Props) {
-  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
-  return (
-    <Kobalte
-      {...rest}
-      orientation={split.orientation}
-      data-component="tabs-v2"
-      data-variant={split.variant || "normal"}
-      data-orientation={split.orientation || "horizontal"}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsV2List(props: TabsV2ListProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.List
-      {...rest}
-      data-slot="tabs-v2-list"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "onMiddleClick", "subtext"])
-  return (
-    <div
-      data-slot="tabs-v2-trigger-wrapper"
-      data-value={props.value}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-      onMouseDown={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-        }
-      }}
-      onAuxClick={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-          split.onMiddleClick()
-        }
-      }}
-    >
-      <Kobalte.Trigger {...rest} data-slot="tabs-v2-trigger" data-value={props.value}>
-        <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
-          {split.children}
-          <Show when={split.subtext}>
-            {(subtext) => (
-              <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
-                {subtext()}
-              </span>
-            )}
-          </Show>
-        </span>
-      </Kobalte.Trigger>
-    </div>
-  )
-}
-
-function TabsV2CloseButton(props: TabsV2CloseButtonProps) {
-  const i18n = useI18n()
-  const [split, rest] = splitProps(props, ["class", "classList", "onClick"])
-  return (
-    <div
-      role="button"
-      tabindex={0}
-      aria-label={i18n.t("ui.tabs.close")}
-      data-slot="tabs-v2-close-button"
-      {...rest}
-      classList={{
-        [split.class ?? ""]: !!split.class,
-        ...split.classList,
-      }}
-      onClick={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        if (typeof split.onClick === "function") {
-          split.onClick(e)
-        }
-      }}
-      onMouseDown={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-    >
-      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10.8889 3.11108L3.11108 10.8889" stroke="currentColor" stroke-linejoin="round" />
-        <path d="M3.11108 3.11108L10.8889 10.8889" stroke="currentColor" stroke-linejoin="round" />
-      </svg>
-    </div>
-  )
-}
-
-function TabsV2Content(props: ParentProps<TabsV2ContentProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...rest}
-      data-slot="tabs-v2-content"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {split.children}
-    </Kobalte.Content>
-  )
-}
-
-const TabsV2SectionTitle: Component<ParentProps> = (props) => {
-  return <div data-slot="tabs-v2-section-title">{props.children}</div>
-}
-
-export const TabsV2 = Object.assign(TabsV2Root, {
-  List: TabsV2List,
-  Trigger: TabsV2Trigger,
-  CloseButton: TabsV2CloseButton,
-  Content: TabsV2Content,
-  SectionTitle: TabsV2SectionTitle,
-})
diff --git a/packages/ui/src/v2/components/text-shimmer-v2.css b/packages/ui/src/v2/components/text-shimmer-v2.css
deleted file mode 100644
index 87b641d8cf7..00000000000
--- a/packages/ui/src/v2/components/text-shimmer-v2.css
+++ /dev/null
@@ -1,126 +0,0 @@
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="text-shimmer-v2"] {
-  --_step: 45ms;
-  --_duration: 1200ms;
-  --_swap: 220ms;
-  --_index: 0;
-  --_angle: 90deg;
-  --_spread: 5.2ch;
-  --_gutter: calc(var(--_spread) + 1ch);
-  --_size: calc(200% + var(--_gutter) + var(--_gutter));
-  --_base-color: var(--v2-text-text-muted);
-  --_peak-color: var(--v2-text-text-base);
-  --_sweep: linear-gradient(
-    var(--_angle),
-    transparent calc(50% - var(--_spread)),
-    var(--_peak-color) 50%,
-    transparent calc(50% + var(--_spread))
-  );
-  --_base: linear-gradient(var(--_base-color), var(--_base-color));
-
-  display: inline-flex;
-  align-items: baseline;
-  font: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-  user-select: none;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-char"] {
-  display: inline-grid;
-  white-space: pre;
-  font: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-  grid-area: 1 / 1;
-  white-space: pre;
-  transition: opacity var(--_swap) ease-out;
-  font: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
-  color: inherit;
-  opacity: 1;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-  color: var(--_base-color);
-  opacity: 0;
-}
-
-[data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-shimmer"] {
-  opacity: 1;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"][data-run="true"] {
-  animation-name: text-shimmer-v2-sweep;
-  animation-duration: var(--_duration);
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  animation-fill-mode: both;
-  animation-delay: calc(var(--_step) * var(--_index) * -1);
-  will-change: background-position;
-}
-
-@keyframes text-shimmer-v2-sweep {
-  0% {
-    background-position:
-      100% 0,
-      0 0;
-  }
-  100% {
-    background-position:
-      0% 0,
-      0 0;
-  }
-}
-
-@supports ((-webkit-background-clip: text) or (background-clip: text)) {
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-    color: transparent;
-    -webkit-text-fill-color: transparent;
-    background-image: var(--_sweep), var(--_base);
-    background-size:
-      var(--_size) 100%,
-      100% 100%;
-    background-position:
-      100% 0,
-      0 0;
-    background-repeat: no-repeat;
-    -webkit-background-clip: text;
-    background-clip: text;
-  }
-
-  [data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-base"] {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-    transition-duration: 0ms;
-  }
-
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-    animation: none !important;
-    color: inherit;
-    -webkit-text-fill-color: currentColor;
-    background-image: none;
-  }
-
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
-    opacity: 1 !important;
-  }
-}
diff --git a/packages/ui/src/v2/components/text-shimmer-v2.tsx b/packages/ui/src/v2/components/text-shimmer-v2.tsx
deleted file mode 100644
index d18604773cf..00000000000
--- a/packages/ui/src/v2/components/text-shimmer-v2.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
-import { Dynamic } from "solid-js/web"
-import "./text-shimmer-v2.css"
-
-export const TextShimmerV2 = <T extends ValidComponent = "span">(props: {
-  text: string
-  class?: string
-  as?: T
-  active?: boolean
-  offset?: number
-}) => {
-  const text = createMemo(() => props.text ?? "")
-  const active = createMemo(() => props.active ?? true)
-  const offset = createMemo(() => props.offset ?? 0)
-  const [run, setRun] = createSignal(active())
-  const swap = 220
-  let timer: ReturnType<typeof setTimeout> | undefined
-
-  createEffect(() => {
-    if (timer) {
-      clearTimeout(timer)
-      timer = undefined
-    }
-
-    if (active()) {
-      setRun(true)
-      return
-    }
-
-    timer = setTimeout(() => {
-      timer = undefined
-      setRun(false)
-    }, swap)
-  })
-
-  onCleanup(() => {
-    if (!timer) return
-    clearTimeout(timer)
-  })
-
-  return (
-    <Dynamic
-      component={props.as ?? "span"}
-      data-component="text-shimmer-v2"
-      data-active={active() ? "true" : "false"}
-      class={props.class}
-      aria-label={text()}
-      style={{
-        "--_swap": `${swap}ms`,
-        "--_index": `${offset()}`,
-      }}
-    >
-      <span data-slot="text-shimmer-v2-char">
-        <span data-slot="text-shimmer-v2-base" aria-hidden="true">
-          {text()}
-        </span>
-        <span data-slot="text-shimmer-v2-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
-          {text()}
-        </span>
-      </span>
-    </Dynamic>
-  )
-}