From ceed7456bec95ee148334eca9c8fa83609cf3231 Mon Sep 17 00:00:00 2001
From: aXenDeveloper <axen@vitnode.com>
Date: Fri, 2 Oct 2026 22:55:25 +0200
Subject: [PATCH 1/3] feat: Add more ui components

---
 .nvmrc                                        |   1 -
 apps/web/content/docs/dev/passkeys/index.mdx  |   2 +-
 apps/web/content/docs/dev/passkeys/meta.json  |   2 +-
 apps/web/content/docs/dev/performance.mdx     |   4 +-
 apps/web/content/docs/ui/accordion.mdx        |   1 +
 apps/web/content/docs/ui/alert-dialog.mdx     |   7 +-
 apps/web/content/docs/ui/alert.mdx            |   1 +
 apps/web/content/docs/ui/aspect-ratio.mdx     |  67 ++
 apps/web/content/docs/ui/attachment.mdx       | 177 +++++
 apps/web/content/docs/ui/auto-form.mdx        |   1 +
 apps/web/content/docs/ui/avatar.mdx           | 127 ++++
 apps/web/content/docs/ui/badge.mdx            |   1 +
 apps/web/content/docs/ui/bubble.mdx           | 197 ++++++
 apps/web/content/docs/ui/button-group.mdx     | 230 ++++++
 apps/web/content/docs/ui/button.mdx           |   1 +
 apps/web/content/docs/ui/card.mdx             |  76 +-
 apps/web/content/docs/ui/carousel.mdx         | 226 ++++++
 apps/web/content/docs/ui/cascader.mdx         | 207 ++++++
 apps/web/content/docs/ui/chart.mdx            | 268 +++++++
 apps/web/content/docs/ui/checkbox.mdx         |   1 +
 apps/web/content/docs/ui/color.mdx            |   1 +
 apps/web/content/docs/ui/colors.mdx           |   1 +
 apps/web/content/docs/ui/combobox.mdx         | 145 +++-
 apps/web/content/docs/ui/command.mdx          | 303 ++++++++
 apps/web/content/docs/ui/comparison.mdx       | 102 +++
 .../docs/ui/confirm-action-alert-dialog.mdx   |   6 +
 apps/web/content/docs/ui/context-menu.mdx     | 235 +++++++
 apps/web/content/docs/ui/copy-button.mdx      | 121 ++++
 apps/web/content/docs/ui/counter.mdx          | 129 ++++
 apps/web/content/docs/ui/data-table.mdx       | 587 ----------------
 .../docs/ui/data-table/bulk-actions.mdx       | 115 +++
 .../docs/ui/data-table/draggable-rows.mdx     | 273 ++++++++
 .../docs/ui/data-table/expandable-rows.mdx    |  73 ++
 .../content/docs/ui/data-table/filters.mdx    | 153 ++++
 apps/web/content/docs/ui/data-table/index.mdx | 321 +++++++++
 apps/web/content/docs/ui/data-table/meta.json |  13 +
 .../content/docs/ui/data-table/pagination.mdx |  31 +
 .../web/content/docs/ui/data-table/search.mdx |  42 ++
 apps/web/content/docs/ui/dialog.mdx           |  22 +-
 apps/web/content/docs/ui/drawer.mdx           |   1 +
 apps/web/content/docs/ui/dropdown-menu.mdx    |   1 +
 apps/web/content/docs/ui/editor.mdx           |   1 +
 .../web/content/docs/ui/emoji-icon-picker.mdx |   1 +
 apps/web/content/docs/ui/empty.mdx            | 186 +++++
 apps/web/content/docs/ui/field.mdx            | 294 ++++++++
 .../docs/ui/hooks/use-before-unload.mdx       |   1 +
 .../ui/hooks/use-intersection-observer.mdx    |  98 +++
 .../docs/ui/hooks/use-local-storage.mdx       |  76 ++
 apps/web/content/docs/ui/hooks/use-mobile.mdx |   1 +
 apps/web/content/docs/ui/hover-card.mdx       |   1 +
 apps/web/content/docs/ui/image-zoom.mdx       |  88 +++
 apps/web/content/docs/ui/input-group.mdx      |   1 +
 apps/web/content/docs/ui/input-otp.mdx        | 220 ++++++
 apps/web/content/docs/ui/input.mdx            |   1 +
 apps/web/content/docs/ui/item.mdx             | 212 ++++++
 apps/web/content/docs/ui/kbd.mdx              | 170 +++++
 apps/web/content/docs/ui/label.mdx            | 124 ++++
 apps/web/content/docs/ui/marker.mdx           | 170 +++++
 apps/web/content/docs/ui/menubar.mdx          | 246 +++++++
 apps/web/content/docs/ui/message.mdx          | 213 ++++++
 apps/web/content/docs/ui/meta.json            |  11 +-
 apps/web/content/docs/ui/nullable-number.mdx  |  26 +-
 apps/web/content/docs/ui/number-field.mdx     | 270 +++++++
 apps/web/content/docs/ui/pagination.mdx       | 215 ++++++
 apps/web/content/docs/ui/popover.mdx          |   1 +
 apps/web/content/docs/ui/progress.mdx         |   1 +
 apps/web/content/docs/ui/radio-group.mdx      |   1 +
 apps/web/content/docs/ui/resizable.mdx        | 290 ++++++++
 apps/web/content/docs/ui/roles.mdx            |   1 +
 apps/web/content/docs/ui/scroll-area.mdx      |   1 +
 apps/web/content/docs/ui/scroll-fade.mdx      | 157 +++++
 apps/web/content/docs/ui/select.mdx           |   1 +
 apps/web/content/docs/ui/separator.mdx        |   1 +
 apps/web/content/docs/ui/sheet.mdx            |   1 +
 apps/web/content/docs/ui/shimmer.mdx          | 157 +++++
 apps/web/content/docs/ui/skeleton.mdx         |   1 +
 apps/web/content/docs/ui/sonner.mdx           |  44 --
 apps/web/content/docs/ui/spinner.mdx          | 129 ++++
 apps/web/content/docs/ui/switch.mdx           |   1 +
 apps/web/content/docs/ui/tabs.mdx             |   1 +
 apps/web/content/docs/ui/textarea.mdx         |   1 +
 apps/web/content/docs/ui/toast.mdx            | 165 +++++
 apps/web/content/docs/ui/toggle-group.mdx     |   1 +
 apps/web/content/docs/ui/toggle.mdx           |   1 +
 apps/web/content/docs/ui/tooltip.mdx          |  44 ++
 apps/web/content/docs/ui/user.mdx             |   1 +
 apps/web/package.json                         |   1 +
 apps/web/src/docs/examples/alert-dialog.tsx   |   8 +-
 apps/web/src/docs/examples/aspect-ratio.tsx   |  33 +
 .../docs/examples/attachment-auto-form.tsx    |  70 ++
 apps/web/src/docs/examples/attachment.tsx     |  86 +++
 apps/web/src/docs/examples/avatar.tsx         |  52 ++
 apps/web/src/docs/examples/bubble.tsx         |  74 ++
 apps/web/src/docs/examples/button-group.tsx   | 163 +++++
 .../docs/examples/card-border-separation.tsx  |  33 +
 .../src/docs/examples/card-header-border.tsx  |  26 +
 .../src/docs/examples/card-header-footer.tsx  |  29 +
 apps/web/src/docs/examples/card-link.tsx      |  37 +
 apps/web/src/docs/examples/card.tsx           |  19 +-
 apps/web/src/docs/examples/carousel.tsx       | 125 ++++
 .../src/docs/examples/cascader-auto-form.tsx  |  51 ++
 .../web/src/docs/examples/cascader-options.ts |  62 ++
 apps/web/src/docs/examples/cascader.tsx       |  27 +
 apps/web/src/docs/examples/chart-area.tsx     | 115 +++
 apps/web/src/docs/examples/chart-line.tsx     |  80 +++
 apps/web/src/docs/examples/chart.tsx          |  79 +++
 .../web/src/docs/examples/combobox-groups.tsx |  53 ++
 .../src/docs/examples/combobox-multiple.tsx   |  48 ++
 apps/web/src/docs/examples/combobox.tsx       |   1 +
 apps/web/src/docs/examples/command-dialog.tsx | 116 +++
 apps/web/src/docs/examples/command.tsx        |  61 ++
 apps/web/src/docs/examples/comparison.tsx     |  31 +
 .../examples/confirm-action-alert-dialog.tsx  |   2 +
 apps/web/src/docs/examples/context-menu.tsx   | 109 +++
 apps/web/src/docs/examples/copy-button.tsx    |  32 +
 .../docs/examples/counter-sliding-number.tsx  |  40 ++
 apps/web/src/docs/examples/counter.tsx        |  27 +
 .../docs/examples/data-table-demo-users.ts    |  55 ++
 .../docs/examples/data-table-expandable.tsx   | 182 +++++
 .../src/docs/examples/data-table-filters.tsx  |  61 ++
 .../docs/examples/data-table-pagination.tsx   |  24 +
 .../docs/examples/data-table-reorderable.tsx  | 130 ++++
 .../src/docs/examples/data-table-search.tsx   |  35 +
 apps/web/src/docs/examples/dialog.tsx         |  32 +-
 apps/web/src/docs/examples/empty-avatar.tsx   |  37 +
 apps/web/src/docs/examples/empty-outline.tsx  |  33 +
 apps/web/src/docs/examples/empty-search.tsx   |  82 +++
 apps/web/src/docs/examples/empty.tsx          |  37 +
 .../src/docs/examples/field-choice-card.tsx   |  62 ++
 .../src/docs/examples/field-responsive.tsx    |  45 ++
 apps/web/src/docs/examples/field.tsx          |  89 +++
 apps/web/src/docs/examples/image-zoom.tsx     |  30 +
 apps/web/src/docs/examples/input-otp.tsx      |  50 ++
 apps/web/src/docs/examples/item-group.tsx     |  61 ++
 apps/web/src/docs/examples/item-header.tsx    |  38 +
 apps/web/src/docs/examples/item-link.tsx      |  56 ++
 apps/web/src/docs/examples/item-sizes.tsx     |  32 +
 apps/web/src/docs/examples/item-variants.tsx  |  46 ++
 apps/web/src/docs/examples/item.tsx           |  51 ++
 apps/web/src/docs/examples/kbd.tsx            | 107 +++
 apps/web/src/docs/examples/label.tsx          |  31 +
 apps/web/src/docs/examples/marker.tsx         |  86 +++
 apps/web/src/docs/examples/menubar.tsx        | 142 ++++
 apps/web/src/docs/examples/message.tsx        | 147 ++++
 .../web/src/docs/examples/nullable-number.tsx |   7 +
 .../docs/examples/number-field-auto-form.tsx  |  51 ++
 .../src/docs/examples/number-field-format.tsx |  50 ++
 .../src/docs/examples/number-field-sizes.tsx  |  25 +
 apps/web/src/docs/examples/number-field.tsx   |  38 +
 apps/web/src/docs/examples/pagination.tsx     | 125 ++++
 .../docs/examples/resizable-collapsible.tsx   |  38 +
 .../src/docs/examples/resizable-handle.tsx    |  25 +
 .../src/docs/examples/resizable-persist.tsx   |  86 +++
 .../src/docs/examples/resizable-vertical.tsx  |  28 +
 apps/web/src/docs/examples/resizable.tsx      |  37 +
 .../docs/examples/scroll-fade-vertical.tsx    |  41 ++
 apps/web/src/docs/examples/scroll-fade.tsx    |  78 +++
 .../src/docs/examples/shimmer-variants.tsx    |  65 ++
 apps/web/src/docs/examples/shimmer.tsx        |  21 +
 apps/web/src/docs/examples/sonner.tsx         |  22 -
 .../web/src/docs/examples/spinner-buttons.tsx |  36 +
 apps/web/src/docs/examples/spinner-inline.tsx |  38 +
 apps/web/src/docs/examples/spinner-states.tsx |  37 +
 apps/web/src/docs/examples/spinner.tsx        |  25 +
 apps/web/src/docs/examples/toast.tsx          | 111 +++
 apps/web/src/docs/examples/tooltip-group.tsx  |  44 ++
 apps/web/src/docs/local-table-data.ts         |  77 ++
 apps/web/src/docs/preview-data-table.tsx      |  20 +-
 apps/web/src/docs/preview.tsx                 |  20 +-
 apps/web/src/locales/@vitnode/core/pl.json    |  24 +-
 .../site/home/illustrations/hero-preview.tsx  |   4 +-
 .../site/home/sections/showcase-carousel.tsx  |   4 +-
 apps/web/src/site/home/sections/showcase.tsx  |   4 +-
 apps/web/src/site/marketing/marketing.css     |   5 +-
 apps/web/src/site/marketing/safari-frame.tsx  |  85 +++
 apps/web/src/site/marketing/screen-frame.tsx  |  44 +-
 .../confirm-action-alert-dialog.test.tsx      |  44 ++
 .../confirm-action-alert-dialog.tsx           |  41 +-
 .../src/components/form/fields/cascader.tsx   |  52 ++
 .../form/fields/combobox-groups.test.ts       |  48 ++
 .../components/form/fields/combobox-groups.ts |  29 +
 .../src/components/form/fields/combobox.tsx   |  85 ++-
 .../components/form/fields/file-gallery.tsx   |   2 +-
 .../src/components/form/fields/input-otp.tsx  |  97 +++
 .../form/fields/nullable-number.tsx           |  82 +--
 .../src/components/form/fields/number.tsx     |  70 +-
 .../vitnode/src/components/table/content.tsx  | 332 ++++++---
 .../components/table/data-table-content.tsx   |   4 +
 .../src/components/table/expansion.test.tsx   | 159 +++++
 .../src/components/table/expansion.tsx        | 126 ++++
 .../vitnode/src/components/table/filters.tsx  |   7 +-
 .../src/components/table/order-table-head.tsx |   4 +-
 .../src/components/table/pagination.tsx       |   2 +
 .../src/components/table/reorder-state.ts     |  54 ++
 .../src/components/table/reorder.test.tsx     | 319 +++++++++
 .../vitnode/src/components/table/reorder.tsx  | 299 ++++++++
 .../src/components/table/selection.tsx        |   6 +-
 .../src/components/tiptap/tiptap-editor.tsx   |   9 +-
 .../tiptap/toolbar/actions/audio-action.tsx   |  10 +-
 .../tiptap/toolbar/actions/bold-action.tsx    |   6 +-
 .../toolbar/actions/code-block-action.tsx     |   6 +-
 .../tiptap/toolbar/actions/color-action.tsx   |   6 +-
 .../tiptap/toolbar/actions/emoji-action.tsx   |  13 +-
 .../tiptap/toolbar/actions/insert-action.tsx  |   6 +-
 .../tiptap/toolbar/actions/italic-action.tsx  |   6 +-
 .../tiptap/toolbar/actions/link-action.tsx    |   6 +-
 .../tiptap/toolbar/actions/list-action.tsx    |  14 +-
 .../text-format-more/text-format-more.tsx     |   6 +-
 .../toolbar/actions/utils/toolbar-tooltip.tsx |   9 +
 .../tiptap/toolbar/tiptap-toolbar.tsx         |  45 +-
 .../src/components/ui/alert-dialog.tsx        |  20 +-
 .../vitnode/src/components/ui/attachment.tsx  |   4 +-
 packages/vitnode/src/components/ui/avatar.tsx |  73 +-
 packages/vitnode/src/components/ui/bubble.tsx | 127 ++++
 .../src/components/ui/button-client.tsx       |   4 +-
 packages/vitnode/src/components/ui/card.tsx   |   4 +-
 .../src/components/ui/cascader.test.tsx       | 177 +++++
 .../vitnode/src/components/ui/cascader.tsx    | 661 ++++++++++++++++++
 packages/vitnode/src/components/ui/chart.tsx  |   2 +-
 .../vitnode/src/components/ui/checkbox.tsx    |   2 +-
 .../src/components/ui/color-picker.tsx        |   6 +-
 .../vitnode/src/components/ui/combobox.tsx    | 130 +++-
 .../src/components/ui/comparison.test.ts      |  36 +
 .../vitnode/src/components/ui/comparison.tsx  | 209 ++++++
 .../src/components/ui/context-menu.tsx        |  10 +-
 .../src/components/ui/copy-button.test.tsx    | 113 +++
 .../vitnode/src/components/ui/copy-button.tsx | 180 +++++
 .../src/components/ui/counter.test.tsx        |  93 +++
 .../vitnode/src/components/ui/counter.tsx     |  90 +++
 packages/vitnode/src/components/ui/dialog.tsx |   2 +-
 packages/vitnode/src/components/ui/editor.tsx |  17 +-
 .../src/components/ui/emoji-icon-picker.tsx   |   6 +-
 packages/vitnode/src/components/ui/field.tsx  |   2 +-
 .../src/components/ui/image-zoom.test.ts      |  28 +
 .../vitnode/src/components/ui/image-zoom.tsx  | 171 +++++
 .../vitnode/src/components/ui/input-otp.tsx   |  74 +-
 packages/vitnode/src/components/ui/label.tsx  |   2 +-
 packages/vitnode/src/components/ui/loader.tsx |  20 -
 packages/vitnode/src/components/ui/marker.tsx |  73 ++
 .../vitnode/src/components/ui/menubar.tsx     |  16 +-
 .../vitnode/src/components/ui/message.tsx     |  91 +++
 .../src/components/ui/number-field.test.tsx   | 136 ++++
 .../src/components/ui/number-field.tsx        | 160 +++++
 .../src/components/ui/pagination.test.tsx     |  89 +++
 .../vitnode/src/components/ui/pagination.tsx  |  39 +-
 .../vitnode/src/components/ui/radio-group.tsx |   2 +-
 .../vitnode/src/components/ui/sidebar.tsx     |  32 +-
 .../src/components/ui/sliding-number.test.ts  |  32 +
 .../src/components/ui/sliding-number.tsx      | 120 ++++
 packages/vitnode/src/components/ui/sonner.tsx | 148 +++-
 .../src/components/ui/spinner.test.tsx        |  26 +
 .../vitnode/src/components/ui/spinner.tsx     |  56 +-
 packages/vitnode/src/components/ui/switch.tsx |  15 +-
 .../vitnode/src/components/ui/tooltip.tsx     | 102 +++
 .../src/editor/properties/area-panel.tsx      |   1 +
 .../vitnode/src/editor/properties/field.tsx   |   4 +-
 .../vitnode/src/editor/sidebar/footer.tsx     |   3 +-
 .../vitnode/src/editor/zones/area-frame.tsx   |   1 +
 .../src/framework/vite/optimize-deps.test.ts  |  46 ++
 .../src/framework/vite/optimize-deps.ts       |  28 +-
 .../hooks/use-intersection-observer.test.ts   | 117 ++++
 .../src/hooks/use-intersection-observer.ts    |  45 ++
 .../src/hooks/use-local-storage.test.ts       | 108 +++
 .../vitnode/src/hooks/use-local-storage.ts    |  87 +++
 .../vitnode/src/lib/helpers/auto-form.test.ts |  14 +
 packages/vitnode/src/lib/helpers/auto-form.ts |   3 +
 packages/vitnode/src/locales/en.json          |  26 +-
 .../tanstack/admin/content/row-actions.tsx    |   2 +
 .../vitnode/src/tanstack/auth/sso-screen.tsx  |   6 +-
 .../views/content/actions/content-panel.tsx   |  12 +-
 .../actions/delivery/delivery-panel.tsx       |   9 +-
 .../actions/history/revision-history.tsx      |   6 +-
 .../content/actions/history/revision-row.tsx  |   5 +-
 .../views/content/actions/preview-action.tsx  |  43 +-
 .../actions/schedule/schedule-panel.tsx       |   9 +-
 .../admin/views/content/form/primitives.tsx   |   1 +
 .../views/content/lib/field-component.tsx     |   4 +-
 .../search/remove-documents-action.tsx        |   1 +
 .../core/dashboard/grid/widget-properties.tsx |  10 +-
 .../debug/actions/clear-cache/clear-cache.tsx |   1 +
 .../debug/system-logs/actions/more/more.tsx   |  10 +-
 .../navigation/navigation-create-dialog.tsx   |  10 +-
 .../navigation/navigation-list-content.tsx    |  15 +-
 .../core/staff/table/staff-table-content.tsx  |   1 +
 .../system/files/actions/file-row-actions.tsx |   1 +
 .../files/actions/files-bulk-actions.tsx      |   1 +
 .../send-test-email/send-test-email.tsx       |  10 +-
 .../system/integrations/test-ai/test-ai.tsx   |  10 +-
 .../test-storage/test-storage.tsx             |  10 +-
 .../core/users/list/create-user-content.tsx   |  10 +-
 .../core/users/roles/roles-table-content.tsx  |  17 +-
 .../settings/devices/revoke-device-button.tsx |   1 +
 .../passkeys/delete-passkey-button.tsx        |   1 +
 .../settings/sso/disconnect-sso-button.tsx    |   1 +
 .../sso/callback/sso-callback-content.tsx     |   6 +-
 .../views/files/actions/file-row-actions.tsx  |   1 +
 .../files/actions/files-bulk-actions.tsx      |   1 +
 .../vitnode/src/views/layouts/providers.tsx   |   6 +-
 pnpm-lock.yaml                                |   5 +-
 299 files changed, 17544 insertions(+), 1254 deletions(-)
 delete mode 100644 .nvmrc
 create mode 100644 apps/web/content/docs/ui/aspect-ratio.mdx
 create mode 100644 apps/web/content/docs/ui/attachment.mdx
 create mode 100644 apps/web/content/docs/ui/avatar.mdx
 create mode 100644 apps/web/content/docs/ui/bubble.mdx
 create mode 100644 apps/web/content/docs/ui/button-group.mdx
 create mode 100644 apps/web/content/docs/ui/carousel.mdx
 create mode 100644 apps/web/content/docs/ui/cascader.mdx
 create mode 100644 apps/web/content/docs/ui/chart.mdx
 create mode 100644 apps/web/content/docs/ui/command.mdx
 create mode 100644 apps/web/content/docs/ui/comparison.mdx
 create mode 100644 apps/web/content/docs/ui/context-menu.mdx
 create mode 100644 apps/web/content/docs/ui/copy-button.mdx
 create mode 100644 apps/web/content/docs/ui/counter.mdx
 delete mode 100644 apps/web/content/docs/ui/data-table.mdx
 create mode 100644 apps/web/content/docs/ui/data-table/bulk-actions.mdx
 create mode 100644 apps/web/content/docs/ui/data-table/draggable-rows.mdx
 create mode 100644 apps/web/content/docs/ui/data-table/expandable-rows.mdx
 create mode 100644 apps/web/content/docs/ui/data-table/filters.mdx
 create mode 100644 apps/web/content/docs/ui/data-table/index.mdx
 create mode 100644 apps/web/content/docs/ui/data-table/meta.json
 create mode 100644 apps/web/content/docs/ui/data-table/pagination.mdx
 create mode 100644 apps/web/content/docs/ui/data-table/search.mdx
 create mode 100644 apps/web/content/docs/ui/empty.mdx
 create mode 100644 apps/web/content/docs/ui/field.mdx
 create mode 100644 apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
 create mode 100644 apps/web/content/docs/ui/hooks/use-local-storage.mdx
 create mode 100644 apps/web/content/docs/ui/image-zoom.mdx
 create mode 100644 apps/web/content/docs/ui/input-otp.mdx
 create mode 100644 apps/web/content/docs/ui/item.mdx
 create mode 100644 apps/web/content/docs/ui/kbd.mdx
 create mode 100644 apps/web/content/docs/ui/label.mdx
 create mode 100644 apps/web/content/docs/ui/marker.mdx
 create mode 100644 apps/web/content/docs/ui/menubar.mdx
 create mode 100644 apps/web/content/docs/ui/message.mdx
 create mode 100644 apps/web/content/docs/ui/number-field.mdx
 create mode 100644 apps/web/content/docs/ui/pagination.mdx
 create mode 100644 apps/web/content/docs/ui/resizable.mdx
 create mode 100644 apps/web/content/docs/ui/scroll-fade.mdx
 create mode 100644 apps/web/content/docs/ui/shimmer.mdx
 delete mode 100644 apps/web/content/docs/ui/sonner.mdx
 create mode 100644 apps/web/content/docs/ui/spinner.mdx
 create mode 100644 apps/web/content/docs/ui/toast.mdx
 create mode 100644 apps/web/src/docs/examples/aspect-ratio.tsx
 create mode 100644 apps/web/src/docs/examples/attachment-auto-form.tsx
 create mode 100644 apps/web/src/docs/examples/attachment.tsx
 create mode 100644 apps/web/src/docs/examples/avatar.tsx
 create mode 100644 apps/web/src/docs/examples/bubble.tsx
 create mode 100644 apps/web/src/docs/examples/button-group.tsx
 create mode 100644 apps/web/src/docs/examples/card-border-separation.tsx
 create mode 100644 apps/web/src/docs/examples/card-header-border.tsx
 create mode 100644 apps/web/src/docs/examples/card-header-footer.tsx
 create mode 100644 apps/web/src/docs/examples/card-link.tsx
 create mode 100644 apps/web/src/docs/examples/carousel.tsx
 create mode 100644 apps/web/src/docs/examples/cascader-auto-form.tsx
 create mode 100644 apps/web/src/docs/examples/cascader-options.ts
 create mode 100644 apps/web/src/docs/examples/cascader.tsx
 create mode 100644 apps/web/src/docs/examples/chart-area.tsx
 create mode 100644 apps/web/src/docs/examples/chart-line.tsx
 create mode 100644 apps/web/src/docs/examples/chart.tsx
 create mode 100644 apps/web/src/docs/examples/combobox-groups.tsx
 create mode 100644 apps/web/src/docs/examples/combobox-multiple.tsx
 create mode 100644 apps/web/src/docs/examples/command-dialog.tsx
 create mode 100644 apps/web/src/docs/examples/command.tsx
 create mode 100644 apps/web/src/docs/examples/comparison.tsx
 create mode 100644 apps/web/src/docs/examples/context-menu.tsx
 create mode 100644 apps/web/src/docs/examples/copy-button.tsx
 create mode 100644 apps/web/src/docs/examples/counter-sliding-number.tsx
 create mode 100644 apps/web/src/docs/examples/counter.tsx
 create mode 100644 apps/web/src/docs/examples/data-table-demo-users.ts
 create mode 100644 apps/web/src/docs/examples/data-table-expandable.tsx
 create mode 100644 apps/web/src/docs/examples/data-table-filters.tsx
 create mode 100644 apps/web/src/docs/examples/data-table-pagination.tsx
 create mode 100644 apps/web/src/docs/examples/data-table-reorderable.tsx
 create mode 100644 apps/web/src/docs/examples/data-table-search.tsx
 create mode 100644 apps/web/src/docs/examples/empty-avatar.tsx
 create mode 100644 apps/web/src/docs/examples/empty-outline.tsx
 create mode 100644 apps/web/src/docs/examples/empty-search.tsx
 create mode 100644 apps/web/src/docs/examples/empty.tsx
 create mode 100644 apps/web/src/docs/examples/field-choice-card.tsx
 create mode 100644 apps/web/src/docs/examples/field-responsive.tsx
 create mode 100644 apps/web/src/docs/examples/field.tsx
 create mode 100644 apps/web/src/docs/examples/image-zoom.tsx
 create mode 100644 apps/web/src/docs/examples/input-otp.tsx
 create mode 100644 apps/web/src/docs/examples/item-group.tsx
 create mode 100644 apps/web/src/docs/examples/item-header.tsx
 create mode 100644 apps/web/src/docs/examples/item-link.tsx
 create mode 100644 apps/web/src/docs/examples/item-sizes.tsx
 create mode 100644 apps/web/src/docs/examples/item-variants.tsx
 create mode 100644 apps/web/src/docs/examples/item.tsx
 create mode 100644 apps/web/src/docs/examples/kbd.tsx
 create mode 100644 apps/web/src/docs/examples/label.tsx
 create mode 100644 apps/web/src/docs/examples/marker.tsx
 create mode 100644 apps/web/src/docs/examples/menubar.tsx
 create mode 100644 apps/web/src/docs/examples/message.tsx
 create mode 100644 apps/web/src/docs/examples/number-field-auto-form.tsx
 create mode 100644 apps/web/src/docs/examples/number-field-format.tsx
 create mode 100644 apps/web/src/docs/examples/number-field-sizes.tsx
 create mode 100644 apps/web/src/docs/examples/number-field.tsx
 create mode 100644 apps/web/src/docs/examples/pagination.tsx
 create mode 100644 apps/web/src/docs/examples/resizable-collapsible.tsx
 create mode 100644 apps/web/src/docs/examples/resizable-handle.tsx
 create mode 100644 apps/web/src/docs/examples/resizable-persist.tsx
 create mode 100644 apps/web/src/docs/examples/resizable-vertical.tsx
 create mode 100644 apps/web/src/docs/examples/resizable.tsx
 create mode 100644 apps/web/src/docs/examples/scroll-fade-vertical.tsx
 create mode 100644 apps/web/src/docs/examples/scroll-fade.tsx
 create mode 100644 apps/web/src/docs/examples/shimmer-variants.tsx
 create mode 100644 apps/web/src/docs/examples/shimmer.tsx
 delete mode 100644 apps/web/src/docs/examples/sonner.tsx
 create mode 100644 apps/web/src/docs/examples/spinner-buttons.tsx
 create mode 100644 apps/web/src/docs/examples/spinner-inline.tsx
 create mode 100644 apps/web/src/docs/examples/spinner-states.tsx
 create mode 100644 apps/web/src/docs/examples/spinner.tsx
 create mode 100644 apps/web/src/docs/examples/toast.tsx
 create mode 100644 apps/web/src/docs/examples/tooltip-group.tsx
 create mode 100644 apps/web/src/docs/local-table-data.ts
 create mode 100644 apps/web/src/site/marketing/safari-frame.tsx
 create mode 100644 packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.test.tsx
 create mode 100644 packages/vitnode/src/components/form/fields/cascader.tsx
 create mode 100644 packages/vitnode/src/components/form/fields/combobox-groups.test.ts
 create mode 100644 packages/vitnode/src/components/form/fields/combobox-groups.ts
 create mode 100644 packages/vitnode/src/components/form/fields/input-otp.tsx
 create mode 100644 packages/vitnode/src/components/table/expansion.test.tsx
 create mode 100644 packages/vitnode/src/components/table/expansion.tsx
 create mode 100644 packages/vitnode/src/components/table/reorder-state.ts
 create mode 100644 packages/vitnode/src/components/table/reorder.test.tsx
 create mode 100644 packages/vitnode/src/components/table/reorder.tsx
 create mode 100644 packages/vitnode/src/components/tiptap/toolbar/actions/utils/toolbar-tooltip.tsx
 create mode 100644 packages/vitnode/src/components/ui/bubble.tsx
 create mode 100644 packages/vitnode/src/components/ui/cascader.test.tsx
 create mode 100644 packages/vitnode/src/components/ui/cascader.tsx
 create mode 100644 packages/vitnode/src/components/ui/comparison.test.ts
 create mode 100644 packages/vitnode/src/components/ui/comparison.tsx
 create mode 100644 packages/vitnode/src/components/ui/copy-button.test.tsx
 create mode 100644 packages/vitnode/src/components/ui/copy-button.tsx
 create mode 100644 packages/vitnode/src/components/ui/counter.test.tsx
 create mode 100644 packages/vitnode/src/components/ui/counter.tsx
 create mode 100644 packages/vitnode/src/components/ui/image-zoom.test.ts
 create mode 100644 packages/vitnode/src/components/ui/image-zoom.tsx
 delete mode 100644 packages/vitnode/src/components/ui/loader.tsx
 create mode 100644 packages/vitnode/src/components/ui/marker.tsx
 create mode 100644 packages/vitnode/src/components/ui/message.tsx
 create mode 100644 packages/vitnode/src/components/ui/number-field.test.tsx
 create mode 100644 packages/vitnode/src/components/ui/number-field.tsx
 create mode 100644 packages/vitnode/src/components/ui/pagination.test.tsx
 create mode 100644 packages/vitnode/src/components/ui/sliding-number.test.ts
 create mode 100644 packages/vitnode/src/components/ui/sliding-number.tsx
 create mode 100644 packages/vitnode/src/components/ui/spinner.test.tsx
 create mode 100644 packages/vitnode/src/framework/vite/optimize-deps.test.ts
 create mode 100644 packages/vitnode/src/hooks/use-intersection-observer.test.ts
 create mode 100644 packages/vitnode/src/hooks/use-intersection-observer.ts
 create mode 100644 packages/vitnode/src/hooks/use-local-storage.test.ts
 create mode 100644 packages/vitnode/src/hooks/use-local-storage.ts

diff --git a/.nvmrc b/.nvmrc
deleted file mode 100644
index 8fdd954df..000000000
--- a/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-22
\ No newline at end of file
diff --git a/apps/web/content/docs/dev/passkeys/index.mdx b/apps/web/content/docs/dev/passkeys/index.mdx
index 4108bf0d9..547d133c3 100644
--- a/apps/web/content/docs/dev/passkeys/index.mdx
+++ b/apps/web/content/docs/dev/passkeys/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Passkeys (WebAuthn)
 description: Let members sign in with Face ID, Touch ID, Windows Hello or a security key. Configure the RP ID and origins, run the migration, and learn how the WebAuthn ceremonies work in VitNode.
-icon: Fingerprint
+icon: FingerprintPattern
 ---
 
 import { Tab, Tabs } from "fumadocs-ui/components/tabs"
diff --git a/apps/web/content/docs/dev/passkeys/meta.json b/apps/web/content/docs/dev/passkeys/meta.json
index f6761fcec..f350bca0e 100644
--- a/apps/web/content/docs/dev/passkeys/meta.json
+++ b/apps/web/content/docs/dev/passkeys/meta.json
@@ -1,6 +1,6 @@
 {
   "title": "Passkeys",
   "description": "Passwordless sign-in with WebAuthn passkeys - Face ID, Touch ID, Windows Hello or a security key",
-  "icon": "Fingerprint",
+  "icon": "FingerprintPattern",
   "pages": ["index", "using-passkeys", "admincp"]
 }
diff --git a/apps/web/content/docs/dev/performance.mdx b/apps/web/content/docs/dev/performance.mdx
index fdb65e648..92728897d 100644
--- a/apps/web/content/docs/dev/performance.mdx
+++ b/apps/web/content/docs/dev/performance.mdx
@@ -65,7 +65,7 @@ Heavy editors (like Tiptap) or complex modals should be lazy-loaded with `React.
 
 ```tsx title="plugins/blog/src/views/admin/article-editor.tsx"
 import React, { Suspense } from 'react'
-import { Loader } from '@vitnode/core/components/ui/loader'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
 
 // [!code ++:6]
 const RichEditor = React.lazy(async () =>
@@ -75,7 +75,7 @@ const RichEditor = React.lazy(async () =>
 )
 
 export const ArticleEditor = (props) => (
-  <Suspense fallback={<Loader />}>
+  <Suspense fallback={<Spinner size="xl" />}>
     <RichEditor {...props} />
   </Suspense>
 )
diff --git a/apps/web/content/docs/ui/accordion.mdx b/apps/web/content/docs/ui/accordion.mdx
index 75d60cf12..3050bf2e0 100644
--- a/apps/web/content/docs/ui/accordion.mdx
+++ b/apps/web/content/docs/ui/accordion.mdx
@@ -1,6 +1,7 @@
 ---
 title: Accordion
 description: A component that allows users to expand and collapse sections of content.
+icon: Rows3
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/alert-dialog.mdx b/apps/web/content/docs/ui/alert-dialog.mdx
index 0b70f474d..69d6535ca 100644
--- a/apps/web/content/docs/ui/alert-dialog.mdx
+++ b/apps/web/content/docs/ui/alert-dialog.mdx
@@ -1,6 +1,7 @@
 ---
 title: Alert Dialog
 description: Display important messages to users in a modal dialog.
+icon: MessageSquareWarning
 ---
 
 A modal dialog that interrupts the user with important content and expects a
@@ -30,10 +31,10 @@ import { Button } from '@vitnode/core/components/ui/button';
 
 ```tsx
 <AlertDialog>
-  <AlertDialogTrigger render={<Button variant="outline">Show Dialog</Button>} />
+  <AlertDialogTrigger render={<Button variant="destructive">Delete account</Button>} />
   <AlertDialogContent>
     <AlertDialogHeader>
-      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogTitle>Delete your account?</AlertDialogTitle>
       <AlertDialogDescription>
         This action cannot be undone. This will permanently delete your account
         and remove your data from our servers.
@@ -41,7 +42,7 @@ import { Button } from '@vitnode/core/components/ui/button';
     </AlertDialogHeader>
     <AlertDialogFooter>
       <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction>Continue</AlertDialogAction>
+      <AlertDialogAction variant="destructive">Delete account</AlertDialogAction>
     </AlertDialogFooter>
   </AlertDialogContent>
 </AlertDialog>
diff --git a/apps/web/content/docs/ui/alert.mdx b/apps/web/content/docs/ui/alert.mdx
index 9cf761fb7..7cd4b260c 100644
--- a/apps/web/content/docs/ui/alert.mdx
+++ b/apps/web/content/docs/ui/alert.mdx
@@ -1,6 +1,7 @@
 ---
 title: Alert
 description: Display a short, important message to users.
+icon: CircleAlert
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/aspect-ratio.mdx b/apps/web/content/docs/ui/aspect-ratio.mdx
new file mode 100644
index 000000000..d1a9f4ef9
--- /dev/null
+++ b/apps/web/content/docs/ui/aspect-ratio.mdx
@@ -0,0 +1,67 @@
+---
+title: Aspect Ratio
+description: Keep images, videos and embeds at the right shape, whatever the width.
+icon: Ratio
+---
+
+## Preview
+
+<Preview name="aspect-ratio" />
+
+## Usage
+
+```ts
+import { AspectRatio } from '@vitnode/core/components/ui/aspect-ratio'
+```
+
+```tsx
+<AspectRatio className="overflow-hidden rounded-lg" ratio={16 / 9}>
+  <img
+    alt="A mountain at sunrise"
+    className="size-full object-cover"
+    src="/images/mountain.webp"
+  />
+</AspectRatio>
+```
+
+The box takes the full width it is given and works out its height from
+`ratio`, so the page doesn't jump around while the image loads. Give the child
+`size-full` and `object-cover` to fill the box without stretching.
+
+## Common ratios
+
+| Ratio    | Good for                       |
+| -------- | ------------------------------ |
+| `16 / 9` | Videos, hero images, banners   |
+| `4 / 3`  | Photos, product shots          |
+| `1`      | Avatars, thumbnails, galleries |
+| `9 / 16` | Phone screenshots, stories     |
+
+## Video embed
+
+```tsx
+<AspectRatio ratio={16 / 9}>
+  <iframe
+    allowFullScreen
+    className="size-full rounded-lg"
+    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
+    title="Getting started with VitNode"
+  />
+</AspectRatio>
+```
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    ratio: {
+      description: 'Width divided by height, for example `16 / 9`.',
+      type: 'number',
+      default: '1',
+    },
+  }}
+/>
+
+Every other prop goes straight to the underlying `div`.
diff --git a/apps/web/content/docs/ui/attachment.mdx b/apps/web/content/docs/ui/attachment.mdx
new file mode 100644
index 000000000..8b9390888
--- /dev/null
+++ b/apps/web/content/docs/ui/attachment.mdx
@@ -0,0 +1,177 @@
+---
+title: Attachment
+description: File uploads with drag and drop, progress, previews and errors - from a single avatar to a sortable gallery.
+icon: Paperclip
+---
+
+## Preview
+
+<Preview name="attachment-auto-form" />
+
+## Usage
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs items={['Auto Form', 'Manual']}>
+  <Tab value="Auto Form">
+
+Two fields cover every upload: `AutoFormFile` for one file and `AutoFormFiles`
+for many.
+
+```ts
+import { z } from 'zod'
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormFile } from '@vitnode/core/components/form/fields/file'
+import { AutoFormFiles } from '@vitnode/core/components/form/fields/files'
+```
+
+The form stores **file ids**, not the files themselves - a number for a single
+file and an array of numbers for many:
+
+```ts
+const formSchema = z.object({
+  avatar: z.number().nullable().default(null),
+  gallery: z.array(z.number()).max(4).default([]),
+})
+```
+
+```tsx
+<AutoForm
+  formSchema={formSchema}
+  fields={[
+    {
+      id: 'avatar',
+      component: props => (
+        <AutoFormFile
+          {...props}
+          allowedExtensions={['.png', '.jpg', '.webp']}
+          label="Avatar"
+          maxBytes={5 * 1024 * 1024}
+          onUpload={uploadFile}
+        />
+      ),
+    },
+    {
+      id: 'gallery',
+      component: props => (
+        <AutoFormFiles
+          {...props}
+          label="Gallery"
+          maxBytes={5 * 1024 * 1024}
+          maxItems={4}
+          onUpload={uploadFile}
+        />
+      ),
+    },
+  ]}
+/>
+```
+
+  </Tab>
+
+  <Tab value="Manual">
+
+<Preview name="attachment" />
+
+```ts
+import {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentMedia,
+  AttachmentTitle,
+} from '@vitnode/core/components/ui/attachment'
+```
+
+```tsx
+<Attachment>
+  <AttachmentMedia variant="image">
+    <img alt="" src={file.url} />
+  </AttachmentMedia>
+  <AttachmentContent>
+    <AttachmentTitle>{file.name}</AttachmentTitle>
+    <AttachmentDescription>48 KB</AttachmentDescription>
+  </AttachmentContent>
+  <AttachmentActions>
+    <AttachmentAction aria-label={`Remove ${file.name}`} onClick={remove}>
+      <XIcon />
+    </AttachmentAction>
+  </AttachmentActions>
+</Attachment>
+```
+
+  </Tab>
+</Tabs>
+
+## Uploading files
+
+`onUpload` receives the `File` the user picked and returns the stored file. The
+field shows a spinner while it runs and an error if it throws, then saves the
+returned `id` into the form.
+
+```ts
+import type { AutoFormFileValue } from '@vitnode/core/components/form/fields/file'
+
+const uploadFile = async (file: File): Promise<AutoFormFileValue> => {
+  const body = new FormData()
+  body.append('file', file)
+
+  const res = await fetch('/api/my-plugin/uploads', { body, method: 'POST' })
+  if (!res.ok) throw new Error('Upload failed')
+
+  return await res.json() // { id, name, size, url, mimeType? }
+}
+```
+
+When editing something that already has files, pass them in so the field can
+show their names and previews: `file={existing}` on `AutoFormFile`, or
+`files={existing}` on `AutoFormFiles`.
+
+## Limits
+
+Both fields check files **before** uploading, so nobody waits for a 2 GB video
+just to hear it was too big:
+
+- `maxBytes` - the largest accepted file, required.
+- `allowedExtensions` - lowercase with a leading dot, like `['.pdf', '.png']`.
+- `allowedMimeTypes` - for example `['image/png', 'application/pdf']`.
+
+`AutoFormFiles` also takes `maxItems` and `minItems`. Files can be reordered by
+dragging or with the keyboard; pass `ordered={false}` when the order doesn't
+matter.
+
+Your server should check the same limits again - the browser only saves people
+a wasted upload, it can't stop someone determined.
+
+## States
+
+Set `state` on `Attachment` to match what the file is doing:
+
+| State        | Looks like                                     |
+| ------------ | ---------------------------------------------- |
+| `done`       | The default - a finished file                  |
+| `idle`       | Dashed border, waiting for a file              |
+| `uploading`  | Shimmering title, dimmed preview               |
+| `processing` | Same as uploading, for server-side work        |
+| `error`      | Red border and description - say what went wrong |
+
+## Layouts
+
+- `orientation="vertical"` turns the attachment into a card with a big preview,
+  great for galleries.
+- `size="sm"` or `size="xs"` shrink it for chat composers and tight lists.
+- Wrap several in `AttachmentGroup` for a horizontally scrolling row that fades
+  out at the edges.
+- `AttachmentTrigger` makes the whole attachment clickable - render it as a link
+  to open the file.
+
+## Accessibility
+
+- Give every `AttachmentAction` an `aria-label` that names the file, like
+  "Remove report.pdf" - "Remove" alone is a riddle when there are five files.
+- Previews in `AttachmentMedia` are decorative next to the file name, so
+  `alt=""` is right.
+- The AutoForm fields announce reordering to screen readers and show every
+  rejected file with the reason.
diff --git a/apps/web/content/docs/ui/auto-form.mdx b/apps/web/content/docs/ui/auto-form.mdx
index d43496634..ec219892f 100644
--- a/apps/web/content/docs/ui/auto-form.mdx
+++ b/apps/web/content/docs/ui/auto-form.mdx
@@ -1,6 +1,7 @@
 ---
 title: Auto Form
 description: Component creates form based on Zod schemas & TanStack Form with validation
+icon: ClipboardPen
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/avatar.mdx b/apps/web/content/docs/ui/avatar.mdx
new file mode 100644
index 000000000..e4b273f7b
--- /dev/null
+++ b/apps/web/content/docs/ui/avatar.mdx
@@ -0,0 +1,127 @@
+---
+title: Avatar
+description: Profile pictures with a graceful fallback, status badges and groups that lift on hover.
+icon: CircleUserRound
+---
+
+## Preview
+
+<Preview name="avatar" />
+
+## Usage
+
+```ts
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+```
+
+```tsx
+<Avatar>
+  <AvatarImage alt="Ada Lovelace" src={user.avatarUrl} />
+  <AvatarFallback>AL</AvatarFallback>
+</Avatar>
+```
+
+The fallback shows while the image loads and stays if it never arrives - so a
+broken link turns into tidy initials instead of a sad empty circle.
+
+## Sizes
+
+```tsx
+<Avatar size="sm" />
+<Avatar />
+<Avatar size="lg" />
+```
+
+## Badge
+
+Add `AvatarBadge` for a status dot. It takes any background colour, so pick a
+semantic one:
+
+```tsx
+<Avatar>
+  <AvatarImage alt="Ada Lovelace" src={user.avatarUrl} />
+  <AvatarFallback>AL</AvatarFallback>
+  <AvatarBadge className="bg-success" />
+</Avatar>
+```
+
+A coloured dot alone doesn't tell everyone that someone is online - say it in
+text somewhere too, or give the badge an `aria-label`.
+
+## Group
+
+Stack avatars with `AvatarGroup`. Wrap each one in `AvatarGroupItem` to make it
+lift on hover and show the person's name in a tooltip, and finish with
+`AvatarGroupCount` for everyone who didn't fit:
+
+```tsx
+import {
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarGroupItem,
+} from '@vitnode/core/components/ui/avatar'
+```
+
+```tsx
+<AvatarGroup>
+  {users.map(user => (
+    <AvatarGroupItem key={user.id} label={user.name}>
+      <Avatar>
+        <AvatarImage alt={user.name} src={user.avatarUrl} />
+        <AvatarFallback>{user.initials}</AvatarFallback>
+      </Avatar>
+    </AvatarGroupItem>
+  ))}
+  <AvatarGroupCount>+3</AvatarGroupCount>
+</AvatarGroup>
+```
+
+All items in a group share one tooltip, so moving along the stack glides it
+from face to face instead of blinking a new one open each time.
+
+Plain `Avatar`s work inside `AvatarGroup` too, when you want a quiet stack with
+no hover effect.
+
+## Accessibility
+
+- Always pass `alt` to `AvatarImage` - the person's name is usually perfect.
+- An `AvatarGroupItem` with a `label` can be focused with the keyboard, and the
+  tooltip appears on focus as well as on hover.
+- With reduced motion turned on, avatars in a group stay put and only the
+  tooltip appears.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Avatar
+
+<TypeTable
+  type={{
+    size: {
+      description: 'The size of the avatar.',
+      type: '"sm" | "default" | "lg"',
+      default: '"default"',
+    },
+  }}
+/>
+
+### AvatarGroupItem
+
+<TypeTable
+  type={{
+    label: {
+      description:
+        'Shown in a tooltip on hover and focus. Without it, the avatar still lifts but is not focusable.',
+      type: 'ReactNode',
+    },
+  }}
+/>
+
+## API Reference
+
+[Base UI - Avatar](https://base-ui.com/react/components/avatar)
diff --git a/apps/web/content/docs/ui/badge.mdx b/apps/web/content/docs/ui/badge.mdx
index 5857aa34d..88a54d043 100644
--- a/apps/web/content/docs/ui/badge.mdx
+++ b/apps/web/content/docs/ui/badge.mdx
@@ -1,6 +1,7 @@
 ---
 title: Badge
 description: Display small labels or indicators.
+icon: Tag
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/bubble.mdx b/apps/web/content/docs/ui/bubble.mdx
new file mode 100644
index 000000000..a08fac019
--- /dev/null
+++ b/apps/web/content/docs/ui/bubble.mdx
@@ -0,0 +1,197 @@
+---
+title: Bubble
+description: Chat-style message bubbles with variants, alignment, grouping, reactions and clickable suggestions.
+icon: MessageCircleMore
+---
+
+## Preview
+
+<Preview name="bubble" />
+
+## Usage
+
+```ts
+import {
+  Bubble,
+  BubbleContent,
+  BubbleGroup,
+  BubbleReactions,
+} from '@vitnode/core/components/ui/bubble'
+```
+
+```tsx
+<Bubble>
+  <BubbleContent>I removed the stale route. You are welcome.</BubbleContent>
+</Bubble>
+```
+
+A bubble shrinks to fit its text and never grows past 80% of the row, so short
+replies stay short and long ones wrap politely.
+
+## Composition
+
+```text
+BubbleGroup
+├── Bubble
+│   ├── BubbleContent
+│   └── BubbleReactions
+└── Bubble
+    └── BubbleContent
+```
+
+## Variants
+
+```tsx
+<Bubble variant="muted">
+  <BubbleContent>Quiet, supporting content.</BubbleContent>
+</Bubble>
+```
+
+| Variant       | Use it for                                               |
+| ------------- | -------------------------------------------------------- |
+| `default`     | A strong primary bubble, usually the current user.       |
+| `secondary`   | The standard neutral bubble.                             |
+| `muted`       | Lower-emphasis replies.                                  |
+| `tinted`      | A soft bubble derived from your primary color.           |
+| `outline`     | A bordered bubble for suggestions or rich content.       |
+| `ghost`       | Unframed, full-width content such as assistant answers.  |
+| `destructive` | Errors and failed actions.                               |
+
+## Alignment
+
+Messages you sent go on the right, everything else on the left - just like
+every chat app you have ever used.
+
+```tsx
+<Bubble align="end">
+  <BubbleContent>Sent by me.</BubbleContent>
+</Bubble>
+```
+
+## Grouping
+
+Wrap consecutive bubbles from the same sender in `BubbleGroup` to tighten the
+spacing between them. Set `align` on each `Bubble`, not on the group.
+
+```tsx
+<BubbleGroup>
+  <Bubble variant="muted">
+    <BubbleContent>First thought.</BubbleContent>
+  </Bubble>
+  <Bubble variant="muted">
+    <BubbleContent>Second thought, arriving fashionably late.</BubbleContent>
+  </Bubble>
+</BubbleGroup>
+```
+
+## Reactions
+
+`BubbleReactions` pins a small pill to the bubble's edge. Move it with `side`
+(`top` or `bottom`) and `align` (`start` or `end`). It overlaps the bubble, so
+leave a bit more `gap` between rows.
+
+```tsx
+<Bubble variant="muted">
+  <BubbleContent>Tests passed on the first try.</BubbleContent>
+  <BubbleReactions aria-label="Reactions: rocket, eyes" role="img">
+    <span>🚀</span>
+    <span>👀</span>
+  </BubbleReactions>
+</Bubble>
+```
+
+## Links and buttons
+
+Use `render` on `BubbleContent` to turn a bubble into a real link or button -
+perfect for quick reply suggestions.
+
+```tsx
+<Bubble variant="outline">
+  <BubbleContent render={<button onClick={onPick} type="button" />}>
+    Show me the plugin docs
+  </BubbleContent>
+</Bubble>
+```
+
+## Use with Message
+
+Need an avatar, a sender name or a read receipt? Wrap bubbles in a
+[Message](/docs/ui/message). Set `align="end"` on the `Message` once and every
+bubble inside follows it to the end side.
+
+```tsx
+<Message align="end">
+  <MessageContent>
+    <Bubble>
+      <BubbleContent>No need to align me twice.</BubbleContent>
+    </Bubble>
+    <MessageFooter>Read</MessageFooter>
+  </MessageContent>
+</Message>
+```
+
+## Accessibility
+
+- `Bubble` is just the visual surface. Put conversation semantics such as
+  `role="log"` and an `aria-label` on the surrounding container.
+- A row of emoji reads poorly on a screen reader ("plus eight", anyone?). Give
+  `BubbleReactions` `role="img"` and a descriptive `aria-label` so it is
+  announced once. When reactions are interactive, render buttons with labels
+  instead.
+- Clickable bubbles should be a real `<button>` or `<a>` via `render`. They get
+  a visible focus ring and take their accessible name from the text.
+- Variants signal tone with color - keep the meaning in the text too, especially
+  for `destructive` bubbles.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Bubble
+
+<TypeTable
+  type={{
+    variant: {
+      description: 'The visual treatment of the bubble.',
+      type: 'default | secondary | muted | tinted | outline | ghost | destructive',
+      default: 'default',
+    },
+    align: {
+      description: 'Which side of the conversation the bubble sits on.',
+      type: 'start | end',
+      default: 'start',
+    },
+  }}
+/>
+
+### BubbleContent
+
+<TypeTable
+  type={{
+    render: {
+      description: 'Renders the content as another element, such as a link or a button.',
+      type: 'ReactElement | function',
+    },
+  }}
+/>
+
+### BubbleReactions
+
+<TypeTable
+  type={{
+    side: {
+      description: 'The edge of the bubble the reactions are anchored to.',
+      type: 'top | bottom',
+      default: 'bottom',
+    },
+    align: {
+      description: 'The inline alignment of the reactions.',
+      type: 'start | end',
+      default: 'end',
+    },
+  }}
+/>
+
+## API Reference
+
+[Base UI - useRender](https://base-ui.com/react/utils/use-render)
diff --git a/apps/web/content/docs/ui/button-group.mdx b/apps/web/content/docs/ui/button-group.mdx
new file mode 100644
index 000000000..ea4392091
--- /dev/null
+++ b/apps/web/content/docs/ui/button-group.mdx
@@ -0,0 +1,230 @@
+---
+title: Button Group
+description: Glue related buttons, inputs and menus together into one tidy row (or column) with shared borders and rounded ends.
+icon: Group
+---
+
+## Preview
+
+<Preview name="button-group" />
+
+## Usage
+
+```ts
+import {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+} from '@vitnode/core/components/ui/button-group'
+```
+
+```tsx
+<ButtonGroup aria-label="Message actions">
+  <Button variant="outline">Archive</Button>
+  <Button variant="outline">Report</Button>
+  <Button variant="outline">Snooze</Button>
+</ButtonGroup>
+```
+
+The group squashes the inner borders and rounds only the outer corners, so a
+handful of buttons reads as one control. No extra props on the buttons - they
+just know they are in a group.
+
+## Orientation
+
+Set `orientation="vertical"` to stack the buttons. Great for zoom controls on a
+map, less great for a full sentence.
+
+```tsx
+<ButtonGroup aria-label="Zoom" orientation="vertical">
+  <Button aria-label="Zoom in" size="icon-sm" variant="outline">
+    <ZoomIn />
+  </Button>
+  <Button aria-label="Zoom out" size="icon-sm" variant="outline">
+    <ZoomOut />
+  </Button>
+</ButtonGroup>
+```
+
+## Nested groups
+
+Put groups inside a group and they get a small gap between them - the classic
+toolbar look.
+
+```tsx
+<ButtonGroup aria-label="Message actions">
+  <ButtonGroup>
+    <Button aria-label="Go back" size="icon" variant="outline">
+      <ArrowLeft />
+    </Button>
+  </ButtonGroup>
+  <ButtonGroup>
+    <Button variant="outline">Archive</Button>
+    <Button variant="outline">Report</Button>
+  </ButtonGroup>
+</ButtonGroup>
+```
+
+## Separator
+
+Outline buttons already have borders to divide them. Variants without a border,
+like `secondary`, look like one big blob - add a `ButtonGroupSeparator` between
+them.
+
+```tsx
+<ButtonGroup aria-label="Text alignment">
+  <Button aria-label="Align left" size="icon" variant="secondary">
+    <AlignLeft />
+  </Button>
+  <ButtonGroupSeparator />
+  <Button aria-label="Align center" size="icon" variant="secondary">
+    <AlignCenter />
+  </Button>
+</ButtonGroup>
+```
+
+## With text
+
+`ButtonGroupText` renders a non-interactive segment, perfect for a counter or a
+prefix. Use `render` to swap the element, for example to a `<label>`.
+
+```tsx
+<ButtonGroup aria-label="Quantity">
+  <Button aria-label="Decrease quantity" size="icon" variant="outline">
+    <Minus />
+  </Button>
+  <ButtonGroupText aria-live="polite">{quantity}</ButtonGroupText>
+  <Button aria-label="Increase quantity" size="icon" variant="outline">
+    <Plus />
+  </Button>
+</ButtonGroup>
+```
+
+## With input
+
+An `Input` inside a group stretches to fill the free space, so the button stays
+snug on the end.
+
+```tsx
+<ButtonGroup className="w-full max-w-sm">
+  <Input aria-label="Search members" placeholder="Search members..." />
+  <Button aria-label="Search" size="icon" variant="outline">
+    <Search />
+  </Button>
+</ButtonGroup>
+```
+
+## With dropdown menu
+
+Pair a button with a [Dropdown Menu](/docs/ui/dropdown-menu) trigger to build a
+split button: the main action on the left, the "but also..." options on the
+right.
+
+```tsx
+<ButtonGroup>
+  <Button variant="outline">Snooze</Button>
+  <DropdownMenu>
+    <DropdownMenuTrigger
+      render={
+        <Button aria-label="More snooze options" size="icon" variant="outline" />
+      }
+    >
+      <ChevronDown />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" className="w-48">
+      <DropdownMenuItem>Later today</DropdownMenuItem>
+      <DropdownMenuItem>Next week</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</ButtonGroup>
+```
+
+## Sizes
+
+The group follows the size of its buttons - use the same `size` on every button
+in it so the heights match.
+
+```tsx
+<ButtonGroup>
+  <Button size="sm" variant="outline">
+    Small
+  </Button>
+  <Button aria-label="Add" size="icon-sm" variant="outline">
+    <Plus />
+  </Button>
+</ButtonGroup>
+```
+
+## Accessibility
+
+- The group renders with `role="group"`. Give it an `aria-label` (or
+  `aria-labelledby`) so screen readers announce what the buttons are for.
+- Icon-only buttons need their own `aria-label` - the `Button` types will remind
+  you if you forget.
+- A focused button is lifted above its neighbours, so the focus ring is never
+  hidden behind the next segment.
+- Borders and corners use logical properties, so groups flip correctly in
+  right-to-left languages.
+- Need a single selected option, like a segmented control? Reach for
+  [Toggle Group](/docs/ui/toggle-group) instead - it handles the pressed state
+  for you.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### ButtonGroup
+
+<TypeTable
+  type={{
+    orientation: {
+      description: 'Lays the items out in a row or a column.',
+      type: 'horizontal | vertical',
+      default: 'horizontal',
+    },
+    'aria-label': {
+      description: 'Describes what the group of buttons does.',
+      type: 'string',
+    },
+    className: {
+      description: 'Extra classes for the group wrapper.',
+      type: 'string',
+    },
+  }}
+/>
+
+### ButtonGroupText
+
+<TypeTable
+  type={{
+    render: {
+      description: 'Replaces the default `<div>`, for example with a `<label>`.',
+      type: 'ReactElement | (props, state) => ReactElement',
+    },
+    className: {
+      description: 'Extra classes for the text segment.',
+      type: 'string',
+    },
+  }}
+/>
+
+### ButtonGroupSeparator
+
+<TypeTable
+  type={{
+    orientation: {
+      description:
+        'Direction of the line. Use `horizontal` inside a vertical group.',
+      type: 'horizontal | vertical',
+      default: 'vertical',
+    },
+    className: {
+      description: 'Extra classes for the separator.',
+      type: 'string',
+    },
+  }}
+/>
+
+## API Reference
+
+[shadcn/ui - Button Group](https://ui.shadcn.com/docs/components/base/button-group)
diff --git a/apps/web/content/docs/ui/button.mdx b/apps/web/content/docs/ui/button.mdx
index e16aeb96a..adc769b80 100644
--- a/apps/web/content/docs/ui/button.mdx
+++ b/apps/web/content/docs/ui/button.mdx
@@ -1,6 +1,7 @@
 ---
 title: Button
 description: A button component for triggering actions in your application.
+icon: MousePointerClick
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/card.mdx b/apps/web/content/docs/ui/card.mdx
index dd7077b23..2c67793f7 100644
--- a/apps/web/content/docs/ui/card.mdx
+++ b/apps/web/content/docs/ui/card.mdx
@@ -1,6 +1,7 @@
 ---
 title: Card
 description: Display content in a card layout.
+icon: RectangleHorizontal
 ---
 
 ## Preview
@@ -31,7 +32,80 @@ import {
     This is the content of the card. You can put any content here.
   </CardContent>
   <CardFooter>
-    <CardAction>Action Button</CardAction>
+    <Button variant="outline">Action</Button>
   </CardFooter>
 </Card>
 ```
+
+`CardFooter` comes with a top border and a soft background out of the box, so it always reads as the "what now?" part of the card.
+
+## Header with border
+
+Add `border-b` to `CardHeader` and it picks up matching bottom padding on its own.
+
+<Preview name="card-header-border" />
+
+```tsx
+<CardHeader className="border-b">
+  <CardTitle>Header with Border</CardTitle>
+  <CardDescription>This is a card with a header that has a bottom border.</CardDescription>
+</CardHeader>
+```
+
+## Header and footer
+
+Combine a bordered header with the footer for a card split into three clear parts.
+
+<Preview name="card-header-footer" />
+
+```tsx
+<Card>
+  <CardHeader className="border-b">
+    <CardTitle>Header with Border</CardTitle>
+  </CardHeader>
+  <CardContent>...</CardContent>
+  <CardFooter>
+    <Button className="w-full" variant="outline">
+      Action
+    </Button>
+  </CardFooter>
+</Card>
+```
+
+## Border separation
+
+Drop the card padding and let the content draw the lines. `CardAction` keeps the header button on the right.
+
+<Preview name="card-border-separation" />
+
+```tsx
+<Card className="gap-0 p-0">
+  <CardHeader className="flex items-center justify-between px-4 py-2">
+    <CardTitle>Header</CardTitle>
+    <CardAction>
+      <Button variant="outline">Action</Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent className="border-y px-4 py-3">...</CardContent>
+  <CardFooter className="border-none px-4 py-3">
+    <Button className="w-full" variant="outline">
+      Action
+    </Button>
+  </CardFooter>
+</Card>
+```
+
+## With a link
+
+A slim footer is a nice home for a "read more" style link.
+
+<Preview name="card-link" />
+
+```tsx
+<CardFooter className="py-2">
+  <a className={cn(buttonVariants({ variant: 'link' }), 'px-0')} href="/guide">
+    See our guideline
+    <ExternalLinkIcon aria-hidden="true" />
+  </a>
+</CardFooter>
+```
diff --git a/apps/web/content/docs/ui/carousel.mdx b/apps/web/content/docs/ui/carousel.mdx
new file mode 100644
index 000000000..6425b24e7
--- /dev/null
+++ b/apps/web/content/docs/ui/carousel.mdx
@@ -0,0 +1,226 @@
+---
+title: Carousel
+description: A swipeable carousel with motion and keyboard support, built on Embla Carousel.
+icon: GalleryHorizontal
+---
+
+## Preview
+
+<Preview name="carousel" />
+
+## Usage
+
+```ts
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@vitnode/core/components/ui/carousel'
+```
+
+```tsx
+<Carousel>
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+```
+
+Swipe it, drag it, or click the arrows - [Embla Carousel](https://www.embla-carousel.com)
+does the heavy lifting, so the motion feels like a native app and not a slideshow
+from 2009.
+
+By default the arrows sit just outside the slides, so leave some room around
+the carousel (for example `px-12`). On narrow screens, move them into a row of
+their own with `static translate-y-0`, like the preview does.
+
+## Sizes
+
+Each `CarouselItem` takes the full width. Change it with a `basis-*` class -
+responsive ones included.
+
+```tsx
+<Carousel opts={{ align: 'start' }}>
+  <CarouselContent>
+    <CarouselItem className="basis-1/2 lg:basis-1/3">...</CarouselItem>
+    <CarouselItem className="basis-1/2 lg:basis-1/3">...</CarouselItem>
+    <CarouselItem className="basis-1/2 lg:basis-1/3">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+## Spacing
+
+The gap between slides comes from a padding on `CarouselItem` and a matching
+negative margin on `CarouselContent`. Change both together. They use logical
+properties, so right-to-left layouts get the same gap on the correct side.
+
+```tsx
+<Carousel>
+  <CarouselContent className="-ms-2 md:-ms-4">
+    <CarouselItem className="ps-2 md:ps-4">...</CarouselItem>
+    <CarouselItem className="ps-2 md:ps-4">...</CarouselItem>
+    <CarouselItem className="ps-2 md:ps-4">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+## Orientation
+
+Set `orientation="vertical"` to scroll up and down. Give `CarouselContent` a
+fixed height, and use `-mt-*` / `pt-*` for spacing instead.
+
+```tsx
+<Carousel orientation="vertical" opts={{ align: 'start' }}>
+  <CarouselContent className="-mt-1 h-52">
+    <CarouselItem className="basis-1/2 pt-1">...</CarouselItem>
+    <CarouselItem className="basis-1/2 pt-1">...</CarouselItem>
+    <CarouselItem className="basis-1/2 pt-1">...</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+```
+
+## Options
+
+`opts` goes straight to Embla. A few favourites: `loop` for an endless ride,
+`align` to snap slides to the `start`, `center` or `end`, and `dragFree` for a
+free-scrolling feel.
+
+```tsx
+<Carousel opts={{ align: 'start', loop: true }}>...</Carousel>
+```
+
+For a right-to-left page, tell Embla too - the layout flips on its own, but the
+scroll math needs the hint:
+
+```tsx
+<Carousel dir="rtl" opts={{ direction: 'rtl' }}>
+  ...
+</Carousel>
+```
+
+## API
+
+Grab the Embla instance with `setApi` to build your own controls, such as the
+dots and the "slide x of y" counter.
+
+```tsx
+import type { CarouselApi } from '@vitnode/core/components/ui/carousel'
+
+const [api, setApi] = React.useState<CarouselApi>()
+const [current, setCurrent] = React.useState(0)
+
+React.useEffect(() => {
+  if (!api) return
+
+  const onSelect = () => {
+    setCurrent(api.selectedScrollSnap())
+  }
+
+  api.on('select', onSelect)
+
+  return () => {
+    api.off('select', onSelect)
+  }
+}, [api])
+
+<Carousel setApi={setApi}>
+  <CarouselContent>...</CarouselContent>
+</Carousel>
+<p>
+  Slide {current + 1} of {api?.scrollSnapList().length ?? 0}
+</p>
+```
+
+`api.scrollTo(index)` jumps to a slide, which is all a dot button needs.
+Building a control inside the carousel? `useCarousel()` hands you `api`,
+`scrollPrev`, `scrollNext`, `canScrollPrev` and `canScrollNext` without any
+prop drilling.
+
+## Plugins
+
+Pass Embla plugins through `plugins`. Autoplay, for example:
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+
+<Tabs groupId='package-manager' persist items={['bun', 'pnpm', 'npm']} label='Install Embla Autoplay'>
+
+```bash tab="bun"
+bun i embla-carousel-autoplay
+```
+
+```bash tab="pnpm"
+pnpm i embla-carousel-autoplay
+```
+
+```bash tab="npm"
+npm i embla-carousel-autoplay
+```
+
+</Tabs>
+
+```tsx
+import Autoplay from 'embla-carousel-autoplay'
+
+export const Slideshow = () => (
+  <Carousel plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}>
+    ...
+  </Carousel>
+)
+```
+
+Keep `stopOnInteraction` on, and skip autoplay for people who prefer reduced
+motion - nobody likes chasing a slide that runs away.
+
+## Accessibility
+
+- The root is a `region` with `aria-roledescription="carousel"`; give it an
+  `aria-label` that says what is inside.
+- Every slide is a `group` with `aria-roledescription="slide"`. Labels like
+  `aria-label="2 of 5"` help screen readers keep count.
+- The arrow buttons are labelled "Previous" and "Next" in the current language
+  and turn disabled when there is nowhere left to go.
+- With focus inside the carousel, the left and right arrow keys move between
+  slides.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    opts: {
+      description:
+        'Options passed to Embla Carousel, such as `loop`, `align` or `dragFree`.',
+      type: 'EmblaOptionsType',
+    },
+    orientation: {
+      description: 'The scroll direction. Sets Embla `axis` for you.',
+      type: 'horizontal | vertical',
+      default: 'horizontal',
+    },
+    plugins: {
+      description: 'Embla plugins, for example autoplay.',
+      type: 'EmblaPluginType[]',
+    },
+    setApi: {
+      description: 'Called with the Embla instance once the carousel is ready.',
+      type: '(api: CarouselApi) => void',
+    },
+  }}
+/>
+
+`CarouselPrevious` and `CarouselNext` accept every [Button](/docs/ui/button)
+prop and default to `variant="outline"` with `size="icon-sm"`.
+
+## API Reference
+
+[Embla Carousel - API](https://www.embla-carousel.com/api/)
diff --git a/apps/web/content/docs/ui/cascader.mdx b/apps/web/content/docs/ui/cascader.mdx
new file mode 100644
index 000000000..359edfb77
--- /dev/null
+++ b/apps/web/content/docs/ui/cascader.mdx
@@ -0,0 +1,207 @@
+---
+title: Cascader
+description: Pick one option from a tree - continent, then country, then city - drilling in one level at a time.
+icon: ListTree
+---
+
+## Preview
+
+<Preview name="cascader" />
+
+## Usage
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+
+<Tabs items={['Auto Form', 'Manual']}>
+  <Tab value="Auto Form">
+
+<Preview name="cascader-auto-form" />
+
+```ts
+import { z } from 'zod'
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormCascader } from '@vitnode/core/components/form/fields/cascader'
+```
+
+```ts
+const formSchema = z.object({
+  office: z.string('Pick an office to continue'),
+  backupOffice: z.string().optional(),
+})
+```
+
+```tsx
+<AutoForm
+  formSchema={formSchema}
+  fields={[
+    {
+      id: 'office',
+      component: props => (
+        <AutoFormCascader
+          {...props}
+          label="Office"
+          options={locations}
+          searchable
+        />
+      ),
+    },
+  ]}
+/>
+```
+
+The form stores the **value of the picked leaf** (`"krakow"`), not the whole
+path. Optional fields get a clear button automatically.
+
+  </Tab>
+
+  <Tab value="Manual">
+
+```ts
+import { Cascader } from '@vitnode/core/components/ui/cascader'
+```
+
+```tsx
+const [office, setOffice] = React.useState<string | null>(null)
+
+<Cascader onValueChange={setOffice} options={locations} value={office} />
+```
+
+  </Tab>
+</Tabs>
+
+## Options
+
+Options are a plain tree. Anything with `children` is a branch that opens the
+next column; anything without is a leaf you can pick.
+
+```ts
+import type { CascaderOption } from '@vitnode/core/components/ui/cascader'
+
+const locations: CascaderOption[] = [
+  {
+    label: 'Europe',
+    value: 'europe',
+    children: [
+      {
+        label: 'Poland',
+        value: 'poland',
+        children: [
+          { label: 'Warsaw', value: 'warsaw' },
+          { label: 'Kraków', value: 'krakow' },
+        ],
+      },
+      { label: 'Iceland', value: 'iceland', disabled: true },
+    ],
+  },
+]
+```
+
+`onValueChange` hands you the full path too, for when you need "Europe / Poland"
+as well as the city:
+
+```tsx
+<Cascader
+  onValueChange={(value, path) => {
+    console.log(value, path.map(option => option.label))
+  }}
+  options={locations}
+/>
+```
+
+## Search
+
+`searchable` adds a search box that looks through every leaf at once - type
+"krak" and "Europe / Poland / Kraków" is one click away. Accents don't matter,
+so "sao" finds São Paulo.
+
+## Drill down or columns
+
+By default, clicking a branch **replaces the list** with its children - the
+next level slides in, and a back button at the top takes you up again. It keeps
+the popup the width of the field, wherever it sits.
+
+Prefer to see every level at once? `layout="columns"` opens each level in a new
+column beside the last one, and the popup grows smoothly to make room:
+
+```tsx
+<Cascader layout="columns" options={locations} />
+```
+
+In the columns layout you can also open branches on hover with
+`expandTrigger="hover"`. On phones the cascader always drills down - there's no
+room for columns on a 375px screen.
+
+## Transitions
+
+Each level slides in from the side it came from - forward when you go deeper,
+back when you return - and in the columns layout the popup's width animates as
+columns open. With reduced motion turned on, everything switches instantly.
+
+## Accessibility
+
+- Every level is a listbox you can drive with the keyboard: arrow up and down
+  to move, arrow right (left in RTL) or <kbd>Enter</kbd> to open a branch,
+  arrow left to go back, <kbd>Home</kbd> / <kbd>End</kbd> to jump, and
+  <kbd>Escape</kbd> to close.
+- Branches tell screen readers whether they're open, and the picked path is
+  marked as selected.
+- Give the cascader a label - `AutoFormCascader` does it for you; on its own,
+  use `aria-labelledby`.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    options: {
+      description: 'The tree of options.',
+      type: 'CascaderOption[]',
+      required: true,
+    },
+    value: {
+      description: 'The picked leaf value (controlled).',
+      type: 'string | null',
+    },
+    defaultValue: {
+      description: 'The starting value when uncontrolled.',
+      type: 'string | null',
+      default: 'null',
+    },
+    onValueChange: {
+      description: 'Called with the leaf value and its full path.',
+      type: '(value: string | null, path: CascaderOption[]) => void',
+    },
+    searchable: {
+      description: 'Adds a search box that finds leaves across the whole tree.',
+      type: 'boolean',
+      default: 'false',
+    },
+    layout: {
+      description:
+        'Drill into one level at a time, or show every level side by side. Phones always drill down.',
+      type: '"drill" | "columns"',
+      default: '"drill"',
+    },
+    expandTrigger: {
+      description:
+        'In the columns layout, open branches on click or as soon as the pointer is over them.',
+      type: '"click" | "hover"',
+      default: '"click"',
+    },
+    showClear: {
+      description: 'Shows a button that clears the value.',
+      type: 'boolean',
+      default: 'false',
+    },
+    separator: {
+      description: 'Placed between labels in the trigger and in search results.',
+      type: 'string',
+      default: '" / "',
+    },
+    placeholder: {
+      description: 'Shown while nothing is picked.',
+      type: 'string',
+    },
+  }}
+/>
diff --git a/apps/web/content/docs/ui/chart.mdx b/apps/web/content/docs/ui/chart.mdx
new file mode 100644
index 000000000..9f34ee637
--- /dev/null
+++ b/apps/web/content/docs/ui/chart.mdx
@@ -0,0 +1,268 @@
+---
+title: Chart
+description: Beautiful, themeable charts built on Recharts - bar, area, line and friends, with tooltips and legends that match the rest of your UI.
+icon: ChartColumn
+---
+
+## Preview
+
+<Preview name="chart" />
+
+## Installation
+
+The chart components wrap [Recharts](https://recharts.github.io/), and you
+build the chart itself with Recharts components. Add it to your app next to
+`@vitnode/core`:
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+
+<Tabs groupId='package-manager' persist items={['bun', 'pnpm', 'npm']} label='Install Recharts'>
+
+```bash tab="bun"
+bun i recharts
+```
+
+```bash tab="pnpm"
+pnpm i recharts
+```
+
+```bash tab="npm"
+npm i recharts
+```
+
+</Tabs>
+
+## Usage
+
+```ts
+import type { ChartConfig } from '@vitnode/core/components/ui/chart'
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@vitnode/core/components/ui/chart'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+```
+
+```tsx
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+]
+
+const chartConfig = {
+  desktop: { label: 'Desktop', color: 'var(--chart-1)' },
+  mobile: { label: 'Mobile', color: 'var(--chart-2)' },
+} satisfies ChartConfig
+
+<ChartContainer config={chartConfig}>
+  <BarChart accessibilityLayer data={chartData} title="Visitors">
+    <CartesianGrid vertical={false} />
+    <XAxis dataKey="month" tickLine={false} axisLine={false} />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+  </BarChart>
+</ChartContainer>
+```
+
+We don't hide Recharts behind a wrapper of our own. You write plain Recharts and
+borrow only what you need: the container, the tooltip and the legend. When
+Recharts ships a new chart type, you can use it the same day.
+
+`ChartContainer` sizes the chart responsively and defaults to a 16:9 box
+(`aspect-video`). Pass a `className` such as `aspect-square` or `h-64 w-full`
+to change it.
+
+## Chart config
+
+The config is where the chart's words and colours live, kept apart from your
+data. Each key matches a `dataKey` in your data:
+
+```tsx
+import { Monitor, Smartphone } from 'lucide-react'
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    icon: Monitor,
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    icon: Smartphone,
+    theme: {
+      light: 'var(--chart-2)',
+      dark: 'var(--chart-4)',
+    },
+  },
+} satisfies ChartConfig
+```
+
+- `label` is what the tooltip and legend show, so `desktop` reads as "Desktop".
+- `icon` swaps the colour swatch in the tooltip and legend for an icon.
+- `color` sets one colour for both themes. Use `theme` instead when light and
+  dark need different colours.
+
+## Theming
+
+Your theme ships five chart colours, `--chart-1` to `--chart-5`, with values
+for light and dark mode. Use them in the config and the charts follow the
+theme on their own:
+
+```css
+:root {
+  --chart-1: oklch(0.52 0.2 264);
+  --chart-2: oklch(0.52 0.128 155);
+}
+
+.dark {
+  --chart-1: oklch(0.7 0.14 264);
+  --chart-2: oklch(0.758 0.153 155);
+}
+```
+
+For each config key, `ChartContainer` creates a `--color-<key>` variable, scoped
+to that one chart. Use it anywhere Recharts takes a colour:
+
+```tsx
+<Bar dataKey="desktop" fill="var(--color-desktop)" />
+```
+
+It works in Tailwind classes too, for example `fill-(--color-desktop)`. Two or
+three colours per chart is plenty - your readers have eyes, not a rainbow
+decoder ring.
+
+## Area chart
+
+<Preview name="chart-area" />
+
+Stack areas with the same `stackId`, and add a fade with a `linearGradient`
+that uses the chart's colour variables:
+
+```tsx
+<AreaChart accessibilityLayer data={chartData} title="Plugin installs">
+  <defs>
+    <linearGradient id="fill-downloads" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="5%" stopColor="var(--color-downloads)" stopOpacity={0.8} />
+      <stop offset="95%" stopColor="var(--color-downloads)" stopOpacity={0.1} />
+    </linearGradient>
+  </defs>
+  <CartesianGrid vertical={false} />
+  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+  <ChartTooltip content={<ChartTooltipContent />} cursor={false} />
+  <Area
+    dataKey="downloads"
+    type="natural"
+    stackId="installs"
+    fill="url(#fill-downloads)"
+    stroke="var(--color-downloads)"
+  />
+</AreaChart>
+```
+
+## Line chart
+
+<Preview name="chart-line" />
+
+```tsx
+<LineChart accessibilityLayer data={chartData} title="API response time">
+  <CartesianGrid vertical={false} />
+  <XAxis dataKey="day" tickLine={false} axisLine={false} />
+  <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
+  <Line
+    dataKey="responseTime"
+    type="monotone"
+    stroke="var(--color-responseTime)"
+    strokeWidth={2}
+  />
+</LineChart>
+```
+
+## Tooltip
+
+`ChartTooltip` is the Recharts `Tooltip`, and `ChartTooltipContent` gives it a
+look that matches the rest of VitNode. It reads labels, icons and colours from
+your chart config.
+
+```tsx
+<ChartTooltip content={<ChartTooltipContent indicator="line" />} />
+```
+
+Hover over the previews above to see all three indicators: `dashed` in the bar
+chart, `dot` in the area chart and `line` in the line chart.
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    indicator: {
+      description: 'The shape next to each value.',
+      type: "'dot' | 'line' | 'dashed'",
+      default: "'dot'",
+    },
+    hideLabel: {
+      description: 'Hides the tooltip heading, for example the month.',
+      type: 'boolean',
+      default: 'false',
+    },
+    hideIndicator: {
+      description: 'Hides the indicator shape.',
+      type: 'boolean',
+      default: 'false',
+    },
+    labelKey: {
+      description: 'The config or data key used for the tooltip heading.',
+      type: 'string',
+    },
+    nameKey: {
+      description: 'The config or data key used for the name of each value.',
+      type: 'string',
+    },
+    labelFormatter: {
+      description: 'Formats the tooltip heading.',
+      type: '(label, payload) => ReactNode',
+    },
+    formatter: {
+      description: 'Renders each row yourself, replacing the default layout.',
+      type: '(value, name, item, index, payload) => ReactNode',
+    },
+  }}
+/>
+
+## Legend
+
+`ChartLegend` is the Recharts `Legend`, and `ChartLegendContent` renders the
+labels and colours (or icons) from your config:
+
+```tsx
+import {
+  ChartLegend,
+  ChartLegendContent,
+} from '@vitnode/core/components/ui/chart'
+```
+
+```tsx
+<ChartLegend content={<ChartLegendContent />} />
+```
+
+Use `nameKey` to read legend labels from another key - handy for pie charts,
+where each slice is a row in your data rather than a series.
+
+## Accessibility
+
+- `accessibilityLayer` adds ARIA attributes and keyboard support. Tab to a
+  chart, then use the arrow keys to move between points - the tooltip follows
+  along. It is on by default in Recharts 3, but writing it out makes the
+  intent clear.
+- Give each chart a `title` and a `desc`. Recharts renders them as the SVG's
+  `<title>` and `<desc>`, so screen readers get more than "graphic".
+- Keep a visible heading next to the chart (a `CardTitle` works well), and
+  never rely on colour alone - labels in the tooltip and legend tell series
+  apart for everyone.
+
+## API Reference
+
+[Recharts - API](https://recharts.github.io/en-US/api/)
diff --git a/apps/web/content/docs/ui/checkbox.mdx b/apps/web/content/docs/ui/checkbox.mdx
index 8f00b7bb2..a174389cf 100644
--- a/apps/web/content/docs/ui/checkbox.mdx
+++ b/apps/web/content/docs/ui/checkbox.mdx
@@ -1,6 +1,7 @@
 ---
 title: Checkbox
 description: Toggle between checked and unchecked states.
+icon: SquareCheck
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/color.mdx b/apps/web/content/docs/ui/color.mdx
index e81f63c98..50e2dec30 100644
--- a/apps/web/content/docs/ui/color.mdx
+++ b/apps/web/content/docs/ui/color.mdx
@@ -1,6 +1,7 @@
 ---
 title: Color
 description: Color picker field with a preset palette and a free-form picker, both storing HSL.
+icon: Pipette
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/colors.mdx b/apps/web/content/docs/ui/colors.mdx
index 2fd73b43d..82ea17b37 100644
--- a/apps/web/content/docs/ui/colors.mdx
+++ b/apps/web/content/docs/ui/colors.mdx
@@ -1,6 +1,7 @@
 ---
 title: Colors
 description: A collection of color utilities and components for consistent theming across your application.
+icon: Palette
 ---
 
 <Callout type="warn" title="This documentation is under construction! 🚧">
diff --git a/apps/web/content/docs/ui/combobox.mdx b/apps/web/content/docs/ui/combobox.mdx
index fe6c208ec..db167896e 100644
--- a/apps/web/content/docs/ui/combobox.mdx
+++ b/apps/web/content/docs/ui/combobox.mdx
@@ -1,6 +1,7 @@
 ---
 title: Combobox
 description: Select from a list of options with a search input.
+icon: ChevronsUpDown
 ---
 
 ## Preview
@@ -157,6 +158,135 @@ export function ComboboxBasic() {
 
 </Tabs>
 
+## Groups and clear button
+
+<Preview name="combobox-groups" />
+
+Give options a `group` and they're sorted under headings - handy once a list
+gets long enough to scroll. `showClear` adds an × that empties the field in one
+click.
+
+```tsx
+<AutoFormCombobox
+  {...props}
+  label="Timezone"
+  labels={[
+    { group: "Europe", label: "London", value: "europe-london" },
+    { group: "Europe", label: "Warsaw", value: "europe-warsaw" },
+    { group: "Americas", label: "New York", value: "america-new-york" },
+  ]}
+  showClear
+/>
+```
+
+Groups appear in the order they first show up in `labels`, and options without
+a `group` gather at the top with no heading.
+
+## Multiple
+
+<Preview name="combobox-multiple" />
+
+Pass `multiple` and use an array in the schema. Picked options pop in as
+chips, and removing one shrinks it away while the rest slide over to close the
+gap - the box keeps its width and simply wraps onto a new line when it's full.
+With reduced motion turned on, chips just appear and disappear.
+
+### Limit visible chips
+
+Picked a dozen tags? Set `maxVisibleChips` and only the first few show, followed
+by a "+N more" chip that counts the rest. Every pick is still saved - the
+limit is purely visual.
+
+```tsx
+<AutoFormCombobox {...props} labels={topics} maxVisibleChips={3} multiple />
+```
+
+Keyboard tips: <kbd>Backspace</kbd> in an empty search removes the last chip,
+and <kbd>Escape</kbd> with the list closed clears every pick - that's the
+standard combobox pattern, so it's worth knowing before you press it twice.
+
+<Tabs items={['Auto Form', 'Manual']}>
+  <Tab value="Auto Form">
+
+```ts
+const formSchema = z.object({
+  topics: z
+    .array(z.enum(["news", "guides", "releases"]))
+    .min(1, "Pick at least one topic")
+    .max(3, "Three topics is plenty"),
+});
+```
+
+```tsx
+<AutoFormCombobox
+  {...props}
+  label="Topics"
+  labels={[
+    { value: "news", label: "News" },
+    { value: "guides", label: "Guides" },
+    { value: "releases", label: "Releases" },
+  ]}
+  multiple
+/>
+```
+
+`.min()` and `.max()` on the array become the validation messages, and
+`fetchData` works with `multiple` too - the value is then an array of
+`{ value, label }` objects.
+
+  </Tab>
+
+  <Tab value="Manual">
+
+```tsx
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@vitnode/core/components/ui/combobox";
+
+export function ComboboxMultiple() {
+  const anchor = useComboboxAnchor();
+
+  return (
+    <Combobox items={frameworks} multiple>
+      <ComboboxChips ref={anchor}>
+        <ComboboxValue>
+          {(values: string[]) => (
+            <>
+              {values.map(value => (
+                <ComboboxChip key={value}>{value}</ComboboxChip>
+              ))}
+              <ComboboxChipsInput placeholder="Add a framework" />
+            </>
+          )}
+        </ComboboxValue>
+      </ComboboxChips>
+      <ComboboxContent anchor={anchor}>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {item => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+```
+
+  </Tab>
+</Tabs>
+
 ## Props
 
 import { TypeTable } from "fumadocs-ui/components/type-table";
@@ -187,8 +317,8 @@ import { TypeTable } from "fumadocs-ui/components/type-table";
     },
     labels: {
       description:
-        "An array of options for the combobox, each with a value and label. Used for static options.",
-      type: "Array<{ value: string; label: string }>",
+        "An array of options for the combobox, each with a value, label and optional group heading. Used for static options.",
+      type: "Array<{ value: string; label: string; group?: string }>",
       default: "[]",
     },
     placeholder: {
@@ -206,6 +336,17 @@ import { TypeTable } from "fumadocs-ui/components/type-table";
       type: "boolean",
       default: "false",
     },
+    showClear: {
+      description: "Shows a button that clears the selection.",
+      type: "boolean",
+      default: "false",
+    },
+    maxVisibleChips: {
+      description:
+        "With `multiple`, shows only this many chips plus a \"+N more\" chip for the rest.",
+      type: "number",
+      default: "",
+    },
     multiple: {
       description:
         "Whether multiple selections are allowed. Not used when fetchData is provided.",
diff --git a/apps/web/content/docs/ui/command.mdx b/apps/web/content/docs/ui/command.mdx
new file mode 100644
index 000000000..2607aa655
--- /dev/null
+++ b/apps/web/content/docs/ui/command.mdx
@@ -0,0 +1,303 @@
+---
+title: Command
+description: A fast, composable command menu with search, groups and keyboard navigation - the "just type it" escape hatch for your app.
+icon: Command
+---
+
+## Preview
+
+<Preview name="command" />
+
+## Usage
+
+```ts
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from '@vitnode/core/components/ui/command'
+```
+
+```tsx
+<Command>
+  <CommandInput placeholder="Type a command or search..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>Calendar</CommandItem>
+      <CommandItem>Search Emoji</CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>
+```
+
+Start typing and the list filters itself, ranking the best matches first.
+Groups with nothing left to show politely step aside. It is built on
+[cmdk](https://cmdk.paco.me), so every cmdk prop works here too.
+
+## Groups and separators
+
+Wrap related items in a `CommandGroup` with a `heading`, and drop a
+`CommandSeparator` between groups when they need some breathing room.
+
+```tsx
+<CommandGroup heading="Suggestions">
+  <CommandItem>Calendar</CommandItem>
+</CommandGroup>
+<CommandSeparator />
+<CommandGroup heading="Settings">
+  <CommandItem>Profile</CommandItem>
+</CommandGroup>
+```
+
+## Icons and shortcuts
+
+Icons go first and are sized for you. `CommandShortcut` pushes a hint to the
+end of the row. It is just a label - wiring the actual shortcut is up to you.
+
+```tsx
+<CommandItem>
+  <UserIcon />
+  <span>Profile</span>
+  <CommandShortcut>⌘P</CommandShortcut>
+</CommandItem>
+```
+
+## Empty state
+
+`CommandEmpty` only shows up when the search matches nothing. Make it helpful,
+or at least make it kind.
+
+```tsx
+<CommandEmpty>No results found.</CommandEmpty>
+```
+
+## Selecting and disabling items
+
+`onSelect` fires on click and on <kbd>Enter</kbd>. Add `disabled` to keep an
+item visible but out of reach - the keyboard skips it too.
+
+```tsx
+<CommandItem onSelect={() => router.navigate({ to: '/settings' })}>
+  Settings
+</CommandItem>
+<CommandItem disabled>Calculator</CommandItem>
+```
+
+Items are matched by their text. Give an item a `value` when the text is not
+unique, and `keywords` when people might search for it by another name:
+
+```tsx
+<CommandItem keywords={['theme', 'night']} value="toggle-dark-mode">
+  Toggle dark mode
+</CommandItem>
+```
+
+## Dialog
+
+<Preview name="command-dialog" />
+
+`CommandDialog` puts the whole thing in a [Dialog](/docs/ui/dialog), with a
+screen-reader-only title and description baked in. Pass a `Command` as its
+child and control it with `open` and `onOpenChange`.
+
+```tsx
+const [open, setOpen] = React.useState(false)
+
+React.useEffect(() => {
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key.toLowerCase() !== 'j') return
+    if (!event.metaKey && !event.ctrlKey) return
+    if (event.altKey || event.shiftKey || event.defaultPrevented) return
+
+    event.preventDefault()
+    setOpen((prev) => !prev)
+  }
+
+  window.addEventListener('keydown', handleKeyDown)
+
+  return () => window.removeEventListener('keydown', handleKeyDown)
+}, [])
+
+<CommandDialog onOpenChange={setOpen} open={open}>
+  <Command>
+    <CommandInput placeholder="What do you need?" />
+    <CommandList>
+      <CommandEmpty>Nothing here. Try fewer letters?</CommandEmpty>
+      <CommandGroup heading="Actions">
+        <CommandItem onSelect={() => setOpen(false)}>Sign out</CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </Command>
+</CommandDialog>
+```
+
+<Callout title="Why ⌘J and not ⌘K?">
+  This docs site already uses <kbd>⌘K</kbd> / <kbd>Ctrl+K</kbd> for search, and
+  so does the AdminCP. Two dialogs fighting over one shortcut is nobody's idea
+  of fun, so the demo listens for <kbd>⌘J</kbd> / <kbd>Ctrl+J</kbd> instead.
+  Pick whatever is free in your app, and always remove the listener on unmount.
+  Heads-up: once the palette is open, <kbd>Ctrl+J</kbd> moves down a row
+  instead of closing it - <kbd>Escape</kbd> is the way out.
+</Callout>
+
+Show the shortcut next to the trigger with the `Kbd` component:
+
+```tsx
+import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'
+
+<KbdGroup>
+  <Kbd>⌘</Kbd>
+  <Kbd>J</Kbd>
+</KbdGroup>
+```
+
+## Your own filtering
+
+Fetching results from an API? Turn the built-in filter off with
+`shouldFilter={false}` and render whatever your query returns. The AdminCP
+search works exactly like that.
+
+```tsx
+<Command shouldFilter={false}>
+  <CommandInput onValueChange={setSearch} value={search} />
+  <CommandList>
+    {users.map(user => (
+      <CommandItem key={user.id} value={user.id}>
+        {user.name}
+      </CommandItem>
+    ))}
+  </CommandList>
+</Command>
+```
+
+## Accessibility
+
+- The input is a `combobox` and the list a `listbox`, so screen readers announce
+  the highlighted option as you move through it.
+- <kbd>↑</kbd> / <kbd>↓</kbd> move between items, <kbd>Home</kbd> /{' '}
+  <kbd>End</kbd> jump to the ends and <kbd>Enter</kbd> selects. Set `loop` to
+  wrap around at the edges.
+- <kbd>Ctrl+N</kbd> / <kbd>Ctrl+J</kbd> and <kbd>Ctrl+P</kbd> /{' '}
+  <kbd>Ctrl+K</kbd> also move up and down while the menu has focus. Pass
+  `vimBindings={false}` if those keys mean something else in your app.
+- `CommandDialog` traps focus, closes on <kbd>Escape</kbd> and gives the dialog
+  an accessible name through its `title` and `description`.
+- Give a standalone `Command` a `label` so the input has a name too.
+
+## Props
+
+### Command
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    label: {
+      description: 'Accessible label for the command menu input.',
+      type: 'string',
+    },
+    shouldFilter: {
+      description:
+        'Turn off the built-in filtering and sorting when you filter the items yourself.',
+      type: 'boolean',
+      default: 'true',
+    },
+    filter: {
+      description:
+        'Custom ranking function. Return `0` to hide an item and a higher number to rank it higher.',
+      type: '(value: string, search: string, keywords?: string[]) => number',
+    },
+    value: {
+      description: 'Controls the highlighted item.',
+      type: 'string',
+    },
+    onValueChange: {
+      description: 'Called when the highlighted item changes.',
+      type: '(value: string) => void',
+    },
+    loop: {
+      description: 'Wrap the keyboard selection around at the top and bottom.',
+      type: 'boolean',
+      default: 'false',
+    },
+    vimBindings: {
+      description: 'Enable the `Ctrl+N/J/P/K` navigation shortcuts.',
+      type: 'boolean',
+      default: 'true',
+    },
+  }}
+/>
+
+### CommandDialog
+
+<TypeTable
+  type={{
+    open: {
+      description: 'Controls whether the dialog is open.',
+      type: 'boolean',
+    },
+    onOpenChange: {
+      description: 'Called when the dialog opens or closes.',
+      type: '(open: boolean) => void',
+    },
+    title: {
+      description: 'Screen-reader-only dialog title.',
+      type: 'string',
+      default: '"Command Palette"',
+    },
+    description: {
+      description: 'Screen-reader-only dialog description.',
+      type: 'string',
+      default: '"Search for a command to run..."',
+    },
+    showCloseButton: {
+      description: 'Show the close button in the corner.',
+      type: 'boolean',
+      default: 'false',
+    },
+    className: {
+      description: 'Classes for the dialog content.',
+      type: 'string',
+    },
+  }}
+/>
+
+### CommandItem
+
+<TypeTable
+  type={{
+    onSelect: {
+      description: 'Called when the item is clicked or chosen with Enter.',
+      type: '(value: string) => void',
+    },
+    value: {
+      description:
+        'A unique value used for filtering and selection. Defaults to the text content.',
+      type: 'string',
+    },
+    keywords: {
+      description: 'Extra words the item should match.',
+      type: 'string[]',
+    },
+    disabled: {
+      description: 'Keep the item visible but not selectable.',
+      type: 'boolean',
+      default: 'false',
+    },
+    forceMount: {
+      description: 'Always render the item, even when it does not match.',
+      type: 'boolean',
+      default: 'false',
+    },
+  }}
+/>
+
+## API Reference
+
+[cmdk](https://github.com/pacocoursey/cmdk#parts-and-styling)
diff --git a/apps/web/content/docs/ui/comparison.mdx b/apps/web/content/docs/ui/comparison.mdx
new file mode 100644
index 000000000..c3f78a65f
--- /dev/null
+++ b/apps/web/content/docs/ui/comparison.mdx
@@ -0,0 +1,102 @@
+---
+title: Comparison
+description: A before/after slider - drag the handle to reveal one image over another.
+icon: Columns2
+---
+
+## Preview
+
+<Preview name="comparison" />
+
+## Usage
+
+```ts
+import {
+  Comparison,
+  ComparisonHandle,
+  ComparisonItem,
+} from '@vitnode/core/components/ui/comparison'
+```
+
+```tsx
+<Comparison aria-label="Before and after" className="aspect-video">
+  <ComparisonItem position="left">
+    <img alt="" draggable={false} src={before} />
+  </ComparisonItem>
+  <ComparisonItem position="right">
+    <img alt="" draggable={false} src={after} />
+  </ComparisonItem>
+  <ComparisonHandle />
+</Comparison>
+```
+
+`position="left"` is the side shown to the left of the handle, `right` the side
+shown to its right. Images inside an item fill it with `object-cover`, so give
+the `Comparison` a size or an aspect ratio and both pictures line up.
+
+## Hover mode
+
+With `mode="hover"` the handle follows the pointer - no clicking needed. Nice
+for quick, playful comparisons; for anything precise, stick with dragging.
+
+```tsx
+<Comparison mode="hover">...</Comparison>
+```
+
+## Starting point and changes
+
+```tsx
+<Comparison
+  defaultPosition={30}
+  onPositionChange={position => console.log(position)}
+>
+  ...
+</Comparison>
+```
+
+`position` goes from 0 (all right image) to 100 (all left image).
+
+## Custom handle
+
+`ComparisonHandle` draws a line with a grip by default. Pass children to draw
+your own - it already follows the slider for you.
+
+```tsx
+<ComparisonHandle>
+  <div className="bg-primary h-full w-0.5" />
+</ComparisonHandle>
+```
+
+## Accessibility
+
+- The whole comparison is a slider: focus it with <kbd>Tab</kbd>, then use the
+  arrow keys (5% a step, 10% with <kbd>Shift</kbd>), <kbd>Home</kbd> and
+  <kbd>End</kbd>.
+- Screen readers hear the position as a percentage. Name the slider with
+  `aria-label` - "Light and dark theme" says more than the default.
+- The images are decorative inside the slider (`alt=""`); describe what's being
+  compared in the label or a caption.
+- Dragging sideways never blocks scrolling the page up and down on phones.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    mode: {
+      description: 'Drag the handle, or have it follow the pointer.',
+      type: '"drag" | "hover"',
+      default: '"drag"',
+    },
+    defaultPosition: {
+      description: 'Where the handle starts, from 0 to 100.',
+      type: 'number',
+      default: '50',
+    },
+    onPositionChange: {
+      description: 'Called with the new position as it moves.',
+      type: '(position: number) => void',
+    },
+  }}
+/>
diff --git a/apps/web/content/docs/ui/confirm-action-alert-dialog.mdx b/apps/web/content/docs/ui/confirm-action-alert-dialog.mdx
index 785e9d8e3..1c65df295 100644
--- a/apps/web/content/docs/ui/confirm-action-alert-dialog.mdx
+++ b/apps/web/content/docs/ui/confirm-action-alert-dialog.mdx
@@ -1,6 +1,7 @@
 ---
 title: Confirm Action Alert Dialog
 description: A dialog component for confirming destructive actions like delete operations, built on top of the Alert Dialog.
+icon: ShieldAlert
 ---
 
 The Confirm Action Alert Dialog is a specialized dialog component built on top of the [Alert Dialog](/docs/ui/alert-dialog) that provides a consistent way to confirm potentially destructive or irreversible actions before they're executed.
@@ -75,6 +76,11 @@ import { TypeTable } from 'fumadocs-ui/components/type-table';
       type: 'ReactNode',
       default: 'This action cannot be undone.',
     },
+    icon: {
+      description:
+        'Icon shown above the title. Switches the dialog to the compact, centered layout.',
+      type: 'ReactNode',
+    },
     textSubmit: {
       description:
         'Custom text for the submit button. Defaults to translated "Confirm".',
diff --git a/apps/web/content/docs/ui/context-menu.mdx b/apps/web/content/docs/ui/context-menu.mdx
new file mode 100644
index 000000000..9d0eff30d
--- /dev/null
+++ b/apps/web/content/docs/ui/context-menu.mdx
@@ -0,0 +1,235 @@
+---
+title: Context Menu
+description: A menu that opens on right-click or long-press, with shortcuts, submenus, checkbox and radio items.
+icon: MousePointerClick
+---
+
+## Preview
+
+<Preview name="context-menu" />
+
+## Usage
+
+```ts
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from '@vitnode/core/components/ui/context-menu'
+```
+
+```tsx
+<ContextMenu>
+  <ContextMenuTrigger className="flex h-40 items-center justify-center rounded-xl border-2 border-dashed">
+    Right-click here
+  </ContextMenuTrigger>
+  <ContextMenuContent className="w-56">
+    <ContextMenuItem>
+      Reload
+      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+    </ContextMenuItem>
+    <ContextMenuItem>Rename</ContextMenuItem>
+    <ContextMenuSeparator />
+    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
+
+Right-click the trigger with a mouse, or press and hold it on a phone or
+tablet. The menu opens right where your cursor (or finger) is - no button
+required, no hunting around.
+
+## Submenus
+
+Nest a `ContextMenuSub` to tuck the rarely used stuff one level deeper. It opens
+on hover, on click, or with the arrow keys.
+
+```tsx
+import {
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+} from '@vitnode/core/components/ui/context-menu'
+
+<ContextMenuSub>
+  <ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
+  <ContextMenuSubContent className="w-48">
+    <ContextMenuItem>Save page as...</ContextMenuItem>
+    <ContextMenuItem>Developer tools</ContextMenuItem>
+  </ContextMenuSubContent>
+</ContextMenuSub>
+```
+
+## Checkbox and radio items
+
+Use `ContextMenuCheckboxItem` for independent toggles and a
+`ContextMenuRadioGroup` when exactly one option can win. Both work controlled or
+uncontrolled, just like their form siblings.
+
+```tsx
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+} from '@vitnode/core/components/ui/context-menu'
+
+const [showBookmarks, setShowBookmarks] = React.useState(true)
+const [person, setPerson] = React.useState('pedro')
+
+<ContextMenuCheckboxItem
+  checked={showBookmarks}
+  onCheckedChange={setShowBookmarks}
+>
+  Show bookmarks bar
+</ContextMenuCheckboxItem>
+<ContextMenuSeparator />
+<ContextMenuLabel>People</ContextMenuLabel>
+<ContextMenuRadioGroup value={person} onValueChange={setPerson}>
+  <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
+  <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+</ContextMenuRadioGroup>
+```
+
+The check mark sits at the end of the row. Add `inset` to items, labels and
+sub-triggers without an icon so their text lines up with the ones that have
+one.
+
+## Shortcuts
+
+`ContextMenuShortcut` shows a keyboard hint at the end of an item. It is only a
+label - wire the actual key binding yourself, otherwise it is a promise you are
+not keeping.
+
+```tsx
+<ContextMenuItem>
+  Save page as...
+  <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+</ContextMenuItem>
+```
+
+## Destructive items
+
+Set `variant="destructive"` for actions you cannot take back, so they look the
+part.
+
+```tsx
+<ContextMenuItem variant="destructive">
+  <Trash2Icon />
+  Delete
+</ContextMenuItem>
+```
+
+## Accessibility
+
+- Context menus are hidden by nature: nothing on screen says "right-click me".
+  Every action inside one must also be reachable another way, such as a
+  toolbar, a [Dropdown Menu](/docs/ui/dropdown-menu) or a keyboard shortcut.
+  Treat the context menu as a shortcut, never as the only door.
+- The trigger is a plain, non-focusable area, so keyboard users cannot open
+  the menu at all - one more reason for the rule above. Once it is open,
+  arrow keys move between items, the right arrow opens a submenu, typing a
+  letter jumps to a matching item and `Escape` closes it.
+- On touch devices a long-press opens the menu, and the trigger sets
+  `select-none` so holding it does not start a text selection.
+- Disabled items stay visible and are announced as disabled, so nobody wonders
+  where "Forward" went.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### ContextMenu
+
+<TypeTable
+  type={{
+    open: {
+      description: 'Controls whether the menu is open.',
+      type: 'boolean',
+    },
+    defaultOpen: {
+      description: 'Whether the menu is open on the first render.',
+      type: 'boolean',
+      default: 'false',
+    },
+    onOpenChange: {
+      description: 'Called when the menu opens or closes.',
+      type: '(open: boolean, eventDetails) => void',
+    },
+    disabled: {
+      description: 'Stops the menu from opening.',
+      type: 'boolean',
+      default: 'false',
+    },
+  }}
+/>
+
+### ContextMenuContent
+
+<TypeTable
+  type={{
+    side: {
+      description:
+        'Which side of the cursor the menu prefers. It flips when there is no room.',
+      type: 'top | bottom | left | right | inline-start | inline-end',
+      default: 'bottom',
+    },
+    align: {
+      description: 'How the menu aligns against the cursor on the chosen side.',
+      type: 'start | center | end',
+      default: 'start',
+    },
+    sideOffset: {
+      description: 'Distance from the cursor in pixels.',
+      type: 'number',
+      default: '0',
+    },
+    alignOffset: {
+      description: 'Shift along the alignment axis in pixels.',
+      type: 'number',
+      default: '0',
+    },
+  }}
+/>
+
+### ContextMenuItem
+
+<TypeTable
+  type={{
+    variant: {
+      description: 'The look of the item.',
+      type: 'default | destructive',
+      default: 'default',
+    },
+    inset: {
+      description: 'Adds start padding so the text lines up with items that have an icon.',
+      type: 'boolean',
+      default: 'false',
+    },
+    disabled: {
+      description: 'Shows the item but makes it non-interactive.',
+      type: 'boolean',
+      default: 'false',
+    },
+    closeOnClick: {
+      description: 'Whether clicking the item closes the menu.',
+      type: 'boolean',
+      default: 'true',
+    },
+    onClick: {
+      description: 'Called when the item is chosen with a click, tap or the keyboard.',
+      type: '(event) => void',
+    },
+  }}
+/>
+
+`ContextMenuCheckboxItem` takes `checked`, `defaultChecked` and
+`onCheckedChange`; `ContextMenuRadioGroup` takes `value`, `defaultValue` and
+`onValueChange`. Both item types accept `inset` and `disabled` too.
+
+## API Reference
+
+[Base UI - Context Menu](https://base-ui.com/react/components/context-menu#api-reference)
diff --git a/apps/web/content/docs/ui/copy-button.mdx b/apps/web/content/docs/ui/copy-button.mdx
new file mode 100644
index 000000000..011089295
--- /dev/null
+++ b/apps/web/content/docs/ui/copy-button.mdx
@@ -0,0 +1,121 @@
+---
+title: Copy Button
+description: A button that copies text to the clipboard, with a smooth icon swap and a check mark that draws itself.
+icon: Copy
+---
+
+## Preview
+
+<Preview name="copy-button" />
+
+## Usage
+
+```ts
+import { CopyButton } from '@vitnode/core/components/ui/copy-button'
+```
+
+```tsx
+<CopyButton content="Hello world!" />
+```
+
+Click it and the copy icon blurs away while a check mark draws itself in - the
+same stroke animation as the [Checkbox](/docs/ui/checkbox). After `delay`
+milliseconds it quietly goes back to the copy icon, ready for round two.
+
+## With a label
+
+Pass children to show text next to the icon. The text becomes the button's
+accessible name, so screen readers hear what you see.
+
+```tsx
+<CopyButton content={inviteLink} variant="secondary">
+  Copy invite link
+</CopyButton>
+```
+
+## Icon only
+
+Without children the button renders as an icon. It labels itself "Copy" and
+"Copied" out of the box, but a specific label is friendlier when there are a few
+copy buttons on one screen:
+
+```tsx
+<CopyButton
+  aria-label="Copy install command"
+  content="pnpm create vitnode-app@canary"
+  size="icon-sm"
+  variant="ghost"
+/>
+```
+
+## Controlled
+
+Own the copied state with `copied` and `onCopiedChange` - handy when something
+else on the page should react to the copy.
+
+```tsx
+const [copied, setCopied] = React.useState(false)
+
+<CopyButton
+  content={apiKey}
+  copied={copied}
+  onCopiedChange={setCopied}
+/>
+```
+
+## Accessibility
+
+- A polite live region announces "Copied" after a successful copy, so the
+  change is not just a visual one.
+- With reduced motion turned on, the icons simply fade and the check mark shows
+  up fully drawn.
+- If the browser blocks clipboard access (for example on a non-HTTPS page), an
+  error toast explains what happened instead of failing silently.
+- Calling `event.preventDefault()` inside your own `onClick` skips the copy.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    content: {
+      description: 'The text written to the clipboard.',
+      type: 'string',
+      required: true,
+    },
+    copied: {
+      description: 'Controls the copied state.',
+      type: 'boolean',
+    },
+    onCopiedChange: {
+      description:
+        'Called with `true` after a successful copy and with `false` when the button resets.',
+      type: '(copied: boolean) => void',
+    },
+    delay: {
+      description: 'How long the check mark stays, in milliseconds.',
+      type: 'number',
+      default: '3000',
+    },
+    variant: {
+      description: 'The variant of the button.',
+      type: 'default | secondary | outline | ghost | link | success | warning | destructive',
+      default: 'outline',
+    },
+    size: {
+      description:
+        'The size of the button. Defaults to `icon` without children and `default` with them.',
+      type: 'default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg',
+    },
+    'aria-label': {
+      description:
+        'Overrides the accessible name. Without children it defaults to "Copy" / "Copied".',
+      type: 'string',
+    },
+  }}
+/>
+
+## API Reference
+
+[Base UI - Button](https://base-ui.com/react/components/button#api-reference)
diff --git a/apps/web/content/docs/ui/counter.mdx b/apps/web/content/docs/ui/counter.mdx
new file mode 100644
index 000000000..9361cf4d7
--- /dev/null
+++ b/apps/web/content/docs/ui/counter.mdx
@@ -0,0 +1,129 @@
+---
+title: Counter
+description: A plus/minus number picker whose digits roll into place, plus the SlidingNumber behind it.
+icon: Calculator
+---
+
+## Preview
+
+<Preview name="counter" />
+
+## Usage
+
+```ts
+import { Counter } from '@vitnode/core/components/ui/counter'
+```
+
+```tsx
+const [quantity, setQuantity] = React.useState(1)
+
+<Counter max={10} min={1} onValueChange={setQuantity} value={quantity} />
+```
+
+Each digit rolls on its own, the short way round: going from 9 to 10 rolls the
+last digit forward to 0 while a new 1 slides in, instead of spinning back
+through every number. The buttons give a tiny press, and a button is disabled
+once you hit `min` or `max`, so nobody wonders why clicking does nothing.
+
+Leave out `value` and use `defaultValue` if you only care about changes:
+
+```tsx
+<Counter defaultValue={2} onValueChange={value => save(value)} />
+```
+
+## Steps and limits
+
+`step` sets how far one click goes. A step that would jump past a limit stops
+right at it - with `max={10}` and `step={5}`, 8 goes to 10, not 13.
+
+```tsx
+<Counter max={100} min={0} step={5} />
+```
+
+## Sliding number
+
+<Preview name="counter-sliding-number" />
+
+The rolling digits are their own component, so you can animate any number -
+stats, prices, likes - without the buttons:
+
+```ts
+import { SlidingNumber } from '@vitnode/core/components/ui/sliding-number'
+```
+
+```tsx
+<SlidingNumber className="text-5xl font-semibold" value={downloads} />
+```
+
+It takes the font size and colour of its surroundings and always uses
+tabular figures, so digits don't wobble as they change. It handles whole
+numbers, positive or negative.
+
+## In a form
+
+Counter is a standalone control. In an AutoForm, the
+[number field](/docs/ui/auto-form) is still the way to collect a number that
+gets saved.
+
+## Accessibility
+
+- The buttons are labelled "Decrease" and "Increase" in the user's language.
+- Screen readers hear the new value after every click, without the rolling
+  digits - those are hidden from assistive tech.
+- Give the counter a name with `aria-label` or `aria-labelledby`, so "Increase"
+  has context: increase _what_?
+- With reduced motion turned on, digits change instantly.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Counter
+
+<TypeTable
+  type={{
+    value: {
+      description: 'The current value (controlled).',
+      type: 'number',
+    },
+    defaultValue: {
+      description: 'The starting value when uncontrolled.',
+      type: 'number',
+      default: '0',
+    },
+    onValueChange: {
+      description: 'Called with the new value after a click.',
+      type: '(value: number) => void',
+    },
+    min: {
+      description: 'The lowest allowed value.',
+      type: 'number',
+    },
+    max: {
+      description: 'The highest allowed value.',
+      type: 'number',
+    },
+    step: {
+      description: 'How much one click adds or removes.',
+      type: 'number',
+      default: '1',
+    },
+    disabled: {
+      description: 'Disables both buttons.',
+      type: 'boolean',
+      default: 'false',
+    },
+  }}
+/>
+
+### SlidingNumber
+
+<TypeTable
+  type={{
+    value: {
+      description: 'The whole number to show.',
+      type: 'number',
+      required: true,
+    },
+  }}
+/>
diff --git a/apps/web/content/docs/ui/data-table.mdx b/apps/web/content/docs/ui/data-table.mdx
deleted file mode 100644
index 13aac9105..000000000
--- a/apps/web/content/docs/ui/data-table.mdx
+++ /dev/null
@@ -1,587 +0,0 @@
----
-title: Data Table
-description: A table component with sorting, filtering, and pagination compatible with VitNode API.
----
-
-## Preview
-
-<Preview name="data-table" withoutBackground />
-
-## Usage
-
-```ts
-import {
-  type ColumnDef,
-  DataTable,
-} from '@vitnode/core/components/table/data-table'
-```
-
-Columns are typed with `ColumnDef<T>`, where `T` is the shape of a single row. An **accessor column** binds to the data through `accessorKey`, which is type-safe - it only accepts a `keyof T`, just like TanStack Table. A **display column** (for actions, selection, etc.) has no `accessorKey` and instead requires a string `id`.
-
-```tsx
-const columns: ColumnDef<User>[] = [
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'email', header: 'Email' },
-  { accessorKey: 'role', header: 'Role' },
-  { accessorKey: 'status', header: 'Status', align: 'center' },
-  {
-    id: 'actions',
-    header: '',
-    align: 'right',
-    cell: () => (
-      <Button size="sm" variant="outline">
-        Edit
-      </Button>
-    ),
-  },
-]
-
-;<DataTable
-  id="users-table"
-  columns={columns}
-  edges={data.edges}
-  pageInfo={data.pageInfo}
-  order={{
-    defaultOrder: {
-      column: 'name',
-      order: 'asc',
-    },
-  }}
-/>
-```
-
-<Callout type="info" title="Type-safe columns">
-  `accessorKey` autocompletes and is checked against the row type `T` - passing
-  a key that doesn't exist on `T` is a compile-time error. Use `id` (a plain
-  `string`) for display columns that aren't backed by a data field.
-</Callout>
-
-import { TypeTable } from 'fumadocs-ui/components/type-table'
-
-<TypeTable
-  type={{
-    columns: {
-      description:
-        'Array of column definitions. Accessor columns bind to data via a type-safe accessorKey (keyof T); display columns (e.g. actions) use a string id instead.',
-      required: true,
-      type: `ColumnDef<T>[] where ColumnDef<T> is:
-        // accessor column
-        {
-          accessorKey: keyof T;
-          header: ReactNode;
-          id?: string;
-          align?: 'left' | 'center' | 'right';
-          className?: string;
-          cell?: (props: { row: T; allData: T[] }) => ReactNode;
-        }
-        // or display column
-        {
-          id: string;
-          header: ReactNode;
-          align?: 'left' | 'center' | 'right';
-          className?: string;
-          cell?: (props: { row: T; allData: T[] }) => ReactNode;
-        }`,
-    },
-    edges: {
-      description: 'Data to be displayed in the table',
-      required: true,
-      type: 'Array',
-    },
-    order: {
-      description: 'Column sorting configuration',
-      required: true,
-      type: `{
-        columns?: string[];
-        defaultOrder: {
-          column: string;
-          order: 'asc' | 'desc';
-        };
-      }`,
-    },
-    pageInfo: {
-      description:
-        'Pagination information from the API. Pass it straight through — the table renders numbered pages and a "Showing 21–30 of 380" range from it.',
-      required: true,
-      type: `{
-        count: number;
-        totalCount: number;
-        totalPages: number;
-        currentPage: number | null;
-        hasNextPage: boolean;
-        hasPreviousPage: boolean;
-        startCursor: string | null;
-        endCursor: string | null;
-      }`,
-    },
-    search: {
-      description:
-        'Renders a search input above the table. Requires the API route to define the searchable columns.',
-      required: false,
-      type: 'boolean',
-    },
-    searchPlaceholder: {
-      description: 'Custom placeholder text for the search input',
-      required: false,
-      type: 'string',
-    },
-    bulkActions: {
-      description:
-        'Actions for the rows a person ticked, rendered in a bar that floats at the bottom centre of the viewport. Passing this turns row selection on: the table grows a leading checkbox column, and the nodes here read the ticked ids with useDataTableSelection().',
-      required: false,
-      type: 'ReactNode',
-    },
-    filters: {
-      description:
-        'Renders one or more faceted multi-select dropdowns above the table. Each filter controls its own URL query parameter.',
-      required: false,
-      type: `{
-        id: string;
-        label: string;
-        options?: {
-          value: string;
-          label: ReactNode;
-          keywords?: string[];
-        }[];
-        onSearch?: (search: string) => Promise<{
-          value: string;
-          label: ReactNode;
-          keywords?: string[];
-        }[]>;
-      }[]`,
-    },
-  }}
-/>
-
-## Cell Renderer
-
-You can customize how each cell is rendered using the `cell` property. The renderer function receives the current row data and all table data as parameters.
-
-```tsx
-<DataTable
-  id="users-table"
-  columns={[
-    {
-      accessorKey: 'id',
-      header: 'Id',
-      // [!code ++]
-      cell: ({ row, allData }) => (
-        // [!code ++]
-        <span>
-          // [!code ++]
-          {row.id} - all data {allData.length}
-          // [!code ++]
-        </span>
-        // [!code ++]
-      ),
-    },
-    { accessorKey: 'createdAt', header: 'Created at' },
-  ]}
-  edges={data.edges}
-  pageInfo={data.pageInfo}
-  order={{
-    columns: ['createdAt', 'id'],
-    defaultOrder: {
-      order: 'desc',
-    },
-  }}
-/>
-```
-
-### Order Configuration
-
-If you want to enable sorting on specific columns, you can specify them in the `columns` property.
-
-```tsx
-order={{
-  // [!code ++]
-  columns: ['createdAt', 'id', 'name'],
-  defaultOrder: {
-    column: 'createdAt',
-    order: 'desc',
-  }
-}}
-```
-
-## Column Alignment
-
-Use the `align` property to control the horizontal alignment of a column's header and cells. It accepts `"left"` (default), `"center"`, or `"right"`. This is handy for numeric values and action buttons.
-
-```tsx
-columns={[
-  { accessorKey: "name", header: "Name" },
-  // [!code ++]
-  { accessorKey: "status", header: "Status", align: "center" },
-  {
-    id: "actions",
-    header: "",
-    // [!code ++]
-    align: "right",
-    cell: ({ row }) => <RowActions id={row.id} />,
-  },
-]}
-```
-
-## Search
-
-Set the `search` prop to `true` to render a search input above the table. You can optionally customize the placeholder with `searchPlaceholder`.
-
-```tsx
-<DataTable
-  id="users-table"
-  // [!code ++]
-  search
-  // [!code ++]
-  searchPlaceholder="Search users..."
-  columns={[
-    { accessorKey: 'name', header: 'Name' },
-    { accessorKey: 'email', header: 'Email' },
-  ]}
-  edges={data.edges}
-  pageInfo={data.pageInfo}
-  order={{
-    defaultOrder: {
-      column: 'name',
-      order: 'asc',
-    },
-  }}
-/>
-```
-
-The input writes the term to the `?search=` query parameter (debounced) and reloads the page, so it works out of the box with server-side data fetching. The columns that are actually searched are defined on the API route.
-
-<Callout type="info" title="Configure the API route">
-  Enabling `search` only renders the input. You must also tell the backend which
-  columns to search across - see the [Search](/docs/dev/database/search) guide.
-</Callout>
-
-## Filters
-
-Pass the `filters` prop to render one or more faceted, multi-select dropdowns above the table (next to the search input). Each filter controls its own URL query parameter, so it works out of the box with server-side data fetching. Multiple selected values are stored as a comma-separated list, e.g. `?roleId=1,3`, and changing a filter returns you to the first page.
-
-<TypeTable
-  type={{
-    id: {
-      description: 'The URL query parameter this filter reads and writes.',
-      required: true,
-      type: 'string',
-    },
-    label: {
-      description:
-        'Text shown on the filter trigger and as the search placeholder.',
-      required: true,
-      type: 'string',
-    },
-    options: {
-      description:
-        'Static options, filtered on the client. `label` can be any node; provide `keywords` so typing can search a node-based label.',
-      required: false,
-      type: `{
-        value: string;
-        label: ReactNode;
-        keywords?: string[];
-      }[]`,
-    },
-    onSearch: {
-      description:
-        'Async source called (debounced) as the user types. The API is expected to return results already filtered and capped (e.g. 20 per request).',
-      required: false,
-      type: '(search: string) => Promise<Option[]>',
-    },
-  }}
-/>
-
-### Static filters
-
-When the set of options is small and known ahead of time, pass them directly via `options`. The dropdown list is filtered on the client.
-
-```tsx
-<DataTable
-  id="users-table"
-  // [!code ++]
-  filters={[
-    // [!code ++]
-    {
-      // [!code ++]
-      id: 'status',
-      // [!code ++]
-      label: 'Status',
-      // [!code ++]
-      options: [
-        // [!code ++]
-        { value: 'active', label: 'Active' },
-        // [!code ++]
-        { value: 'banned', label: 'Banned' },
-        // [!code ++]
-      ],
-      // [!code ++]
-    },
-    // [!code ++]
-  ]}
-  columns={[
-    { accessorKey: 'name', header: 'Name' },
-    { accessorKey: 'email', header: 'Email' },
-  ]}
-  edges={data.edges}
-  pageInfo={data.pageInfo}
-  order={{
-    defaultOrder: {
-      column: 'name',
-      order: 'asc',
-    },
-  }}
-/>
-```
-
-### Async filters
-
-When the options come from the API (for example a large or searchable list), provide an `onSearch` callback instead of `options`. It runs - debounced - as the user types and should return results already filtered and capped by the server. The universal fetcher answers from the browser here, with the visitor's own cookies:
-
-```tsx title="search-roles.tsx"
-import type { FilterOption } from '@vitnode/core/components/table/filters'
-
-import { RoleFormat } from '@vitnode/core/components/role-format'
-import { fetcher } from '@vitnode/core/tanstack/fetcher'
-
-export const searchRoles = async (search: string): Promise<FilterOption[]> => {
-  const res = await fetcher({
-    plugin: '@vitnode/core',
-    path: '/list',
-    method: 'get',
-    module: 'admin/roles',
-    args: {
-      query: { search, first: '20' },
-    },
-    withPagination: true,
-  })
-
-  if (res.status !== 200) {
-    return []
-  }
-
-  const data = await res.json()
-
-  return data.edges.map((role) => ({
-    value: String(role.id),
-    label: <RoleFormat role={role} />,
-    keywords: role.name.map((item) => item.name),
-  }))
-}
-```
-
-```tsx
-filters={[
-  {
-    id: "roleId",
-    label: "Group",
-    // [!code ++]
-    onSearch: searchRoles,
-  },
-]}
-```
-
-<Callout type="info" title="Configure the API route">
-  A filter only writes its values to the URL - the backend must read the query
-  parameter and apply the matching `where` clause. For a comma-separated
-  multi-select, split the value and use `inArray`:
-
-```ts
-const roleIds = (query.roleId?.split(",") ?? [])
-  .filter(Boolean)
-  .map(Number)
-  .filter((id) => !Number.isNaN(id));
-
-// pass to withPagination:
-where: roleIds.length ? inArray(core_users.roleId, roleIds) : undefined,
-```
-
-</Callout>
-
-## Pagination
-
-The table renders its own pager from `pageInfo` — numbered pages with a first/last
-anchor and an ellipsis in between, a rows-per-page select, and a
-"Showing 21–30 of 380" range. You wire up nothing: pass `pageInfo` through and it
-appears.
-
-Each page is a real link (`?page=3`), so middle-click and "open in new tab" work,
-while a plain click stays a client-side navigation. On phones the numbers collapse
-to a "Page 3 of 38" label between the arrows, because forty tap targets do not fit
-on a 390px screen.
-
-Two details worth knowing:
-
-- **Changing the page size or a filter returns you to page one.** A filter changes
-  which rows exist, so the page you were on no longer means what it meant.
-- **A page past the end lands on the last page**, not on an empty table. Stale
-  links and hand-typed numbers stay useful.
-
-The API does the counting. See [Pagination](/docs/dev/database/pagination) for the
-route side, including the index your ordered column needs.
-
-## Bulk Actions
-
-Pass `bulkActions` to let a person act on several rows at once. That single prop is what turns selection on: the table grows a leading checkbox column - one per row, plus a header checkbox that ticks the whole page - and while anything is ticked, a bar floats at the bottom centre of the viewport with the count, your actions, and a button to clear the selection.
-
-<Preview name="data-table-bulk-actions" withoutBackground />
-
-Your actions read the ticked ids with the `useDataTableSelection` hook. They are rendered inside the bar, which lives inside the table's selection provider, so nothing has to be threaded through props:
-
-```tsx title="delete-bulk-action.tsx"
-'use client'
-
-import { useDataTableSelection } from '@vitnode/core/components/table/selection'
-import { Button } from '@vitnode/core/components/ui/button'
-
-export const DeleteBulkAction = () => {
-  // [!code ++]
-  const { clear, selected } = useDataTableSelection()
-
-  return (
-    <Button
-      onClick={() => deleteUsersAction({ ids: selected })}
-      variant="destructive"
-    >
-      <Trash2Icon />
-      Delete
-    </Button>
-  )
-}
-```
-
-```tsx
-<DataTable
-  id="users-table"
-  // [!code ++]
-  bulkActions={<DeleteBulkAction />}
-  columns={[
-    { accessorKey: 'name', header: 'Name' },
-    { accessorKey: 'email', header: 'Email' },
-  ]}
-  edges={data.edges}
-  pageInfo={data.pageInfo}
-  order={{
-    defaultOrder: {
-      column: 'name',
-      order: 'asc',
-    },
-  }}
-/>
-```
-
-### What the hook returns
-
-<TypeTable
-  type={{
-    selected: {
-      description: 'The ticked row ids, in the order they were ticked.',
-      required: true,
-      type: 'number[]',
-    },
-    isSelected: {
-      description: 'Whether one row id is ticked.',
-      required: true,
-      type: '(id: number) => boolean',
-    },
-    allSelected: {
-      description: 'Every row on the page is ticked.',
-      required: true,
-      type: 'boolean',
-    },
-    someSelected: {
-      description:
-        "Some but not all rows are ticked - the header checkbox's indeterminate state.",
-      required: true,
-      type: 'boolean',
-    },
-    toggle: {
-      description: 'Ticks or unticks one row.',
-      required: true,
-      type: '(id: number) => void',
-    },
-    toggleAll: {
-      description: 'Ticks or unticks every row on the page.',
-      required: true,
-      type: '(next: boolean) => void',
-    },
-    clear: {
-      description: 'Unticks everything, which hides the bar.',
-      required: true,
-      type: '() => void',
-    },
-  }}
-/>
-
-### Selection is per page
-
-The selection only ever covers the rows currently on screen. Whenever the server sends a different set of row ids - paging, searching, changing a filter - the selection is pruned to what is still there, so paging away empties it on its own and a bulk action can never touch a row nobody can see.
-
-That pruning is also what makes a partly-successful action readable: revalidate after deleting 3 of 5 rows and the 2 that were refused stay on screen _and_ stay ticked, so the bar is still pointed at exactly the work that is left.
-
-<Callout type="warn" title="Bulk actions run per row">
-  There is no bulk endpoint behind `bulkActions` - it hands you ids, and what
-  you do with them is yours. When your action loops the single-row endpoint, cap
-  the fan-out and report the outcomes per reason rather than as one pass/fail,
-  so a run that partly succeeded can say so.
-</Callout>
-
-## Complete Example
-
-Here's a complete example showing how to use the `DataTable` component in a page:
-
-```tsx
-import {
-  DataTable,
-  SearchParamsDataTable,
-} from '@vitnode/core/components/table/data-table'
-import { fetcher } from '@vitnode/core/tanstack/fetcher'
-
-export const UsersView = async ({
-  searchParams,
-}: {
-  searchParams: Promise<SearchParamsDataTable>
-}) => {
-  const query = await searchParams
-  const res = await fetcher({
-    plugin: '@vitnode/core',
-    path: '/list',
-    method: 'get',
-    module: 'admin/users',
-    args: {
-      query,
-    },
-    withPagination: true,
-  })
-  const data = await res.json()
-
-  return (
-    <DataTable
-      id="users-table"
-      columns={[
-        {
-          accessorKey: 'id',
-          header: 'ID',
-        },
-        {
-          accessorKey: 'username',
-          header: 'Username',
-          cell: ({ row }) => (
-            <span className="font-medium">{row.username}</span>
-          ),
-        },
-        { accessorKey: 'email', header: 'Email' },
-        { accessorKey: 'createdAt', header: 'Created at' },
-      ]}
-      edges={data.edges}
-      order={{
-        columns: ['id', 'username', 'email', 'createdAt'],
-        defaultOrder: {
-          column: 'createdAt',
-          order: 'desc',
-        },
-      }}
-      pageInfo={data.pageInfo}
-    />
-  )
-}
-```
diff --git a/apps/web/content/docs/ui/data-table/bulk-actions.mdx b/apps/web/content/docs/ui/data-table/bulk-actions.mdx
new file mode 100644
index 000000000..50010a5e4
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/bulk-actions.mdx
@@ -0,0 +1,115 @@
+---
+title: Bulk Actions
+description: Tick a few rows and act on all of them at once from a floating bar.
+icon: CheckCheck
+---
+
+## Preview
+
+<Preview name="data-table-bulk-actions" withoutBackground />
+
+## Usage
+
+Pass `bulkActions` to let a person act on several rows at once. That single prop is what turns selection on: the table grows a leading checkbox column - one per row, plus a header checkbox that ticks the whole page - and while anything is ticked, a bar floats at the bottom centre of the viewport with the count, your actions, and a button to clear the selection.
+
+Your actions read the ticked ids with the `useDataTableSelection` hook. They are rendered inside the bar, which lives inside the table's selection provider, so nothing has to be threaded through props:
+
+```tsx title="delete-bulk-action.tsx"
+'use client'
+
+import { useDataTableSelection } from '@vitnode/core/components/table/selection'
+import { Button } from '@vitnode/core/components/ui/button'
+
+export const DeleteBulkAction = () => {
+  // [!code ++]
+  const { clear, selected } = useDataTableSelection()
+
+  return (
+    <Button
+      onClick={() => deleteUsersAction({ ids: selected })}
+      variant="destructive"
+    >
+      <Trash2Icon />
+      Delete
+    </Button>
+  )
+}
+```
+
+```tsx
+<DataTable
+  id="users-table"
+  // [!code ++]
+  bulkActions={<DeleteBulkAction />}
+  columns={[
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'email', header: 'Email' },
+  ]}
+  edges={data.edges}
+  pageInfo={data.pageInfo}
+  order={{
+    defaultOrder: {
+      column: 'name',
+      order: 'asc',
+    },
+  }}
+/>
+```
+
+## What the hook returns
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    selected: {
+      description: 'The ticked row ids, in the order they were ticked.',
+      required: true,
+      type: 'number[]',
+    },
+    isSelected: {
+      description: 'Whether one row id is ticked.',
+      required: true,
+      type: '(id: number) => boolean',
+    },
+    allSelected: {
+      description: 'Every row on the page is ticked.',
+      required: true,
+      type: 'boolean',
+    },
+    someSelected: {
+      description:
+        "Some but not all rows are ticked - the header checkbox's indeterminate state.",
+      required: true,
+      type: 'boolean',
+    },
+    toggle: {
+      description: 'Ticks or unticks one row.',
+      required: true,
+      type: '(id: number) => void',
+    },
+    toggleAll: {
+      description: 'Ticks or unticks every row on the page.',
+      required: true,
+      type: '(next: boolean) => void',
+    },
+    clear: {
+      description: 'Unticks everything, which hides the bar.',
+      required: true,
+      type: '() => void',
+    },
+  }}
+/>
+
+## Selection is per page
+
+The selection only ever covers the rows currently on screen. Whenever the server sends a different set of row ids - paging, searching, changing a filter - the selection is pruned to what is still there, so paging away empties it on its own and a bulk action can never touch a row nobody can see.
+
+That pruning is also what makes a partly-successful action readable: revalidate after deleting 3 of 5 rows and the 2 that were refused stay on screen _and_ stay ticked, so the bar is still pointed at exactly the work that is left.
+
+<Callout type="warn" title="Bulk actions run per row">
+  There is no bulk endpoint behind `bulkActions` - it hands you ids, and what
+  you do with them is yours. When your action loops the single-row endpoint, cap
+  the fan-out and report the outcomes per reason rather than as one pass/fail,
+  so a run that partly succeeded can say so.
+</Callout>
diff --git a/apps/web/content/docs/ui/data-table/draggable-rows.mdx b/apps/web/content/docs/ui/data-table/draggable-rows.mdx
new file mode 100644
index 000000000..d2fbecb0d
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/draggable-rows.mdx
@@ -0,0 +1,273 @@
+---
+title: Draggable Rows
+description: Drag rows into a new order with mouse, touch or keyboard - and save it on your backend.
+icon: GripVertical
+---
+
+## Preview
+
+<Preview name="data-table-reorderable" withoutBackground />
+
+## Usage
+
+When the order of rows _is_ the data - a backlog, homepage sections, FAQ entries - pass `reorderable`. Each row grows a grip handle; grab it and drag the row where it belongs. The other rows slide out of the way, and the dropped row glides into its new spot.
+
+```tsx
+<DataTable
+  id="backlog-table"
+  // [!code ++]
+  reorderable={{
+    // [!code ++]
+    getRowLabel: (task) => task.title,
+    // [!code ++]
+    onReorder: async (ids) => await saveOrder(ids),
+    // [!code ++]
+  }}
+  columns={columns}
+  edges={data.edges}
+  pageInfo={data.pageInfo}
+  order={{
+    defaultOrder: {
+      column: 'position',
+      order: 'asc',
+    },
+  }}
+/>
+```
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    onReorder: {
+      description:
+        'Called after a drop with every row id on the page in its new order, plus which row moved and where. Return a promise to save it - if it rejects, the rows jump back and an error toast explains what happened.',
+      required: true,
+      type: `(ids: number[], details: {
+        activeId: number;
+        overId: number;
+        from: number;
+        to: number;
+      }) => void | Promise<void>`,
+    },
+    getRowLabel: {
+      description:
+        'What the handle is called out loud - "Reorder Fix the login redirect loop" beats "Reorder row 1". Defaults to the row position.',
+      required: false,
+      type: '(row: T) => string',
+    },
+    disabled: {
+      description:
+        'Shows the handles but locks them, for example while a person lacks the permission to reorder.',
+      required: false,
+      type: 'boolean',
+    },
+  }}
+/>
+
+What you get for free:
+
+- **Optimistic order.** The table moves the row the moment you drop it and calls `onReorder` in the background. If the promise rejects, it rolls back and shows an error toast - no stale "did it save?" moment.
+- **Only the handle drags.** Links, buttons and `rowOpens` clicks in the rest of the row keep working exactly as before.
+- **Mouse, touch and keyboard.** On touch, press and hold the handle for a moment so scrolling the page still scrolls the page. With a keyboard, focus a handle, press Space, move with the arrow keys and press Space again (Escape cancels). Screen readers hear where the row is the whole time.
+- **Expandable rows travel along.** An open detail panel belongs to its row, so it moves with it during the drag.
+- **Selection is untouched.** With `bulkActions` the handle sits first, then the checkbox.
+- **Reduced motion is respected.** Rows swap places without sliding when the system asks for less motion.
+
+<Callout type="warn" title="Reordering pauses while the view is filtered">
+  The handles are disabled while a search, a filter or a sort other than
+  `order.defaultOrder` is active - dragging a row in a filtered view would
+  shuffle rows nobody can see. Hovering a disabled handle says so. Make the
+  table's `defaultOrder` your stored order (for example `position` ascending) so
+  the default view is the one that can be rearranged.
+</Callout>
+
+## Saving the order on the backend
+
+The table hands you ids; making them stick is three small pieces. VitNode's own navigation admin does the same thing in `packages/vitnode/src/api/modules/admin/navigation/routes/reorder.route.ts` - peek there for a production version.
+
+<Steps>
+<Step>
+
+#### Add a `position` column and sort by it
+
+```ts title="plugins/tasks/src/database/tasks.ts"
+import { camelCase, index } from 'drizzle-orm/pg-core'
+
+export const tasks = camelCase.table.withRLS(
+  'tasks',
+  (t) => ({
+    id: t.serial().primaryKey(),
+    title: t.varchar({ length: 255 }).notNull(),
+    // [!code ++]
+    position: t.integer().notNull().default(0),
+    createdAt: t.timestamp().notNull().defaultNow(),
+  }),
+  // [!code ++]
+  (t) => [index('tasks_position_idx').on(t.position)],
+)
+```
+
+The list route orders by it, so the default view is the stored order:
+
+```ts
+withPagination({
+  // ...
+  // [!code ++]
+  orderBy: { column: tasks.position, order: 'asc' },
+})
+```
+
+</Step>
+<Step>
+
+#### Accept the new order in an admin route
+
+The route takes the ids of one page, in their new order, and hands those rows the positions they already had between them. That keeps pagination honest: reordering page 3 never touches page 1. New admin APIs always need a staff permission:
+
+```ts title="plugins/tasks/src/api/modules/admin/tasks/routes/reorder.route.ts"
+import { z } from '@hono/zod-openapi'
+import { buildRoute } from '@vitnode/core/api/lib/route'
+import { eq, inArray } from 'drizzle-orm'
+
+import { CONFIG_PLUGIN } from '@/const'
+import { tasks } from '@/database/tasks'
+
+const zodReorderTasksSchema = z.object({
+  ids: z.array(z.number().int()).min(1).max(100),
+})
+
+export const reorderTasksRoute = buildRoute({
+  pluginId: CONFIG_PLUGIN.pluginId,
+  // [!code ++]
+  adminStaffPermission: { module: 'tasks', permission: 'can_reorder' },
+  route: {
+    method: 'post',
+    path: '/reorder',
+    description: 'Save the order of one page of tasks (Admin only)',
+    request: {
+      body: {
+        required: true,
+        content: { 'application/json': { schema: zodReorderTasksSchema } },
+      },
+    },
+    responses: {
+      200: { description: 'Tasks reordered' },
+      400: {
+        content: {
+          'application/json': { schema: z.object({ error: z.string() }) },
+        },
+        description: 'The ids are duplicated or unknown',
+      },
+      403: { description: 'Access Denied' },
+    },
+  },
+  handler: async (c) => {
+    const { ids } = c.req.valid('json')
+    const db = c.get('db')
+
+    if (new Set(ids).size !== ids.length) {
+      return c.json({ error: 'A task appears twice in the new order' }, 400)
+    }
+
+    const current = await db
+      .select({ id: tasks.id, position: tasks.position })
+      .from(tasks)
+      .where(inArray(tasks.id, ids))
+
+    if (current.length !== ids.length) {
+      return c.json({ error: 'The new order names an unknown task' }, 400)
+    }
+
+    const slots = current.map((row) => row.position).sort((a, b) => a - b)
+
+    // [!code ++:8]
+    await db.transaction(async (tx) => {
+      for (const [index, id] of ids.entries()) {
+        await tx
+          .update(tasks)
+          .set({ position: slots[index] })
+          .where(eq(tasks.id, id))
+      }
+    })
+
+    return c.body(null, 200)
+  },
+})
+```
+
+Register the route in its module and declare the permission in the plugin's API config:
+
+```ts title="plugins/tasks/src/config.api.ts"
+export const tasksApiPlugin = () =>
+  buildApiPlugin({
+    pluginId: CONFIG_PLUGIN.pluginId,
+    // [!code ++:8]
+    permissionStaff: {
+      admin: {
+        tasks: [
+          'can_view',
+          { permission: 'can_reorder', dependsOn: ['can_view'] },
+        ],
+      },
+    },
+    modules: [adminModule],
+  })
+```
+
+<Callout type="info" title="Give new rows a position">
+  Rows that all share `position: 0` sort unpredictably. When you insert a task,
+  set its `position` to the current maximum plus one.
+</Callout>
+
+</Step>
+<Step>
+
+#### Call it from `onReorder`
+
+Throwing from `onReorder` is all the table needs to roll back and show its error toast. On success, invalidate the list so every other view of it catches up:
+
+```tsx title="plugins/tasks/src/views/admin/tasks-table.tsx"
+import { useQueryClient } from '@tanstack/react-query'
+import { DataTable } from '@vitnode/core/components/table/data-table'
+import { fetcher } from '@vitnode/core/tanstack/fetcher'
+
+import { tasksQueryKey } from './tasks-query'
+
+export const TasksTable = ({ data }: { data: TasksPage }) => {
+  const queryClient = useQueryClient()
+
+  return (
+    <DataTable
+      id="tasks-table"
+      columns={columns}
+      edges={data.edges}
+      pageInfo={data.pageInfo}
+      order={{ defaultOrder: { column: 'position', order: 'asc' } }}
+      reorderable={{
+        getRowLabel: (task) => task.title,
+        onReorder: async (ids) => {
+          // [!code ++:7]
+          const res = await fetcher({
+            plugin: '@acme/tasks',
+            method: 'post',
+            module: 'admin/tasks',
+            path: '/reorder',
+            args: { body: { ids } },
+          })
+
+          if (!res.ok) {
+            throw new Error('Saving the order failed')
+          }
+
+          // [!code ++]
+          await queryClient.invalidateQueries({ queryKey: tasksQueryKey })
+        },
+      }}
+    />
+  )
+}
+```
+
+</Step>
+</Steps>
diff --git a/apps/web/content/docs/ui/data-table/expandable-rows.mdx b/apps/web/content/docs/ui/data-table/expandable-rows.mdx
new file mode 100644
index 000000000..681208751
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/expandable-rows.mdx
@@ -0,0 +1,73 @@
+---
+title: Expandable Rows
+description: Rows that open a detail panel underneath, sliding smoothly open and closed.
+icon: UnfoldVertical
+---
+
+## Preview
+
+<Preview name="data-table-expandable" withoutBackground />
+
+## Usage
+
+Some rows have more to say than a cell can hold - an order's line items, a job's error log, a user's last logins. Pass `expandable` and every row grows a chevron that slides a detail panel open right underneath it. No modal, no new page, no losing your place.
+
+```tsx
+<DataTable
+  id="orders-table"
+  // [!code ++]
+  expandable={{
+    // [!code ++]
+    render: (order) => <OrderDetail order={order} />,
+    // [!code ++]
+    canExpand: (order) => order.items.length > 0,
+    // [!code ++]
+  }}
+  columns={columns}
+  edges={data.edges}
+  pageInfo={data.pageInfo}
+  order={{
+    defaultOrder: {
+      column: 'number',
+      order: 'asc',
+    },
+  }}
+/>
+```
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    render: {
+      description:
+        'Renders the detail panel for one row. It only runs while that row is open, so it is a fine place for something heavier than a cell.',
+      required: true,
+      type: '(row: T) => ReactNode',
+    },
+    canExpand: {
+      description:
+        'Return false to give a row no chevron - for example an order with nothing in it. Every row can expand when omitted.',
+      required: false,
+      type: '(row: T) => boolean',
+    },
+    defaultExpanded: {
+      description: 'Row ids that start open on the first render.',
+      required: false,
+      type: 'number[]',
+    },
+  }}
+/>
+
+A few things the table handles for you:
+
+- **Several rows can be open at once.** Open state lives in the component, not the URL, and it is dropped for rows that leave the page when you paginate, search or filter.
+- **It is a real button.** The chevron is a `<button>` with `aria-expanded` and `aria-controls`, so Enter and Space work and screen readers announce "Expand row" / "Collapse row". Row clicks from `rowOpens` keep working, because a click on a button never counts as a row click.
+- **It plays nice with `bulkActions`.** The chevron column sits right after the selection checkbox.
+- **The motion is polite.** The panel eases its height and opacity open in about 300 ms, and with "reduce motion" turned on it simply fades - no sliding around.
+
+<Callout type="info" title="Keep the panel light on data">
+  `render` runs on the client as soon as a row opens. If the detail needs data
+  the list did not fetch, fetch it inside the panel component (TanStack Query
+  caches it), so collapsing and re-opening a row is instant.
+</Callout>
diff --git a/apps/web/content/docs/ui/data-table/filters.mdx b/apps/web/content/docs/ui/data-table/filters.mdx
new file mode 100644
index 000000000..fb5d6e699
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/filters.mdx
@@ -0,0 +1,153 @@
+---
+title: Filters
+description: Faceted multi-select filters above the table, with static or async options from your API.
+icon: ListFilter
+---
+
+## Preview
+
+<Preview name="data-table-filters" withoutBackground />
+
+## Usage
+
+Pass the `filters` prop to render one or more faceted, multi-select dropdowns above the table (next to the search input). Each filter controls its own URL query parameter, so it works out of the box with server-side data fetching. Multiple selected values are stored as a comma-separated list, e.g. `?roleId=1,3`, and changing a filter returns you to the first page.
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    id: {
+      description: 'The URL query parameter this filter reads and writes.',
+      required: true,
+      type: 'string',
+    },
+    label: {
+      description:
+        'Text shown on the filter trigger and as the search placeholder.',
+      required: true,
+      type: 'string',
+    },
+    options: {
+      description:
+        'Static options, filtered on the client. `label` can be any node; provide `keywords` so typing can search a node-based label.',
+      required: false,
+      type: `{
+        value: string;
+        label: ReactNode;
+        keywords?: string[];
+      }[]`,
+    },
+    onSearch: {
+      description:
+        'Async source called (debounced) as the user types. The API is expected to return results already filtered and capped (e.g. 20 per request).',
+      required: false,
+      type: '(search: string) => Promise<Option[]>',
+    },
+  }}
+/>
+
+## Static filters
+
+When the set of options is small and known ahead of time, pass them directly via `options`. The dropdown list is filtered on the client.
+
+```tsx
+<DataTable
+  id="users-table"
+  // [!code ++]
+  filters={[
+    // [!code ++]
+    {
+      // [!code ++]
+      id: 'status',
+      // [!code ++]
+      label: 'Status',
+      // [!code ++]
+      options: [
+        // [!code ++]
+        { value: 'active', label: 'Active' },
+        // [!code ++]
+        { value: 'banned', label: 'Banned' },
+        // [!code ++]
+      ],
+      // [!code ++]
+    },
+    // [!code ++]
+  ]}
+  columns={[
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'email', header: 'Email' },
+  ]}
+  edges={data.edges}
+  pageInfo={data.pageInfo}
+  order={{
+    defaultOrder: {
+      column: 'name',
+      order: 'asc',
+    },
+  }}
+/>
+```
+
+## Async filters
+
+When the options come from the API (for example a large or searchable list), provide an `onSearch` callback instead of `options`. It runs - debounced - as the user types and should return results already filtered and capped by the server. The universal fetcher answers from the browser here, with the visitor's own cookies:
+
+```tsx title="search-roles.tsx"
+import type { FilterOption } from '@vitnode/core/components/table/filters'
+
+import { RoleFormat } from '@vitnode/core/components/role-format'
+import { fetcher } from '@vitnode/core/tanstack/fetcher'
+
+export const searchRoles = async (search: string): Promise<FilterOption[]> => {
+  const res = await fetcher({
+    plugin: '@vitnode/core',
+    path: '/list',
+    method: 'get',
+    module: 'admin/roles',
+    args: {
+      query: { search, first: '20' },
+    },
+    withPagination: true,
+  })
+
+  if (res.status !== 200) {
+    return []
+  }
+
+  const data = await res.json()
+
+  return data.edges.map((role) => ({
+    value: String(role.id),
+    label: <RoleFormat role={role} />,
+    keywords: role.name.map((item) => item.name),
+  }))
+}
+```
+
+```tsx
+filters={[
+  {
+    id: "roleId",
+    label: "Group",
+    // [!code ++]
+    onSearch: searchRoles,
+  },
+]}
+```
+
+<Callout type="info" title="Configure the API route">
+  A filter only writes its values to the URL - the backend must read the query
+  parameter and apply the matching `where` clause. For a comma-separated
+  multi-select, split the value and use `inArray`:
+
+```ts
+const roleIds = (query.roleId?.split(",") ?? [])
+  .filter(Boolean)
+  .map(Number)
+  .filter((id) => !Number.isNaN(id));
+
+// pass to withPagination:
+where: roleIds.length ? inArray(core_users.roleId, roleIds) : undefined,
+```
+
+</Callout>
diff --git a/apps/web/content/docs/ui/data-table/index.mdx b/apps/web/content/docs/ui/data-table/index.mdx
new file mode 100644
index 000000000..5a67fd3c9
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/index.mdx
@@ -0,0 +1,321 @@
+---
+title: Data Table
+description: A table component with sorting, filtering, and pagination compatible with VitNode API.
+icon: Table
+---
+
+## Preview
+
+<Preview name="data-table" withoutBackground />
+
+## Usage
+
+```ts
+import {
+  type ColumnDef,
+  DataTable,
+} from '@vitnode/core/components/table/data-table'
+```
+
+Columns are typed with `ColumnDef<T>`, where `T` is the shape of a single row. An **accessor column** binds to the data through `accessorKey`, which is type-safe - it only accepts a `keyof T`, just like TanStack Table. A **display column** (for actions, selection, etc.) has no `accessorKey` and instead requires a string `id`.
+
+```tsx
+const columns: ColumnDef<User>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'role', header: 'Role' },
+  { accessorKey: 'status', header: 'Status', align: 'center' },
+  {
+    id: 'actions',
+    header: '',
+    align: 'right',
+    cell: () => (
+      <Button size="sm" variant="outline">
+        Edit
+      </Button>
+    ),
+  },
+]
+
+;<DataTable
+  id="users-table"
+  columns={columns}
+  edges={data.edges}
+  pageInfo={data.pageInfo}
+  order={{
+    defaultOrder: {
+      column: 'name',
+      order: 'asc',
+    },
+  }}
+/>
+```
+
+<Callout type="info" title="Type-safe columns">
+  `accessorKey` autocompletes and is checked against the row type `T` - passing
+  a key that doesn't exist on `T` is a compile-time error. Use `id` (a plain
+  `string`) for display columns that aren't backed by a data field.
+</Callout>
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    columns: {
+      description:
+        'Array of column definitions. Accessor columns bind to data via a type-safe accessorKey (keyof T); display columns (e.g. actions) use a string id instead.',
+      required: true,
+      type: `ColumnDef<T>[] where ColumnDef<T> is:
+        // accessor column
+        {
+          accessorKey: keyof T;
+          header: ReactNode;
+          id?: string;
+          align?: 'left' | 'center' | 'right';
+          className?: string;
+          cell?: (props: { row: T; allData: T[] }) => ReactNode;
+        }
+        // or display column
+        {
+          id: string;
+          header: ReactNode;
+          align?: 'left' | 'center' | 'right';
+          className?: string;
+          cell?: (props: { row: T; allData: T[] }) => ReactNode;
+        }`,
+    },
+    edges: {
+      description: 'Data to be displayed in the table',
+      required: true,
+      type: 'Array',
+    },
+    order: {
+      description: 'Column sorting configuration',
+      required: true,
+      type: `{
+        columns?: string[];
+        defaultOrder: {
+          column: string;
+          order: 'asc' | 'desc';
+        };
+      }`,
+    },
+    pageInfo: {
+      description:
+        'Pagination information from the API. Pass it straight through — the table renders numbered pages and a "Showing 21–30 of 380" range from it.',
+      required: true,
+      type: `{
+        count: number;
+        totalCount: number;
+        totalPages: number;
+        currentPage: number | null;
+        hasNextPage: boolean;
+        hasPreviousPage: boolean;
+        startCursor: string | null;
+        endCursor: string | null;
+      }`,
+    },
+    search: {
+      description:
+        'Renders a search input above the table. Requires the API route to define the searchable columns.',
+      required: false,
+      type: 'boolean',
+    },
+    searchPlaceholder: {
+      description: 'Custom placeholder text for the search input',
+      required: false,
+      type: 'string',
+    },
+    bulkActions: {
+      description:
+        'Actions for the rows a person ticked, rendered in a bar that floats at the bottom centre of the viewport. Passing this turns row selection on: the table grows a leading checkbox column, and the nodes here read the ticked ids with useDataTableSelection().',
+      required: false,
+      type: 'ReactNode',
+    },
+    expandable: {
+      description:
+        'Turns on expandable rows: a chevron column that opens a detail panel under its row. See Expandable rows below.',
+      required: false,
+      type: `{
+        render: (row: T) => ReactNode;
+        canExpand?: (row: T) => boolean;
+        defaultExpanded?: number[];
+      }`,
+    },
+    reorderable: {
+      description:
+        'Turns on drag-and-drop row ordering with a grip handle per row. See Draggable rows below.',
+      required: false,
+      type: `{
+        onReorder: (ids: number[], details: {
+          activeId: number;
+          overId: number;
+          from: number;
+          to: number;
+        }) => void | Promise<void>;
+        getRowLabel?: (row: T) => string;
+        disabled?: boolean;
+      }`,
+    },
+    filters: {
+      description:
+        'Renders one or more faceted multi-select dropdowns above the table. Each filter controls its own URL query parameter.',
+      required: false,
+      type: `{
+        id: string;
+        label: string;
+        options?: {
+          value: string;
+          label: ReactNode;
+          keywords?: string[];
+        }[];
+        onSearch?: (search: string) => Promise<{
+          value: string;
+          label: ReactNode;
+          keywords?: string[];
+        }[]>;
+      }[]`,
+    },
+  }}
+/>
+
+## Cell Renderer
+
+You can customize how each cell is rendered using the `cell` property. The renderer function receives the current row data and all table data as parameters.
+
+```tsx
+<DataTable
+  id="users-table"
+  columns={[
+    {
+      accessorKey: 'id',
+      header: 'Id',
+      // [!code ++]
+      cell: ({ row, allData }) => (
+        // [!code ++]
+        <span>
+          // [!code ++]
+          {row.id} - all data {allData.length}
+          // [!code ++]
+        </span>
+        // [!code ++]
+      ),
+    },
+    { accessorKey: 'createdAt', header: 'Created at' },
+  ]}
+  edges={data.edges}
+  pageInfo={data.pageInfo}
+  order={{
+    columns: ['createdAt', 'id'],
+    defaultOrder: {
+      order: 'desc',
+    },
+  }}
+/>
+```
+
+### Order Configuration
+
+If you want to enable sorting on specific columns, you can specify them in the `columns` property.
+
+```tsx
+order={{
+  // [!code ++]
+  columns: ['createdAt', 'id', 'name'],
+  defaultOrder: {
+    column: 'createdAt',
+    order: 'desc',
+  }
+}}
+```
+
+## Column Alignment
+
+Use the `align` property to control the horizontal alignment of a column's header and cells. It accepts `"left"` (default), `"center"`, or `"right"`. This is handy for numeric values and action buttons.
+
+```tsx
+columns={[
+  { accessorKey: "name", header: "Name" },
+  // [!code ++]
+  { accessorKey: "status", header: "Status", align: "center" },
+  {
+    id: "actions",
+    header: "",
+    // [!code ++]
+    align: "right",
+    cell: ({ row }) => <RowActions id={row.id} />,
+  },
+]}
+```
+
+## Features
+
+Each feature has its own page with a live preview:
+
+- [Search](/docs/ui/data-table/search) - a debounced search box that writes to the URL.
+- [Filters](/docs/ui/data-table/filters) - faceted multi-select filters, static or async.
+- [Pagination](/docs/ui/data-table/pagination) - numbered pages and a rows-per-page select.
+- [Bulk Actions](/docs/ui/data-table/bulk-actions) - select rows and act on all of them at once.
+- [Expandable Rows](/docs/ui/data-table/expandable-rows) - a detail panel under each row.
+- [Draggable Rows](/docs/ui/data-table/draggable-rows) - reorder rows and save the order on your backend.
+
+## Complete Example
+
+Here's a complete example showing how to use the `DataTable` component in a page:
+
+```tsx
+import {
+  DataTable,
+  SearchParamsDataTable,
+} from '@vitnode/core/components/table/data-table'
+import { fetcher } from '@vitnode/core/tanstack/fetcher'
+
+export const UsersView = async ({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParamsDataTable>
+}) => {
+  const query = await searchParams
+  const res = await fetcher({
+    plugin: '@vitnode/core',
+    path: '/list',
+    method: 'get',
+    module: 'admin/users',
+    args: {
+      query,
+    },
+    withPagination: true,
+  })
+  const data = await res.json()
+
+  return (
+    <DataTable
+      id="users-table"
+      columns={[
+        {
+          accessorKey: 'id',
+          header: 'ID',
+        },
+        {
+          accessorKey: 'username',
+          header: 'Username',
+          cell: ({ row }) => (
+            <span className="font-medium">{row.username}</span>
+          ),
+        },
+        { accessorKey: 'email', header: 'Email' },
+        { accessorKey: 'createdAt', header: 'Created at' },
+      ]}
+      edges={data.edges}
+      order={{
+        columns: ['id', 'username', 'email', 'createdAt'],
+        defaultOrder: {
+          column: 'createdAt',
+          order: 'desc',
+        },
+      }}
+      pageInfo={data.pageInfo}
+    />
+  )
+}
+```
diff --git a/apps/web/content/docs/ui/data-table/meta.json b/apps/web/content/docs/ui/data-table/meta.json
new file mode 100644
index 000000000..37a2436d1
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/meta.json
@@ -0,0 +1,13 @@
+{
+  "title": "Data Table",
+  "icon": "Table",
+  "pages": [
+    "index",
+    "search",
+    "filters",
+    "pagination",
+    "bulk-actions",
+    "expandable-rows",
+    "draggable-rows"
+  ]
+}
diff --git a/apps/web/content/docs/ui/data-table/pagination.mdx b/apps/web/content/docs/ui/data-table/pagination.mdx
new file mode 100644
index 000000000..dcb54843c
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/pagination.mdx
@@ -0,0 +1,31 @@
+---
+title: Pagination
+description: Numbered pages, a rows-per-page select and a "Showing 21–30 of 380" range - all from pageInfo.
+icon: BookCopy
+---
+
+## Preview
+
+<Preview name="data-table-pagination" withoutBackground />
+
+## Usage
+
+The table renders its own pager from `pageInfo` — numbered pages with a first/last
+anchor and an ellipsis in between, a rows-per-page select, and a
+"Showing 21–30 of 380" range. You wire up nothing: pass `pageInfo` through and it
+appears.
+
+Each page is a real link (`?page=3`), so middle-click and "open in new tab" work,
+while a plain click stays a client-side navigation. On phones the numbers collapse
+to a "Page 3 of 38" label between the arrows, because forty tap targets do not fit
+on a 390px screen.
+
+Two details worth knowing:
+
+- **Changing the page size or a filter returns you to page one.** A filter changes
+  which rows exist, so the page you were on no longer means what it meant.
+- **A page past the end lands on the last page**, not on an empty table. Stale
+  links and hand-typed numbers stay useful.
+
+The API does the counting. See [Pagination](/docs/dev/database/pagination) for the
+route side, including the index your ordered column needs.
diff --git a/apps/web/content/docs/ui/data-table/search.mdx b/apps/web/content/docs/ui/data-table/search.mdx
new file mode 100644
index 000000000..510e3fe14
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/search.mdx
@@ -0,0 +1,42 @@
+---
+title: Search
+description: Let people search the table - the term lives in the URL, so the API does the heavy lifting.
+icon: TextSearch
+---
+
+## Preview
+
+<Preview name="data-table-search" withoutBackground />
+
+## Usage
+
+Set the `search` prop to `true` to render a search input above the table. You can optionally customize the placeholder with `searchPlaceholder`.
+
+```tsx
+<DataTable
+  id="users-table"
+  // [!code ++]
+  search
+  // [!code ++]
+  searchPlaceholder="Search users..."
+  columns={[
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'email', header: 'Email' },
+  ]}
+  edges={data.edges}
+  pageInfo={data.pageInfo}
+  order={{
+    defaultOrder: {
+      column: 'name',
+      order: 'asc',
+    },
+  }}
+/>
+```
+
+The input writes the term to the `?search=` query parameter (debounced) and reloads the page, so it works out of the box with server-side data fetching. The columns that are actually searched are defined on the API route.
+
+<Callout type="info" title="Configure the API route">
+  Enabling `search` only renders the input. You must also tell the backend which
+  columns to search across - see the [Search](/docs/dev/database/search) guide.
+</Callout>
diff --git a/apps/web/content/docs/ui/dialog.mdx b/apps/web/content/docs/ui/dialog.mdx
index 810d3cbd5..a0bf34b91 100644
--- a/apps/web/content/docs/ui/dialog.mdx
+++ b/apps/web/content/docs/ui/dialog.mdx
@@ -1,6 +1,7 @@
 ---
 title: Dialog
 description: Display content in a modal dialog.
+icon: AppWindow
 ---
 
 ## Preview
@@ -25,23 +26,32 @@ import {
 
 ```tsx
 <Dialog>
-  <DialogTrigger render={<Button variant="outline">Open</Button>} />
+  <DialogTrigger render={<Button variant="outline">Share</Button>} />
   <DialogContent>
     <DialogHeader>
-      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogTitle>Share this page</DialogTitle>
       <DialogDescription>
-        This action cannot be undone. This will permanently delete your account
-        and remove your data from our servers.
+        Anyone with the link can read it - no account needed.
       </DialogDescription>
     </DialogHeader>
+    <div className="flex items-center gap-2">
+      <Input aria-label="Page link" readOnly value={link} />
+      <CopyButton aria-label="Copy link" content={link} />
+    </div>
     <DialogFooter>
-      <DialogClose render={<Button variant="outline">Cancel</Button>} />
-      <Button variant="destructive">Yes, delete account</Button>
+      <DialogClose render={<Button>Done</Button>} />
     </DialogFooter>
   </DialogContent>
 </Dialog>
 ```
 
+## Dialog or Alert Dialog?
+
+Use a Dialog for friendly, low-stakes tasks - sharing, quick edits, previews.
+Asking someone to confirm something they can't undo? Reach for the
+[Alert Dialog](/docs/ui/alert-dialog) instead: it can't be dismissed by clicking
+outside, so nobody deletes anything by accident.
+
 ## API Reference
 
 [Base UI - Dialog](https://base-ui.com/react/components/dialog#api-reference)
diff --git a/apps/web/content/docs/ui/drawer.mdx b/apps/web/content/docs/ui/drawer.mdx
index d31e8c9f0..9b37fb2ab 100644
--- a/apps/web/content/docs/ui/drawer.mdx
+++ b/apps/web/content/docs/ui/drawer.mdx
@@ -1,6 +1,7 @@
 ---
 title: Drawer
 description: A component for displaying content in a sliding panel.
+icon: PanelBottom
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/dropdown-menu.mdx b/apps/web/content/docs/ui/dropdown-menu.mdx
index 1120a29ef..b0c41d817 100644
--- a/apps/web/content/docs/ui/dropdown-menu.mdx
+++ b/apps/web/content/docs/ui/dropdown-menu.mdx
@@ -1,6 +1,7 @@
 ---
 title: Dropdown Menu
 description: A dropdown menu component for building interactive menus in your application.
+icon: EllipsisVertical
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/editor.mdx b/apps/web/content/docs/ui/editor.mdx
index 3b3ca9e85..62453a8e0 100644
--- a/apps/web/content/docs/ui/editor.mdx
+++ b/apps/web/content/docs/ui/editor.mdx
@@ -1,6 +1,7 @@
 ---
 title: Editor
 description: Rich text editor built on TipTap for editing and rendering HTML content.
+icon: PenLine
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/emoji-icon-picker.mdx b/apps/web/content/docs/ui/emoji-icon-picker.mdx
index 501f9014b..4fb53ea0d 100644
--- a/apps/web/content/docs/ui/emoji-icon-picker.mdx
+++ b/apps/web/content/docs/ui/emoji-icon-picker.mdx
@@ -1,6 +1,7 @@
 ---
 title: Emoji & Icon Picker
 description: One picker with segmented emoji and icon modes that returns a discriminated value you can store in a single column.
+icon: FaceSlightlySmiling
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/empty.mdx b/apps/web/content/docs/ui/empty.mdx
new file mode 100644
index 000000000..d4fd01485
--- /dev/null
+++ b/apps/web/content/docs/ui/empty.mdx
@@ -0,0 +1,186 @@
+---
+title: Empty
+description: Friendly empty states for lists, tables and searches that have nothing to show yet - with an icon, a clear message and a next step.
+icon: PackageOpen
+---
+
+## Preview
+
+<Preview name="empty" />
+
+## Usage
+
+```ts
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+```
+
+```tsx
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon">
+      <FolderCode />
+    </EmptyMedia>
+    <EmptyTitle>No projects yet</EmptyTitle>
+    <EmptyDescription>
+      You haven't created any projects yet. Start a fresh one or import an
+      existing repository.
+    </EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>Create project</Button>
+  </EmptyContent>
+</Empty>
+```
+
+Reach for `Empty` whenever a screen would otherwise show... nothing. A blank
+table, a fresh dashboard, a search with zero hits. The AdminCP uses it for an
+empty dashboard (with an "Edit" button to add widgets) and for navigation lists
+that have no items yet.
+
+## Anatomy
+
+- `Empty` - the centered wrapper. It grows to fill its parent (`flex-1`).
+- `EmptyHeader` - groups the media, title and description.
+- `EmptyMedia` - an icon, avatar or small illustration.
+- `EmptyTitle` - one short line that says what's missing.
+- `EmptyDescription` - why it's empty and what to do about it. Links inside it
+  are underlined automatically.
+- `EmptyContent` - actions, a search box or anything else the user can act on.
+
+## Media
+
+`EmptyMedia` has two variants. `icon` wraps the icon in a soft muted tile and
+sizes it for you. `default` adds no styling, so it's the one for avatars and
+illustrations.
+
+```tsx
+<EmptyMedia variant="icon">
+  <Inbox />
+</EmptyMedia>
+```
+
+<Preview name="empty-avatar" />
+
+```tsx
+<EmptyMedia>
+  <Avatar size="lg">
+    <AvatarImage alt="" src={user.avatar} />
+    <AvatarFallback>AL</AvatarFallback>
+  </Avatar>
+</EmptyMedia>
+```
+
+## Outline
+
+`Empty` already has a dashed border style - it just needs a width. Add `border`
+for a drop-zone look, or `border-2` when it sits alone on a page, like the
+AdminCP dashboard.
+
+<Preview name="empty-outline" />
+
+```tsx
+<Empty className="border">...</Empty>
+```
+
+## No results
+
+A search that finds nothing deserves its own empty state - not the same one as
+"you have no data". Echo the query back and offer a way out, like clearing the
+search.
+
+<Preview name="empty-search" />
+
+```tsx
+{results.length === 0 ? (
+  <Empty className="border p-6 md:p-8">
+    <EmptyHeader>
+      <EmptyMedia variant="icon">
+        <SearchX />
+      </EmptyMedia>
+      <EmptyTitle>No integrations found</EmptyTitle>
+      <EmptyDescription>
+        Nothing matches "{query}". Check the spelling or try a shorter search.
+      </EmptyDescription>
+    </EmptyHeader>
+    <EmptyContent>
+      <Button onClick={() => setQuery('')} size="sm" variant="outline">
+        Clear search
+      </Button>
+    </EmptyContent>
+  </Empty>
+) : (
+  <ResultsList results={results} />
+)}
+```
+
+## Inside a card or sidebar
+
+The default `p-12` is generous on purpose. On phones, `p-6 md:p-12` gives the
+copy room to breathe. In tight spots - a card, a sidebar, a popover - shrink the
+padding and the text:
+
+```tsx
+<Empty className="p-6">
+  <EmptyHeader>
+    <EmptyTitle className="text-sm">No widgets yet</EmptyTitle>
+    <EmptyDescription className="text-xs">
+      Widgets from your plugins will show up here.
+    </EmptyDescription>
+  </EmptyHeader>
+</Empty>
+```
+
+## Writing good empty states
+
+An empty state is a tiny piece of onboarding, so make every word count:
+
+- **Say what's missing.** "No projects yet" beats "Nothing here".
+- **Say why.** Is it brand new, filtered out, or did the search miss?
+- **Give the next step.** One primary action, and maybe a secondary one. If the
+  user can't do anything about it, a clear description is enough.
+- **Keep it short.** One title line, one or two sentences. Nobody reads an essay
+  about an empty table.
+- **Skip the blame.** "No results for 'xylphone'" is fine. "You typed it wrong"
+  is not.
+
+## Accessibility
+
+- `EmptyTitle` renders a `div`. If the empty state replaces a whole page
+  section, give the title a heading role so it shows up in the outline:
+  `<EmptyTitle aria-level={2} role="heading">`.
+- Icons in `EmptyMedia` are decorative - the title already says it all. Use
+  `alt=""` on avatar images for the same reason.
+- When results change while the user types, announce the count in a
+  `role="status"` region (a `sr-only` paragraph works great) so screen reader
+  users know the list just went empty.
+- Use real `Button`s for actions, so they're reachable by keyboard.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+All parts accept the regular `div` props, including `className`.
+
+### EmptyMedia
+
+<TypeTable
+  type={{
+    variant: {
+      description:
+        '`icon` wraps the child in a muted tile and sizes the icon. `default` renders it as is.',
+      type: 'default | icon',
+      default: 'default',
+    },
+  }}
+/>
+
+## API Reference
+
+[shadcn/ui - Empty](https://ui.shadcn.com/docs/components/base/empty)
diff --git a/apps/web/content/docs/ui/field.mdx b/apps/web/content/docs/ui/field.mdx
new file mode 100644
index 000000000..20d082a12
--- /dev/null
+++ b/apps/web/content/docs/ui/field.mdx
@@ -0,0 +1,294 @@
+---
+title: Field
+description: Layout primitives for labels, descriptions, errors and groups of controls - the building blocks behind every AutoForm field.
+icon: ListChecks
+---
+
+## Preview
+
+<Preview name="field" />
+
+## Usage
+
+```ts
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from '@vitnode/core/components/ui/field'
+```
+
+```tsx
+<Field>
+  <FieldLabel htmlFor="username">Username</FieldLabel>
+  <Input id="username" />
+  <FieldDescription>Pick something your friends can type.</FieldDescription>
+</Field>
+```
+
+## Should I use this for my form?
+
+Probably not directly. In VitNode, forms are built with
+[AutoForm](/docs/ui/auto-form), and AutoForm already lays every field out with
+these primitives - labels, descriptions and error messages included. You get
+validation, ids and ARIA wiring for free.
+
+Reach for `Field` when you are:
+
+- writing a [custom AutoForm field](#inside-a-custom-autoform-field), so it
+  looks like its built-in neighbours,
+- building a settings-style screen with controls that save instantly or are not
+  part of a form at all (toggles, filters, preferences).
+
+## Anatomy
+
+| Component          | What it does                                                                           |
+| ------------------ | -------------------------------------------------------------------------------------- |
+| `FieldSet`         | A semantic `<fieldset>` that groups related fields.                                    |
+| `FieldLegend`      | The `<legend>` of a `FieldSet`. Use `variant="label"` for a smaller, label-sized title. |
+| `FieldGroup`       | Stacks fields with consistent spacing and enables the `responsive` orientation.       |
+| `Field`            | One control with its label, description and error.                                     |
+| `FieldContent`     | Keeps the label and description together next to a control.                            |
+| `FieldLabel`       | The `<label>` of a control. Wrap a `Field` in it to make a choice card.                |
+| `FieldTitle`       | A label-looking title for content that is already inside a `FieldLabel`.              |
+| `FieldDescription` | Helper text in a muted colour.                                                         |
+| `FieldError`       | An error message announced to screen readers.                                          |
+| `FieldSeparator`   | A divider between fields, optionally with text in the middle.                          |
+
+## Orientation
+
+`Field` stacks everything vertically by default. Switch it to `horizontal` for
+checkboxes, switches and other compact controls that sit next to their label:
+
+```tsx
+<Field orientation="horizontal">
+  <FieldContent>
+    <FieldLabel htmlFor="digest">Weekly digest</FieldLabel>
+    <FieldDescription>A short recap, every Monday.</FieldDescription>
+  </FieldContent>
+  <Switch id="digest" />
+</Field>
+```
+
+Put the control first for a checkbox on the left, or last for a switch on the
+right - the layout follows the markup.
+
+### Responsive
+
+`responsive` is vertical on narrow screens and horizontal once its
+`FieldGroup` is wide enough. It uses a container query, so it reacts to the
+space the group has, not to the whole window. Resize your browser to watch it
+fold:
+
+<Preview name="field-responsive" />
+
+```tsx
+<FieldGroup>
+  <Field orientation="responsive">
+    <FieldContent>
+      <FieldLabel htmlFor="name">Display name</FieldLabel>
+      <FieldDescription>Shown next to your posts.</FieldDescription>
+    </FieldContent>
+    <Input id="name" />
+  </Field>
+</FieldGroup>
+```
+
+## Fieldset and legend
+
+Wrap related fields in a `FieldSet` with a `FieldLegend`. Screen readers read
+the legend before each field inside, so "Mentions" becomes "Notifications,
+Mentions" - context without extra words on screen.
+
+```tsx
+<FieldSet>
+  <FieldLegend>Notifications</FieldLegend>
+  <FieldDescription>Pick how loudly we should knock on your door.</FieldDescription>
+  <FieldGroup>
+    <Field orientation="horizontal">
+      <Checkbox id="mentions" />
+      <FieldLabel htmlFor="mentions">Mentions</FieldLabel>
+    </Field>
+    <FieldSeparator />
+    <Field>
+      <FieldLabel htmlFor="backup-email">Backup email</FieldLabel>
+      <Input id="backup-email" type="email" />
+    </Field>
+  </FieldGroup>
+</FieldSet>
+```
+
+Need a divider with words? Pass children: `<FieldSeparator>or</FieldSeparator>`.
+
+## Choice cards
+
+Wrap a whole `Field` in a `FieldLabel` and the label becomes a card - the full
+card is clickable, it highlights when its control is checked, and it shows a
+focus ring when you tab into it. Use `FieldTitle` for the card's title, since
+it already lives inside a label.
+
+<Preview name="field-choice-card" />
+
+```tsx
+<RadioGroup defaultValue="team">
+  <FieldLabel htmlFor="plan-team">
+    <Field orientation="horizontal">
+      <FieldContent>
+        <FieldTitle>Team</FieldTitle>
+        <FieldDescription>Shared workspaces for up to 20 people.</FieldDescription>
+      </FieldContent>
+      <RadioGroupItem id="plan-team" value="team" />
+    </Field>
+  </FieldLabel>
+</RadioGroup>
+```
+
+Add `data-disabled` to a `Field` to fade it out, and pass `disabled` to its
+control so it cannot be picked. AutoForm's
+[Radio Group](/docs/ui/radio-group) uses exactly this for `variant="blocks"`.
+
+## Errors
+
+Mark the field with `data-invalid` and the control with `aria-invalid`, then
+render a `FieldError`:
+
+```tsx
+<Field data-invalid={isInvalid}>
+  <FieldLabel htmlFor="email">Email</FieldLabel>
+  <Input aria-describedby="email-error" aria-invalid={isInvalid} id="email" />
+  {isInvalid && <FieldError id="email-error">That is not an email.</FieldError>}
+</Field>
+```
+
+`FieldError` also takes an `errors` array - duplicates are removed, a single
+message renders as text and several render as a list. It renders nothing when
+there is nothing to say.
+
+```tsx
+<FieldError errors={[{ message: 'Too short' }, { message: 'Too short' }]} />
+```
+
+## Inside a custom AutoForm field
+
+A custom AutoForm field is just a `component` function. Combine `Field` for the
+layout with AutoForm's own helpers and your field gets the same ids, ARIA and
+error handling as the built-in ones:
+
+- `AutoFormLabel` - a `FieldLabel` already pointed at the control, with the
+  "optional" hint.
+- `AutoFormDesc` - the description text.
+- `FormControl` - passes `id`, `aria-invalid` and `aria-describedby` to the
+  control inside it.
+- `FormMessage` - a `FieldError` showing the field's validation errors.
+
+```tsx
+import type { ItemAutoFormComponentProps } from '@vitnode/core/components/form/auto-form'
+import { AutoFormDesc } from '@vitnode/core/components/form/common/desc'
+import { AutoFormLabel } from '@vitnode/core/components/form/common/label'
+import { Field, FieldContent } from '@vitnode/core/components/ui/field'
+import { FormControl, FormMessage } from '@vitnode/core/components/ui/form'
+import { Switch } from '@vitnode/core/components/ui/switch'
+
+export const AutoFormSettingSwitch = ({
+  label,
+  description,
+  field,
+  otherProps: { isOptional },
+}: ItemAutoFormComponentProps) => (
+  <>
+    <Field orientation="horizontal">
+      <FieldContent>
+        {label && <AutoFormLabel isOptional={isOptional}>{label}</AutoFormLabel>}
+        {description && <AutoFormDesc>{description}</AutoFormDesc>}
+      </FieldContent>
+      <FormControl>
+        <Switch checked={field.value ?? false} onCheckedChange={field.onChange} />
+      </FormControl>
+    </Field>
+    <FormMessage />
+  </>
+)
+```
+
+```tsx
+<AutoForm
+  formSchema={z.object({ digest: z.boolean().default(true) })}
+  fields={[
+    {
+      id: 'digest',
+      component: props => (
+        <AutoFormSettingSwitch
+          {...props}
+          description="A short recap, every Monday."
+          label="Weekly digest"
+        />
+      ),
+    },
+  ]}
+/>
+```
+
+## Accessibility
+
+- Every control needs a label: give the control an `id` and the `FieldLabel` a
+  matching `htmlFor`. Clicking the label then focuses or toggles the control.
+- `Field` renders `role="group"`, so the control, its label and its help text
+  are announced together.
+- `FieldSet` and `FieldLegend` render a real `<fieldset>` and `<legend>`, the
+  native way to name a group of controls.
+- For errors, set `aria-invalid` on the control and point `aria-describedby` at
+  the description and the `FieldError`. `FieldError` has `role="alert"`, so new
+  messages are announced as they appear. AutoForm does all of this for you.
+- Choice cards keep the radio or checkbox inside them, so keyboard users can
+  tab in and use the arrow keys or Space as usual.
+
+## Props
+
+All components accept the props of the element they render. These are the
+extras:
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    'Field.orientation': {
+      description:
+        'How the control and its label are laid out. `responsive` follows the width of the parent `FieldGroup`.',
+      type: 'vertical | horizontal | responsive',
+      default: 'vertical',
+    },
+    'Field.data-invalid': {
+      description: 'Colours the field to signal an error.',
+      type: 'boolean',
+    },
+    'Field.data-disabled': {
+      description: 'Fades the field and its label.',
+      type: 'boolean',
+    },
+    'FieldLegend.variant': {
+      description: 'A section-sized `legend` or a smaller `label`-sized one.',
+      type: 'legend | label',
+      default: 'legend',
+    },
+    'FieldError.errors': {
+      description:
+        'Errors to show. Duplicates are removed; ignored when `children` is passed.',
+      type: '({ message?: string } | undefined)[]',
+    },
+    'FieldSeparator.children': {
+      description: 'Optional text shown in the middle of the divider.',
+      type: 'React.ReactNode',
+    },
+  }}
+/>
+
+## API Reference
+
+[shadcn/ui - Field](https://ui.shadcn.com/docs/components/base/field)
diff --git a/apps/web/content/docs/ui/hooks/use-before-unload.mdx b/apps/web/content/docs/ui/hooks/use-before-unload.mdx
index cc2d57c5d..a89c756f8 100644
--- a/apps/web/content/docs/ui/hooks/use-before-unload.mdx
+++ b/apps/web/content/docs/ui/hooks/use-before-unload.mdx
@@ -1,6 +1,7 @@
 ---
 title: useBeforeUnload
 description: A custom hook to handle the beforeunload event in React applications
+icon: DoorOpen
 ---
 
 ## Example
diff --git a/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx b/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
new file mode 100644
index 000000000..ca41daa73
--- /dev/null
+++ b/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
@@ -0,0 +1,98 @@
+---
+title: useIntersectionObserver
+description: Find out when an element scrolls into view - perfect for lazy loading, infinite feeds and "seen" tracking.
+icon: ScanEye
+---
+
+## Usage
+
+```ts
+import { useIntersectionObserver } from '@vitnode/core/hooks/use-intersection-observer'
+```
+
+```tsx
+export const ExampleComponent = () => {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const entry = useIntersectionObserver(ref, { threshold: 0.5 }) // [!code ++]
+
+  return (
+    <div ref={ref}>
+      {entry?.isIntersecting ? 'I can see you!' : 'Nobody is looking...'}
+    </div>
+  )
+}
+```
+
+The hook returns the latest
+[`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry),
+or `undefined` until the browser reports the first one. Besides
+`isIntersecting` you also get `intersectionRatio`, `boundingClientRect` and
+friends.
+
+## Load once, then stop watching
+
+Set `freezeOnceVisible` and the hook stops observing the first time the element
+shows up. Handy for lazy loading or a one-off entrance animation - no point
+paying for an observer that has nothing left to do.
+
+```tsx
+const entry = useIntersectionObserver(ref, {
+  freezeOnceVisible: true,
+  rootMargin: '200px',
+})
+
+return <div ref={ref}>{entry?.isIntersecting ? <HeavyChart /> : null}</div>
+```
+
+A positive `rootMargin` starts loading a little before the element is on
+screen, so people rarely catch it loading.
+
+## Inside a scroll container
+
+By default the hook watches the viewport. To watch a scrollable element
+instead, pass it as `root` - store it with a callback ref so the hook picks it
+up once it mounts:
+
+```tsx
+const [root, setRoot] = React.useState<HTMLDivElement | null>(null)
+const entry = useIntersectionObserver(targetRef, { root })
+
+return (
+  <div className="h-48 overflow-y-auto" ref={setRoot}>
+    ...
+  </div>
+)
+```
+
+## Options
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    threshold: {
+      description:
+        'How much of the element (0 to 1) has to be visible. Pass an array to get an update at each step.',
+      type: 'number | number[]',
+      default: '0',
+    },
+    rootMargin: {
+      description: 'Grows or shrinks the area that counts as visible, like CSS margin.',
+      type: 'string',
+      default: '"0%"',
+    },
+    root: {
+      description: 'The scroll container to watch. `null` means the viewport.',
+      type: 'Element | null',
+      default: 'null',
+    },
+    freezeOnceVisible: {
+      description: 'Stop observing after the element is visible for the first time.',
+      type: 'boolean',
+      default: 'false',
+    },
+  }}
+/>
+
+On the server, and in the rare browser without `IntersectionObserver`, the hook
+simply returns `undefined`.
diff --git a/apps/web/content/docs/ui/hooks/use-local-storage.mdx b/apps/web/content/docs/ui/hooks/use-local-storage.mdx
new file mode 100644
index 000000000..99a70e820
--- /dev/null
+++ b/apps/web/content/docs/ui/hooks/use-local-storage.mdx
@@ -0,0 +1,76 @@
+---
+title: useLocalStorage
+description: Like useState, but the value survives page reloads and stays in sync across tabs.
+icon: HardDrive
+---
+
+## Usage
+
+```ts
+import { useLocalStorage } from '@vitnode/core/hooks/use-local-storage'
+```
+
+```tsx
+export const ExampleComponent = () => {
+  const [name, setName] = useLocalStorage('name', '') // [!code ++]
+
+  return <input onChange={e => setName(e.target.value)} value={name} />
+}
+```
+
+It works just like `useState`: pass a key and a default value, get the value and
+a setter back. Values are saved as JSON, so numbers, booleans, arrays and plain
+objects all come back exactly as you stored them.
+
+## Update from the previous value
+
+The setter also takes a function, which always receives the freshest value:
+
+```ts
+const [count, setCount] = useLocalStorage('count', 0)
+
+setCount(previous => previous + 1)
+```
+
+## Reset
+
+The third item removes the key from storage, and the hook goes back to the
+default value:
+
+```ts
+const [filters, setFilters, resetFilters] = useLocalStorage('filters', [])
+```
+
+## Good to know
+
+- **Synced everywhere.** Every component using the same key updates together -
+  in this tab and in any other tab of your site.
+- **Server-safe.** During server rendering the hook returns the default value,
+  then switches to the stored one in the browser without a hydration mismatch.
+- **No crashes.** A broken stored value falls back to the default. When storage
+  is blocked (some private windows) or full, the value lives in memory for the
+  session instead.
+- **Only for nice-to-haves.** Local storage lives in one browser on one device.
+  Use it for things like a collapsed panel or a draft, never for data that has
+  to reach the server or other people.
+
+## Returns
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    '[0] value': {
+      description: 'The stored value, or the default when nothing is stored.',
+      type: 'T',
+    },
+    '[1] setValue': {
+      description: 'Saves a new value, or a function that gets the previous one.',
+      type: '(value: T | ((previous: T) => T)) => void',
+    },
+    '[2] removeValue': {
+      description: 'Removes the key and goes back to the default value.',
+      type: '() => void',
+    },
+  }}
+/>
diff --git a/apps/web/content/docs/ui/hooks/use-mobile.mdx b/apps/web/content/docs/ui/hooks/use-mobile.mdx
index 94f866bf2..600c1f6dd 100644
--- a/apps/web/content/docs/ui/hooks/use-mobile.mdx
+++ b/apps/web/content/docs/ui/hooks/use-mobile.mdx
@@ -1,6 +1,7 @@
 ---
 title: useMobile
 description: A custom hook to determine if the user is on a mobile device
+icon: Smartphone
 ---
 
 ## Example
diff --git a/apps/web/content/docs/ui/hover-card.mdx b/apps/web/content/docs/ui/hover-card.mdx
index 3ba044f21..8dccb795b 100644
--- a/apps/web/content/docs/ui/hover-card.mdx
+++ b/apps/web/content/docs/ui/hover-card.mdx
@@ -1,6 +1,7 @@
 ---
 title: Hover Card
 description: A component for displaying additional information on hover.
+icon: MousePointer2
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/image-zoom.mdx b/apps/web/content/docs/ui/image-zoom.mdx
new file mode 100644
index 000000000..17d3a950e
--- /dev/null
+++ b/apps/web/content/docs/ui/image-zoom.mdx
@@ -0,0 +1,88 @@
+---
+title: Image Zoom
+description: Click an image and it grows smoothly from its spot on the page to fill the screen.
+icon: ZoomIn
+---
+
+## Preview
+
+<Preview name="image-zoom" />
+
+## Usage
+
+```ts
+import { ImageZoom } from '@vitnode/core/components/ui/image-zoom'
+```
+
+```tsx
+<ImageZoom
+  alt="The VitNode AdminCP dashboard"
+  imageClassName="w-full rounded-md border"
+  src="/screenshots/dashboard.webp"
+/>
+```
+
+Click the image (or focus it and press <kbd>Enter</kbd>) and it glides from
+where it sits to the middle of the screen over a blurred backdrop. Click
+anywhere, press <kbd>Escape</kbd> or hit the × to send it back home.
+
+## Sharper zoom
+
+Show a light thumbnail on the page and load the big version only when someone
+zooms in:
+
+```tsx
+<ImageZoom
+  alt="The VitNode AdminCP dashboard"
+  src={thumbnail}
+  zoomSrc={fullSize}
+/>
+```
+
+## Styling
+
+- `className` styles the clickable wrapper - use it for layout and visibility
+  (`hidden dark:block` for theme-specific screenshots).
+- `imageClassName` styles the image on the page: size, border, rounded corners.
+
+The zoomed image always fits the screen without cropping.
+
+## Accessibility
+
+- The image is a real button, so it works with the keyboard and screen readers
+  announce that it opens a dialog.
+- `alt` is required - it labels the image on the page and names the zoomed view.
+- Focus is trapped while zoomed and returns to the image when you close it.
+- With reduced motion turned on, the image appears zoomed instantly instead of
+  gliding.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    src: {
+      description: 'The image shown on the page.',
+      type: 'string',
+      required: true,
+    },
+    alt: {
+      description: 'Describes the image, on the page and when zoomed.',
+      type: 'string',
+      required: true,
+    },
+    zoomSrc: {
+      description: 'A larger image to show when zoomed. Defaults to `src`.',
+      type: 'string',
+    },
+    className: {
+      description: 'Classes for the clickable wrapper.',
+      type: 'string',
+    },
+    imageClassName: {
+      description: 'Classes for the image on the page.',
+      type: 'string',
+    },
+  }}
+/>
diff --git a/apps/web/content/docs/ui/input-group.mdx b/apps/web/content/docs/ui/input-group.mdx
index 868f0aff7..b0993e3f0 100644
--- a/apps/web/content/docs/ui/input-group.mdx
+++ b/apps/web/content/docs/ui/input-group.mdx
@@ -1,6 +1,7 @@
 ---
 title: Input Group
 description: Component used for grouping related input fields together
+icon: RectangleEllipsis
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/input-otp.mdx b/apps/web/content/docs/ui/input-otp.mdx
new file mode 100644
index 000000000..055333134
--- /dev/null
+++ b/apps/web/content/docs/ui/input-otp.mdx
@@ -0,0 +1,220 @@
+---
+title: Input OTP
+description: A one-time password input with separate slots, a blinking caret and digits that pop into place as you type.
+icon: KeyRound
+---
+
+## Preview
+
+<Preview name="input-otp" />
+
+## Usage
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs items={['Auto Form', 'Manual']}>
+  <Tab value="Auto Form">
+
+```ts
+import { z } from 'zod'
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormInputOTP } from '@vitnode/core/components/form/fields/input-otp'
+```
+
+```ts
+const formSchema = z.object({
+  code: z
+    .string()
+    .length(6, 'Enter all 6 digits')
+    .regex(/^\d+$/, 'Only digits, please'),
+})
+```
+
+```tsx
+<AutoForm
+  formSchema={formSchema}
+  fields={[
+    {
+      id: 'code',
+      component: props => (
+        <AutoFormInputOTP
+          {...props}
+          label="Verify your account"
+          description="We sent a 6-digit code to your email."
+        />
+      ),
+    },
+  ]}
+/>
+```
+
+The schema does the setup for you: `.length(6)` decides how many slots there
+are, and `.regex()` becomes the input's `pattern`, so letters never even make it
+into a digits-only code.
+
+  </Tab>
+
+  <Tab value="Manual">
+
+```ts
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@vitnode/core/components/ui/input-otp'
+```
+
+```tsx
+<InputOTP maxLength={6} onChange={setValue} value={value}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+  </Tab>
+</Tabs>
+
+Each new character rises into its slot with a quick fade and scale. Values that
+are already there when the input mounts (like a code restored from state) show
+up instantly, and with reduced motion turned on nothing moves at all.
+
+Under the hood there is a single real `<input>`, so pasting a whole code,
+password managers and the "fill code from SMS" suggestion on phones
+(`autocomplete="one-time-code"`) all work out of the box.
+
+## Groups
+
+`AutoFormInputOTP` builds the slots for you. Codes of 6 or more characters with
+an even length are split in half with a separator (`123-456`), anything else
+stays in one group. Pass `groups` to pick your own split:
+
+```tsx
+<AutoFormInputOTP {...props} groups={[4]} label="PIN" />
+<AutoFormInputOTP {...props} groups={[2, 2, 2]} label="Backup code" />
+```
+
+## Submit when complete
+
+`onComplete` fires once every slot is filled - perfect for verifying the code
+without making people hunt for a button. It works on both `AutoFormInputOTP`
+and `InputOTP`.
+
+```tsx
+<AutoFormInputOTP {...props} onComplete={code => verify(code)} />
+```
+
+## Wrong code
+
+A wrong code usually comes back from your API, not from the schema. Set it on
+the field with `setFormFieldError` and every slot turns red, with the message
+underneath:
+
+```ts
+import { setFormFieldError } from '@vitnode/core/components/ui/form'
+```
+
+```tsx
+<AutoForm
+  formSchema={formSchema}
+  onSubmit={async (values, form) => {
+    const res = await verifyCode(values.code)
+
+    if (!res.ok) {
+      setFormFieldError(form, 'code', "That code doesn't match.")
+    }
+  }}
+  fields={[...]}
+/>
+```
+
+Using `InputOTP` on its own? Set `aria-invalid` on it and link your message
+with `aria-describedby` - colour alone never tells the whole story.
+
+## Only digits (manual)
+
+Without a schema, restrict what can be typed with `pattern`. The common patterns
+are re-exported, so you don't need to install `input-otp` yourself:
+
+```ts
+import {
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+} from '@vitnode/core/components/ui/input-otp'
+```
+
+```tsx
+<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
+  ...
+</InputOTP>
+```
+
+## Accessibility
+
+- `AutoFormInputOTP` wires the label, description and error message to the
+  input for you.
+- Using `InputOTP` directly? Pass it an `id`, point a `<Label htmlFor>` at it
+  and describe where the code was sent with `aria-describedby`.
+- Slots and separators are hidden from screen readers - the real input already
+  announces the value, so nobody hears every digit twice.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+`AutoFormInputOTP` accepts every `InputOTP` prop (except `value` and
+`children`, which the form owns) plus:
+
+<TypeTable
+  type={{
+    label: {
+      description: 'The label shown above the slots.',
+      type: 'ReactNode',
+    },
+    description: {
+      description: 'Helper text shown below the slots.',
+      type: 'ReactNode',
+    },
+    groups: {
+      description:
+        'How many slots each group has. Defaults to two halves for even lengths of 6+, otherwise one group.',
+      type: 'number[]',
+    },
+    maxLength: {
+      description:
+        'How many characters the code has. Defaults to the schema `.length()` / `.max()`, then 6.',
+      type: 'number',
+    },
+    onChange: {
+      description: 'Called with the new value on every change.',
+      type: '(value: string) => void',
+    },
+    onComplete: {
+      description: 'Called once every slot is filled.',
+      type: '(value: string) => void',
+    },
+    pattern: {
+      description:
+        'A regular expression the value must match. Defaults to the schema `.regex()`.',
+      type: 'string',
+    },
+    disabled: {
+      description: 'Disables the input.',
+      type: 'boolean',
+    },
+  }}
+/>
+
+## API Reference
+
+[input-otp](https://github.com/guilhermerodz/input-otp)
diff --git a/apps/web/content/docs/ui/input.mdx b/apps/web/content/docs/ui/input.mdx
index 86fb2ea3e..98c9c3e84 100644
--- a/apps/web/content/docs/ui/input.mdx
+++ b/apps/web/content/docs/ui/input.mdx
@@ -1,6 +1,7 @@
 ---
 title: Input
 description: Component used for collecting data from users
+icon: TextCursorInput
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/item.mdx b/apps/web/content/docs/ui/item.mdx
new file mode 100644
index 000000000..c1bd40a4c
--- /dev/null
+++ b/apps/web/content/docs/ui/item.mdx
@@ -0,0 +1,212 @@
+---
+title: Item
+description: A flexible row for lists, settings and menus - media, a title, a description and actions, all lined up without the CSS headache.
+icon: LayoutList
+---
+
+## Preview
+
+<Preview name="item" />
+
+## Usage
+
+```ts
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from '@vitnode/core/components/ui/item'
+```
+
+```tsx
+<Item variant="outline">
+  <ItemMedia variant="icon">
+    <ShieldCheck />
+  </ItemMedia>
+  <ItemContent>
+    <ItemTitle>Two-factor authentication</ItemTitle>
+    <ItemDescription>Add a second lock to your account.</ItemDescription>
+  </ItemContent>
+  <ItemActions>
+    <Button size="sm" variant="outline">
+      Enable
+    </Button>
+  </ItemActions>
+</Item>
+```
+
+Every app ends up with a dozen slightly different "icon, text, button on the
+right" rows. `Item` is that row, built once, so you can stop rebuilding it.
+
+## Anatomy
+
+- `Item` - the row itself. Flexbox, wraps when it has to.
+- `ItemMedia` - an icon, avatar or image on the start side. With a description
+  present it aligns itself to the top of the text.
+- `ItemContent` - stacks the title and description and takes the free space.
+- `ItemTitle` - one line, truncated if it gets chatty.
+- `ItemDescription` - up to two lines of muted text. Links inside are
+  underlined automatically.
+- `ItemActions` - buttons, badges or a chevron on the end side.
+- `ItemHeader` / `ItemFooter` - full-width rows above and below the content.
+- `ItemGroup` / `ItemSeparator` - a list of items and a line between them.
+
+## Variants
+
+`default` has no border or background, `outline` adds a border, and `muted`
+adds a soft background.
+
+<Preview name="item-variants" />
+
+```tsx
+<Item variant="default" />
+<Item variant="outline" />
+<Item variant="muted" />
+```
+
+## Sizes
+
+`default`, `sm` and `xs` shrink the padding and the gaps. `ItemMedia` with the
+`image` variant shrinks along with them, and `xs` also uses smaller description
+text.
+
+<Preview name="item-sizes" />
+
+```tsx
+<Item size="sm" variant="outline">
+  ...
+</Item>
+```
+
+## Media
+
+`ItemMedia` comes in three flavours:
+
+- `default` - no styling at all, perfect for an `Avatar`.
+- `icon` - sizes a bare SVG icon to `size-4`.
+- `image` - a rounded square that crops an `img` to fit.
+
+```tsx
+<ItemMedia variant="image">
+  <img alt="" src="/cover.webp" />
+</ItemMedia>
+```
+
+## As a link
+
+Pass an element to `render` and the whole row becomes that element - an
+`<a>`, a router `Link`, a `<button>`, whatever you need. Rendered as a link it
+picks up a hover background for free.
+
+<Preview name="item-link" />
+
+```tsx
+<Item
+  render={
+    <a href="/docs/ui/avatar">
+      <ItemContent>
+        <ItemTitle>Read the Avatar docs</ItemTitle>
+      </ItemContent>
+      <ItemActions>
+        <ChevronRight aria-hidden className="size-4" />
+      </ItemActions>
+    </a>
+  }
+/>
+```
+
+Put the row's content inside the rendered element, as above, so the link wraps
+everything you see.
+
+## Groups
+
+Wrap items in `ItemGroup` to stack them, and drop an `ItemSeparator` between
+them when they need some breathing room.
+
+<Preview name="item-group" />
+
+```tsx
+<ItemGroup aria-label="Team members">
+  <Item role="listitem">...</Item>
+  <ItemSeparator />
+  <Item role="listitem">...</Item>
+</ItemGroup>
+```
+
+## Header and footer
+
+`ItemHeader` and `ItemFooter` take the full width of the row, so a status badge
+or a timestamp can sit above or below the main content.
+
+<Preview name="item-header" />
+
+```tsx
+<Item variant="outline">
+  <ItemHeader>
+    <Badge variant="success">Active</Badge>
+  </ItemHeader>
+  <ItemContent>...</ItemContent>
+  <ItemFooter>
+    <Button size="sm">Edit</Button>
+  </ItemFooter>
+</Item>
+```
+
+## Accessibility
+
+- `ItemGroup` renders with `role="list"`. Give every `Item` inside it
+  `role="listitem"`, and an `aria-label` on the group helps screen readers
+  announce what the list is about.
+- Keep one interactive element per row. Either the whole row is a link or
+  button (via `render`), or it holds buttons in `ItemActions` - never a button
+  inside a link.
+- Icon-only buttons in `ItemActions` need an `aria-label` that names the row,
+  for example "Invite Ada Lovelace" rather than just "Invite".
+- Decorative icons such as a trailing chevron get `aria-hidden`. Links that
+  open a new tab say so with `sr-only` text.
+- Rows rendered as links or buttons show the focus ring on keyboard focus.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Item
+
+<TypeTable
+  type={{
+    variant: {
+      description: 'The look of the row.',
+      type: 'default | outline | muted',
+      default: 'default',
+    },
+    size: {
+      description: 'Padding and gap between the parts of the row.',
+      type: 'default | sm | xs',
+      default: 'default',
+    },
+    render: {
+      description:
+        'Replaces the `div` with your own element, such as a link or a button.',
+      type: 'ReactElement | ((props, state) => ReactElement)',
+    },
+  }}
+/>
+
+### ItemMedia
+
+<TypeTable
+  type={{
+    variant: {
+      description: 'How the media is styled.',
+      type: 'default | icon | image',
+      default: 'default',
+    },
+  }}
+/>
+
+## API Reference
+
+[Base UI - useRender](https://base-ui.com/react/utils/use-render)
diff --git a/apps/web/content/docs/ui/kbd.mdx b/apps/web/content/docs/ui/kbd.mdx
new file mode 100644
index 000000000..ea6b91b51
--- /dev/null
+++ b/apps/web/content/docs/ui/kbd.mdx
@@ -0,0 +1,170 @@
+---
+title: Kbd
+description: Show keyboard keys and shortcuts like ⌘ K in a way both eyes and screen readers understand.
+icon: Keyboard
+---
+
+## Preview
+
+<Preview name="kbd" />
+
+## Usage
+
+```ts
+import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'
+```
+
+```tsx
+<Kbd>Esc</Kbd>
+```
+
+`Kbd` renders a real `<kbd>` element, so browsers, search engines and assistive
+tech all know it is a key - not just a tiny gray box that happens to look like
+one.
+
+## Shortcuts
+
+Wrap the keys of a combination in `KbdGroup`. It lines them up with a small gap
+and stays a `<kbd>` too, which is exactly how HTML describes a key combo.
+
+```tsx
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>
+```
+
+Prefer a visible plus sign? Drop it between the keys and hide it from screen
+readers, they already hear two keys:
+
+```tsx
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <span aria-hidden="true">+</span>
+  <Kbd>C</Kbd>
+</KbdGroup>
+```
+
+## Inside a button
+
+Hint at the shortcut right on the action. `Kbd` sizes itself to the text, so it
+fits small buttons without extra classes.
+
+```tsx
+<Button size="sm" variant="outline">
+  Accept
+  <Kbd>Enter</Kbd>
+</Button>
+```
+
+## Inside a tooltip
+
+In a [Tooltip](/docs/ui/tooltip) the keys switch to a translucent style that
+stays readable on the dark tooltip background, in both themes. No props needed.
+
+```tsx
+<TooltipWithContent
+  text={
+    <>
+      Save changes
+      <KbdGroup>
+        <Kbd>Ctrl</Kbd>
+        <Kbd>S</Kbd>
+      </KbdGroup>
+    </>
+  }
+>
+  <Button aria-label="Save" size="icon-sm" variant="outline">
+    <SaveIcon />
+  </Button>
+</TooltipWithContent>
+```
+
+## Inside an input
+
+Pair it with an [Input Group](/docs/ui/input-group) addon for the classic
+"press ⌘ K to search" field.
+
+```tsx
+<InputGroup>
+  <InputGroupInput aria-label="Search" placeholder="Search..." />
+  <InputGroupAddon>
+    <SearchIcon />
+  </InputGroupAddon>
+  <InputGroupAddon align="inline-end">
+    <KbdGroup>
+      <Kbd>Ctrl</Kbd>
+      <Kbd>K</Kbd>
+    </KbdGroup>
+  </InputGroupAddon>
+</InputGroup>
+```
+
+## ⌘ on Mac, Ctrl everywhere else
+
+Showing ⌘ to a Windows user is a small betrayal. Detect the platform on the
+client, but render the same thing on the server and during hydration, or React
+will complain about mismatched HTML. `useSyncExternalStore` does exactly that:
+the third argument is used for the server render and hydration, then React
+switches to the real value.
+
+```tsx
+const subscribeToNothing = () => () => {}
+
+const useIsApple = () =>
+  React.useSyncExternalStore(
+    subscribeToNothing,
+    () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent),
+    () => true,
+  )
+
+const ModifierKey = () => (useIsApple() ? <Kbd>⌘</Kbd> : <Kbd>Ctrl</Kbd>)
+```
+
+No `useEffect` plus `setState` dance required.
+
+## Accessibility
+
+- Keep the `<kbd>` element. It tells assistive tech "this is a key", which a
+  styled `<span>` never will.
+- Do not rely on symbols alone. Screen readers announce ⌘ or ⇧ inconsistently,
+  if at all, so pair each symbol with a readable name:
+
+  ```tsx
+  <Kbd title="Command">
+    <span aria-hidden="true">⌘</span>
+    <span className="sr-only">Command</span>
+  </Kbd>
+  ```
+
+  An `aria-label` on a plain `<kbd>` is not reliably read out, so visually
+  hidden text is the safer bet. `title` adds a hover hint for sighted users.
+- `Kbd` has `pointer-events-none` and `select-none`. It is a hint, not a
+  control - if pressing the key should do something, listen for the key
+  itself (and put the action on a real button).
+- Do not make a shortcut the only way to do something. Mouse, touch and
+  keyboard users should all get there.
+
+## Props
+
+Both components accept every prop of the native element they render.
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    Kbd: {
+      description: 'A single key. Renders `<kbd data-slot="kbd">`.',
+      type: "React.ComponentProps<'kbd'>",
+    },
+    KbdGroup: {
+      description:
+        'A key combination. Renders `<kbd data-slot="kbd-group">` around the keys.',
+      type: "React.ComponentProps<'div'>",
+    },
+  }}
+/>
+
+## API Reference
+
+[MDN - The Keyboard Input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd)
diff --git a/apps/web/content/docs/ui/label.mdx b/apps/web/content/docs/ui/label.mdx
new file mode 100644
index 000000000..20d9966d0
--- /dev/null
+++ b/apps/web/content/docs/ui/label.mdx
@@ -0,0 +1,124 @@
+---
+title: Label
+description: An accessible text label for form controls - click it and the control it names responds.
+icon: TextInitial
+---
+
+## Preview
+
+<Preview name="label" />
+
+## Usage
+
+```ts
+import { Label } from '@vitnode/core/components/ui/label'
+```
+
+```tsx
+<Label htmlFor="email">Email</Label>
+<Input id="email" type="email" />
+```
+
+`Label` is a styled native `<label>`. Point `htmlFor` at the control's `id` and
+the browser handles the rest: the whole label becomes a click target, and
+screen readers announce the text when the control gets focus.
+
+## Using AutoForm? You already have labels
+
+[AutoForm](/docs/ui/auto-form) fields render their own label (`AutoFormLabel`)
+from the `label` prop, wired to the right `id`, with an "Optional" hint when the
+schema says so. Don't add a `Label` next to an AutoForm field - you'd just get
+two.
+
+```tsx
+<AutoFormInput label="Email" {...props} />
+```
+
+Reach for `Label` when you build a control by hand: a settings toggle outside a
+form, a custom picker, a filter bar. For a full field layout with description
+and error message, see [Field](/docs/ui/field) - `FieldLabel` is built on top
+of this component.
+
+## With a checkbox
+
+Put the control first and the label after it. The gap and alignment are built
+in, so clicking anywhere on the text toggles the checkbox.
+
+```tsx
+<div className="flex items-center gap-3">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">I promise I read the terms</Label>
+</div>
+```
+
+## Wrapping the control
+
+No `id` handy? Wrap the control instead - a `<label>` is associated with the
+control inside it automatically.
+
+```tsx
+<Label>
+  <Checkbox />
+  Remember me
+</Label>
+```
+
+## Disabled controls
+
+Disable the control and the label follows along: it dims and shows a
+`not-allowed` cursor, so nobody wonders why clicking it does nothing.
+
+```tsx
+<div className="flex items-center gap-3">
+  <Checkbox disabled id="newsletter" />
+  <Label htmlFor="newsletter">Weekly newsletter (coming soon)</Label>
+</div>
+```
+
+This works when the control comes **before** the label as a sibling and has the
+`peer` class - VitNode's `Checkbox`, `Switch` and `RadioGroupItem` already do.
+`Label` reacts to both a native `disabled` attribute and the `data-disabled`
+attribute Base UI puts on its controls.
+
+Label sits somewhere else? Put `group` and `data-disabled="true"` on a shared
+parent instead - that is what [Field](/docs/ui/field) does for you.
+
+## Accessibility
+
+- Always associate the label with its control, either with `htmlFor` + `id` or
+  by wrapping the control. A label floating next to an input is just text to a
+  screen reader.
+- Keep the visible text meaningful. "Email" beats "Field 1", and placeholders
+  are not labels - they vanish the moment someone starts typing.
+- The label is part of the hit area. That makes small controls like checkboxes
+  much easier to tap on a phone, so keep the text next to the control rather
+  than far away.
+- `select-none` stops accidental text selection when someone clicks the label
+  quickly a few times.
+
+## Props
+
+Accepts every prop of the native `<label>` element.
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    htmlFor: {
+      description: 'The `id` of the control this label describes.',
+      type: 'string',
+    },
+    children: {
+      description: 'The label text. It can also wrap the control itself.',
+      type: 'React.ReactNode',
+    },
+    className: {
+      description: 'Extra classes merged with the default styles.',
+      type: 'string',
+    },
+  }}
+/>
+
+## API Reference
+
+[MDN - The Label element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label)
diff --git a/apps/web/content/docs/ui/marker.mdx b/apps/web/content/docs/ui/marker.mdx
new file mode 100644
index 000000000..80c0e225a
--- /dev/null
+++ b/apps/web/content/docs/ui/marker.mdx
@@ -0,0 +1,170 @@
+---
+title: Marker
+description: Inline status lines, system notes, bordered rows and labeled separators for conversations and activity feeds.
+icon: Flag
+---
+
+## Preview
+
+<Preview name="marker" />
+
+## Usage
+
+```ts
+import {
+  Marker,
+  MarkerContent,
+  MarkerIcon,
+} from '@vitnode/core/components/ui/marker'
+```
+
+```tsx
+<Marker>
+  <MarkerIcon>
+    <Search />
+  </MarkerIcon>
+  <MarkerContent>Explored 4 files</MarkerContent>
+</Marker>
+```
+
+A marker is the quiet line between messages - "Switched branch", "Today",
+"Thinking...". It pairs nicely with [Bubble](/docs/ui/bubble) when you build a
+chat thread, and it is just as happy in an activity feed.
+
+```text
+Marker
+├── MarkerIcon
+└── MarkerContent
+```
+
+## Variants
+
+Pick a `variant` to change how the marker sits in the flow.
+
+```tsx
+<Marker>
+  <MarkerContent>A default marker for inline notes.</MarkerContent>
+</Marker>
+
+<Marker variant="separator">
+  <MarkerContent>Today</MarkerContent>
+</Marker>
+
+<Marker variant="border">
+  <MarkerContent>A border marker for row boundaries.</MarkerContent>
+</Marker>
+```
+
+| Variant     | What it looks like                                   |
+| ----------- | ---------------------------------------------------- |
+| `default`   | An inline line of muted text for notes and actions.  |
+| `separator` | A centered label with a divider line on each side.   |
+| `border`    | A default marker with a bottom border under the row. |
+
+Keep separator labels short - a date or a few words. The divider lines take the
+leftover space, so a long label leaves them nothing to work with.
+
+## With an icon
+
+Wrap any icon in `MarkerIcon`. It is sized to match the text and hidden from
+screen readers, so the content does the talking. Add `flex-col` to stack the
+icon above the text:
+
+```tsx
+<Marker className="flex-col">
+  <MarkerIcon>
+    <BookOpenCheck />
+  </MarkerIcon>
+  <MarkerContent>Syncing completed</MarkerContent>
+</Marker>
+```
+
+## Status and shimmer
+
+For something that is still happening, set `role="status"` so the update gets
+announced, drop a `Spinner` in the icon slot and give the
+text the `shimmer` utility for that "working on it" glow.
+
+```tsx
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+;<Marker role="status">
+  <MarkerIcon>
+    <Spinner />
+  </MarkerIcon>
+  <MarkerContent className="shimmer">Thinking...</MarkerContent>
+</Marker>
+```
+
+## Links and buttons
+
+The root is polymorphic. Pass `render` to turn a marker into a link or a
+button - links get an underline for free.
+
+```tsx
+<Marker render={<a href="/admin/plugins" />}>
+  <MarkerContent>View installed plugins</MarkerContent>
+</Marker>
+
+<Marker
+  render={
+    <button
+      className="hover:text-foreground transition-colors"
+      onClick={revert}
+      type="button"
+    />
+  }
+>
+  <MarkerIcon>
+    <RotateCcw />
+  </MarkerIcon>
+  <MarkerContent>Revert this change</MarkerContent>
+</Marker>
+```
+
+## Accessibility
+
+- A marker is a plain `div` by default. Choose the semantics from what it does:
+  `role="status"` for live progress, `render` with an `a` or `button` when it is
+  clickable, nothing at all for a simple note.
+- A labeled separator needs no role. The lines are decorative pseudo-elements and
+  the label is read as ordinary text. Do not add `role="separator"` - it would
+  hide the label from assistive tech.
+- `MarkerIcon` is `aria-hidden`, so the meaning lives in `MarkerContent`. For an
+  icon-only marker, give the root an `aria-label`.
+- Wrap a whole thread in an element with `role="log"` so new messages and
+  markers are announced in order.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Marker
+
+<TypeTable
+  type={{
+    variant: {
+      description: 'How the marker sits between the surrounding content.',
+      type: 'default | separator | border',
+      default: 'default',
+    },
+    render: {
+      description:
+        'Replaces the root element, for example with an `a` or a `button`.',
+      type: 'ReactElement | ((props, state) => ReactElement)',
+    },
+    role: {
+      description: 'Use `status` for markers that announce live progress.',
+      type: 'AriaRole',
+    },
+  }}
+/>
+
+### MarkerIcon and MarkerContent
+
+Both render a `span` and accept every standard `span` prop, including
+`className`.
+
+## API Reference
+
+[Base UI - useRender](https://base-ui.com/react/utils/use-render)
diff --git a/apps/web/content/docs/ui/menubar.mdx b/apps/web/content/docs/ui/menubar.mdx
new file mode 100644
index 000000000..67b198ada
--- /dev/null
+++ b/apps/web/content/docs/ui/menubar.mdx
@@ -0,0 +1,246 @@
+---
+title: Menubar
+description: A desktop-style menu bar with File, Edit and View menus, shortcuts, submenus, checkbox and radio items.
+icon: PanelTopOpen
+---
+
+## Preview
+
+<Preview name="menubar" />
+
+## Usage
+
+```ts
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from '@vitnode/core/components/ui/menubar'
+```
+
+```tsx
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent className="w-56">
+      <MenubarItem>
+        New tab
+        <MenubarShortcut>⌘T</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>New window</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Print...</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+  <MenubarMenu>
+    <MenubarTrigger>Edit</MenubarTrigger>
+    <MenubarContent className="w-56">
+      <MenubarItem>Undo</MenubarItem>
+      <MenubarItem>Redo</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```
+
+Every `MenubarMenu` is one menu in the bar: a trigger plus its content. Open one
+and the bar remembers - hover the next trigger and it opens straight away, just
+like the menu bar at the top of your desktop. Handy for editors, dashboards and
+anything else with more commands than buttons.
+
+## Submenus
+
+Nest a `MenubarSub` to tuck related actions one level deeper. It opens on hover,
+on click, or with the arrow keys.
+
+```tsx
+import {
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from '@vitnode/core/components/ui/menubar'
+
+<MenubarSub>
+  <MenubarSubTrigger>Share</MenubarSubTrigger>
+  <MenubarSubContent className="w-44">
+    <MenubarItem>Email link</MenubarItem>
+    <MenubarItem>Messages</MenubarItem>
+  </MenubarSubContent>
+</MenubarSub>
+```
+
+## Checkbox and radio items
+
+Use `MenubarCheckboxItem` for independent toggles and a `MenubarRadioGroup`
+when exactly one option can win. Both work controlled or uncontrolled.
+
+```tsx
+import {
+  MenubarCheckboxItem,
+  MenubarLabel,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+} from '@vitnode/core/components/ui/menubar'
+
+const [showBookmarks, setShowBookmarks] = React.useState(true)
+const [profile, setProfile] = React.useState('benoit')
+
+<MenubarCheckboxItem
+  checked={showBookmarks}
+  onCheckedChange={setShowBookmarks}
+>
+  Always show bookmarks bar
+</MenubarCheckboxItem>
+<MenubarSeparator />
+<MenubarLabel inset>Switch profile</MenubarLabel>
+<MenubarRadioGroup value={profile} onValueChange={setProfile}>
+  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+</MenubarRadioGroup>
+```
+
+The check mark sits at the start of the row. Add `inset` to plain items, labels
+and sub-triggers in the same menu so their text lines up with the checked ones.
+
+## Shortcuts
+
+`MenubarShortcut` shows a keyboard hint at the end of an item. It is only a
+label - wire the actual key binding yourself, otherwise it is a promise you are
+not keeping.
+
+```tsx
+<MenubarItem>
+  Undo
+  <MenubarShortcut>⌘Z</MenubarShortcut>
+</MenubarItem>
+```
+
+## Destructive items
+
+Set `variant="destructive"` for actions you cannot take back, so they look the
+part.
+
+```tsx
+<MenubarItem variant="destructive">Close all windows</MenubarItem>
+```
+
+## Accessibility
+
+- The bar is a single tab stop. Once a trigger has focus, the left and right
+  arrows move between menus, and when a menu is open they move the open menu
+  with you.
+- Inside a menu, the up and down arrows move between items, the right arrow
+  opens a submenu, typing a letter jumps to a matching item and `Escape`
+  closes the menu and returns focus to its trigger.
+- Shortcuts are labels only. Screen readers read them as part of the item, but
+  pressing the keys does nothing until you bind them.
+- Disabled items stay visible and are announced as disabled, so nobody wonders
+  where "Force reload" went.
+- A menu bar is a desktop pattern. On small screens keep it short, or offer the
+  same actions in a [Dropdown Menu](/docs/ui/dropdown-menu).
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Menubar
+
+<TypeTable
+  type={{
+    loopFocus: {
+      description:
+        'Whether arrow keys wrap from the last menu back to the first.',
+      type: 'boolean',
+      default: 'true',
+    },
+    modal: {
+      description:
+        'Whether an open menu locks page scroll and blocks outside clicks.',
+      type: 'boolean',
+      default: 'true',
+    },
+    orientation: {
+      description: 'Which arrow keys move between menus.',
+      type: 'horizontal | vertical',
+      default: 'horizontal',
+    },
+    disabled: {
+      description: 'Disables every menu in the bar.',
+      type: 'boolean',
+      default: 'false',
+    },
+  }}
+/>
+
+### MenubarContent
+
+<TypeTable
+  type={{
+    side: {
+      description:
+        'Which side of the trigger the menu prefers. It flips when there is no room.',
+      type: 'top | bottom | left | right | inline-start | inline-end',
+      default: 'bottom',
+    },
+    align: {
+      description: 'How the menu aligns against the trigger.',
+      type: 'start | center | end',
+      default: 'start',
+    },
+    sideOffset: {
+      description: 'Distance from the trigger in pixels.',
+      type: 'number',
+      default: '8',
+    },
+    alignOffset: {
+      description: 'Shift along the alignment axis in pixels.',
+      type: 'number',
+      default: '-4',
+    },
+  }}
+/>
+
+### MenubarItem
+
+<TypeTable
+  type={{
+    variant: {
+      description: 'The look of the item.',
+      type: 'default | destructive',
+      default: 'default',
+    },
+    inset: {
+      description:
+        'Adds start padding so the text lines up with checkbox and radio items.',
+      type: 'boolean',
+      default: 'false',
+    },
+    disabled: {
+      description: 'Shows the item but makes it non-interactive.',
+      type: 'boolean',
+      default: 'false',
+    },
+    closeOnClick: {
+      description: 'Whether clicking the item closes the menu.',
+      type: 'boolean',
+      default: 'true',
+    },
+    onClick: {
+      description:
+        'Called when the item is chosen with a click, tap or the keyboard.',
+      type: '(event) => void',
+    },
+  }}
+/>
+
+`MenubarCheckboxItem` takes `checked`, `defaultChecked` and `onCheckedChange`;
+`MenubarRadioGroup` takes `value`, `defaultValue` and `onValueChange`. Both item
+types accept `inset` and `disabled` too. `MenubarMenu` takes `open`,
+`defaultOpen` and `onOpenChange` when you want to drive a single menu yourself.
+
+## API Reference
+
+[Base UI - Menubar](https://base-ui.com/react/components/menubar#api-reference)
diff --git a/apps/web/content/docs/ui/message.mdx b/apps/web/content/docs/ui/message.mdx
new file mode 100644
index 000000000..20aa62198
--- /dev/null
+++ b/apps/web/content/docs/ui/message.mdx
@@ -0,0 +1,213 @@
+---
+title: Message
+description: Lay out a chat message with an avatar, sender name, timestamp, footer actions and start or end alignment.
+icon: MessagesSquare
+---
+
+## Preview
+
+<Preview name="message" />
+
+## Usage
+
+```ts
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+import { Bubble, BubbleContent } from '@vitnode/core/components/ui/bubble'
+import {
+  Message,
+  MessageAvatar,
+  MessageContent,
+} from '@vitnode/core/components/ui/message'
+```
+
+```tsx
+<Message>
+  <MessageAvatar>
+    <Avatar>
+      <AvatarImage alt="VitNode assistant" src="/logo_vitnode_icon.svg" />
+      <AvatarFallback>VN</AvatarFallback>
+    </Avatar>
+  </MessageAvatar>
+  <MessageContent>
+    <Bubble variant="muted">
+      <BubbleContent>How can I help you today?</BubbleContent>
+    </Bubble>
+  </MessageContent>
+</Message>
+```
+
+`Message` owns the row: who is talking, which side they sit on, and what goes
+above or below. The actual speech bubble is a [Bubble](/docs/ui/bubble) - the
+two are designed to be best friends.
+
+## Composition
+
+```text
+MessageGroup
+└── Message
+    ├── MessageAvatar
+    └── MessageContent
+        ├── MessageHeader
+        ├── Bubble / Attachment
+        └── MessageFooter
+```
+
+## Alignment
+
+Set `align="end"` for messages the current user sent. The avatar swaps sides,
+and every bubble, attachment, header and footer inside `MessageContent` moves to
+the end - no need to set `align` on each `Bubble`.
+
+```tsx
+<Message align="end">
+  <MessageContent>
+    <Bubble>
+      <BubbleContent>Sent by me, obviously.</BubbleContent>
+    </Bubble>
+  </MessageContent>
+</Message>
+```
+
+`start` and `end` are logical, so in right-to-left languages the sides flip on
+their own.
+
+## Avatar
+
+`MessageAvatar` sticks to the bottom of the message, next to the last bubble.
+When the message has a `MessageFooter`, the avatar lifts up so it lines up with
+the bubble instead of the footer.
+
+## Group
+
+Wrap consecutive messages from the same sender in `MessageGroup` to tighten the
+spacing. Give the earlier messages an empty `MessageAvatar` so their bubbles line
+up with the one that shows the avatar.
+
+```tsx
+<MessageGroup>
+  <Message>
+    <MessageAvatar />
+    <MessageContent>
+      <Bubble variant="muted">
+        <BubbleContent>First thought.</BubbleContent>
+      </Bubble>
+    </MessageContent>
+  </Message>
+  <Message>
+    <MessageAvatar>
+      <Avatar>
+        <AvatarFallback>AV</AvatarFallback>
+      </Avatar>
+    </MessageAvatar>
+    <MessageContent>
+      <Bubble variant="muted">
+        <BubbleContent>Second thought, now with a face.</BubbleContent>
+      </Bubble>
+    </MessageContent>
+  </Message>
+</MessageGroup>
+```
+
+Need several bubbles inside a single message instead? Use
+[`BubbleGroup`](/docs/ui/bubble#grouping) inside `MessageContent`.
+
+## Header and footer
+
+`MessageHeader` is the spot for a sender name and timestamp. `MessageFooter`
+holds metadata such as a read receipt and follows the message to its side.
+
+```tsx
+<Message>
+  <MessageContent>
+    <MessageHeader className="gap-1.5">
+      <span className="text-foreground">Ava</span>
+      <time dateTime="2026-10-02T09:41">9:41 AM</time>
+    </MessageHeader>
+    <Bubble variant="muted">
+      <BubbleContent>Did the plugin build pass?</BubbleContent>
+    </Bubble>
+    <MessageFooter>Read</MessageFooter>
+  </MessageContent>
+</Message>
+```
+
+## Actions
+
+Put message-level actions such as copy, retry or feedback in the footer.
+
+```tsx
+<MessageFooter>
+  <Button aria-label="Copy message" size="icon-xs" variant="ghost">
+    <Copy />
+  </Button>
+</MessageFooter>
+```
+
+## Attachments
+
+Drop an [Attachment](/docs/ui/attachment) next to the bubble inside
+`MessageContent`. It aligns with the message like everything else.
+
+```tsx
+<Message align="end">
+  <MessageContent>
+    <Attachment>
+      <AttachmentMedia>
+        <FileText />
+      </AttachmentMedia>
+      <AttachmentContent>
+        <AttachmentTitle>build-log.txt</AttachmentTitle>
+        <AttachmentDescription>TXT · 12 KB</AttachmentDescription>
+      </AttachmentContent>
+    </Attachment>
+    <Bubble>
+      <BubbleContent>Log attached.</BubbleContent>
+    </Bubble>
+  </MessageContent>
+</Message>
+```
+
+## Accessibility
+
+- `Message` is a layout wrapper with no role of its own. Put `role="log"` and an
+  `aria-label` on the conversation container so new messages are announced
+  politely.
+- Alignment only tells sighted users who is speaking. Name the sender in text
+  too: a visible `MessageHeader`, or one with `className="sr-only"` for your own
+  messages.
+- Wrap timestamps in `<time dateTime="...">` so they stay machine-readable
+  while showing a friendly format.
+- Give `AvatarImage` an `alt` with the sender's name. If a `MessageHeader`
+  already names them, mark the `MessageAvatar` `aria-hidden="true"` so screen
+  readers do not hear the name twice.
+- Icon-only footer actions need an `aria-label`.
+- For "someone is typing" hints, use a [Marker](/docs/ui/marker) with
+  `role="status"`.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Message
+
+<TypeTable
+  type={{
+    align: {
+      description:
+        'Which side of the conversation the message sits on. Bubbles, attachments, header and footer inside follow it.',
+      type: 'start | end',
+      default: 'start',
+    },
+  }}
+/>
+
+`MessageGroup`, `MessageAvatar`, `MessageContent`, `MessageHeader` and
+`MessageFooter` accept every `div` prop, including `className`.
+
+## API Reference
+
+[shadcn/ui - Message](https://ui.shadcn.com/docs/components/base/message)
diff --git a/apps/web/content/docs/ui/meta.json b/apps/web/content/docs/ui/meta.json
index 71129e393..5be55f704 100644
--- a/apps/web/content/docs/ui/meta.json
+++ b/apps/web/content/docs/ui/meta.json
@@ -14,13 +14,18 @@
     "confirm-action-alert-dialog",
     "---Forms---",
     "auto-form",
+    "cascader",
     "checkbox",
     "color",
     "combobox",
     "editor",
+    "field",
     "input",
     "input-group",
+    "input-otp",
+    "label",
     "nullable-number",
+    "number-field",
     "radio-group",
     "roles",
     "select",
@@ -28,6 +33,10 @@
     "textarea",
     "user",
     "---UI---",
-    "..."
+    "...",
+    "---Utilities---",
+    "counter",
+    "scroll-fade",
+    "shimmer"
   ]
 }
diff --git a/apps/web/content/docs/ui/nullable-number.mdx b/apps/web/content/docs/ui/nullable-number.mdx
index 5cb5b8ca9..46f09945a 100644
--- a/apps/web/content/docs/ui/nullable-number.mdx
+++ b/apps/web/content/docs/ui/nullable-number.mdx
@@ -1,12 +1,17 @@
 ---
 title: Nullable Number
 description: Numeric field paired with a checkbox that toggles the value to null - for "unlimited", "never", "no limit", and similar.
+icon: Hash
 ---
 
 ## Preview
 
 <Preview name="nullable-number" />
 
+It builds on [Number Field](/docs/ui/number-field), so you get the plus and
+minus buttons, arrow-key stepping and min/max clamping for free - plus one
+checkbox for when the honest answer is "no limit".
+
 ## Usage
 
 ```ts
@@ -41,7 +46,8 @@ const formSchema = z.object({
 
 <Callout type="info" title="Value shape">
   The field value is `number | null`. A number is whatever is typed in the
-  input; `null` means the checkbox is checked and the input is disabled. Back it
+  input (clearing it gives `0`); `null` means the checkbox is checked and the
+  number field is disabled. Back it
   with a `z.number().nullable()` schema, and keep it optional or give it a
   `default` when the field can be
   [hidden](/docs/ui/auto-form#conditional-fields) so it never blocks submission.
@@ -68,8 +74,22 @@ and so on:
 />
 ```
 
-Any other props (`min`, `max`, `step`, `placeholder`, …) are forwarded to the
-underlying number input; validation constraints come from the Zod schema.
+Any other props (`min`, `max`, `step`, `largeStep`, `format`, `placeholder`,
+…) are forwarded to the underlying
+[Number Field](/docs/ui/number-field#props). Validation comes from the Zod
+schema, while `min` / `max` on the field clamp the buttons and arrow keys - so
+pass them in both places.
+
+```tsx
+<AutoFormNullableNumber
+  {...props}
+  label="Upload limit"
+  min={0}
+  step={512}
+  toggleLabel="Unlimited"
+  unitLabel="kB"
+/>
+```
 
 ## Props
 
diff --git a/apps/web/content/docs/ui/number-field.mdx b/apps/web/content/docs/ui/number-field.mdx
new file mode 100644
index 000000000..f2e7edd5e
--- /dev/null
+++ b/apps/web/content/docs/ui/number-field.mdx
@@ -0,0 +1,270 @@
+---
+title: Number Field
+description: A number input with plus and minus buttons, keyboard stepping, min/max clamping, Intl formatting and drag-to-scrub labels.
+icon: Diff
+---
+
+## Preview
+
+<Preview name="number-field" />
+
+## Usage
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+
+<Tabs items={['Auto Form', 'Manual']}>
+  <Tab value="Auto Form">
+
+<Preview name="number-field-auto-form" />
+
+```ts
+import { z } from 'zod'
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormNumber } from '@vitnode/core/components/form/fields/number'
+```
+
+```ts
+const formSchema = z.object({
+  guests: z.number().int().min(1).max(12).default(2),
+})
+```
+
+```tsx
+<AutoForm
+  formSchema={formSchema}
+  fields={[
+    {
+      id: 'guests',
+      component: props => (
+        <AutoFormNumber
+          {...props}
+          label="Guests"
+          max={12}
+          min={1}
+          unitLabel="people"
+        />
+      ),
+    },
+  ]}
+/>
+```
+
+The form stores a real `number`, not a string. Clearing the input stores
+`null`, so pair it with `.optional()` or a `default` when empty is allowed.
+Pass `min`/`max` to the field as well as the schema - the schema validates,
+the props clamp the buttons and the arrow keys.
+
+Need an "unlimited" checkbox next to it? That's
+[Nullable Number](/docs/ui/nullable-number).
+
+  </Tab>
+
+  <Tab value="Manual">
+
+```ts
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@vitnode/core/components/ui/number-field'
+```
+
+```tsx
+const [value, setValue] = React.useState<number | null>(2)
+
+<NumberField max={8} min={0} onValueChange={setValue} value={value}>
+  <NumberFieldGroup>
+    <NumberFieldDecrement />
+    <NumberFieldInput aria-label="Coffees per day" />
+    <NumberFieldIncrement />
+  </NumberFieldGroup>
+</NumberField>
+```
+
+Prefer uncontrolled? Swap `value` for `defaultValue` and listen with
+`onValueCommitted`, which fires once the user is done (on blur, or when the
+button is released) instead of on every keystroke.
+
+  </Tab>
+</Tabs>
+
+## Min, max and step
+
+- `min` / `max` - the buttons, arrow keys and scrubbing stop at the limits, and
+  the button that would cross one is disabled. A typed value is clamped on blur.
+- `step` - how much one click or arrow press moves the value (default `1`).
+- `largeStep` - used with <kbd>Shift</kbd> held (default `10`).
+- `smallStep` - used with <kbd>Alt</kbd> (default `0.1`).
+- `snapOnStep` - snap to the nearest multiple of the step instead of adding it
+  to whatever was typed.
+
+```tsx
+<NumberField largeStep={50} max={500} min={0} step={5}>
+  …
+</NumberField>
+```
+
+## Formatting
+
+`format` takes [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options),
+so currencies, percentages and units come for free. The value stays a plain
+number - `0.15` shows as `15%`, and typing `20%` gives you `0.2` back.
+
+<Preview name="number-field-format" />
+
+```tsx
+<NumberField defaultValue={19.99} format={{ style: 'currency', currency: 'USD' }}>
+  …
+</NumberField>
+
+<NumberField
+  defaultValue={0.15}
+  format={{ style: 'percent' }}
+  max={1}
+  min={0}
+  step={0.01}
+>
+  …
+</NumberField>
+```
+
+Numbers are formatted in the current app locale, so Polish users see `12 345`
+and English users see `12,345`. Pass `locale` to override it.
+
+## Scrub area
+
+Wrap the label in `NumberFieldScrubArea` and the label becomes a slider: drag
+it left or right to change the value, like in a design tool. Give it the same
+`htmlFor` as the field's `id` so clicking the label still focuses the input.
+
+```tsx
+const id = React.useId()
+
+<NumberField id={id} max={8} min={0}>
+  <NumberFieldScrubArea htmlFor={id} label="Coffees per day" />
+  <NumberFieldGroup>
+    <NumberFieldDecrement />
+    <NumberFieldInput />
+    <NumberFieldIncrement />
+  </NumberFieldGroup>
+</NumberField>
+```
+
+Want the mouse wheel to change the value while the input is focused? Add
+`allowWheelScrub`.
+
+## Sizes
+
+<Preview name="number-field-sizes" />
+
+```tsx
+<NumberField size="sm">…</NumberField>
+<NumberField>…</NumberField>
+<NumberField size="lg">…</NumberField>
+```
+
+## Disabled and read-only
+
+`disabled` dims the whole field and ignores every interaction. `readOnly`
+keeps the value readable and focusable but locks the buttons and the keys.
+
+## Accessibility
+
+- The input stays a text field (so formatted values like `$19.99` work) with
+  `inputMode` set, so phones open the right keyboard.
+- <kbd>Arrow Up</kbd> / <kbd>Arrow Down</kbd> step by `step`, hold
+  <kbd>Shift</kbd> for `largeStep` or <kbd>Alt</kbd> for `smallStep`.
+  <kbd>Home</kbd> / <kbd>End</kbd> jump to `min` / `max` when set.
+- The plus and minus buttons are labelled "Increase" and "Decrease" in the
+  user's language and are skipped by <kbd>Tab</kbd> - the keyboard already has
+  the arrow keys. On touch screens their hit area grows to 44px.
+- Name the input with a label (`htmlFor` + `id`), a scrub area, or
+  `aria-label`. `AutoFormNumber` does it for you.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    value: {
+      description: 'The number (controlled). `null` means empty.',
+      type: 'number | null',
+    },
+    defaultValue: {
+      description: 'The starting number when uncontrolled.',
+      type: 'number',
+    },
+    onValueChange: {
+      description: 'Called on every change - typing, buttons, keys, scrubbing.',
+      type: '(value: number | null) => void',
+    },
+    onValueCommitted: {
+      description:
+        'Called once the change is final - on blur, or when a button or scrub is released.',
+      type: '(value: number | null) => void',
+    },
+    min: {
+      description: 'The lowest allowed value.',
+      type: 'number',
+    },
+    max: {
+      description: 'The highest allowed value.',
+      type: 'number',
+    },
+    step: {
+      description: 'Amount for one click or arrow press.',
+      type: 'number | "any"',
+      default: '1',
+    },
+    largeStep: {
+      description: 'Amount with Shift held.',
+      type: 'number',
+      default: '10',
+    },
+    smallStep: {
+      description: 'Amount with Alt held.',
+      type: 'number',
+      default: '0.1',
+    },
+    format: {
+      description: 'How the value is displayed.',
+      type: 'Intl.NumberFormatOptions',
+    },
+    locale: {
+      description: 'Locale used for formatting and parsing.',
+      type: 'Intl.LocalesArgument',
+      default: 'the app locale',
+    },
+    size: {
+      description: 'Height of the field.',
+      type: '"sm" | "default" | "lg"',
+      default: '"default"',
+    },
+    allowWheelScrub: {
+      description: 'Change the value with the mouse wheel while focused.',
+      type: 'boolean',
+      default: 'false',
+    },
+    disabled: {
+      description: 'Ignores every interaction.',
+      type: 'boolean',
+      default: 'false',
+    },
+    readOnly: {
+      description: 'Shows the value but blocks changes.',
+      type: 'boolean',
+      default: 'false',
+    },
+  }}
+/>
+
+`AutoFormNumber` takes all of the props above except `value`,
+`defaultValue` and `onValueChange` (the form owns those), plus `label`,
+`description`, `placeholder` and `unitLabel`.
+
+## API Reference
+
+[Base UI - Number Field](https://base-ui.com/react/components/number-field)
diff --git a/apps/web/content/docs/ui/pagination.mdx b/apps/web/content/docs/ui/pagination.mdx
new file mode 100644
index 000000000..7c422113c
--- /dev/null
+++ b/apps/web/content/docs/ui/pagination.mdx
@@ -0,0 +1,215 @@
+---
+title: Pagination
+description: Page numbers, previous and next links, and an ellipsis for when there are more pages than anyone wants to click through.
+icon: ChevronsLeftRightEllipsis
+---
+
+## Preview
+
+<Preview name="pagination" />
+
+<Callout title="Building a table?">
+  The [Data Table](/docs/ui/data-table) already paginates for you - page
+  numbers, page size and URL state included. Reach for `Pagination` directly
+  when you render your own list, feed or gallery.
+</Callout>
+
+## Usage
+
+```ts
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@vitnode/core/components/ui/pagination'
+```
+
+```tsx
+<Pagination>
+  <PaginationContent>
+    <PaginationItem>
+      <PaginationPrevious href="?page=1" />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="?page=1">1</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="?page=2" isActive>
+        2
+      </PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="?page=3">3</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationEllipsis />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext href="?page=3" />
+    </PaginationItem>
+  </PaginationContent>
+</Pagination>
+```
+
+Every link renders a real `<a>`, so pages stay crawlable and middle-click still
+opens a new tab. `PaginationPrevious` and `PaginationNext` hide their text below
+the `sm` breakpoint and keep just the chevron, which also flips in RTL
+languages.
+
+## With router links
+
+`PaginationLink` takes any anchor prop. Keep a real `href` for crawlers and new
+tabs, then let TanStack Router handle the click so the page does not reload:
+
+```tsx
+import { useNavigate } from '@tanstack/react-router'
+
+const navigate = useNavigate()
+
+const goTo = (page: number) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+  event.preventDefault()
+  void navigate({ to: '.', search: prev => ({ ...prev, page }) })
+}
+
+<PaginationLink href={`?page=${page}`} isActive={page === current} onClick={goTo(page)}>
+  {page}
+</PaginationLink>
+```
+
+## Ellipsis
+
+Twelve pages do not need twelve buttons. Show the first page, the last page and
+the one you are on, and let `PaginationEllipsis` stand in for the rest. A tiny
+helper keeps the window at five slots, so the row never jumps around:
+
+```tsx
+type PageSlot = 'ellipsis-end' | 'ellipsis-start' | number
+
+const range = (from: number, to: number) =>
+  Array.from({ length: to - from + 1 }, (_, step) => from + step)
+
+const pageWindow = (current: number, total: number): PageSlot[] => {
+  if (total <= 5) return range(1, total)
+  if (current <= 3) return [1, 2, 3, 'ellipsis-end', total]
+  if (current >= total - 2) {
+    return [1, 'ellipsis-start', ...range(total - 2, total)]
+  }
+
+  return [1, 'ellipsis-start', current, 'ellipsis-end', total]
+}
+```
+
+```tsx
+{pageWindow(page, total).map(slot => (
+  <PaginationItem key={slot}>
+    {typeof slot === 'number' ? (
+      <PaginationLink href={`?page=${slot}`} isActive={slot === page}>
+        {slot}
+      </PaginationLink>
+    ) : (
+      <PaginationEllipsis />
+    )}
+  </PaginationItem>
+))}
+```
+
+## Small screens
+
+Even five numbers get crowded on a phone. Give every number's `PaginationItem`
+`className="hidden sm:block"` and show a "Page 2 of 12" line between the arrows
+instead - the same trick the [Data Table](/docs/ui/data-table) uses:
+
+```tsx
+<PaginationItem className="sm:hidden">
+  <span className="text-muted-foreground px-2 text-sm">
+    Page {page} of {total}
+  </span>
+</PaginationItem>
+```
+
+## Disabled ends
+
+There is no page zero (we checked). On the first and last page, drop the `href`
+so the keyboard skips the link, and add `role="link"` with `aria-disabled` so
+screen readers still hear it as an unavailable link:
+
+```tsx
+<PaginationPrevious
+  {...(page > 1
+    ? { href: `?page=${page - 1}` }
+    : { 'aria-disabled': true, className: 'pointer-events-none', role: 'link' })}
+/>
+```
+
+## Custom labels
+
+The previous and next labels are translated out of the box. Pass `text` when
+your feed deserves something more specific:
+
+```tsx
+<PaginationPrevious href="?page=1" text="Newer posts" />
+<PaginationNext href="?page=3" text="Older posts" />
+```
+
+## Accessibility
+
+- `Pagination` is a `nav` landmark labelled "pagination", so screen reader users
+  can jump straight to it.
+- The active link gets `aria-current="page"`, which is announced as the current
+  page.
+- `PaginationPrevious` and `PaginationNext` keep a translated label ("Previous
+  page", "Next page") even when only the chevron is visible.
+- Page links are plain anchors named by their number, so "2" is read as
+  "link, 2" rather than a generic "Go to page".
+- `PaginationEllipsis` is hidden from assistive technology - it is decoration,
+  not a link.
+- Announce page changes that do not reload the page, for example with an
+  `aria-live="polite"` "Page 2 of 12" line like in the preview.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### PaginationLink
+
+<TypeTable
+  type={{
+    href: {
+      description: 'Where the link goes. Leave it out for a disabled end.',
+      type: 'string',
+    },
+    isActive: {
+      description:
+        'Marks the current page with `aria-current="page"` and the outline style.',
+      type: 'boolean',
+      default: 'false',
+    },
+    size: {
+      description: 'The size of the underlying button.',
+      type: 'default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg',
+      default: 'icon',
+    },
+  }}
+/>
+
+### PaginationPrevious / PaginationNext
+
+Accept every `PaginationLink` prop, plus:
+
+<TypeTable
+  type={{
+    text: {
+      description: 'The visible label, shown from the `sm` breakpoint up.',
+      type: 'string',
+      default: '"Previous" / "Next" (translated)',
+    },
+  }}
+/>
+
+## API Reference
+
+[shadcn/ui - Pagination](https://ui.shadcn.com/docs/components/base/pagination)
diff --git a/apps/web/content/docs/ui/popover.mdx b/apps/web/content/docs/ui/popover.mdx
index ef4e8e5a2..00d478bba 100644
--- a/apps/web/content/docs/ui/popover.mdx
+++ b/apps/web/content/docs/ui/popover.mdx
@@ -1,6 +1,7 @@
 ---
 title: Popover
 description: A popover component for displaying additional content on user interaction.
+icon: MessageSquare
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/progress.mdx b/apps/web/content/docs/ui/progress.mdx
index 45072044a..770bf8df0 100644
--- a/apps/web/content/docs/ui/progress.mdx
+++ b/apps/web/content/docs/ui/progress.mdx
@@ -1,6 +1,7 @@
 ---
 title: Progress
 description: A progress component for indicating the completion of a task.
+icon: Hourglass
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/radio-group.mdx b/apps/web/content/docs/ui/radio-group.mdx
index 07f31c261..650184f41 100644
--- a/apps/web/content/docs/ui/radio-group.mdx
+++ b/apps/web/content/docs/ui/radio-group.mdx
@@ -1,6 +1,7 @@
 ---
 title: Radio Group
 description: Pick one option from a list.
+icon: CircleDot
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/resizable.mdx b/apps/web/content/docs/ui/resizable.mdx
new file mode 100644
index 000000000..02c6d94ca
--- /dev/null
+++ b/apps/web/content/docs/ui/resizable.mdx
@@ -0,0 +1,290 @@
+---
+title: Resizable
+description: Resizable panel groups and layouts with draggable, keyboard-friendly handles.
+icon: SquareSplitHorizontal
+---
+
+## Preview
+
+<Preview name="resizable" />
+
+## Usage
+
+```ts
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+```
+
+```tsx
+<div className="h-80">
+  <ResizablePanelGroup className="rounded-lg border">
+    <ResizablePanel defaultSize="35%">Sidebar</ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel>Content</ResizablePanel>
+  </ResizablePanelGroup>
+</div>
+```
+
+A group always fills its parent with an inline `height: 100%`, so a height
+class on the group itself is ignored - give the **parent** a height instead.
+Otherwise your beautiful layout is only as tall as its text, which is very
+minimalist but not very useful.
+
+Groups nest: drop a `ResizablePanelGroup` inside a `ResizablePanel` to split it
+again, like the sidebar + content + terminal combo in the preview.
+
+## Vertical
+
+Set `orientation="vertical"` to stack panels on top of each other.
+
+<Preview name="resizable-vertical" />
+
+```tsx
+<ResizablePanelGroup orientation="vertical">
+  <ResizablePanel defaultSize="30%">Header</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel>Content</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## With handle
+
+Pass `withHandle` to show a small grip on the divider, so people know it is
+meant to be grabbed.
+
+<Preview name="resizable-handle" />
+
+```tsx
+<ResizableHandle withHandle />
+```
+
+## Sizes
+
+`defaultSize`, `minSize` and `maxSize` accept a few units. Mind the type -
+it changes the meaning:
+
+- a **string** without a unit is a percentage: `"30"` and `"30%"` are the same;
+- a **number** is pixels: `minSize={180}` means 180px, not 180%;
+- other CSS units work too: `"12rem"`, `"20vw"`, `"200px"`.
+
+```tsx
+<ResizablePanelGroup>
+  <ResizablePanel defaultSize="25%" maxSize="40%" minSize={180}>
+    Sidebar
+  </ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel minSize="30%">Content</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+Panels without a `defaultSize` share whatever space is left. Double-click a
+handle to snap its panel back to its `defaultSize`.
+
+## Collapsible
+
+Mark a panel `collapsible` and it snaps to `collapsedSize` (default `0%`) once
+it is dragged below its `minSize`. Drag it back out to expand it again.
+
+<Preview name="resizable-collapsible" />
+
+```tsx
+<ResizablePanel collapsedSize="8%" collapsible defaultSize="35%" minSize="25%">
+  Sidebar
+</ResizablePanel>
+```
+
+Need a toggle button? Pass `panelRef` and call `collapse()`, `expand()` or
+`isCollapsed()` on it.
+
+## Persisting the layout
+
+The group takes a `defaultLayout` - a map of panel `id` to percentage - and
+reports every finished resize through `onLayoutChanged`. Wire both to storage
+and the layout survives a reload. Give every panel a stable `id`, since that is
+what the saved layout is keyed by.
+
+<Preview name="resizable-persist" />
+
+```tsx
+const storageKey = 'my-layout'
+
+const readLayout = () => {
+  try {
+    return localStorage.getItem(storageKey)
+  } catch {
+    return null
+  }
+}
+
+export const RememberedLayout = () => {
+  const stored = React.useSyncExternalStore(
+    () => () => {},
+    readLayout,
+    () => null,
+  )
+
+  return (
+    <ResizablePanelGroup
+      defaultLayout={stored ? JSON.parse(stored) : undefined}
+      onLayoutChanged={(layout, meta) => {
+        if (!meta.isUserInteraction) return
+
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify(meta.requestedLayout ?? layout),
+        )
+      }}
+    >
+      <ResizablePanel defaultSize="40%" id="sidebar">
+        Sidebar
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel id="content">Content</ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+```
+
+`useSyncExternalStore` with a server snapshot of `null` keeps server rendering
+happy: the server renders the default sizes and the browser swaps in the saved
+ones. Prefer `meta.requestedLayout` when saving - it is the layout the user
+asked for, before a small screen squeezed it to fit the constraints.
+
+## Accessibility
+
+- Every handle is a focusable `role="separator"` with `aria-valuenow`,
+  `aria-valuemin`, `aria-valuemax` and `aria-controls` pointing at the panel it
+  resizes.
+- Arrow keys resize by 5% - left and right in a horizontal group, up and down in
+  a vertical one.
+- `Home` and `End` push the panel to its minimum or maximum size.
+- `Enter` collapses or expands a `collapsible` panel.
+- `F6` jumps to the next handle in the group (`Shift + F6` goes back).
+- Touch dragging only claims the resize direction, so content inside a panel
+  still scrolls the other way.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### ResizablePanelGroup
+
+<TypeTable
+  type={{
+    orientation: {
+      description: 'The direction panels are laid out and resized in.',
+      type: '"horizontal" | "vertical"',
+      default: '"horizontal"',
+    },
+    defaultLayout: {
+      description:
+        'Initial layout as a map of panel id to percentage (0-100). Use it to restore a saved layout.',
+      type: 'Record<string, number>',
+    },
+    onLayoutChange: {
+      description:
+        'Called on every layout change, including each pointer move while dragging.',
+      type: '(layout: Layout) => void',
+    },
+    onLayoutChanged: {
+      description:
+        'Called once a resize is finished (pointer released or key pressed). The best place to save a layout.',
+      type: '(layout: Layout, meta: { isUserInteraction: boolean; requestedLayout?: Layout }) => void',
+    },
+    disabled: {
+      description: 'Turns resizing off for the whole group.',
+      type: 'boolean',
+      default: 'false',
+    },
+    groupRef: {
+      description: 'Imperative API with `getLayout()` and `setLayout(layout)`.',
+      type: 'Ref<GroupImperativeHandle>',
+    },
+    id: {
+      description: 'Unique id of the group. Falls back to `useId`.',
+      type: 'string | number',
+    },
+  }}
+/>
+
+### ResizablePanel
+
+<TypeTable
+  type={{
+    id: {
+      description:
+        'Unique id of the panel inside its group. Required to persist a layout.',
+      type: 'string | number',
+    },
+    defaultSize: {
+      description:
+        'Initial size. Strings are percentages, numbers are pixels. Remaining space is shared when omitted.',
+      type: 'string | number',
+    },
+    minSize: {
+      description: 'Smallest size the panel can be resized to.',
+      type: 'string | number',
+      default: '"0%"',
+    },
+    maxSize: {
+      description: 'Largest size the panel can be resized to.',
+      type: 'string | number',
+      default: '"100%"',
+    },
+    collapsible: {
+      description: 'Lets the panel collapse when dragged below `minSize`.',
+      type: 'boolean',
+      default: 'false',
+    },
+    collapsedSize: {
+      description: 'Size of the panel when collapsed.',
+      type: 'string | number',
+      default: '"0%"',
+    },
+    disabled: {
+      description:
+        'The panel cannot be resized, directly or by resizing a neighbour.',
+      type: 'boolean',
+      default: 'false',
+    },
+    onResize: {
+      description: 'Called with the new size whenever the panel resizes.',
+      type: '(size: { asPercentage: number; inPixels: number }) => void',
+    },
+    panelRef: {
+      description:
+        'Imperative API with `collapse()`, `expand()`, `getSize()`, `isCollapsed()` and `resize(size)`.',
+      type: 'Ref<PanelImperativeHandle>',
+    },
+  }}
+/>
+
+### ResizableHandle
+
+<TypeTable
+  type={{
+    withHandle: {
+      description: 'Shows a visible grip in the middle of the divider.',
+      type: 'boolean',
+      default: 'false',
+    },
+    disabled: {
+      description: 'This handle cannot be used to resize its panels.',
+      type: 'boolean',
+      default: 'false',
+    },
+    disableDoubleClick: {
+      description:
+        'Stops a double-click from resetting the panels to their default sizes.',
+      type: 'boolean',
+      default: 'false',
+    },
+  }}
+/>
+
+## API Reference
+
+[react-resizable-panels](https://react-resizable-panels.vercel.app/)
diff --git a/apps/web/content/docs/ui/roles.mdx b/apps/web/content/docs/ui/roles.mdx
index eea4c0318..7189147ff 100644
--- a/apps/web/content/docs/ui/roles.mdx
+++ b/apps/web/content/docs/ui/roles.mdx
@@ -1,6 +1,7 @@
 ---
 title: Roles
 description: Search and pick roles for an Auto Form field - one, or as many as you like.
+icon: ShieldUser
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/scroll-area.mdx b/apps/web/content/docs/ui/scroll-area.mdx
index c8032cace..09394c51a 100644
--- a/apps/web/content/docs/ui/scroll-area.mdx
+++ b/apps/web/content/docs/ui/scroll-area.mdx
@@ -1,6 +1,7 @@
 ---
 title: Scroll Area
 description: Container for scrollable content with custom scrollbars.
+icon: ScrollText
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/scroll-fade.mdx b/apps/web/content/docs/ui/scroll-fade.mdx
new file mode 100644
index 000000000..c8714d145
--- /dev/null
+++ b/apps/web/content/docs/ui/scroll-fade.mdx
@@ -0,0 +1,157 @@
+---
+title: Scroll Fade
+description: A Tailwind CSS utility that fades the edges of a scroll container, but only on the side where more content is waiting.
+icon: Blend
+---
+
+## Preview
+
+<Preview name="scroll-fade" />
+
+## Usage
+
+Scroll Fade is a Tailwind CSS utility, not a React component - there is nothing
+to import. It ships with the `shadcn` package, and VitNode apps already pull it
+in from `src/styles.css`:
+
+```css
+@import 'shadcn/tailwind.css';
+```
+
+Add the class to the element that actually scrolls - the one with
+`overflow-y-auto` or `overflow-x-auto`:
+
+```tsx
+<div className="scroll-fade h-64 overflow-y-auto">{/* ... */}</div>
+```
+
+The fade follows the scroll position:
+
+- At rest, the start edge is crisp and the end edge fades to hint that there is
+  more below.
+- Mid-scroll, both edges fade.
+- At the end, the end edge sharpens - you have reached the bottom, congrats.
+- If the content does not overflow, nothing fades, so you can sprinkle it on any
+  list without checking first.
+
+It works with `mask-image`, so it dissolves the content itself instead of
+painting a gradient on top. No colors to match, it just works on any
+background.
+
+| Class              | Fades                                                      |
+| ------------------ | ---------------------------------------------------------- |
+| `scroll-fade`      | Top and bottom (same as `scroll-fade-y`)                   |
+| `scroll-fade-y`    | Top and bottom                                             |
+| `scroll-fade-x`    | Start and end of a horizontal scroller, mirrors in RTL     |
+| `scroll-fade-t`    | Top only                                                   |
+| `scroll-fade-b`    | Bottom only                                                |
+| `scroll-fade-s`    | Inline start only, mirrors in RTL                          |
+| `scroll-fade-e`    | Inline end only, mirrors in RTL                            |
+| `scroll-fade-l`    | Left only, ignores the reading direction                   |
+| `scroll-fade-r`    | Right only, ignores the reading direction                  |
+| `scroll-fade-none` | Nothing - turns the fade off                               |
+
+## Vertical
+
+<Preview name="scroll-fade-vertical" />
+
+Keep the background and border on a wrapper and put `scroll-fade` on the inner
+scroller, so the fade dissolves the list and not your card:
+
+```tsx
+<section className="bg-card rounded-xl border">
+  <h3 className="border-b px-4 py-3">Notifications</h3>
+  <ul
+    aria-label="Notifications"
+    className="scroll-fade h-64 overflow-y-auto"
+    role="region"
+    tabIndex={0}
+  >
+    {/* ... */}
+  </ul>
+</section>
+```
+
+## Horizontal
+
+Use `scroll-fade-x` for rows of chips, cards or breadcrumbs. Pair it with
+`no-scrollbar` (from the same package) when the scrollbar would only fade along
+with the content anyway:
+
+```tsx
+<ul className="scroll-fade-x no-scrollbar flex gap-2 overflow-x-auto">
+  {/* ... */}
+</ul>
+```
+
+VitNode uses exactly this in the [Attachment](/docs/ui/attachment) list and in
+the breadcrumb trail.
+
+## One edge only
+
+Reach for the edge utilities when only one side should react. `scroll-fade-b`
+is great for a chat log that grows downward, `scroll-fade-s` / `scroll-fade-e`
+for horizontal rows that need to respect RTL:
+
+```tsx
+<div className="scroll-fade-b h-80 overflow-y-auto">{/* ... */}</div>
+```
+
+## Fade size
+
+By default the fade is 12% of the container, capped at `40px`, so tall lists
+stay subtle. Set a size on the spacing scale with `scroll-fade-<number>`, or use
+any length or percentage:
+
+```tsx
+<div className="scroll-fade scroll-fade-16 overflow-y-auto" />
+<div className="scroll-fade scroll-fade-[15%] overflow-y-auto" />
+```
+
+Need opposite edges to disagree? `scroll-fade-t-<number>`,
+`scroll-fade-b-<number>`, `scroll-fade-s-<number>` and `scroll-fade-e-<number>`
+override the size for a single edge (arbitrary values work here too):
+
+```tsx
+<div className="scroll-fade scroll-fade-t-2 scroll-fade-b-8 overflow-y-auto" />
+```
+
+The fade eases in over `96px` of scrolling rather than popping in. Tweak that
+distance with the `--scroll-fade-reveal` variable:
+
+```tsx
+<div className="scroll-fade overflow-y-auto [--scroll-fade-reveal:48px]" />
+```
+
+## Turning it off
+
+`scroll-fade-none` removes the mask, which is handy with a breakpoint or a
+state variant:
+
+```tsx
+<div className="scroll-fade-x md:scroll-fade-none overflow-x-auto" />
+```
+
+## Browser support
+
+The scroll-aware part is built on CSS scroll-driven animations
+(`animation-timeline: scroll()`) - no JavaScript, no scroll listeners. Browsers
+without scroll-driven animations get a static fade on every edge the class
+covers, all the time, even at the very top. Content is never hidden, it just
+loses the "you're at the end" polish.
+
+## Accessibility
+
+- The fade is purely visual. Every item is still in the DOM and reachable - it
+  only looks softer near the edges.
+- A scroll container without focusable children cannot be scrolled with a
+  keyboard unless it can take focus. Give it `tabIndex={0}`, `role="region"`
+  and an `aria-label`, like the examples above.
+- The mask also clips focus rings drawn on the scroller itself, so show focus
+  on a wrapper instead, for example `has-focus-visible:ring-3` on the parent.
+- Don't fade so much that the first or last item becomes hard to read; the
+  default size is a safe bet.
+
+## Reference
+
+[shadcn/ui - scroll-fade](https://ui.shadcn.com/docs/utils/scroll-fade)
diff --git a/apps/web/content/docs/ui/select.mdx b/apps/web/content/docs/ui/select.mdx
index 860b868df..1ead2102c 100644
--- a/apps/web/content/docs/ui/select.mdx
+++ b/apps/web/content/docs/ui/select.mdx
@@ -1,6 +1,7 @@
 ---
 title: Select
 description: Choose an option from a list of options.
+icon: SquareChevronDown
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/separator.mdx b/apps/web/content/docs/ui/separator.mdx
index 1d0ed556d..ee971fd9a 100644
--- a/apps/web/content/docs/ui/separator.mdx
+++ b/apps/web/content/docs/ui/separator.mdx
@@ -1,6 +1,7 @@
 ---
 title: Separator
 description: A simple horizontal line to separate content.
+icon: SeparatorHorizontal
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/sheet.mdx b/apps/web/content/docs/ui/sheet.mdx
index 03103f2f6..96e8c883a 100644
--- a/apps/web/content/docs/ui/sheet.mdx
+++ b/apps/web/content/docs/ui/sheet.mdx
@@ -1,6 +1,7 @@
 ---
 title: Sheet
 description: A sheet component for displaying additional content in a modal-like overlay.
+icon: PanelRight
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/shimmer.mdx b/apps/web/content/docs/ui/shimmer.mdx
new file mode 100644
index 000000000..35990e9e6
--- /dev/null
+++ b/apps/web/content/docs/ui/shimmer.mdx
@@ -0,0 +1,157 @@
+---
+title: Shimmer
+description: A Tailwind CSS utility that sweeps a soft highlight across text - the universal sign for "hang on, I'm working on it".
+icon: Sparkles
+---
+
+## Preview
+
+<Preview name="shimmer" />
+
+## Usage
+
+Shimmer is a Tailwind CSS utility, not a React component - there is nothing to
+import. It ships with the `shadcn` package, and VitNode apps already pull it in
+from `src/styles.css`:
+
+```css
+@import 'shadcn/tailwind.css';
+```
+
+Add it to any text element:
+
+```tsx
+<p className="shimmer text-muted-foreground">Generating response...</p>
+```
+
+The highlight is derived from `currentColor`, so it works on muted text, brand
+colors and everything in between. In dark mode it brightens on its own to stay
+visible. It's pure CSS: the text is painted with `background-clip: text` and
+the highlight loops across it every two seconds.
+
+| Class                     | What it does                                       |
+| ------------------------- | -------------------------------------------------- |
+| `shimmer`                 | Turns the effect on                                |
+| `shimmer-color-<color>`   | Sets the highlight color, opacity modifier allowed |
+| `shimmer-duration-<ms>`   | Length of one sweep in milliseconds (default 2000) |
+| `shimmer-spread-<number>` | Width of the highlight band on the spacing scale   |
+| `shimmer-angle-<number>`  | Tilt of the band in degrees (default 20)           |
+| `shimmer-reverse`         | Sweeps the other way                               |
+| `shimmer-once`            | Plays a single sweep instead of looping            |
+| `shimmer-none`            | Renders the text normally                          |
+
+## With a status line
+
+Shimmer pairs nicely with a `Spinner` and the [Marker](/docs/ui/marker)
+component for "the assistant is busy" moments:
+
+```tsx
+import {
+  Marker,
+  MarkerContent,
+  MarkerIcon,
+} from '@vitnode/core/components/ui/marker'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+<Marker role="status">
+  <MarkerIcon>
+    <Spinner />
+  </MarkerIcon>
+  <MarkerContent className="shimmer">Thinking...</MarkerContent>
+</Marker>
+```
+
+## Variants
+
+<Preview name="shimmer-variants" />
+
+### Color
+
+Use any theme color, with an optional opacity modifier, or an arbitrary value:
+
+```tsx
+<p className="shimmer shimmer-color-success">Generating response...</p>
+<p className="shimmer shimmer-color-success/60">Generating response...</p>
+<p className="shimmer shimmer-color-[#378ADD]">Generating response...</p>
+```
+
+### Duration
+
+```tsx
+<p className="shimmer shimmer-duration-1000">In a hurry...</p>
+```
+
+### Spread
+
+The band is `calc(3ch + 40px)` wide by default, so it scales with the font
+size. Set it on the spacing scale or with any length or percentage:
+
+```tsx
+<p className="shimmer shimmer-spread-24">Generating response...</p>
+<p className="shimmer shimmer-spread-[30%]">Generating response...</p>
+```
+
+### Angle
+
+```tsx
+<p className="shimmer shimmer-angle-45">Generating response...</p>
+```
+
+### Reverse
+
+The sweep follows the reading direction out of the box (right to left in RTL).
+`shimmer-reverse` flips it manually:
+
+```tsx
+<p className="shimmer shimmer-reverse">Generating response...</p>
+```
+
+### Play once
+
+`shimmer-once` plays a single sweep - a nice little "done!" when streaming
+finishes. Combine it with `shimmer-duration-<ms>` to set how long it takes, and
+change the element's `key` to play it again:
+
+```tsx
+<p className="shimmer shimmer-once shimmer-duration-1100" key={replays}>
+  Response generated.
+</p>
+```
+
+### Turning it off
+
+`shimmer-none` works in any class order, so it plays well with breakpoints and
+state variants:
+
+```tsx
+<p className="shimmer md:shimmer-none">Generating response...</p>
+```
+
+## Browser support
+
+Shimmer uses relative color syntax and `color-mix()`, which every current
+browser supports. In older browsers the highlight gradient can be dropped and
+the text may render transparent. If you need to support them, apply the class
+only where it works:
+
+```tsx
+<p className="supports-[color:oklch(from_white_l_c_h)]:shimmer">
+  Generating response...
+</p>
+```
+
+## Accessibility
+
+- With reduced motion turned on, the animation stops and the text renders
+  normally - no setup needed. That rule targets the plain `shimmer` class, so
+  if you apply it through a variant (`group-hover:shimmer`), add
+  `motion-reduce:shimmer-none` yourself.
+- Shimmer is decoration, not a loading signal. Screen readers and reduced-motion
+  users never see it, so pair it with real text inside `role="status"` - like
+  "Thinking..." in the examples above.
+- Keep it on short status text. A whole paragraph sparkling away is more disco
+  than progress.
+
+## Reference
+
+[shadcn/ui - shimmer](https://ui.shadcn.com/docs/utils/shimmer)
diff --git a/apps/web/content/docs/ui/skeleton.mdx b/apps/web/content/docs/ui/skeleton.mdx
index a3818a8f9..70a4461e6 100644
--- a/apps/web/content/docs/ui/skeleton.mdx
+++ b/apps/web/content/docs/ui/skeleton.mdx
@@ -1,6 +1,7 @@
 ---
 title: Skeleton
 description: A placeholder component for loading states.
+icon: SquareDashed
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/sonner.mdx b/apps/web/content/docs/ui/sonner.mdx
deleted file mode 100644
index 102b459bf..000000000
--- a/apps/web/content/docs/ui/sonner.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Sonner
-description: A toast notification component for displaying messages to users.
----
-
-## Preview
-
-<Preview name="sonner" />
-
-## Usage
-
-```ts
-import { toast } from 'sonner';
-```
-
-```ts
-toast('Event has been created', {
-  description: 'Sunday, December 03, 2023 at 9:00 AM',
-  action: {
-    label: 'Undo',
-    onClick: () => console.log('Undo'),
-  },
-});
-```
-
-```ts
-toast.error('An error occurred.');
-```
-
-```ts
-toast.success('Operation was successful.');
-```
-
-```ts
-toast.info('Here is some information.');
-```
-
-```ts
-toast.warning('This is a warning.');
-```
-
-## Documentation
-
-[Sonner Documentation](https://sonner.emilkowal.ski/)
diff --git a/apps/web/content/docs/ui/spinner.mdx b/apps/web/content/docs/ui/spinner.mdx
new file mode 100644
index 000000000..253aed72a
--- /dev/null
+++ b/apps/web/content/docs/ui/spinner.mdx
@@ -0,0 +1,129 @@
+---
+title: Spinner
+description: A little spinning circle that says "hold on, it's coming" - in four sizes and any colour.
+icon: Loader
+---
+
+## Preview
+
+<Preview name="spinner" />
+
+## Usage
+
+```ts
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+```
+
+```tsx
+<Spinner />
+```
+
+## Sizes
+
+| Size      | Pixels | Good for                          |
+| --------- | ------ | --------------------------------- |
+| `sm`      | 12     | Badges, dense rows                |
+| `default` | 16     | Buttons, inputs, inline with text |
+| `lg`      | 24     | Cards and panels                  |
+| `xl`      | 40     | A whole page or section loading   |
+
+```tsx
+<Spinner size="xl" />
+```
+
+It takes the text colour of its surroundings, so `className="text-primary"`
+(or `text-success`, `text-destructive`...) is all a colour change needs.
+
+## In buttons
+
+<Preview name="spinner-buttons" />
+
+For a button that's busy, prefer `isLoading` on the [Button](/docs/ui/button) -
+it swaps the label for a spinner, disables the button and announces "Loading".
+Put a `Spinner` in by hand when you want to keep the label visible:
+
+```tsx
+<Button disabled>
+  <Spinner aria-hidden="true" />
+  Uploading...
+</Button>
+```
+
+## In badges, inputs and text
+
+<Preview name="spinner-inline" />
+
+```tsx
+<Badge variant="secondary">
+  <Spinner aria-hidden="true" />
+  Syncing
+</Badge>
+
+<InputGroup>
+  <InputGroupInput aria-label="Search" />
+  <InputGroupAddon align="inline-end">
+    <Spinner aria-label="Searching" />
+  </InputGroupAddon>
+</InputGroup>
+```
+
+## Loading states
+
+<Preview name="spinner-states" />
+
+Inside an [Empty](/docs/ui/empty) state, or laid over a card that's fetching
+fresh data:
+
+```tsx
+<Card aria-busy="true" className="relative overflow-hidden">
+  ...
+  <div className="bg-background/70 absolute inset-0 flex items-center justify-center backdrop-blur-xs">
+    <Spinner size="lg" />
+  </div>
+</Card>
+```
+
+Showing a whole section while it loads? Center an `xl` spinner - that's what
+VitNode does for Suspense fallbacks across the AdminCP:
+
+```tsx
+<Suspense
+  fallback={
+    <div className="flex items-center justify-center">
+      <Spinner size="xl" />
+    </div>
+  }
+>
+  <SlowThing />
+</Suspense>
+```
+
+If you know roughly what's coming, a [Skeleton](/docs/ui/skeleton) of that
+shape usually feels faster than a spinner.
+
+## Accessibility
+
+- A spinner is a `status` and is labelled "Loading" in the user's language.
+  Pass `aria-label` for something more specific, like "Searching".
+- When text right next to it already says what's happening ("Uploading..."), or
+  the button announces it, hide the spinner with `aria-hidden="true"` so screen
+  readers don't hear it twice.
+- Mark the container that's loading with `aria-busy="true"`.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+  type={{
+    size: {
+      description: 'How big the spinner is.',
+      type: '"sm" | "default" | "lg" | "xl"',
+      default: '"default"',
+    },
+    'aria-label': {
+      description: 'What is loading. Defaults to "Loading", translated.',
+      type: 'string',
+    },
+  }}
+/>
diff --git a/apps/web/content/docs/ui/switch.mdx b/apps/web/content/docs/ui/switch.mdx
index 9ef16fc14..98e354fe9 100644
--- a/apps/web/content/docs/ui/switch.mdx
+++ b/apps/web/content/docs/ui/switch.mdx
@@ -1,6 +1,7 @@
 ---
 title: Switch
 description: Toggle between checked and unchecked states.
+icon: ToggleRight
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/tabs.mdx b/apps/web/content/docs/ui/tabs.mdx
index 39f834db9..afcac9d6f 100644
--- a/apps/web/content/docs/ui/tabs.mdx
+++ b/apps/web/content/docs/ui/tabs.mdx
@@ -1,6 +1,7 @@
 ---
 title: Tabs
 description: Switch between panels of content with an indicator that slides and panels that follow.
+icon: PanelsTopLeft
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/textarea.mdx b/apps/web/content/docs/ui/textarea.mdx
index 41ebf0345..c8bd2ad18 100644
--- a/apps/web/content/docs/ui/textarea.mdx
+++ b/apps/web/content/docs/ui/textarea.mdx
@@ -1,6 +1,7 @@
 ---
 title: Textarea
 description: Input for multi-line text input.
+icon: NotepadText
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/toast.mdx b/apps/web/content/docs/ui/toast.mdx
new file mode 100644
index 000000000..e97bc7df5
--- /dev/null
+++ b/apps/web/content/docs/ui/toast.mdx
@@ -0,0 +1,165 @@
+---
+title: Toast
+description: Short, friendly notifications that pop into the top-right corner - in five colours, with icons, avatars and actions.
+icon: BellRing
+---
+
+## Preview
+
+<Preview name="toast" />
+
+## Usage
+
+VitNode already mounts the toaster for you, so all you need is the `toast`
+function from [Sonner](https://sonner.emilkowal.ski/):
+
+```ts
+import { toast } from 'sonner'
+```
+
+```ts
+toast('Event has been created', {
+  description: 'Sunday, December 03, 2023 at 9:00 AM',
+})
+```
+
+## Variants
+
+Each variant tints the icon, the title and the action button, while the card
+itself stays neutral - so a toast never shouts louder than it has to.
+
+```ts
+toast('Event has been created') // default
+toast.info('You have 2 credits left') // primary colour
+toast.success('Your plan has been upgraded')
+toast.warning('You are running low on storage')
+toast.error('Storage is full')
+```
+
+Pick the variant by what happened, not by the colour you fancy:
+
+- `success` - something finished the way the user hoped.
+- `info` - worth knowing, nothing to worry about.
+- `warning` - nothing broke yet, but the user should take a look.
+- `error` - it failed, and the description should say what to do next.
+
+After a create, edit or delete, show a toast with a `description` so people
+know exactly what changed.
+
+## With an action
+
+```ts
+toast.error('Storage is full', {
+  description: 'Remove some files to free up space.',
+  action: {
+    label: 'Remove',
+    onClick: () => openFileManager(),
+  },
+})
+```
+
+The action button takes the variant's colour too. Add `cancel` for a second,
+quieter button.
+
+## With an avatar
+
+Swap the icon for a picture with `ToastAvatar` - great for anything a person
+did, like an invite, a mention or a new message. Without a `src`, or while the
+image is still loading, it shows the first letter of `alt`.
+
+```ts
+import { ToastAvatar } from '@vitnode/core/components/ui/sonner'
+```
+
+```tsx
+toast('Ada Lovelace invited you', {
+  description: 'Join the "Docs writers" group to start editing.',
+  icon: <ToastAvatar alt="Ada Lovelace" src={user.avatarUrl} />,
+})
+```
+
+Any other element works as `icon` as well - a custom Lucide icon, an emoji or
+your own badge.
+
+## Message with actions
+
+For anything that reads like a message - a reply, a mention, an invite - use
+`ToastMessage` with `toast.custom`. It lays out an avatar, the sender, a
+timestamp, the text and a row of buttons underneath.
+
+```ts
+import { ToastMessage } from '@vitnode/core/components/ui/sonner'
+```
+
+```tsx
+toast.custom(
+  id => (
+    <ToastMessage
+      actions={[
+        { label: 'Dismiss', onClick: () => toast.dismiss(id), variant: 'outline' },
+        { label: 'Reply', onClick: () => openReply(message) },
+      ]}
+      avatar={{ alt: 'Alex Johnson', src: user.avatarUrl }}
+      description="Hey! I've finished the design review."
+      time="2m ago"
+      title="Alex Johnson"
+    />
+  ),
+  { duration: 10000 },
+)
+```
+
+Give message toasts a longer `duration` than the usual few seconds - people
+need time to read, and to decide whether to reply.
+
+## Loading and promises
+
+`toast.promise` shows a spinner while the promise runs, then swaps to the
+success or error variant on its own:
+
+```ts
+toast.promise(publishArticle(), {
+  loading: 'Publishing your article...',
+  success: 'Article published',
+  error: 'Could not publish the article',
+})
+```
+
+## Placement
+
+Toasts show up in the **top-right** corner. To move them, pass `toaster` to
+`VitNodeProviders`:
+
+```tsx
+<VitNodeProviders config={config} toaster={{ position: 'bottom-center' }}>
+  {children}
+</VitNodeProviders>
+```
+
+Available positions: `top-left`, `top-center`, `top-right`, `bottom-left`,
+`bottom-center` and `bottom-right`. On phones the toast stretches across the
+screen, whatever you choose.
+
+## Custom styles
+
+Pass `classNames` to a single toast to restyle it. Your classes are merged with
+the defaults, not swapped for them:
+
+```ts
+toast('Saved', {
+  classNames: { title: 'font-semibold' },
+})
+```
+
+## Accessibility
+
+- Toasts are announced to screen readers through a polite live region.
+- Hovering a toast pauses its timer, so nobody has to race it. Keyboard users
+  can jump to the toasts with <kbd>Alt</kbd> + <kbd>T</kbd>.
+- The close button appears on hover and keyboard focus, and is always visible on
+  touch screens.
+- Colour is never the only signal - every variant has its own icon too.
+
+## Documentation
+
+[Sonner Documentation](https://sonner.emilkowal.ski/)
diff --git a/apps/web/content/docs/ui/toggle-group.mdx b/apps/web/content/docs/ui/toggle-group.mdx
index f18b8e6e1..c1e9f1d71 100644
--- a/apps/web/content/docs/ui/toggle-group.mdx
+++ b/apps/web/content/docs/ui/toggle-group.mdx
@@ -1,6 +1,7 @@
 ---
 title: Toggle Group
 description: A toggle group component for selecting multiple options.
+icon: TextAlignCenter
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/toggle.mdx b/apps/web/content/docs/ui/toggle.mdx
index 979fb9342..503986456 100644
--- a/apps/web/content/docs/ui/toggle.mdx
+++ b/apps/web/content/docs/ui/toggle.mdx
@@ -1,6 +1,7 @@
 ---
 title: Toggle
 description: A toggle component for switching between two states.
+icon: Bold
 ---
 
 ## Preview
diff --git a/apps/web/content/docs/ui/tooltip.mdx b/apps/web/content/docs/ui/tooltip.mdx
index 0349c8ba9..bbe31e442 100644
--- a/apps/web/content/docs/ui/tooltip.mdx
+++ b/apps/web/content/docs/ui/tooltip.mdx
@@ -1,6 +1,7 @@
 ---
 title: Tooltip
 description: A tooltip component for displaying additional information on hover or focus.
+icon: MessageCircleMore
 ---
 
 ## Preview
@@ -41,6 +42,49 @@ import { PlayIcon } from "lucide-react";
 </TooltipWithContent>
 ```
 
+## Group
+
+<Preview name="tooltip-group" />
+
+Got a toolbar full of icon buttons? Wrap it in `TooltipGroup` and use
+`TooltipGroupTrigger` for each button. They all share one tooltip, so moving
+from button to button glides it over - resizing to fit the new text, which
+slides in from the direction you came from - instead of closing and opening
+again every time.
+
+```ts
+import {
+  TooltipGroup,
+  TooltipGroupTrigger,
+} from "@vitnode/core/components/ui/tooltip";
+```
+
+```tsx
+<TooltipGroup>
+  <div aria-label="Formatting" role="toolbar">
+    <TooltipGroupTrigger
+      content="Bold"
+      render={<Button aria-label="Bold" size="icon-sm" variant="ghost" />}
+    >
+      <BoldIcon />
+    </TooltipGroupTrigger>
+    <TooltipGroupTrigger
+      content="Italic"
+      render={<Button aria-label="Italic" size="icon-sm" variant="ghost" />}
+    >
+      <ItalicIcon />
+    </TooltipGroupTrigger>
+  </div>
+</TooltipGroup>
+```
+
+`TooltipGroup` takes `side`, `sideOffset` and `align`, just like
+`TooltipContent`. With reduced motion turned on, the tooltip jumps straight to
+the next button instead of gliding.
+
+A tooltip is a hint, not a label - icon buttons still need their own
+`aria-label`, as above.
+
 ## API Reference
 
 [Base UI - Tooltip](https://base-ui.com/react/components/tooltip)
diff --git a/apps/web/content/docs/ui/user.mdx b/apps/web/content/docs/ui/user.mdx
index 4f17d90cd..7039b1e80 100644
--- a/apps/web/content/docs/ui/user.mdx
+++ b/apps/web/content/docs/ui/user.mdx
@@ -1,6 +1,7 @@
 ---
 title: User
 description: Pick a person by name, with their avatar, for an Auto Form field.
+icon: CircleUser
 ---
 
 ## Preview
diff --git a/apps/web/package.json b/apps/web/package.json
index f2e32c251..950168916 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -42,6 +42,7 @@
     "nitro": "3.0.260903-beta",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
+    "recharts": "^3.10.1",
     "shadcn": "^4.21.0",
     "sonner": "^2.0.8",
     "tailwindcss": "^4.3.3",
diff --git a/apps/web/src/docs/examples/alert-dialog.tsx b/apps/web/src/docs/examples/alert-dialog.tsx
index cdd2190a5..5c89d87b8 100644
--- a/apps/web/src/docs/examples/alert-dialog.tsx
+++ b/apps/web/src/docs/examples/alert-dialog.tsx
@@ -15,11 +15,11 @@ export default function AlertDialogExample() {
   return (
     <AlertDialog>
       <AlertDialogTrigger
-        render={<Button variant="outline">Show Dialog</Button>}
+        render={<Button variant="destructive">Delete account</Button>}
       />
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogTitle>Delete your account?</AlertDialogTitle>
           <AlertDialogDescription>
             This action cannot be undone. This will permanently delete your
             account and remove your data from our servers.
@@ -27,7 +27,9 @@ export default function AlertDialogExample() {
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
+          <AlertDialogAction variant="destructive">
+            Delete account
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/apps/web/src/docs/examples/aspect-ratio.tsx b/apps/web/src/docs/examples/aspect-ratio.tsx
new file mode 100644
index 000000000..4bc40c92e
--- /dev/null
+++ b/apps/web/src/docs/examples/aspect-ratio.tsx
@@ -0,0 +1,33 @@
+import { AspectRatio } from '@vitnode/core/components/ui/aspect-ratio'
+
+import adminDashboardDark from '@/site/home/assets/admin-dashboard-dark-800.webp'
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+
+export default function AspectRatioExample() {
+  return (
+    <figure className="flex w-full flex-col gap-2">
+      <AspectRatio
+        className="bg-muted overflow-hidden rounded-lg border"
+        ratio={16 / 9}
+      >
+        <img
+          alt="VitNode AdminCP dashboard"
+          className="size-full object-cover object-top dark:hidden"
+          decoding="async"
+          loading="lazy"
+          src={adminDashboardLight}
+        />
+        <img
+          alt="VitNode AdminCP dashboard"
+          className="hidden size-full object-cover object-top dark:block"
+          decoding="async"
+          loading="lazy"
+          src={adminDashboardDark}
+        />
+      </AspectRatio>
+      <figcaption className="text-muted-foreground text-center text-sm leading-relaxed">
+        Always 16:9, however wide the screen gets.
+      </figcaption>
+    </figure>
+  )
+}
diff --git a/apps/web/src/docs/examples/attachment-auto-form.tsx b/apps/web/src/docs/examples/attachment-auto-form.tsx
new file mode 100644
index 000000000..a603a2d4e
--- /dev/null
+++ b/apps/web/src/docs/examples/attachment-auto-form.tsx
@@ -0,0 +1,70 @@
+import type { AutoFormFileValue } from '@vitnode/core/components/form/fields/file'
+
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormFile } from '@vitnode/core/components/form/fields/file'
+import { AutoFormFiles } from '@vitnode/core/components/form/fields/files'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+const MAX_BYTES = 5 * 1024 * 1024
+
+let nextFileId = 1
+
+const fakeUpload = async (file: File): Promise<AutoFormFileValue> => {
+  await new Promise((resolve) => {
+    setTimeout(resolve, 1200)
+  })
+
+  return {
+    id: nextFileId++,
+    mimeType: file.type,
+    name: file.name,
+    size: file.size,
+    url: URL.createObjectURL(file),
+  }
+}
+
+export default function AttachmentAutoFormExample() {
+  const formSchema = z.object({
+    avatar: z.number().nullable().default(null),
+    gallery: z.array(z.number()).max(4).default([]),
+  })
+
+  return (
+    <AutoForm
+      fields={[
+        {
+          id: 'avatar',
+          component: (props) => (
+            <AutoFormFile
+              {...props}
+              allowedExtensions={['.png', '.jpg', '.webp']}
+              label="Avatar"
+              maxBytes={MAX_BYTES}
+              onUpload={fakeUpload}
+            />
+          ),
+        },
+        {
+          id: 'gallery',
+          component: (props) => (
+            <AutoFormFiles
+              {...props}
+              allowedExtensions={['.png', '.jpg', '.webp']}
+              label="Gallery"
+              maxBytes={MAX_BYTES}
+              maxItems={4}
+              onUpload={fakeUpload}
+            />
+          ),
+        },
+      ]}
+      formSchema={formSchema}
+      onSubmit={(values) => {
+        toast.success('Files saved', {
+          description: `Avatar #${values.avatar ?? 'none'}, gallery: ${values.gallery.length} file(s).`,
+        })
+      }}
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/attachment.tsx b/apps/web/src/docs/examples/attachment.tsx
new file mode 100644
index 000000000..7e098524e
--- /dev/null
+++ b/apps/web/src/docs/examples/attachment.tsx
@@ -0,0 +1,86 @@
+import {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+} from '@vitnode/core/components/ui/attachment'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+import {
+  FileTextIcon,
+  RotateCcwIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from 'lucide-react'
+
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+
+export default function AttachmentExample() {
+  return (
+    <div className="flex w-full flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Attachment>
+          <AttachmentMedia variant="image">
+            <img alt="" src={adminDashboardLight} />
+          </AttachmentMedia>
+          <AttachmentContent>
+            <AttachmentTitle>dashboard.webp</AttachmentTitle>
+            <AttachmentDescription>48 KB</AttachmentDescription>
+          </AttachmentContent>
+          <AttachmentActions>
+            <AttachmentAction aria-label="Remove dashboard.webp">
+              <XIcon />
+            </AttachmentAction>
+          </AttachmentActions>
+        </Attachment>
+
+        <Attachment state="uploading">
+          <AttachmentMedia>
+            <FileTextIcon />
+          </AttachmentMedia>
+          <AttachmentContent>
+            <AttachmentTitle>release-notes.pdf</AttachmentTitle>
+            <AttachmentDescription>Uploading... · 1.2 MB</AttachmentDescription>
+          </AttachmentContent>
+          <AttachmentActions>
+            <Spinner aria-label="Uploading" className="mx-1.5" />
+          </AttachmentActions>
+        </Attachment>
+
+        <Attachment state="error">
+          <AttachmentMedia>
+            <TriangleAlertIcon />
+          </AttachmentMedia>
+          <AttachmentContent>
+            <AttachmentTitle>holiday-video.mov</AttachmentTitle>
+            <AttachmentDescription>
+              That file is 2 GB. The maximum is 50 MB.
+            </AttachmentDescription>
+          </AttachmentContent>
+          <AttachmentActions>
+            <AttachmentAction aria-label="Retry holiday-video.mov">
+              <RotateCcwIcon />
+            </AttachmentAction>
+          </AttachmentActions>
+        </Attachment>
+      </div>
+
+      <AttachmentGroup>
+        {['cover.webp', 'gallery-1.webp', 'gallery-2.webp'].map((name) => (
+          <Attachment key={name} orientation="vertical">
+            <AttachmentMedia variant="image">
+              <img alt="" src={adminDashboardLight} />
+            </AttachmentMedia>
+            <AttachmentContent>
+              <AttachmentTitle>{name}</AttachmentTitle>
+              <AttachmentDescription>48 KB</AttachmentDescription>
+            </AttachmentContent>
+          </Attachment>
+        ))}
+      </AttachmentGroup>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/avatar.tsx b/apps/web/src/docs/examples/avatar.tsx
new file mode 100644
index 000000000..8f00e7f3f
--- /dev/null
+++ b/apps/web/src/docs/examples/avatar.tsx
@@ -0,0 +1,52 @@
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarGroupItem,
+  AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+
+const team = [
+  { initials: 'AL', name: 'Ada Lovelace' },
+  { initials: 'GH', name: 'Grace Hopper' },
+  { initials: 'AT', name: 'Alan Turing' },
+  { initials: 'KJ', name: 'Katherine Johnson' },
+]
+
+export default function AvatarExample() {
+  return (
+    <div className="not-prose flex flex-col items-center gap-8">
+      <div className="flex items-center gap-4">
+        <Avatar size="sm">
+          <AvatarImage alt="VitNode" src="/logo_vitnode_icon.svg" />
+          <AvatarFallback>VN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage alt="VitNode" src="/logo_vitnode_icon.svg" />
+          <AvatarFallback>VN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage alt="VitNode" src="/logo_vitnode_icon.svg" />
+          <AvatarFallback>VN</AvatarFallback>
+          <AvatarBadge className="bg-success" />
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarFallback>AL</AvatarFallback>
+        </Avatar>
+      </div>
+
+      <AvatarGroup>
+        {team.map((person) => (
+          <AvatarGroupItem key={person.name} label={person.name}>
+            <Avatar size="lg">
+              <AvatarFallback>{person.initials}</AvatarFallback>
+            </Avatar>
+          </AvatarGroupItem>
+        ))}
+        <AvatarGroupCount>+3</AvatarGroupCount>
+      </AvatarGroup>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/bubble.tsx b/apps/web/src/docs/examples/bubble.tsx
new file mode 100644
index 000000000..d36524381
--- /dev/null
+++ b/apps/web/src/docs/examples/bubble.tsx
@@ -0,0 +1,74 @@
+import {
+  Bubble,
+  BubbleContent,
+  BubbleGroup,
+  BubbleReactions,
+} from '@vitnode/core/components/ui/bubble'
+import { Card } from '@vitnode/core/components/ui/card'
+import { toast } from 'sonner'
+
+const suggestions = ['Show me the plugin docs', 'Surprise me']
+
+export default function BubbleExample() {
+  return (
+    <Card
+      aria-label="Chat with the VitNode assistant"
+      className="flex w-full flex-col gap-8 px-4 py-8 sm:px-6"
+      role="log"
+    >
+      <Bubble align="end">
+        <BubbleContent>Hey! Can VitNode do chat bubbles now?</BubbleContent>
+      </Bubble>
+
+      <BubbleGroup>
+        <Bubble variant="muted">
+          <BubbleContent>It sure can.</BubbleContent>
+        </Bubble>
+        <Bubble variant="muted">
+          <BubbleContent>
+            Seven variants, both sides of the conversation, and reactions that
+            hang off the edge like a sticky note.
+          </BubbleContent>
+          <BubbleReactions
+            aria-label="Reactions: party popper, fire"
+            role="img"
+          >
+            <span>🎉</span>
+            <span>🔥</span>
+          </BubbleReactions>
+        </Bubble>
+      </BubbleGroup>
+
+      <Bubble align="end" variant="tinted">
+        <BubbleContent>Okay, I am impressed. What else?</BubbleContent>
+      </Bubble>
+
+      <BubbleGroup>
+        {suggestions.map((suggestion) => (
+          <Bubble key={suggestion} variant="outline">
+            <BubbleContent
+              render={
+                <button
+                  onClick={() =>
+                    toast('You picked a suggestion', {
+                      description: suggestion,
+                    })
+                  }
+                  type="button"
+                />
+              }
+            >
+              {suggestion}
+            </BubbleContent>
+          </Bubble>
+        ))}
+      </BubbleGroup>
+
+      <Bubble variant="destructive">
+        <BubbleContent>
+          Could not load the joke of the day. The joke was too good to send.
+        </BubbleContent>
+      </Bubble>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/button-group.tsx b/apps/web/src/docs/examples/button-group.tsx
new file mode 100644
index 000000000..2dda8eebf
--- /dev/null
+++ b/apps/web/src/docs/examples/button-group.tsx
@@ -0,0 +1,163 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+} from '@vitnode/core/components/ui/button-group'
+import { Card } from '@vitnode/core/components/ui/card'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@vitnode/core/components/ui/dropdown-menu'
+import { Input } from '@vitnode/core/components/ui/input'
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  Archive,
+  ArrowLeft,
+  CalendarClock,
+  ChevronDown,
+  Clock,
+  Flag,
+  Minus,
+  Plus,
+  Search,
+  Trash2,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-react'
+import React from 'react'
+
+const QuantityStepper = () => {
+  const [quantity, setQuantity] = React.useState(1)
+
+  return (
+    <ButtonGroup aria-label="Quantity">
+      <Button
+        aria-label="Decrease quantity"
+        disabled={quantity <= 1}
+        onClick={() => setQuantity((value) => value - 1)}
+        size="icon"
+        variant="outline"
+      >
+        <Minus />
+      </Button>
+      <ButtonGroupText
+        aria-live="polite"
+        className="bg-card min-w-12 justify-center tabular-nums"
+      >
+        {quantity}
+      </ButtonGroupText>
+      <Button
+        aria-label="Increase quantity"
+        disabled={quantity >= 9}
+        onClick={() => setQuantity((value) => value + 1)}
+        size="icon"
+        variant="outline"
+      >
+        <Plus />
+      </Button>
+    </ButtonGroup>
+  )
+}
+
+export default function ButtonGroupExample() {
+  return (
+    <Card className="flex w-full flex-col items-center gap-6 p-6 md:p-8">
+      <ButtonGroup
+        aria-label="Message actions"
+        className="flex-wrap justify-center"
+      >
+        <ButtonGroup>
+          <Button aria-label="Go back" size="icon" variant="outline">
+            <ArrowLeft />
+          </Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="outline">
+            <Archive data-icon="inline-start" />
+            Archive
+          </Button>
+          <Button aria-label="Report" size="icon" variant="outline">
+            <Flag />
+          </Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="outline">
+            <Clock data-icon="inline-start" />
+            Snooze
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={
+                <Button
+                  aria-label="More snooze options"
+                  size="icon"
+                  variant="outline"
+                />
+              }
+            >
+              <ChevronDown />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <Clock />
+                  Later today
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CalendarClock />
+                  Next week
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive">
+                <Trash2 />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </ButtonGroup>
+      </ButtonGroup>
+
+      <ButtonGroup aria-label="Search members" className="w-full max-w-sm">
+        <Input aria-label="Search members" placeholder="Search members..." />
+        <Button aria-label="Search" size="icon" variant="outline">
+          <Search />
+        </Button>
+      </ButtonGroup>
+
+      <div className="flex flex-wrap items-center justify-center gap-6">
+        <ButtonGroup aria-label="Text alignment">
+          <Button aria-label="Align left" size="icon" variant="secondary">
+            <AlignLeft />
+          </Button>
+          <ButtonGroupSeparator />
+          <Button aria-label="Align center" size="icon" variant="secondary">
+            <AlignCenter />
+          </Button>
+          <ButtonGroupSeparator />
+          <Button aria-label="Align right" size="icon" variant="secondary">
+            <AlignRight />
+          </Button>
+        </ButtonGroup>
+
+        <QuantityStepper />
+
+        <ButtonGroup aria-label="Zoom" orientation="vertical">
+          <Button aria-label="Zoom in" size="icon-sm" variant="outline">
+            <ZoomIn />
+          </Button>
+          <Button aria-label="Zoom out" size="icon-sm" variant="outline">
+            <ZoomOut />
+          </Button>
+        </ButtonGroup>
+      </div>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/card-border-separation.tsx b/apps/web/src/docs/examples/card-border-separation.tsx
new file mode 100644
index 000000000..3974e69f6
--- /dev/null
+++ b/apps/web/src/docs/examples/card-border-separation.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@vitnode/core/components/ui/card'
+
+export default function CardBorderSeparationExample() {
+  return (
+    <Card className="w-full max-w-xs gap-0 p-0">
+      <CardHeader className="flex items-center justify-between px-4 py-2">
+        <CardTitle>Header</CardTitle>
+        <CardAction>
+          <Button variant="outline">Action</Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="border-y px-4 py-3">
+        <p>
+          The content has border-y applied, splitting the card into three clean
+          sections.
+        </p>
+      </CardContent>
+      <CardFooter className="border-none px-4 py-3">
+        <Button className="w-full" variant="outline">
+          Action
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/card-header-border.tsx b/apps/web/src/docs/examples/card-header-border.tsx
new file mode 100644
index 000000000..26e3b77d6
--- /dev/null
+++ b/apps/web/src/docs/examples/card-header-border.tsx
@@ -0,0 +1,26 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@vitnode/core/components/ui/card'
+
+export default function CardHeaderBorderExample() {
+  return (
+    <Card className="w-full max-w-xs">
+      <CardHeader className="border-b">
+        <CardTitle>Header with Border</CardTitle>
+        <CardDescription>
+          This is a card with a header that has a bottom border.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The header has a border-b class applied, creating a visual separation
+          between the header and content sections.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/card-header-footer.tsx b/apps/web/src/docs/examples/card-header-footer.tsx
new file mode 100644
index 000000000..b285ffde4
--- /dev/null
+++ b/apps/web/src/docs/examples/card-header-footer.tsx
@@ -0,0 +1,29 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@vitnode/core/components/ui/card'
+
+export default function CardHeaderFooterExample() {
+  return (
+    <Card className="w-full max-w-xs">
+      <CardHeader className="border-b">
+        <CardTitle>Header with Border</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The footer has a top border and a soft background, creating a visual
+          separation between the content and footer sections.
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full" variant="outline">
+          Action
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/card-link.tsx b/apps/web/src/docs/examples/card-link.tsx
new file mode 100644
index 000000000..90a801cb3
--- /dev/null
+++ b/apps/web/src/docs/examples/card-link.tsx
@@ -0,0 +1,37 @@
+import { buttonVariants } from '@vitnode/core/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@vitnode/core/components/ui/card'
+import { cn } from 'cn'
+import { ExternalLinkIcon } from 'lucide-react'
+
+export default function CardLinkExample() {
+  return (
+    <Card className="w-full max-w-xs gap-2 pt-5">
+      <CardHeader>
+        <CardTitle>Need a help in Claim?</CardTitle>
+      </CardHeader>
+      <CardContent className="mb-2">
+        <p>
+          Go to this step by step guideline process on how to certify for your
+          weekly benefits:
+        </p>
+      </CardContent>
+      <CardFooter className="py-2">
+        <a
+          className={cn(buttonVariants({ variant: 'link' }), 'px-0')}
+          href="https://vitnode.com"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          See our guideline
+          <ExternalLinkIcon aria-hidden="true" />
+        </a>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/card.tsx b/apps/web/src/docs/examples/card.tsx
index 2b1ad5b1c..75de9f481 100644
--- a/apps/web/src/docs/examples/card.tsx
+++ b/apps/web/src/docs/examples/card.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@vitnode/core/components/ui/button'
 import {
   Card,
-  CardAction,
   CardContent,
   CardDescription,
   CardFooter,
@@ -10,16 +10,23 @@ import {
 
 export default function CardExample() {
   return (
-    <Card>
+    <Card className="w-full max-w-xs">
       <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card Description</CardDescription>
+        <CardTitle>Default Card</CardTitle>
+        <CardDescription>
+          This card uses the default size variant.
+        </CardDescription>
       </CardHeader>
       <CardContent>
-        This is the content of the card. You can put any content here.
+        <p>
+          The card component supports a size prop that defaults to
+          &quot;default&quot; for standard spacing and sizing.
+        </p>
       </CardContent>
       <CardFooter>
-        <CardAction>Action Button</CardAction>
+        <Button className="w-full" variant="outline">
+          Action
+        </Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/web/src/docs/examples/carousel.tsx b/apps/web/src/docs/examples/carousel.tsx
new file mode 100644
index 000000000..15256290f
--- /dev/null
+++ b/apps/web/src/docs/examples/carousel.tsx
@@ -0,0 +1,125 @@
+import type { CarouselApi } from '@vitnode/core/components/ui/carousel'
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@vitnode/core/components/ui/carousel'
+import { cn } from 'cn'
+import { useEffect, useState } from 'react'
+
+import adminContentCreateDark from '@/site/home/assets/admin-content-create-dark-800.webp'
+import adminContentCreateLight from '@/site/home/assets/admin-content-create-light-800.webp'
+import adminDashboardDark from '@/site/home/assets/admin-dashboard-dark-800.webp'
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+import adminIntegrationsDark from '@/site/home/assets/admin-integrations-dark-800.webp'
+import adminIntegrationsLight from '@/site/home/assets/admin-integrations-light-800.webp'
+import adminRolesDark from '@/site/home/assets/admin-roles-dark-800.webp'
+import adminRolesLight from '@/site/home/assets/admin-roles-light-800.webp'
+import publicLoginDark from '@/site/home/assets/public-login-dark-800.webp'
+import publicLoginLight from '@/site/home/assets/public-login-light-800.webp'
+
+const SLIDES = [
+  { title: 'Dashboard', light: adminDashboardLight, dark: adminDashboardDark },
+  {
+    title: 'Content editor',
+    light: adminContentCreateLight,
+    dark: adminContentCreateDark,
+  },
+  {
+    title: 'Integrations',
+    light: adminIntegrationsLight,
+    dark: adminIntegrationsDark,
+  },
+  { title: 'Roles', light: adminRolesLight, dark: adminRolesDark },
+  { title: 'Sign in', light: publicLoginLight, dark: publicLoginDark },
+]
+
+export default function CarouselExample() {
+  const [api, setApi] = useState<CarouselApi>()
+  const [current, setCurrent] = useState(0)
+
+  useEffect(() => {
+    if (!api) return
+
+    const onSelect = () => {
+      setCurrent(api.selectedScrollSnap())
+    }
+
+    api.on('select', onSelect)
+    api.on('reInit', onSelect)
+
+    return () => {
+      api.off('select', onSelect)
+      api.off('reInit', onSelect)
+    }
+  }, [api])
+
+  return (
+    <Carousel
+      aria-label="VitNode screenshots"
+      className="flex w-full flex-col gap-4"
+      opts={{ loop: true }}
+      setApi={setApi}
+    >
+      <CarouselContent>
+        {SLIDES.map(({ title, light, dark }, index) => (
+          <CarouselItem
+            aria-label={`${index + 1} of ${SLIDES.length}`}
+            key={title}
+          >
+            <figure className="flex flex-col gap-2">
+              <div className="bg-muted aspect-video overflow-hidden rounded-lg border">
+                <img
+                  alt={`VitNode ${title} screen`}
+                  className="size-full object-cover object-top dark:hidden"
+                  decoding="async"
+                  loading="lazy"
+                  src={light}
+                />
+                <img
+                  alt={`VitNode ${title} screen`}
+                  className="hidden size-full object-cover object-top dark:block"
+                  decoding="async"
+                  loading="lazy"
+                  src={dark}
+                />
+              </div>
+              <figcaption className="text-muted-foreground text-center text-sm leading-relaxed">
+                {title}
+              </figcaption>
+            </figure>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+
+      <div className="flex items-center justify-between gap-4">
+        <CarouselPrevious className="static translate-y-0" />
+        <div className="flex items-center gap-1">
+          {SLIDES.map(({ title }, index) => (
+            <button
+              aria-current={index === current}
+              aria-label={`Go to slide ${index + 1}: ${title}`}
+              className="focus-visible:ring-ring/50 flex size-6 items-center justify-center rounded-full outline-none focus-visible:ring-3"
+              key={title}
+              onClick={() => api?.scrollTo(index)}
+              type="button"
+            >
+              <span
+                className={cn(
+                  'h-2 rounded-full transition-all motion-reduce:transition-none',
+                  index === current
+                    ? 'bg-primary w-4'
+                    : 'bg-muted-foreground/40 w-2',
+                )}
+              />
+            </button>
+          ))}
+        </div>
+        <CarouselNext className="static translate-y-0" />
+      </div>
+    </Carousel>
+  )
+}
diff --git a/apps/web/src/docs/examples/cascader-auto-form.tsx b/apps/web/src/docs/examples/cascader-auto-form.tsx
new file mode 100644
index 000000000..07a061bf7
--- /dev/null
+++ b/apps/web/src/docs/examples/cascader-auto-form.tsx
@@ -0,0 +1,51 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormCascader } from '@vitnode/core/components/form/fields/cascader'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { locations } from './cascader-options'
+
+export default function CascaderAutoFormExample() {
+  const formSchema = z.object({
+    office: z.string('Pick an office to continue'),
+    backupOffice: z.string().optional(),
+  })
+
+  return (
+    <AutoForm
+      className="w-full"
+      fields={[
+        {
+          id: 'office',
+          component: (props) => (
+            <AutoFormCascader
+              {...props}
+              description="Where you'll be working most days."
+              label="Office"
+              options={locations}
+              searchable
+            />
+          ),
+        },
+        {
+          id: 'backupOffice',
+          component: (props) => (
+            <AutoFormCascader
+              {...props}
+              label="Backup office"
+              options={locations}
+            />
+          ),
+        },
+      ]}
+      formSchema={formSchema}
+      onSubmit={(values) => {
+        toast.success('Offices saved', {
+          description: [values.office, values.backupOffice]
+            .filter(Boolean)
+            .join(' + '),
+        })
+      }}
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/cascader-options.ts b/apps/web/src/docs/examples/cascader-options.ts
new file mode 100644
index 000000000..3deb27230
--- /dev/null
+++ b/apps/web/src/docs/examples/cascader-options.ts
@@ -0,0 +1,62 @@
+import type { CascaderOption } from '@vitnode/core/components/ui/cascader'
+
+export const locations: CascaderOption[] = [
+  {
+    label: 'Europe',
+    value: 'europe',
+    children: [
+      {
+        label: 'Poland',
+        value: 'poland',
+        children: [
+          { label: 'Warsaw', value: 'warsaw' },
+          { label: 'Kraków', value: 'krakow' },
+          { label: 'Gdańsk', value: 'gdansk' },
+        ],
+      },
+      {
+        label: 'Portugal',
+        value: 'portugal',
+        children: [
+          { label: 'Lisbon', value: 'lisbon' },
+          { label: 'Porto', value: 'porto' },
+        ],
+      },
+      { label: 'Iceland', value: 'iceland', disabled: true },
+    ],
+  },
+  {
+    label: 'Americas',
+    value: 'americas',
+    children: [
+      {
+        label: 'Canada',
+        value: 'canada',
+        children: [
+          { label: 'Vancouver', value: 'vancouver' },
+          { label: 'Montréal', value: 'montreal' },
+        ],
+      },
+      {
+        label: 'Brazil',
+        value: 'brazil',
+        children: [{ label: 'São Paulo', value: 'sao-paulo' }],
+      },
+    ],
+  },
+  {
+    label: 'Asia & Pacific',
+    value: 'apac',
+    children: [
+      {
+        label: 'Japan',
+        value: 'japan',
+        children: [
+          { label: 'Tokyo', value: 'tokyo' },
+          { label: 'Osaka', value: 'osaka' },
+        ],
+      },
+      { label: 'Singapore', value: 'singapore' },
+    ],
+  },
+]
diff --git a/apps/web/src/docs/examples/cascader.tsx b/apps/web/src/docs/examples/cascader.tsx
new file mode 100644
index 000000000..a5e756662
--- /dev/null
+++ b/apps/web/src/docs/examples/cascader.tsx
@@ -0,0 +1,27 @@
+import { Cascader } from '@vitnode/core/components/ui/cascader'
+import { Label } from '@vitnode/core/components/ui/label'
+import React from 'react'
+
+import { locations } from './cascader-options'
+
+export default function CascaderExample() {
+  const [office, setOffice] = React.useState<null | string>('krakow')
+
+  return (
+    <div className="not-prose flex w-full flex-col gap-2">
+      <Label id="cascader-office-label">Office</Label>
+      <Cascader
+        aria-labelledby="cascader-office-label"
+        onValueChange={setOffice}
+        options={locations}
+        placeholder="Pick an office"
+        searchable
+        showClear
+        value={office}
+      />
+      <p className="text-muted-foreground text-sm leading-relaxed">
+        Selected value: <code>{office ?? 'nothing yet'}</code>
+      </p>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/chart-area.tsx b/apps/web/src/docs/examples/chart-area.tsx
new file mode 100644
index 000000000..1d6f2fdad
--- /dev/null
+++ b/apps/web/src/docs/examples/chart-area.tsx
@@ -0,0 +1,115 @@
+import type { ChartConfig } from '@vitnode/core/components/ui/chart'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@vitnode/core/components/ui/card'
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@vitnode/core/components/ui/chart'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+const chartData = [
+  { month: 'January', downloads: 420, upgrades: 120 },
+  { month: 'February', downloads: 610, upgrades: 180 },
+  { month: 'March', downloads: 530, upgrades: 260 },
+  { month: 'April', downloads: 780, upgrades: 240 },
+  { month: 'May', downloads: 920, upgrades: 330 },
+  { month: 'June', downloads: 1080, upgrades: 410 },
+]
+
+const chartConfig = {
+  downloads: {
+    label: 'Downloads',
+    color: 'var(--chart-1)',
+  },
+  upgrades: {
+    label: 'Upgrades',
+    color: 'var(--chart-4)',
+  },
+} satisfies ChartConfig
+
+const shortMonth = (month: string) => month.slice(0, 3)
+
+export default function ChartAreaExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Plugin installs</CardTitle>
+        <CardDescription>Fresh downloads and upgrades, stacked</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          className="aspect-4/3 sm:aspect-video"
+          config={chartConfig}
+        >
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            desc="Plugin downloads and upgrades per month, January to June"
+            margin={{ left: 12, right: 12 }}
+            title="Plugin installs"
+          >
+            <defs>
+              <linearGradient id="fill-downloads" x1="0" x2="0" y1="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-downloads)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-downloads)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fill-upgrades" x1="0" x2="0" y1="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-upgrades)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-upgrades)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              axisLine={false}
+              dataKey="month"
+              tickFormatter={shortMonth}
+              tickLine={false}
+              tickMargin={8}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} cursor={false} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Area
+              dataKey="upgrades"
+              fill="url(#fill-upgrades)"
+              stackId="installs"
+              stroke="var(--color-upgrades)"
+              type="natural"
+            />
+            <Area
+              dataKey="downloads"
+              fill="url(#fill-downloads)"
+              stackId="installs"
+              stroke="var(--color-downloads)"
+              type="natural"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/chart-line.tsx b/apps/web/src/docs/examples/chart-line.tsx
new file mode 100644
index 000000000..6394f8f39
--- /dev/null
+++ b/apps/web/src/docs/examples/chart-line.tsx
@@ -0,0 +1,80 @@
+import type { ChartConfig } from '@vitnode/core/components/ui/chart'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@vitnode/core/components/ui/card'
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@vitnode/core/components/ui/chart'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+const chartData = [
+  { day: 'Monday', responseTime: 182 },
+  { day: 'Tuesday', responseTime: 164 },
+  { day: 'Wednesday', responseTime: 210 },
+  { day: 'Thursday', responseTime: 148 },
+  { day: 'Friday', responseTime: 126 },
+  { day: 'Saturday', responseTime: 98 },
+  { day: 'Sunday', responseTime: 104 },
+]
+
+const chartConfig = {
+  responseTime: {
+    label: 'Response time',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig
+
+const shortDay = (day: string) => day.slice(0, 3)
+
+export default function ChartLineExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>API response time</CardTitle>
+        <CardDescription>Median in milliseconds, last week</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          className="aspect-4/3 sm:aspect-video"
+          config={chartConfig}
+        >
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            desc="Median API response time in milliseconds per day, Monday to Sunday"
+            margin={{ left: 20, right: 20, top: 12 }}
+            title="API response time"
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              axisLine={false}
+              dataKey="day"
+              tickFormatter={shortDay}
+              tickLine={false}
+              tickMargin={8}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="line" />}
+              cursor={false}
+            />
+            <Line
+              activeDot={{ r: 6 }}
+              dataKey="responseTime"
+              dot={{ fill: 'var(--color-responseTime)' }}
+              stroke="var(--color-responseTime)"
+              strokeWidth={2}
+              type="monotone"
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/chart.tsx b/apps/web/src/docs/examples/chart.tsx
new file mode 100644
index 000000000..b439e5f06
--- /dev/null
+++ b/apps/web/src/docs/examples/chart.tsx
@@ -0,0 +1,79 @@
+import type { ChartConfig } from '@vitnode/core/components/ui/chart'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@vitnode/core/components/ui/card'
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@vitnode/core/components/ui/chart'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig
+
+const shortMonth = (month: string) => month.slice(0, 3)
+
+export default function ChartExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Visitors</CardTitle>
+        <CardDescription>January - June 2026</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          className="aspect-4/3 sm:aspect-video"
+          config={chartConfig}
+        >
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            desc="Desktop and mobile visitors per month, January to June 2026"
+            title="Visitors"
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              axisLine={false}
+              dataKey="month"
+              tickFormatter={shortMonth}
+              tickLine={false}
+              tickMargin={10}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="dashed" />}
+              cursor={false}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/combobox-groups.tsx b/apps/web/src/docs/examples/combobox-groups.tsx
new file mode 100644
index 000000000..b8684d5cc
--- /dev/null
+++ b/apps/web/src/docs/examples/combobox-groups.tsx
@@ -0,0 +1,53 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormCombobox } from '@vitnode/core/components/form/fields/combobox'
+import { z } from 'zod'
+
+const timezones = [
+  { group: 'Europe', label: 'London', value: 'europe-london' },
+  { group: 'Europe', label: 'Warsaw', value: 'europe-warsaw' },
+  { group: 'Europe', label: 'Lisbon', value: 'europe-lisbon' },
+  { group: 'Americas', label: 'New York', value: 'america-new-york' },
+  { group: 'Americas', label: 'São Paulo', value: 'america-sao-paulo' },
+  { group: 'Americas', label: 'Vancouver', value: 'america-vancouver' },
+  { group: 'Asia & Pacific', label: 'Tokyo', value: 'asia-tokyo' },
+  { group: 'Asia & Pacific', label: 'Singapore', value: 'asia-singapore' },
+  { group: 'Asia & Pacific', label: 'Sydney', value: 'australia-sydney' },
+]
+
+export default function ComboboxGroupsExample() {
+  const formSchema = z.object({
+    timezone: z.enum([
+      'europe-london',
+      'europe-warsaw',
+      'europe-lisbon',
+      'america-new-york',
+      'america-sao-paulo',
+      'america-vancouver',
+      'asia-tokyo',
+      'asia-singapore',
+      'australia-sydney',
+    ]),
+  })
+
+  return (
+    <AutoForm
+      className="w-full"
+      fields={[
+        {
+          id: 'timezone',
+          component: (props) => (
+            <AutoFormCombobox
+              {...props}
+              description="Used for scheduled posts and email digests."
+              label="Timezone"
+              labels={timezones}
+              placeholder="Search cities..."
+              showClear
+            />
+          ),
+        },
+      ]}
+      formSchema={formSchema}
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/combobox-multiple.tsx b/apps/web/src/docs/examples/combobox-multiple.tsx
new file mode 100644
index 000000000..9b132fe06
--- /dev/null
+++ b/apps/web/src/docs/examples/combobox-multiple.tsx
@@ -0,0 +1,48 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormCombobox } from '@vitnode/core/components/form/fields/combobox'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+const topics = [
+  { value: 'news', label: 'News' },
+  { value: 'guides', label: 'Guides' },
+  { value: 'releases', label: 'Releases' },
+  { value: 'plugins', label: 'Plugins' },
+  { value: 'community', label: 'Community' },
+]
+
+export default function ComboboxMultipleExample() {
+  const formSchema = z.object({
+    topics: z
+      .array(z.enum(['news', 'guides', 'releases', 'plugins', 'community']))
+      .min(1, 'Pick at least one topic'),
+  })
+
+  return (
+    <AutoForm
+      className="w-full"
+      fields={[
+        {
+          id: 'topics',
+          component: (props) => (
+            <AutoFormCombobox
+              {...props}
+              description="Pick as many topics as you like - only the first three show up."
+              label="Topics"
+              labels={topics}
+              maxVisibleChips={3}
+              multiple
+              placeholder="Search topics..."
+            />
+          ),
+        },
+      ]}
+      formSchema={formSchema}
+      onSubmit={(values) => {
+        toast.success('Topics saved', {
+          description: values.topics.join(', '),
+        })
+      }}
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/combobox.tsx b/apps/web/src/docs/examples/combobox.tsx
index 81184d1f7..86479ea34 100644
--- a/apps/web/src/docs/examples/combobox.tsx
+++ b/apps/web/src/docs/examples/combobox.tsx
@@ -9,6 +9,7 @@ export default function ComboboxExample() {
 
   return (
     <AutoForm
+      className="w-full"
       fields={[
         {
           id: 'type',
diff --git a/apps/web/src/docs/examples/command-dialog.tsx b/apps/web/src/docs/examples/command-dialog.tsx
new file mode 100644
index 000000000..69caac39f
--- /dev/null
+++ b/apps/web/src/docs/examples/command-dialog.tsx
@@ -0,0 +1,116 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@vitnode/core/components/ui/command'
+import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'
+import {
+  FileTextIcon,
+  LayoutDashboardIcon,
+  LogOutIcon,
+  MoonIcon,
+  SearchIcon,
+  UserPlusIcon,
+} from 'lucide-react'
+import React from 'react'
+import { toast } from 'sonner'
+
+const subscribeToNothing = () => () => {}
+
+const useIsApple = () =>
+  React.useSyncExternalStore(
+    subscribeToNothing,
+    () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent),
+    () => true,
+  )
+
+const actions = [
+  {
+    group: 'Navigation',
+    items: [
+      { label: 'Dashboard', icon: LayoutDashboardIcon },
+      { label: 'Documentation', icon: FileTextIcon },
+    ],
+  },
+  {
+    group: 'Actions',
+    items: [
+      { label: 'Invite a teammate', icon: UserPlusIcon },
+      { label: 'Toggle dark mode', icon: MoonIcon },
+      { label: 'Sign out', icon: LogOutIcon },
+    ],
+  },
+]
+
+export default function CommandDialogExample() {
+  const [open, setOpen] = React.useState(false)
+  const isApple = useIsApple()
+
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key.toLowerCase() !== 'j') return
+      if (!event.metaKey && !event.ctrlKey) return
+      if (event.altKey || event.shiftKey || event.defaultPrevented) return
+
+      event.preventDefault()
+      setOpen((prev) => !prev)
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  const runAction = (label: string) => {
+    setOpen(false)
+    toast(label, { description: 'Pretend something impressive just happened.' })
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <Button
+        aria-haspopup="dialog"
+        onClick={() => setOpen(true)}
+        variant="outline"
+      >
+        <SearchIcon />
+        Open command palette
+      </Button>
+      <p className="not-prose text-muted-foreground flex items-center gap-2 text-sm leading-relaxed">
+        or press
+        <KbdGroup>
+          <Kbd>{isApple ? '⌘' : 'Ctrl'}</Kbd>
+          <Kbd>J</Kbd>
+        </KbdGroup>
+      </p>
+
+      <CommandDialog onOpenChange={setOpen} open={open}>
+        <Command>
+          <CommandInput placeholder="What do you need?" />
+          <CommandList>
+            <CommandEmpty>Nothing here. Try fewer letters?</CommandEmpty>
+            {actions.map(({ group, items }, index) => (
+              <React.Fragment key={group}>
+                {index > 0 && <CommandSeparator />}
+                <CommandGroup heading={group}>
+                  {items.map(({ label, icon: Icon }) => (
+                    <CommandItem key={label} onSelect={() => runAction(label)}>
+                      <Icon />
+                      <span>{label}</span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </React.Fragment>
+            ))}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/command.tsx b/apps/web/src/docs/examples/command.tsx
new file mode 100644
index 000000000..19d0bc82d
--- /dev/null
+++ b/apps/web/src/docs/examples/command.tsx
@@ -0,0 +1,61 @@
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from '@vitnode/core/components/ui/command'
+import {
+  CalculatorIcon,
+  CalendarIcon,
+  CreditCardIcon,
+  SettingsIcon,
+  SmileIcon,
+  UserIcon,
+} from 'lucide-react'
+
+export default function CommandExample() {
+  return (
+    <Command className="w-full rounded-xl border shadow-md">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <CalendarIcon />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <SmileIcon />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem disabled>
+            <CalculatorIcon />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <UserIcon />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <CreditCardIcon />
+            <span>Billing</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <SettingsIcon />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/web/src/docs/examples/comparison.tsx b/apps/web/src/docs/examples/comparison.tsx
new file mode 100644
index 000000000..8134785ce
--- /dev/null
+++ b/apps/web/src/docs/examples/comparison.tsx
@@ -0,0 +1,31 @@
+import {
+  Comparison,
+  ComparisonHandle,
+  ComparisonItem,
+} from '@vitnode/core/components/ui/comparison'
+
+import adminDashboardDark from '@/site/home/assets/admin-dashboard-dark-800.webp'
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+
+export default function ComparisonExample() {
+  return (
+    <figure className="not-prose flex w-full flex-col gap-2">
+      <Comparison
+        aria-label="Light and dark theme"
+        className="aspect-video rounded-lg border"
+      >
+        <ComparisonItem position="left">
+          <img alt="" draggable={false} src={adminDashboardLight} />
+        </ComparisonItem>
+        <ComparisonItem position="right">
+          <img alt="" draggable={false} src={adminDashboardDark} />
+        </ComparisonItem>
+        <ComparisonHandle />
+      </Comparison>
+      <figcaption className="text-muted-foreground text-center text-sm leading-relaxed">
+        Drag the handle - or focus it and use the arrow keys - to compare the
+        light and dark themes.
+      </figcaption>
+    </figure>
+  )
+}
diff --git a/apps/web/src/docs/examples/confirm-action-alert-dialog.tsx b/apps/web/src/docs/examples/confirm-action-alert-dialog.tsx
index 420593716..21200410a 100644
--- a/apps/web/src/docs/examples/confirm-action-alert-dialog.tsx
+++ b/apps/web/src/docs/examples/confirm-action-alert-dialog.tsx
@@ -1,10 +1,12 @@
 import { ConfirmActionAlertDialog } from '@vitnode/core/components/confirm-action/confirm-action-alert-dialog'
 import { Button } from '@vitnode/core/components/ui/button'
+import { Trash2Icon } from 'lucide-react'
 import { toast } from 'sonner'
 
 export default function ConfirmActionAlertDialogExample() {
   return (
     <ConfirmActionAlertDialog
+      icon={<Trash2Icon />}
       onSubmit={({ onClose }) => {
         toast.success('Category deleted successfully!', {
           description: 'The category has been removed from your list.',
diff --git a/apps/web/src/docs/examples/context-menu.tsx b/apps/web/src/docs/examples/context-menu.tsx
new file mode 100644
index 000000000..ea0e11e12
--- /dev/null
+++ b/apps/web/src/docs/examples/context-menu.tsx
@@ -0,0 +1,109 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from '@vitnode/core/components/ui/context-menu'
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  MousePointerClickIcon,
+  RotateCwIcon,
+  Trash2Icon,
+} from 'lucide-react'
+import React from 'react'
+
+export default function ContextMenuExample() {
+  const [showBookmarks, setShowBookmarks] = React.useState(true)
+  const [showFullUrls, setShowFullUrls] = React.useState(false)
+  const [person, setPerson] = React.useState('pedro')
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="border-muted-foreground/30 bg-muted/40 text-muted-foreground flex h-40 w-full max-w-sm flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-4 text-center">
+        <MousePointerClickIcon aria-hidden="true" className="size-6" />
+        <span className="text-foreground text-sm font-medium text-balance">
+          Right-click here
+        </span>
+        <span className="text-xs leading-relaxed text-pretty">
+          On a touch device, long-press instead.
+        </span>
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            <ArrowLeftIcon />
+            Back
+            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem disabled>
+            <ArrowRightIcon />
+            Forward
+            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <RotateCwIcon />
+            Reload
+            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger inset>More tools</ContextMenuSubTrigger>
+            <ContextMenuSubContent className="w-48">
+              <ContextMenuItem>
+                Save page as...
+                <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem>Create shortcut...</ContextMenuItem>
+              <ContextMenuItem>Name window...</ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem>Developer tools</ContextMenuItem>
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuCheckboxItem
+            checked={showBookmarks}
+            inset
+            onCheckedChange={setShowBookmarks}
+          >
+            Show bookmarks bar
+          </ContextMenuCheckboxItem>
+          <ContextMenuCheckboxItem
+            checked={showFullUrls}
+            inset
+            onCheckedChange={setShowFullUrls}
+          >
+            Show full URLs
+          </ContextMenuCheckboxItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuLabel inset>People</ContextMenuLabel>
+        <ContextMenuRadioGroup onValueChange={setPerson} value={person}>
+          <ContextMenuRadioItem inset value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem inset value="colm">
+            Colm Tuite
+          </ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive">
+          <Trash2Icon />
+          Delete
+          <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/web/src/docs/examples/copy-button.tsx b/apps/web/src/docs/examples/copy-button.tsx
new file mode 100644
index 000000000..237198a96
--- /dev/null
+++ b/apps/web/src/docs/examples/copy-button.tsx
@@ -0,0 +1,32 @@
+import { Card } from '@vitnode/core/components/ui/card'
+import { CopyButton } from '@vitnode/core/components/ui/copy-button'
+
+const installCommand = 'pnpm create vitnode-app@canary'
+
+export default function CopyButtonExample() {
+  return (
+    <Card className="flex w-full flex-col items-center gap-6 p-8">
+      <div className="flex flex-wrap items-center justify-center gap-4">
+        <CopyButton content="Hello from VitNode!" />
+        <CopyButton content="Hello from VitNode!" variant="ghost" />
+        <CopyButton content="Hello from VitNode!" variant="default" />
+        <CopyButton content="Hello from VitNode!" size="icon-sm" />
+        <CopyButton content="Hello from VitNode!" variant="secondary">
+          Copy text
+        </CopyButton>
+      </div>
+
+      <div className="not-prose bg-muted flex w-full items-center gap-2 rounded-md border py-1 ps-3 pe-1">
+        <code className="text-foreground min-w-0 flex-1 truncate font-mono text-sm">
+          {installCommand}
+        </code>
+        <CopyButton
+          aria-label="Copy install command"
+          content={installCommand}
+          size="icon-sm"
+          variant="ghost"
+        />
+      </div>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/counter-sliding-number.tsx b/apps/web/src/docs/examples/counter-sliding-number.tsx
new file mode 100644
index 000000000..bdbccce85
--- /dev/null
+++ b/apps/web/src/docs/examples/counter-sliding-number.tsx
@@ -0,0 +1,40 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import { SlidingNumber } from '@vitnode/core/components/ui/sliding-number'
+import React from 'react'
+
+export default function SlidingNumberExample() {
+  const [downloads, setDownloads] = React.useState(1287)
+
+  return (
+    <div className="not-prose flex flex-col items-center gap-4">
+      <p className="text-muted-foreground text-sm">Downloads this week</p>
+      <SlidingNumber className="text-5xl font-semibold" value={downloads} />
+      <div className="flex flex-wrap justify-center gap-2">
+        <Button
+          onClick={() => {
+            setDownloads((current) => current + 1)
+          }}
+          variant="outline"
+        >
+          +1
+        </Button>
+        <Button
+          onClick={() => {
+            setDownloads((current) => current + 125)
+          }}
+          variant="outline"
+        >
+          +125
+        </Button>
+        <Button
+          onClick={() => {
+            setDownloads(9)
+          }}
+          variant="ghost"
+        >
+          Reset to 9
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/counter.tsx b/apps/web/src/docs/examples/counter.tsx
new file mode 100644
index 000000000..f50fecc43
--- /dev/null
+++ b/apps/web/src/docs/examples/counter.tsx
@@ -0,0 +1,27 @@
+import { Card } from '@vitnode/core/components/ui/card'
+import { Counter } from '@vitnode/core/components/ui/counter'
+import React from 'react'
+
+export default function CounterExample() {
+  const [quantity, setQuantity] = React.useState(1)
+
+  return (
+    <Card className="not-prose flex w-full flex-row items-center justify-between gap-4 p-4">
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <p className="text-sm font-medium" id="counter-ticket-label">
+          Conference ticket
+        </p>
+        <p className="text-muted-foreground text-sm leading-relaxed">
+          Up to 10 per order
+        </p>
+      </div>
+      <Counter
+        aria-labelledby="counter-ticket-label"
+        max={10}
+        min={1}
+        onValueChange={setQuantity}
+        value={quantity}
+      />
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/data-table-demo-users.ts b/apps/web/src/docs/examples/data-table-demo-users.ts
new file mode 100644
index 000000000..5d452cd59
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-demo-users.ts
@@ -0,0 +1,55 @@
+export interface DemoUser {
+  email: string
+  id: number
+  name: string
+  role: 'Admin' | 'Editor' | 'Viewer'
+  status: 'Active' | 'Banned' | 'Invited'
+}
+
+const firstNames = [
+  'Ada',
+  'Alan',
+  'Grace',
+  'Linus',
+  'Margaret',
+  'Dennis',
+  'Katherine',
+  'Ken',
+  'Barbara',
+  'Guido',
+  'Hedy',
+  'Tim',
+]
+const lastNames = [
+  'Lovelace',
+  'Turing',
+  'Hopper',
+  'Torvalds',
+  'Hamilton',
+  'Ritchie',
+  'Johnson',
+  'Thompson',
+  'Liskov',
+  'van Rossum',
+  'Lamarr',
+  'Berners-Lee',
+]
+const roles = ['Admin', 'Editor', 'Viewer', 'Viewer'] as const
+const statuses = ['Active', 'Active', 'Invited', 'Banned'] as const
+
+export const demoUsers: DemoUser[] = Array.from({ length: 36 }, (_, index) => {
+  const first = firstNames[index % firstNames.length] ?? 'Ada'
+  const last =
+    lastNames[
+      (index * 5 + Math.floor(index / firstNames.length)) % lastNames.length
+    ] ?? 'Lovelace'
+
+  return {
+    email:
+      `${first}.${last}`.toLowerCase().replaceAll(' ', '') + '@vitnode.com',
+    id: index + 1,
+    name: `${first} ${last}`,
+    role: roles[index % roles.length] ?? 'Viewer',
+    status: statuses[(index * 3) % statuses.length] ?? 'Active',
+  }
+})
diff --git a/apps/web/src/docs/examples/data-table-expandable.tsx b/apps/web/src/docs/examples/data-table-expandable.tsx
new file mode 100644
index 000000000..21df817ab
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-expandable.tsx
@@ -0,0 +1,182 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+
+import { type ColumnDef, DataTable } from '../preview-data-table'
+
+interface LineItem {
+  name: string
+  price: number
+  quantity: number
+}
+
+interface DemoOrder {
+  customer: string
+  id: number
+  items: LineItem[]
+  number: string
+  shipping: number
+  status: 'Delivered' | 'Draft' | 'Processing' | 'Refunded'
+}
+
+const money = new Intl.NumberFormat('en-US', {
+  currency: 'USD',
+  style: 'currency',
+})
+
+const subtotalOf = (order: DemoOrder) =>
+  order.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+
+const statusVariant = {
+  Delivered: 'success',
+  Draft: 'outline',
+  Processing: 'warning',
+  Refunded: 'destructive',
+} as const
+
+const columns: ColumnDef<DemoOrder>[] = [
+  {
+    accessorKey: 'number',
+    header: 'Order',
+    cell: ({ row }) => <span className="font-medium">{row.number}</span>,
+  },
+  { accessorKey: 'customer', header: 'Customer' },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => (
+      <Badge variant={statusVariant[row.status]}>{row.status}</Badge>
+    ),
+  },
+  {
+    id: 'total',
+    header: 'Total',
+    align: 'right',
+    cell: ({ row }) => (
+      <span className="tabular-nums">
+        {money.format(subtotalOf(row) + row.shipping)}
+      </span>
+    ),
+  },
+]
+
+const edges: DemoOrder[] = [
+  {
+    id: 1,
+    number: '#1042',
+    customer: 'John Doe',
+    status: 'Delivered',
+    shipping: 4.99,
+    items: [
+      { name: 'Mechanical keyboard', price: 89, quantity: 1 },
+      { name: 'Keycap set (Ocean)', price: 24.5, quantity: 2 },
+    ],
+  },
+  {
+    id: 2,
+    number: '#1043',
+    customer: 'Jane Smith',
+    status: 'Processing',
+    shipping: 0,
+    items: [
+      { name: 'Standing desk mat', price: 39, quantity: 1 },
+      { name: 'Cable organizer', price: 12, quantity: 3 },
+      { name: 'Monitor light bar', price: 59, quantity: 1 },
+    ],
+  },
+  {
+    id: 3,
+    number: '#1044',
+    customer: 'Alice Johnson',
+    status: 'Draft',
+    shipping: 0,
+    items: [],
+  },
+  {
+    id: 4,
+    number: '#1045',
+    customer: 'Bob Brown',
+    status: 'Refunded',
+    shipping: 7.5,
+    items: [
+      { name: 'Rubber duck (debugging edition)', price: 9.99, quantity: 4 },
+    ],
+  },
+]
+
+const OrderDetail = ({ order }: { order: DemoOrder }) => {
+  const subtotal = subtotalOf(order)
+
+  return (
+    <div className="not-prose flex max-w-xl flex-col gap-3 text-sm leading-relaxed">
+      <ul
+        aria-label={`Line items for order ${order.number}`}
+        className="flex flex-col gap-2"
+      >
+        {order.items.map((item) => (
+          <li
+            className="flex items-baseline justify-between gap-4"
+            key={item.name}
+          >
+            <span className="text-foreground min-w-0 text-pretty">
+              {item.name}
+              <span className="text-muted-foreground"> × {item.quantity}</span>
+            </span>
+            <span className="tabular-nums">
+              {money.format(item.price * item.quantity)}
+            </span>
+          </li>
+        ))}
+      </ul>
+
+      <dl className="border-foreground/10 flex flex-col gap-1 border-t pt-3">
+        <div className="text-muted-foreground flex justify-between gap-4">
+          <dt>Subtotal</dt>
+          <dd className="tabular-nums">{money.format(subtotal)}</dd>
+        </div>
+        <div className="text-muted-foreground flex justify-between gap-4">
+          <dt>Shipping</dt>
+          <dd className="tabular-nums">
+            {order.shipping ? money.format(order.shipping) : 'Free'}
+          </dd>
+        </div>
+        <div className="flex justify-between gap-4 font-medium">
+          <dt>Total</dt>
+          <dd className="tabular-nums">
+            {money.format(subtotal + order.shipping)}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  )
+}
+
+export default function DataTableExpandableExample() {
+  return (
+    <DataTable
+      columns={columns}
+      edges={edges}
+      expandable={{
+        canExpand: (order) => order.items.length > 0,
+        defaultExpanded: [1],
+        render: (order) => <OrderDetail order={order} />,
+      }}
+      id="orders-expandable-table"
+      order={{
+        defaultOrder: {
+          column: 'number',
+          order: 'asc',
+        },
+      }}
+      pageInfo={{
+        count: edges.length,
+        currentPage: 1,
+        endCursor: null,
+        hasNextPage: false,
+        hasPreviousPage: false,
+        pageSize: 10,
+        startCursor: null,
+        totalCount: edges.length,
+        totalPages: 1,
+      }}
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/data-table-filters.tsx b/apps/web/src/docs/examples/data-table-filters.tsx
new file mode 100644
index 000000000..351b7fabc
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-filters.tsx
@@ -0,0 +1,61 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+
+import { resolveLocalTable } from '../local-table-data'
+import { type ColumnDef, DataTable } from '../preview-data-table'
+import { type DemoUser, demoUsers } from './data-table-demo-users'
+
+const statusVariant = {
+  Active: 'success',
+  Banned: 'destructive',
+  Invited: 'secondary',
+} as const
+
+const columns: ColumnDef<DemoUser>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'role', header: 'Role' },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => (
+      <Badge variant={statusVariant[row.status]}>{row.status}</Badge>
+    ),
+  },
+]
+
+const defaultOrder = { column: 'name', order: 'asc' } as const
+
+export default function DataTableFiltersExample() {
+  return (
+    <DataTable
+      columns={columns}
+      filters={[
+        {
+          id: 'status',
+          label: 'Status',
+          options: [
+            { value: 'Active', label: 'Active' },
+            { value: 'Invited', label: 'Invited' },
+            { value: 'Banned', label: 'Banned' },
+          ],
+        },
+        {
+          id: 'role',
+          label: 'Role',
+          options: [
+            { value: 'Admin', label: 'Admin' },
+            { value: 'Editor', label: 'Editor' },
+            { value: 'Viewer', label: 'Viewer' },
+          ],
+        },
+      ]}
+      id="docs-filters-table"
+      order={{ defaultOrder }}
+      resolve={(params) =>
+        resolveLocalTable(demoUsers, params, {
+          defaultOrder,
+          filters: { role: (row) => row.role, status: (row) => row.status },
+        })
+      }
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/data-table-pagination.tsx b/apps/web/src/docs/examples/data-table-pagination.tsx
new file mode 100644
index 000000000..8aab585a1
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-pagination.tsx
@@ -0,0 +1,24 @@
+import { resolveLocalTable } from '../local-table-data'
+import { type ColumnDef, DataTable } from '../preview-data-table'
+import { type DemoUser, demoUsers } from './data-table-demo-users'
+
+const columns: ColumnDef<DemoUser>[] = [
+  { accessorKey: 'id', header: '#' },
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+]
+
+const defaultOrder = { column: 'id', order: 'asc' } as const
+
+export default function DataTablePaginationExample() {
+  return (
+    <DataTable
+      columns={columns}
+      id="docs-pagination-table"
+      order={{ columns: ['id', 'name'], defaultOrder }}
+      resolve={(params) =>
+        resolveLocalTable(demoUsers, params, { defaultOrder })
+      }
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/data-table-reorderable.tsx b/apps/web/src/docs/examples/data-table-reorderable.tsx
new file mode 100644
index 000000000..2110899dd
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-reorderable.tsx
@@ -0,0 +1,130 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+import { Button } from '@vitnode/core/components/ui/button'
+import { toast } from 'sonner'
+
+import { type ColumnDef, DataTable } from '../preview-data-table'
+
+interface BacklogItem {
+  estimate: number
+  id: number
+  notes: string
+  priority: 'High' | 'Low' | 'Medium'
+  title: string
+}
+
+const priorityVariant = {
+  High: 'destructive',
+  Medium: 'warning',
+  Low: 'outline',
+} as const
+
+const columns: ColumnDef<BacklogItem>[] = [
+  {
+    accessorKey: 'title',
+    header: 'Task',
+    cell: ({ row }) => <span className="font-medium">{row.title}</span>,
+  },
+  {
+    accessorKey: 'priority',
+    header: 'Priority',
+    cell: ({ row }) => (
+      <Badge variant={priorityVariant[row.priority]}>{row.priority}</Badge>
+    ),
+  },
+  {
+    accessorKey: 'estimate',
+    header: 'Estimate',
+    align: 'right',
+    cell: ({ row }) => <span className="tabular-nums">{row.estimate} pt</span>,
+  },
+  {
+    id: 'actions',
+    header: '',
+    align: 'right',
+    cell: ({ row }) => (
+      <Button
+        onClick={() => toast.info(`Editing "${row.title}"`)}
+        size="sm"
+        variant="outline"
+      >
+        Edit
+      </Button>
+    ),
+  },
+]
+
+const edges: BacklogItem[] = [
+  {
+    id: 1,
+    title: 'Fix the login redirect loop',
+    priority: 'High',
+    estimate: 3,
+    notes: 'Happens only after a password reset. Reproduced on Safari 18.',
+  },
+  {
+    id: 2,
+    title: 'Dark mode for the invoice PDF',
+    priority: 'Medium',
+    estimate: 5,
+    notes: 'Accountants asked nicely. Twice.',
+  },
+  {
+    id: 3,
+    title: 'Rename "Misc" to something useful',
+    priority: 'Low',
+    estimate: 1,
+    notes: 'Ideas so far: "Other", "Everything else", "The drawer".',
+  },
+  {
+    id: 4,
+    title: 'Add CSV export to reports',
+    priority: 'Medium',
+    estimate: 8,
+    notes: 'Respect the active filters, and keep the column order.',
+  },
+]
+
+const saveOrder = async (ids: number[]) => {
+  await new Promise((resolve) => setTimeout(resolve, 400))
+  toast.success('Order saved', {
+    description: `New order: ${ids.join(', ')}`,
+  })
+}
+
+export default function DataTableReorderableExample() {
+  return (
+    <DataTable
+      columns={columns}
+      edges={edges}
+      expandable={{
+        render: (item) => (
+          <p className="text-muted-foreground m-0 text-sm leading-relaxed text-pretty">
+            {item.notes}
+          </p>
+        ),
+      }}
+      id="backlog-reorderable-table"
+      order={{
+        defaultOrder: {
+          column: 'id',
+          order: 'asc',
+        },
+      }}
+      pageInfo={{
+        count: edges.length,
+        currentPage: 1,
+        endCursor: null,
+        hasNextPage: false,
+        hasPreviousPage: false,
+        pageSize: 10,
+        startCursor: null,
+        totalCount: edges.length,
+        totalPages: 1,
+      }}
+      reorderable={{
+        getRowLabel: (item) => item.title,
+        onReorder: saveOrder,
+      }}
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/data-table-search.tsx b/apps/web/src/docs/examples/data-table-search.tsx
new file mode 100644
index 000000000..00e7c67f9
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-search.tsx
@@ -0,0 +1,35 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+
+import { resolveLocalTable } from '../local-table-data'
+import { type ColumnDef, DataTable } from '../preview-data-table'
+import { type DemoUser, demoUsers } from './data-table-demo-users'
+
+const columns: ColumnDef<DemoUser>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  {
+    accessorKey: 'role',
+    header: 'Role',
+    cell: ({ row }) => <Badge variant="outline">{row.role}</Badge>,
+  },
+]
+
+const defaultOrder = { column: 'name', order: 'asc' } as const
+
+export default function DataTableSearchExample() {
+  return (
+    <DataTable
+      columns={columns}
+      id="docs-search-table"
+      order={{ columns: ['name'], defaultOrder }}
+      resolve={(params) =>
+        resolveLocalTable(demoUsers, params, {
+          defaultOrder,
+          searchIn: (row) => `${row.name} ${row.email}`,
+        })
+      }
+      search
+      searchPlaceholder="Search users... try 'hopper'"
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/dialog.tsx b/apps/web/src/docs/examples/dialog.tsx
index b6ce6b6bc..100ea7472 100644
--- a/apps/web/src/docs/examples/dialog.tsx
+++ b/apps/web/src/docs/examples/dialog.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@vitnode/core/components/ui/button'
+import { CopyButton } from '@vitnode/core/components/ui/copy-button'
 import {
   Dialog,
   DialogClose,
@@ -9,22 +10,41 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@vitnode/core/components/ui/dialog'
+import { Input } from '@vitnode/core/components/ui/input'
+import { Share2Icon } from 'lucide-react'
+
+const shareLink = 'https://vitnode.com/docs/ui/dialog'
 
 export default function DialogDemo() {
   return (
     <Dialog>
-      <DialogTrigger render={<Button variant="outline">Open</Button>} />
+      <DialogTrigger
+        render={
+          <Button variant="outline">
+            <Share2Icon />
+            Share
+          </Button>
+        }
+      />
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you absolutely sure?</DialogTitle>
+          <DialogTitle>Share this page</DialogTitle>
           <DialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
+            Anyone with the link can read it - no account needed. Spread the
+            word!
           </DialogDescription>
         </DialogHeader>
+        <div className="flex items-center gap-2">
+          <Input
+            aria-label="Page link"
+            className="flex-1"
+            readOnly
+            value={shareLink}
+          />
+          <CopyButton aria-label="Copy link" content={shareLink} />
+        </div>
         <DialogFooter>
-          <DialogClose render={<Button variant="outline">Cancel</Button>} />
-          <Button variant="destructive">Yes, delete account</Button>
+          <DialogClose render={<Button>Done</Button>} />
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/apps/web/src/docs/examples/empty-avatar.tsx b/apps/web/src/docs/examples/empty-avatar.tsx
new file mode 100644
index 000000000..77350c214
--- /dev/null
+++ b/apps/web/src/docs/examples/empty-avatar.tsx
@@ -0,0 +1,37 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+
+export default function EmptyAvatarExample() {
+  return (
+    <Empty className="not-prose p-6 md:p-12">
+      <EmptyHeader>
+        <EmptyMedia>
+          <Avatar size="lg">
+            <AvatarImage alt="" src="/logo_vitnode_icon.svg" />
+            <AvatarFallback>VN</AvatarFallback>
+          </Avatar>
+        </EmptyMedia>
+        <EmptyTitle>Ada is offline</EmptyTitle>
+        <EmptyDescription>
+          She&apos;ll see your message the next time she signs in. Leave a note
+          and she can pick it up from there.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button size="sm">Leave a message</Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/web/src/docs/examples/empty-outline.tsx b/apps/web/src/docs/examples/empty-outline.tsx
new file mode 100644
index 000000000..88bb27ca0
--- /dev/null
+++ b/apps/web/src/docs/examples/empty-outline.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+import { CloudUpload, Upload } from 'lucide-react'
+
+export default function EmptyOutlineExample() {
+  return (
+    <Empty className="not-prose border p-6 md:p-12">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <CloudUpload />
+        </EmptyMedia>
+        <EmptyTitle>No files uploaded</EmptyTitle>
+        <EmptyDescription>
+          This folder is emptier than a Monday morning inbox. Upload a file to
+          share it with your team.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="outline">
+          <Upload />
+          Upload files
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/web/src/docs/examples/empty-search.tsx b/apps/web/src/docs/examples/empty-search.tsx
new file mode 100644
index 000000000..2da72e089
--- /dev/null
+++ b/apps/web/src/docs/examples/empty-search.tsx
@@ -0,0 +1,82 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@vitnode/core/components/ui/input-group'
+import { Search, SearchX } from 'lucide-react'
+import React from 'react'
+
+const integrations = [
+  'Amazon S3',
+  'Nodemailer',
+  'PostgreSQL',
+  'reCAPTCHA',
+  'Redis',
+]
+
+export default function EmptySearchExample() {
+  const [query, setQuery] = React.useState('xylophone')
+  const trimmed = query.trim()
+  const results = integrations.filter((integration) =>
+    integration.toLowerCase().includes(trimmed.toLowerCase()),
+  )
+
+  return (
+    <div className="not-prose flex w-full max-w-md flex-col gap-4">
+      <InputGroup>
+        <InputGroupInput
+          aria-label="Search integrations"
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Search integrations..."
+          value={query}
+        />
+        <InputGroupAddon>
+          <Search />
+        </InputGroupAddon>
+      </InputGroup>
+
+      <p className="sr-only" role="status">
+        {results.length === 1
+          ? '1 integration'
+          : `${results.length} integrations`}
+      </p>
+
+      {results.length > 0 ? (
+        <ul className="flex flex-col divide-y rounded-lg border">
+          {results.map((integration) => (
+            <li className="px-4 py-2 text-sm leading-relaxed" key={integration}>
+              {integration}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <Empty className="border p-6 md:p-8">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <SearchX />
+            </EmptyMedia>
+            <EmptyTitle>No integrations found</EmptyTitle>
+            <EmptyDescription>
+              Nothing matches &ldquo;{trimmed}&rdquo;. Check the spelling or try
+              a shorter search.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button onClick={() => setQuery('')} size="sm" variant="outline">
+              Clear search
+            </Button>
+          </EmptyContent>
+        </Empty>
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/empty.tsx b/apps/web/src/docs/examples/empty.tsx
new file mode 100644
index 000000000..78bb79646
--- /dev/null
+++ b/apps/web/src/docs/examples/empty.tsx
@@ -0,0 +1,37 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+import { ArrowUpRight, FolderCode } from 'lucide-react'
+
+export default function EmptyExample() {
+  return (
+    <Empty className="not-prose p-6 md:p-12">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <FolderCode />
+        </EmptyMedia>
+        <EmptyTitle>No projects yet</EmptyTitle>
+        <EmptyDescription>
+          You haven&apos;t created any projects yet. Start a fresh one or import
+          an existing repository.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <div className="flex flex-wrap justify-center gap-2">
+          <Button>Create project</Button>
+          <Button variant="outline">Import project</Button>
+        </div>
+      </EmptyContent>
+      <Button size="sm" variant="link">
+        Learn more
+        <ArrowUpRight />
+      </Button>
+    </Empty>
+  )
+}
diff --git a/apps/web/src/docs/examples/field-choice-card.tsx b/apps/web/src/docs/examples/field-choice-card.tsx
new file mode 100644
index 000000000..09782de1d
--- /dev/null
+++ b/apps/web/src/docs/examples/field-choice-card.tsx
@@ -0,0 +1,62 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  FieldTitle,
+} from '@vitnode/core/components/ui/field'
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from '@vitnode/core/components/ui/radio-group'
+import React from 'react'
+
+const plans = [
+  {
+    value: 'hobby',
+    title: 'Hobby',
+    description: 'Free forever. Perfect for side quests.',
+  },
+  {
+    value: 'team',
+    title: 'Team',
+    description: 'Shared workspaces and roles for up to 20 people.',
+  },
+  {
+    value: 'enterprise',
+    title: 'Enterprise',
+    description: 'Single sign-on, audit logs and a very patient support team.',
+    disabled: true,
+  },
+]
+
+export default function FieldChoiceCardExample() {
+  const id = React.useId()
+
+  return (
+    <FieldSet className="not-prose w-full">
+      <FieldLegend variant="label">Plan</FieldLegend>
+      <FieldDescription>You can switch plans at any time.</FieldDescription>
+
+      <RadioGroup defaultValue="team">
+        {plans.map((plan) => (
+          <FieldLabel htmlFor={`${id}-${plan.value}`} key={plan.value}>
+            <Field data-disabled={plan.disabled} orientation="horizontal">
+              <FieldContent>
+                <FieldTitle>{plan.title}</FieldTitle>
+                <FieldDescription>{plan.description}</FieldDescription>
+              </FieldContent>
+              <RadioGroupItem
+                disabled={plan.disabled}
+                id={`${id}-${plan.value}`}
+                value={plan.value}
+              />
+            </Field>
+          </FieldLabel>
+        ))}
+      </RadioGroup>
+    </FieldSet>
+  )
+}
diff --git a/apps/web/src/docs/examples/field-responsive.tsx b/apps/web/src/docs/examples/field-responsive.tsx
new file mode 100644
index 000000000..1bc5a9d4a
--- /dev/null
+++ b/apps/web/src/docs/examples/field-responsive.tsx
@@ -0,0 +1,45 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from '@vitnode/core/components/ui/field'
+import { Input } from '@vitnode/core/components/ui/input'
+import { Textarea } from '@vitnode/core/components/ui/textarea'
+import React from 'react'
+
+export default function FieldResponsiveExample() {
+  const id = React.useId()
+
+  return (
+    <FieldGroup className="not-prose w-full">
+      <Field orientation="responsive">
+        <FieldContent>
+          <FieldLabel htmlFor={`${id}-name`}>Display name</FieldLabel>
+          <FieldDescription>Shown next to your posts.</FieldDescription>
+        </FieldContent>
+        <Input
+          className="@md/field-group:max-w-64 @md/field-group:min-w-64"
+          defaultValue="Captain Hook"
+          id={`${id}-name`}
+        />
+      </Field>
+
+      <FieldSeparator />
+
+      <Field orientation="responsive">
+        <FieldContent>
+          <FieldLabel htmlFor={`${id}-bio`}>Bio</FieldLabel>
+          <FieldDescription>A sentence or two. No novels.</FieldDescription>
+        </FieldContent>
+        <Textarea
+          className="@md/field-group:max-w-64 @md/field-group:min-w-64"
+          id={`${id}-bio`}
+          placeholder="I build things and occasionally break them."
+        />
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/web/src/docs/examples/field.tsx b/apps/web/src/docs/examples/field.tsx
new file mode 100644
index 000000000..aef97e005
--- /dev/null
+++ b/apps/web/src/docs/examples/field.tsx
@@ -0,0 +1,89 @@
+import { Checkbox } from '@vitnode/core/components/ui/checkbox'
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+} from '@vitnode/core/components/ui/field'
+import { Input } from '@vitnode/core/components/ui/input'
+import { Switch } from '@vitnode/core/components/ui/switch'
+import React from 'react'
+
+const EMAIL_PATTERN = /^\S+@\S+\.\S+$/
+
+export default function FieldExample() {
+  const id = React.useId()
+  const [backupEmail, setBackupEmail] = React.useState('captain@')
+  const isEmailInvalid = !EMAIL_PATTERN.test(backupEmail)
+
+  return (
+    <FieldSet className="not-prose w-full">
+      <FieldLegend>Notifications</FieldLegend>
+      <FieldDescription>
+        Pick how loudly we should knock on your door.
+      </FieldDescription>
+
+      <FieldGroup>
+        <Field orientation="horizontal">
+          <FieldContent>
+            <FieldLabel htmlFor={`${id}-digest`}>Weekly digest</FieldLabel>
+            <FieldDescription>
+              A short recap of everything you missed, every Monday.
+            </FieldDescription>
+          </FieldContent>
+          <Switch defaultChecked id={`${id}-digest`} />
+        </Field>
+
+        <Field orientation="horizontal">
+          <Checkbox defaultChecked id={`${id}-mentions`} />
+          <FieldContent>
+            <FieldLabel htmlFor={`${id}-mentions`}>Mentions</FieldLabel>
+            <FieldDescription>
+              Ping me when someone writes my name with an @ in front.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+
+        <Field orientation="horizontal">
+          <Checkbox id={`${id}-marketing`} />
+          <FieldLabel htmlFor={`${id}-marketing`}>
+            Product news, at most once a month
+          </FieldLabel>
+        </Field>
+
+        <FieldSeparator />
+
+        <Field data-invalid={isEmailInvalid}>
+          <FieldLabel htmlFor={`${id}-backup-email`}>Backup email</FieldLabel>
+          <Input
+            aria-describedby={
+              isEmailInvalid
+                ? `${id}-backup-email-description ${id}-backup-email-error`
+                : `${id}-backup-email-description`
+            }
+            aria-invalid={isEmailInvalid}
+            id={`${id}-backup-email`}
+            onChange={(event) => {
+              setBackupEmail(event.target.value)
+            }}
+            type="email"
+            value={backupEmail}
+          />
+          <FieldDescription id={`${id}-backup-email-description`}>
+            Only used when your main inbox goes missing.
+          </FieldDescription>
+          {isEmailInvalid && (
+            <FieldError id={`${id}-backup-email-error`}>
+              That does not look like an email address yet.
+            </FieldError>
+          )}
+        </Field>
+      </FieldGroup>
+    </FieldSet>
+  )
+}
diff --git a/apps/web/src/docs/examples/image-zoom.tsx b/apps/web/src/docs/examples/image-zoom.tsx
new file mode 100644
index 000000000..e59e71160
--- /dev/null
+++ b/apps/web/src/docs/examples/image-zoom.tsx
@@ -0,0 +1,30 @@
+import { ImageZoom } from '@vitnode/core/components/ui/image-zoom'
+
+import adminDashboardDark from '@/site/home/assets/admin-dashboard-dark-800.webp'
+import adminDashboardDarkFull from '@/site/home/assets/admin-dashboard-dark.webp'
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+import adminDashboardLightFull from '@/site/home/assets/admin-dashboard-light.webp'
+
+export default function ImageZoomExample() {
+  return (
+    <figure className="not-prose flex w-full flex-col gap-2">
+      <ImageZoom
+        alt="The VitNode AdminCP dashboard"
+        className="dark:hidden"
+        imageClassName="w-full rounded-md border"
+        src={adminDashboardLight}
+        zoomSrc={adminDashboardLightFull}
+      />
+      <ImageZoom
+        alt="The VitNode AdminCP dashboard"
+        className="hidden dark:block"
+        imageClassName="w-full rounded-md border"
+        src={adminDashboardDark}
+        zoomSrc={adminDashboardDarkFull}
+      />
+      <figcaption className="text-muted-foreground text-center text-sm leading-relaxed">
+        Click the screenshot to take a closer look.
+      </figcaption>
+    </figure>
+  )
+}
diff --git a/apps/web/src/docs/examples/input-otp.tsx b/apps/web/src/docs/examples/input-otp.tsx
new file mode 100644
index 000000000..af7b7ebf9
--- /dev/null
+++ b/apps/web/src/docs/examples/input-otp.tsx
@@ -0,0 +1,50 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormInputOTP } from '@vitnode/core/components/form/fields/input-otp'
+import { setFormFieldError } from '@vitnode/core/components/ui/form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+const DEMO_CODE = '123456'
+
+export default function InputOTPExample() {
+  const formSchema = z.object({
+    code: z
+      .string()
+      .length(6, 'Enter all 6 digits')
+      .regex(/^\d+$/, 'Only digits, please'),
+  })
+
+  return (
+    <AutoForm
+      fields={[
+        {
+          id: 'code',
+          component: (props) => (
+            <AutoFormInputOTP
+              {...props}
+              description={`We sent a 6-digit code to a****@vitnode.com. Psst, try ${DEMO_CODE}.`}
+              label="Verify your account"
+            />
+          ),
+        },
+      ]}
+      formSchema={formSchema}
+      onSubmit={(values, form) => {
+        if (values.code !== DEMO_CODE) {
+          setFormFieldError(
+            form,
+            'code',
+            "That code doesn't match. Give it another go.",
+          )
+
+          return
+        }
+
+        toast.success('Code verified', {
+          description: 'Welcome aboard! Your account is now verified.',
+        })
+      }}
+      submitButtonProps={{ children: 'Verify' }}
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/item-group.tsx b/apps/web/src/docs/examples/item-group.tsx
new file mode 100644
index 000000000..788556f92
--- /dev/null
+++ b/apps/web/src/docs/examples/item-group.tsx
@@ -0,0 +1,61 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from '@vitnode/core/components/ui/item'
+import { Plus } from 'lucide-react'
+import { Fragment } from 'react'
+
+const people = [
+  { initials: 'VN', name: 'VitNode Bot', email: 'bot@vitnode.com', logo: true },
+  { initials: 'AL', name: 'Ada Lovelace', email: 'ada@example.com' },
+  { initials: 'GH', name: 'Grace Hopper', email: 'grace@example.com' },
+]
+
+export default function ItemGroupExample() {
+  return (
+    <div className="not-prose flex w-full max-w-md flex-col">
+      <ItemGroup aria-label="Team members">
+        {people.map((person, index) => (
+          <Fragment key={person.email}>
+            {index > 0 && <ItemSeparator />}
+            <Item role="listitem">
+              <ItemMedia>
+                <Avatar>
+                  {person.logo && (
+                    <AvatarImage alt="" src="/logo_vitnode_icon.svg" />
+                  )}
+                  <AvatarFallback>{person.initials}</AvatarFallback>
+                </Avatar>
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>{person.name}</ItemTitle>
+                <ItemDescription>{person.email}</ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                <Button
+                  aria-label={`Invite ${person.name}`}
+                  size="icon-sm"
+                  variant="outline"
+                >
+                  <Plus />
+                </Button>
+              </ItemActions>
+            </Item>
+          </Fragment>
+        ))}
+      </ItemGroup>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/item-header.tsx b/apps/web/src/docs/examples/item-header.tsx
new file mode 100644
index 000000000..430f1e3a7
--- /dev/null
+++ b/apps/web/src/docs/examples/item-header.tsx
@@ -0,0 +1,38 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemHeader,
+  ItemTitle,
+} from '@vitnode/core/components/ui/item'
+
+export default function ItemHeaderExample() {
+  return (
+    <div className="not-prose flex w-full max-w-md flex-col">
+      <Item variant="outline">
+        <ItemHeader>
+          <Badge variant="success">Active</Badge>
+          <span className="text-muted-foreground text-xs">Updated 2h ago</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Weekly newsletter</ItemTitle>
+          <ItemDescription>
+            Sent every Monday to 1,204 subscribers. Nobody has unsubscribed this
+            week, which we choose to take personally.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-xs">
+            Next send: Monday
+          </span>
+          <Button size="sm" variant="outline">
+            Edit
+          </Button>
+        </ItemFooter>
+      </Item>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/item-link.tsx b/apps/web/src/docs/examples/item-link.tsx
new file mode 100644
index 000000000..5c234fcac
--- /dev/null
+++ b/apps/web/src/docs/examples/item-link.tsx
@@ -0,0 +1,56 @@
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from '@vitnode/core/components/ui/item'
+import { BookOpen, ChevronRight, ExternalLink } from 'lucide-react'
+
+export default function ItemLinkExample() {
+  return (
+    <div className="not-prose flex w-full max-w-md flex-col gap-4">
+      <Item
+        render={
+          <a href="/docs/ui/avatar">
+            <ItemMedia variant="icon">
+              <BookOpen />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Read the Avatar docs</ItemTitle>
+              <ItemDescription>
+                The whole row is one link, hover state included.
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <ChevronRight aria-hidden className="size-4" />
+            </ItemActions>
+          </a>
+        }
+      />
+
+      <Item
+        render={
+          <a
+            href="https://ui.shadcn.com/docs/components/base/item"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <ItemContent>
+              <ItemTitle>Inspired by shadcn/ui</ItemTitle>
+              <ItemDescription>
+                Opens in a new tab, so this page stays right here.
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <ExternalLink aria-hidden className="size-4" />
+              <span className="sr-only">(opens in a new tab)</span>
+            </ItemActions>
+          </a>
+        }
+        variant="outline"
+      />
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/item-sizes.tsx b/apps/web/src/docs/examples/item-sizes.tsx
new file mode 100644
index 000000000..74c54034a
--- /dev/null
+++ b/apps/web/src/docs/examples/item-sizes.tsx
@@ -0,0 +1,32 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from '@vitnode/core/components/ui/item'
+import { Inbox } from 'lucide-react'
+
+const sizes = [
+  { size: 'default', title: 'Default size' },
+  { size: 'sm', title: 'Small size' },
+  { size: 'xs', title: 'Extra small size' },
+] as const
+
+export default function ItemSizesExample() {
+  return (
+    <div className="not-prose flex w-full max-w-md flex-col gap-4">
+      {sizes.map((item) => (
+        <Item key={item.size} size={item.size} variant="outline">
+          <ItemMedia variant="icon">
+            <Inbox />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>{item.title}</ItemTitle>
+            <ItemDescription>3 unread messages are waiting.</ItemDescription>
+          </ItemContent>
+        </Item>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/item-variants.tsx b/apps/web/src/docs/examples/item-variants.tsx
new file mode 100644
index 000000000..0b26c59f3
--- /dev/null
+++ b/apps/web/src/docs/examples/item-variants.tsx
@@ -0,0 +1,46 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from '@vitnode/core/components/ui/item'
+
+const variants = [
+  {
+    variant: 'default',
+    title: 'Default',
+    description: 'No border, no background. Blends right into the page.',
+  },
+  {
+    variant: 'outline',
+    title: 'Outline',
+    description: 'A subtle border for rows that need a little structure.',
+  },
+  {
+    variant: 'muted',
+    title: 'Muted',
+    description: 'A soft background for secondary or grouped content.',
+  },
+] as const
+
+export default function ItemVariantsExample() {
+  return (
+    <div className="not-prose flex w-full max-w-md flex-col gap-4">
+      {variants.map((item) => (
+        <Item key={item.variant} variant={item.variant}>
+          <ItemContent>
+            <ItemTitle>{item.title}</ItemTitle>
+            <ItemDescription>{item.description}</ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button size="sm" variant="outline">
+              Open
+            </Button>
+          </ItemActions>
+        </Item>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/item.tsx b/apps/web/src/docs/examples/item.tsx
new file mode 100644
index 000000000..4c924e846
--- /dev/null
+++ b/apps/web/src/docs/examples/item.tsx
@@ -0,0 +1,51 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from '@vitnode/core/components/ui/item'
+import { BadgeCheck, ChevronRight, ShieldCheck } from 'lucide-react'
+
+export default function ItemExample() {
+  return (
+    <div className="not-prose flex w-full max-w-md flex-col gap-6">
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <ShieldCheck />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Two-factor authentication</ItemTitle>
+          <ItemDescription>
+            Add a second lock to your account. Future you will say thanks.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm" variant="outline">
+            Enable
+          </Button>
+        </ItemActions>
+      </Item>
+
+      <Item
+        render={
+          <a href="#as-a-link">
+            <ItemMedia variant="icon">
+              <BadgeCheck />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Your email has been verified</ItemTitle>
+            </ItemContent>
+            <ItemActions>
+              <ChevronRight aria-hidden className="size-4" />
+            </ItemActions>
+          </a>
+        }
+        size="sm"
+        variant="outline"
+      />
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/kbd.tsx b/apps/web/src/docs/examples/kbd.tsx
new file mode 100644
index 000000000..921871867
--- /dev/null
+++ b/apps/web/src/docs/examples/kbd.tsx
@@ -0,0 +1,107 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@vitnode/core/components/ui/input-group'
+import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'
+import { TooltipWithContent } from '@vitnode/core/components/ui/tooltip'
+import { SaveIcon, SearchIcon } from 'lucide-react'
+import React from 'react'
+
+const subscribeToNothing = () => () => {}
+
+const useIsApple = () =>
+  React.useSyncExternalStore(
+    subscribeToNothing,
+    () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent),
+    () => true,
+  )
+
+const modifierKeys = [
+  { symbol: '⌘', name: 'Command' },
+  { symbol: '⇧', name: 'Shift' },
+  { symbol: '⌥', name: 'Option' },
+  { symbol: '⌃', name: 'Control' },
+]
+
+const ModifierKey = () => {
+  const isApple = useIsApple()
+
+  if (isApple) {
+    return (
+      <Kbd>
+        <span aria-hidden="true">⌘</span>
+        <span className="sr-only">Command</span>
+      </Kbd>
+    )
+  }
+
+  return <Kbd>Ctrl</Kbd>
+}
+
+export default function KbdExample() {
+  return (
+    <div className="not-prose flex w-full max-w-sm flex-col items-center gap-6">
+      <div className="flex flex-wrap items-center justify-center gap-2">
+        {modifierKeys.map(({ symbol, name }) => (
+          <Kbd key={name} title={name}>
+            <span aria-hidden="true">{symbol}</span>
+            <span className="sr-only">{name}</span>
+          </Kbd>
+        ))}
+        <Kbd>Esc</Kbd>
+        <Kbd>Enter</Kbd>
+      </div>
+
+      <p className="text-muted-foreground flex flex-wrap items-center justify-center gap-2 text-sm leading-relaxed text-pretty">
+        Open search with
+        <KbdGroup>
+          <ModifierKey />
+          <Kbd>K</Kbd>
+        </KbdGroup>
+        or copy with
+        <KbdGroup>
+          <ModifierKey />
+          <span aria-hidden="true">+</span>
+          <Kbd>C</Kbd>
+        </KbdGroup>
+      </p>
+
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Button size="sm" variant="outline">
+          Accept
+          <Kbd>Enter</Kbd>
+        </Button>
+        <TooltipWithContent
+          text={
+            <>
+              Save changes
+              <KbdGroup>
+                <ModifierKey />
+                <Kbd>S</Kbd>
+              </KbdGroup>
+            </>
+          }
+        >
+          <Button aria-label="Save" size="icon-sm" variant="outline">
+            <SaveIcon />
+          </Button>
+        </TooltipWithContent>
+      </div>
+
+      <InputGroup>
+        <InputGroupInput aria-label="Search" placeholder="Search..." />
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">
+          <KbdGroup>
+            <ModifierKey />
+            <Kbd>K</Kbd>
+          </KbdGroup>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/label.tsx b/apps/web/src/docs/examples/label.tsx
new file mode 100644
index 000000000..d4b9d16a2
--- /dev/null
+++ b/apps/web/src/docs/examples/label.tsx
@@ -0,0 +1,31 @@
+import { Checkbox } from '@vitnode/core/components/ui/checkbox'
+import { Input } from '@vitnode/core/components/ui/input'
+import { Label } from '@vitnode/core/components/ui/label'
+
+export default function LabelExample() {
+  return (
+    <div className="not-prose flex w-full max-w-sm flex-col gap-6">
+      <div className="flex items-center gap-3">
+        <Checkbox id="label-demo-terms" />
+        <Label htmlFor="label-demo-terms">I promise I read the terms</Label>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="label-demo-email">Email</Label>
+        <Input
+          autoComplete="email"
+          id="label-demo-email"
+          placeholder="you@example.com"
+          type="email"
+        />
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Checkbox disabled id="label-demo-newsletter" />
+        <Label htmlFor="label-demo-newsletter">
+          Weekly newsletter (coming soon)
+        </Label>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/marker.tsx b/apps/web/src/docs/examples/marker.tsx
new file mode 100644
index 000000000..259b013db
--- /dev/null
+++ b/apps/web/src/docs/examples/marker.tsx
@@ -0,0 +1,86 @@
+import { Bubble, BubbleContent } from '@vitnode/core/components/ui/bubble'
+import { Card } from '@vitnode/core/components/ui/card'
+import {
+  Marker,
+  MarkerContent,
+  MarkerIcon,
+} from '@vitnode/core/components/ui/marker'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+import { FileText, GitBranch, RotateCcw, Search } from 'lucide-react'
+import { toast } from 'sonner'
+
+export default function MarkerExample() {
+  return (
+    <Card
+      aria-label="Chat with the VitNode assistant"
+      className="not-prose flex w-full flex-col gap-6 px-4 py-8 sm:px-6"
+      role="log"
+    >
+      <Marker variant="separator">
+        <MarkerContent>Today</MarkerContent>
+      </Marker>
+
+      <Bubble align="end">
+        <BubbleContent>Can you clean up the stale routes?</BubbleContent>
+      </Bubble>
+
+      <Marker>
+        <MarkerIcon>
+          <GitBranch />
+        </MarkerIcon>
+        <MarkerContent>Switched to chore/stale-routes</MarkerContent>
+      </Marker>
+
+      <div className="flex flex-col gap-3">
+        <Marker variant="border">
+          <MarkerIcon>
+            <Search />
+          </MarkerIcon>
+          <MarkerContent>Explored 4 files</MarkerContent>
+        </Marker>
+        <Marker variant="border">
+          <MarkerIcon>
+            <FileText />
+          </MarkerIcon>
+          <MarkerContent>Opened routeTree.gen.ts</MarkerContent>
+        </Marker>
+      </div>
+
+      <Bubble variant="muted">
+        <BubbleContent>
+          Done - two routes were older than my coffee. Both are gone.
+        </BubbleContent>
+      </Bubble>
+
+      <Marker
+        render={
+          <button
+            className="hover:text-foreground transition-colors"
+            onClick={() => {
+              toast('Change reverted', {
+                description: 'The stale routes are back. Sorry, coffee.',
+              })
+            }}
+            type="button"
+          />
+        }
+      >
+        <MarkerIcon>
+          <RotateCcw />
+        </MarkerIcon>
+        <MarkerContent>Revert this change</MarkerContent>
+      </Marker>
+
+      <Marker variant="separator">
+        <MarkerContent>Conversation compacted</MarkerContent>
+      </Marker>
+
+      <Marker role="status">
+        <MarkerIcon>
+          <Spinner />
+        </MarkerIcon>
+        <MarkerContent className="shimmer">Thinking...</MarkerContent>
+      </Marker>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/menubar.tsx b/apps/web/src/docs/examples/menubar.tsx
new file mode 100644
index 000000000..fcf4290b4
--- /dev/null
+++ b/apps/web/src/docs/examples/menubar.tsx
@@ -0,0 +1,142 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from '@vitnode/core/components/ui/menubar'
+import React from 'react'
+
+export default function MenubarExample() {
+  const [showBookmarks, setShowBookmarks] = React.useState(true)
+  const [showFullUrls, setShowFullUrls] = React.useState(false)
+  const [profile, setProfile] = React.useState('benoit')
+
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent className="w-56">
+          <MenubarGroup>
+            <MenubarItem>
+              New tab
+              <MenubarShortcut>⌘T</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              New window
+              <MenubarShortcut>⌘N</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>New incognito window</MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent className="w-44">
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print...
+            <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent className="w-56">
+          <MenubarGroup>
+            <MenubarItem>
+              Undo
+              <MenubarShortcut>⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Redo
+              <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent className="w-44">
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find next</MenubarItem>
+              <MenubarItem>Find previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem>Cut</MenubarItem>
+            <MenubarItem>Copy</MenubarItem>
+            <MenubarItem>Paste</MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent className="w-60">
+          <MenubarGroup>
+            <MenubarCheckboxItem
+              checked={showBookmarks}
+              onCheckedChange={setShowBookmarks}
+            >
+              Always show bookmarks bar
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem
+              checked={showFullUrls}
+              onCheckedChange={setShowFullUrls}
+            >
+              Always show full URLs
+            </MenubarCheckboxItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem inset>
+              Reload
+              <MenubarShortcut>⌘R</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled inset>
+              Force reload
+              <MenubarShortcut>⇧⌘R</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle fullscreen</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent className="w-52">
+          <MenubarLabel inset>Switch profile</MenubarLabel>
+          <MenubarRadioGroup onValueChange={setProfile} value={profile}>
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem inset>Edit profiles...</MenubarItem>
+            <MenubarItem inset>Add profile...</MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/web/src/docs/examples/message.tsx b/apps/web/src/docs/examples/message.tsx
new file mode 100644
index 000000000..e9cc7a535
--- /dev/null
+++ b/apps/web/src/docs/examples/message.tsx
@@ -0,0 +1,147 @@
+import {
+  Attachment,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentMedia,
+  AttachmentTitle,
+} from '@vitnode/core/components/ui/attachment'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+import {
+  Bubble,
+  BubbleContent,
+  BubbleReactions,
+} from '@vitnode/core/components/ui/bubble'
+import { Button } from '@vitnode/core/components/ui/button'
+import { Card } from '@vitnode/core/components/ui/card'
+import { Marker, MarkerContent } from '@vitnode/core/components/ui/marker'
+import {
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageGroup,
+  MessageHeader,
+} from '@vitnode/core/components/ui/message'
+import { Copy, FileText, ThumbsUp } from 'lucide-react'
+import { toast } from 'sonner'
+
+export default function MessageExample() {
+  return (
+    <Card
+      aria-label="Team chat"
+      className="not-prose flex w-full flex-col gap-6 px-4 py-8 sm:px-6"
+      role="log"
+    >
+      <Marker variant="separator">
+        <MarkerContent>Today</MarkerContent>
+      </Marker>
+
+      <MessageGroup>
+        <Message>
+          <MessageAvatar />
+          <MessageContent>
+            <MessageHeader className="gap-1.5">
+              <span className="text-foreground">Ava</span>
+              <time dateTime="2026-10-02T09:41">9:41 AM</time>
+            </MessageHeader>
+            <Bubble variant="muted">
+              <BubbleContent>Morning! Did the plugin build pass?</BubbleContent>
+            </Bubble>
+          </MessageContent>
+        </Message>
+        <Message>
+          <MessageAvatar aria-hidden="true">
+            <Avatar>
+              <AvatarFallback>AV</AvatarFallback>
+            </Avatar>
+          </MessageAvatar>
+          <MessageContent>
+            <Bubble variant="muted">
+              <BubbleContent>
+                Asking for a friend. The friend is me.
+              </BubbleContent>
+              <BubbleReactions aria-label="Reactions: eyes" role="img">
+                <span>👀</span>
+              </BubbleReactions>
+            </Bubble>
+          </MessageContent>
+        </Message>
+      </MessageGroup>
+
+      <Message align="end">
+        <MessageContent>
+          <MessageHeader className="sr-only">You</MessageHeader>
+          <Attachment>
+            <AttachmentMedia>
+              <FileText />
+            </AttachmentMedia>
+            <AttachmentContent>
+              <AttachmentTitle>build-log.txt</AttachmentTitle>
+              <AttachmentDescription>TXT · 12 KB</AttachmentDescription>
+            </AttachmentContent>
+          </Attachment>
+          <Bubble>
+            <BubbleContent>Green across the board. Log attached.</BubbleContent>
+          </Bubble>
+          <MessageFooter className="gap-1">
+            Read <time dateTime="2026-10-02T09:43">9:43 AM</time>
+          </MessageFooter>
+        </MessageContent>
+      </Message>
+
+      <Message>
+        <MessageAvatar>
+          <Avatar>
+            <AvatarImage alt="VitNode assistant" src="/logo_vitnode_icon.svg" />
+            <AvatarFallback>VN</AvatarFallback>
+          </Avatar>
+        </MessageAvatar>
+        <MessageContent>
+          <Bubble variant="secondary">
+            <BubbleContent>
+              Congrats! Want me to publish it to the marketplace?
+            </BubbleContent>
+          </Bubble>
+          <MessageFooter>
+            <Button
+              aria-label="Copy message"
+              onClick={() =>
+                toast('Message copied', {
+                  description: 'Pretend it is on your clipboard now.',
+                })
+              }
+              size="icon-xs"
+              title="Copy message"
+              variant="ghost"
+            >
+              <Copy />
+            </Button>
+            <Button
+              aria-label="Good response"
+              onClick={() =>
+                toast('Thanks for the feedback', {
+                  description: 'The assistant is blushing.',
+                })
+              }
+              size="icon-xs"
+              title="Good response"
+              variant="ghost"
+            >
+              <ThumbsUp />
+            </Button>
+          </MessageFooter>
+        </MessageContent>
+      </Message>
+
+      <Marker role="status">
+        <MarkerContent className="shimmer">
+          <span className="font-medium">Ava</span> is typing...
+        </MarkerContent>
+      </Marker>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/nullable-number.tsx b/apps/web/src/docs/examples/nullable-number.tsx
index b0040ac7e..7a8e1bb62 100644
--- a/apps/web/src/docs/examples/nullable-number.tsx
+++ b/apps/web/src/docs/examples/nullable-number.tsx
@@ -1,5 +1,6 @@
 import { AutoForm } from '@vitnode/core/components/form/auto-form'
 import { AutoFormNullableNumber } from '@vitnode/core/components/form/fields/nullable-number'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 export default function NullableNumberExample() {
@@ -10,6 +11,7 @@ export default function NullableNumberExample() {
 
   return (
     <AutoForm
+      className="w-full"
       fields={[
         {
           id: 'max_members',
@@ -37,6 +39,11 @@ export default function NullableNumberExample() {
         },
       ]}
       formSchema={formSchema}
+      onSubmit={(values) => {
+        toast.success('Limits saved', {
+          description: `Members: ${values.max_members ?? 'unlimited'}, auto-logout: ${values.auto_logout ?? 'never'}`,
+        })
+      }}
     />
   )
 }
diff --git a/apps/web/src/docs/examples/number-field-auto-form.tsx b/apps/web/src/docs/examples/number-field-auto-form.tsx
new file mode 100644
index 000000000..c2047fcd0
--- /dev/null
+++ b/apps/web/src/docs/examples/number-field-auto-form.tsx
@@ -0,0 +1,51 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormNumber } from '@vitnode/core/components/form/fields/number'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+export default function NumberFieldAutoFormExample() {
+  const formSchema = z.object({
+    guests: z.number().int().min(1).max(12).default(2),
+    budget: z.number().min(0).default(250),
+  })
+
+  return (
+    <AutoForm
+      className="w-full"
+      fields={[
+        {
+          id: 'guests',
+          component: (props) => (
+            <AutoFormNumber
+              {...props}
+              description="Up to 12 - the table only has so many chairs."
+              label="Guests"
+              max={12}
+              min={1}
+              unitLabel="people"
+            />
+          ),
+        },
+        {
+          id: 'budget',
+          component: (props) => (
+            <AutoFormNumber
+              {...props}
+              format={{ currency: 'USD', style: 'currency' }}
+              label="Budget"
+              largeStep={100}
+              min={0}
+              step={10}
+            />
+          ),
+        },
+      ]}
+      formSchema={formSchema}
+      onSubmit={(values) => {
+        toast.success('Dinner booked', {
+          description: `${values.guests} guests, $${values.budget} to spend.`,
+        })
+      }}
+    />
+  )
+}
diff --git a/apps/web/src/docs/examples/number-field-format.tsx b/apps/web/src/docs/examples/number-field-format.tsx
new file mode 100644
index 000000000..3e5a9a0e3
--- /dev/null
+++ b/apps/web/src/docs/examples/number-field-format.tsx
@@ -0,0 +1,50 @@
+import { Label } from '@vitnode/core/components/ui/label'
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@vitnode/core/components/ui/number-field'
+import React from 'react'
+
+export default function NumberFieldFormatExample() {
+  const priceId = React.useId()
+  const discountId = React.useId()
+
+  return (
+    <div className="not-prose grid w-full gap-4 sm:grid-cols-2">
+      <NumberField
+        defaultValue={19.99}
+        format={{ currency: 'USD', style: 'currency' }}
+        id={priceId}
+        largeStep={10}
+        min={0}
+        step={0.5}
+      >
+        <Label htmlFor={priceId}>Price</Label>
+        <NumberFieldGroup>
+          <NumberFieldDecrement />
+          <NumberFieldInput />
+          <NumberFieldIncrement />
+        </NumberFieldGroup>
+      </NumberField>
+      <NumberField
+        defaultValue={0.15}
+        format={{ style: 'percent' }}
+        id={discountId}
+        largeStep={0.1}
+        max={1}
+        min={0}
+        step={0.01}
+      >
+        <Label htmlFor={discountId}>Discount</Label>
+        <NumberFieldGroup>
+          <NumberFieldDecrement />
+          <NumberFieldInput />
+          <NumberFieldIncrement />
+        </NumberFieldGroup>
+      </NumberField>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/number-field-sizes.tsx b/apps/web/src/docs/examples/number-field-sizes.tsx
new file mode 100644
index 000000000..4217754e5
--- /dev/null
+++ b/apps/web/src/docs/examples/number-field-sizes.tsx
@@ -0,0 +1,25 @@
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@vitnode/core/components/ui/number-field'
+
+const sizes = ['sm', 'default', 'lg'] as const
+
+export default function NumberFieldSizesExample() {
+  return (
+    <div className="not-prose flex w-48 flex-col gap-3">
+      {sizes.map((size) => (
+        <NumberField defaultValue={4} key={size} min={0} size={size}>
+          <NumberFieldGroup>
+            <NumberFieldDecrement />
+            <NumberFieldInput aria-label={`Quantity (${size})`} />
+            <NumberFieldIncrement />
+          </NumberFieldGroup>
+        </NumberField>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/number-field.tsx b/apps/web/src/docs/examples/number-field.tsx
new file mode 100644
index 000000000..8c3d42677
--- /dev/null
+++ b/apps/web/src/docs/examples/number-field.tsx
@@ -0,0 +1,38 @@
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldScrubArea,
+} from '@vitnode/core/components/ui/number-field'
+import React from 'react'
+
+export default function NumberFieldExample() {
+  const id = React.useId()
+  const [coffees, setCoffees] = React.useState<null | number>(2)
+
+  return (
+    <div className="not-prose flex w-56 flex-col gap-3">
+      <NumberField
+        id={id}
+        max={8}
+        min={0}
+        onValueChange={setCoffees}
+        value={coffees}
+      >
+        <NumberFieldScrubArea htmlFor={id} label="Coffees per day" />
+        <NumberFieldGroup>
+          <NumberFieldDecrement />
+          <NumberFieldInput />
+          <NumberFieldIncrement />
+        </NumberFieldGroup>
+      </NumberField>
+      <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
+        {coffees === 8
+          ? 'That is the limit. Your heart says thanks.'
+          : `Value: ${coffees ?? 'empty'}`}
+      </p>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/pagination.tsx b/apps/web/src/docs/examples/pagination.tsx
new file mode 100644
index 000000000..976b7e992
--- /dev/null
+++ b/apps/web/src/docs/examples/pagination.tsx
@@ -0,0 +1,125 @@
+import { Card } from '@vitnode/core/components/ui/card'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@vitnode/core/components/ui/pagination'
+import React from 'react'
+
+const TOTAL_PAGES = 12
+const PER_PAGE = 3
+
+const TOPICS = [
+  'Why my plugin works on my machine',
+  'Naming things, part 47',
+  'A love letter to dark mode',
+  'Migrations I regret',
+  'Tabs vs spaces: the sequel',
+  'Coffee-driven development',
+]
+
+type PageSlot = 'ellipsis-end' | 'ellipsis-start' | number
+
+const range = (from: number, to: number) =>
+  Array.from({ length: to - from + 1 }, (_, step) => from + step)
+
+const pageWindow = (current: number, total: number): PageSlot[] => {
+  if (total <= 5) return range(1, total)
+  if (current <= 3) return [1, 2, 3, 'ellipsis-end', total]
+  if (current >= total - 2) {
+    return [1, 'ellipsis-start', ...range(total - 2, total)]
+  }
+
+  return [1, 'ellipsis-start', current, 'ellipsis-end', total]
+}
+
+const postsFor = (page: number) =>
+  range((page - 1) * PER_PAGE + 1, page * PER_PAGE).map((id) => ({
+    id,
+    title: TOPICS[(id - 1) % TOPICS.length],
+  }))
+
+export default function PaginationExample() {
+  const [page, setPage] = React.useState(1)
+
+  const goTo =
+    (nextPage: number) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault()
+      setPage(nextPage)
+    }
+
+  const stepProps = (nextPage: number, enabled: boolean) =>
+    enabled
+      ? { href: '#', onClick: goTo(nextPage) }
+      : {
+          'aria-disabled': true as const,
+          className: 'pointer-events-none',
+          role: 'link',
+        }
+
+  return (
+    <Card className="not-prose w-full px-4 sm:px-6">
+      <div className="flex items-center justify-between gap-4">
+        <h3 className="text-foreground text-base font-medium">Latest posts</h3>
+        <p
+          aria-live="polite"
+          className="text-muted-foreground text-sm tabular-nums"
+        >
+          {(page - 1) * PER_PAGE + 1}-{page * PER_PAGE} of{' '}
+          {TOTAL_PAGES * PER_PAGE}
+        </p>
+      </div>
+
+      <ul className="flex flex-col divide-y">
+        {postsFor(page).map((post) => (
+          <li className="flex items-center gap-3 py-3" key={post.id}>
+            <span className="bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md text-xs font-medium tabular-nums">
+              #{post.id}
+            </span>
+            <span className="text-foreground truncate text-sm leading-relaxed">
+              {post.title}
+            </span>
+          </li>
+        ))}
+      </ul>
+
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious {...stepProps(page - 1, page > 1)} />
+          </PaginationItem>
+
+          <PaginationItem className="sm:hidden">
+            <span className="text-muted-foreground px-2 text-sm tabular-nums">
+              Page {page} of {TOTAL_PAGES}
+            </span>
+          </PaginationItem>
+
+          {pageWindow(page, TOTAL_PAGES).map((slot) => (
+            <PaginationItem className="hidden sm:block" key={slot}>
+              {typeof slot === 'number' ? (
+                <PaginationLink
+                  href="#"
+                  isActive={slot === page}
+                  onClick={goTo(slot)}
+                >
+                  {slot}
+                </PaginationLink>
+              ) : (
+                <PaginationEllipsis />
+              )}
+            </PaginationItem>
+          ))}
+
+          <PaginationItem>
+            <PaginationNext {...stepProps(page + 1, page < TOTAL_PAGES)} />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </Card>
+  )
+}
diff --git a/apps/web/src/docs/examples/resizable-collapsible.tsx b/apps/web/src/docs/examples/resizable-collapsible.tsx
new file mode 100644
index 000000000..7ec1e4fb7
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable-collapsible.tsx
@@ -0,0 +1,38 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+import { PanelLeft } from 'lucide-react'
+
+export default function ResizableCollapsibleDemo() {
+  return (
+    <div className="not-prose h-48 w-full max-w-md">
+      <ResizablePanelGroup className="bg-background text-foreground rounded-lg border">
+        <ResizablePanel
+          collapsedSize="8%"
+          collapsible
+          defaultSize="35%"
+          maxSize="50%"
+          minSize="25%"
+        >
+          <div className="bg-muted/50 @container flex h-full items-center justify-center gap-2 overflow-hidden p-2">
+            <PanelLeft aria-hidden className="size-4 shrink-0" />
+            <span className="hidden text-sm font-medium @[5rem]:inline">
+              Sidebar
+            </span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel minSize="40%">
+          <div className="flex h-full flex-col items-center justify-center gap-1 p-4 text-center">
+            <span className="text-sm font-medium">Content</span>
+            <span className="text-muted-foreground text-xs text-pretty">
+              Drag the sidebar below 25% and it snaps shut.
+            </span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/resizable-handle.tsx b/apps/web/src/docs/examples/resizable-handle.tsx
new file mode 100644
index 000000000..26c39bb9f
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable-handle.tsx
@@ -0,0 +1,25 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+
+export default function ResizableHandleDemo() {
+  return (
+    <div className="not-prose h-48 w-full max-w-md">
+      <ResizablePanelGroup className="bg-background text-foreground rounded-lg border">
+        <ResizablePanel defaultSize="40%" minSize="20%">
+          <div className="flex h-full items-center justify-center p-4">
+            <span className="text-sm font-medium">Sidebar</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel minSize="30%">
+          <div className="flex h-full items-center justify-center p-4">
+            <span className="text-sm font-medium">Content</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/resizable-persist.tsx b/apps/web/src/docs/examples/resizable-persist.tsx
new file mode 100644
index 000000000..ef0430736
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable-persist.tsx
@@ -0,0 +1,86 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+import React from 'react'
+
+type Layout = Record<string, number>
+
+const storageKey = 'vitnode-docs-resizable-layout'
+
+const subscribe = () => () => {}
+
+const readLayout = (): null | string => {
+  try {
+    return localStorage.getItem(storageKey)
+  } catch {
+    return null
+  }
+}
+
+const saveLayout = (layout: Layout) => {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(layout))
+  } catch {
+    return
+  }
+}
+
+const parseLayout = (value: null | string): Layout | undefined => {
+  if (!value) return undefined
+
+  try {
+    const parsed: unknown = JSON.parse(value)
+
+    if (typeof parsed !== 'object' || parsed === null) return undefined
+
+    return Object.fromEntries(
+      Object.entries(parsed).filter(
+        (entry): entry is [string, number] => typeof entry[1] === 'number',
+      ),
+    )
+  } catch {
+    return undefined
+  }
+}
+
+export default function ResizablePersistDemo() {
+  const storedLayout = React.useSyncExternalStore(
+    subscribe,
+    readLayout,
+    () => null,
+  )
+  const defaultLayout = React.useMemo(
+    () => parseLayout(storedLayout),
+    [storedLayout],
+  )
+
+  return (
+    <div className="not-prose h-48 w-full max-w-md">
+      <ResizablePanelGroup
+        className="bg-background text-foreground rounded-lg border"
+        defaultLayout={defaultLayout}
+        id="docs-resizable-persist"
+        onLayoutChanged={(layout, meta) => {
+          if (meta.isUserInteraction) saveLayout(meta.requestedLayout ?? layout)
+        }}
+      >
+        <ResizablePanel defaultSize="40%" id="sidebar" minSize="20%">
+          <div className="flex h-full items-center justify-center p-4">
+            <span className="text-sm font-medium">Sidebar</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel id="content" minSize="30%">
+          <div className="flex h-full flex-col items-center justify-center gap-1 p-4 text-center">
+            <span className="text-sm font-medium">Content</span>
+            <span className="text-muted-foreground text-xs text-pretty">
+              Resize, then reload. It remembers.
+            </span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/resizable-vertical.tsx b/apps/web/src/docs/examples/resizable-vertical.tsx
new file mode 100644
index 000000000..5e75669b9
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable-vertical.tsx
@@ -0,0 +1,28 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+
+export default function ResizableVerticalDemo() {
+  return (
+    <div className="not-prose h-64 w-full max-w-md">
+      <ResizablePanelGroup
+        className="bg-background text-foreground rounded-lg border"
+        orientation="vertical"
+      >
+        <ResizablePanel defaultSize="30%" minSize="20%">
+          <div className="flex h-full items-center justify-center p-4">
+            <span className="text-sm font-medium">Header</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel minSize="30%">
+          <div className="flex h-full items-center justify-center p-4">
+            <span className="text-sm font-medium">Content</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/resizable.tsx b/apps/web/src/docs/examples/resizable.tsx
new file mode 100644
index 000000000..223bfaf59
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable.tsx
@@ -0,0 +1,37 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+
+export default function ResizableDemo() {
+  return (
+    <div className="not-prose h-80 w-full max-w-md">
+      <ResizablePanelGroup className="bg-background text-foreground rounded-lg border">
+        <ResizablePanel defaultSize="35%" minSize="20%">
+          <div className="flex h-full items-center justify-center p-4">
+            <span className="text-sm font-medium">Sidebar</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel minSize="30%">
+          <ResizablePanelGroup orientation="vertical">
+            <ResizablePanel defaultSize="60%" minSize="25%">
+              <div className="flex h-full items-center justify-center p-4">
+                <span className="text-sm font-medium">Content</span>
+              </div>
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel minSize="20%">
+              <div className="bg-muted/50 flex h-full items-center justify-center p-4">
+                <span className="text-muted-foreground text-sm font-medium">
+                  Terminal
+                </span>
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/scroll-fade-vertical.tsx b/apps/web/src/docs/examples/scroll-fade-vertical.tsx
new file mode 100644
index 000000000..e917cb0aa
--- /dev/null
+++ b/apps/web/src/docs/examples/scroll-fade-vertical.tsx
@@ -0,0 +1,41 @@
+const notifications = [
+  { title: 'New sign-up from Warsaw', time: '2 min ago' },
+  { title: 'Blog post published', time: '14 min ago' },
+  { title: 'Plugin "search" updated', time: '1 h ago' },
+  { title: 'Backup finished', time: '2 h ago' },
+  { title: 'Staff role edited', time: '3 h ago' },
+  { title: 'Cron job "cleanup" ran', time: '5 h ago' },
+  { title: 'Theme "midnight" enabled', time: 'Yesterday' },
+  { title: 'Passkey added', time: 'Yesterday' },
+  { title: 'Navigation reordered', time: '2 days ago' },
+  { title: 'Language "pl" installed', time: '3 days ago' },
+  { title: 'Hello world', time: 'Last week' },
+]
+
+export default function ScrollFadeVerticalExample() {
+  return (
+    <section className="not-prose bg-card text-card-foreground flex w-full flex-col rounded-xl border">
+      <h3 className="border-b px-4 py-3 text-sm font-medium">Notifications</h3>
+      <div className="has-focus-visible:ring-ring/50 rounded-b-xl has-focus-visible:ring-3">
+        <ul
+          aria-label="Notifications"
+          className="scroll-fade flex h-64 flex-col overflow-y-auto overscroll-y-contain px-4 py-2 outline-none"
+          role="region"
+          tabIndex={0}
+        >
+          {notifications.map((notification) => (
+            <li
+              className="flex items-center justify-between gap-4 border-b py-3 text-sm last:border-b-0"
+              key={notification.title}
+            >
+              <span className="truncate">{notification.title}</span>
+              <span className="text-muted-foreground shrink-0 text-xs">
+                {notification.time}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/src/docs/examples/scroll-fade.tsx b/apps/web/src/docs/examples/scroll-fade.tsx
new file mode 100644
index 000000000..60c1edc8c
--- /dev/null
+++ b/apps/web/src/docs/examples/scroll-fade.tsx
@@ -0,0 +1,78 @@
+const topics = [
+  'Announcements',
+  'Releases',
+  'Plugins',
+  'Themes',
+  'Tutorials',
+  'Showcase',
+  'Help wanted',
+  'Feedback',
+  'Bug reports',
+  'Off-topic',
+]
+
+const releases = [
+  { name: 'Content Engine', version: 'v1.4.0' },
+  { name: 'Search', version: 'v1.3.2' },
+  { name: 'Passkeys', version: 'v1.3.0' },
+  { name: 'Navigation', version: 'v1.2.5' },
+  { name: 'Widgets', version: 'v1.2.0' },
+  { name: 'Blog', version: 'v1.1.8' },
+]
+
+export default function ScrollFadeExample() {
+  return (
+    <div className="not-prose bg-card text-card-foreground flex w-full flex-col gap-6 rounded-xl border p-4 sm:p-6">
+      <section className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1">
+          <h3 className="text-sm font-medium">Browse by topic</h3>
+          <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
+            Scroll sideways. The left edge stays crisp until there is something
+            hiding behind it.
+          </p>
+        </div>
+        <div className="has-focus-visible:ring-ring/50 rounded-lg has-focus-visible:ring-3">
+          <ul
+            aria-label="Topics"
+            className="scroll-fade-x no-scrollbar flex gap-2 overflow-x-auto overscroll-x-contain py-1 outline-none"
+            role="region"
+            tabIndex={0}
+          >
+            {topics.map((topic) => (
+              <li
+                className="bg-secondary text-secondary-foreground shrink-0 rounded-full px-3 py-1 text-sm"
+                key={topic}
+              >
+                {topic}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="flex flex-col gap-3">
+        <h3 className="text-sm font-medium">Latest releases</h3>
+        <div className="has-focus-visible:ring-ring/50 rounded-lg has-focus-visible:ring-3">
+          <ul
+            aria-label="Latest releases"
+            className="scroll-fade-x scroll-fade-16 no-scrollbar flex snap-x snap-mandatory gap-3 overflow-x-auto overscroll-x-contain outline-none"
+            role="region"
+            tabIndex={0}
+          >
+            {releases.map((release) => (
+              <li
+                className="bg-background flex w-36 shrink-0 snap-start flex-col gap-1 rounded-lg border p-3"
+                key={release.name}
+              >
+                <span className="text-sm font-medium">{release.name}</span>
+                <span className="text-muted-foreground font-mono text-xs">
+                  {release.version}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/shimmer-variants.tsx b/apps/web/src/docs/examples/shimmer-variants.tsx
new file mode 100644
index 000000000..8bd76d139
--- /dev/null
+++ b/apps/web/src/docs/examples/shimmer-variants.tsx
@@ -0,0 +1,65 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import { RotateCcw } from 'lucide-react'
+import React from 'react'
+
+const variants = [
+  { className: 'shimmer', label: 'shimmer' },
+  {
+    className: 'shimmer shimmer-color-success',
+    label: 'shimmer-color-success',
+  },
+  {
+    className: 'shimmer shimmer-duration-1000',
+    label: 'shimmer-duration-1000',
+  },
+  { className: 'shimmer shimmer-spread-24', label: 'shimmer-spread-24' },
+  { className: 'shimmer shimmer-angle-45', label: 'shimmer-angle-45' },
+  { className: 'shimmer shimmer-reverse', label: 'shimmer-reverse' },
+]
+
+export default function ShimmerVariantsExample() {
+  const [replays, setReplays] = React.useState(0)
+
+  return (
+    <div className="not-prose bg-card text-card-foreground flex w-full flex-col gap-6 rounded-xl border p-4 sm:p-6">
+      <ul className="grid gap-4 sm:grid-cols-2">
+        {variants.map((variant) => (
+          <li className="flex flex-col gap-1" key={variant.label}>
+            <span
+              className={`${variant.className} text-muted-foreground text-sm`}
+            >
+              Generating response...
+            </span>
+            <code className="text-foreground font-mono text-xs">
+              {variant.label}
+            </code>
+          </li>
+        ))}
+      </ul>
+
+      <div className="flex flex-wrap items-center justify-between gap-4 border-t pt-4">
+        <div className="flex flex-col gap-1">
+          <span
+            className="shimmer shimmer-once shimmer-duration-1100 text-muted-foreground text-sm"
+            key={replays}
+          >
+            Response generated.
+          </span>
+          <code className="text-foreground font-mono text-xs">
+            shimmer-once
+          </code>
+        </div>
+        <Button
+          onClick={() => {
+            setReplays((count) => count + 1)
+          }}
+          size="sm"
+          variant="outline"
+        >
+          <RotateCcw />
+          Replay
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/shimmer.tsx b/apps/web/src/docs/examples/shimmer.tsx
new file mode 100644
index 000000000..25ac23feb
--- /dev/null
+++ b/apps/web/src/docs/examples/shimmer.tsx
@@ -0,0 +1,21 @@
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+export default function ShimmerExample() {
+  return (
+    <div className="not-prose bg-card text-card-foreground flex w-full flex-col items-center gap-6 rounded-xl border p-6 text-center">
+      <p className="shimmer text-muted-foreground text-2xl font-medium">
+        Thinking...
+      </p>
+      <p className="shimmer text-sm leading-relaxed">
+        Generating a response worth the wait...
+      </p>
+      <div
+        className="bg-muted text-muted-foreground flex items-center gap-2 rounded-full px-3 py-1.5 text-sm"
+        role="status"
+      >
+        <Spinner aria-hidden="true" />
+        <span className="shimmer">Reading 4 files</span>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/sonner.tsx b/apps/web/src/docs/examples/sonner.tsx
deleted file mode 100644
index 19656151a..000000000
--- a/apps/web/src/docs/examples/sonner.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '@vitnode/core/components/ui/button'
-import { toast } from 'sonner'
-
-export default function SonnerDemo() {
-  return (
-    <Button
-      onClick={() =>
-        toast('Event has been created', {
-          description: 'Sunday, December 03, 2023 at 9:00 AM',
-          action: {
-            label: 'Undo',
-            // eslint-disable-next-line no-console
-            onClick: () => console.log('Undo'),
-          },
-        })
-      }
-      variant="outline"
-    >
-      Show Toast
-    </Button>
-  )
-}
diff --git a/apps/web/src/docs/examples/spinner-buttons.tsx b/apps/web/src/docs/examples/spinner-buttons.tsx
new file mode 100644
index 000000000..76659d56c
--- /dev/null
+++ b/apps/web/src/docs/examples/spinner-buttons.tsx
@@ -0,0 +1,36 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+import React from 'react'
+
+export default function SpinnerButtonsExample() {
+  const [isSaving, setIsSaving] = React.useState(false)
+
+  return (
+    <div className="not-prose flex flex-col items-center gap-6">
+      <div className="flex flex-wrap justify-center gap-3">
+        <Button disabled>
+          <Spinner aria-hidden="true" />
+          Uploading...
+        </Button>
+        <Button disabled variant="outline">
+          <Spinner aria-hidden="true" />
+          Please wait
+        </Button>
+        <Button aria-label="Refreshing" disabled size="icon" variant="ghost">
+          <Spinner aria-hidden="true" />
+        </Button>
+      </div>
+      <Button
+        isLoading={isSaving}
+        onClick={() => {
+          setIsSaving(true)
+          setTimeout(() => {
+            setIsSaving(false)
+          }, 1500)
+        }}
+      >
+        Save changes
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/spinner-inline.tsx b/apps/web/src/docs/examples/spinner-inline.tsx
new file mode 100644
index 000000000..a13aa50bf
--- /dev/null
+++ b/apps/web/src/docs/examples/spinner-inline.tsx
@@ -0,0 +1,38 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@vitnode/core/components/ui/input-group'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+import { SearchIcon } from 'lucide-react'
+
+export default function SpinnerInlineExample() {
+  return (
+    <div className="not-prose flex w-full flex-col items-center gap-6">
+      <div className="flex flex-wrap justify-center gap-2">
+        <Badge variant="secondary">
+          <Spinner aria-hidden="true" />
+          Syncing
+        </Badge>
+        <Badge variant="outline">
+          <Spinner aria-hidden="true" />
+          Building
+        </Badge>
+      </div>
+      <InputGroup className="max-w-xs">
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupInput aria-label="Search" defaultValue="vitnode" />
+        <InputGroupAddon align="inline-end">
+          <Spinner aria-label="Searching" />
+        </InputGroupAddon>
+      </InputGroup>
+      <p className="text-muted-foreground flex items-center gap-2 text-sm">
+        <Spinner aria-hidden="true" />
+        Generating your report - hang tight.
+      </p>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/spinner-states.tsx b/apps/web/src/docs/examples/spinner-states.tsx
new file mode 100644
index 000000000..c98a468e2
--- /dev/null
+++ b/apps/web/src/docs/examples/spinner-states.tsx
@@ -0,0 +1,37 @@
+import { Card } from '@vitnode/core/components/ui/card'
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+export default function SpinnerStatesExample() {
+  return (
+    <div className="not-prose grid w-full gap-4 sm:grid-cols-2">
+      <Empty className="rounded-lg border p-6">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <Spinner aria-hidden="true" />
+          </EmptyMedia>
+          <EmptyTitle>Loading your files</EmptyTitle>
+          <EmptyDescription>
+            This usually takes a second or two.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+
+      <Card aria-busy="true" className="relative gap-2 overflow-hidden p-6">
+        <p className="font-medium">Monthly revenue</p>
+        <p className="text-muted-foreground text-sm leading-relaxed">
+          Crunching this month&apos;s numbers...
+        </p>
+        <div className="bg-background/70 absolute inset-0 flex items-center justify-center backdrop-blur-xs">
+          <Spinner className="text-primary" size="lg" />
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/spinner.tsx b/apps/web/src/docs/examples/spinner.tsx
new file mode 100644
index 000000000..1624a4fad
--- /dev/null
+++ b/apps/web/src/docs/examples/spinner.tsx
@@ -0,0 +1,25 @@
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+const sizes = ['sm', 'default', 'lg', 'xl'] as const
+
+export default function SpinnerExample() {
+  return (
+    <div className="not-prose flex flex-col items-center gap-8">
+      <div className="flex items-end gap-6">
+        {sizes.map((size) => (
+          <div className="flex flex-col items-center gap-2" key={size}>
+            <Spinner size={size} />
+            <span className="text-muted-foreground text-xs">{size}</span>
+          </div>
+        ))}
+      </div>
+      <div className="flex items-center gap-6">
+        <Spinner className="text-primary" size="lg" />
+        <Spinner className="text-success" size="lg" />
+        <Spinner className="text-warn" size="lg" />
+        <Spinner className="text-destructive" size="lg" />
+        <Spinner className="text-muted-foreground" size="lg" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/toast.tsx b/apps/web/src/docs/examples/toast.tsx
new file mode 100644
index 000000000..e42f5acf5
--- /dev/null
+++ b/apps/web/src/docs/examples/toast.tsx
@@ -0,0 +1,111 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import { ToastAvatar, ToastMessage } from '@vitnode/core/components/ui/sonner'
+import { toast } from 'sonner'
+
+const wait = async (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms)
+  })
+
+const demos = [
+  {
+    label: 'Default',
+    show: () =>
+      toast('Event has been created', {
+        description: 'Sunday, December 03, 2023 at 9:00 AM',
+        action: { label: 'Undo', onClick: () => {} },
+      }),
+  },
+  {
+    label: 'Info',
+    show: () =>
+      toast.info('You have 2 credits left', {
+        description: 'Get a paid plan for more credits.',
+        action: { label: 'Upgrade', onClick: () => {} },
+      }),
+  },
+  {
+    label: 'Success',
+    show: () =>
+      toast.success('Your plan has been upgraded', {
+        description: 'Enjoy the extra credits - you earned them.',
+      }),
+  },
+  {
+    label: 'Warning',
+    show: () =>
+      toast.warning('You are running low on storage', {
+        description: 'Only 200 MB left. Time for some spring cleaning?',
+        action: { label: 'Manage', onClick: () => {} },
+      }),
+  },
+  {
+    label: 'Error',
+    show: () =>
+      toast.error('Storage is full', {
+        description: 'Remove some files to free up space.',
+        action: { label: 'Remove', onClick: () => {} },
+      }),
+  },
+  {
+    label: 'Avatar',
+    show: () =>
+      toast('VitNode Team invited you', {
+        description: 'Join the "Docs writers" group to start editing.',
+        icon: <ToastAvatar alt="VitNode Team" src="/logo_vitnode_icon.svg" />,
+        action: { label: 'Accept', onClick: () => {} },
+      }),
+  },
+  {
+    label: 'Message',
+    show: () =>
+      toast.custom(
+        (id) => (
+          <ToastMessage
+            actions={[
+              {
+                label: 'Dismiss',
+                onClick: () => toast.dismiss(id),
+                variant: 'outline',
+              },
+              {
+                label: 'Reply',
+                onClick: () => {
+                  toast.dismiss(id)
+                  toast.success('Reply sent', {
+                    description: 'Alex will see it next time they look.',
+                  })
+                },
+              },
+            ]}
+            avatar={{ alt: 'Alex Johnson', fallback: 'AJ' }}
+            description="Hey! I've finished the design review. Let me know when you're free to discuss."
+            time="2m ago"
+            title="Alex Johnson"
+          />
+        ),
+        { duration: 10000 },
+      ),
+  },
+  {
+    label: 'Promise',
+    show: () =>
+      toast.promise(wait(2000), {
+        loading: 'Publishing your article...',
+        success: 'Article published',
+        error: 'Could not publish the article',
+      }),
+  },
+]
+
+export default function ToastExample() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-3">
+      {demos.map(({ label, show }) => (
+        <Button key={label} onClick={show} variant="outline">
+          {label}
+        </Button>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/web/src/docs/examples/tooltip-group.tsx b/apps/web/src/docs/examples/tooltip-group.tsx
new file mode 100644
index 000000000..31565e3d8
--- /dev/null
+++ b/apps/web/src/docs/examples/tooltip-group.tsx
@@ -0,0 +1,44 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+  TooltipGroup,
+  TooltipGroupTrigger,
+} from '@vitnode/core/components/ui/tooltip'
+import {
+  BoldIcon,
+  ImageIcon,
+  ItalicIcon,
+  LinkIcon,
+  UnderlineIcon,
+} from 'lucide-react'
+
+const tools = [
+  { icon: BoldIcon, label: 'Bold' },
+  { icon: ItalicIcon, label: 'Italic' },
+  { icon: UnderlineIcon, label: 'Underline' },
+  { icon: LinkIcon, label: 'Insert link' },
+  { icon: ImageIcon, label: 'Add an image from your files' },
+]
+
+export default function TooltipGroupExample() {
+  return (
+    <TooltipGroup>
+      <div
+        aria-label="Formatting"
+        className="bg-card flex items-center gap-1 rounded-lg border p-1 shadow-xs"
+        role="toolbar"
+      >
+        {tools.map(({ icon: Icon, label }) => (
+          <TooltipGroupTrigger
+            content={label}
+            key={label}
+            render={
+              <Button aria-label={label} size="icon-sm" variant="ghost" />
+            }
+          >
+            <Icon />
+          </TooltipGroupTrigger>
+        ))}
+      </div>
+    </TooltipGroup>
+  )
+}
diff --git a/apps/web/src/docs/local-table-data.ts b/apps/web/src/docs/local-table-data.ts
new file mode 100644
index 000000000..5074eeab9
--- /dev/null
+++ b/apps/web/src/docs/local-table-data.ts
@@ -0,0 +1,77 @@
+import type { TableOrder } from '@vitnode/core/components/table/url-state'
+
+import {
+  MIN_TABLE_SEARCH_LENGTH,
+  readTableFilter,
+  readTableOrder,
+  readTablePage,
+  readTablePageSize,
+  readTableSearch,
+} from '@vitnode/core/components/table/url-state'
+
+interface LocalTableOptions<T> {
+  defaultOrder?: TableOrder
+  filters?: Record<string, (row: T) => string>
+  searchIn?: (row: T) => string
+}
+
+const compare = (a: unknown, b: unknown) =>
+  typeof a === 'number' && typeof b === 'number'
+    ? a - b
+    : String(a).localeCompare(String(b))
+
+export const resolveLocalTable = <T extends { id: number }>(
+  rows: readonly T[],
+  params: URLSearchParams,
+  { defaultOrder, filters = {}, searchIn }: LocalTableOptions<T> = {},
+) => {
+  const term = readTableSearch(params).trim().toLowerCase()
+  let result = [...rows]
+
+  if (searchIn && term.length >= MIN_TABLE_SEARCH_LENGTH) {
+    result = result.filter((row) => searchIn(row).toLowerCase().includes(term))
+  }
+
+  for (const [id, read] of Object.entries(filters)) {
+    const values = readTableFilter(params, id)
+    if (values.length) {
+      result = result.filter((row) => values.includes(read(row)))
+    }
+  }
+
+  if (defaultOrder) {
+    const { column, order } = readTableOrder(params, defaultOrder)
+    const direction = order === 'asc' ? 1 : -1
+    result.sort(
+      (a, b) =>
+        compare(
+          (a as Record<string, unknown>)[column],
+          (b as Record<string, unknown>)[column],
+        ) * direction,
+    )
+  }
+
+  const pageSize = readTablePageSize(params)
+  const totalCount = result.length
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize))
+  const currentPage = Math.min(readTablePage(params), totalPages)
+  const edges = result.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize,
+  )
+
+  return {
+    edges,
+    pageInfo: {
+      count: edges.length,
+      currentPage,
+      endCursor: null,
+      hasNextPage: currentPage < totalPages,
+      hasPreviousPage: currentPage > 1,
+      pageSize,
+      startCursor: null,
+      totalCount,
+      totalPages,
+    },
+  }
+}
diff --git a/apps/web/src/docs/preview-data-table.tsx b/apps/web/src/docs/preview-data-table.tsx
index 18f1ab3d8..b5709f32b 100644
--- a/apps/web/src/docs/preview-data-table.tsx
+++ b/apps/web/src/docs/preview-data-table.tsx
@@ -10,7 +10,19 @@ import React from 'react'
 
 export type { ColumnDef } from '@vitnode/core/components/table/data-table-content'
 
-export function DataTable<T extends DataTableTMin>(props: DataTableProps<T>) {
+type LocalData<T extends DataTableTMin> = Pick<
+  DataTableProps<T>,
+  'edges' | 'pageInfo'
+>
+
+export function DataTable<T extends DataTableTMin>({
+  resolve,
+  ...props
+}:
+  | (DataTableProps<T> & { resolve?: undefined })
+  | (Omit<DataTableProps<T>, 'edges' | 'pageInfo'> & {
+      resolve: (params: URLSearchParams) => LocalData<T>
+    })) {
   const [search, setSearch] = React.useState('')
 
   const navigation = React.useMemo<DataTableNavigation>(
@@ -25,7 +37,11 @@ export function DataTable<T extends DataTableTMin>(props: DataTableProps<T>) {
 
   return (
     <DataTableNavigationProvider value={navigation}>
-      <ContentDataTable<T> {...props} />
+      {resolve ? (
+        <ContentDataTable<T> {...props} {...resolve(navigation.searchParams)} />
+      ) : (
+        <ContentDataTable<T> {...(props as DataTableProps<T>)} />
+      )}
     </DataTableNavigationProvider>
   )
 }
diff --git a/apps/web/src/docs/preview.tsx b/apps/web/src/docs/preview.tsx
index 870ec7d30..804919c39 100644
--- a/apps/web/src/docs/preview.tsx
+++ b/apps/web/src/docs/preview.tsx
@@ -1,4 +1,4 @@
-import { Loader } from '@vitnode/core/components/ui/loader'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
 import { cn } from 'cn'
 import React from 'react'
 
@@ -31,7 +31,14 @@ export const Preview = ({
   if (withoutBackground) {
     return (
       <div className="[&_p]:m-0 [&_table]:my-0 [&_table]:rounded-md [&_table]:border-none [&_table]:bg-transparent">
-        <React.Suspense fallback={<Loader />} key={name}>
+        <React.Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner size="xl" />
+            </div>
+          }
+          key={name}
+        >
           <Example />
         </React.Suspense>
       </div>
@@ -45,7 +52,14 @@ export const Preview = ({
         className,
       )}
     >
-      <React.Suspense fallback={<Loader />} key={name}>
+      <React.Suspense
+        fallback={
+          <div className="flex items-center justify-center">
+            <Spinner size="xl" />
+          </div>
+        }
+        key={name}
+      >
         <Example />
       </React.Suspense>
     </div>
diff --git a/apps/web/src/locales/@vitnode/core/pl.json b/apps/web/src/locales/@vitnode/core/pl.json
index 7abfd9842..9b1b11dee 100644
--- a/apps/web/src/locales/@vitnode/core/pl.json
+++ b/apps/web/src/locales/@vitnode/core/pl.json
@@ -1396,6 +1396,14 @@
         "yellow": "Żółty"
       },
       "confirm": "Potwierdź",
+      "clear": "Wyczyść",
+      "comparison_slider": "Suwak porównania",
+      "copied": "Skopiowano",
+      "copy": "Kopiuj",
+      "copy_failed": "Nie udało się skopiować do schowka. Spróbuj zaznaczyć tekst.",
+      "decrease": "Zmniejsz",
+      "increase": "Zwiększ",
+      "more_count": "+{count} więcej",
       "confirm_action": {
         "cancel": "Anuluj",
         "confirm": "Tak, potwierdzam",
@@ -1405,6 +1413,20 @@
       "current_page": "Bieżąca strona",
       "data_table": {
         "clear_selection": "Wyczyść zaznaczenie",
+        "collapse_row": "Zwiń wiersz",
+        "expand_row": "Rozwiń wiersz",
+        "reorder_cancelled": "Anulowano zmianę kolejności. {name} wraca na miejsce {position} z {total}.",
+        "reorder_column": "Kolejność",
+        "reorder_ended": "Upuszczono {name} na miejscu {position} z {total}.",
+        "reorder_failed": "Nie udało się zapisać nowej kolejności",
+        "reorder_failed_desc": "Wiersze wróciły na swoje miejsca. Spróbuj ponownie za chwilę.",
+        "reorder_instructions": "Naciśnij spację lub enter, aby podnieść wiersz. Przesuwaj go strzałkami. Naciśnij spację lub enter ponownie, aby upuścić go w nowym miejscu, albo escape, aby anulować.",
+        "reorder_over": "{name} przeniesiono na miejsce {position} z {total}.",
+        "reorder_row": "Zmień kolejność: {name}",
+        "reorder_started": "Podniesiono {name}. Jest na miejscu {position} z {total}.",
+        "reorder_unavailable": "Wyczyść wyszukiwanie, filtry i sortowanie, aby zmienić kolejność wierszy.",
+        "row_details": "Szczegóły wiersza",
+        "row_fallback": "wiersz {position}",
         "select_all": "Zaznacz wszystkie wiersze",
         "select_row": "Zaznacz wiersz"
       },
@@ -1666,7 +1688,7 @@
       "select_language": "Wybierz język",
       "select_option": "Wybierz opcję",
       "select_options": "Wybierz opcje",
-      "selected_count": "Zaznaczono: {count}",
+      "selected_count": "Zaznaczono: <number>{count}</number>",
       "submit": "Wyślij",
       "theme": {
         "dark": "Ciemny",
diff --git a/apps/web/src/site/home/illustrations/hero-preview.tsx b/apps/web/src/site/home/illustrations/hero-preview.tsx
index ea98334ef..3f17a64c6 100644
--- a/apps/web/src/site/home/illustrations/hero-preview.tsx
+++ b/apps/web/src/site/home/illustrations/hero-preview.tsx
@@ -2,7 +2,7 @@ import { cn } from 'cn'
 import { FileCode2, Sparkles } from 'lucide-react'
 import { useTranslations } from 'use-intl'
 
-import { ScreenFrame } from '@/site/marketing/screen-frame'
+import { SafariFrame } from '@/site/marketing/safari-frame'
 import { SCREENS } from '@/site/marketing/screens'
 
 const MEMBERS = ['MA', 'KW', 'OL']
@@ -128,7 +128,7 @@ export const HeroPreview = ({ ref }: { ref?: React.Ref<HTMLDivElement> }) => {
             transformOrigin: 'left center',
           }}
         >
-          <ScreenFrame
+          <SafariFrame
             priority
             screen={{ ...SCREENS.dashboard, alt: t('alt') }}
           />
diff --git a/apps/web/src/site/home/sections/showcase-carousel.tsx b/apps/web/src/site/home/sections/showcase-carousel.tsx
index 8c18db1bc..3a755412a 100644
--- a/apps/web/src/site/home/sections/showcase-carousel.tsx
+++ b/apps/web/src/site/home/sections/showcase-carousel.tsx
@@ -11,7 +11,7 @@ import {
 import { cn } from 'cn'
 import { useEffect, useState } from 'react'
 
-import { ScreenFrame } from '@/site/marketing/screen-frame'
+import { SafariFrame } from '@/site/marketing/safari-frame'
 import { SCREENS } from '@/site/marketing/screens'
 
 import { SLIDES } from './showcase-slides'
@@ -69,7 +69,7 @@ export const ShowcaseCarousel = () => {
           {SLIDES.map(({ caption, screen }) => (
             <CarouselItem key={screen}>
               <figure className="flex flex-col gap-4">
-                <ScreenFrame screen={SCREENS[screen]} />
+                <SafariFrame screen={SCREENS[screen]} />
                 <figcaption className="text-muted-foreground mx-auto max-w-2xl text-center text-sm leading-relaxed text-pretty">
                   {caption}
                 </figcaption>
diff --git a/apps/web/src/site/home/sections/showcase.tsx b/apps/web/src/site/home/sections/showcase.tsx
index 090eb9679..21cf64229 100644
--- a/apps/web/src/site/home/sections/showcase.tsx
+++ b/apps/web/src/site/home/sections/showcase.tsx
@@ -1,6 +1,6 @@
 import { lazy, Suspense, useEffect, useRef, useState } from 'react'
 
-import { ScreenFrame } from '@/site/marketing/screen-frame'
+import { SafariFrame } from '@/site/marketing/safari-frame'
 import { SCREENS } from '@/site/marketing/screens'
 import {
   ActionLink,
@@ -20,7 +20,7 @@ const ShowcaseStill = () => {
 
   return (
     <figure className="flex flex-col gap-4">
-      <ScreenFrame screen={SCREENS[screen]} />
+      <SafariFrame screen={SCREENS[screen]} />
       <figcaption className="text-muted-foreground mx-auto max-w-2xl text-center text-sm leading-relaxed text-pretty">
         {caption}
       </figcaption>
diff --git a/apps/web/src/site/marketing/marketing.css b/apps/web/src/site/marketing/marketing.css
index 0e0279f42..6f32059ea 100644
--- a/apps/web/src/site/marketing/marketing.css
+++ b/apps/web/src/site/marketing/marketing.css
@@ -922,6 +922,7 @@
 .mk-integration-face {
   display: grid;
   place-items: center;
+  filter: drop-shadow(0 8px 10px rgb(from var(--brand) r g b / 0));
   transition:
     translate 220ms cubic-bezier(0.23, 1, 0.32, 1),
     scale 150ms ease-out,
@@ -950,9 +951,7 @@
 @media (hover: hover) and (pointer: fine) {
   .mk-integration-tile:hover .mk-integration-face {
     translate: 0 -4px;
-    filter: drop-shadow(
-      0 8px 10px color-mix(in oklch, var(--brand) 30%, transparent)
-    );
+    filter: drop-shadow(0 8px 10px rgb(from var(--brand) r g b / 0.3));
   }
 
   .mk-integration-tile:hover .mk-integration-outline path {
diff --git a/apps/web/src/site/marketing/safari-frame.tsx b/apps/web/src/site/marketing/safari-frame.tsx
new file mode 100644
index 000000000..3f059b565
--- /dev/null
+++ b/apps/web/src/site/marketing/safari-frame.tsx
@@ -0,0 +1,85 @@
+import { cn } from 'cn'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  Lock,
+  PanelLeft,
+  Plus,
+  RotateCw,
+  Share,
+} from 'lucide-react'
+
+import type { Screen } from './screens'
+
+import { ScreenShot } from './screen-frame'
+
+const TRAFFIC_LIGHTS = [
+  'bg-red-400 ring-red-500/40',
+  'bg-amber-400 ring-amber-500/40',
+  'bg-emerald-400 ring-emerald-500/40',
+]
+
+const ToolbarIcon = ({ Icon }: { Icon: React.ElementType }) => (
+  <Icon className="text-muted-foreground/70 size-4" strokeWidth={1.75} />
+)
+
+export const SafariFrame = ({
+  className,
+  priority = false,
+  screen,
+}: {
+  className?: string
+  priority?: boolean
+  screen: Screen
+}) => (
+  <div
+    className={cn(
+      'bg-card relative min-w-0 overflow-hidden rounded-2xl border shadow-xl sm:rounded-3xl',
+      className,
+    )}
+  >
+    <div className="bg-muted/70 flex items-center gap-3 border-b px-3 py-2.5 sm:px-4">
+      <div aria-hidden className="flex flex-1 items-center gap-4">
+        <span className="flex gap-1.5">
+          {TRAFFIC_LIGHTS.map((light) => (
+            <span
+              className={cn('size-3 rounded-full ring-1 ring-inset', light)}
+              key={light}
+            />
+          ))}
+        </span>
+        <span className="flex items-center gap-3 max-sm:hidden">
+          <ToolbarIcon Icon={PanelLeft} />
+          <span className="flex items-center gap-1">
+            <ToolbarIcon Icon={ChevronLeft} />
+            <ToolbarIcon Icon={ChevronRight} />
+          </span>
+        </span>
+      </div>
+
+      <div className="bg-background/80 text-muted-foreground flex h-8 w-full max-w-md min-w-0 items-center gap-2 rounded-lg px-3 shadow-xs">
+        <Lock aria-hidden className="size-3 shrink-0" strokeWidth={2.25} />
+        <span className="min-w-0 flex-1 truncate text-center font-mono text-xs">
+          {screen.url}
+        </span>
+        <RotateCw
+          aria-hidden
+          className="size-3 shrink-0 max-sm:hidden"
+          strokeWidth={2.25}
+        />
+      </div>
+
+      <div
+        aria-hidden
+        className="flex flex-1 items-center justify-end gap-4 max-sm:hidden"
+      >
+        <ToolbarIcon Icon={Share} />
+        <ToolbarIcon Icon={Plus} />
+        <ToolbarIcon Icon={Copy} />
+      </div>
+    </div>
+
+    <ScreenShot priority={priority} screen={screen} />
+  </div>
+)
diff --git a/apps/web/src/site/marketing/screen-frame.tsx b/apps/web/src/site/marketing/screen-frame.tsx
index a901591f6..3699f6633 100644
--- a/apps/web/src/site/marketing/screen-frame.tsx
+++ b/apps/web/src/site/marketing/screen-frame.tsx
@@ -31,6 +31,32 @@ const ScreenImg = ({
   />
 )
 
+export const ScreenShot = ({
+  priority = false,
+  screen,
+}: {
+  priority?: boolean
+  screen: Screen
+}) => (
+  <div
+    className="w-full"
+    style={{ aspectRatio: `${SCREEN_SIZE.width} / ${SCREEN_SIZE.height}` }}
+  >
+    <ScreenImg
+      alt={screen.alt}
+      className="block size-full object-cover object-top dark:hidden"
+      image={screen.light}
+      priority={priority}
+    />
+    <ScreenImg
+      alt={screen.alt}
+      className="hidden size-full object-cover object-top dark:block"
+      image={screen.dark}
+      priority={priority}
+    />
+  </div>
+)
+
 export const ScreenFrame = ({
   className,
   note,
@@ -59,23 +85,7 @@ export const ScreenFrame = ({
       </span>
     </div>
 
-    <div
-      className="w-full"
-      style={{ aspectRatio: `${SCREEN_SIZE.width} / ${SCREEN_SIZE.height}` }}
-    >
-      <ScreenImg
-        alt={screen.alt}
-        className="block size-full object-cover object-top dark:hidden"
-        image={screen.light}
-        priority={priority}
-      />
-      <ScreenImg
-        alt={screen.alt}
-        className="hidden size-full object-cover object-top dark:block"
-        image={screen.dark}
-        priority={priority}
-      />
-    </div>
+    <ScreenShot priority={priority} screen={screen} />
 
     {note ? (
       <span className="bg-background/90 text-muted-foreground absolute right-3 bottom-3 rounded-full border px-2.5 py-1 text-xs font-medium backdrop-blur">
diff --git a/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.test.tsx b/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.test.tsx
new file mode 100644
index 000000000..5760d4b74
--- /dev/null
+++ b/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.test.tsx
@@ -0,0 +1,44 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Trash2Icon } from "lucide-react";
+import { describe, expect, it } from "vitest";
+
+import { ConfirmActionAlertDialog } from "./confirm-action-alert-dialog";
+
+const dialogMedia = () =>
+  screen
+    .getByRole("alertdialog")
+    .querySelector("[data-slot=alert-dialog-media]");
+
+describe("ConfirmActionAlertDialog", () => {
+  it("shows the icon above the title in the compact layout", async () => {
+    render(
+      <ConfirmActionAlertDialog
+        icon={<Trash2Icon />}
+        onSubmit={() => {}}
+        title="Delete chat?"
+      >
+        <button type="button">Delete</button>
+      </ConfirmActionAlertDialog>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+
+    expect(await screen.findByText("Delete chat?")).toBeTruthy();
+    expect(dialogMedia()?.querySelector("svg")?.classList).toContain(
+      "lucide-trash-2",
+    );
+    expect(screen.getByRole("alertdialog").dataset.size).toBe("sm");
+  });
+
+  it("keeps the default layout without an icon", async () => {
+    render(
+      <ConfirmActionAlertDialog onSubmit={() => {}} title="Delete chat?">
+        <button type="button">Delete</button>
+      </ConfirmActionAlertDialog>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+
+    expect(await screen.findByText("Delete chat?")).toBeTruthy();
+    expect(dialogMedia()).toBeNull();
+    expect(screen.getByRole("alertdialog").dataset.size).toBe("default");
+  });
+});
diff --git a/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.tsx b/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.tsx
index db83b45a9..d9a94a48c 100644
--- a/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.tsx
+++ b/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.tsx
@@ -1,3 +1,4 @@
+import { cn } from "cn";
 import React from "react";
 import { useTranslations } from "use-intl";
 
@@ -5,24 +6,20 @@ import {
   AlertDialog,
   AlertDialogContent,
   AlertDialogDescription,
-  AlertDialogFooterSkeleton,
   AlertDialogHeader,
+  AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "../ui/alert-dialog";
-
-const ContentConfirmAction = React.lazy(async () =>
-  import("./content").then(module => ({
-    default: module.ContentConfirmAction,
-  })),
-);
+import { ContentConfirmAction } from "./content";
 
 export const ConfirmActionAlertDialog = ({
   children,
   title,
   description,
   finalFocus,
-  submitVariant,
+  icon,
+  submitVariant = "destructive",
   textSubmit,
   onSubmit,
   ...props
@@ -31,6 +28,7 @@ export const ConfirmActionAlertDialog = ({
     children?: React.ReactElement;
     description?: React.ReactNode;
     finalFocus?: React.ComponentProps<typeof AlertDialogContent>["finalFocus"];
+    icon?: React.ReactNode;
     title?: React.ReactNode;
   }) => {
   const t = useTranslations("core.global.confirm_action");
@@ -39,21 +37,32 @@ export const ConfirmActionAlertDialog = ({
     <AlertDialog {...props}>
       {children ? <AlertDialogTrigger render={children} /> : null}
 
-      <AlertDialogContent finalFocus={finalFocus}>
+      <AlertDialogContent
+        finalFocus={finalFocus}
+        size={icon ? "sm" : "default"}
+      >
         <AlertDialogHeader>
+          {icon ? (
+            <AlertDialogMedia
+              className={cn(
+                submitVariant === "destructive" &&
+                  "bg-destructive/10 text-destructive dark:bg-destructive/20",
+              )}
+            >
+              {icon}
+            </AlertDialogMedia>
+          ) : null}
           <AlertDialogTitle>{title ?? t("title")}</AlertDialogTitle>
           <AlertDialogDescription>
             {description ?? t("desc")}
           </AlertDialogDescription>
         </AlertDialogHeader>
 
-        <React.Suspense fallback={<AlertDialogFooterSkeleton />}>
-          <ContentConfirmAction
-            onSubmit={onSubmit}
-            submitVariant={submitVariant}
-            textSubmit={textSubmit}
-          />
-        </React.Suspense>
+        <ContentConfirmAction
+          onSubmit={onSubmit}
+          submitVariant={submitVariant}
+          textSubmit={textSubmit}
+        />
       </AlertDialogContent>
     </AlertDialog>
   );
diff --git a/packages/vitnode/src/components/form/fields/cascader.tsx b/packages/vitnode/src/components/form/fields/cascader.tsx
new file mode 100644
index 000000000..e43c2a137
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/cascader.tsx
@@ -0,0 +1,52 @@
+import type { ItemAutoFormComponentProps } from "../auto-form";
+
+import { Cascader } from "../../ui/cascader";
+import { FormControl, FormMessage } from "../../ui/form";
+import { AutoFormDesc } from "../common/desc";
+import { AutoFormLabel } from "../common/label";
+
+type CascaderProps = React.ComponentProps<typeof Cascader>;
+
+export const AutoFormCascader = ({
+  label,
+  labelRight,
+  description,
+  otherProps: { isOptional },
+  field,
+  options,
+  onValueChange,
+  showClear,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  itemParams,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  multiLang,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  children,
+  ...props
+}: ItemAutoFormComponentProps &
+  Omit<CascaderProps, "defaultValue" | "value">) => (
+  <>
+    {!!label && (
+      <AutoFormLabel isOptional={isOptional} labelRight={labelRight}>
+        {label}
+      </AutoFormLabel>
+    )}
+
+    <FormControl>
+      <Cascader
+        onValueChange={(value, path) => {
+          field.onChange(value ?? undefined);
+          field.onBlur();
+          onValueChange?.(value, path);
+        }}
+        options={options}
+        showClear={showClear ?? isOptional}
+        value={field.value ?? null}
+        {...props}
+      />
+    </FormControl>
+
+    {!!description && <AutoFormDesc>{description}</AutoFormDesc>}
+    <FormMessage />
+  </>
+);
diff --git a/packages/vitnode/src/components/form/fields/combobox-groups.test.ts b/packages/vitnode/src/components/form/fields/combobox-groups.test.ts
new file mode 100644
index 000000000..0e075692c
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/combobox-groups.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+
+import { groupComboboxItems } from "./combobox-groups";
+
+describe("groupComboboxItems", () => {
+  it("returns null when no option names a group", () => {
+    expect(
+      groupComboboxItems(
+        ["a", "b"],
+        [
+          { label: "A", value: "a" },
+          { label: "B", value: "b" },
+        ],
+      ),
+    ).toBeNull();
+  });
+
+  it("groups values in the order their groups first appear", () => {
+    expect(
+      groupComboboxItems(
+        ["apple", "carrot", "banana"],
+        [
+          { group: "Fruits", label: "Apple", value: "apple" },
+          { group: "Vegetables", label: "Carrot", value: "carrot" },
+          { group: "Fruits", label: "Banana", value: "banana" },
+        ],
+      ),
+    ).toEqual([
+      { items: ["apple", "banana"], value: "Fruits" },
+      { items: ["carrot"], value: "Vegetables" },
+    ]);
+  });
+
+  it("keeps values without a group together under an empty heading", () => {
+    expect(
+      groupComboboxItems(
+        ["other", "apple", "unknown"],
+        [
+          { label: "Other", value: "other" },
+          { group: "Fruits", label: "Apple", value: "apple" },
+        ],
+      ),
+    ).toEqual([
+      { items: ["other", "unknown"], value: "" },
+      { items: ["apple"], value: "Fruits" },
+    ]);
+  });
+});
diff --git a/packages/vitnode/src/components/form/fields/combobox-groups.ts b/packages/vitnode/src/components/form/fields/combobox-groups.ts
new file mode 100644
index 000000000..64607c602
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/combobox-groups.ts
@@ -0,0 +1,29 @@
+export interface ComboboxOption {
+  group?: string;
+  label: string;
+  value: string;
+}
+
+export interface ComboboxItemGroup {
+  items: string[];
+  value: string;
+}
+
+export const groupComboboxItems = (
+  values: readonly string[],
+  options: readonly ComboboxOption[],
+): ComboboxItemGroup[] | null => {
+  if (!options.some(option => option.group)) return null;
+
+  const groupOf = new Map(
+    options.map(option => [option.value, option.group ?? ""]),
+  );
+  const groups = new Map<string, string[]>();
+
+  for (const value of values) {
+    const group = groupOf.get(value) ?? "";
+    groups.set(group, [...(groups.get(group) ?? []), value]);
+  }
+
+  return [...groups].map(([value, items]) => ({ items, value }));
+};
diff --git a/packages/vitnode/src/components/form/fields/combobox.tsx b/packages/vitnode/src/components/form/fields/combobox.tsx
index a90d8c085..9b0ef4dd3 100644
--- a/packages/vitnode/src/components/form/fields/combobox.tsx
+++ b/packages/vitnode/src/components/form/fields/combobox.tsx
@@ -6,12 +6,17 @@ import { useTranslations } from "use-intl";
 import {
   Combobox,
   ComboboxChip,
+  ComboboxChipList,
+  ComboboxChipOverflow,
   ComboboxChips,
   ComboboxChipsInput,
+  ComboboxCollection,
   ComboboxContent,
   ComboboxEmpty,
+  ComboboxGroup,
   ComboboxInput,
   ComboboxItem,
+  ComboboxLabel,
   ComboboxList,
   ComboboxValue,
   useComboboxAnchor,
@@ -20,9 +25,11 @@ import { FormMessage } from "@/components/ui/form";
 import { Skeleton } from "@/components/ui/skeleton";
 
 import type { ItemAutoFormComponentProps } from "../auto-form";
+import type { ComboboxItemGroup, ComboboxOption } from "./combobox-groups";
 
 import { AutoFormDesc } from "../common/desc";
 import { AutoFormLabel } from "../common/label";
+import { groupComboboxItems } from "./combobox-groups";
 
 export interface ComboboxAsyncItem {
   label: string;
@@ -37,7 +44,8 @@ export const COMBOBOX_INERT_QUERY_KEY = "combobox:no-fetcher";
 type AutoFormComboboxProps = ItemAutoFormComponentProps &
   Omit<React.ComponentProps<typeof Combobox>, "items" | "value"> & {
     className?: string;
-    labels?: { label: string; value: string }[];
+    labels?: ComboboxOption[];
+    maxVisibleChips?: number;
     placeholder?: string;
     renderChip?: (item: ComboboxAsyncItem) => React.ReactNode;
     renderItem?: (item: ComboboxAsyncItem) => React.ReactNode;
@@ -71,6 +79,7 @@ export const AutoFormCombobox = ({
   otherProps,
   labels = [],
   labelRight,
+  maxVisibleChips,
   onValueChange,
   onInputValueChange,
   disabled,
@@ -113,6 +122,11 @@ export const AutoFormCombobox = ({
   }, 500);
 
   const items = isAsync ? (data ?? []) : (otherProps?.enum ?? []);
+  const staticItemLabel = (item: string) =>
+    labels.find(l => l.value === item)?.label ?? item;
+  const groupedItems = isAsync
+    ? null
+    : groupComboboxItems(otherProps?.enum ?? [], labels);
   const inputPlaceholder = isAsync
     ? (searchPlaceholder ?? placeholder ?? t("select_option"))
     : (placeholder ?? t("select_option"));
@@ -172,15 +186,26 @@ export const AutoFormCombobox = ({
       );
     }
 
-    return (
-      <ComboboxList>
-        {(item: string) => (
-          <ComboboxItem key={item} value={item}>
-            {labels.find(l => l.value === item)?.label ?? item}
-          </ComboboxItem>
-        )}
-      </ComboboxList>
+    const renderStaticItem = (item: string) => (
+      <ComboboxItem key={item} value={item}>
+        {staticItemLabel(item)}
+      </ComboboxItem>
     );
+
+    if (groupedItems) {
+      return (
+        <ComboboxList>
+          {(group: ComboboxItemGroup) => (
+            <ComboboxGroup items={group.items} key={group.value}>
+              {group.value && <ComboboxLabel>{group.value}</ComboboxLabel>}
+              <ComboboxCollection>{renderStaticItem}</ComboboxCollection>
+            </ComboboxGroup>
+          )}
+        </ComboboxList>
+      );
+    }
+
+    return <ComboboxList>{renderStaticItem}</ComboboxList>;
   };
 
   const renderContent = () => {
@@ -218,7 +243,8 @@ export const AutoFormCombobox = ({
         disabled={disabled}
         filter={comboboxFilter}
         isItemEqualToValue={comboboxItemEqual}
-        items={items}
+        items={groupedItems ?? items}
+        itemToStringLabel={isAsync ? undefined : staticItemLabel}
         multiple={isMultiple}
         onInputValueChange={onComboboxInputValueChange}
         onValueChange={onComboboxValueChange}
@@ -231,23 +257,32 @@ export const AutoFormCombobox = ({
               <ComboboxValue>
                 {(values: (ComboboxAsyncItem | string)[]) => (
                   <>
-                    {values.map(value => {
-                      const item =
-                        typeof value === "string"
-                          ? {
-                              label:
-                                labels.find(l => l.value === value)?.label ??
+                    <ComboboxChipList>
+                      {values.slice(0, maxVisibleChips).map(value => {
+                        const item =
+                          typeof value === "string"
+                            ? {
+                                label:
+                                  labels.find(l => l.value === value)?.label ??
+                                  value,
                                 value,
-                              value,
-                            }
-                          : value;
+                              }
+                            : value;
 
-                      return (
-                        <ComboboxChip key={item.value}>
-                          {renderChip ? renderChip(item) : item.label}
-                        </ComboboxChip>
-                      );
-                    })}
+                        return (
+                          <ComboboxChip key={item.value}>
+                            {renderChip ? renderChip(item) : item.label}
+                          </ComboboxChip>
+                        );
+                      })}
+                      {maxVisibleChips !== undefined &&
+                        values.length > maxVisibleChips && (
+                          <ComboboxChipOverflow
+                            count={values.length - maxVisibleChips}
+                            key="overflow"
+                          />
+                        )}
+                    </ComboboxChipList>
                     <ComboboxChipsInput
                       aria-invalid={otherProps?.["aria-invalid"] ?? false}
                       disabled={disabled}
diff --git a/packages/vitnode/src/components/form/fields/file-gallery.tsx b/packages/vitnode/src/components/form/fields/file-gallery.tsx
index eb08c2f81..9f7054ff5 100644
--- a/packages/vitnode/src/components/form/fields/file-gallery.tsx
+++ b/packages/vitnode/src/components/form/fields/file-gallery.tsx
@@ -200,7 +200,7 @@ export const FileGallery = ({
   };
 
   const list = (
-    <ul className="flex flex-col gap-2" data-slot="file-list">
+    <ul className="not-prose flex flex-col gap-2" data-slot="file-list">
       {rows.map(row => {
         const name = rowName(row);
 
diff --git a/packages/vitnode/src/components/form/fields/input-otp.tsx b/packages/vitnode/src/components/form/fields/input-otp.tsx
new file mode 100644
index 000000000..c1e463322
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/input-otp.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+
+import type { ItemAutoFormComponentProps } from "../auto-form";
+
+import { FormControl, FormMessage } from "../../ui/form";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "../../ui/input-otp";
+import { AutoFormDesc } from "../common/desc";
+import { AutoFormLabel } from "../common/label";
+
+const DEFAULT_CODE_LENGTH = 6;
+
+const splitIntoHalves = (length: number) =>
+  length >= 6 && length % 2 === 0 ? [length / 2, length / 2] : [length];
+
+type AutoFormInputOTPProps = ItemAutoFormComponentProps &
+  Omit<
+    React.ComponentProps<typeof InputOTP>,
+    "children" | "maxLength" | "onChange" | "render" | "value"
+  > & {
+    groups?: number[];
+    maxLength?: number;
+    onChange?: (value: string) => void;
+  };
+
+export const AutoFormInputOTP = ({
+  label,
+  labelRight,
+  description,
+  otherProps,
+  field,
+  groups,
+  maxLength,
+  pattern,
+  onChange,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  itemParams,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  multiLang,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  children,
+  ...props
+}: AutoFormInputOTPProps) => {
+  const length = maxLength ?? otherProps.maxLength ?? DEFAULT_CODE_LENGTH;
+  const slotGroups = groups ?? splitIntoHalves(length);
+  const groupStarts = slotGroups.map((_, groupIndex) =>
+    slotGroups.slice(0, groupIndex).reduce((sum, size) => sum + size, 0),
+  );
+
+  return (
+    <>
+      {!!label && (
+        <AutoFormLabel
+          isOptional={otherProps.isOptional}
+          labelRight={labelRight}
+        >
+          {label}
+        </AutoFormLabel>
+      )}
+
+      <FormControl>
+        <InputOTP
+          maxLength={length}
+          name={field.name}
+          onBlur={field.onBlur}
+          onChange={value => {
+            field.onChange(value);
+            onChange?.(value);
+          }}
+          pattern={pattern ?? otherProps.pattern}
+          value={field.value ?? ""}
+          {...props}
+        >
+          {slotGroups.map((size, groupIndex) => (
+            <React.Fragment key={groupStarts[groupIndex]}>
+              {groupIndex > 0 && <InputOTPSeparator />}
+              <InputOTPGroup>
+                {Array.from({ length: size }, (_, slot) => {
+                  const index = groupStarts[groupIndex] + slot;
+
+                  return <InputOTPSlot index={index} key={index} />;
+                })}
+              </InputOTPGroup>
+            </React.Fragment>
+          ))}
+        </InputOTP>
+      </FormControl>
+
+      {!!description && <AutoFormDesc>{description}</AutoFormDesc>}
+      <FormMessage />
+    </>
+  );
+};
diff --git a/packages/vitnode/src/components/form/fields/nullable-number.tsx b/packages/vitnode/src/components/form/fields/nullable-number.tsx
index 41ff5eac8..d9f77c557 100644
--- a/packages/vitnode/src/components/form/fields/nullable-number.tsx
+++ b/packages/vitnode/src/components/form/fields/nullable-number.tsx
@@ -2,8 +2,14 @@ import { cn } from "cn";
 import React from "react";
 
 import { Checkbox } from "@/components/ui/checkbox";
-import { FormControl, FormMessage } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { FormControl, FormMessage, useFormField } from "@/components/ui/form";
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from "@/components/ui/number-field";
 
 import type { ItemAutoFormComponentProps } from "../auto-form";
 
@@ -11,8 +17,12 @@ import { AutoFormDesc } from "../common/desc";
 import { AutoFormLabel } from "../common/label";
 
 type AutoFormNullableNumberProps = ItemAutoFormComponentProps &
-  Omit<React.ComponentProps<typeof Input>, "value"> & {
+  Omit<
+    React.ComponentProps<typeof NumberField>,
+    "children" | "defaultValue" | "id" | "name" | "onValueChange" | "value"
+  > & {
     orLabel?: React.ReactNode;
+    placeholder?: string;
     toggleLabel: React.ReactNode;
     unitLabel?: React.ReactNode;
   };
@@ -30,15 +40,15 @@ export const AutoFormNullableNumber = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   multiLang,
   className,
+  disabled,
+  placeholder,
   unitLabel,
   orLabel,
   toggleLabel,
   ...props
 }: AutoFormNullableNumberProps) => {
+  const { formItemId } = useFormField();
   const isToggled = field.value === null;
-  const [text, setText] = React.useState(
-    typeof field.value === "number" ? String(field.value) : "",
-  );
   const lastNumericRef = React.useRef(
     typeof field.value === "number" ? field.value : 0,
   );
@@ -52,32 +62,30 @@ export const AutoFormNullableNumber = ({
       )}
 
       <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-        <FormControl>
-          <Input
-            className={cn("w-40", className)}
-            disabled={isToggled}
-            onChange={event => {
-              const raw = event.target.value;
-              setText(raw);
-
-              if (raw === "") {
-                lastNumericRef.current = 0;
-                field.onChange(0);
-
-                return;
-              }
-
-              const parsed = Number(raw);
-              if (Number.isNaN(parsed)) return;
-
-              lastNumericRef.current = parsed;
-              field.onChange(parsed);
-            }}
-            type="number"
-            value={isToggled ? "" : text}
-            {...props}
-          />
-        </FormControl>
+        <NumberField
+          className={cn("w-40", className)}
+          disabled={isToggled || disabled}
+          id={formItemId}
+          name={field.name}
+          onValueChange={value => {
+            const next = value ?? 0;
+            lastNumericRef.current = next;
+            field.onChange(next);
+          }}
+          value={typeof field.value === "number" ? field.value : null}
+          {...props}
+        >
+          <NumberFieldGroup>
+            <NumberFieldDecrement />
+            <FormControl>
+              <NumberFieldInput
+                onBlur={field.onBlur}
+                placeholder={placeholder}
+              />
+            </FormControl>
+            <NumberFieldIncrement />
+          </NumberFieldGroup>
+        </NumberField>
 
         {!!unitLabel && (
           <span className="text-muted-foreground text-sm">{unitLabel}</span>
@@ -89,15 +97,9 @@ export const AutoFormNullableNumber = ({
         <label className="flex items-center gap-2 text-sm">
           <Checkbox
             checked={isToggled}
+            disabled={disabled}
             onCheckedChange={checked => {
-              if (checked) {
-                field.onChange(null);
-
-                return;
-              }
-
-              field.onChange(lastNumericRef.current);
-              setText(String(lastNumericRef.current));
+              field.onChange(checked ? null : lastNumericRef.current);
             }}
           />
           {toggleLabel}
diff --git a/packages/vitnode/src/components/form/fields/number.tsx b/packages/vitnode/src/components/form/fields/number.tsx
index ba658b325..11809bef3 100644
--- a/packages/vitnode/src/components/form/fields/number.tsx
+++ b/packages/vitnode/src/components/form/fields/number.tsx
@@ -1,13 +1,14 @@
 import { cn } from "cn";
 import React from "react";
 
-import { FormControl, FormMessage } from "@/components/ui/form";
+import { FormControl, FormMessage, useFormField } from "@/components/ui/form";
 import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupText,
-} from "@/components/ui/input-group";
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from "@/components/ui/number-field";
 
 import type { ItemAutoFormComponentProps } from "../auto-form";
 
@@ -15,7 +16,11 @@ import { AutoFormDesc } from "../common/desc";
 import { AutoFormLabel } from "../common/label";
 
 type AutoFormNumberProps = ItemAutoFormComponentProps &
-  Omit<React.ComponentProps<typeof InputGroupInput>, "type" | "value"> & {
+  Omit<
+    React.ComponentProps<typeof NumberField>,
+    "children" | "defaultValue" | "id" | "name" | "onValueChange" | "value"
+  > & {
+    placeholder?: string;
     unitLabel?: React.ReactNode;
   };
 
@@ -30,12 +35,11 @@ export const AutoFormNumber = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   multiLang,
   otherProps: { isOptional },
+  placeholder,
   unitLabel,
   ...props
 }: AutoFormNumberProps) => {
-  const [text, setText] = React.useState(
-    typeof field.value === "number" ? String(field.value) : "",
-  );
+  const { formItemId } = useFormField();
 
   return (
     <>
@@ -45,31 +49,33 @@ export const AutoFormNumber = ({
         </AutoFormLabel>
       )}
 
-      <InputGroup className={cn("w-48", className)}>
-        <FormControl>
-          <InputGroupInput
-            {...field}
-            inputMode="numeric"
-            onChange={event => {
-              const raw = event.target.value;
-              setText(raw);
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+        <NumberField
+          className={cn("w-48", className)}
+          id={formItemId}
+          name={field.name}
+          onValueChange={value => {
+            field.onChange(value);
+          }}
+          value={typeof field.value === "number" ? field.value : null}
+          {...props}
+        >
+          <NumberFieldGroup>
+            <NumberFieldDecrement />
+            <FormControl>
+              <NumberFieldInput
+                onBlur={field.onBlur}
+                placeholder={placeholder}
+              />
+            </FormControl>
+            <NumberFieldIncrement />
+          </NumberFieldGroup>
+        </NumberField>
 
-              const parsed = Number(raw);
-              field.onChange(
-                raw === "" || Number.isNaN(parsed) ? null : parsed,
-              );
-            }}
-            type="number"
-            value={text}
-            {...props}
-          />
-        </FormControl>
         {!!unitLabel && (
-          <InputGroupAddon align="inline-end">
-            <InputGroupText>{unitLabel}</InputGroupText>
-          </InputGroupAddon>
+          <span className="text-muted-foreground text-sm">{unitLabel}</span>
         )}
-      </InputGroup>
+      </div>
 
       {!!description && <AutoFormDesc>{description}</AutoFormDesc>}
       <FormMessage />
diff --git a/packages/vitnode/src/components/table/content.tsx b/packages/vitnode/src/components/table/content.tsx
index a8628e28b..cde456b25 100644
--- a/packages/vitnode/src/components/table/content.tsx
+++ b/packages/vitnode/src/components/table/content.tsx
@@ -1,5 +1,7 @@
 import { cn } from "cn";
 import { SearchXIcon } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import React from "react";
 
 import type {
   AlignDataTable,
@@ -17,11 +19,26 @@ import {
   TableHeader,
   TableRow,
 } from "../ui/table";
+import { TooltipGroup } from "../ui/tooltip";
+import {
+  ExpandedRowDataTable,
+  ExpandHeaderDataTable,
+  ExpandToggleDataTable,
+  useRowExpansionDataTable,
+} from "./expansion";
 import { FiltersDataTable } from "./filters";
 import { useDataTableUrl } from "./navigation";
 import { NoResultsDataTable } from "./no-results";
 import { OrderTableHeadDataTable } from "./order-table-head";
 import { PaginationDataTable } from "./pagination";
+import {
+  ReorderHandleDataTable,
+  ReorderHeaderDataTable,
+  ReorderProviderDataTable,
+  SortableRowGroupDataTable,
+  useRowOrderDataTable,
+} from "./reorder";
+import { isTableInStoredOrder } from "./reorder-state";
 import { SearchDataTable } from "./search";
 import {
   BulkActionsDataTable,
@@ -49,8 +66,10 @@ export function ContentDataTable<T extends DataTableTMin>({
   bulkActions,
   columns,
   edges,
+  expandable,
   pageInfo,
   order,
+  reorderable,
   customNoResults,
   header,
   rowOpens,
@@ -60,6 +79,19 @@ export function ContentDataTable<T extends DataTableTMin>({
   ...props
 }: DataTableProps<T>) {
   const { searchParams } = useDataTableUrl();
+  const expandedBaseId = React.useId();
+  const { reorder, rows } = useRowOrderDataTable({
+    edges,
+    onReorder: reorderable?.onReorder,
+  });
+  const rowIds = rows.map(row => row.id);
+  const expansion = useRowExpansionDataTable({
+    defaultExpanded: expandable?.defaultExpanded,
+    rowIds,
+  });
+  const canExpand = (row: T) =>
+    expandable !== undefined && (expandable.canExpand?.(row) ?? true);
+  const expandedIdOf = (row: T) => `${expandedBaseId}expanded-${row.id}`;
   // WHICH COLUMN THE LIST IS ORDERED BY, SAID AND NOT ONLY DRAWN. The arrow on
   // the active header is the whole of what states the order once a surface
   // stops carrying an "Ordered" control beside its list, and an arrow is not
@@ -84,17 +116,161 @@ export function ContentDataTable<T extends DataTableTMin>({
     return ordered.order === "asc" ? "ascending" : "descending";
   };
   const hasToolbar = Boolean(search) || Boolean(filters?.length);
-  const allColumns: ColumnDef<T>[] = bulkActions
-    ? [
-        {
-          id: "select",
-          header: <SelectAllDataTable />,
-          className: "w-8",
-          cell: ({ row }) => <SelectRowDataTable id={row.id} />,
-        },
-        ...columns,
-      ]
-    : columns;
+  const isReorderDisabled =
+    reorderable?.disabled === true ||
+    !isTableInStoredOrder(searchParams, {
+      defaultOrder: {
+        column: String(order.defaultOrder.column),
+        order: order.defaultOrder.order,
+      },
+      filterIds: filters?.map(filter => filter.id) ?? [],
+    });
+  const rowLabelOf = (id: number) => {
+    const row = rows.find(item => item.id === id);
+
+    return row ? reorderable?.getRowLabel?.(row) : undefined;
+  };
+  const allColumns: ColumnDef<T>[] = [
+    ...(reorderable
+      ? [
+          {
+            id: "reorder",
+            header: <ReorderHeaderDataTable />,
+            className: "w-8",
+            cell: () => <ReorderHandleDataTable />,
+          },
+        ]
+      : []),
+    ...(bulkActions
+      ? [
+          {
+            id: "select",
+            header: <SelectAllDataTable />,
+            className: "w-8",
+            cell: ({ row }: { row: T }) => <SelectRowDataTable id={row.id} />,
+          },
+        ]
+      : []),
+    ...(expandable
+      ? [
+          {
+            id: "expand",
+            header: <ExpandHeaderDataTable />,
+            className: "w-8",
+            cell: ({ row }: { row: T }) =>
+              canExpand(row) ? (
+                <ExpandToggleDataTable
+                  controls={expandedIdOf(row)}
+                  expanded={expansion.isExpanded(row.id)}
+                  onToggle={() => expansion.toggle(row.id)}
+                />
+              ) : null,
+          },
+        ]
+      : []),
+    ...columns,
+  ];
+
+  const renderRow = (row: T) => {
+    const cells = allColumns.map(column => {
+      const columnKey = column.id ?? String(column.accessorKey);
+      const content = column.cell
+        ? column.cell({ allData: rows, row })
+        : column.accessorKey != null
+          ? String(row[column.accessorKey])
+          : "";
+
+      return (
+        <TableCell
+          // The column's own class reaches the cell as well as the
+          // head. It reached the head alone, so a caller could
+          // neither align a value under its own header nor let a
+          // long name wrap, and both had to be redone on an element
+          // inside the cell.
+          className={cn(alignClassName(column.align), column.className)}
+          key={`${row.id}_${columnKey}`}
+        >
+          {content}
+        </TableCell>
+      );
+    });
+
+    const detail = expandable && (
+      <AnimatePresence initial={false}>
+        {canExpand(row) && expansion.isExpanded(row.id) && (
+          <ExpandedRowDataTable
+            colSpan={allColumns.length}
+            id={expandedIdOf(row)}
+            key="expanded"
+          >
+            {expandable.render(row)}
+          </ExpandedRowDataTable>
+        )}
+      </AnimatePresence>
+    );
+
+    if (bulkActions) {
+      return (
+        <>
+          <RowSelectableDataTable id={row.id}>{cells}</RowSelectableDataTable>
+          {detail}
+        </>
+      );
+    }
+
+    return (
+      <>
+        <TableRow
+          className={
+            rowOpens
+              ? "focus-visible:bg-muted/50 focus-visible:outline-ring cursor-pointer focus-visible:outline-1"
+              : undefined
+          }
+          onClick={
+            rowOpens
+              ? event => {
+                  // A control inside the row answers for itself,
+                  // and a reader who has selected text in a cell
+                  // was reading it rather than asking to leave.
+                  if (
+                    (event.target as HTMLElement).closest(
+                      "a,button,input,select,textarea,[role=checkbox]",
+                    )
+                  ) {
+                    return;
+                  }
+                  if (window.getSelection()?.toString()) {
+                    return;
+                  }
+                  rowOpens(row);
+                }
+              : undefined
+          }
+          onKeyDown={
+            rowOpens
+              ? event => {
+                  if (
+                    (event.target as HTMLElement).closest(
+                      "a,button,input,select,textarea,[role=checkbox]",
+                    )
+                  ) {
+                    return;
+                  }
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    rowOpens(row);
+                  }
+                }
+              : undefined
+          }
+          tabIndex={rowOpens ? 0 : undefined}
+        >
+          {cells}
+        </TableRow>
+        {detail}
+      </>
+    );
+  };
 
   const table = (
     <div className="bg-card text-card-foreground ring-foreground/10 overflow-hidden rounded-md shadow-xs ring-1">
@@ -125,7 +301,7 @@ export function ContentDataTable<T extends DataTableTMin>({
           the table's own `overflow-x-auto` then works against. It lives here
           because every caller sits in that same `<main>`. */}
       <div className="grid grid-cols-[minmax(0,1fr)]">
-        <div>
+        <div className={expandable ? "@container" : undefined}>
           <Table
             {...props}
             className={cn(
@@ -141,6 +317,7 @@ export function ContentDataTable<T extends DataTableTMin>({
               "[&_td:first-child]:pl-4 sm:[&_td:first-child]:pl-6 [&_th:first-child]:pl-4 sm:[&_th:first-child]:pl-6",
               "[&_td:last-child]:pr-4 sm:[&_td:last-child]:pr-6 [&_th:last-child]:pr-4 sm:[&_th:last-child]:pr-6",
               bulkActions &&
+                !reorderable &&
                 "[&_td:first-child]:pe-4 sm:[&_td:first-child]:pe-5 [&_th:first-child]:pe-4 sm:[&_th:first-child]:pe-5",
               props.className,
             )}
@@ -179,95 +356,8 @@ export function ContentDataTable<T extends DataTableTMin>({
               </TableRow>
             </TableHeader>
 
-            <TableBody>
-              {edges.length ? (
-                edges.map(row => {
-                  const cells = allColumns.map(column => {
-                    const columnKey = column.id ?? String(column.accessorKey);
-                    const content = column.cell
-                      ? column.cell({ allData: edges, row })
-                      : column.accessorKey != null
-                        ? String(row[column.accessorKey])
-                        : "";
-
-                    return (
-                      <TableCell
-                        // The column's own class reaches the cell as well as the
-                        // head. It reached the head alone, so a caller could
-                        // neither align a value under its own header nor let a
-                        // long name wrap, and both had to be redone on an element
-                        // inside the cell.
-                        className={cn(
-                          alignClassName(column.align),
-                          column.className,
-                        )}
-                        key={`${row.id}_${columnKey}`}
-                      >
-                        {content}
-                      </TableCell>
-                    );
-                  });
-
-                  if (bulkActions) {
-                    return (
-                      <RowSelectableDataTable id={row.id} key={row.id}>
-                        {cells}
-                      </RowSelectableDataTable>
-                    );
-                  }
-
-                  return (
-                    <TableRow
-                      className={
-                        rowOpens
-                          ? "focus-visible:bg-muted/50 focus-visible:outline-ring cursor-pointer focus-visible:outline-1"
-                          : undefined
-                      }
-                      key={row.id}
-                      onClick={
-                        rowOpens
-                          ? event => {
-                              // A control inside the row answers for itself,
-                              // and a reader who has selected text in a cell
-                              // was reading it rather than asking to leave.
-                              if (
-                                (event.target as HTMLElement).closest(
-                                  "a,button,input,select,textarea,[role=checkbox]",
-                                )
-                              ) {
-                                return;
-                              }
-                              if (window.getSelection()?.toString()) {
-                                return;
-                              }
-                              rowOpens(row);
-                            }
-                          : undefined
-                      }
-                      onKeyDown={
-                        rowOpens
-                          ? event => {
-                              if (
-                                (event.target as HTMLElement).closest(
-                                  "a,button,input,select,textarea,[role=checkbox]",
-                                )
-                              ) {
-                                return;
-                              }
-                              if (event.key === "Enter" || event.key === " ") {
-                                event.preventDefault();
-                                rowOpens(row);
-                              }
-                            }
-                          : undefined
-                      }
-                      tabIndex={rowOpens ? 0 : undefined}
-                    >
-                      {cells}
-                    </TableRow>
-                  );
-                })
-              ) : (
+            {rows.length === 0 ? (
+              <TableBody>
                 <TableRow className="hover:bg-transparent">
                   <TableCell
                     className="!p-0 whitespace-normal"
@@ -289,8 +379,32 @@ export function ContentDataTable<T extends DataTableTMin>({
                     </Empty>
                   </TableCell>
                 </TableRow>
-              )}
-            </TableBody>
+              </TableBody>
+            ) : reorderable ? (
+              <ReorderProviderDataTable
+                ids={rowIds}
+                labelOf={rowLabelOf}
+                onMove={reorder}
+              >
+                {rows.map((row, index) => (
+                  <SortableRowGroupDataTable
+                    disabled={isReorderDisabled}
+                    id={row.id}
+                    key={row.id}
+                    label={reorderable.getRowLabel?.(row)}
+                    position={index + 1}
+                  >
+                    {renderRow(row)}
+                  </SortableRowGroupDataTable>
+                ))}
+              </ReorderProviderDataTable>
+            ) : (
+              <TableBody>
+                {rows.map(row => (
+                  <React.Fragment key={row.id}>{renderRow(row)}</React.Fragment>
+                ))}
+              </TableBody>
+            )}
           </Table>
         </div>
       </div>
@@ -300,13 +414,15 @@ export function ContentDataTable<T extends DataTableTMin>({
   );
 
   if (!bulkActions) {
-    return table;
+    return <TooltipGroup>{table}</TooltipGroup>;
   }
 
   return (
-    <SelectionProviderDataTable rowIds={edges.map(row => row.id)}>
-      {table}
-      <BulkActionsDataTable actions={bulkActions} />
-    </SelectionProviderDataTable>
+    <TooltipGroup>
+      <SelectionProviderDataTable rowIds={rowIds}>
+        {table}
+        <BulkActionsDataTable actions={bulkActions} />
+      </SelectionProviderDataTable>
+    </TooltipGroup>
   );
 }
diff --git a/packages/vitnode/src/components/table/data-table-content.tsx b/packages/vitnode/src/components/table/data-table-content.tsx
index 887ed3cce..678e0997d 100644
--- a/packages/vitnode/src/components/table/data-table-content.tsx
+++ b/packages/vitnode/src/components/table/data-table-content.tsx
@@ -1,8 +1,10 @@
 import { cn } from "cn";
 import React from "react";
 
+import type { ExpandableDataTable } from "./expansion";
 import type { FilterDataTable } from "./filters";
 import type { PaginationDataTable } from "./pagination";
+import type { ReorderableDataTable } from "./reorder";
 import type { SearchDataTable } from "./search";
 
 import { Skeleton } from "../ui/skeleton";
@@ -64,6 +66,7 @@ export type DataTableProps<T extends DataTableTMin> = Omit<
       title?: string;
     };
     edges: T[];
+    expandable?: ExpandableDataTable<T>;
     filters?: FilterDataTable[];
     header?: React.ReactNode;
     id: string;
@@ -74,6 +77,7 @@ export type DataTableProps<T extends DataTableTMin> = Omit<
         order: "asc" | "desc";
       };
     };
+    reorderable?: ReorderableDataTable<T>;
     rowOpens?: (row: T) => void;
     search?: boolean;
   };
diff --git a/packages/vitnode/src/components/table/expansion.test.tsx b/packages/vitnode/src/components/table/expansion.test.tsx
new file mode 100644
index 000000000..a7c0450b6
--- /dev/null
+++ b/packages/vitnode/src/components/table/expansion.test.tsx
@@ -0,0 +1,159 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { ColumnDef, DataTableTMin } from "./data-table-content";
+import type { ExpandableDataTable } from "./expansion";
+
+import { ContentDataTable } from "./content";
+import { DataTableNavigationProvider } from "./navigation";
+
+interface Order extends DataTableTMin {
+  id: number;
+  items: string[];
+  number: string;
+}
+
+const edges: Order[] = [
+  { id: 1, items: ["Coffee beans"], number: "#1001" },
+  { id: 2, items: [], number: "#1002" },
+];
+
+const columns: ColumnDef<Order>[] = [
+  { accessorKey: "number", header: "Order" },
+];
+
+const renderTable = ({
+  bulkActions,
+  expandable,
+}: {
+  bulkActions?: React.ReactNode;
+  expandable?: ExpandableDataTable<Order>;
+} = {}) =>
+  render(
+    <DataTableNavigationProvider
+      value={{ navigate: vi.fn(), searchParams: new URLSearchParams() }}
+    >
+      <ContentDataTable<Order>
+        bulkActions={bulkActions}
+        columns={columns}
+        edges={edges}
+        expandable={expandable}
+        id="orders"
+        order={{ defaultOrder: { column: "number", order: "asc" } }}
+        pageInfo={{
+          count: 2,
+          currentPage: 1,
+          endCursor: null,
+          hasNextPage: false,
+          hasPreviousPage: false,
+          pageSize: 10,
+          startCursor: null,
+          totalCount: 2,
+          totalPages: 1,
+        }}
+      />
+    </DataTableNavigationProvider>,
+  );
+
+const renderItems = (row: Order) => (
+  <ul>
+    {row.items.map(item => (
+      <li key={item}>{item}</li>
+    ))}
+  </ul>
+);
+
+const expandLabel = "core.global.data_table.expand_row";
+const collapseLabel = "core.global.data_table.collapse_row";
+
+describe("ContentDataTable expandable rows", () => {
+  it("renders no toggle and no extra column without the prop", () => {
+    renderTable();
+
+    expect(screen.queryByRole("button", { name: expandLabel })).toBeNull();
+    expect(screen.getAllByRole("columnheader")).toHaveLength(1);
+    expect(screen.getAllByRole("row")).toHaveLength(3);
+  });
+
+  it("shows and hides the detail when the toggle is pressed", async () => {
+    renderTable({ expandable: { render: renderItems } });
+
+    const [toggle] = screen.getAllByRole("button", { name: expandLabel });
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByText("Coffee beans")).toBeNull();
+
+    fireEvent.click(toggle);
+
+    expect(screen.getByText("Coffee beans")).toBeTruthy();
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    expect(toggle.getAttribute("aria-label")).toBe(collapseLabel);
+    const region = screen.getByTestId("table-expanded-row");
+    expect(toggle.getAttribute("aria-controls")).toBe(region.id);
+    expect(region.closest("td")?.getAttribute("colspan")).toBe("2");
+
+    fireEvent.click(toggle);
+
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    await waitFor(() => {
+      expect(screen.queryByText("Coffee beans")).toBeNull();
+    });
+  });
+
+  it("keeps several rows open at once", () => {
+    renderTable({ expandable: { render: row => `Detail ${row.number}` } });
+
+    for (const toggle of screen.getAllByRole("button", {
+      name: expandLabel,
+    })) {
+      fireEvent.click(toggle);
+    }
+
+    expect(screen.getByText("Detail #1001")).toBeTruthy();
+    expect(screen.getByText("Detail #1002")).toBeTruthy();
+  });
+
+  it("gives rows that cannot expand no toggle", () => {
+    renderTable({
+      expandable: {
+        canExpand: row => row.items.length > 0,
+        render: renderItems,
+      },
+    });
+
+    const rows = screen.getAllByRole("row");
+    expect(
+      within(rows[1]).getByRole("button", { name: expandLabel }),
+    ).toBeTruthy();
+    expect(within(rows[2]).queryByRole("button")).toBeNull();
+  });
+
+  it("opens the rows listed in defaultExpanded", () => {
+    renderTable({ expandable: { defaultExpanded: [1], render: renderItems } });
+
+    expect(screen.getByText("Coffee beans")).toBeTruthy();
+    expect(
+      screen
+        .getByRole("button", { name: collapseLabel })
+        .getAttribute("aria-expanded"),
+    ).toBe("true");
+  });
+
+  it("puts the toggle after the selection checkbox", () => {
+    renderTable({
+      bulkActions: <span>Bulk</span>,
+      expandable: { render: renderItems },
+    });
+
+    const cells = within(screen.getAllByRole("row")[1]).getAllByRole("cell");
+    expect(within(cells[0]).getByRole("checkbox")).toBeTruthy();
+    expect(
+      within(cells[1]).getByRole("button", { name: expandLabel }),
+    ).toBeTruthy();
+  });
+});
diff --git a/packages/vitnode/src/components/table/expansion.tsx b/packages/vitnode/src/components/table/expansion.tsx
new file mode 100644
index 000000000..637c275d4
--- /dev/null
+++ b/packages/vitnode/src/components/table/expansion.tsx
@@ -0,0 +1,126 @@
+import { cn } from "cn";
+import { ChevronRightIcon } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+import { Button } from "../ui/button";
+import { TableCell, TableRow } from "../ui/table";
+
+export interface ExpandableDataTable<T> {
+  canExpand?: (row: T) => boolean;
+  defaultExpanded?: number[];
+  render: (row: T) => React.ReactNode;
+}
+
+export const useRowExpansionDataTable = ({
+  defaultExpanded,
+  rowIds,
+}: {
+  defaultExpanded?: number[];
+  rowIds: number[];
+}) => {
+  const [expanded, setExpanded] = React.useState<number[]>(
+    defaultExpanded ?? [],
+  );
+  const pageKey = rowIds.join(",");
+  const [prevPageKey, setPrevPageKey] = React.useState(pageKey);
+
+  if (pageKey !== prevPageKey) {
+    setPrevPageKey(pageKey);
+    setExpanded(current => {
+      const next = current.filter(id => rowIds.includes(id));
+
+      return next.length === current.length ? current : next;
+    });
+  }
+
+  const isExpanded = React.useCallback(
+    (id: number) => expanded.includes(id),
+    [expanded],
+  );
+
+  const toggle = React.useCallback((id: number) => {
+    setExpanded(current =>
+      current.includes(id)
+        ? current.filter(item => item !== id)
+        : [...current, id],
+    );
+  }, []);
+
+  return { isExpanded, toggle };
+};
+
+export function ExpandHeaderDataTable() {
+  const t = useTranslations("core.global.data_table");
+
+  return <span className="sr-only">{t("row_details")}</span>;
+}
+
+export function ExpandToggleDataTable({
+  controls,
+  expanded,
+  onToggle,
+}: {
+  controls: string;
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  const t = useTranslations("core.global.data_table");
+
+  return (
+    <Button
+      aria-controls={controls}
+      aria-expanded={expanded}
+      aria-label={expanded ? t("collapse_row") : t("expand_row")}
+      className="-ms-1.5"
+      onClick={onToggle}
+      size="icon-sm"
+      variant="ghost"
+    >
+      <ChevronRightIcon
+        aria-hidden="true"
+        className={cn(
+          "transition-transform duration-200 ease-out motion-reduce:transition-none",
+          expanded ? "rotate-90" : "rtl:rotate-180",
+        )}
+      />
+    </Button>
+  );
+}
+
+export function ExpandedRowDataTable({
+  children,
+  colSpan,
+  id,
+}: {
+  children: React.ReactNode;
+  colSpan: number;
+  id: string;
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const collapsed = shouldReduceMotion
+    ? { opacity: 0 }
+    : { height: 0, opacity: 0 };
+
+  return (
+    <TableRow className="bg-muted/30 hover:bg-muted/30">
+      <TableCell className="p-0! whitespace-normal" colSpan={colSpan}>
+        <motion.div
+          animate={{ height: "auto", opacity: 1 }}
+          className="sticky start-0 w-[100cqi] overflow-hidden"
+          data-testid="table-expanded-row"
+          exit={collapsed}
+          id={id}
+          initial={collapsed}
+          transition={{
+            height: { type: "spring", duration: 0.3, bounce: 0 },
+            opacity: { duration: 0.2, ease: "easeOut" },
+          }}
+        >
+          <div className="px-4 py-4 sm:px-6">{children}</div>
+        </motion.div>
+      </TableCell>
+    </TableRow>
+  );
+}
diff --git a/packages/vitnode/src/components/table/filters.tsx b/packages/vitnode/src/components/table/filters.tsx
index b3a9642e2..a307c7fe7 100644
--- a/packages/vitnode/src/components/table/filters.tsx
+++ b/packages/vitnode/src/components/table/filters.tsx
@@ -105,7 +105,12 @@ function FilterItem({ filter }: { filter: FilterDataTable }) {
               orientation="vertical"
             />
             {isAsync || selectedStaticOptions.length > 2 ? (
-              <Badge>{t("selected_count", { count: selected.length })}</Badge>
+              <Badge>
+                {t.rich("selected_count", {
+                  count: selected.length,
+                  number: chunks => <>{chunks}</>,
+                })}
+              </Badge>
             ) : (
               selectedStaticOptions.map(option => (
                 <Badge key={option.value}>{option.label}</Badge>
diff --git a/packages/vitnode/src/components/table/order-table-head.tsx b/packages/vitnode/src/components/table/order-table-head.tsx
index 9663e529c..e4357a8e4 100644
--- a/packages/vitnode/src/components/table/order-table-head.tsx
+++ b/packages/vitnode/src/components/table/order-table-head.tsx
@@ -9,7 +9,7 @@ import type {
 } from "./data-table-content";
 
 import { Button } from "../ui/button";
-import { Loader } from "../ui/loader";
+import { Spinner } from "../ui/spinner";
 import { useDataTableUrl } from "./navigation";
 import { readTableOrder, toggleTableOrder } from "./url-state";
 
@@ -34,7 +34,7 @@ export function OrderTableHeadDataTable<T extends DataTableTMin>({
 
   let icon: React.ReactNode;
   if (isPending) {
-    icon = <Loader small />;
+    icon = <Spinner />;
   } else if (isActive) {
     icon = current.order === "asc" ? <ArrowUp /> : <ArrowDown />;
   } else {
diff --git a/packages/vitnode/src/components/table/pagination.tsx b/packages/vitnode/src/components/table/pagination.tsx
index 26ab2b3fe..e975bbb07 100644
--- a/packages/vitnode/src/components/table/pagination.tsx
+++ b/packages/vitnode/src/components/table/pagination.tsx
@@ -85,6 +85,7 @@ export const PaginationDataTable = ({
       : {
           "aria-disabled": true as const,
           className: "pointer-events-none opacity-50",
+          role: "link",
           tabIndex: -1,
         };
 
@@ -125,6 +126,7 @@ export const PaginationDataTable = ({
       : {
           "aria-disabled": true as const,
           className: "pointer-events-none opacity-50",
+          role: "link",
           tabIndex: -1,
         };
 
diff --git a/packages/vitnode/src/components/table/reorder-state.ts b/packages/vitnode/src/components/table/reorder-state.ts
new file mode 100644
index 000000000..877aaa784
--- /dev/null
+++ b/packages/vitnode/src/components/table/reorder-state.ts
@@ -0,0 +1,54 @@
+import { arrayMove } from "@dnd-kit/sortable";
+
+import { readTableOrder, readTableSearch, type TableOrder } from "./url-state";
+
+export interface ReorderDetailsDataTable {
+  activeId: number;
+  from: number;
+  overId: number;
+  to: number;
+}
+
+export interface RowMoveDataTable extends ReorderDetailsDataTable {
+  ids: number[];
+}
+
+export const moveRowId = (
+  ids: readonly number[],
+  activeId: number,
+  overId: number,
+): null | RowMoveDataTable => {
+  const from = ids.indexOf(activeId);
+  const to = ids.indexOf(overId);
+
+  if (from === -1 || to === -1 || from === to) return null;
+
+  return {
+    activeId,
+    from,
+    ids: arrayMove([...ids], from, to),
+    overId,
+    to,
+  };
+};
+
+export const isTableInStoredOrder = (
+  searchParams: URLSearchParams,
+  {
+    defaultOrder,
+    filterIds,
+  }: {
+    defaultOrder: TableOrder;
+    filterIds: readonly string[];
+  },
+): boolean => {
+  if (readTableSearch(searchParams).trim() !== "") return false;
+  if (filterIds.some(id => searchParams.get(id))) return false;
+
+  const ordered = readTableOrder(searchParams, defaultOrder);
+
+  return (
+    ordered.column === defaultOrder.column &&
+    ordered.order === defaultOrder.order
+  );
+};
diff --git a/packages/vitnode/src/components/table/reorder.test.tsx b/packages/vitnode/src/components/table/reorder.test.tsx
new file mode 100644
index 000000000..07047be2f
--- /dev/null
+++ b/packages/vitnode/src/components/table/reorder.test.tsx
@@ -0,0 +1,319 @@
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { toast } from "sonner";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { ColumnDef, DataTableTMin } from "./data-table-content";
+import type { ExpandableDataTable } from "./expansion";
+import type { ReorderableDataTable } from "./reorder";
+
+import { ContentDataTable } from "./content";
+import { DataTableNavigationProvider } from "./navigation";
+import { useRowOrderDataTable } from "./reorder";
+import { isTableInStoredOrder, moveRowId } from "./reorder-state";
+
+interface Task extends DataTableTMin {
+  id: number;
+  title: string;
+}
+
+const edges: Task[] = [
+  { id: 1, title: "Write docs" },
+  { id: 2, title: "Fix bug" },
+  { id: 3, title: "Ship it" },
+];
+
+const columns: ColumnDef<Task>[] = [{ accessorKey: "title", header: "Task" }];
+
+const handleLabel = "core.global.data_table.reorder_row";
+
+const renderTable = ({
+  bulkActions,
+  expandable,
+  reorderable,
+  search = "",
+}: {
+  bulkActions?: React.ReactNode;
+  expandable?: ExpandableDataTable<Task>;
+  reorderable?: ReorderableDataTable<Task>;
+  search?: string;
+} = {}) =>
+  render(
+    <DataTableNavigationProvider
+      value={{ navigate: vi.fn(), searchParams: new URLSearchParams(search) }}
+    >
+      <ContentDataTable<Task>
+        bulkActions={bulkActions}
+        columns={columns}
+        edges={edges}
+        expandable={expandable}
+        filters={[{ id: "status", label: "Status", options: [] }]}
+        id="tasks"
+        order={{
+          columns: ["title"],
+          defaultOrder: { column: "id", order: "asc" },
+        }}
+        pageInfo={{
+          count: 3,
+          currentPage: 1,
+          endCursor: null,
+          hasNextPage: false,
+          hasPreviousPage: false,
+          pageSize: 10,
+          startCursor: null,
+          totalCount: 3,
+          totalPages: 1,
+        }}
+        reorderable={reorderable}
+      />
+    </DataTableNavigationProvider>,
+  );
+
+const titles = () =>
+  screen
+    .getAllByRole("row")
+    .slice(1)
+    .map(row => within(row).getAllByRole("cell").at(-1)?.textContent);
+
+const stubRowGeometry = () => {
+  const rowHeight = 40;
+
+  vi.spyOn(Element.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: Element) {
+      const group = this.closest("[data-slot=table-row-group]");
+      const index = group?.parentElement
+        ? [
+            ...group.parentElement.querySelectorAll(
+              ":scope > [data-slot=table-row-group]",
+            ),
+          ].indexOf(group)
+        : -1;
+      const top = index === -1 ? 0 : 40 + index * rowHeight;
+      const height = index === -1 ? 1000 : rowHeight;
+
+      return DOMRect.fromRect({ height, width: 600, x: 0, y: top });
+    },
+  );
+};
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  Reflect.deleteProperty(Element.prototype, "animate");
+});
+
+describe("moveRowId", () => {
+  it("moves a row down and reports where it came from and went", () => {
+    expect(moveRowId([1, 2, 3, 4], 1, 3)).toEqual({
+      activeId: 1,
+      from: 0,
+      ids: [2, 3, 1, 4],
+      overId: 3,
+      to: 2,
+    });
+  });
+
+  it("moves a row up", () => {
+    expect(moveRowId([1, 2, 3, 4], 4, 2)?.ids).toEqual([1, 4, 2, 3]);
+  });
+
+  it("returns null for a drop in place or an unknown id", () => {
+    expect(moveRowId([1, 2, 3], 2, 2)).toBeNull();
+    expect(moveRowId([1, 2, 3], 9, 2)).toBeNull();
+    expect(moveRowId([1, 2, 3], 2, 9)).toBeNull();
+  });
+
+  it("does not mutate the ids it was given", () => {
+    const ids = [1, 2, 3];
+    moveRowId(ids, 1, 3);
+
+    expect(ids).toEqual([1, 2, 3]);
+  });
+});
+
+describe("isTableInStoredOrder", () => {
+  const options = {
+    defaultOrder: { column: "position", order: "asc" as const },
+    filterIds: ["status"],
+  };
+
+  it("is true for the default view", () => {
+    expect(isTableInStoredOrder(new URLSearchParams(), options)).toBe(true);
+    expect(
+      isTableInStoredOrder(
+        new URLSearchParams("orderBy=position&order=asc&page=2"),
+        options,
+      ),
+    ).toBe(true);
+  });
+
+  it("is false while searching, filtering or sorting by something else", () => {
+    expect(
+      isTableInStoredOrder(new URLSearchParams("search=bug"), options),
+    ).toBe(false);
+    expect(
+      isTableInStoredOrder(new URLSearchParams("status=open"), options),
+    ).toBe(false);
+    expect(
+      isTableInStoredOrder(new URLSearchParams("orderBy=title"), options),
+    ).toBe(false);
+    expect(
+      isTableInStoredOrder(new URLSearchParams("order=desc"), options),
+    ).toBe(false);
+  });
+});
+
+describe("useRowOrderDataTable", () => {
+  it("reorders right away and keeps the order when saving succeeds", async () => {
+    const onReorder = vi.fn().mockResolvedValue(undefined);
+    const { result } = renderHook(() =>
+      useRowOrderDataTable({ edges, onReorder }),
+    );
+
+    act(() => {
+      result.current.reorder(1, 3);
+    });
+
+    expect(result.current.rows.map(row => row.id)).toEqual([2, 3, 1]);
+    expect(onReorder).toHaveBeenCalledWith([2, 3, 1], {
+      activeId: 1,
+      from: 0,
+      overId: 3,
+      to: 2,
+    });
+    await waitFor(() => {
+      expect(result.current.rows.map(row => row.id)).toEqual([2, 3, 1]);
+    });
+  });
+
+  it("rolls back and shows an error toast when saving fails", async () => {
+    const errorToast = vi.spyOn(toast, "error");
+    const onReorder = vi.fn().mockRejectedValue(new Error("offline"));
+    const { result } = renderHook(() =>
+      useRowOrderDataTable({ edges, onReorder }),
+    );
+
+    act(() => {
+      result.current.reorder(3, 1);
+    });
+
+    expect(result.current.rows.map(row => row.id)).toEqual([3, 1, 2]);
+    await waitFor(() => {
+      expect(result.current.rows.map(row => row.id)).toEqual([1, 2, 3]);
+    });
+    expect(errorToast).toHaveBeenCalledWith(
+      "core.global.data_table.reorder_failed",
+      { description: "core.global.data_table.reorder_failed_desc" },
+    );
+  });
+
+  it("follows the server again once it sends a new order", () => {
+    const { rerender, result } = renderHook(
+      ({ rows }) => useRowOrderDataTable({ edges: rows, onReorder: vi.fn() }),
+      { initialProps: { rows: edges } },
+    );
+
+    act(() => {
+      result.current.reorder(1, 2);
+    });
+    rerender({ rows: [edges[2], edges[0], edges[1]] });
+
+    expect(result.current.rows.map(row => row.id)).toEqual([3, 1, 2]);
+  });
+});
+
+describe("ContentDataTable reorderable rows", () => {
+  it("renders no handle and no extra column without the prop", () => {
+    renderTable();
+
+    expect(screen.queryByRole("button", { name: handleLabel })).toBeNull();
+    expect(screen.getAllByRole("columnheader")).toHaveLength(1);
+  });
+
+  it("gives every row a sortable handle in the first column", () => {
+    renderTable({
+      bulkActions: <span>Bulk</span>,
+      reorderable: { getRowLabel: row => row.title, onReorder: vi.fn() },
+    });
+
+    const handles = screen.getAllByRole("button", { name: handleLabel });
+    expect(handles).toHaveLength(3);
+    expect(handles[0].getAttribute("aria-roledescription")).toBe("sortable");
+
+    const cells = within(screen.getAllByRole("row")[1]).getAllByRole("cell");
+    expect(within(cells[0]).getByRole("button")).toBe(handles[0]);
+    expect(within(cells[1]).getByRole("checkbox")).toBeTruthy();
+  });
+
+  it("keeps an open detail panel in the group that moves with its row", () => {
+    renderTable({
+      expandable: { defaultExpanded: [2], render: row => `About ${row.title}` },
+      reorderable: { onReorder: vi.fn() },
+    });
+
+    const detail = screen.getByText("About Fix bug");
+    const group = detail.closest("[data-slot=table-row-group]");
+
+    expect(group).not.toBeNull();
+    expect(within(group as HTMLElement).getByText("Fix bug")).toBeTruthy();
+  });
+
+  it("locks the handles while the view is searched", () => {
+    renderTable({
+      reorderable: { onReorder: vi.fn() },
+      search: "search=bug",
+    });
+
+    for (const handle of screen.getAllByRole("button", {
+      name: handleLabel,
+    })) {
+      expect(handle.getAttribute("aria-disabled")).toBe("true");
+    }
+  });
+
+  it("moves a row with the keyboard, saves the new order and settles it into place", async () => {
+    stubRowGeometry();
+    const animate = vi.fn();
+    Object.defineProperty(Element.prototype, "animate", {
+      configurable: true,
+      value: animate,
+    });
+    const onReorder = vi.fn();
+    renderTable({ reorderable: { onReorder } });
+
+    const [first] = screen.getAllByRole("button", { name: handleLabel });
+    first.focus();
+    fireEvent.keyDown(first, { code: "Space", key: " " });
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    fireEvent.keyDown(first, { code: "ArrowDown", key: "ArrowDown" });
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    fireEvent.keyDown(first, { code: "Space", key: " " });
+
+    await waitFor(() => {
+      expect(onReorder).toHaveBeenCalledWith([2, 1, 3], {
+        activeId: 1,
+        from: 0,
+        overId: 2,
+        to: 1,
+      });
+    });
+    expect(titles()).toEqual(["Fix bug", "Write docs", "Ship it"]);
+    expect(animate).toHaveBeenCalledWith(
+      [
+        { transform: "translate3d(0, -40px, 0)" },
+        { transform: "translate3d(0, 0, 0)" },
+      ],
+      expect.objectContaining({ duration: 200 }),
+    );
+  });
+});
diff --git a/packages/vitnode/src/components/table/reorder.tsx b/packages/vitnode/src/components/table/reorder.tsx
new file mode 100644
index 000000000..798f2731d
--- /dev/null
+++ b/packages/vitnode/src/components/table/reorder.tsx
@@ -0,0 +1,299 @@
+import type { Announcements } from "@dnd-kit/core";
+
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useDndMonitor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  restrictToParentElement,
+  restrictToVerticalAxis,
+} from "@dnd-kit/modifiers";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "cn";
+import { GripVerticalIcon } from "lucide-react";
+import { useReducedMotion } from "motion/react";
+import React from "react";
+import { toast } from "sonner";
+import { useTranslations } from "use-intl";
+
+import type { DataTableTMin } from "./data-table-content";
+
+import { Button } from "../ui/button";
+import { moveRowId, type ReorderDetailsDataTable } from "./reorder-state";
+
+export interface ReorderableDataTable<T> {
+  disabled?: boolean;
+  getRowLabel?: (row: T) => string;
+  onReorder: (
+    ids: number[],
+    details: ReorderDetailsDataTable,
+  ) => Promise<void> | void;
+}
+
+interface RowOrderOverride {
+  ids: number[];
+  key: string;
+}
+
+export const useRowOrderDataTable = <T extends DataTableTMin>({
+  edges,
+  onReorder,
+}: {
+  edges: T[];
+  onReorder?: ReorderableDataTable<T>["onReorder"];
+}) => {
+  const t = useTranslations("core.global.data_table");
+  const serverIds = edges.map(row => row.id);
+  const serverKey = serverIds.join(",");
+  const [override, setOverride] = React.useState<null | RowOrderOverride>(null);
+  const ids = override?.key === serverKey ? override.ids : serverIds;
+  const byId = new Map(edges.map(row => [row.id, row]));
+  const rows = ids.flatMap(id => {
+    const row = byId.get(id);
+
+    return row ? [row] : [];
+  });
+
+  const reorder = (activeId: number, overId: number) => {
+    const move = moveRowId(ids, activeId, overId);
+    if (!move || !onReorder) return;
+
+    const attempt: RowOrderOverride = { ids: move.ids, key: serverKey };
+    const previous = override;
+    setOverride(attempt);
+
+    const persist = async () => {
+      try {
+        await onReorder(move.ids, {
+          activeId: move.activeId,
+          from: move.from,
+          overId: move.overId,
+          to: move.to,
+        });
+      } catch {
+        setOverride(current => (current === attempt ? previous : current));
+        toast.error(t("reorder_failed"), {
+          description: t("reorder_failed_desc"),
+        });
+      }
+    };
+
+    void persist();
+  };
+
+  return { reorder, rows };
+};
+
+const SETTLE_DURATION = 200;
+const SETTLE_EASING = "cubic-bezier(0.25, 1, 0.5, 1)";
+
+const subscribeToNothing = () => () => undefined;
+const getAnnouncementContainer = () => document.body;
+const getNoAnnouncementContainer = () => null;
+
+const SortableRowHandleContext = React.createContext<null | React.ReactElement>(
+  null,
+);
+
+export function ReorderProviderDataTable({
+  children,
+  ids,
+  labelOf,
+  onMove,
+}: {
+  children: React.ReactNode;
+  ids: number[];
+  labelOf: (id: number) => string | undefined;
+  onMove: (activeId: number, overId: number) => void;
+}) {
+  const t = useTranslations("core.global.data_table");
+  const contextId = React.useId();
+  const announcementContainer = React.useSyncExternalStore(
+    subscribeToNothing,
+    getAnnouncementContainer,
+    getNoAnnouncementContainer,
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(TouchSensor, {
+      activationConstraint: { delay: 200, tolerance: 8 },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const spoken = (activeId: number, overId: number) => ({
+    name:
+      labelOf(activeId) ??
+      t("row_fallback", { position: ids.indexOf(activeId) + 1 }),
+    position: ids.indexOf(overId) + 1,
+    total: ids.length,
+  });
+
+  const announcements: Announcements = {
+    onDragCancel: ({ active }) =>
+      t("reorder_cancelled", spoken(Number(active.id), Number(active.id))),
+    onDragEnd: ({ active, over }) =>
+      over
+        ? t("reorder_ended", spoken(Number(active.id), Number(over.id)))
+        : undefined,
+    onDragOver: ({ active, over }) =>
+      over
+        ? t("reorder_over", spoken(Number(active.id), Number(over.id)))
+        : undefined,
+    onDragStart: ({ active }) =>
+      t("reorder_started", spoken(Number(active.id), Number(active.id))),
+  };
+
+  return (
+    <DndContext
+      accessibility={{
+        announcements,
+        container: announcementContainer ?? undefined,
+        screenReaderInstructions: { draggable: t("reorder_instructions") },
+      }}
+      collisionDetection={closestCenter}
+      id={contextId}
+      modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+      onDragEnd={({ active, over }) => {
+        if (over) onMove(Number(active.id), Number(over.id));
+      }}
+      sensors={sensors}
+    >
+      <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+        {children}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+export function SortableRowGroupDataTable({
+  children,
+  disabled,
+  id,
+  label,
+  position,
+}: {
+  children: React.ReactNode;
+  disabled: boolean;
+  id: number;
+  label?: string;
+  position: number;
+}) {
+  const t = useTranslations("core.global.data_table");
+  const name = label ?? t("row_fallback", { position });
+  const shouldReduceMotion = useReducedMotion();
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    node: nodeRef,
+    setActivatorNodeRef,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    disabled,
+    id,
+    transition: shouldReduceMotion
+      ? null
+      : { duration: SETTLE_DURATION, easing: SETTLE_EASING },
+  });
+  const dropRectRef = React.useRef<DOMRect | null>(null);
+
+  useDndMonitor({
+    onDragEnd: ({ active }) => {
+      if (active.id === id && nodeRef.current) {
+        dropRectRef.current = nodeRef.current.getBoundingClientRect();
+      }
+    },
+  });
+
+  React.useLayoutEffect(() => {
+    const from = dropRectRef.current;
+    const element = nodeRef.current;
+    if (!from || !element) return;
+
+    dropRectRef.current = null;
+    if (shouldReduceMotion) return;
+
+    const deltaY = from.top - element.getBoundingClientRect().top;
+    if (Math.abs(deltaY) < 1) return;
+
+    element.animate(
+      [
+        { transform: `translate3d(0, ${deltaY}px, 0)` },
+        { transform: "translate3d(0, 0, 0)" },
+      ],
+      { duration: SETTLE_DURATION, easing: SETTLE_EASING },
+    );
+  });
+
+  const handleLabel = t("reorder_row", { name });
+  const handle = disabled ? (
+    <Button
+      aria-label={handleLabel}
+      className="-ms-1.5"
+      disabled
+      disabledTooltip={t("reorder_unavailable")}
+      size="icon-sm"
+      variant="ghost"
+    >
+      <GripVerticalIcon aria-hidden="true" />
+    </Button>
+  ) : (
+    <Button
+      aria-label={handleLabel}
+      className="-ms-1.5 cursor-grab touch-none active:cursor-grabbing"
+      data-slot="table-drag-handle"
+      ref={setActivatorNodeRef}
+      size="icon-sm"
+      variant="ghost"
+      {...attributes}
+      {...listeners}
+    >
+      <GripVerticalIcon aria-hidden="true" />
+    </Button>
+  );
+
+  return (
+    <SortableRowHandleContext.Provider value={handle}>
+      <tbody
+        className={cn(
+          "[&:last-child>tr:last-child]:border-0 [&:last-child>tr:last-child>td]:border-b-0 [&>tr>td]:border-b",
+          isDragging &&
+            "bg-card ring-foreground/10 relative z-10 shadow-lg ring-1",
+        )}
+        data-dragging={isDragging ? "" : undefined}
+        data-slot="table-row-group"
+        ref={setNodeRef}
+        style={{ transform: CSS.Translate.toString(transform), transition }}
+      >
+        {children}
+      </tbody>
+    </SortableRowHandleContext.Provider>
+  );
+}
+
+export function ReorderHeaderDataTable() {
+  const t = useTranslations("core.global.data_table");
+
+  return <span className="sr-only">{t("reorder_column")}</span>;
+}
+
+export function ReorderHandleDataTable() {
+  return React.use(SortableRowHandleContext);
+}
diff --git a/packages/vitnode/src/components/table/selection.tsx b/packages/vitnode/src/components/table/selection.tsx
index c51d27c10..90d82aac8 100644
--- a/packages/vitnode/src/components/table/selection.tsx
+++ b/packages/vitnode/src/components/table/selection.tsx
@@ -7,6 +7,7 @@ import { useTranslations } from "use-intl";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Separator } from "../ui/separator";
+import { SlidingNumber } from "../ui/sliding-number";
 import { TableRow } from "../ui/table";
 import { TooltipWithContent } from "../ui/tooltip";
 
@@ -159,7 +160,10 @@ export function BulkActionsDataTable({
         >
           <div className="bg-popover text-popover-foreground pointer-events-auto flex max-w-full items-center gap-1 rounded-lg border p-1.5 shadow-lg">
             <span className="px-2 text-sm font-medium whitespace-nowrap">
-              {t("selected_count", { count: selected.length })}
+              {t.rich("selected_count", {
+                count: selected.length,
+                number: () => <SlidingNumber value={selected.length} />,
+              })}
             </span>
 
             <Separator
diff --git a/packages/vitnode/src/components/tiptap/tiptap-editor.tsx b/packages/vitnode/src/components/tiptap/tiptap-editor.tsx
index 60899133c..033c01ee1 100644
--- a/packages/vitnode/src/components/tiptap/tiptap-editor.tsx
+++ b/packages/vitnode/src/components/tiptap/tiptap-editor.tsx
@@ -4,7 +4,7 @@ import { useTranslations } from "use-intl";
 
 import { useEditorConfig } from "@/components/editor-provider";
 
-import { Loader } from "../ui/loader";
+import { Spinner } from "../ui/spinner";
 import { TipTapDragHandle } from "./drag-handle";
 import { createTipTapExtensions } from "./extension";
 import { TipTapToolbar } from "./toolbar/tiptap-toolbar";
@@ -50,7 +50,12 @@ export const TipTapEditor = ({
     },
   });
 
-  if (!editor) return <Loader />;
+  if (!editor)
+    return (
+      <div className="flex items-center justify-center">
+        <Spinner size="xl" />
+      </div>
+    );
 
   return (
     <div
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/audio-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/audio-action.tsx
index eeabf213c..3b70442b0 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/audio-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/audio-action.tsx
@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 
 const AudioForm = React.lazy(async () =>
   import("./audio/audio-form").then(module => ({
@@ -37,7 +37,13 @@ export const AudioDialog = ({
           <DialogDescription>{t("desc")}</DialogDescription>
         </DialogHeader>
 
-        <React.Suspense fallback={<Loader />}>
+        <React.Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner size="xl" />
+            </div>
+          }
+        >
           <AudioForm />
         </React.Suspense>
       </DialogContent>
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/bold-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/bold-action.tsx
index 62f519318..f4333b26e 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/bold-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/bold-action.tsx
@@ -3,9 +3,9 @@ import { BoldIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import { Toggle } from "@/components/ui/toggle";
-import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
+import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 import { TooltipShortcut } from "./utils/tooltip-shortcut";
 
 export const BoldAction = () => {
@@ -21,7 +21,7 @@ export const BoldAction = () => {
   });
 
   return (
-    <TooltipWithContent
+    <ToolbarTooltip
       text={
         <>
           {t("bold")} <TooltipShortcut>+B</TooltipShortcut>
@@ -39,6 +39,6 @@ export const BoldAction = () => {
           <BoldIcon />
         </Toggle>
       </div>
-    </TooltipWithContent>
+    </ToolbarTooltip>
   );
 };
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/code-block-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/code-block-action.tsx
index 0dff9143d..9f8fe1ea8 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/code-block-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/code-block-action.tsx
@@ -3,9 +3,9 @@ import { CodeSquareIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import { Toggle } from "@/components/ui/toggle";
-import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
+import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 import { TooltipShortcut } from "./utils/tooltip-shortcut";
 
 export const CodeBlockAction = () => {
@@ -17,7 +17,7 @@ export const CodeBlockAction = () => {
   });
 
   return (
-    <TooltipWithContent
+    <ToolbarTooltip
       text={
         <>
           {t("code_block")}
@@ -36,6 +36,6 @@ export const CodeBlockAction = () => {
           <CodeSquareIcon />
         </Toggle>
       </div>
-    </TooltipWithContent>
+    </ToolbarTooltip>
   );
 };
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/color-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/color-action.tsx
index d50baed6c..994ed6f97 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/color-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/color-action.tsx
@@ -10,9 +10,9 @@ import {
   PopoverTitle,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
+import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 
 export const ColorAction = () => {
   const t = useTranslations("core.global.editor.color");
@@ -38,7 +38,7 @@ export const ColorAction = () => {
 
   return (
     <Popover>
-      <TooltipWithContent text={t("label")}>
+      <ToolbarTooltip text={t("label")}>
         <PopoverTrigger
           render={
             <Button
@@ -55,7 +55,7 @@ export const ColorAction = () => {
             style={{ backgroundColor: activeColor || "currentColor" }}
           />
         </PopoverTrigger>
-      </TooltipWithContent>
+      </ToolbarTooltip>
 
       <PopoverContent className="w-auto gap-3">
         <PopoverTitle>{t("label")}</PopoverTitle>
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx
index c59ae4dbc..9f8ecd8b6 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx
@@ -3,13 +3,14 @@ import React from "react";
 import { useTranslations } from "use-intl";
 
 import { Button } from "@/components/ui/button";
-import { Loader } from "@/components/ui/loader";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { TooltipWithContent } from "@/components/ui/tooltip";
+import { Spinner } from "@/components/ui/spinner";
+
+import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 
 const EmojiPicker = React.lazy(async () =>
   import("./emoji/emoji-picker").then(module => ({
@@ -23,7 +24,7 @@ export const EmojiAction = () => {
 
   return (
     <Popover onOpenChange={setOpen} open={open}>
-      <TooltipWithContent text={t("label")}>
+      <ToolbarTooltip text={t("label")}>
         <PopoverTrigger
           render={
             <Button aria-label={t("label")} size="icon-sm" variant="ghost" />
@@ -31,13 +32,15 @@ export const EmojiAction = () => {
         >
           <SmilePlusIcon />
         </PopoverTrigger>
-      </TooltipWithContent>
+      </ToolbarTooltip>
 
       <PopoverContent className="w-76 gap-0 p-0">
         <React.Suspense
           fallback={
             <div className="flex h-80 items-center justify-center">
-              <Loader />
+              <div className="flex items-center justify-center">
+                <Spinner size="xl" />
+              </div>
             </div>
           }
         >
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/insert-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/insert-action.tsx
index 69aaca677..535d7d371 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/insert-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/insert-action.tsx
@@ -13,11 +13,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Kbd } from "@/components/ui/kbd";
-import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { BLOCK_COMMANDS } from "../../block-commands";
 import { useToolbarEditor } from "../use-toolbar-editor";
 import { AudioDialog } from "./audio-action";
+import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 
 const INSERT_COMMANDS = BLOCK_COMMANDS.filter(
   command => command.group === "insert" || command.id === "quote",
@@ -31,7 +31,7 @@ export const InsertAction = () => {
   return (
     <>
       <DropdownMenu>
-        <TooltipWithContent text={t("insert.label")}>
+        <ToolbarTooltip text={t("insert.label")}>
           <DropdownMenuTrigger
             render={
               <Button
@@ -45,7 +45,7 @@ export const InsertAction = () => {
             <PlusIcon />
             <ChevronDownIcon className="text-muted-foreground" />
           </DropdownMenuTrigger>
-        </TooltipWithContent>
+        </ToolbarTooltip>
 
         <DropdownMenuContent align="end" className="min-w-64">
           <DropdownMenuGroup>
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/italic-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/italic-action.tsx
index 89ebb6391..98f794541 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/italic-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/italic-action.tsx
@@ -3,9 +3,9 @@ import { ItalicIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import { Toggle } from "@/components/ui/toggle";
-import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
+import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 import { TooltipShortcut } from "./utils/tooltip-shortcut";
 
 export const ItalicAction = () => {
@@ -21,7 +21,7 @@ export const ItalicAction = () => {
   });
 
   return (
-    <TooltipWithContent
+    <ToolbarTooltip
       text={
         <>
           {t("italic")}
@@ -40,6 +40,6 @@ export const ItalicAction = () => {
           <ItalicIcon />
         </Toggle>
       </div>
-    </TooltipWithContent>
+    </ToolbarTooltip>
   );
 };
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/link-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/link-action.tsx
index 228fe3a10..2cdfeb1a3 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/link-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/link-action.tsx
@@ -11,9 +11,9 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Toggle } from "@/components/ui/toggle";
-import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
+import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 
 export const LinkAction = () => {
   const t = useTranslations("core.global.editor.link");
@@ -49,7 +49,7 @@ export const LinkAction = () => {
 
   return (
     <Popover onOpenChange={onOpenChange} open={open}>
-      <TooltipWithContent text={t("label")}>
+      <ToolbarTooltip text={t("label")}>
         <PopoverTrigger
           render={
             <Toggle
@@ -62,7 +62,7 @@ export const LinkAction = () => {
         >
           <LinkIcon />
         </PopoverTrigger>
-      </TooltipWithContent>
+      </ToolbarTooltip>
 
       <PopoverContent align="start" className="w-80">
         <form
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx
index c8cbb0a6e..61136b6cf 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx
@@ -3,9 +3,9 @@ import { ListChecksIcon, ListIcon, ListOrderedIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import { Toggle } from "@/components/ui/toggle";
-import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
+import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 import { TooltipShortcut } from "./utils/tooltip-shortcut";
 
 export const ListAction = () => {
@@ -24,7 +24,7 @@ export const ListAction = () => {
 
   return (
     <>
-      <TooltipWithContent
+      <ToolbarTooltip
         text={
           <>
             {t("bullet_list")}
@@ -43,9 +43,9 @@ export const ListAction = () => {
             <ListIcon />
           </Toggle>
         </div>
-      </TooltipWithContent>
+      </ToolbarTooltip>
 
-      <TooltipWithContent
+      <ToolbarTooltip
         text={
           <>
             {t("ordered_list")}
@@ -64,9 +64,9 @@ export const ListAction = () => {
             <ListOrderedIcon />
           </Toggle>
         </div>
-      </TooltipWithContent>
+      </ToolbarTooltip>
 
-      <TooltipWithContent
+      <ToolbarTooltip
         text={
           <>
             {t("task_list")}
@@ -85,7 +85,7 @@ export const ListAction = () => {
             <ListChecksIcon />
           </Toggle>
         </div>
-      </TooltipWithContent>
+      </ToolbarTooltip>
     </>
   );
 };
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/text-format-more/text-format-more.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/text-format-more/text-format-more.tsx
index 7be5d37e7..56abd41d1 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/text-format-more/text-format-more.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/text-format-more/text-format-more.tsx
@@ -26,10 +26,10 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { TooltipWithContent } from "@/components/ui/tooltip";
 import { CtrlOrCommandCharacter } from "@/lib/ctrl-or-command-character";
 
 import { useToolbarEditor } from "../../use-toolbar-editor";
+import { ToolbarTooltip } from "../utils/toolbar-tooltip";
 
 const ALIGNMENTS = [
   { value: "left", icon: <AlignLeftIcon />, shortcut: "L" },
@@ -81,7 +81,7 @@ export const TextFormatMore = () => {
 
   return (
     <DropdownMenu>
-      <TooltipWithContent text={t("text_format_more.label")}>
+      <ToolbarTooltip text={t("text_format_more.label")}>
         <DropdownMenuTrigger
           render={
             <Button
@@ -96,7 +96,7 @@ export const TextFormatMore = () => {
         >
           <EllipsisIcon />
         </DropdownMenuTrigger>
-      </TooltipWithContent>
+      </ToolbarTooltip>
 
       <DropdownMenuContent className="min-w-60">
         {marks.map(mark => (
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/utils/toolbar-tooltip.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/utils/toolbar-tooltip.tsx
new file mode 100644
index 000000000..b6cff2632
--- /dev/null
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/utils/toolbar-tooltip.tsx
@@ -0,0 +1,9 @@
+import { TooltipGroupTrigger } from "@/components/ui/tooltip";
+
+export const ToolbarTooltip = ({
+  children,
+  text,
+}: {
+  children: React.ReactElement;
+  text: React.ReactNode;
+}) => <TooltipGroupTrigger content={text} render={children} />;
diff --git a/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx b/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx
index c31658f24..d3dd989b0 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx
@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import { useTranslations } from "use-intl";
 
 import { Separator } from "@/components/ui/separator";
+import { TooltipGroup } from "@/components/ui/tooltip";
 
 import { BoldAction } from "./actions/bold-action";
 import { CodeBlockAction } from "./actions/code-block-action";
@@ -24,27 +25,29 @@ export const TipTapToolbar = ({ editor }: { editor: Editor }) => {
 
   return (
     <ToolbarEditorContext value={contextValue}>
-      <div
-        aria-label={t("toolbar")}
-        className="bg-card sticky top-0 z-10 flex items-center gap-0.5 overflow-x-auto rounded-t-md border-b p-1 *:data-[slot=separator]:mx-1 *:data-[slot=separator]:h-5 sm:flex-wrap"
-        role="toolbar"
-      >
-        <HeadingsAction />
-        <Separator orientation="vertical" />
-        <BoldAction />
-        <ItalicAction />
-        <TextFormatMore />
-        <ColorAction />
-        <Separator orientation="vertical" />
-        <ListAction />
-        <Separator orientation="vertical" />
-        <LinkAction />
-        <EmojiAction />
-        <TableAction />
-        <CodeBlockAction />
-        <Separator orientation="vertical" />
-        <InsertAction />
-      </div>
+      <TooltipGroup>
+        <div
+          aria-label={t("toolbar")}
+          className="bg-card sticky top-0 z-10 flex items-center gap-0.5 overflow-x-auto rounded-t-md border-b p-1 *:data-[slot=separator]:mx-1 *:data-[slot=separator]:h-5 sm:flex-wrap"
+          role="toolbar"
+        >
+          <HeadingsAction />
+          <Separator orientation="vertical" />
+          <BoldAction />
+          <ItalicAction />
+          <TextFormatMore />
+          <ColorAction />
+          <Separator orientation="vertical" />
+          <ListAction />
+          <Separator orientation="vertical" />
+          <LinkAction />
+          <EmojiAction />
+          <TableAction />
+          <CodeBlockAction />
+          <Separator orientation="vertical" />
+          <InsertAction />
+        </div>
+      </TooltipGroup>
     </ToolbarEditorContext>
   );
 };
diff --git a/packages/vitnode/src/components/ui/alert-dialog.tsx b/packages/vitnode/src/components/ui/alert-dialog.tsx
index 21cc74d3d..c4c35c8b6 100644
--- a/packages/vitnode/src/components/ui/alert-dialog.tsx
+++ b/packages/vitnode/src/components/ui/alert-dialog.tsx
@@ -82,16 +82,20 @@ function AlertDialogOverlay({
 
 function AlertDialogContent({
   className,
+  size = "default",
   ...props
-}: AlertDialogPrimitive.Popup.Props) {
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm";
+}) {
   return (
     <AlertDialogPortal>
       <AlertDialogOverlay />
       <AlertDialogPrimitive.Popup
         className={cn(
-          "dark:bg-background bg-card fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-xl transition-all duration-200 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 sm:max-w-lg",
+          "group/alert-dialog-content dark:bg-background bg-card fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-xl transition-all duration-200 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 data-[size=default]:sm:max-w-lg data-[size=sm]:sm:max-w-sm",
           className,
         )}
+        data-size={size}
         data-slot="alert-dialog-content"
         {...props}
       />
@@ -106,7 +110,7 @@ function AlertDialogHeader({
   return (
     <div
       className={cn(
-        "grid grid-rows-[auto_1fr] gap-1.5 has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        "grid grid-rows-[auto_1fr] gap-1.5 group-data-[size=sm]/alert-dialog-content:place-items-center group-data-[size=sm]/alert-dialog-content:text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
         className,
       )}
       data-slot="alert-dialog-header"
@@ -122,7 +126,7 @@ function AlertDialogFooter({
   return (
     <div
       className={cn(
-        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        "bg-muted/50 -mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-xl border-t px-6 py-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
         className,
       )}
       data-slot="alert-dialog-footer"
@@ -138,14 +142,14 @@ function AlertDialogFooterSkeleton({
   return (
     <div
       className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "bg-muted/50 -mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-xl border-t px-6 py-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
         className,
       )}
       data-slot="alert-dialog-footer"
       {...props}
     >
-      <Skeleton className="h-9 sm:w-24" />
-      <Skeleton className="h-9 sm:w-24" />
+      <Skeleton className="h-9 group-data-[size=sm]/alert-dialog-content:w-full sm:w-24" />
+      <Skeleton className="h-9 group-data-[size=sm]/alert-dialog-content:w-full sm:w-24" />
     </div>
   );
 }
@@ -156,7 +160,7 @@ function AlertDialogMedia({
   return (
     <div
       className={cn(
-        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-lg group-data-[size=sm]/alert-dialog-content:size-12 sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8 group-data-[size=sm]/alert-dialog-content:*:[svg:not([class*='size-'])]:size-6",
         className,
       )}
       data-slot="alert-dialog-media"
diff --git a/packages/vitnode/src/components/ui/attachment.tsx b/packages/vitnode/src/components/ui/attachment.tsx
index 27c22dd52..bde7bba5e 100644
--- a/packages/vitnode/src/components/ui/attachment.tsx
+++ b/packages/vitnode/src/components/ui/attachment.tsx
@@ -100,7 +100,7 @@ function AttachmentTitle({
   return (
     <span
       className={cn(
-        "group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0 truncate font-medium",
+        "group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer motion-reduce:shimmer-none block max-w-full min-w-0 truncate font-medium",
         className,
       )}
       data-slot="attachment-title"
@@ -186,7 +186,7 @@ function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       className={cn(
-        "scroll-fade-x flex min-w-0 snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        "scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
         className,
       )}
       data-slot="attachment-group"
diff --git a/packages/vitnode/src/components/ui/avatar.tsx b/packages/vitnode/src/components/ui/avatar.tsx
index c2979084b..a568c169e 100644
--- a/packages/vitnode/src/components/ui/avatar.tsx
+++ b/packages/vitnode/src/components/ui/avatar.tsx
@@ -1,7 +1,17 @@
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import { cn } from "cn";
+import { motion, useReducedMotion } from "motion/react";
 import React from "react";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipGroup,
+  TooltipGroupTrigger,
+  TooltipTrigger,
+  useIsInTooltipGroup,
+} from "./tooltip";
+
 function Avatar({
   className,
   size = "default",
@@ -72,14 +82,66 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
 
 function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
+    <TooltipGroup>
+      <div
+        className={cn(
+          "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
+          className,
+        )}
+        data-slot="avatar-group"
+        {...props}
+      />
+    </TooltipGroup>
+  );
+}
+
+const AVATAR_LIFT_TRANSITION = {
+  type: "spring",
+  stiffness: 300,
+  damping: 17,
+} as const;
+
+function AvatarGroupItem({
+  children,
+  className,
+  label,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const isInTooltipGroup = useIsInTooltipGroup();
+  const lift = shouldReduceMotion ? undefined : { y: "-25%" };
+
+  const item = (
+    <motion.div
       className={cn(
-        "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        "focus-visible:ring-ring/50 *:data-[slot=avatar]:ring-background relative rounded-full outline-none hover:z-10 focus-visible:z-10 focus-visible:ring-3 *:data-[slot=avatar]:ring-2",
         className,
       )}
-      data-slot="avatar-group"
-      {...props}
-    />
+      data-slot="avatar-group-item"
+      tabIndex={label ? 0 : undefined}
+      transition={AVATAR_LIFT_TRANSITION}
+      whileFocus={lift}
+      whileHover={lift}
+      whileTap={lift}
+    >
+      {children}
+    </motion.div>
+  );
+
+  if (!label) return item;
+
+  if (isInTooltipGroup) {
+    return <TooltipGroupTrigger content={label} render={item} />;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger render={item} />
+      <TooltipContent sideOffset={8}>{label}</TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -105,5 +167,6 @@ export {
   AvatarFallback,
   AvatarGroup,
   AvatarGroupCount,
+  AvatarGroupItem,
   AvatarImage,
 };
diff --git a/packages/vitnode/src/components/ui/bubble.tsx b/packages/vitnode/src/components/ui/bubble.tsx
new file mode 100644
index 000000000..cef53b988
--- /dev/null
+++ b/packages/vitnode/src/components/ui/bubble.tsx
@@ -0,0 +1,127 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+import * as React from "react";
+
+function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex min-w-0 flex-col gap-2", className)}
+      data-slot="bubble-group"
+      {...props}
+    />
+  );
+}
+
+const bubbleVariants = cva(
+  "group/bubble relative flex w-fit max-w-4/5 min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default:
+          "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary:
+          "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted:
+          "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted:
+          "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline:
+          "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost:
+          "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive:
+          "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof bubbleVariants> & {
+    align?: "end" | "start";
+  }) {
+  return (
+    <div
+      className={cn(bubbleVariants({ variant }), className)}
+      data-align={align}
+      data-slot="bubble"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+function BubbleContent({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "[button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-ring/50 w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:ring-3",
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "bubble-content",
+    },
+  });
+}
+
+const bubbleReactionsVariants = cva(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4",
+      },
+      align: {
+        start: "left-3",
+        end: "right-3",
+      },
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end",
+    },
+  },
+);
+
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  align?: "end" | "start";
+  side?: "bottom" | "top";
+}) {
+  return (
+    <div
+      className={cn(bubbleReactionsVariants({ side, align }), className)}
+      data-align={align}
+      data-side={side}
+      data-slot="bubble-reactions"
+      {...props}
+    />
+  );
+}
+
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };
diff --git a/packages/vitnode/src/components/ui/button-client.tsx b/packages/vitnode/src/components/ui/button-client.tsx
index 6180e4c00..1ac3c8203 100644
--- a/packages/vitnode/src/components/ui/button-client.tsx
+++ b/packages/vitnode/src/components/ui/button-client.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { useTranslations } from "use-intl";
 
 import { type ButtonProps, buttonVariants } from "./button";
-import { Loader } from "./loader";
+import { Spinner } from "./spinner";
 import { TooltipWithContent } from "./tooltip";
 
 export function ClientButton({
@@ -55,7 +55,7 @@ export function ClientButton({
 
           {isLoading ? (
             <div className="animate-in fade-in slide-in-from-top-2 absolute inset-0 flex items-center justify-center duration-300 motion-reduce:animate-none">
-              <Loader small />
+              <Spinner aria-hidden="true" />
             </div>
           ) : null}
         </div>
diff --git a/packages/vitnode/src/components/ui/card.tsx b/packages/vitnode/src/components/ui/card.tsx
index f6c4fb384..431254963 100644
--- a/packages/vitnode/src/components/ui/card.tsx
+++ b/packages/vitnode/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ function Card({
   return (
     <div
       className={cn(
-        "group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className,
       )}
       data-size={size}
@@ -82,7 +82,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       className={cn(
-        "flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)",
+        "bg-muted/50 flex items-center rounded-b-xl border-t p-(--card-spacing)",
         className,
       )}
       data-slot="card-footer"
diff --git a/packages/vitnode/src/components/ui/cascader.test.tsx b/packages/vitnode/src/components/ui/cascader.test.tsx
new file mode 100644
index 000000000..5b3fe27c0
--- /dev/null
+++ b/packages/vitnode/src/components/ui/cascader.test.tsx
@@ -0,0 +1,177 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  Cascader,
+  cascaderColumns,
+  type CascaderOption,
+  findCascaderPath,
+  searchCascader,
+} from "./cascader";
+
+const places: CascaderOption[] = [
+  {
+    children: [
+      {
+        children: [
+          { label: "Warsaw", value: "warsaw" },
+          { label: "Kraków", value: "krakow" },
+        ],
+        label: "Poland",
+        value: "poland",
+      },
+      { label: "Lisbon", value: "lisbon" },
+    ],
+    label: "Europe",
+    value: "europe",
+  },
+  {
+    children: [{ label: "Tokyo", value: "tokyo" }],
+    label: "Asia",
+    value: "asia",
+  },
+];
+
+describe("cascader helpers", () => {
+  it("finds the path from the root to a value", () => {
+    expect(findCascaderPath(places, "krakow").map(node => node.value)).toEqual([
+      "europe",
+      "poland",
+      "krakow",
+    ]);
+    expect(findCascaderPath(places, "nowhere")).toEqual([]);
+  });
+
+  it("opens one column per active branch and stops at a leaf", () => {
+    expect(cascaderColumns(places, []).length).toBe(1);
+    expect(
+      cascaderColumns(places, ["europe", "poland"]).map(column =>
+        column.map(node => node.value),
+      ),
+    ).toEqual([
+      ["europe", "asia"],
+      ["poland", "lisbon"],
+      ["warsaw", "krakow"],
+    ]);
+    expect(cascaderColumns(places, ["europe", "lisbon"]).length).toBe(2);
+  });
+
+  it("searches leaves by any label on their path, ignoring accents", () => {
+    expect(
+      searchCascader(places, "krakow").map(path => path.at(-1)?.value),
+    ).toEqual(["krakow"]);
+    expect(
+      searchCascader(places, "europe").map(path => path.at(-1)?.value),
+    ).toEqual(["warsaw", "krakow", "lisbon"]);
+    expect(searchCascader(places, "  ")).toEqual([]);
+  });
+});
+
+describe("Cascader", () => {
+  beforeEach(() => {
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn(() => ({
+        addEventListener: vi.fn(),
+        matches: false,
+        removeEventListener: vi.fn(),
+      })),
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  const openCascader = () => {
+    fireEvent.click(
+      screen.getByRole("button", { name: "core.global.select_option" }),
+    );
+  };
+
+  it("drills down the columns and selects a leaf", async () => {
+    const onValueChange = vi.fn();
+    render(<Cascader onValueChange={onValueChange} options={places} />);
+
+    openCascader();
+    fireEvent.click(await screen.findByRole("option", { name: "Europe" }));
+    fireEvent.click(await screen.findByRole("option", { name: "Poland" }));
+    fireEvent.click(await screen.findByRole("option", { name: "Warsaw" }));
+
+    expect(onValueChange).toHaveBeenCalledWith(
+      "warsaw",
+      expect.arrayContaining([expect.objectContaining({ value: "europe" })]),
+    );
+    expect(
+      screen.getByRole("button", { name: "Europe / Poland / Warsaw" }),
+    ).toBeTruthy();
+  });
+
+  it("replaces the list with the branch's children and goes back", async () => {
+    render(<Cascader options={places} />);
+
+    openCascader();
+    fireEvent.click(await screen.findByRole("option", { name: "Europe" }));
+
+    expect(await screen.findByRole("option", { name: "Poland" })).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.queryByRole("option", { name: "Asia" })).toBeNull();
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /core\.global\.go_back/ }),
+    );
+
+    expect(await screen.findByRole("option", { name: "Asia" })).toBeTruthy();
+  });
+
+  it("marks the open branch as expanded in the columns layout", async () => {
+    render(<Cascader layout="columns" options={places} />);
+
+    openCascader();
+    const europe = await screen.findByRole("option", { name: "Europe" });
+    expect(europe.getAttribute("aria-expanded")).toBe("false");
+
+    fireEvent.click(europe);
+    expect(europe.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("picks a search result straight away", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <Cascader onValueChange={onValueChange} options={places} searchable />,
+    );
+
+    openCascader();
+    fireEvent.change(
+      await screen.findByRole("textbox", {
+        name: "core.global.search_placeholder",
+      }),
+      { target: { value: "tok" } },
+    );
+    fireEvent.click(
+      await screen.findByRole("option", { name: "Asia / Tokyo" }),
+    );
+
+    expect(onValueChange).toHaveBeenCalledWith("tokyo", expect.any(Array));
+  });
+
+  it("clears the value with the clear button", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Cascader
+        defaultValue="lisbon"
+        onValueChange={onValueChange}
+        options={places}
+        showClear
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "core.global.clear" }));
+
+    expect(onValueChange).toHaveBeenCalledWith(null, []);
+    expect(
+      screen.getByRole("button", { name: "core.global.select_option" }),
+    ).toBeTruthy();
+  });
+});
diff --git a/packages/vitnode/src/components/ui/cascader.tsx b/packages/vitnode/src/components/ui/cascader.tsx
new file mode 100644
index 000000000..6531495ad
--- /dev/null
+++ b/packages/vitnode/src/components/ui/cascader.tsx
@@ -0,0 +1,661 @@
+import { cn } from "cn";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  SearchIcon,
+  XIcon,
+} from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useIsPresent,
+  useReducedMotion,
+} from "motion/react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+
+import { useDirection } from "./direction";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface CascaderOption {
+  children?: CascaderOption[];
+  disabled?: boolean;
+  label: string;
+  value: string;
+}
+
+const COLUMN_WIDTH = 224;
+const PANEL_TRANSITION = { type: "spring", duration: 0.3, bounce: 0 } as const;
+
+export const isCascaderBranch = (option: CascaderOption) =>
+  !!option.children?.length;
+
+export const findCascaderPath = (
+  options: readonly CascaderOption[],
+  value: string,
+): CascaderOption[] => {
+  for (const option of options) {
+    if (option.value === value) return [option];
+
+    if (option.children) {
+      const rest = findCascaderPath(option.children, value);
+      if (rest.length) return [option, ...rest];
+    }
+  }
+
+  return [];
+};
+
+const normalizeLabel = (label: string) =>
+  label
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+    .toLowerCase();
+
+export const searchCascader = (
+  options: readonly CascaderOption[],
+  query: string,
+  limit = 50,
+): CascaderOption[][] => {
+  const needle = normalizeLabel(query.trim());
+  if (!needle) return [];
+
+  const results: CascaderOption[][] = [];
+  const walk = (
+    list: readonly CascaderOption[],
+    trail: readonly CascaderOption[],
+  ) => {
+    for (const option of list) {
+      if (results.length >= limit) return;
+      const path = [...trail, option];
+
+      if (option.children?.length) {
+        walk(option.children, path);
+      } else if (
+        path.some(node => normalizeLabel(node.label).includes(needle))
+      ) {
+        results.push(path);
+      }
+    }
+  };
+  walk(options, []);
+
+  return results;
+};
+
+export const cascaderColumns = (
+  options: CascaderOption[],
+  activePath: readonly string[],
+): CascaderOption[][] => {
+  const columns = [options];
+  let level = options;
+
+  for (const value of activePath) {
+    const node = level.find(option => option.value === value);
+    if (!node?.children?.length) break;
+
+    columns.push(node.children);
+    level = node.children;
+  }
+
+  return columns;
+};
+
+const focusLater = (
+  panel: Element | null,
+  level: number,
+  pick: "active" | "first",
+) => {
+  requestAnimationFrame(() => {
+    focusOption(panel, level, pick);
+  });
+};
+
+const assignRef = <T,>(ref: React.Ref<T> | undefined, value: null | T) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+};
+
+const PresentColumn = ({
+  children,
+  className,
+  onHeightChange,
+  ref,
+  ...props
+}: React.ComponentProps<typeof motion.div> & {
+  onHeightChange?: (height: number) => void;
+}) => {
+  const isPresent = useIsPresent();
+  const observesHeight = isPresent && !!onHeightChange;
+
+  return (
+    <motion.div
+      className={className}
+      inert={!isPresent}
+      ref={(node: HTMLDivElement | null) => {
+        assignRef(ref, node);
+        if (!node || !observesHeight || typeof ResizeObserver === "undefined") {
+          return;
+        }
+
+        const observer = new ResizeObserver(([entry]) => {
+          onHeightChange(
+            entry?.borderBoxSize[0]?.blockSize ?? node.offsetHeight,
+          );
+        });
+        observer.observe(node);
+
+        return () => {
+          observer.disconnect();
+          assignRef(ref, null);
+        };
+      }}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+const DRILL_VARIANTS = {
+  center: { opacity: 1, x: "0%" },
+  enter: (offset: number) => ({ opacity: 0, x: `${offset * 40}%` }),
+  exit: (offset: number) => ({ opacity: 0, x: `${offset * -40}%` }),
+};
+
+const isRtl = (element: HTMLElement) =>
+  getComputedStyle(element).direction === "rtl";
+
+const panelOf = (element: Element) =>
+  element.closest("[data-slot=cascader-panel]");
+
+const focusOption = (
+  panel: Element | null,
+  level: number | string,
+  pick: "active" | "first" | "last" | number,
+) => {
+  const options = [
+    ...(panel?.querySelectorAll<HTMLButtonElement>(
+      `[data-cascader-level="${level}"]:not([disabled])`,
+    ) ?? []),
+  ].filter(option => !option.closest("[inert]"));
+  const target =
+    pick === "first"
+      ? options[0]
+      : pick === "last"
+        ? options.at(-1)
+        : pick === "active"
+          ? (options.find(option => option.dataset.active === "true") ??
+            options[0])
+          : options[pick];
+
+  target?.focus();
+};
+
+function Cascader({
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-labelledby": ariaLabelledBy,
+  className,
+  defaultValue = null,
+  disabled = false,
+  expandTrigger = "click",
+  id,
+  layout = "drill",
+  onValueChange,
+  options,
+  placeholder,
+  searchable = false,
+  separator = " / ",
+  showClear = false,
+  value: valueProp,
+}: {
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+  "aria-labelledby"?: string;
+  className?: string;
+  defaultValue?: null | string;
+  disabled?: boolean;
+  expandTrigger?: "click" | "hover";
+  id?: string;
+  layout?: "columns" | "drill";
+  onValueChange?: (value: null | string, path: CascaderOption[]) => void;
+  options: CascaderOption[];
+  placeholder?: string;
+  searchable?: boolean;
+  separator?: string;
+  showClear?: boolean;
+  value?: null | string;
+}) {
+  const t = useTranslations("core.global");
+  const isMobile = useIsMobile();
+  const isDrill = isMobile || layout === "drill";
+  const shouldReduceMotion = useReducedMotion();
+  const [uncontrolledValue, setUncontrolledValue] =
+    React.useState(defaultValue);
+  const value = valueProp === undefined ? uncontrolledValue : valueProp;
+  const selectedPath = React.useMemo(
+    () => (value ? findCascaderPath(options, value) : []),
+    [options, value],
+  );
+  const [open, setOpen] = React.useState(false);
+  const [activePath, setActivePath] = React.useState<string[]>([]);
+  const [direction, setDirection] = React.useState<-1 | 1>(1);
+  const [query, setQuery] = React.useState("");
+  const [levelHeight, setLevelHeight] = React.useState<null | number>(null);
+  const textDirection = useDirection();
+  const columns = cascaderColumns(options, activePath);
+  const results = searchable && query ? searchCascader(options, query) : null;
+  const transition = shouldReduceMotion ? { duration: 0 } : PANEL_TRANSITION;
+  const slideOffset = textDirection === "rtl" ? -direction : direction;
+  const selectedValues = new Set(selectedPath.map(option => option.value));
+
+  const handleOpenChange = (next: boolean) => {
+    if (next) {
+      setActivePath(selectedPath.slice(0, -1).map(option => option.value));
+      setQuery("");
+      setDirection(1);
+    }
+    setOpen(next);
+  };
+
+  const commit = (path: CascaderOption[]) => {
+    const leaf = path.at(-1) ?? null;
+    setUncontrolledValue(leaf?.value ?? null);
+    onValueChange?.(leaf?.value ?? null, path);
+  };
+
+  const pathTo = (level: number, option: CascaderOption) => [
+    ...columns
+      .slice(0, level)
+      .map((column, index) =>
+        column.find(node => node.value === activePath[index]),
+      )
+      .filter(node => node !== undefined),
+    option,
+  ];
+
+  const openBranch = (
+    level: number,
+    option: CascaderOption,
+    focusPanel: Element | null,
+  ) => {
+    setDirection(1);
+    setActivePath(current => [...current.slice(0, level), option.value]);
+    if (focusPanel) focusLater(focusPanel, level + 1, "first");
+  };
+
+  const goBack = (panel: Element | null) => {
+    setDirection(-1);
+    focusLater(panel, Math.max(0, activePath.length - 1), "active");
+    setActivePath(current => current.slice(0, -1));
+  };
+
+  const choose = (
+    level: number,
+    option: CascaderOption,
+    panel: Element | null,
+  ) => {
+    if (option.disabled) return;
+
+    if (isCascaderBranch(option)) {
+      openBranch(level, option, isDrill ? panel : null);
+
+      return;
+    }
+
+    commit(pathTo(level, option));
+    setOpen(false);
+  };
+
+  const handleOptionKeyDown = (
+    event: React.KeyboardEvent<HTMLButtonElement>,
+    level: number | string,
+    index: number,
+    option: CascaderOption,
+    count: number,
+  ) => {
+    const rtl = isRtl(event.currentTarget);
+    const forward = rtl ? "ArrowLeft" : "ArrowRight";
+    const backward = rtl ? "ArrowRight" : "ArrowLeft";
+    const panel = panelOf(event.currentTarget);
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        focusOption(panel, level, Math.min(count - 1, index + 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (index === 0 && searchable) {
+          panel
+            ?.querySelector<HTMLInputElement>("[data-cascader-search]")
+            ?.focus();
+        } else {
+          focusOption(panel, level, Math.max(0, index - 1));
+        }
+        break;
+      case "End":
+        event.preventDefault();
+        focusOption(panel, level, "last");
+        break;
+      case "Home":
+        event.preventDefault();
+        focusOption(panel, level, "first");
+        break;
+      default:
+        if (typeof level !== "number") return;
+
+        if (event.key === forward && isCascaderBranch(option)) {
+          event.preventDefault();
+          openBranch(level, option, panel);
+        } else if (event.key === backward && level > 0) {
+          event.preventDefault();
+          if (isDrill) {
+            goBack(panel);
+          } else {
+            focusOption(panel, level - 1, "active");
+          }
+        }
+    }
+  };
+
+  const renderOption = (
+    option: CascaderOption,
+    level: number | string,
+    index: number,
+    count: number,
+    label: React.ReactNode,
+    onSelect: (panel: Element | null) => void,
+  ) => {
+    const isBranch = isCascaderBranch(option);
+    const isActive =
+      typeof level === "number" && activePath[level] === option.value;
+    const isSelected =
+      typeof level === "number"
+        ? selectedValues.has(option.value)
+        : option.value === value;
+
+    return (
+      <button
+        aria-expanded={isBranch ? isActive : undefined}
+        aria-selected={isSelected}
+        className={cn(
+          "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[active=true]:bg-accent/60 flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm outline-none disabled:pointer-events-none disabled:opacity-50",
+          isSelected && !isBranch && "font-medium",
+        )}
+        data-active={isActive || (isSelected && !isBranch)}
+        data-cascader-level={level}
+        disabled={option.disabled}
+        key={option.value}
+        onClick={event => {
+          onSelect(panelOf(event.currentTarget));
+        }}
+        onKeyDown={event => {
+          handleOptionKeyDown(event, level, index, option, count);
+        }}
+        onMouseEnter={() => {
+          if (
+            expandTrigger === "hover" &&
+            isBranch &&
+            !isDrill &&
+            typeof level === "number" &&
+            !isActive
+          ) {
+            openBranch(level, option, null);
+          }
+        }}
+        role="option"
+        tabIndex={index === 0 ? 0 : -1}
+        type="button"
+      >
+        <span className="min-w-0 flex-1 truncate">{label}</span>
+        {isBranch ? (
+          <ChevronRightIcon className="text-muted-foreground size-4 shrink-0 rtl:rotate-180" />
+        ) : isSelected ? (
+          <CheckIcon className="size-4 shrink-0" />
+        ) : null}
+      </button>
+    );
+  };
+
+  const renderColumn = (column: CascaderOption[], level: number) => (
+    <div
+      aria-label={
+        level === 0
+          ? (placeholder ?? t("select_option"))
+          : columns[level - 1]?.find(
+              node => node.value === activePath[level - 1],
+            )?.label
+      }
+      className="flex max-h-72 flex-col overflow-y-auto overscroll-contain p-1"
+      role="listbox"
+    >
+      {column.map((option, index) =>
+        renderOption(
+          option,
+          level,
+          index,
+          column.length,
+          option.label,
+          panel => {
+            choose(level, option, panel);
+          },
+        ),
+      )}
+    </div>
+  );
+
+  const renderPanel = () => {
+    if (results) {
+      if (results.length === 0) {
+        return (
+          <p
+            className={cn(
+              "text-muted-foreground px-3 py-6 text-center text-sm",
+              !isDrill && "w-80",
+            )}
+          >
+            {t("results_not_found")}
+          </p>
+        );
+      }
+
+      return (
+        <div
+          aria-label={t("search_placeholder")}
+          className={cn(
+            "flex max-h-72 flex-col overflow-y-auto overscroll-contain p-1",
+            !isDrill && "w-80",
+          )}
+          role="listbox"
+        >
+          {results.map((path, index) => {
+            const leaf = path.at(-1);
+            if (!leaf) return null;
+
+            return renderOption(
+              leaf,
+              "search",
+              index,
+              results.length,
+              path.map(node => node.label).join(separator),
+              () => {
+                commit(path);
+                setOpen(false);
+              },
+            );
+          })}
+        </div>
+      );
+    }
+
+    if (isDrill) {
+      const level = columns.length - 1;
+      const parent = columns[level - 1]?.find(
+        node => node.value === activePath[level - 1],
+      );
+
+      return (
+        <motion.div
+          animate={{ height: levelHeight ?? "auto" }}
+          className="relative overflow-hidden"
+          initial={false}
+          transition={transition}
+        >
+          <AnimatePresence
+            custom={slideOffset}
+            initial={false}
+            mode="popLayout"
+          >
+            <PresentColumn
+              animate="center"
+              className="w-full"
+              custom={slideOffset}
+              exit="exit"
+              initial="enter"
+              key={activePath.slice(0, level).join("/") || "root"}
+              onHeightChange={setLevelHeight}
+              transition={transition}
+              variants={DRILL_VARIANTS}
+            >
+              {parent && (
+                <button
+                  className="hover:bg-accent text-muted-foreground focus-visible:bg-accent flex w-full items-center gap-1 border-b px-2 py-2 text-start text-sm outline-none"
+                  onClick={event => {
+                    goBack(panelOf(event.currentTarget));
+                  }}
+                  type="button"
+                >
+                  <ChevronLeftIcon className="size-4 rtl:rotate-180" />
+                  <span className="sr-only">{t("go_back")}: </span>
+                  <span className="text-foreground truncate font-medium">
+                    {parent.label}
+                  </span>
+                </button>
+              )}
+              {renderColumn(columns[level] ?? [], level)}
+            </PresentColumn>
+          </AnimatePresence>
+        </motion.div>
+      );
+    }
+
+    return (
+      <motion.div
+        animate={{ width: columns.length * COLUMN_WIDTH }}
+        className="flex max-w-(--available-width) overflow-x-auto overflow-y-hidden"
+        initial={false}
+        transition={transition}
+      >
+        <AnimatePresence initial={false}>
+          {columns.map((column, level) => (
+            <PresentColumn
+              animate={{ opacity: 1, x: 0 }}
+              className="shrink-0 border-e last:border-e-0"
+              exit={{ opacity: 0, x: -8 }}
+              initial={{ opacity: 0, x: -8 }}
+              key={["root", ...activePath.slice(0, level)].join("/")}
+              style={{ width: COLUMN_WIDTH }}
+              transition={transition}
+            >
+              {renderColumn(column, level)}
+            </PresentColumn>
+          ))}
+        </AnimatePresence>
+      </motion.div>
+    );
+  };
+
+  const hasValue = selectedPath.length > 0;
+
+  return (
+    <Popover onOpenChange={handleOpenChange} open={open}>
+      <div className={cn("relative w-full", className)} data-slot="cascader">
+        <PopoverTrigger
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
+          aria-labelledby={ariaLabelledBy}
+          className={cn(
+            "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 hover:bg-muted dark:bg-input/30 dark:hover:bg-input/50 bg-card flex h-9 w-full items-center justify-between gap-1.5 rounded-md border py-2 ps-2.5 pe-2 text-start text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+          )}
+          disabled={disabled}
+          id={id}
+        >
+          <span
+            className={cn(
+              "min-w-0 flex-1 truncate",
+              !hasValue && "text-muted-foreground",
+              showClear && hasValue && !disabled && "me-7",
+            )}
+            data-slot="cascader-value"
+          >
+            {hasValue
+              ? selectedPath.map(option => option.label).join(separator)
+              : (placeholder ?? t("select_option"))}
+          </span>
+          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0" />
+        </PopoverTrigger>
+        {showClear && hasValue && !disabled && (
+          <button
+            aria-label={t("clear")}
+            className="text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring/50 absolute end-8 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm outline-none focus-visible:ring-3"
+            onClick={() => {
+              commit([]);
+            }}
+            type="button"
+          >
+            <XIcon className="size-3.5" />
+          </button>
+        )}
+      </div>
+
+      <PopoverContent
+        align="start"
+        className={cn(
+          "w-auto max-w-(--available-width) gap-0 overflow-hidden p-0",
+          isDrill && "w-(--anchor-width)",
+        )}
+      >
+        <div data-slot="cascader-panel">
+          {searchable && (
+            <div className="flex items-center gap-2 border-b px-3">
+              <SearchIcon className="text-muted-foreground size-4 shrink-0" />
+              <input
+                aria-label={t("search_placeholder")}
+                className="placeholder:text-muted-foreground h-9 min-w-0 flex-1 bg-transparent text-sm outline-none"
+                data-cascader-search=""
+                onChange={event => {
+                  setQuery(event.target.value);
+                }}
+                onKeyDown={event => {
+                  if (event.key !== "ArrowDown") return;
+
+                  event.preventDefault();
+                  focusOption(
+                    panelOf(event.currentTarget),
+                    results ? "search" : 0,
+                    "active",
+                  );
+                }}
+                placeholder={t("search_placeholder")}
+                type="text"
+                value={query}
+              />
+            </div>
+          )}
+          {renderPanel()}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { Cascader };
diff --git a/packages/vitnode/src/components/ui/chart.tsx b/packages/vitnode/src/components/ui/chart.tsx
index 1399b9fbe..cac632d46 100644
--- a/packages/vitnode/src/components/ui/chart.tsx
+++ b/packages/vitnode/src/components/ui/chart.tsx
@@ -245,7 +245,7 @@ function ChartTooltipContent({
                     )}
                     <div
                       className={cn(
-                        "flex flex-1 justify-between leading-none",
+                        "flex flex-1 justify-between gap-4 leading-none",
                         nestLabel ? "items-end" : "items-center",
                       )}
                     >
diff --git a/packages/vitnode/src/components/ui/checkbox.tsx b/packages/vitnode/src/components/ui/checkbox.tsx
index 00b20c2d8..c7d8a1746 100644
--- a/packages/vitnode/src/components/ui/checkbox.tsx
+++ b/packages/vitnode/src/components/ui/checkbox.tsx
@@ -18,7 +18,7 @@ function Checkbox({
   return (
     <CheckboxPrimitive.Root
       className={cn(
-        "peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-data-[disabled=true]/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
       data-slot="checkbox"
diff --git a/packages/vitnode/src/components/ui/color-picker.tsx b/packages/vitnode/src/components/ui/color-picker.tsx
index 74d9fc176..c9fe94de6 100644
--- a/packages/vitnode/src/components/ui/color-picker.tsx
+++ b/packages/vitnode/src/components/ui/color-picker.tsx
@@ -8,8 +8,8 @@ import { colorToHslString } from "@/lib/colors";
 import { Button } from "./button";
 import { ColorPresetPicker } from "./color-preset-picker";
 import { Input } from "./input";
-import { Loader } from "./loader";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Spinner } from "./spinner";
 
 // react-colorful only ships in the bundle once the picker is actually opened.
 const HslStringColorPicker = React.lazy(async () => ({
@@ -59,7 +59,9 @@ export const ColorPicker = ({
         <React.Suspense
           fallback={
             <div className="flex size-50 items-center justify-center">
-              <Loader />
+              <div className="flex items-center justify-center">
+                <Spinner size="xl" />
+              </div>
             </div>
           }
         >
diff --git a/packages/vitnode/src/components/ui/combobox.tsx b/packages/vitnode/src/components/ui/combobox.tsx
index 6c6d7ced4..a87ee9bb8 100644
--- a/packages/vitnode/src/components/ui/combobox.tsx
+++ b/packages/vitnode/src/components/ui/combobox.tsx
@@ -1,6 +1,12 @@
 import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 import { cn } from "cn";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  MotionConfig,
+  useIsPresent,
+} from "motion/react";
 import React from "react";
 import { useTranslations } from "use-intl";
 
@@ -60,7 +66,7 @@ function ComboboxInput({
   showTrigger?: boolean;
 }) {
   return (
-    <InputGroup className={cn("w-auto", className)}>
+    <InputGroup className={cn("w-full", className)}>
       <ComboboxPrimitive.Input
         render={<InputGroupInput disabled={disabled} />}
         {...props}
@@ -222,7 +228,7 @@ function ComboboxChips({
   return (
     <ComboboxPrimitive.Chips
       className={cn(
-        "border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 dark:bg-input/30 bg-card flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1.5",
+        "border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 dark:bg-input/30 bg-card relative flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1.5",
         className,
       )}
       data-slot="combobox-chips"
@@ -231,38 +237,117 @@ function ComboboxChips({
   );
 }
 
+const CHIP_TRANSITION = { type: "spring", duration: 0.3, bounce: 0 } as const;
+const CHIP_HIDDEN = { opacity: 0, scale: 0.6 };
+const CHIP_VISIBLE = { opacity: 1, scale: 1 };
+
+const chipClassName =
+  "bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0";
+
+function ComboboxChipList({ children }: { children: React.ReactNode }) {
+  return (
+    <MotionConfig reducedMotion="user">
+      <AnimatePresence initial={false} mode="popLayout">
+        {children}
+      </AnimatePresence>
+    </MotionConfig>
+  );
+}
+
 function ComboboxChip({
   className,
   children,
+  ref,
   showRemove = true,
   ...props
-}: ComboboxPrimitive.Chip.Props & {
+}: Omit<ComboboxPrimitive.Chip.Props, "ref"> & {
+  ref?: React.Ref<HTMLDivElement>;
   showRemove?: boolean;
 }) {
   const t = useTranslations("core.global");
+  const isPresent = useIsPresent();
 
   return (
-    <ComboboxPrimitive.Chip
-      className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0",
-        className,
-      )}
-      data-slot="combobox-chip"
-      {...props}
+    <motion.div
+      animate={CHIP_VISIBLE}
+      className="flex"
+      data-slot="combobox-chip-motion"
+      exit={CHIP_HIDDEN}
+      initial={CHIP_HIDDEN}
+      layout="position"
+      ref={ref}
+      transition={CHIP_TRANSITION}
     >
-      {children}
-      {showRemove && (
-        <ComboboxPrimitive.ChipRemove
-          className="-ms-1 opacity-50 hover:opacity-100"
-          data-slot="combobox-chip-remove"
-          render={
-            <Button aria-label={t("remove")} size="icon-xs" variant="ghost" />
-          }
+      {isPresent ? (
+        <ComboboxPrimitive.Chip
+          className={cn(chipClassName, className)}
+          data-slot="combobox-chip"
+          {...props}
         >
-          <XIcon className="pointer-events-none" />
-        </ComboboxPrimitive.ChipRemove>
+          {children}
+          {showRemove && (
+            <ComboboxPrimitive.ChipRemove
+              className="-ms-1 opacity-50 hover:opacity-100"
+              data-slot="combobox-chip-remove"
+              render={
+                <Button
+                  aria-label={t("remove")}
+                  size="icon-xs"
+                  variant="ghost"
+                />
+              }
+            >
+              <XIcon className="pointer-events-none" />
+            </ComboboxPrimitive.ChipRemove>
+          )}
+        </ComboboxPrimitive.Chip>
+      ) : (
+        <span
+          aria-hidden="true"
+          className={cn(chipClassName, "pointer-events-none", className)}
+        >
+          {children}
+          {showRemove && (
+            <span
+              className="-ms-1 flex size-6 items-center justify-center opacity-50"
+              data-slot="combobox-chip-remove"
+            >
+              <XIcon className="size-3" />
+            </span>
+          )}
+        </span>
       )}
-    </ComboboxPrimitive.Chip>
+    </motion.div>
+  );
+}
+
+function ComboboxChipOverflow({
+  count,
+  ref,
+}: {
+  count: number;
+  ref?: React.Ref<HTMLDivElement>;
+}) {
+  const t = useTranslations("core.global");
+
+  return (
+    <motion.div
+      animate={CHIP_VISIBLE}
+      className="flex"
+      data-slot="combobox-chip-motion"
+      exit={CHIP_HIDDEN}
+      initial={CHIP_HIDDEN}
+      layout="position"
+      ref={ref}
+      transition={CHIP_TRANSITION}
+    >
+      <span
+        className={cn(chipClassName, "text-muted-foreground tabular-nums")}
+        data-slot="combobox-chip-overflow"
+      >
+        {t("more_count", { count })}
+      </span>
+    </motion.div>
   );
 }
 
@@ -274,6 +359,7 @@ function ComboboxChipsInput({
     <ComboboxPrimitive.Input
       className={cn("min-w-16 flex-1 outline-none", className)}
       data-slot="combobox-chip-input"
+      render={<motion.input layout="position" transition={CHIP_TRANSITION} />}
       {...props}
     />
   );
@@ -286,6 +372,8 @@ function useComboboxAnchor() {
 export {
   Combobox,
   ComboboxChip,
+  ComboboxChipList,
+  ComboboxChipOverflow,
   ComboboxChips,
   ComboboxChipsInput,
   ComboboxCollection,
diff --git a/packages/vitnode/src/components/ui/comparison.test.ts b/packages/vitnode/src/components/ui/comparison.test.ts
new file mode 100644
index 000000000..81ee5d29a
--- /dev/null
+++ b/packages/vitnode/src/components/ui/comparison.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+
+import { positionFromKey, positionFromPointer } from "./comparison";
+
+describe("positionFromPointer", () => {
+  it("turns the pointer x into a percentage of the width", () => {
+    expect(positionFromPointer(150, { left: 100, width: 200 })).toBe(25);
+  });
+
+  it("clamps pointers outside the box", () => {
+    expect(positionFromPointer(0, { left: 100, width: 200 })).toBe(0);
+    expect(positionFromPointer(900, { left: 100, width: 200 })).toBe(100);
+  });
+
+  it("falls back to the middle before the box has a size", () => {
+    expect(positionFromPointer(10, { left: 0, width: 0 })).toBe(50);
+  });
+});
+
+describe("positionFromKey", () => {
+  it("moves by 5% with the arrow keys and 10% with shift", () => {
+    expect(positionFromKey("ArrowRight", 50, false)).toBe(55);
+    expect(positionFromKey("ArrowLeft", 50, false)).toBe(45);
+    expect(positionFromKey("ArrowUp", 50, true)).toBe(60);
+  });
+
+  it("jumps to the ends with Home and End and never overshoots", () => {
+    expect(positionFromKey("Home", 50, false)).toBe(0);
+    expect(positionFromKey("End", 50, false)).toBe(100);
+    expect(positionFromKey("ArrowRight", 98, false)).toBe(100);
+  });
+
+  it("ignores other keys", () => {
+    expect(positionFromKey("a", 50, false)).toBeNull();
+  });
+});
diff --git a/packages/vitnode/src/components/ui/comparison.tsx b/packages/vitnode/src/components/ui/comparison.tsx
new file mode 100644
index 000000000..8f560f50f
--- /dev/null
+++ b/packages/vitnode/src/components/ui/comparison.tsx
@@ -0,0 +1,209 @@
+import { cn } from "cn";
+import { GripVerticalIcon } from "lucide-react";
+import {
+  motion,
+  type MotionValue,
+  useMotionValue,
+  useTransform,
+} from "motion/react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+const KEY_STEP = 5;
+const SHIFT_KEY_STEP = 10;
+
+export const clampPosition = (value: number) =>
+  Math.min(100, Math.max(0, value));
+
+export const positionFromPointer = (
+  clientX: number,
+  rect: { left: number; width: number },
+) =>
+  rect.width ? clampPosition(((clientX - rect.left) / rect.width) * 100) : 50;
+
+export const positionFromKey = (
+  key: string,
+  current: number,
+  shiftKey: boolean,
+): null | number => {
+  const step = shiftKey ? SHIFT_KEY_STEP : KEY_STEP;
+
+  switch (key) {
+    case "ArrowDown":
+    case "ArrowLeft":
+      return clampPosition(current - step);
+    case "ArrowRight":
+    case "ArrowUp":
+      return clampPosition(current + step);
+    case "End":
+      return 100;
+    case "Home":
+      return 0;
+    default:
+      return null;
+  }
+};
+
+const ComparisonContext = React.createContext<null | {
+  mode: "drag" | "hover";
+  position: MotionValue<number>;
+}>(null);
+
+const useComparison = () => {
+  const context = React.use(ComparisonContext);
+
+  if (!context) {
+    throw new Error("Comparison parts must be used inside <Comparison>");
+  }
+
+  return context;
+};
+
+function Comparison({
+  "aria-label": ariaLabel,
+  className,
+  defaultPosition = 50,
+  mode = "drag",
+  onPositionChange,
+  ...props
+}: Omit<React.ComponentProps<"div">, "defaultValue"> & {
+  defaultPosition?: number;
+  mode?: "drag" | "hover";
+  onPositionChange?: (position: number) => void;
+}) {
+  const t = useTranslations("core.global");
+  const position = useMotionValue(clampPosition(defaultPosition));
+  const [valueNow, setValueNow] = React.useState(position.get());
+  const isDraggingRef = React.useRef(false);
+
+  const moveTo = (next: number) => {
+    position.set(next);
+    setValueNow(next);
+    onPositionChange?.(next);
+  };
+
+  const moveToPointer = (event: React.PointerEvent<HTMLDivElement>) => {
+    moveTo(
+      positionFromPointer(
+        event.clientX,
+        event.currentTarget.getBoundingClientRect(),
+      ),
+    );
+  };
+
+  const contextValue = React.useMemo(
+    () => ({ mode, position }),
+    [mode, position],
+  );
+  const rounded = Math.round(valueNow);
+
+  return (
+    <ComparisonContext value={contextValue}>
+      <div
+        aria-label={ariaLabel ?? t("comparison_slider")}
+        aria-orientation="horizontal"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={rounded}
+        aria-valuetext={`${rounded}%`}
+        className={cn(
+          "focus-visible:ring-ring/50 relative isolate w-full touch-pan-y overflow-hidden outline-none select-none focus-visible:ring-3",
+          mode === "drag" && "cursor-ew-resize",
+          className,
+        )}
+        data-slot="comparison"
+        onKeyDown={event => {
+          const next = positionFromKey(
+            event.key,
+            position.get(),
+            event.shiftKey,
+          );
+          if (next === null) return;
+
+          event.preventDefault();
+          moveTo(next);
+        }}
+        onPointerCancel={() => {
+          isDraggingRef.current = false;
+        }}
+        onPointerDown={event => {
+          if (mode !== "drag") return;
+
+          isDraggingRef.current = true;
+          event.currentTarget.setPointerCapture(event.pointerId);
+          moveToPointer(event);
+        }}
+        onPointerMove={event => {
+          if (mode === "hover" || isDraggingRef.current) moveToPointer(event);
+        }}
+        onPointerUp={() => {
+          isDraggingRef.current = false;
+        }}
+        role="slider"
+        tabIndex={0}
+        {...props}
+      />
+    </ComparisonContext>
+  );
+}
+
+function ComparisonItem({
+  className,
+  position: side,
+  ...props
+}: React.ComponentProps<typeof motion.div> & {
+  position: "left" | "right";
+}) {
+  const { position } = useComparison();
+  const clipPath = useTransform(position, value =>
+    side === "left" ? `inset(0 ${100 - value}% 0 0)` : `inset(0 0 0 ${value}%)`,
+  );
+
+  return (
+    <motion.div
+      aria-hidden="true"
+      className={cn(
+        "absolute inset-0 size-full *:size-full *:object-cover",
+        className,
+      )}
+      data-slot="comparison-item"
+      style={{ clipPath }}
+      {...props}
+    />
+  );
+}
+
+function ComparisonHandle({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof motion.div>) {
+  const { mode, position } = useComparison();
+  const left = useTransform(position, value => `${value}%`);
+
+  return (
+    <motion.div
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute top-0 z-10 flex h-full w-10 -translate-x-1/2 items-center justify-center",
+        className,
+      )}
+      data-slot="comparison-handle"
+      style={{ left }}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <div className="bg-foreground/70 absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 shadow-sm" />
+          {mode === "drag" && (
+            <div className="bg-background text-foreground ring-foreground/20 relative flex items-center justify-center rounded-md px-0.5 py-1 shadow-sm ring-1">
+              <GripVerticalIcon className="size-4" />
+            </div>
+          )}
+        </>
+      )}
+    </motion.div>
+  );
+}
+
+export { Comparison, ComparisonHandle, ComparisonItem };
diff --git a/packages/vitnode/src/components/ui/context-menu.tsx b/packages/vitnode/src/components/ui/context-menu.tsx
index 40f73afbb..7e5eaf075 100644
--- a/packages/vitnode/src/components/ui/context-menu.tsx
+++ b/packages/vitnode/src/components/ui/context-menu.tsx
@@ -76,13 +76,13 @@ function ContextMenuContent({
         align={align}
         alignOffset={alignOffset}
         anchor={anchor}
-        className="isolate z-50"
+        className="isolate z-50 outline-none"
         side={side}
         sideOffset={sideOffset}
       >
         <ContextMenuPrimitive.Popup
           className={cn(
-            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100",
+            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 outline-none",
             className,
           )}
           data-slot="context-menu-content"
@@ -127,7 +127,7 @@ function ContextMenuSubTrigger({
   return (
     <ContextMenuPrimitive.SubmenuTrigger
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       data-inset={inset}
@@ -159,13 +159,13 @@ function ContextMenuSubContent({
         align={align}
         alignOffset={alignOffset}
         anchor={anchor}
-        className="isolate z-50"
+        className="isolate z-50 outline-none"
         side={side}
         sideOffset={sideOffset}
       >
         <ContextMenuPrimitive.Popup
           className={cn(
-            "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-md border p-1 shadow-lg duration-100",
+            "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 ring-foreground/10 z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 outline-none",
             className,
           )}
           data-slot="context-menu-sub-content"
diff --git a/packages/vitnode/src/components/ui/copy-button.test.tsx b/packages/vitnode/src/components/ui/copy-button.test.tsx
new file mode 100644
index 000000000..0a1c87087
--- /dev/null
+++ b/packages/vitnode/src/components/ui/copy-button.test.tsx
@@ -0,0 +1,113 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { toast } from "sonner";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { CopyButton } from "./copy-button";
+
+const stubClipboard = (writeText: (text: string) => Promise<void>) => {
+  const spy = vi.fn(writeText);
+  Object.defineProperty(navigator, "clipboard", {
+    configurable: true,
+    value: { writeText: spy },
+  });
+
+  return spy;
+};
+
+const clickAndFlush = async (element: HTMLElement) => {
+  await act(async () => {
+    fireEvent.click(element);
+    await Promise.resolve();
+  });
+};
+
+describe("CopyButton", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("writes the content to the clipboard and announces it", async () => {
+    const writeText = stubClipboard(async () => {});
+    render(<CopyButton content="pnpm create vitnode-app" />);
+
+    await clickAndFlush(
+      screen.getByRole("button", { name: "core.global.copy" }),
+    );
+
+    expect(writeText).toHaveBeenCalledWith("pnpm create vitnode-app");
+    expect(
+      screen.getByRole("button", { name: "core.global.copied" }),
+    ).toBeTruthy();
+    expect(screen.getByRole("status").textContent).toBe("core.global.copied");
+  });
+
+  it("goes back to the copy state after the delay", async () => {
+    stubClipboard(async () => {});
+    const onCopiedChange = vi.fn();
+    render(
+      <CopyButton
+        content="hello"
+        delay={1000}
+        onCopiedChange={onCopiedChange}
+      />,
+    );
+
+    await clickAndFlush(screen.getByRole("button"));
+    expect(onCopiedChange).toHaveBeenLastCalledWith(true);
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(onCopiedChange).toHaveBeenLastCalledWith(false);
+    expect(
+      screen.getByRole("button", { name: "core.global.copy" }),
+    ).toBeTruthy();
+    expect(screen.getByRole("status").textContent).toBe("");
+  });
+
+  it("shows an error toast when the clipboard rejects", async () => {
+    stubClipboard(async () => Promise.reject(new Error("denied")));
+    const toastError = vi.spyOn(toast, "error");
+    render(<CopyButton content="hello" />);
+
+    await clickAndFlush(screen.getByRole("button"));
+
+    expect(toastError).toHaveBeenCalledWith("core.global.errors.title", {
+      description: "core.global.copy_failed",
+    });
+    expect(
+      screen.getByRole("button", { name: "core.global.copy" }),
+    ).toBeTruthy();
+  });
+
+  it("keeps a visible label as the accessible name", async () => {
+    stubClipboard(async () => {});
+    render(<CopyButton content="hello">Copy command</CopyButton>);
+
+    await clickAndFlush(screen.getByRole("button", { name: "Copy command" }));
+
+    expect(screen.getByRole("button", { name: "Copy command" })).toBeTruthy();
+  });
+
+  it("does not copy when the click handler prevents default", async () => {
+    const writeText = stubClipboard(async () => {});
+    render(
+      <CopyButton
+        content="hello"
+        onClick={event => {
+          event.preventDefault();
+        }}
+      />,
+    );
+
+    await clickAndFlush(screen.getByRole("button"));
+
+    expect(writeText).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/vitnode/src/components/ui/copy-button.tsx b/packages/vitnode/src/components/ui/copy-button.tsx
new file mode 100644
index 000000000..54465316c
--- /dev/null
+++ b/packages/vitnode/src/components/ui/copy-button.tsx
@@ -0,0 +1,180 @@
+import type { VariantProps } from "class-variance-authority";
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cn } from "cn";
+import { CopyIcon } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import React from "react";
+import { toast } from "sonner";
+import { useTranslations } from "use-intl";
+
+import { buttonVariants } from "./button";
+
+const checkPath = "M4 12l5 5 11-11";
+
+type CopyButtonProps = Omit<
+  ButtonPrimitive.Props,
+  "children" | "className" | "content"
+> &
+  VariantProps<typeof buttonVariants> & {
+    children?: React.ReactNode;
+    className?: string;
+    content: string;
+    copied?: boolean;
+    delay?: number;
+    onCopiedChange?: (copied: boolean) => void;
+  };
+
+const useIconMotion = () => {
+  const shouldReduceMotion = useReducedMotion();
+
+  if (shouldReduceMotion) {
+    return {
+      hidden: { opacity: 0 },
+      visible: { opacity: 1 },
+      transition: { duration: 0.15 },
+      check: { initial: { pathLength: 1 }, transition: { duration: 0 } },
+    };
+  }
+
+  return {
+    hidden: { opacity: 0, scale: 0.4, filter: "blur(4px)" },
+    visible: { opacity: 1, scale: 1, filter: "blur(0px)" },
+    transition: { type: "spring", duration: 0.3, bounce: 0 } as const,
+    check: {
+      initial: { pathLength: 0 },
+      transition: {
+        type: "spring",
+        duration: 0.35,
+        bounce: 0,
+        delay: 0.05,
+      } as const,
+    },
+  };
+};
+
+const CopiedCheck = ({
+  initial,
+  transition,
+}: Pick<
+  React.ComponentProps<typeof motion.path>,
+  "initial" | "transition"
+>) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+  >
+    <motion.path
+      animate={{ pathLength: 1 }}
+      d={checkPath}
+      initial={initial}
+      transition={transition}
+    />
+  </svg>
+);
+
+function CopyButton({
+  "aria-label": ariaLabel,
+  children,
+  className,
+  content,
+  copied,
+  delay = 3000,
+  onClick,
+  onCopiedChange,
+  size,
+  variant = "outline",
+  ...props
+}: CopyButtonProps) {
+  const t = useTranslations("core.global");
+  const [uncontrolledCopied, setUncontrolledCopied] = React.useState(false);
+  const isCopied = copied ?? uncontrolledCopied;
+  const iconMotion = useIconMotion();
+
+  const setCopied = (next: boolean) => {
+    setUncontrolledCopied(next);
+    onCopiedChange?.(next);
+  };
+
+  const resetCopied = React.useEffectEvent(() => {
+    setCopied(false);
+  });
+
+  React.useEffect(() => {
+    if (!isCopied) return;
+
+    const timer = setTimeout(resetCopied, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [isCopied, delay]);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+    } catch {
+      toast.error(t("errors.title"), { description: t("copy_failed") });
+    }
+  };
+
+  const hasLabel = children !== undefined && children !== null;
+  const stateLabel = isCopied ? t("copied") : t("copy");
+
+  return (
+    <>
+      <ButtonPrimitive
+        aria-label={ariaLabel ?? (hasLabel ? undefined : stateLabel)}
+        className={cn(
+          buttonVariants({
+            variant,
+            size: size ?? (hasLabel ? "default" : "icon"),
+          }),
+          "relative",
+          className,
+        )}
+        data-copied={isCopied ? "" : undefined}
+        data-slot="copy-button"
+        onClick={event => {
+          onClick?.(event);
+          if (event.defaultPrevented) return;
+
+          void copyToClipboard();
+        }}
+        type="button"
+        {...props}
+      >
+        <AnimatePresence initial={false} mode="popLayout">
+          <motion.span
+            animate={iconMotion.visible}
+            className="flex items-center justify-center"
+            data-icon={hasLabel ? "inline-start" : undefined}
+            data-slot="copy-button-icon"
+            exit={iconMotion.hidden}
+            initial={iconMotion.hidden}
+            key={isCopied ? "check" : "copy"}
+            transition={iconMotion.transition}
+          >
+            {isCopied ? (
+              <CopiedCheck {...iconMotion.check} />
+            ) : (
+              <CopyIcon aria-hidden="true" />
+            )}
+          </motion.span>
+        </AnimatePresence>
+        {children}
+      </ButtonPrimitive>
+      <span aria-live="polite" className="sr-only" role="status">
+        {isCopied ? t("copied") : ""}
+      </span>
+    </>
+  );
+}
+
+export { CopyButton, type CopyButtonProps };
diff --git a/packages/vitnode/src/components/ui/counter.test.tsx b/packages/vitnode/src/components/ui/counter.test.tsx
new file mode 100644
index 000000000..11d338596
--- /dev/null
+++ b/packages/vitnode/src/components/ui/counter.test.tsx
@@ -0,0 +1,93 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { Counter } from "./counter";
+
+const increase = () =>
+  screen.getByRole("button", { name: "core.global.increase" });
+const decrease = () =>
+  screen.getByRole("button", { name: "core.global.decrease" });
+const shownValue = () =>
+  screen.getByRole("status").querySelector("[data-slot=sliding-number-value]")
+    ?.textContent;
+
+describe("Counter", () => {
+  it("counts up and down by the step", () => {
+    const onValueChange = vi.fn();
+    render(<Counter defaultValue={2} onValueChange={onValueChange} step={5} />);
+
+    fireEvent.click(increase());
+    expect(onValueChange).toHaveBeenLastCalledWith(7);
+    expect(shownValue()).toBe("7");
+
+    fireEvent.click(decrease());
+    fireEvent.click(decrease());
+    expect(onValueChange).toHaveBeenLastCalledWith(-3);
+  });
+
+  it("stops at min and max and disables the button there", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Counter
+        defaultValue={1}
+        max={2}
+        min={0}
+        onValueChange={onValueChange}
+      />,
+    );
+
+    fireEvent.click(increase());
+    expect(increase().hasAttribute("disabled")).toBe(true);
+
+    fireEvent.click(decrease());
+    fireEvent.click(decrease());
+    expect(decrease().hasAttribute("disabled")).toBe(true);
+    expect(onValueChange.mock.calls.map(([value]) => value)).toEqual([2, 1, 0]);
+  });
+
+  it("clamps a step that would jump past the limit", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Counter
+        defaultValue={8}
+        max={10}
+        onValueChange={onValueChange}
+        step={5}
+      />,
+    );
+
+    fireEvent.click(increase());
+
+    expect(onValueChange).toHaveBeenCalledWith(10);
+  });
+
+  it("follows the value prop when controlled", () => {
+    const Controlled = () => {
+      const [value, setValue] = React.useState(3);
+
+      return (
+        <>
+          <Counter onValueChange={setValue} value={value} />
+          <button onClick={() => setValue(40)} type="button">
+            reset
+          </button>
+        </>
+      );
+    };
+    render(<Controlled />);
+
+    fireEvent.click(increase());
+    expect(shownValue()).toBe("4");
+
+    fireEvent.click(screen.getByRole("button", { name: "reset" }));
+    expect(shownValue()).toBe("40");
+  });
+
+  it("disables both buttons when disabled", () => {
+    render(<Counter disabled />);
+
+    expect(increase().hasAttribute("disabled")).toBe(true);
+    expect(decrease().hasAttribute("disabled")).toBe(true);
+  });
+});
diff --git a/packages/vitnode/src/components/ui/counter.tsx b/packages/vitnode/src/components/ui/counter.tsx
new file mode 100644
index 000000000..35c7a2b37
--- /dev/null
+++ b/packages/vitnode/src/components/ui/counter.tsx
@@ -0,0 +1,90 @@
+import { cn } from "cn";
+import { MinusIcon, PlusIcon } from "lucide-react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+import { Button } from "./button";
+import { SlidingNumber } from "./sliding-number";
+
+export const clampCounterValue = (value: number, min: number, max: number) =>
+  Math.min(max, Math.max(min, value));
+
+function Counter({
+  className,
+  defaultValue = 0,
+  disabled = false,
+  max = Number.POSITIVE_INFINITY,
+  min = Number.NEGATIVE_INFINITY,
+  onValueChange,
+  step = 1,
+  value,
+  ...props
+}: Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
+  defaultValue?: number;
+  disabled?: boolean;
+  max?: number;
+  min?: number;
+  onValueChange?: (value: number) => void;
+  step?: number;
+  value?: number;
+}) {
+  const t = useTranslations("core.global");
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(() =>
+    clampCounterValue(defaultValue, min, max),
+  );
+  const current = value ?? uncontrolledValue;
+
+  const change = (direction: -1 | 1) => {
+    const next = clampCounterValue(current + direction * step, min, max);
+    if (next === current) return;
+
+    setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <div
+      className={cn(
+        "bg-card inline-flex items-center gap-1 rounded-lg border p-1 shadow-xs",
+        className,
+      )}
+      data-slot="counter"
+      role="group"
+      {...props}
+    >
+      <Button
+        aria-label={t("decrease")}
+        className="transition-transform active:scale-90 motion-reduce:transition-none"
+        disabled={disabled || current <= min}
+        onClick={() => {
+          change(-1);
+        }}
+        size="icon-sm"
+        variant="ghost"
+      >
+        <MinusIcon />
+      </Button>
+      <output
+        aria-live="polite"
+        className="flex min-w-8 justify-center px-1 text-sm font-medium"
+        data-slot="counter-value"
+      >
+        <SlidingNumber value={current} />
+      </output>
+      <Button
+        aria-label={t("increase")}
+        className="transition-transform active:scale-90 motion-reduce:transition-none"
+        disabled={disabled || current >= max}
+        onClick={() => {
+          change(1);
+        }}
+        size="icon-sm"
+        variant="ghost"
+      >
+        <PlusIcon />
+      </Button>
+    </div>
+  );
+}
+
+export { Counter };
diff --git a/packages/vitnode/src/components/ui/dialog.tsx b/packages/vitnode/src/components/ui/dialog.tsx
index 7cacc1995..eae3a255d 100644
--- a/packages/vitnode/src/components/ui/dialog.tsx
+++ b/packages/vitnode/src/components/ui/dialog.tsx
@@ -222,7 +222,7 @@ function DialogFooter({
   return (
     <div
       className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "bg-muted/50 -mx-6 -mb-6 flex flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end",
         className,
       )}
       data-slot="dialog-footer"
diff --git a/packages/vitnode/src/components/ui/editor.tsx b/packages/vitnode/src/components/ui/editor.tsx
index 0c4fd9e61..798c112ee 100644
--- a/packages/vitnode/src/components/ui/editor.tsx
+++ b/packages/vitnode/src/components/ui/editor.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import type { TipTapEditorProps } from "@/components/tiptap/tiptap-editor";
 
-import { Loader } from "./loader";
+import { Spinner } from "./spinner";
 
 const TipTapEditor = React.lazy(async () =>
   import("@/components/tiptap/tiptap-editor").then(module => ({
@@ -21,10 +21,21 @@ export const Editor = (props: TipTapEditorProps) => {
     getIsHydratedOnServer,
   );
 
-  if (!isHydrated) return <Loader />;
+  if (!isHydrated)
+    return (
+      <div className="flex items-center justify-center">
+        <Spinner size="xl" />
+      </div>
+    );
 
   return (
-    <React.Suspense fallback={<Loader />}>
+    <React.Suspense
+      fallback={
+        <div className="flex items-center justify-center">
+          <Spinner size="xl" />
+        </div>
+      }
+    >
       <TipTapEditor {...props} />
     </React.Suspense>
   );
diff --git a/packages/vitnode/src/components/ui/emoji-icon-picker.tsx b/packages/vitnode/src/components/ui/emoji-icon-picker.tsx
index 661bab510..071123ea7 100644
--- a/packages/vitnode/src/components/ui/emoji-icon-picker.tsx
+++ b/packages/vitnode/src/components/ui/emoji-icon-picker.tsx
@@ -9,8 +9,8 @@ import { humanizeIconName } from "@/lib/emoji-icon";
 
 import { Button } from "./button";
 import { EmojiIcon } from "./emoji-icon";
-import { Loader } from "./loader";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Spinner } from "./spinner";
 
 const EmojiIconPickerPanel = React.lazy(async () =>
   import("./emoji-icon-picker-panel").then(module => ({
@@ -78,7 +78,9 @@ export const EmojiIconPicker = ({
           <React.Suspense
             fallback={
               <div className="flex h-108 items-center justify-center">
-                <Loader />
+                <div className="flex items-center justify-center">
+                  <Spinner size="xl" />
+                </div>
               </div>
             }
           >
diff --git a/packages/vitnode/src/components/ui/field.tsx b/packages/vitnode/src/components/ui/field.tsx
index f768c9878..a089727af 100644
--- a/packages/vitnode/src/components/ui/field.tsx
+++ b/packages/vitnode/src/components/ui/field.tsx
@@ -103,7 +103,7 @@ function FieldLabel({
   return (
     <Label
       className={cn(
-        "group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
+        "group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-3",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className,
       )}
diff --git a/packages/vitnode/src/components/ui/image-zoom.test.ts b/packages/vitnode/src/components/ui/image-zoom.test.ts
new file mode 100644
index 000000000..c14453552
--- /dev/null
+++ b/packages/vitnode/src/components/ui/image-zoom.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+import { fitZoomedRect, zoomOrigin } from "./image-zoom";
+
+describe("fitZoomedRect", () => {
+  it("fills the width of a tall viewport and centres vertically", () => {
+    expect(fitZoomedRect(2, { height: 1000, padding: 10, width: 400 })).toEqual(
+      { height: 190, left: 10, top: 405, width: 380 },
+    );
+  });
+
+  it("fills the height of a wide viewport and centres horizontally", () => {
+    expect(fitZoomedRect(1, { height: 500, padding: 50, width: 1200 })).toEqual(
+      { height: 400, left: 400, top: 50, width: 400 },
+    );
+  });
+});
+
+describe("zoomOrigin", () => {
+  it("moves and shrinks the zoomed image back onto the thumbnail", () => {
+    expect(
+      zoomOrigin(
+        { height: 50, left: 100, top: 300, width: 100 },
+        { height: 200, left: 40, top: 60, width: 400 },
+      ),
+    ).toEqual({ scale: 0.25, x: 60, y: 240 });
+  });
+});
diff --git a/packages/vitnode/src/components/ui/image-zoom.tsx b/packages/vitnode/src/components/ui/image-zoom.tsx
new file mode 100644
index 000000000..498f6d575
--- /dev/null
+++ b/packages/vitnode/src/components/ui/image-zoom.tsx
@@ -0,0 +1,171 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "cn";
+import { XIcon } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+const ZOOM_TRANSITION = { type: "spring", duration: 0.4, bounce: 0 } as const;
+const ZOOMED = { scale: 1, x: 0, y: 0 };
+
+interface Rect {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+}
+
+export const fitZoomedRect = (
+  aspectRatio: number,
+  viewport: { height: number; padding: number; width: number },
+): Rect => {
+  const maxWidth = viewport.width - viewport.padding * 2;
+  const maxHeight = viewport.height - viewport.padding * 2;
+  const width = Math.min(maxWidth, maxHeight * aspectRatio);
+  const height = width / aspectRatio;
+
+  return {
+    height,
+    left: (viewport.width - width) / 2,
+    top: (viewport.height - height) / 2,
+    width,
+  };
+};
+
+export const zoomOrigin = (from: Rect, to: Rect) => ({
+  scale: from.width / to.width,
+  x: from.left - to.left,
+  y: from.top - to.top,
+});
+
+const measureZoom = (image: HTMLImageElement) => {
+  const thumb = image.getBoundingClientRect();
+  const padding = window.matchMedia("(min-width: 48rem)").matches ? 40 : 16;
+  const target = fitZoomedRect(thumb.width / thumb.height, {
+    height: window.innerHeight,
+    padding,
+    width: window.innerWidth,
+  });
+
+  return { origin: zoomOrigin(thumb, target), target };
+};
+
+function ImageZoom({
+  alt,
+  className,
+  imageClassName,
+  src,
+  zoomSrc,
+}: {
+  alt: string;
+  className?: string;
+  imageClassName?: string;
+  src: string;
+  zoomSrc?: string;
+}) {
+  const t = useTranslations("core.global");
+  const shouldReduceMotion = useReducedMotion();
+  const thumbRef = React.useRef<HTMLImageElement>(null);
+  const [zoom, setZoom] = React.useState<null | ReturnType<typeof measureZoom>>(
+    null,
+  );
+  const [isClosing, setIsClosing] = React.useState(false);
+
+  const open = () => {
+    if (!thumbRef.current) return;
+
+    setIsClosing(false);
+    setZoom(measureZoom(thumbRef.current));
+  };
+
+  const close = () => {
+    if (shouldReduceMotion || !thumbRef.current || !zoom) {
+      setZoom(null);
+
+      return;
+    }
+
+    setZoom({ ...zoom, origin: measureZoom(thumbRef.current).origin });
+    setIsClosing(true);
+  };
+
+  return (
+    <DialogPrimitive.Root
+      onOpenChange={next => {
+        if (next) {
+          open();
+
+          return;
+        }
+
+        close();
+      }}
+      open={zoom !== null}
+    >
+      <DialogPrimitive.Trigger
+        className={cn(
+          "focus-visible:ring-ring/50 relative block cursor-zoom-in rounded-md outline-none focus-visible:ring-3",
+          className,
+        )}
+        data-slot="image-zoom"
+      >
+        <img
+          alt={alt}
+          className={cn(zoom && "invisible", imageClassName)}
+          ref={thumbRef}
+          src={src}
+        />
+      </DialogPrimitive.Trigger>
+
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Backdrop
+          className={cn(
+            "bg-background/80 fixed inset-0 z-50 backdrop-blur-md transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
+            isClosing && "opacity-0",
+          )}
+        />
+        <DialogPrimitive.Popup
+          aria-label={alt}
+          className="fixed inset-0 z-50 cursor-zoom-out outline-none"
+          data-slot="image-zoom-popup"
+          onClick={close}
+        >
+          {zoom && (
+            <motion.img
+              alt={alt}
+              animate={isClosing ? zoom.origin : ZOOMED}
+              className="absolute rounded-md object-contain shadow-xl"
+              initial={shouldReduceMotion ? false : zoom.origin}
+              onAnimationComplete={() => {
+                if (isClosing) setZoom(null);
+              }}
+              src={zoomSrc ?? src}
+              style={{
+                height: zoom.target.height,
+                left: zoom.target.left,
+                originX: 0,
+                originY: 0,
+                top: zoom.target.top,
+                width: zoom.target.width,
+              }}
+              transition={
+                shouldReduceMotion ? { duration: 0 } : ZOOM_TRANSITION
+              }
+            />
+          )}
+          <DialogPrimitive.Close
+            aria-label={t("close")}
+            className={cn(
+              "bg-foreground/70 text-background focus-visible:ring-ring/50 absolute end-4 top-4 flex size-10 cursor-pointer items-center justify-center rounded-full transition-opacity outline-none focus-visible:ring-3",
+              isClosing && "opacity-0",
+            )}
+          >
+            <XIcon className="size-5" />
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Popup>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}
+
+export { ImageZoom };
diff --git a/packages/vitnode/src/components/ui/input-otp.tsx b/packages/vitnode/src/components/ui/input-otp.tsx
index 7edb76d7d..6c1754b67 100644
--- a/packages/vitnode/src/components/ui/input-otp.tsx
+++ b/packages/vitnode/src/components/ui/input-otp.tsx
@@ -1,8 +1,17 @@
 import { cn } from "cn";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { MinusIcon } from "lucide-react";
+import {
+  OTPInput,
+  OTPInputContext,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+} from "input-otp";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import React from "react";
 
+const slotValueHidden = { opacity: 0, y: 8, scale: 0.8 };
+const slotValueVisible = { opacity: 1, y: 0, scale: 1 };
+
 function InputOTP({
   className,
   containerClassName,
@@ -14,7 +23,7 @@ function InputOTP({
     <OTPInput
       className={cn("disabled:cursor-not-allowed", className)}
       containerClassName={cn(
-        "cn-input-otp flex items-center has-disabled:opacity-50",
+        "cn-input-otp group/input-otp flex items-center gap-2 has-disabled:opacity-50",
         containerClassName,
       )}
       data-slot="input-otp"
@@ -27,10 +36,7 @@ function InputOTP({
 function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn(
-        "has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 flex items-center rounded-md has-aria-invalid:ring-3",
-        className,
-      )}
+      className={cn("flex min-w-0 items-center gap-2", className)}
       data-slot="input-otp-group"
       {...props}
     />
@@ -46,38 +52,66 @@ function InputOTPSlot({
 }) {
   const inputOTPContext = React.use(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  const shouldReduceMotion = useReducedMotion();
 
   return (
     <div
+      aria-hidden="true"
       className={cn(
-        "border-input aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex size-9 items-center justify-center border-y border-e text-sm shadow-xs transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md data-[active=true]:z-10 data-[active=true]:ring-3",
+        "border-input bg-card dark:bg-input/30 data-active:border-ring data-active:ring-ring/50 group-has-aria-invalid/input-otp:border-destructive group-has-aria-invalid/input-otp:data-active:ring-destructive/20 dark:group-has-aria-invalid/input-otp:data-active:ring-destructive/40 relative flex h-10 w-10 min-w-0 items-center justify-center rounded-md border text-lg font-medium tabular-nums shadow-xs transition-[border-color,box-shadow] duration-150 ease-out outline-none data-active:z-10 data-active:ring-3 motion-reduce:transition-none",
         className,
       )}
-      data-active={isActive}
+      data-active={isActive ? "" : undefined}
+      data-filled={char ? "" : undefined}
       data-slot="input-otp-slot"
       {...props}
     >
-      {char}
-      {hasFakeCaret && (
+      <AnimatePresence initial={false}>
+        {char ? (
+          <motion.span
+            animate={slotValueVisible}
+            className="origin-bottom"
+            data-slot="input-otp-slot-value"
+            initial={shouldReduceMotion ? false : slotValueHidden}
+            key={char}
+            transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
+          >
+            {char}
+          </motion.span>
+        ) : null}
+      </AnimatePresence>
+      {hasFakeCaret ? (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="animate-caret-blink bg-foreground h-4 w-0.5 rounded-full" />
         </div>
-      )}
+      ) : null}
     </div>
   );
 }
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+function InputOTPSeparator({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
     <div
-      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      aria-hidden="true"
+      className={cn(
+        "bg-muted-foreground/40 h-0.5 w-2 shrink-0 rounded-full",
+        className,
+      )}
       data-slot="input-otp-separator"
-      role="separator"
       {...props}
-    >
-      <MinusIcon />
-    </div>
+    />
   );
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+};
diff --git a/packages/vitnode/src/components/ui/label.tsx b/packages/vitnode/src/components/ui/label.tsx
index 83030697e..c4afcdf25 100644
--- a/packages/vitnode/src/components/ui/label.tsx
+++ b/packages/vitnode/src/components/ui/label.tsx
@@ -5,7 +5,7 @@ function Label({ className, ...props }: React.ComponentProps<"label">) {
   return (
     <label
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50",
         className,
       )}
       data-slot="label"
diff --git a/packages/vitnode/src/components/ui/loader.tsx b/packages/vitnode/src/components/ui/loader.tsx
deleted file mode 100644
index dcce9d651..000000000
--- a/packages/vitnode/src/components/ui/loader.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { cn } from "cn";
-import { Loader2 } from "lucide-react";
-
-export const Loader = ({
-  className,
-  small,
-}: {
-  className?: string;
-  small?: boolean;
-}) => {
-  if (small) {
-    return <Loader2 className={cn("size-5 animate-spin", className)} />;
-  }
-
-  return (
-    <div className={cn("flex items-center justify-center", className)}>
-      <Loader2 className={cn("size-10 animate-spin")} />
-    </div>
-  );
-};
diff --git a/packages/vitnode/src/components/ui/marker.tsx b/packages/vitnode/src/components/ui/marker.tsx
new file mode 100644
index 000000000..08f095a5f
--- /dev/null
+++ b/packages/vitnode/src/components/ui/marker.tsx
@@ -0,0 +1,73 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+import * as React from "react";
+
+const markerVariants = cva(
+  "group/marker text-muted-foreground [a]:hover:text-foreground relative flex min-h-4 w-full items-center gap-2 text-start text-sm [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3",
+  {
+    variants: {
+      variant: {
+        default: "",
+        separator:
+          "before:bg-border after:bg-border before:me-1 before:h-px before:min-w-0 before:flex-1 after:ms-1 after:h-px after:min-w-0 after:flex-1",
+        border: "border-border border-b pb-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Marker({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(markerVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "marker",
+      variant,
+    },
+  });
+}
+
+function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-slot="marker-icon"
+      {...props}
+    />
+  );
+}
+
+function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "*:[a]:hover:text-foreground min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3",
+        className,
+      )}
+      data-slot="marker-content"
+      {...props}
+    />
+  );
+}
+
+export { Marker, MarkerContent, MarkerIcon, markerVariants };
diff --git a/packages/vitnode/src/components/ui/menubar.tsx b/packages/vitnode/src/components/ui/menubar.tsx
index baf47d332..feefb3bb5 100644
--- a/packages/vitnode/src/components/ui/menubar.tsx
+++ b/packages/vitnode/src/components/ui/menubar.tsx
@@ -53,7 +53,7 @@ function MenubarTrigger({
   return (
     <MenuPrimitive.Trigger
       className={cn(
-        "hover:bg-muted data-popup-open:bg-muted flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        "hover:bg-muted focus-visible:bg-muted data-popup-open:bg-muted flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
         className,
       )}
       data-slot="menubar-trigger"
@@ -81,13 +81,13 @@ function MenubarContent({
         align={align}
         alignOffset={alignOffset}
         anchor={anchor}
-        className="isolate z-50"
+        className="isolate z-50 outline-none"
         side={side}
         sideOffset={sideOffset}
       >
         <MenuPrimitive.Popup
           className={cn(
-            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 min-w-36 origin-(--transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100",
+            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 outline-none",
             className,
           )}
           data-slot="menubar-content"
@@ -134,7 +134,7 @@ function MenubarCheckboxItem({
     <MenuPrimitive.CheckboxItem
       checked={checked}
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       data-inset={inset}
@@ -165,7 +165,7 @@ function MenubarRadioItem({
   return (
     <MenuPrimitive.RadioItem
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       data-inset={inset}
@@ -251,7 +251,7 @@ function MenubarSubTrigger({
   return (
     <MenuPrimitive.SubmenuTrigger
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       data-inset={inset}
@@ -283,13 +283,13 @@ function MenubarSubContent({
         align={align}
         alignOffset={alignOffset}
         anchor={anchor}
-        className="isolate z-50"
+        className="isolate z-50 outline-none"
         side={side}
         sideOffset={sideOffset}
       >
         <MenuPrimitive.Popup
           className={cn(
-            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100",
+            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 outline-none",
             className,
           )}
           data-slot="menubar-sub-content"
diff --git a/packages/vitnode/src/components/ui/message.tsx b/packages/vitnode/src/components/ui/message.tsx
new file mode 100644
index 000000000..b779f18d9
--- /dev/null
+++ b/packages/vitnode/src/components/ui/message.tsx
@@ -0,0 +1,91 @@
+import { cn } from "cn";
+import * as React from "react";
+
+function MessageGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex min-w-0 flex-col gap-2", className)}
+      data-slot="message-group"
+      {...props}
+    />
+  );
+}
+
+function Message({
+  className,
+  align = "start",
+  ...props
+}: React.ComponentProps<"div"> & { align?: "end" | "start" }) {
+  return (
+    <div
+      className={cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className,
+      )}
+      data-align={align}
+      data-slot="message"
+      {...props}
+    />
+  );
+}
+
+function MessageAvatar({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "bg-muted flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full group-has-data-[slot=message-footer]/message:-translate-y-8",
+        className,
+      )}
+      data-slot="message-avatar"
+      {...props}
+    />
+  );
+}
+
+function MessageContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className,
+      )}
+      data-slot="message-content"
+      {...props}
+    />
+  );
+}
+
+function MessageHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "text-muted-foreground flex max-w-full min-w-0 items-center px-3 text-xs font-medium group-has-data-[variant=ghost]/message:px-0",
+        className,
+      )}
+      data-slot="message-header"
+      {...props}
+    />
+  );
+}
+
+function MessageFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "text-muted-foreground flex max-w-full min-w-0 items-center px-3 text-xs font-medium group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        className,
+      )}
+      data-slot="message-footer"
+      {...props}
+    />
+  );
+}
+
+export {
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageGroup,
+  MessageHeader,
+};
diff --git a/packages/vitnode/src/components/ui/number-field.test.tsx b/packages/vitnode/src/components/ui/number-field.test.tsx
new file mode 100644
index 000000000..620998db8
--- /dev/null
+++ b/packages/vitnode/src/components/ui/number-field.test.tsx
@@ -0,0 +1,136 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldScrubArea,
+} from "./number-field";
+
+const renderNumberField = (
+  props: React.ComponentProps<typeof NumberField> = {},
+) =>
+  render(
+    <NumberField id="amount" {...props}>
+      <NumberFieldScrubArea htmlFor="amount" label="Amount" />
+      <NumberFieldGroup>
+        <NumberFieldDecrement />
+        <NumberFieldInput />
+        <NumberFieldIncrement />
+      </NumberFieldGroup>
+    </NumberField>,
+  );
+
+const input = () => screen.getByLabelText<HTMLInputElement>("Amount");
+const increase = () =>
+  screen.getByRole("button", { name: "core.global.increase" });
+const decrease = () =>
+  screen.getByRole("button", { name: "core.global.decrease" });
+
+const pressButton = (button: HTMLElement) => {
+  fireEvent.pointerDown(button, { button: 0, pointerType: "mouse" });
+  fireEvent.pointerUp(button, { button: 0, pointerType: "mouse" });
+  fireEvent.click(button, { detail: 1 });
+};
+
+const changedValues = (onValueChange: ReturnType<typeof vi.fn>) =>
+  onValueChange.mock.calls.map(([value]) => value as null | number);
+
+describe("NumberField", () => {
+  it("steps up and down by the step with the buttons", () => {
+    const onValueChange = vi.fn();
+    renderNumberField({ defaultValue: 10, onValueChange, step: 5 });
+
+    pressButton(increase());
+    expect(input().value).toBe("15");
+
+    pressButton(decrease());
+    pressButton(decrease());
+    expect(input().value).toBe("5");
+    expect(changedValues(onValueChange)).toEqual([15, 10, 5]);
+  });
+
+  it("clamps at min and max and disables the button at the limit", () => {
+    const onValueChange = vi.fn();
+    renderNumberField({ defaultValue: 9, max: 10, min: 8, onValueChange });
+
+    pressButton(increase());
+    expect(input().value).toBe("10");
+    expect(increase().hasAttribute("disabled")).toBe(true);
+
+    pressButton(decrease());
+    pressButton(decrease());
+    expect(input().value).toBe("8");
+    expect(decrease().hasAttribute("disabled")).toBe(true);
+    expect(changedValues(onValueChange)).toEqual([10, 9, 8]);
+  });
+
+  it("steps with the arrow keys and takes the large step with Shift", () => {
+    renderNumberField({ defaultValue: 0, max: 25 });
+
+    fireEvent.keyDown(input(), { key: "ArrowUp" });
+    expect(input().value).toBe("1");
+
+    fireEvent.keyDown(input(), { key: "ArrowUp", shiftKey: true });
+    expect(input().value).toBe("11");
+
+    fireEvent.keyDown(input(), { key: "ArrowUp", shiftKey: true });
+    fireEvent.keyDown(input(), { key: "ArrowUp", shiftKey: true });
+    expect(input().value).toBe("25");
+
+    fireEvent.keyDown(input(), { key: "ArrowDown" });
+    expect(input().value).toBe("24");
+  });
+
+  it("commits a typed value on blur, clamped to the range", () => {
+    const onValueCommitted = vi.fn();
+    renderNumberField({ defaultValue: 1, max: 100, onValueCommitted });
+
+    fireEvent.focus(input());
+    fireEvent.change(input(), { target: { value: "250" } });
+    expect(onValueCommitted).not.toHaveBeenCalled();
+
+    fireEvent.blur(input());
+    expect(onValueCommitted).toHaveBeenLastCalledWith(100, expect.anything());
+    expect(input().value).toBe("100");
+  });
+
+  it("ignores the buttons and the keyboard when disabled", () => {
+    const onValueChange = vi.fn();
+    renderNumberField({ defaultValue: 3, disabled: true, onValueChange });
+
+    expect(input().disabled).toBe(true);
+    expect(increase().hasAttribute("disabled")).toBe(true);
+    expect(decrease().hasAttribute("disabled")).toBe(true);
+
+    pressButton(increase());
+    fireEvent.keyDown(input(), { key: "ArrowUp" });
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(input().value).toBe("3");
+  });
+
+  it("keeps a read-only value but leaves the input focusable", () => {
+    const onValueChange = vi.fn();
+    renderNumberField({ defaultValue: 3, onValueChange, readOnly: true });
+
+    expect(input().readOnly).toBe(true);
+    expect(increase().getAttribute("aria-disabled")).toBe("true");
+
+    pressButton(increase());
+    fireEvent.keyDown(input(), { key: "ArrowUp" });
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("formats the value with the given Intl options", () => {
+    renderNumberField({
+      defaultValue: 1234.5,
+      format: { currency: "USD", style: "currency" },
+      locale: "en-US",
+    });
+
+    expect(input().value).toBe("$1,234.50");
+  });
+});
diff --git a/packages/vitnode/src/components/ui/number-field.tsx b/packages/vitnode/src/components/ui/number-field.tsx
new file mode 100644
index 000000000..f3d57122d
--- /dev/null
+++ b/packages/vitnode/src/components/ui/number-field.tsx
@@ -0,0 +1,160 @@
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
+import { cn } from "cn";
+import { MinusIcon, PlusIcon } from "lucide-react";
+import React from "react";
+import { useLocale, useTranslations } from "use-intl";
+
+type NumberFieldSize = "default" | "lg" | "sm";
+
+const stepperButtonClassName =
+  "text-muted-foreground hover:bg-muted hover:text-foreground relative flex shrink-0 cursor-pointer items-center justify-center px-2.5 transition-colors outline-none select-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent group-data-[size=lg]/number-field:px-3 group-data-[size=sm]/number-field:px-2 pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-11 pointer-coarse:after:-translate-1/2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 group-data-[size=sm]/number-field:[&_svg:not([class*='size-'])]:size-3.5";
+
+function NumberField({
+  className,
+  locale,
+  size = "default",
+  ...props
+}: NumberFieldPrimitive.Root.Props & { size?: NumberFieldSize }) {
+  const appLocale = useLocale();
+
+  return (
+    <NumberFieldPrimitive.Root
+      className={cn(
+        "group/number-field flex w-full flex-col items-start gap-2",
+        className,
+      )}
+      data-size={size}
+      data-slot="number-field"
+      locale={locale ?? appLocale}
+      {...props}
+    />
+  );
+}
+
+function NumberFieldGroup({
+  className,
+  ...props
+}: NumberFieldPrimitive.Group.Props) {
+  return (
+    <NumberFieldPrimitive.Group
+      className={cn(
+        "border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 dark:bg-input/30 bg-card relative flex h-9 w-full min-w-0 items-stretch rounded-md border shadow-xs transition-[color,box-shadow] group-data-[size=lg]/number-field:h-10 group-data-[size=sm]/number-field:h-8 focus-within:ring-3 has-aria-invalid:ring-3 data-disabled:opacity-50",
+        className,
+      )}
+      data-slot="number-field-group"
+      {...props}
+    />
+  );
+}
+
+function NumberFieldInput({
+  className,
+  ...props
+}: NumberFieldPrimitive.Input.Props) {
+  return (
+    <NumberFieldPrimitive.Input
+      className={cn(
+        "placeholder:text-muted-foreground w-full min-w-0 flex-1 bg-transparent px-2 text-center text-base tabular-nums outline-none group-data-[size=sm]/number-field:text-sm disabled:cursor-not-allowed md:text-sm",
+        className,
+      )}
+      data-slot="number-field-input"
+      {...props}
+    />
+  );
+}
+
+function NumberFieldDecrement({
+  children,
+  className,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props) {
+  const t = useTranslations("core.global");
+
+  return (
+    <NumberFieldPrimitive.Decrement
+      aria-label={t("decrease")}
+      className={cn(stepperButtonClassName, "rounded-s-md", className)}
+      data-slot="number-field-decrement"
+      {...props}
+    >
+      {children ?? <MinusIcon />}
+    </NumberFieldPrimitive.Decrement>
+  );
+}
+
+function NumberFieldIncrement({
+  children,
+  className,
+  ...props
+}: NumberFieldPrimitive.Increment.Props) {
+  const t = useTranslations("core.global");
+
+  return (
+    <NumberFieldPrimitive.Increment
+      aria-label={t("increase")}
+      className={cn(stepperButtonClassName, "rounded-e-md", className)}
+      data-slot="number-field-increment"
+      {...props}
+    >
+      {children ?? <PlusIcon />}
+    </NumberFieldPrimitive.Increment>
+  );
+}
+
+const ScrubCursorIcon = (props: React.ComponentProps<"svg">) => (
+  <svg
+    aria-hidden="true"
+    fill="black"
+    height="14"
+    stroke="white"
+    viewBox="0 0 26 14"
+    width="26"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
+  </svg>
+);
+
+function NumberFieldScrubArea({
+  className,
+  htmlFor,
+  label,
+  ...props
+}: NumberFieldPrimitive.ScrubArea.Props & {
+  htmlFor: string;
+  label: React.ReactNode;
+}) {
+  return (
+    <NumberFieldPrimitive.ScrubArea
+      className={cn(
+        "flex cursor-ew-resize touch-none select-none group-data-disabled/number-field:pointer-events-none group-data-disabled/number-field:opacity-50",
+        className,
+      )}
+      data-slot="number-field-scrub-area"
+      {...props}
+    >
+      <label
+        className="cursor-ew-resize text-sm leading-none font-medium"
+        htmlFor={htmlFor}
+      >
+        {label}
+      </label>
+      <NumberFieldPrimitive.ScrubAreaCursor
+        className="drop-shadow-sm"
+        data-slot="number-field-scrub-area-cursor"
+      >
+        <ScrubCursorIcon />
+      </NumberFieldPrimitive.ScrubAreaCursor>
+    </NumberFieldPrimitive.ScrubArea>
+  );
+}
+
+export {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldScrubArea,
+};
diff --git a/packages/vitnode/src/components/ui/pagination.test.tsx b/packages/vitnode/src/components/ui/pagination.test.tsx
new file mode 100644
index 000000000..0be4f5e1e
--- /dev/null
+++ b/packages/vitnode/src/components/ui/pagination.test.tsx
@@ -0,0 +1,89 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./pagination";
+
+const renderPagination = () =>
+  render(
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious aria-disabled role="link" />
+        </PaginationItem>
+        {[1, 2, 3].map(page => (
+          <PaginationItem key={page}>
+            <PaginationLink href={`?page=${page}`} isActive={page === 1}>
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationNext href="?page=2" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>,
+  );
+
+describe("Pagination", () => {
+  it("names every page link by its number", () => {
+    renderPagination();
+
+    expect(screen.getByRole("link", { name: "1" }).getAttribute("href")).toBe(
+      "?page=1",
+    );
+    expect(screen.getByRole("link", { name: "2" })).toBeTruthy();
+    expect(screen.getByRole("link", { name: "3" })).toBeTruthy();
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("marks only the active page as current", () => {
+    renderPagination();
+
+    expect(
+      screen.getByRole("link", { name: "1" }).getAttribute("aria-current"),
+    ).toBe("page");
+    expect(
+      screen.getByRole("link", { name: "2" }).hasAttribute("aria-current"),
+    ).toBe(false);
+  });
+
+  it("labels previous and next with translated text by default", () => {
+    renderPagination();
+
+    const next = screen.getByRole("link", {
+      name: "core.global.next_page",
+    });
+    const previous = screen.getByRole("link", {
+      name: "core.global.previous_page",
+    });
+
+    expect(next.textContent).toBe("core.global.next");
+    expect(previous.textContent).toBe("core.global.previous");
+    expect(previous.getAttribute("aria-disabled")).toBe("true");
+    expect(previous.hasAttribute("href")).toBe(false);
+  });
+
+  it("prefers custom previous and next text", () => {
+    render(
+      <>
+        <PaginationPrevious href="?page=1" text="Newer posts" />
+        <PaginationNext href="?page=3" text="Older posts" />
+      </>,
+    );
+
+    expect(
+      screen.getByRole("link", { name: "core.global.previous_page" })
+        .textContent,
+    ).toBe("Newer posts");
+    expect(
+      screen.getByRole("link", { name: "core.global.next_page" }).textContent,
+    ).toBe("Older posts");
+  });
+});
diff --git a/packages/vitnode/src/components/ui/pagination.tsx b/packages/vitnode/src/components/ui/pagination.tsx
index 3873305e4..0e0b5dde8 100644
--- a/packages/vitnode/src/components/ui/pagination.tsx
+++ b/packages/vitnode/src/components/ui/pagination.tsx
@@ -1,3 +1,5 @@
+import type { VariantProps } from "class-variance-authority";
+
 import { cn } from "cn";
 import {
   ChevronLeftIcon,
@@ -7,7 +9,7 @@ import {
 import React from "react";
 import { useTranslations } from "use-intl";
 
-import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -38,7 +40,7 @@ function PaginationItem({ ...props }: React.ComponentProps<"li">) {
   return <li data-slot="pagination-item" {...props} />;
 }
 
-type PaginationLinkProps = Pick<React.ComponentProps<typeof Button>, "size"> &
+type PaginationLinkProps = Pick<VariantProps<typeof buttonVariants>, "size"> &
   React.ComponentProps<"a"> & {
     isActive?: boolean;
   };
@@ -49,30 +51,23 @@ function PaginationLink({
   size = "icon",
   ...props
 }: PaginationLinkProps) {
-  const t = useTranslations("core.global");
-
   return (
-    <Button
-      aria-label={isActive ? t("current_page") : t("go_to_page")}
-      className={cn(className)}
-      nativeButton={false}
-      render={
-        <a
-          aria-current={isActive ? "page" : undefined}
-          data-active={isActive}
-          data-slot="pagination-link"
-          {...props}
-        />
-      }
-      size={size}
-      variant={isActive ? "outline" : "ghost"}
+    <a
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        buttonVariants({ size, variant: isActive ? "outline" : "ghost" }),
+        className,
+      )}
+      data-active={isActive}
+      data-slot="pagination-link"
+      {...props}
     />
   );
 }
 
 function PaginationPrevious({
   className,
-  text = "Previous",
+  text,
   ...props
 }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
   const t = useTranslations("core.global");
@@ -85,14 +80,14 @@ function PaginationPrevious({
       {...props}
     >
       <ChevronLeftIcon className="rtl:rotate-180" data-icon="inline-start" />
-      <span className="hidden sm:block">{text}</span>
+      <span className="hidden sm:block">{text ?? t("previous")}</span>
     </PaginationLink>
   );
 }
 
 function PaginationNext({
   className,
-  text = "Next",
+  text,
   ...props
 }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
   const t = useTranslations("core.global");
@@ -104,7 +99,7 @@ function PaginationNext({
       size="default"
       {...props}
     >
-      <span className="hidden sm:block">{text}</span>
+      <span className="hidden sm:block">{text ?? t("next")}</span>
       <ChevronRightIcon className="rtl:rotate-180" data-icon="inline-end" />
     </PaginationLink>
   );
diff --git a/packages/vitnode/src/components/ui/radio-group.tsx b/packages/vitnode/src/components/ui/radio-group.tsx
index 7e8c00b80..5d5c4bb87 100644
--- a/packages/vitnode/src/components/ui/radio-group.tsx
+++ b/packages/vitnode/src/components/ui/radio-group.tsx
@@ -20,7 +20,7 @@ function RadioGroupItem({
   return (
     <RadioPrimitive.Root
       className={cn(
-        "group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
       data-slot="radio-group-item"
diff --git a/packages/vitnode/src/components/ui/sidebar.tsx b/packages/vitnode/src/components/ui/sidebar.tsx
index 2ceda59c2..0433b99e9 100644
--- a/packages/vitnode/src/components/ui/sidebar.tsx
+++ b/packages/vitnode/src/components/ui/sidebar.tsx
@@ -20,8 +20,11 @@ import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
+  TooltipGroup,
+  TooltipGroupTrigger,
   TooltipProvider,
   TooltipTrigger,
+  useIsInTooltipGroup,
 } from "@/components/ui/tooltip";
 import { useIsMobile } from "@/hooks/use-mobile";
 
@@ -239,7 +242,9 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
         >
-          {children}
+          <TooltipGroup side={side === "left" ? "right" : "left"}>
+            {children}
+          </TooltipGroup>
         </div>
       </div>
     </div>
@@ -508,6 +513,18 @@ function SidebarMenuButton({
     tooltip?: React.ComponentProps<typeof TooltipContent> | string;
   }) {
   const { isMobile, state } = useSidebar();
+  const isInTooltipGroup = useIsInTooltipGroup();
+  const tooltipText = typeof tooltip === "string" ? tooltip : tooltip?.children;
+  const showsGroupTooltip =
+    isInTooltipGroup && !!tooltip && state === "collapsed" && !isMobile;
+
+  const getTriggerRender = () => {
+    if (!tooltip) return render;
+    if (!isInTooltipGroup) return <TooltipTrigger render={render} />;
+    if (!showsGroupTooltip) return render;
+
+    return <TooltipGroupTrigger content={tooltipText} render={render} />;
+  };
 
   const button = useRender({
     defaultTagName: "button",
@@ -517,7 +534,7 @@ function SidebarMenuButton({
       },
       props,
     ),
-    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    render: getTriggerRender(),
     state: {
       slot: "sidebar-menu-button",
       sidebar: "menu-button",
@@ -526,15 +543,12 @@ function SidebarMenuButton({
     },
   });
 
-  if (!tooltip) {
+  if (!tooltip || isInTooltipGroup) {
     return button;
   }
 
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    };
-  }
+  const tooltipProps =
+    typeof tooltip === "string" ? { children: tooltip } : tooltip;
 
   return (
     <TooltipProvider>
@@ -544,7 +558,7 @@ function SidebarMenuButton({
           align="center"
           hidden={state !== "collapsed" || isMobile}
           side="right"
-          {...tooltip}
+          {...tooltipProps}
         />
       </Tooltip>
     </TooltipProvider>
diff --git a/packages/vitnode/src/components/ui/sliding-number.test.ts b/packages/vitnode/src/components/ui/sliding-number.test.ts
new file mode 100644
index 000000000..09b18152f
--- /dev/null
+++ b/packages/vitnode/src/components/ui/sliding-number.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+
+import { digitFaceOffset, numberPlaces } from "./sliding-number";
+
+describe("digitFaceOffset", () => {
+  it("puts the current digit in view and its neighbours above and below", () => {
+    expect(digitFaceOffset(3, 3)).toBe(0);
+    expect(digitFaceOffset(4, 3)).toBe(1);
+    expect(digitFaceOffset(2, 3)).toBe(-1);
+  });
+
+  it("wraps around so 9 sits right above 0", () => {
+    expect(digitFaceOffset(9, 10)).toBe(-1);
+    expect(digitFaceOffset(0, 9)).toBe(1);
+  });
+
+  it("follows the rolled value between two digits", () => {
+    expect(digitFaceOffset(1, 0.5)).toBeCloseTo(0.5);
+  });
+});
+
+describe("numberPlaces", () => {
+  it("lists one place per digit, biggest first", () => {
+    expect(numberPlaces(0)).toEqual([1]);
+    expect(numberPlaces(7)).toEqual([1]);
+    expect(numberPlaces(1204)).toEqual([1000, 100, 10, 1]);
+  });
+
+  it("ignores the sign", () => {
+    expect(numberPlaces(-42)).toEqual([10, 1]);
+  });
+});
diff --git a/packages/vitnode/src/components/ui/sliding-number.tsx b/packages/vitnode/src/components/ui/sliding-number.tsx
new file mode 100644
index 000000000..fbab13801
--- /dev/null
+++ b/packages/vitnode/src/components/ui/sliding-number.tsx
@@ -0,0 +1,120 @@
+import { cn } from "cn";
+import {
+  AnimatePresence,
+  motion,
+  type MotionValue,
+  useReducedMotion,
+  useSpring,
+  useTransform,
+} from "motion/react";
+import React from "react";
+
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+const ROLL_SPRING = { stiffness: 220, damping: 22, mass: 0.4 };
+const PLACE_TRANSITION = { type: "spring", duration: 0.35, bounce: 0 } as const;
+
+export const digitFaceOffset = (face: number, rolled: number) => {
+  const current = ((rolled % 10) + 10) % 10;
+  const offset = (10 + face - current) % 10;
+
+  return offset > 5 ? offset - 10 : offset;
+};
+
+export const numberPlaces = (value: number) => {
+  const length = String(Math.trunc(Math.abs(value))).length;
+
+  return Array.from({ length }, (_, index) => 10 ** (length - index - 1));
+};
+
+const DigitFace = ({
+  face,
+  rolled,
+}: {
+  face: number;
+  rolled: MotionValue<number>;
+}) => {
+  const y = useTransform(rolled, latest => {
+    return `${digitFaceOffset(face, latest) * 100}%`;
+  });
+
+  return (
+    <motion.span
+      className="absolute inset-0 flex items-center justify-center"
+      style={{ y }}
+    >
+      {face}
+    </motion.span>
+  );
+};
+
+const DigitRoller = ({ place, value }: { place: number; value: number }) => {
+  const shouldReduceMotion = useReducedMotion();
+  const target = Math.floor(Math.abs(value) / place);
+  const rolled = useSpring(target, ROLL_SPRING);
+
+  React.useEffect(() => {
+    if (shouldReduceMotion) {
+      rolled.jump(target);
+
+      return;
+    }
+
+    rolled.set(target);
+  }, [rolled, shouldReduceMotion, target]);
+
+  return (
+    <span className="relative inline-block w-[1ch] overflow-y-clip">
+      <span className="invisible">0</span>
+      {DIGITS.map(face => (
+        <DigitFace face={face} key={face} rolled={rolled} />
+      ))}
+    </span>
+  );
+};
+
+function SlidingNumber({
+  className,
+  value,
+  ...props
+}: Omit<React.ComponentProps<"span">, "children"> & {
+  value: number;
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const places = numberPlaces(value);
+
+  return (
+    <span
+      className={cn("inline-flex items-center tabular-nums", className)}
+      data-slot="sliding-number"
+      {...props}
+    >
+      <span className="sr-only" data-slot="sliding-number-value">
+        {value}
+      </span>
+      <span
+        aria-hidden="true"
+        className="inline-flex items-center leading-none"
+      >
+        {value < 0 && <span>-</span>}
+        <AnimatePresence initial={false}>
+          {places.map(place => (
+            <motion.span
+              animate={{ opacity: 1, width: "auto" }}
+              className="inline-flex overflow-hidden"
+              exit={{ opacity: 0, width: 0 }}
+              initial={{ opacity: 0, width: 0 }}
+              key={place}
+              transition={
+                shouldReduceMotion ? { duration: 0 } : PLACE_TRANSITION
+              }
+            >
+              <DigitRoller place={place} value={value} />
+            </motion.span>
+          ))}
+        </AnimatePresence>
+      </span>
+    </span>
+  );
+}
+
+export { SlidingNumber };
diff --git a/packages/vitnode/src/components/ui/sonner.tsx b/packages/vitnode/src/components/ui/sonner.tsx
index e64390a53..276756292 100644
--- a/packages/vitnode/src/components/ui/sonner.tsx
+++ b/packages/vitnode/src/components/ui/sonner.tsx
@@ -1,44 +1,170 @@
+import { cn } from "cn";
 import {
   CircleCheckIcon,
   InfoIcon,
   Loader2Icon,
   OctagonXIcon,
   TriangleAlertIcon,
+  XIcon,
 } from "lucide-react";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 import { useTheme } from "../theme-provider";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+import { Button } from "./button";
 
-const Toaster = ({ ...props }: ToasterProps) => {
+type ToastClassNames = NonNullable<
+  NonNullable<ToasterProps["toastOptions"]>["classNames"]
+>;
+
+const toastClassNames: ToastClassNames = {
+  toast: cn(
+    "group/toast bg-popover text-popover-foreground flex w-(--width) items-start gap-3 rounded-2xl border p-4 shadow-lg",
+    "focus-visible:ring-ring/50 focus-visible:ring-3",
+    "*:transition-opacity *:duration-200 data-[expanded=false]:data-[front=false]:*:opacity-0 motion-reduce:*:transition-none",
+  ),
+  icon: cn(
+    "relative flex size-5 shrink-0 items-center justify-center [&>svg]:size-4",
+    "has-data-[slot=avatar]:size-9",
+    "group-data-[type=info]/toast:text-primary group-data-[type=success]/toast:text-success group-data-[type=warning]/toast:text-warn group-data-[type=error]/toast:text-destructive",
+  ),
+  content: "flex min-w-0 flex-1 flex-col gap-0.5 self-center",
+  title: cn(
+    "text-sm leading-5 font-medium text-pretty",
+    "group-data-[type=info]/toast:text-primary group-data-[type=success]/toast:text-success group-data-[type=warning]/toast:text-warn group-data-[type=error]/toast:text-destructive",
+  ),
+  description: "text-muted-foreground text-sm leading-relaxed text-pretty",
+  actionButton: cn(
+    "focus-visible:ring-ring/50 inline-flex h-7 shrink-0 cursor-pointer items-center self-center rounded-md px-2.5 text-xs font-medium transition-colors outline-none focus-visible:ring-3",
+    "bg-primary text-primary-foreground hover:bg-primary/90",
+    "group-data-[type=info]/toast:bg-primary/10 group-data-[type=info]/toast:text-primary group-data-[type=info]/toast:hover:bg-primary/20",
+    "group-data-[type=success]/toast:bg-success/10 group-data-[type=success]/toast:text-success group-data-[type=success]/toast:hover:bg-success/20",
+    "group-data-[type=warning]/toast:bg-warn/10 group-data-[type=warning]/toast:text-warn group-data-[type=warning]/toast:hover:bg-warn/20",
+    "group-data-[type=error]/toast:bg-destructive/10 group-data-[type=error]/toast:text-destructive group-data-[type=error]/toast:hover:bg-destructive/20",
+  ),
+  cancelButton:
+    "bg-secondary text-secondary-foreground hover:bg-muted inline-flex h-7 shrink-0 cursor-pointer items-center self-center rounded-md px-2.5 text-xs font-medium transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+  closeButton: cn(
+    "bg-popover text-muted-foreground hover:text-foreground absolute -end-1.5 -top-1.5 flex size-5 cursor-pointer items-center justify-center rounded-full border shadow-xs transition-opacity duration-150 outline-none [&>svg]:size-3",
+    "focus-visible:ring-ring/50 opacity-0 group-focus-within/toast:opacity-100 group-hover/toast:opacity-100 focus-visible:ring-3 motion-reduce:transition-none pointer-coarse:opacity-100",
+  ),
+};
+
+const mergeClassNames = (overrides: ToastClassNames = {}) => {
+  const merged: ToastClassNames = { ...overrides };
+
+  for (const key of Object.keys(toastClassNames) as (keyof ToastClassNames)[]) {
+    merged[key] = cn(toastClassNames[key], overrides[key]);
+  }
+
+  return merged;
+};
+
+const Toaster = ({
+  position = "top-right",
+  toastOptions,
+  ...props
+}: ToasterProps) => {
   const { theme = "system" } = useTheme();
 
   return (
     <Sonner
       className="toaster group"
       icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: <CircleCheckIcon />,
+        info: <InfoIcon />,
+        warning: <TriangleAlertIcon />,
+        error: <OctagonXIcon />,
+        loading: <Loader2Icon className="animate-spin" />,
+        close: <XIcon />,
       }}
+      position={position}
       style={
         {
           "--normal-bg": "var(--popover)",
+          "--normal-bg-hover": "var(--popover)",
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
+          "--normal-border-hover": "var(--border)",
         } as React.CSSProperties
       }
       theme={theme as ToasterProps["theme"]}
       toastOptions={{
-        classNames: {
-          toast: "cn-toast",
-        },
+        unstyled: true,
+        ...toastOptions,
+        classNames: mergeClassNames(toastOptions?.classNames),
       }}
       {...props}
     />
   );
 };
 
-export { Toaster };
+const ToastAvatar = ({
+  alt,
+  fallback,
+  size,
+  src,
+}: {
+  alt: string;
+  fallback?: React.ReactNode;
+  size?: React.ComponentProps<typeof Avatar>["size"];
+  src?: null | string;
+}) => (
+  <Avatar size={size}>
+    {src ? <AvatarImage alt={alt} src={src} /> : null}
+    <AvatarFallback>{fallback ?? alt.charAt(0).toUpperCase()}</AvatarFallback>
+  </Avatar>
+);
+
+interface ToastMessageAction {
+  label: string;
+  onClick: () => void;
+  variant?: "default" | "outline" | "secondary";
+}
+
+const ToastMessage = ({
+  actions = [],
+  avatar,
+  description,
+  time,
+  title,
+}: {
+  actions?: ToastMessageAction[];
+  avatar: React.ComponentProps<typeof ToastAvatar>;
+  description?: React.ReactNode;
+  time?: React.ReactNode;
+  title: React.ReactNode;
+}) => (
+  <div className="flex w-full items-start gap-3" data-slot="toast-message">
+    <ToastAvatar {...avatar} size="lg" />
+    <div className="flex min-w-0 flex-1 flex-col gap-1">
+      <div className="flex items-baseline justify-between gap-3">
+        <p className="truncate text-sm font-medium">{title}</p>
+        {!!time && (
+          <span className="text-muted-foreground shrink-0 text-xs">{time}</span>
+        )}
+      </div>
+      {!!description && (
+        <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
+          {description}
+        </p>
+      )}
+      {actions.length > 0 && (
+        <div className="mt-2 flex flex-wrap gap-2">
+          {actions.map(action => (
+            <Button
+              key={action.label}
+              onClick={action.onClick}
+              size="sm"
+              variant={action.variant ?? "default"}
+            >
+              {action.label}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  </div>
+);
+
+export { ToastAvatar, Toaster, ToastMessage };
diff --git a/packages/vitnode/src/components/ui/spinner.test.tsx b/packages/vitnode/src/components/ui/spinner.test.tsx
new file mode 100644
index 000000000..3682341cb
--- /dev/null
+++ b/packages/vitnode/src/components/ui/spinner.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Spinner } from "./spinner";
+
+describe("Spinner", () => {
+  it("is labelled 'Loading' in the user's language by default", () => {
+    render(<Spinner />);
+
+    expect(
+      screen.getByRole("status", { name: "core.global.loading" }),
+    ).toBeTruthy();
+  });
+
+  it("keeps a custom label", () => {
+    render(<Spinner aria-label="Searching" />);
+
+    expect(screen.getByRole("status", { name: "Searching" })).toBeTruthy();
+  });
+
+  it("can be hidden from assistive tech next to text that says it all", () => {
+    render(<Spinner aria-hidden="true" />);
+
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+});
diff --git a/packages/vitnode/src/components/ui/spinner.tsx b/packages/vitnode/src/components/ui/spinner.tsx
index 81461851d..2a3ff7221 100644
--- a/packages/vitnode/src/components/ui/spinner.tsx
+++ b/packages/vitnode/src/components/ui/spinner.tsx
@@ -1,16 +1,52 @@
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "cn";
 import { Loader2Icon } from "lucide-react";
+import { useTranslations } from "use-intl";
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <Loader2Icon
-      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
-      data-slot="spinner"
-      role="status"
-      {...props}
-    />
+const spinnerVariants = cva("shrink-0 animate-spin", {
+  variants: {
+    size: {
+      sm: "size-3",
+      default: "size-4",
+      lg: "size-6",
+      xl: "size-10",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+type SpinnerProps = React.ComponentProps<"svg"> &
+  VariantProps<typeof spinnerVariants>;
+
+const SpinnerIcon = ({ className, size, ...props }: SpinnerProps) => (
+  <Loader2Icon
+    className={cn(spinnerVariants({ size }), className)}
+    data-size={size ?? "default"}
+    data-slot="spinner"
+    role="status"
+    {...props}
+  />
+);
+
+const TranslatedSpinner = (props: SpinnerProps) => {
+  const t = useTranslations("core.global");
+
+  return <SpinnerIcon aria-label={t("loading")} {...props} />;
+};
+
+function Spinner(props: SpinnerProps) {
+  const isLabelled =
+    props["aria-label"] !== undefined ||
+    props["aria-hidden"] === true ||
+    props["aria-hidden"] === "true";
+
+  return isLabelled ? (
+    <SpinnerIcon {...props} />
+  ) : (
+    <TranslatedSpinner {...props} />
   );
 }
 
-export { Spinner };
+export { Spinner, spinnerVariants };
diff --git a/packages/vitnode/src/components/ui/switch.tsx b/packages/vitnode/src/components/ui/switch.tsx
index e36e376c1..288f525ca 100644
--- a/packages/vitnode/src/components/ui/switch.tsx
+++ b/packages/vitnode/src/components/ui/switch.tsx
@@ -1,7 +1,10 @@
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import { cn } from "cn";
+import { motion, useReducedMotion } from "motion/react";
 import React from "react";
 
+const THUMB_SPRING = { type: "spring", stiffness: 300, damping: 25 } as const;
+
 function Switch({
   className,
   size = "default",
@@ -9,10 +12,12 @@ function Switch({
 }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
   size?: "default" | "sm";
 }) {
+  const shouldReduceMotion = useReducedMotion();
+
   return (
     <SwitchPrimitive.Root
       className={cn(
-        "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center justify-start rounded-full border border-transparent shadow-xs transition-[color,background-color,box-shadow] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-checked:justify-end data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
         className,
       )}
       data-size={size}
@@ -20,8 +25,14 @@ function Switch({
       {...props}
     >
       <SwitchPrimitive.Thumb
-        className="bg-background dark:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0"
+        className="bg-background dark:bg-foreground pointer-events-none block rounded-full ring-0 transition-[width] duration-150 ease-out group-data-[size=default]/switch:h-4 group-data-[size=default]/switch:w-4 group-active/switch:not-data-disabled:group-data-[size=default]/switch:w-4.75 group-data-[size=sm]/switch:h-3 group-data-[size=sm]/switch:w-3 group-active/switch:not-data-disabled:group-data-[size=sm]/switch:w-3.5 motion-reduce:transition-none"
         data-slot="switch-thumb"
+        render={
+          <motion.span
+            layout
+            transition={shouldReduceMotion ? { duration: 0 } : THUMB_SPRING}
+          />
+        }
       />
     </SwitchPrimitive.Root>
   );
diff --git a/packages/vitnode/src/components/ui/tooltip.tsx b/packages/vitnode/src/components/ui/tooltip.tsx
index f1769d8b1..bf2fca8da 100644
--- a/packages/vitnode/src/components/ui/tooltip.tsx
+++ b/packages/vitnode/src/components/ui/tooltip.tsx
@@ -69,6 +69,12 @@ function TooltipWithContent({
   children: React.ReactElement;
   text: React.ReactNode;
 }) {
+  const isInTooltipGroup = useIsInTooltipGroup();
+
+  if (isInTooltipGroup && Object.keys(props).length === 0) {
+    return <TooltipGroupTrigger content={text} render={children} />;
+  }
+
   return (
     <TooltipProvider>
       <Tooltip>
@@ -80,10 +86,106 @@ function TooltipWithContent({
   );
 }
 
+type TooltipGroupHandle = TooltipPrimitive.Handle<React.ReactNode>;
+
+const TooltipGroupContext = React.createContext<null | TooltipGroupHandle>(
+  null,
+);
+
+const GLIDE =
+  "duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none motion-reduce:transition-none";
+
+function TooltipGroup({
+  children,
+  side = "top",
+  sideOffset = 8,
+  align = "center",
+}: Pick<TooltipPrimitive.Positioner.Props, "align" | "side" | "sideOffset"> & {
+  children: React.ReactNode;
+}) {
+  const [handle] = React.useState(() =>
+    TooltipPrimitive.createHandle<React.ReactNode>(),
+  );
+
+  return (
+    <TooltipGroupContext value={handle}>
+      {children}
+      <TooltipPrimitive.Root handle={handle}>
+        {({ payload }) => (
+          <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Positioner
+              align={align}
+              className={cn(
+                "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform]",
+                GLIDE,
+              )}
+              side={side}
+              sideOffset={sideOffset}
+            >
+              <TooltipPrimitive.Popup
+                className={cn(
+                  "bg-foreground text-background relative h-(--popup-height,auto) w-(--popup-width,auto) max-w-xs origin-(--transform-origin) rounded-md text-xs transition-[width,height,opacity,scale] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
+                  GLIDE,
+                )}
+                data-slot="tooltip-content"
+              >
+                <TooltipPrimitive.Viewport
+                  className={cn(
+                    "relative size-full overflow-clip px-3 py-1.5",
+                    "**:data-current:w-[calc(var(--popup-width)-(--spacing(6)))] **:data-previous:w-[calc(var(--popup-width)-(--spacing(6)))]",
+                    "**:data-current:transition-[translate,opacity] **:data-previous:transition-[translate,opacity]",
+                    "**:data-current:duration-300 **:data-previous:duration-300 motion-reduce:**:data-current:transition-none motion-reduce:**:data-previous:transition-none",
+                    "**:data-current:data-starting-style:opacity-0 data-[activation-direction~=left]:**:data-current:data-starting-style:-translate-x-1/2 data-[activation-direction~=right]:**:data-current:data-starting-style:translate-x-1/2",
+                    "**:data-previous:data-ending-style:opacity-0 data-[activation-direction~=left]:**:data-previous:data-ending-style:translate-x-1/2 data-[activation-direction~=right]:**:data-previous:data-ending-style:-translate-x-1/2",
+                  )}
+                  data-slot="tooltip-viewport"
+                >
+                  {payload}
+                </TooltipPrimitive.Viewport>
+                <TooltipPrimitive.Arrow
+                  className={cn(
+                    "bg-foreground z-50 size-2.5 rotate-45 rounded-[2px] transition-[left,top] data-[side=bottom]:-top-1.25 data-[side=left]:-right-1.25 data-[side=right]:-left-1.25 data-[side=top]:-bottom-1.25",
+                    GLIDE,
+                  )}
+                />
+              </TooltipPrimitive.Popup>
+            </TooltipPrimitive.Positioner>
+          </TooltipPrimitive.Portal>
+        )}
+      </TooltipPrimitive.Root>
+    </TooltipGroupContext>
+  );
+}
+
+function useIsInTooltipGroup() {
+  return React.use(TooltipGroupContext) !== null;
+}
+
+function TooltipGroupTrigger({
+  content,
+  ...props
+}: Omit<TooltipPrimitive.Trigger.Props, "content" | "handle" | "payload"> & {
+  content: React.ReactNode;
+}) {
+  const handle = React.use(TooltipGroupContext);
+
+  return (
+    <TooltipPrimitive.Trigger
+      data-slot="tooltip-trigger"
+      handle={handle ?? undefined}
+      payload={content}
+      {...props}
+    />
+  );
+}
+
 export {
   Tooltip,
   TooltipContent,
+  TooltipGroup,
+  TooltipGroupTrigger,
   TooltipProvider,
   TooltipTrigger,
   TooltipWithContent,
+  useIsInTooltipGroup,
 };
diff --git a/packages/vitnode/src/editor/properties/area-panel.tsx b/packages/vitnode/src/editor/properties/area-panel.tsx
index ac06ab93f..faf49f2a6 100644
--- a/packages/vitnode/src/editor/properties/area-panel.tsx
+++ b/packages/vitnode/src/editor/properties/area-panel.tsx
@@ -364,6 +364,7 @@ export const AreaPropertiesPanelContent = ({
             </>
           )
         }
+        icon={<Trash2Icon />}
         onOpenChange={setConfirming}
         onSubmit={({ onClose }) => {
           afterDialogExit(onClose, () => {
diff --git a/packages/vitnode/src/editor/properties/field.tsx b/packages/vitnode/src/editor/properties/field.tsx
index cf0315624..ca4740c39 100644
--- a/packages/vitnode/src/editor/properties/field.tsx
+++ b/packages/vitnode/src/editor/properties/field.tsx
@@ -9,6 +9,7 @@ import type { ContentFieldDescriptor } from "../../content/types";
 import { AutoFormDateTime } from "../../components/form/fields/date-time";
 import { AutoFormInput } from "../../components/form/fields/input";
 import { AutoFormNullableNumber } from "../../components/form/fields/nullable-number";
+import { AutoFormNumber } from "../../components/form/fields/number";
 import { AutoFormRadioGroup } from "../../components/form/fields/radio-group";
 import { AutoFormSelect } from "../../components/form/fields/select";
 import { AutoFormSwitch } from "../../components/form/fields/switch";
@@ -173,12 +174,11 @@ export const BlockPropertyField = ({
           {...props}
         />
       ) : (
-        <AutoFormInput
+        <AutoFormNumber
           label={spec.label}
           max={spec.max}
           min={spec.min}
           step={spec.integer ? 1 : "any"}
-          type="number"
           {...props}
         />
       );
diff --git a/packages/vitnode/src/editor/sidebar/footer.tsx b/packages/vitnode/src/editor/sidebar/footer.tsx
index 060c2d5b3..48b0d105f 100644
--- a/packages/vitnode/src/editor/sidebar/footer.tsx
+++ b/packages/vitnode/src/editor/sidebar/footer.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 
 import { cn } from "cn";
-import { EyeIcon, LogOutIcon, SaveIcon } from "lucide-react";
+import { EyeIcon, LogOutIcon, SaveIcon, Undo2Icon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import { ConfirmActionAlertDialog } from "@/components/confirm-action/confirm-action-alert-dialog";
@@ -100,6 +100,7 @@ export const EditorSidebarFooter = (): ReactElement => {
 
         <ConfirmActionAlertDialog
           description={t("discard_confirm")}
+          icon={<Undo2Icon />}
           onSubmit={({ onClose }) => {
             discard();
             onClose();
diff --git a/packages/vitnode/src/editor/zones/area-frame.tsx b/packages/vitnode/src/editor/zones/area-frame.tsx
index d4ca4a50a..abfc7754a 100644
--- a/packages/vitnode/src/editor/zones/area-frame.tsx
+++ b/packages/vitnode/src/editor/zones/area-frame.tsx
@@ -271,6 +271,7 @@ export const EditableAreaFrame = ({
                     </Button>
                   </span>
                 }
+                icon={<Trash2Icon />}
                 onOpenChange={setConfirming}
                 onSubmit={({ onClose }) => {
                   onClose();
diff --git a/packages/vitnode/src/framework/vite/optimize-deps.test.ts b/packages/vitnode/src/framework/vite/optimize-deps.test.ts
new file mode 100644
index 000000000..43d072530
--- /dev/null
+++ b/packages/vitnode/src/framework/vite/optimize-deps.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+
+import { postcssBrowserEmptyImports } from "./optimize-deps";
+
+const POSTCSS_INPUT =
+  "/repo/node_modules/.pnpm/postcss@8.5.28/node_modules/postcss/lib/input.js";
+
+const hooks = postcssBrowserEmptyImports() as unknown as {
+  load: { filter: { id: RegExp }; handler: (id: string) => string };
+  resolveId: {
+    filter: { id: RegExp };
+    handler: (id: string, importer: string | undefined) => null | string;
+  };
+};
+
+const resolve = (id: string, importer: string | undefined) =>
+  hooks.resolveId.filter.id.test(id)
+    ? hooks.resolveId.handler(id, importer)
+    : null;
+
+const load = (id: string) =>
+  hooks.load.filter.id.test(id) ? hooks.load.handler(id) : null;
+
+describe("postcss Node-only imports in the browser pre-bundle", () => {
+  it.each(["fs", "path", "source-map-js", "url"])(
+    "gives postcss an empty `%s` module instead of the warning stub",
+    specifier => {
+      const resolved = resolve(specifier, POSTCSS_INPUT);
+
+      expect(resolved).not.toBeNull();
+      expect(load(resolved ?? "")).toBe("module.exports = {};");
+    },
+  );
+
+  it("leaves the same imports alone for every other package", () => {
+    expect(
+      resolve("path", "/repo/node_modules/sanitize-html/index.js"),
+    ).toBeNull();
+    expect(resolve("path", undefined)).toBeNull();
+  });
+
+  it("leaves postcss's other imports alone", () => {
+    expect(resolve("nanoid/non-secure", POSTCSS_INPUT)).toBeNull();
+    expect(load("/repo/node_modules/postcss/lib/postcss.js")).toBeNull();
+  });
+});
diff --git a/packages/vitnode/src/framework/vite/optimize-deps.ts b/packages/vitnode/src/framework/vite/optimize-deps.ts
index f50109add..c4fde2590 100644
--- a/packages/vitnode/src/framework/vite/optimize-deps.ts
+++ b/packages/vitnode/src/framework/vite/optimize-deps.ts
@@ -1,4 +1,4 @@
-import type { Plugin } from "vite";
+import type { Plugin, Rolldown } from "vite";
 
 import { existsSync } from "node:fs";
 import { dirname, join } from "node:path";
@@ -118,12 +118,38 @@ export const tanStackRouterDepsInclude = (root: string): string[] =>
     includeThrough(root, owner, specifier),
   );
 
+const POSTCSS_BROWSER_EMPTY_IMPORTS = /^(?:fs|path|source-map-js|url)$/;
+const POSTCSS_IMPORTER = /[\\/]node_modules[\\/]postcss[\\/]/;
+const EMPTY_MODULE_PREFIX = "\0vitnode:browser-empty:";
+
+export const postcssBrowserEmptyImports = (): Rolldown.Plugin => ({
+  load: {
+    filter: { id: new RegExp(`^${EMPTY_MODULE_PREFIX}`) },
+    handler: () => "module.exports = {};",
+  },
+  name: "vitnode:postcss-browser-empty-imports",
+  resolveId: {
+    filter: { id: POSTCSS_BROWSER_EMPTY_IMPORTS },
+    handler: (id, importer) =>
+      importer && POSTCSS_IMPORTER.test(importer)
+        ? `${EMPTY_MODULE_PREFIX}${id}`
+        : null,
+  },
+});
+
 export const vitNodeOptimizeDeps = (): Plugin => ({
   apply: "serve",
   config: userConfig => {
     const root = userConfig.root ?? process.cwd();
 
     return {
+      environments: {
+        client: {
+          optimizeDeps: {
+            rolldownOptions: { plugins: [postcssBrowserEmptyImports()] },
+          },
+        },
+      },
       optimizeDeps: {
         include: [
           ...vitNodeClientDepsInclude(root),
diff --git a/packages/vitnode/src/hooks/use-intersection-observer.test.ts b/packages/vitnode/src/hooks/use-intersection-observer.test.ts
new file mode 100644
index 000000000..a308fd30e
--- /dev/null
+++ b/packages/vitnode/src/hooks/use-intersection-observer.test.ts
@@ -0,0 +1,117 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useIntersectionObserver } from "./use-intersection-observer";
+
+class FakeIntersectionObserver {
+  constructor(
+    callback: IntersectionObserverCallback,
+    options: IntersectionObserverInit,
+  ) {
+    this.callback = callback;
+    this.options = options;
+    FakeIntersectionObserver.instances.push(this);
+  }
+  static instances: FakeIntersectionObserver[] = [];
+  readonly callback: IntersectionObserverCallback;
+  readonly disconnect = vi.fn();
+  readonly observed: Element[] = [];
+  readonly options: IntersectionObserverInit;
+
+  observe(element: Element) {
+    this.observed.push(element);
+  }
+
+  trigger(isIntersecting: boolean) {
+    this.callback(
+      [{ isIntersecting } as IntersectionObserverEntry],
+      this as unknown as IntersectionObserver,
+    );
+  }
+}
+
+const latestObserver = () => FakeIntersectionObserver.instances.at(-1);
+
+describe("useIntersectionObserver", () => {
+  const element = document.createElement("div");
+  const ref = { current: element };
+
+  beforeEach(() => {
+    FakeIntersectionObserver.instances = [];
+    vi.stubGlobal("IntersectionObserver", FakeIntersectionObserver);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("observes the element with the given options", () => {
+    renderHook(() =>
+      useIntersectionObserver(ref, { rootMargin: "20px", threshold: 0.5 }),
+    );
+
+    expect(latestObserver()?.observed).toEqual([element]);
+    expect(latestObserver()?.options).toMatchObject({
+      rootMargin: "20px",
+      threshold: [0.5],
+    });
+  });
+
+  it("returns the latest entry", () => {
+    const { result } = renderHook(() => useIntersectionObserver(ref));
+
+    expect(result.current).toBeUndefined();
+
+    act(() => {
+      latestObserver()?.trigger(true);
+    });
+    expect(result.current?.isIntersecting).toBe(true);
+
+    act(() => {
+      latestObserver()?.trigger(false);
+    });
+    expect(result.current?.isIntersecting).toBe(false);
+  });
+
+  it("does not re-create the observer for a new threshold array", () => {
+    const { rerender } = renderHook(() =>
+      useIntersectionObserver(ref, { threshold: [0, 0.5, 1] }),
+    );
+
+    rerender();
+
+    expect(FakeIntersectionObserver.instances).toHaveLength(1);
+  });
+
+  it("stops observing once visible when freezeOnceVisible is set", () => {
+    const { result } = renderHook(() =>
+      useIntersectionObserver(ref, { freezeOnceVisible: true }),
+    );
+    const observer = latestObserver();
+
+    act(() => {
+      observer?.trigger(true);
+    });
+
+    expect(observer?.disconnect).toHaveBeenCalled();
+    expect(FakeIntersectionObserver.instances).toHaveLength(1);
+    expect(result.current?.isIntersecting).toBe(true);
+  });
+
+  it("disconnects on unmount", () => {
+    const { unmount } = renderHook(() => useIntersectionObserver(ref));
+
+    unmount();
+
+    expect(latestObserver()?.disconnect).toHaveBeenCalled();
+  });
+
+  it("does nothing when the browser has no IntersectionObserver", () => {
+    vi.unstubAllGlobals();
+
+    const { result } = renderHook(() => useIntersectionObserver(ref));
+
+    expect("IntersectionObserver" in window).toBe(false);
+    expect(result.current).toBeUndefined();
+  });
+});
diff --git a/packages/vitnode/src/hooks/use-intersection-observer.ts b/packages/vitnode/src/hooks/use-intersection-observer.ts
new file mode 100644
index 000000000..a520d4a5c
--- /dev/null
+++ b/packages/vitnode/src/hooks/use-intersection-observer.ts
@@ -0,0 +1,45 @@
+import React from "react";
+
+interface UseIntersectionObserverOptions {
+  freezeOnceVisible?: boolean;
+  root?: Element | null;
+  rootMargin?: string;
+  threshold?: number | number[];
+}
+
+export function useIntersectionObserver(
+  elementRef: React.RefObject<Element | null>,
+  {
+    threshold = 0,
+    root = null,
+    rootMargin = "0%",
+    freezeOnceVisible = false,
+  }: UseIntersectionObserverOptions = {},
+): IntersectionObserverEntry | undefined {
+  const [entry, setEntry] = React.useState<IntersectionObserverEntry>();
+  const isFrozen = freezeOnceVisible && !!entry?.isIntersecting;
+  const thresholdKey = Array.isArray(threshold)
+    ? threshold.join(",")
+    : String(threshold);
+
+  React.useEffect(() => {
+    const node = elementRef.current;
+
+    if (!node || isFrozen || !("IntersectionObserver" in window)) return;
+
+    const observer = new IntersectionObserver(
+      ([nextEntry]) => {
+        setEntry(nextEntry);
+      },
+      { root, rootMargin, threshold: thresholdKey.split(",").map(Number) },
+    );
+
+    observer.observe(node);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [elementRef, isFrozen, root, rootMargin, thresholdKey]);
+
+  return entry;
+}
diff --git a/packages/vitnode/src/hooks/use-local-storage.test.ts b/packages/vitnode/src/hooks/use-local-storage.test.ts
new file mode 100644
index 000000000..8c6c8021a
--- /dev/null
+++ b/packages/vitnode/src/hooks/use-local-storage.test.ts
@@ -0,0 +1,108 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { useLocalStorage } from "./use-local-storage";
+
+describe("useLocalStorage", () => {
+  afterEach(() => {
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("returns the default value when nothing is stored", () => {
+    const { result } = renderHook(() => useLocalStorage("theme", "light"));
+
+    expect(result.current[0]).toBe("light");
+    expect(window.localStorage.getItem("theme")).toBeNull();
+  });
+
+  it("reads a value that is already stored", () => {
+    window.localStorage.setItem("count", "5");
+
+    const { result } = renderHook(() => useLocalStorage("count", 0));
+
+    expect(result.current[0]).toBe(5);
+  });
+
+  it("persists new values as JSON", () => {
+    const { result } = renderHook(() =>
+      useLocalStorage("user", { name: "Ada" }),
+    );
+
+    act(() => {
+      result.current[1]({ name: "Grace" });
+    });
+
+    expect(result.current[0]).toEqual({ name: "Grace" });
+    expect(window.localStorage.getItem("user")).toBe('{"name":"Grace"}');
+  });
+
+  it("passes the latest value to an updater function", () => {
+    const { result } = renderHook(() => useLocalStorage("count", 0));
+
+    act(() => {
+      result.current[1](previous => previous + 1);
+      result.current[1](previous => previous + 1);
+    });
+
+    expect(result.current[0]).toBe(2);
+  });
+
+  it("keeps hooks with the same key in sync", () => {
+    const first = renderHook(() => useLocalStorage("count", 0));
+    const second = renderHook(() => useLocalStorage("count", 0));
+
+    act(() => {
+      first.result.current[1](7);
+    });
+
+    expect(second.result.current[0]).toBe(7);
+  });
+
+  it("picks up changes made in another tab", () => {
+    const { result } = renderHook(() => useLocalStorage("count", 0));
+
+    act(() => {
+      window.localStorage.setItem("count", "3");
+      window.dispatchEvent(new StorageEvent("storage", { key: "count" }));
+    });
+
+    expect(result.current[0]).toBe(3);
+  });
+
+  it("falls back to the default when the stored value is not JSON", () => {
+    window.localStorage.setItem("count", "not json");
+
+    const { result } = renderHook(() => useLocalStorage("count", 0));
+
+    expect(result.current[0]).toBe(0);
+  });
+
+  it("removes the value and goes back to the default", () => {
+    window.localStorage.setItem("count", "9");
+    const { result } = renderHook(() => useLocalStorage("count", 0));
+
+    act(() => {
+      result.current[2]();
+    });
+
+    expect(result.current[0]).toBe(0);
+    expect(window.localStorage.getItem("count")).toBeNull();
+  });
+
+  it("keeps working in memory when storage is unavailable", () => {
+    vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+      throw new Error("SecurityError");
+    });
+    vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+      throw new Error("QuotaExceededError");
+    });
+    const { result } = renderHook(() => useLocalStorage("blocked", "a"));
+
+    act(() => {
+      result.current[1]("b");
+    });
+
+    expect(result.current[0]).toBe("b");
+  });
+});
diff --git a/packages/vitnode/src/hooks/use-local-storage.ts b/packages/vitnode/src/hooks/use-local-storage.ts
new file mode 100644
index 000000000..396803182
--- /dev/null
+++ b/packages/vitnode/src/hooks/use-local-storage.ts
@@ -0,0 +1,87 @@
+import React from "react";
+
+type SetLocalStorageValue<T> = (value: ((previous: T) => T) | T) => void;
+
+const memoryFallback = new Map<string, string>();
+
+const readRaw = (key: string): null | string => {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return memoryFallback.get(key) ?? null;
+  }
+};
+
+const writeRaw = (key: string, raw: null | string) => {
+  try {
+    if (raw === null) {
+      window.localStorage.removeItem(key);
+    } else {
+      window.localStorage.setItem(key, raw);
+    }
+  } catch {
+    if (raw === null) {
+      memoryFallback.delete(key);
+    } else {
+      memoryFallback.set(key, raw);
+    }
+  }
+
+  window.dispatchEvent(new StorageEvent("storage", { key }));
+};
+
+const missing = Symbol("missing");
+
+const parse = (raw: null | string): unknown => {
+  if (raw === null) return missing;
+
+  try {
+    return JSON.parse(raw) as unknown;
+  } catch {
+    return missing;
+  }
+};
+
+const valueOrDefault = <T>(parsed: unknown, defaultValue: T): T =>
+  parsed === missing ? defaultValue : (parsed as T);
+
+const subscribe = (onChange: () => void) => {
+  window.addEventListener("storage", onChange);
+
+  return () => {
+    window.removeEventListener("storage", onChange);
+  };
+};
+
+const getServerSnapshot = () => null;
+
+export function useLocalStorage<T>(
+  key: string,
+  defaultValue: T,
+): [T, SetLocalStorageValue<T>, () => void] {
+  const raw = React.useSyncExternalStore(
+    subscribe,
+    () => readRaw(key),
+    getServerSnapshot,
+  );
+  const parsed = React.useMemo(() => parse(raw), [raw]);
+  const value = valueOrDefault(parsed, defaultValue);
+
+  const setValue: SetLocalStorageValue<T> = React.useCallback(
+    next => {
+      const resolved =
+        next instanceof Function
+          ? next(valueOrDefault(parse(readRaw(key)), defaultValue))
+          : next;
+
+      writeRaw(key, JSON.stringify(resolved));
+    },
+    [key, defaultValue],
+  );
+
+  const removeValue = React.useCallback(() => {
+    writeRaw(key, null);
+  }, [key]);
+
+  return [value, setValue, removeValue];
+}
diff --git a/packages/vitnode/src/lib/helpers/auto-form.test.ts b/packages/vitnode/src/lib/helpers/auto-form.test.ts
index 24c87ce05..b05ee12a3 100644
--- a/packages/vitnode/src/lib/helpers/auto-form.test.ts
+++ b/packages/vitnode/src/lib/helpers/auto-form.test.ts
@@ -202,6 +202,20 @@ describe("auto-form helpers", () => {
       expect(result.role).toHaveProperty("required", true);
     });
 
+    it("exposes the enum of an array of enums on the array field", () => {
+      const zodSchema = z.object({
+        tags: z.array(z.enum(["news", "guides", "releases"])),
+      });
+
+      const result = getZodInputParams(z.toJSONSchema(zodSchema));
+
+      expect(result.tags).toHaveProperty("enum", [
+        "news",
+        "guides",
+        "releases",
+      ]);
+    });
+
     it("should handle complex password validation", () => {
       const zodSchema = z.object({
         password: z
diff --git a/packages/vitnode/src/lib/helpers/auto-form.ts b/packages/vitnode/src/lib/helpers/auto-form.ts
index 1f54cc86e..825c19bcc 100644
--- a/packages/vitnode/src/lib/helpers/auto-form.ts
+++ b/packages/vitnode/src/lib/helpers/auto-form.ts
@@ -138,6 +138,9 @@ export function getZodInputParams(
         fieldParams.itemParams = {
           "": getZodInputParams({ properties: { "": items } }, [])[""],
         };
+        if (items.enum) {
+          fieldParams.enum = items.enum;
+        }
       }
       extractedParams[key] = fieldParams;
     } else {
diff --git a/packages/vitnode/src/locales/en.json b/packages/vitnode/src/locales/en.json
index e7e80768e..f3158ad4d 100644
--- a/packages/vitnode/src/locales/en.json
+++ b/packages/vitnode/src/locales/en.json
@@ -144,6 +144,14 @@
     "global": {
       "close": "Close",
       "confirm": "Confirm",
+      "clear": "Clear",
+      "comparison_slider": "Comparison slider",
+      "copy": "Copy",
+      "decrease": "Decrease",
+      "increase": "Increase",
+      "copied": "Copied",
+      "copy_failed": "Couldn't copy to the clipboard. Try selecting the text instead.",
+      "more_count": "+{count} more",
       "previous": "Previous",
       "next": "Next",
       "current_page": "Current page",
@@ -332,12 +340,26 @@
       },
       "search_placeholder": "Search...",
       "results_not_found": "No results found",
-      "selected_count": "{count} selected",
+      "selected_count": "<number>{count}</number> selected",
       "clear_filters": "Clear filters",
       "data_table": {
         "select_all": "Select all rows",
         "select_row": "Select row",
-        "clear_selection": "Clear selection"
+        "clear_selection": "Clear selection",
+        "expand_row": "Expand row",
+        "collapse_row": "Collapse row",
+        "row_details": "Row details",
+        "reorder_column": "Reorder",
+        "reorder_row": "Reorder {name}",
+        "row_fallback": "row {position}",
+        "reorder_instructions": "Press space bar or enter to pick up a row. Use the arrow keys to move it. Press space bar or enter again to drop it in its new place, or escape to cancel.",
+        "reorder_started": "Picked up {name}. It is in place {position} of {total}.",
+        "reorder_over": "{name} moved to place {position} of {total}.",
+        "reorder_ended": "Dropped {name} in place {position} of {total}.",
+        "reorder_cancelled": "Reordering cancelled. {name} is back in place {position} of {total}.",
+        "reorder_unavailable": "Clear the search, filters and sorting to reorder rows.",
+        "reorder_failed": "Could not save the new order",
+        "reorder_failed_desc": "The rows are back where they were. Try again in a moment."
       },
       "date": "{date, date}",
       "date_medium": "{date, date, medium}",
diff --git a/packages/vitnode/src/tanstack/admin/content/row-actions.tsx b/packages/vitnode/src/tanstack/admin/content/row-actions.tsx
index ae28a6998..d24a1649c 100644
--- a/packages/vitnode/src/tanstack/admin/content/row-actions.tsx
+++ b/packages/vitnode/src/tanstack/admin/content/row-actions.tsx
@@ -131,6 +131,7 @@ const PublishRowAction = ({
               <span className="text-foreground font-bold">{title}</span>
             ),
           })}
+          icon={<Icon />}
           onSubmit={async ({ onClose }) => {
             const result = await setContentPublication(queryClient, {
               action,
@@ -398,6 +399,7 @@ const ContentRowActionsMenu = ({
             ),
           })}
           finalFocus={triggerRef}
+          icon={<Trash2Icon />}
           onOpenChange={closePanel}
           onSubmit={async ({ onClose }) => {
             const result = await deleteContentRow(queryClient, {
diff --git a/packages/vitnode/src/tanstack/auth/sso-screen.tsx b/packages/vitnode/src/tanstack/auth/sso-screen.tsx
index 5e4277d7c..7925fa69b 100644
--- a/packages/vitnode/src/tanstack/auth/sso-screen.tsx
+++ b/packages/vitnode/src/tanstack/auth/sso-screen.tsx
@@ -2,7 +2,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "@tanstack/react-router";
 import { useTranslations } from "use-intl";
 
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 import { ssoConnectionIntentOfState } from "@/lib/sso-profile";
 import { ssoConnectionCallbackTarget } from "@/views/auth/settings/sso/connection-callback";
 import { useSsoConnectionNotice } from "@/views/auth/settings/sso/connection-notice";
@@ -44,7 +44,9 @@ const SsoConnectionCallbackPending = ({
       className="container mx-auto flex flex-col items-center justify-center gap-4 p-4"
       role="status"
     >
-      <Loader />
+      <div className="flex items-center justify-center">
+        <Spinner size="xl" />
+      </div>
       <p className="text-muted-foreground text-sm leading-relaxed">
         {t("pending", { provider: providerName })}
       </p>
diff --git a/packages/vitnode/src/views/admin/views/content/actions/content-panel.tsx b/packages/vitnode/src/views/admin/views/content/actions/content-panel.tsx
index 0dede13ba..2d4c757f4 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/content-panel.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/content-panel.tsx
@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 
 export interface ContentPanelProps {
   finalFocus?: React.RefObject<HTMLElement | null>;
@@ -36,7 +36,15 @@ export const ContentPanel = ({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
 
-      <React.Suspense fallback={<Loader />}>{children}</React.Suspense>
+      <React.Suspense
+        fallback={
+          <div className="flex items-center justify-center">
+            <Spinner size="xl" />
+          </div>
+        }
+      >
+        {children}
+      </React.Suspense>
     </DialogContent>
   </Dialog>
 );
diff --git a/packages/vitnode/src/views/admin/views/content/actions/delivery/delivery-panel.tsx b/packages/vitnode/src/views/admin/views/content/actions/delivery/delivery-panel.tsx
index f088666ff..8780c5118 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/delivery/delivery-panel.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/delivery/delivery-panel.tsx
@@ -4,7 +4,7 @@ import { useTranslations } from "use-intl";
 
 import { DateFormat } from "@/components/date-format";
 import { Badge } from "@/components/ui/badge";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 
 import { contentDeliveryQueryOptions } from "../editorial-query";
 import { useContentEditorialTransport } from "../editorial-transport";
@@ -29,7 +29,12 @@ export const DeliveryPanel = ({
     }),
   );
 
-  if (isPending) return <Loader />;
+  if (isPending)
+    return (
+      <div className="flex items-center justify-center">
+        <Spinner size="xl" />
+      </div>
+    );
 
   if (!data?.data) {
     return (
diff --git a/packages/vitnode/src/views/admin/views/content/actions/history/revision-history.tsx b/packages/vitnode/src/views/admin/views/content/actions/history/revision-history.tsx
index ad3b77d43..141ef4e2d 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/history/revision-history.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/history/revision-history.tsx
@@ -7,7 +7,7 @@ import type { ContentFormSpec } from "@/content/admin/spec";
 
 import { useAdminStaffPermission } from "@/components/staff-permission/provider";
 import { Button } from "@/components/ui/button";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 import { CONTENT_PERMISSIONS } from "@/content/const";
 
 import { useContentFormNavigation } from "../../form/navigation";
@@ -65,7 +65,9 @@ export const RevisionHistory = ({
   if (history.isPending) {
     return (
       <HistoryNotice>
-        <Loader />
+        <div className="flex items-center justify-center">
+          <Spinner size="xl" />
+        </div>
       </HistoryNotice>
     );
   }
diff --git a/packages/vitnode/src/views/admin/views/content/actions/history/revision-row.tsx b/packages/vitnode/src/views/admin/views/content/actions/history/revision-row.tsx
index 7cda91907..96a9c70ad 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/history/revision-row.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/history/revision-row.tsx
@@ -15,7 +15,7 @@ import { ConfirmActionAlertDialog } from "@/components/confirm-action/confirm-ac
 import { DateFormat } from "@/components/date-format";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 
 import { contentErrorKey } from "../../lib/mutation-feedback";
 import { contentRevisionQueryOptions } from "../editorial-query";
@@ -209,6 +209,7 @@ export const RevisionRow = ({
                   ),
                   version: revision.version,
                 })}
+                icon={<RotateCcwIcon />}
                 onSubmit={async ({ onClose }) => {
                   const mutation = await transport.restoreRevision(
                     contentTypeId,
@@ -282,7 +283,7 @@ export const RevisionRow = ({
               </p>
             ) : (
               <div className="text-muted-foreground flex justify-center py-2">
-                <Loader small />
+                <Spinner />
               </div>
             )}
           </div>
diff --git a/packages/vitnode/src/views/admin/views/content/actions/preview-action.tsx b/packages/vitnode/src/views/admin/views/content/actions/preview-action.tsx
index 72e2ef3e1..85acc0c6a 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/preview-action.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/preview-action.tsx
@@ -1,10 +1,11 @@
-import { CheckIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
 import { toast } from "sonner";
 import { useTranslations } from "use-intl";
 
 import { DateFormat } from "@/components/date-format";
 import { Button } from "@/components/ui/button";
+import { CopyButton } from "@/components/ui/copy-button";
 
 import type { ContentPanelProps } from "./content-panel";
 import type { ContentPreviewLink } from "./editorial-api";
@@ -13,44 +14,6 @@ import { contentErrorKey } from "../lib/mutation-feedback";
 import { ContentPanel } from "./content-panel";
 import { useContentEditorialTransport } from "./editorial-transport";
 
-const COPIED_FEEDBACK_MS = 2000;
-
-const CopyButton = ({ label, url }: { label: string; url: string }) => {
-  const [copied, setCopied] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!copied) return;
-
-    const timer = setTimeout(() => {
-      setCopied(false);
-    }, COPIED_FEEDBACK_MS);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [copied]);
-
-  return (
-    <Button
-      aria-label={label}
-      onClick={() => {
-        void navigator.clipboard.writeText(url).then(() => {
-          setCopied(true);
-        });
-      }}
-      size="icon"
-      type="button"
-      variant="outline"
-    >
-      {copied ? (
-        <CheckIcon className="size-4" />
-      ) : (
-        <CopyIcon className="size-4" />
-      )}
-    </Button>
-  );
-};
-
 const PreviewLink = ({
   contentTypeId,
   id,
@@ -108,7 +71,7 @@ const PreviewLink = ({
           readOnly
           value={preview.url}
         />
-        <CopyButton label={t("copy")} url={preview.url} />
+        <CopyButton aria-label={t("copy")} content={preview.url} />
       </div>
 
       <div className="flex flex-wrap items-center justify-between gap-2">
diff --git a/packages/vitnode/src/views/admin/views/content/actions/schedule/schedule-panel.tsx b/packages/vitnode/src/views/admin/views/content/actions/schedule/schedule-panel.tsx
index 428bb6925..c872677a5 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/schedule/schedule-panel.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/schedule/schedule-panel.tsx
@@ -15,7 +15,7 @@ import { AutoFormSelect } from "@/components/form/fields/select";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 import { contentScheduleTimingError } from "@/content/schedules";
 
 import { contentErrorKey } from "../../lib/mutation-feedback";
@@ -136,7 +136,12 @@ export const SchedulePanel = ({
     });
   };
 
-  if (schedules.isPending) return <Loader />;
+  if (schedules.isPending)
+    return (
+      <div className="flex items-center justify-center">
+        <Spinner size="xl" />
+      </div>
+    );
 
   const edges = schedules.data?.edges ?? [];
   const pending = edges.filter(entry => entry.status === "pending");
diff --git a/packages/vitnode/src/views/admin/views/content/form/primitives.tsx b/packages/vitnode/src/views/admin/views/content/form/primitives.tsx
index 5d00831a0..9214d7b66 100644
--- a/packages/vitnode/src/views/admin/views/content/form/primitives.tsx
+++ b/packages/vitnode/src/views/admin/views/content/form/primitives.tsx
@@ -78,6 +78,7 @@ const ContentFormPublicationToggle = () => {
           <span className="text-foreground font-bold">{title ?? singular}</span>
         ),
       })}
+      icon={<Icon />}
       onSubmit={async ({ onClose }) => {
         if (await transition(action)) onClose();
       }}
diff --git a/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx b/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx
index 28f3cf65a..c01b01504 100644
--- a/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx
+++ b/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx
@@ -13,6 +13,7 @@ import { AutoFormFile } from "@/components/form/fields/file";
 import { AutoFormFiles } from "@/components/form/fields/files";
 import { AutoFormInput } from "@/components/form/fields/input";
 import { AutoFormNullableNumber } from "@/components/form/fields/nullable-number";
+import { AutoFormNumber } from "@/components/form/fields/number";
 import { AutoFormRadioGroup } from "@/components/form/fields/radio-group";
 import { AutoFormSelect } from "@/components/form/fields/select";
 import { AutoFormSwitch } from "@/components/form/fields/switch";
@@ -160,12 +161,11 @@ export const ContentField = ({
           {...props}
         />
       ) : (
-        <AutoFormInput
+        <AutoFormNumber
           label={spec.label}
           max={spec.max}
           min={spec.min}
           step={spec.integer ? 1 : "any"}
-          type="number"
           {...props}
         />
       );
diff --git a/packages/vitnode/src/views/admin/views/core/advanced/search/remove-documents-action.tsx b/packages/vitnode/src/views/admin/views/core/advanced/search/remove-documents-action.tsx
index a51a6dc97..39575b5ad 100644
--- a/packages/vitnode/src/views/admin/views/core/advanced/search/remove-documents-action.tsx
+++ b/packages/vitnode/src/views/admin/views/core/advanced/search/remove-documents-action.tsx
@@ -21,6 +21,7 @@ export const RemoveCollectionDocumentsAction = ({
   return (
     <ConfirmActionAlertDialog
       description={t("removeConfirmDescription")}
+      icon={<Trash2Icon />}
       onSubmit={async ({ onClose }) => {
         const result = await onClear(itemType);
 
diff --git a/packages/vitnode/src/views/admin/views/core/dashboard/grid/widget-properties.tsx b/packages/vitnode/src/views/admin/views/core/dashboard/grid/widget-properties.tsx
index f6bcc7d34..c7f0ce167 100644
--- a/packages/vitnode/src/views/admin/views/core/dashboard/grid/widget-properties.tsx
+++ b/packages/vitnode/src/views/admin/views/core/dashboard/grid/widget-properties.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from "use-intl";
 
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { TooltipWithContent } from "@/components/ui/tooltip";
 
@@ -148,7 +148,13 @@ const WidgetSettingsSection = ({ widget }: { widget: DashboardWidgetView }) => {
 
   return (
     <WidgetSettingsDialogContext value={value}>
-      <React.Suspense fallback={<Loader />}>
+      <React.Suspense
+        fallback={
+          <div className="flex items-center justify-center">
+            <Spinner size="xl" />
+          </div>
+        }
+      >
         <SettingsForm form={form} />
       </React.Suspense>
     </WidgetSettingsDialogContext>
diff --git a/packages/vitnode/src/views/admin/views/core/debug/actions/clear-cache/clear-cache.tsx b/packages/vitnode/src/views/admin/views/core/debug/actions/clear-cache/clear-cache.tsx
index 24c0c99db..473cc5a58 100644
--- a/packages/vitnode/src/views/admin/views/core/debug/actions/clear-cache/clear-cache.tsx
+++ b/packages/vitnode/src/views/admin/views/core/debug/actions/clear-cache/clear-cache.tsx
@@ -16,6 +16,7 @@ export const ClearCacheAction = ({
   return (
     <ConfirmActionAlertDialog
       description={t("desc")}
+      icon={<BrushCleaningIcon />}
       onSubmit={async ({ onClose }) => {
         try {
           await onClearCache();
diff --git a/packages/vitnode/src/views/admin/views/core/debug/system-logs/actions/more/more.tsx b/packages/vitnode/src/views/admin/views/core/debug/system-logs/actions/more/more.tsx
index ec20e4c85..398c3d097 100644
--- a/packages/vitnode/src/views/admin/views/core/debug/system-logs/actions/more/more.tsx
+++ b/packages/vitnode/src/views/admin/views/core/debug/system-logs/actions/more/more.tsx
@@ -11,7 +11,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 import { TooltipWithContent } from "@/components/ui/tooltip";
 
 const ContentMoreActionSystemLogs = React.lazy(async () =>
@@ -50,7 +50,13 @@ export const MoreActionSystemLogs = (
           </DialogDescription>
         </DialogHeader>
 
-        <React.Suspense fallback={<Loader />}>
+        <React.Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner size="xl" />
+            </div>
+          }
+        >
           <ContentMoreActionSystemLogs {...props} />
         </React.Suspense>
       </DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/navigation/navigation-create-dialog.tsx b/packages/vitnode/src/views/admin/views/core/navigation/navigation-create-dialog.tsx
index 36173bd88..929edff2f 100644
--- a/packages/vitnode/src/views/admin/views/core/navigation/navigation-create-dialog.tsx
+++ b/packages/vitnode/src/views/admin/views/core/navigation/navigation-create-dialog.tsx
@@ -24,7 +24,7 @@ import {
   useDialog,
 } from "@/components/ui/dialog";
 import { EmojiIcon } from "@/components/ui/emoji-icon";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 import { TooltipWithContent } from "@/components/ui/tooltip";
 import { parseEmojiIcon } from "@/lib/emoji-icon";
 import {
@@ -263,7 +263,13 @@ const NavigationCreateDetailsStep = ({
         </DialogDescription>
       </DialogHeader>
 
-      <React.Suspense fallback={<Loader />}>
+      <React.Suspense
+        fallback={
+          <div className="flex items-center justify-center">
+            <Spinner size="xl" />
+          </div>
+        }
+      >
         <AdminNavigationFormContent
           items={items}
           kind={choice.kind}
diff --git a/packages/vitnode/src/views/admin/views/core/navigation/navigation-list-content.tsx b/packages/vitnode/src/views/admin/views/core/navigation/navigation-list-content.tsx
index 7d708de1d..c696b957e 100644
--- a/packages/vitnode/src/views/admin/views/core/navigation/navigation-list-content.tsx
+++ b/packages/vitnode/src/views/admin/views/core/navigation/navigation-list-content.tsx
@@ -80,13 +80,14 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from "@/components/ui/empty";
-import { Loader } from "@/components/ui/loader";
 import {
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
+import { SlidingNumber } from "@/components/ui/sliding-number";
+import { Spinner } from "@/components/ui/spinner";
 import { TooltipWithContent } from "@/components/ui/tooltip";
 import { parseEmojiIcon } from "@/lib/emoji-icon";
 import {
@@ -446,8 +447,8 @@ const SortableNavigationRow = ({
         {name}
       </span>
       {isCollapsed && childCount > 0 ? (
-        <Badge className="tabular-nums" variant="secondary">
-          {childCount}
+        <Badge variant="secondary">
+          <SlidingNumber value={childCount} />
         </Badge>
       ) : null}
       {item.isOpenInNewTab && !isMissing ? (
@@ -632,7 +633,13 @@ const NavigationEditSheetBody = ({
         <SheetDescription className="truncate">{name}</SheetDescription>
       </SheetHeader>
 
-      <React.Suspense fallback={<Loader />}>
+      <React.Suspense
+        fallback={
+          <div className="flex items-center justify-center">
+            <Spinner size="xl" />
+          </div>
+        }
+      >
         <AdminNavigationFormContent
           data={item}
           items={items}
diff --git a/packages/vitnode/src/views/admin/views/core/staff/table/staff-table-content.tsx b/packages/vitnode/src/views/admin/views/core/staff/table/staff-table-content.tsx
index 87250a949..cb7e170b4 100644
--- a/packages/vitnode/src/views/admin/views/core/staff/table/staff-table-content.tsx
+++ b/packages/vitnode/src/views/admin/views/core/staff/table/staff-table-content.tsx
@@ -83,6 +83,7 @@ const StaffRowActions = ({
       {canDelete && (
         <ConfirmActionAlertDialog
           description={t("delete.desc")}
+          icon={<Trash2Icon />}
           onSubmit={async ({ onClose }) => {
             const result = await onDelete({ id: row.id, type });
             if ("error" in result) {
diff --git a/packages/vitnode/src/views/admin/views/core/system/files/actions/file-row-actions.tsx b/packages/vitnode/src/views/admin/views/core/system/files/actions/file-row-actions.tsx
index 7d436ec1c..01275d589 100644
--- a/packages/vitnode/src/views/admin/views/core/system/files/actions/file-row-actions.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/files/actions/file-row-actions.tsx
@@ -96,6 +96,7 @@ export const FileRowActions = ({
                 })
               : t("delete.desc")
           }
+          icon={<Trash2Icon />}
           onOpenChange={open => {
             if (!open) setHeldByRevisions(null);
           }}
diff --git a/packages/vitnode/src/views/admin/views/core/system/files/actions/files-bulk-actions.tsx b/packages/vitnode/src/views/admin/views/core/system/files/actions/files-bulk-actions.tsx
index 75357abb6..9b3d67a6a 100644
--- a/packages/vitnode/src/views/admin/views/core/system/files/actions/files-bulk-actions.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/files/actions/files-bulk-actions.tsx
@@ -50,6 +50,7 @@ export const FilesBulkActions = ({
           ? t("bulk_delete.in_use.revisions.desc", { count: ids.length })
           : t("bulk_delete.desc", { count: ids.length })
       }
+      icon={<Trash2Icon />}
       onOpenChange={open => {
         if (!open) setHeldByRevisions([]);
       }}
diff --git a/packages/vitnode/src/views/admin/views/core/system/integrations/send-test-email/send-test-email.tsx b/packages/vitnode/src/views/admin/views/core/system/integrations/send-test-email/send-test-email.tsx
index 908c8c909..6222df580 100644
--- a/packages/vitnode/src/views/admin/views/core/system/integrations/send-test-email/send-test-email.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/integrations/send-test-email/send-test-email.tsx
@@ -11,7 +11,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 
 import type { SendTestEmail } from "./send-test-email-mutation";
 
@@ -40,7 +40,13 @@ export const SendTestEmailAction = ({ onSend }: { onSend: SendTestEmail }) => {
           <DialogDescription>{t("desc")}</DialogDescription>
         </DialogHeader>
 
-        <React.Suspense fallback={<Loader />}>
+        <React.Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner size="xl" />
+            </div>
+          }
+        >
           <ContentSendTestEmail onSend={onSend} />
         </React.Suspense>
       </DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/system/integrations/test-ai/test-ai.tsx b/packages/vitnode/src/views/admin/views/core/system/integrations/test-ai/test-ai.tsx
index 1e94a1323..f160711c6 100644
--- a/packages/vitnode/src/views/admin/views/core/system/integrations/test-ai/test-ai.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/integrations/test-ai/test-ai.tsx
@@ -11,7 +11,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 
 const ContentTestAI = React.lazy(async () =>
   import("./content").then(module => ({
@@ -43,7 +43,13 @@ export const TestAIAction = ({ models }: { models: TestAIModel[] }) => {
           <DialogDescription>{t("desc")}</DialogDescription>
         </DialogHeader>
 
-        <React.Suspense fallback={<Loader />}>
+        <React.Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner size="xl" />
+            </div>
+          }
+        >
           <ContentTestAI models={models} />
         </React.Suspense>
       </DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/system/integrations/test-storage/test-storage.tsx b/packages/vitnode/src/views/admin/views/core/system/integrations/test-storage/test-storage.tsx
index 03c78d192..8a55c5cd2 100644
--- a/packages/vitnode/src/views/admin/views/core/system/integrations/test-storage/test-storage.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/integrations/test-storage/test-storage.tsx
@@ -11,7 +11,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 
 const ContentTestStorage = React.lazy(async () =>
   import("./content").then(module => ({
@@ -38,7 +38,13 @@ export const TestStorageAction = () => {
           <DialogDescription>{t("desc")}</DialogDescription>
         </DialogHeader>
 
-        <React.Suspense fallback={<Loader />}>
+        <React.Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner size="xl" />
+            </div>
+          }
+        >
           <ContentTestStorage />
         </React.Suspense>
       </DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/users/list/create-user-content.tsx b/packages/vitnode/src/views/admin/views/core/users/list/create-user-content.tsx
index 11dfdca1b..f5dc871df 100644
--- a/packages/vitnode/src/views/admin/views/core/users/list/create-user-content.tsx
+++ b/packages/vitnode/src/views/admin/views/core/users/list/create-user-content.tsx
@@ -17,7 +17,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 
 export type CreateAdminUser = (
   input: AdminUserCreateInput,
@@ -52,7 +52,13 @@ export const CreateUserAdminContent = ({
           <DialogDescription>{t("desc")}</DialogDescription>
         </DialogHeader>
 
-        <React.Suspense fallback={<Loader />}>
+        <React.Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner size="xl" />
+            </div>
+          }
+        >
           <CreateUserForm onCreate={onCreate} />
         </React.Suspense>
       </DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/users/roles/roles-table-content.tsx b/packages/vitnode/src/views/admin/views/core/users/roles/roles-table-content.tsx
index a5049af47..edd8e9f0d 100644
--- a/packages/vitnode/src/views/admin/views/core/users/roles/roles-table-content.tsx
+++ b/packages/vitnode/src/views/admin/views/core/users/roles/roles-table-content.tsx
@@ -47,7 +47,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
 import {
   Popover,
   PopoverContent,
@@ -319,7 +318,13 @@ const EditRoleAction = ({
           <DialogTitle>{t("title")}</DialogTitle>
         </DialogHeader>
 
-        <React.Suspense fallback={<Loader />}>
+        <React.Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner size="xl" />
+            </div>
+          }
+        >
           <AdminRoleFormContent data={role} onSave={onSave} onSaved={onSaved} />
         </React.Suspense>
       </DialogContent>
@@ -396,7 +401,13 @@ export const CreateRoleAction = ({
           <DialogDescription>{t("desc")}</DialogDescription>
         </DialogHeader>
 
-        <React.Suspense fallback={<Loader />}>
+        <React.Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner size="xl" />
+            </div>
+          }
+        >
           <AdminRoleFormContent onSave={onSave} onSaved={onSaved} />
         </React.Suspense>
       </DialogContent>
diff --git a/packages/vitnode/src/views/auth/settings/devices/revoke-device-button.tsx b/packages/vitnode/src/views/auth/settings/devices/revoke-device-button.tsx
index 682a1203e..a3be2487e 100644
--- a/packages/vitnode/src/views/auth/settings/devices/revoke-device-button.tsx
+++ b/packages/vitnode/src/views/auth/settings/devices/revoke-device-button.tsx
@@ -30,6 +30,7 @@ export const RevokeDeviceButton = ({
       <Tooltip>
         <ConfirmActionAlertDialog
           description={t("desc", { os })}
+          icon={<LogOutIcon />}
           onSubmit={async ({ onClose }) => {
             const result = await onRevoke({ publicId });
 
diff --git a/packages/vitnode/src/views/auth/settings/passkeys/delete-passkey-button.tsx b/packages/vitnode/src/views/auth/settings/passkeys/delete-passkey-button.tsx
index 3b2a93aa2..f54fed5c6 100644
--- a/packages/vitnode/src/views/auth/settings/passkeys/delete-passkey-button.tsx
+++ b/packages/vitnode/src/views/auth/settings/passkeys/delete-passkey-button.tsx
@@ -32,6 +32,7 @@ export const DeletePasskeyButton = ({
       <Tooltip>
         <ConfirmActionAlertDialog
           description={t("delete.desc", { name })}
+          icon={<Trash2Icon />}
           onSubmit={async ({ onClose }) => {
             const result = await onDelete({ id });
 
diff --git a/packages/vitnode/src/views/auth/settings/sso/disconnect-sso-button.tsx b/packages/vitnode/src/views/auth/settings/sso/disconnect-sso-button.tsx
index e63655a4a..6a534fbb9 100644
--- a/packages/vitnode/src/views/auth/settings/sso/disconnect-sso-button.tsx
+++ b/packages/vitnode/src/views/auth/settings/sso/disconnect-sso-button.tsx
@@ -32,6 +32,7 @@ export const DisconnectSsoButton = ({
           </span>
         </span>
       }
+      icon={<UnlinkIcon />}
       onSubmit={async ({ onClose }) => {
         const result = await onDisconnect({ providerId });
 
diff --git a/packages/vitnode/src/views/auth/sso/callback/sso-callback-content.tsx b/packages/vitnode/src/views/auth/sso/callback/sso-callback-content.tsx
index f60edc353..ca63b96f6 100644
--- a/packages/vitnode/src/views/auth/sso/callback/sso-callback-content.tsx
+++ b/packages/vitnode/src/views/auth/sso/callback/sso-callback-content.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from "use-intl";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardDescription } from "@/components/ui/card";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
 import { ErrorContent } from "@/views/error/error-content";
 
 import type { SSOLinkSubmit } from "../link/sso-link-form-content";
@@ -123,7 +123,9 @@ export const SSOCallbackContent = ({
 
   return (
     <div className="container mx-auto flex items-center justify-center p-4">
-      <Loader />
+      <div className="flex items-center justify-center">
+        <Spinner size="xl" />
+      </div>
     </div>
   );
 };
diff --git a/packages/vitnode/src/views/files/actions/file-row-actions.tsx b/packages/vitnode/src/views/files/actions/file-row-actions.tsx
index 666dc8394..864579912 100644
--- a/packages/vitnode/src/views/files/actions/file-row-actions.tsx
+++ b/packages/vitnode/src/views/files/actions/file-row-actions.tsx
@@ -85,6 +85,7 @@ export const MyFileRowActions = ({
               })
             : t("delete.desc")
         }
+        icon={<Trash2Icon />}
         onOpenChange={open => {
           if (!open) setHeldByRevisions(null);
         }}
diff --git a/packages/vitnode/src/views/files/actions/files-bulk-actions.tsx b/packages/vitnode/src/views/files/actions/files-bulk-actions.tsx
index 53a14f9e0..4ccce5c54 100644
--- a/packages/vitnode/src/views/files/actions/files-bulk-actions.tsx
+++ b/packages/vitnode/src/views/files/actions/files-bulk-actions.tsx
@@ -50,6 +50,7 @@ export const MyFilesBulkActions = ({
           ? t("bulk_delete.in_use.revisions.desc", { count: ids.length })
           : t("bulk_delete.desc", { count: ids.length })
       }
+      icon={<Trash2Icon />}
       onOpenChange={open => {
         if (!open) setHeldByRevisions([]);
       }}
diff --git a/packages/vitnode/src/views/layouts/providers.tsx b/packages/vitnode/src/views/layouts/providers.tsx
index 3eac33675..467dbfc38 100644
--- a/packages/vitnode/src/views/layouts/providers.tsx
+++ b/packages/vitnode/src/views/layouts/providers.tsx
@@ -47,11 +47,7 @@ export const VitNodeProviders = ({
       enableSystem
       {...theme}
     >
-      <Toaster
-        closeButton
-        position={toaster?.position ?? "top-center"}
-        {...toaster}
-      />
+      <Toaster closeButton {...toaster} />
       <RateLimitListener />
       <TooltipProvider>
         <LanguagesProvider languages={locales}>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 66bbb32c7..0ba94dc37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -212,6 +212,9 @@ importers:
       react-dom:
         specifier: ^19.3.0
         version: 19.3.0(react@19.3.0)
+      recharts:
+        specifier: ^3.10.1
+        version: 3.10.1(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react-is@17.0.2)(react@19.3.0)(redux@5.0.1)
       shadcn:
         specifier: ^4.21.0
         version: 4.21.0(typescript@6.0.3)
@@ -12902,7 +12905,7 @@ snapshots:
       immer: 11.1.18
       redux: 5.0.1
       redux-thunk: 3.1.0(redux@5.0.1)
-      reselect: 5.2.0
+      reselect: 5.3.0
     optionalDependencies:
       react: 19.3.0
       react-redux: 9.3.0(@types/react@19.3.0)(react@19.3.0)(redux@5.0.1)

From c965f85d71b7209cdca52905ae11b77b6081bc8d Mon Sep 17 00:00:00 2001
From: aXenDeveloper <axen@vitnode.com>
Date: Fri, 2 Oct 2026 23:09:43 +0200
Subject: [PATCH 2/3] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20Improve=20docu?=
 =?UTF-8?q?mentation=20clarity=20and=20consistency=20across=20UI=20compone?=
 =?UTF-8?q?nts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/content/docs/ui/attachment.mdx       | 48 ++++++++++---------
 apps/web/content/docs/ui/avatar.mdx           |  8 ++--
 apps/web/content/docs/ui/bubble.mdx           | 12 ++---
 apps/web/content/docs/ui/button-group.mdx     | 24 +++++-----
 apps/web/content/docs/ui/carousel.mdx         | 11 ++---
 apps/web/content/docs/ui/cascader.mdx         | 24 +++++-----
 apps/web/content/docs/ui/chart.mdx            | 12 ++---
 apps/web/content/docs/ui/combobox.mdx         | 16 +++----
 apps/web/content/docs/ui/command.mdx          |  8 ++--
 apps/web/content/docs/ui/comparison.mdx       | 13 ++---
 apps/web/content/docs/ui/context-menu.mdx     | 14 +++---
 apps/web/content/docs/ui/copy-button.mdx      | 18 +++----
 apps/web/content/docs/ui/counter.mdx          | 12 ++---
 .../docs/ui/data-table/bulk-actions.mdx       |  6 +--
 .../docs/ui/data-table/draggable-rows.mdx     |  8 ++--
 .../docs/ui/data-table/expandable-rows.mdx    |  6 +--
 .../content/docs/ui/data-table/filters.mdx    |  2 +-
 apps/web/content/docs/ui/data-table/index.mdx | 30 ++++++------
 .../content/docs/ui/data-table/pagination.mdx | 10 ++--
 .../web/content/docs/ui/data-table/search.mdx |  6 +--
 apps/web/content/docs/ui/dialog.mdx           |  4 +-
 apps/web/content/docs/ui/empty.mdx            | 32 +++++++------
 apps/web/content/docs/ui/field.mdx            | 34 ++++++-------
 .../ui/hooks/use-intersection-observer.mdx    |  8 ++--
 .../docs/ui/hooks/use-local-storage.mdx       |  4 +-
 apps/web/content/docs/ui/image-zoom.mdx       |  6 +--
 apps/web/content/docs/ui/input-otp.mdx        | 12 ++---
 apps/web/content/docs/ui/item.mdx             | 43 +++++++++--------
 apps/web/content/docs/ui/kbd.mdx              | 15 +++---
 apps/web/content/docs/ui/label.mdx            | 22 ++++-----
 apps/web/content/docs/ui/marker.mdx           | 12 ++---
 apps/web/content/docs/ui/menubar.mdx          | 14 +++---
 apps/web/content/docs/ui/message.mdx          |  4 +-
 apps/web/content/docs/ui/nullable-number.mdx  | 17 ++++---
 apps/web/content/docs/ui/number-field.mdx     | 24 +++++-----
 apps/web/content/docs/ui/pagination.mdx       |  4 +-
 apps/web/content/docs/ui/resizable.mdx        | 18 +++----
 apps/web/content/docs/ui/scroll-fade.mdx      | 16 +++----
 apps/web/content/docs/ui/shimmer.mdx          | 14 +++---
 apps/web/content/docs/ui/spinner.mdx          | 10 ++--
 apps/web/content/docs/ui/toast.mdx            | 24 +++++-----
 apps/web/content/docs/ui/tooltip.mdx          | 14 +++---
 .../src/docs/examples/data-table-filters.tsx  |  1 +
 .../docs/examples/data-table-pagination.tsx   |  5 +-
 .../src/docs/examples/data-table-search.tsx   |  1 +
 apps/web/src/docs/local-table-data.ts         | 22 +++++----
 apps/web/src/docs/preview-data-table.tsx      | 24 +++++-----
 .../tiptap/toolbar/actions/bold-action.tsx    |  6 +--
 .../toolbar/actions/code-block-action.tsx     |  6 +--
 .../tiptap/toolbar/actions/color-action.tsx   |  6 +--
 .../tiptap/toolbar/actions/emoji-action.tsx   |  7 ++-
 .../tiptap/toolbar/actions/insert-action.tsx  |  6 +--
 .../tiptap/toolbar/actions/italic-action.tsx  |  6 +--
 .../tiptap/toolbar/actions/link-action.tsx    |  6 +--
 .../tiptap/toolbar/actions/list-action.tsx    | 14 +++---
 .../text-format-more/text-format-more.tsx     |  6 +--
 .../toolbar/actions/utils/toolbar-tooltip.tsx |  9 ----
 .../src/components/ui/alert-dialog.tsx        | 21 --------
 .../vitnode/src/components/ui/cascader.tsx    | 31 +++++-------
 .../vitnode/src/components/ui/comparison.tsx  |  3 +-
 .../vitnode/src/components/ui/counter.tsx     |  2 +-
 .../vitnode/src/components/ui/spinner.tsx     |  2 +-
 62 files changed, 399 insertions(+), 424 deletions(-)
 delete mode 100644 packages/vitnode/src/components/tiptap/toolbar/actions/utils/toolbar-tooltip.tsx

diff --git a/apps/web/content/docs/ui/attachment.mdx b/apps/web/content/docs/ui/attachment.mdx
index 8b9390888..a48d82e41 100644
--- a/apps/web/content/docs/ui/attachment.mdx
+++ b/apps/web/content/docs/ui/attachment.mdx
@@ -1,6 +1,6 @@
 ---
 title: Attachment
-description: File uploads with drag and drop, progress, previews and errors - from a single avatar to a sortable gallery.
+description: Upload one file or a sortable gallery, with drag and drop, progress, previews and errors.
 icon: Paperclip
 ---
 
@@ -25,8 +25,8 @@ import { AutoFormFile } from '@vitnode/core/components/form/fields/file'
 import { AutoFormFiles } from '@vitnode/core/components/form/fields/files'
 ```
 
-The form stores **file ids**, not the files themselves - a number for a single
-file and an array of numbers for many:
+The form stores **file ids**, not the files themselves. One file is a number,
+many files are an array of numbers:
 
 ```ts
 const formSchema = z.object({
@@ -125,37 +125,39 @@ const uploadFile = async (file: File): Promise<AutoFormFileValue> => {
 }
 ```
 
-When editing something that already has files, pass them in so the field can
-show their names and previews: `file={existing}` on `AutoFormFile`, or
-`files={existing}` on `AutoFormFiles`.
+Editing something that already has files? Pass them in with `file={existing}`
+on `AutoFormFile` or `files={existing}` on `AutoFormFiles`, and the field shows
+their names and previews.
 
 ## Limits
 
 Both fields check files **before** uploading, so nobody waits for a 2 GB video
 just to hear it was too big:
 
-- `maxBytes` - the largest accepted file, required.
-- `allowedExtensions` - lowercase with a leading dot, like `['.pdf', '.png']`.
-- `allowedMimeTypes` - for example `['image/png', 'application/pdf']`.
+- `maxBytes` sets the largest accepted file. It is required.
+- `allowedExtensions` takes lowercase extensions with a leading dot, like
+  `['.pdf', '.png']`.
+- `allowedMimeTypes` takes MIME types, for example
+  `['image/png', 'application/pdf']`.
 
-`AutoFormFiles` also takes `maxItems` and `minItems`. Files can be reordered by
-dragging or with the keyboard; pass `ordered={false}` when the order doesn't
+`AutoFormFiles` also takes `maxItems` and `minItems`. People can reorder files
+by dragging or with the keyboard. Pass `ordered={false}` when the order doesn't
 matter.
 
-Your server should check the same limits again - the browser only saves people
-a wasted upload, it can't stop someone determined.
+Check the same limits again on your server. The browser check saves people a
+wasted upload, but it can't stop someone determined.
 
 ## States
 
 Set `state` on `Attachment` to match what the file is doing:
 
-| State        | Looks like                                     |
-| ------------ | ---------------------------------------------- |
-| `done`       | The default - a finished file                  |
-| `idle`       | Dashed border, waiting for a file              |
-| `uploading`  | Shimmering title, dimmed preview               |
-| `processing` | Same as uploading, for server-side work        |
-| `error`      | Red border and description - say what went wrong |
+| State        | Looks like                                       |
+| ------------ | ------------------------------------------------ |
+| `done`       | The default, a finished file                     |
+| `idle`       | Dashed border, waiting for a file                |
+| `uploading`  | Shimmering title, dimmed preview                 |
+| `processing` | Same as uploading, for server-side work          |
+| `error`      | Red border and description. Say what went wrong. |
 
 ## Layouts
 
@@ -164,13 +166,13 @@ Set `state` on `Attachment` to match what the file is doing:
 - `size="sm"` or `size="xs"` shrink it for chat composers and tight lists.
 - Wrap several in `AttachmentGroup` for a horizontally scrolling row that fades
   out at the edges.
-- `AttachmentTrigger` makes the whole attachment clickable - render it as a link
-  to open the file.
+- `AttachmentTrigger` makes the whole attachment clickable. Render it as a link to
+  open the file.
 
 ## Accessibility
 
 - Give every `AttachmentAction` an `aria-label` that names the file, like
-  "Remove report.pdf" - "Remove" alone is a riddle when there are five files.
+  "Remove report.pdf". "Remove" alone is a riddle when there are five files.
 - Previews in `AttachmentMedia` are decorative next to the file name, so
   `alt=""` is right.
 - The AutoForm fields announce reordering to screen readers and show every
diff --git a/apps/web/content/docs/ui/avatar.mdx b/apps/web/content/docs/ui/avatar.mdx
index e4b273f7b..82b7e8f92 100644
--- a/apps/web/content/docs/ui/avatar.mdx
+++ b/apps/web/content/docs/ui/avatar.mdx
@@ -1,6 +1,6 @@
 ---
 title: Avatar
-description: Profile pictures with a graceful fallback, status badges and groups that lift on hover.
+description: Profile pictures with a fallback for missing images, status badges and groups that lift on hover.
 icon: CircleUserRound
 ---
 
@@ -25,7 +25,7 @@ import {
 </Avatar>
 ```
 
-The fallback shows while the image loads and stays if it never arrives - so a
+The fallback shows while the image loads and stays if it never arrives. A
 broken link turns into tidy initials instead of a sad empty circle.
 
 ## Sizes
@@ -49,7 +49,7 @@ semantic one:
 </Avatar>
 ```
 
-A coloured dot alone doesn't tell everyone that someone is online - say it in
+A coloured dot alone doesn't tell everyone that someone is online. Say it in
 text somewhere too, or give the badge an `aria-label`.
 
 ## Group
@@ -88,7 +88,7 @@ no hover effect.
 
 ## Accessibility
 
-- Always pass `alt` to `AvatarImage` - the person's name is usually perfect.
+- Always pass `alt` to `AvatarImage`. The person's name is usually perfect.
 - An `AvatarGroupItem` with a `label` can be focused with the keyboard, and the
   tooltip appears on focus as well as on hover.
 - With reduced motion turned on, avatars in a group stay put and only the
diff --git a/apps/web/content/docs/ui/bubble.mdx b/apps/web/content/docs/ui/bubble.mdx
index a08fac019..dcb7921a3 100644
--- a/apps/web/content/docs/ui/bubble.mdx
+++ b/apps/web/content/docs/ui/bubble.mdx
@@ -59,8 +59,8 @@ BubbleGroup
 
 ## Alignment
 
-Messages you sent go on the right, everything else on the left - just like
-every chat app you have ever used.
+Messages you sent go on the right, everything else on the left, like every
+chat app you have ever used.
 
 ```tsx
 <Bubble align="end">
@@ -102,8 +102,8 @@ leave a bit more `gap` between rows.
 
 ## Links and buttons
 
-Use `render` on `BubbleContent` to turn a bubble into a real link or button -
-perfect for quick reply suggestions.
+Use `render` on `BubbleContent` to turn a bubble into a real link or button,
+such as a quick reply suggestion.
 
 ```tsx
 <Bubble variant="outline">
@@ -140,8 +140,8 @@ bubble inside follows it to the end side.
   instead.
 - Clickable bubbles should be a real `<button>` or `<a>` via `render`. They get
   a visible focus ring and take their accessible name from the text.
-- Variants signal tone with color - keep the meaning in the text too, especially
-  for `destructive` bubbles.
+- Variants signal tone with color, so keep the meaning in the text too,
+  especially for `destructive` bubbles.
 
 ## Props
 
diff --git a/apps/web/content/docs/ui/button-group.mdx b/apps/web/content/docs/ui/button-group.mdx
index ea4392091..e1fbee6d5 100644
--- a/apps/web/content/docs/ui/button-group.mdx
+++ b/apps/web/content/docs/ui/button-group.mdx
@@ -27,7 +27,7 @@ import {
 ```
 
 The group squashes the inner borders and rounds only the outer corners, so a
-handful of buttons reads as one control. No extra props on the buttons - they
+handful of buttons reads as one control. The buttons need no extra props. They
 just know they are in a group.
 
 ## Orientation
@@ -48,8 +48,8 @@ map, less great for a full sentence.
 
 ## Nested groups
 
-Put groups inside a group and they get a small gap between them - the classic
-toolbar look.
+Put groups inside a group and they get a small gap between them. That's the
+classic toolbar look.
 
 ```tsx
 <ButtonGroup aria-label="Message actions">
@@ -68,8 +68,8 @@ toolbar look.
 ## Separator
 
 Outline buttons already have borders to divide them. Variants without a border,
-like `secondary`, look like one big blob - add a `ButtonGroupSeparator` between
-them.
+like `secondary`, merge into one big blob, so add a `ButtonGroupSeparator`
+between them.
 
 ```tsx
 <ButtonGroup aria-label="Text alignment">
@@ -85,7 +85,7 @@ them.
 
 ## With text
 
-`ButtonGroupText` renders a non-interactive segment, perfect for a counter or a
+`ButtonGroupText` renders a non-interactive segment, like a counter or a
 prefix. Use `render` to swap the element, for example to a `<label>`.
 
 ```tsx
@@ -117,8 +117,8 @@ snug on the end.
 ## With dropdown menu
 
 Pair a button with a [Dropdown Menu](/docs/ui/dropdown-menu) trigger to build a
-split button: the main action on the left, the "but also..." options on the
-right.
+split button, with the main action on the left and the "but also..." options on
+the right.
 
 ```tsx
 <ButtonGroup>
@@ -141,7 +141,7 @@ right.
 
 ## Sizes
 
-The group follows the size of its buttons - use the same `size` on every button
+The group follows the size of its buttons. Use the same `size` on every button
 in it so the heights match.
 
 ```tsx
@@ -159,14 +159,14 @@ in it so the heights match.
 
 - The group renders with `role="group"`. Give it an `aria-label` (or
   `aria-labelledby`) so screen readers announce what the buttons are for.
-- Icon-only buttons need their own `aria-label` - the `Button` types will remind
+- Icon-only buttons need their own `aria-label`. The `Button` types will remind
   you if you forget.
 - A focused button is lifted above its neighbours, so the focus ring is never
   hidden behind the next segment.
 - Borders and corners use logical properties, so groups flip correctly in
   right-to-left languages.
-- Need a single selected option, like a segmented control? Reach for
-  [Toggle Group](/docs/ui/toggle-group) instead - it handles the pressed state
+- Need a single selected option, like a segmented control? Use
+  [Toggle Group](/docs/ui/toggle-group) instead. It handles the pressed state
   for you.
 
 ## Props
diff --git a/apps/web/content/docs/ui/carousel.mdx b/apps/web/content/docs/ui/carousel.mdx
index 6425b24e7..106eb035a 100644
--- a/apps/web/content/docs/ui/carousel.mdx
+++ b/apps/web/content/docs/ui/carousel.mdx
@@ -32,9 +32,8 @@ import {
 </Carousel>
 ```
 
-Swipe it, drag it, or click the arrows - [Embla Carousel](https://www.embla-carousel.com)
-does the heavy lifting, so the motion feels like a native app and not a slideshow
-from 2009.
+Swipe it, drag it or click the arrows. [Embla Carousel](https://www.embla-carousel.com)
+does the heavy lifting, so it moves like a native app and not a slideshow from 2009.
 
 By default the arrows sit just outside the slides, so leave some room around
 the carousel (for example `px-12`). On narrow screens, move them into a row of
@@ -42,7 +41,7 @@ their own with `static translate-y-0`, like the preview does.
 
 ## Sizes
 
-Each `CarouselItem` takes the full width. Change it with a `basis-*` class -
+Each `CarouselItem` takes the full width. Change it with a `basis-*` class,
 responsive ones included.
 
 ```tsx
@@ -98,7 +97,7 @@ free-scrolling feel.
 <Carousel opts={{ align: 'start', loop: true }}>...</Carousel>
 ```
 
-For a right-to-left page, tell Embla too - the layout flips on its own, but the
+For a right-to-left page, tell Embla too. The layout flips on its own, but the
 scroll math needs the hint:
 
 ```tsx
@@ -178,7 +177,7 @@ export const Slideshow = () => (
 ```
 
 Keep `stopOnInteraction` on, and skip autoplay for people who prefer reduced
-motion - nobody likes chasing a slide that runs away.
+motion. Nobody likes chasing a slide that runs away.
 
 ## Accessibility
 
diff --git a/apps/web/content/docs/ui/cascader.mdx b/apps/web/content/docs/ui/cascader.mdx
index 359edfb77..ac79d5d16 100644
--- a/apps/web/content/docs/ui/cascader.mdx
+++ b/apps/web/content/docs/ui/cascader.mdx
@@ -1,6 +1,6 @@
 ---
 title: Cascader
-description: Pick one option from a tree - continent, then country, then city - drilling in one level at a time.
+description: Pick one option from a tree, one level at a time. Think continent, then country, then city.
 icon: ListTree
 ---
 
@@ -110,31 +110,31 @@ as well as the city:
 
 ## Search
 
-`searchable` adds a search box that looks through every leaf at once - type
+`searchable` adds a search box that looks through every leaf at once. Type
 "krak" and "Europe / Poland / Kraków" is one click away. Accents don't matter,
 so "sao" finds São Paulo.
 
 ## Drill down or columns
 
-By default, clicking a branch **replaces the list** with its children - the
-next level slides in, and a back button at the top takes you up again. It keeps
-the popup the width of the field, wherever it sits.
+By default, clicking a branch **replaces the list** with its children. The
+next level slides in, and a back button at the top takes you up again. The popup
+stays the width of the field, wherever it sits.
 
 Prefer to see every level at once? `layout="columns"` opens each level in a new
-column beside the last one, and the popup grows smoothly to make room:
+column beside the last one, and the popup widens to make room:
 
 ```tsx
 <Cascader layout="columns" options={locations} />
 ```
 
 In the columns layout you can also open branches on hover with
-`expandTrigger="hover"`. On phones the cascader always drills down - there's no
-room for columns on a 375px screen.
+`expandTrigger="hover"`. On phones the cascader always drills down, because there's
+no room for columns on a 375px screen.
 
 ## Transitions
 
-Each level slides in from the side it came from - forward when you go deeper,
-back when you return - and in the columns layout the popup's width animates as
+Each level slides in from the direction you moved, forward when you go deeper
+and back when you return. In the columns layout, the popup's width animates as
 columns open. With reduced motion turned on, everything switches instantly.
 
 ## Accessibility
@@ -145,8 +145,8 @@ columns open. With reduced motion turned on, everything switches instantly.
   <kbd>Escape</kbd> to close.
 - Branches tell screen readers whether they're open, and the picked path is
   marked as selected.
-- Give the cascader a label - `AutoFormCascader` does it for you; on its own,
-  use `aria-labelledby`.
+- Give the cascader a label. `AutoFormCascader` does it for you, and a
+  standalone `Cascader` needs `aria-labelledby`.
 
 ## Props
 
diff --git a/apps/web/content/docs/ui/chart.mdx b/apps/web/content/docs/ui/chart.mdx
index 9f34ee637..0858781f9 100644
--- a/apps/web/content/docs/ui/chart.mdx
+++ b/apps/web/content/docs/ui/chart.mdx
@@ -1,6 +1,6 @@
 ---
 title: Chart
-description: Beautiful, themeable charts built on Recharts - bar, area, line and friends, with tooltips and legends that match the rest of your UI.
+description: Bar, area, line and any other Recharts chart, with tooltips, legends and colours that follow your theme.
 icon: ChartColumn
 ---
 
@@ -132,7 +132,7 @@ to that one chart. Use it anywhere Recharts takes a colour:
 ```
 
 It works in Tailwind classes too, for example `fill-(--color-desktop)`. Two or
-three colours per chart is plenty - your readers have eyes, not a rainbow
+three colours per chart is plenty. Your readers have eyes, not a rainbow
 decoder ring.
 
 ## Area chart
@@ -248,19 +248,19 @@ import {
 <ChartLegend content={<ChartLegendContent />} />
 ```
 
-Use `nameKey` to read legend labels from another key - handy for pie charts,
-where each slice is a row in your data rather than a series.
+Use `nameKey` to read legend labels from another key. That's handy for pie
+charts, where each slice is a row in your data rather than a series.
 
 ## Accessibility
 
 - `accessibilityLayer` adds ARIA attributes and keyboard support. Tab to a
-  chart, then use the arrow keys to move between points - the tooltip follows
+  chart and use the arrow keys to move between points. The tooltip follows
   along. It is on by default in Recharts 3, but writing it out makes the
   intent clear.
 - Give each chart a `title` and a `desc`. Recharts renders them as the SVG's
   `<title>` and `<desc>`, so screen readers get more than "graphic".
 - Keep a visible heading next to the chart (a `CardTitle` works well), and
-  never rely on colour alone - labels in the tooltip and legend tell series
+  never rely on colour alone. Labels in the tooltip and legend tell series
   apart for everyone.
 
 ## API Reference
diff --git a/apps/web/content/docs/ui/combobox.mdx b/apps/web/content/docs/ui/combobox.mdx
index db167896e..699b8a2c1 100644
--- a/apps/web/content/docs/ui/combobox.mdx
+++ b/apps/web/content/docs/ui/combobox.mdx
@@ -162,7 +162,7 @@ export function ComboboxBasic() {
 
 <Preview name="combobox-groups" />
 
-Give options a `group` and they're sorted under headings - handy once a list
+Give options a `group` and they're sorted under headings. Handy once a list
 gets long enough to scroll. `showClear` adds an × that empties the field in one
 click.
 
@@ -188,22 +188,22 @@ a `group` gather at the top with no heading.
 
 Pass `multiple` and use an array in the schema. Picked options pop in as
 chips, and removing one shrinks it away while the rest slide over to close the
-gap - the box keeps its width and simply wraps onto a new line when it's full.
+gap. The box keeps its width and wraps onto a new line when it's full.
 With reduced motion turned on, chips just appear and disappear.
 
 ### Limit visible chips
 
 Picked a dozen tags? Set `maxVisibleChips` and only the first few show, followed
-by a "+N more" chip that counts the rest. Every pick is still saved - the
-limit is purely visual.
+by a "+N more" chip that counts the rest. Every pick is still saved. The
+limit is only visual.
 
 ```tsx
 <AutoFormCombobox {...props} labels={topics} maxVisibleChips={3} multiple />
 ```
 
-Keyboard tips: <kbd>Backspace</kbd> in an empty search removes the last chip,
-and <kbd>Escape</kbd> with the list closed clears every pick - that's the
-standard combobox pattern, so it's worth knowing before you press it twice.
+Press <kbd>Backspace</kbd> in an empty search to remove the last chip, or
+<kbd>Escape</kbd> with the list closed to clear every pick. That's the
+standard combobox pattern, and worth knowing before you hit Escape twice.
 
 <Tabs items={['Auto Form', 'Manual']}>
   <Tab value="Auto Form">
@@ -231,7 +231,7 @@ const formSchema = z.object({
 ```
 
 `.min()` and `.max()` on the array become the validation messages, and
-`fetchData` works with `multiple` too - the value is then an array of
+`fetchData` works with `multiple` too. The value is then an array of
 `{ value, label }` objects.
 
   </Tab>
diff --git a/apps/web/content/docs/ui/command.mdx b/apps/web/content/docs/ui/command.mdx
index 2607aa655..c419f0342 100644
--- a/apps/web/content/docs/ui/command.mdx
+++ b/apps/web/content/docs/ui/command.mdx
@@ -1,6 +1,6 @@
 ---
 title: Command
-description: A fast, composable command menu with search, groups and keyboard navigation - the "just type it" escape hatch for your app.
+description: A command menu with search, groups and keyboard navigation. It's the "just type it" escape hatch for your app.
 icon: Command
 ---
 
@@ -36,7 +36,7 @@ import {
 </Command>
 ```
 
-Start typing and the list filters itself, ranking the best matches first.
+Start typing and the list filters itself and ranks the best matches first.
 Groups with nothing left to show politely step aside. It is built on
 [cmdk](https://cmdk.paco.me), so every cmdk prop works here too.
 
@@ -58,7 +58,7 @@ Wrap related items in a `CommandGroup` with a `heading`, and drop a
 ## Icons and shortcuts
 
 Icons go first and are sized for you. `CommandShortcut` pushes a hint to the
-end of the row. It is just a label - wiring the actual shortcut is up to you.
+end of the row. It is just a label. Wiring up the actual shortcut is your job.
 
 ```tsx
 <CommandItem>
@@ -80,7 +80,7 @@ or at least make it kind.
 ## Selecting and disabling items
 
 `onSelect` fires on click and on <kbd>Enter</kbd>. Add `disabled` to keep an
-item visible but out of reach - the keyboard skips it too.
+item visible but out of reach. The keyboard skips it too.
 
 ```tsx
 <CommandItem onSelect={() => router.navigate({ to: '/settings' })}>
diff --git a/apps/web/content/docs/ui/comparison.mdx b/apps/web/content/docs/ui/comparison.mdx
index c3f78a65f..52c444c8c 100644
--- a/apps/web/content/docs/ui/comparison.mdx
+++ b/apps/web/content/docs/ui/comparison.mdx
@@ -1,6 +1,6 @@
 ---
 title: Comparison
-description: A before/after slider - drag the handle to reveal one image over another.
+description: A before/after slider. Drag the handle to reveal one image over another.
 icon: Columns2
 ---
 
@@ -36,8 +36,9 @@ the `Comparison` a size or an aspect ratio and both pictures line up.
 
 ## Hover mode
 
-With `mode="hover"` the handle follows the pointer - no clicking needed. Nice
-for quick, playful comparisons; for anything precise, stick with dragging.
+With `mode="hover"` the handle follows the pointer, no clicking needed. It's
+nice for quick, playful comparisons, but for anything precise, stick with
+dragging.
 
 ```tsx
 <Comparison mode="hover">...</Comparison>
@@ -59,7 +60,7 @@ for quick, playful comparisons; for anything precise, stick with dragging.
 ## Custom handle
 
 `ComparisonHandle` draws a line with a grip by default. Pass children to draw
-your own - it already follows the slider for you.
+your own, and the handle still moves with the slider.
 
 ```tsx
 <ComparisonHandle>
@@ -69,11 +70,11 @@ your own - it already follows the slider for you.
 
 ## Accessibility
 
-- The whole comparison is a slider: focus it with <kbd>Tab</kbd>, then use the
+- The whole comparison is a slider. Focus it with <kbd>Tab</kbd>, then use the
   arrow keys (5% a step, 10% with <kbd>Shift</kbd>), <kbd>Home</kbd> and
   <kbd>End</kbd>.
 - Screen readers hear the position as a percentage. Name the slider with
-  `aria-label` - "Light and dark theme" says more than the default.
+  `aria-label`. "Light and dark theme" says more than the default.
 - The images are decorative inside the slider (`alt=""`); describe what's being
   compared in the label or a caption.
 - Dragging sideways never blocks scrolling the page up and down on phones.
diff --git a/apps/web/content/docs/ui/context-menu.mdx b/apps/web/content/docs/ui/context-menu.mdx
index 9d0eff30d..78c0edfca 100644
--- a/apps/web/content/docs/ui/context-menu.mdx
+++ b/apps/web/content/docs/ui/context-menu.mdx
@@ -39,8 +39,8 @@ import {
 ```
 
 Right-click the trigger with a mouse, or press and hold it on a phone or
-tablet. The menu opens right where your cursor (or finger) is - no button
-required, no hunting around.
+tablet. The menu opens right where your cursor or finger is, so there's no
+button to find first.
 
 ## Submenus
 
@@ -101,8 +101,8 @@ one.
 ## Shortcuts
 
 `ContextMenuShortcut` shows a keyboard hint at the end of an item. It is only a
-label - wire the actual key binding yourself, otherwise it is a promise you are
-not keeping.
+label. Wire up the actual key binding yourself, or it's a promise you aren't
+keeping.
 
 ```tsx
 <ContextMenuItem>
@@ -125,12 +125,12 @@ part.
 
 ## Accessibility
 
-- Context menus are hidden by nature: nothing on screen says "right-click me".
-  Every action inside one must also be reachable another way, such as a
+- Context menus are hidden by nature, since nothing on screen says "right-click
+  me". Every action inside one must also be reachable another way, such as a
   toolbar, a [Dropdown Menu](/docs/ui/dropdown-menu) or a keyboard shortcut.
   Treat the context menu as a shortcut, never as the only door.
 - The trigger is a plain, non-focusable area, so keyboard users cannot open
-  the menu at all - one more reason for the rule above. Once it is open,
+  the menu at all. One more reason for the rule above. Once it is open,
   arrow keys move between items, the right arrow opens a submenu, typing a
   letter jumps to a matching item and `Escape` closes it.
 - On touch devices a long-press opens the menu, and the trigger sets
diff --git a/apps/web/content/docs/ui/copy-button.mdx b/apps/web/content/docs/ui/copy-button.mdx
index 011089295..9a97ba568 100644
--- a/apps/web/content/docs/ui/copy-button.mdx
+++ b/apps/web/content/docs/ui/copy-button.mdx
@@ -1,6 +1,6 @@
 ---
 title: Copy Button
-description: A button that copies text to the clipboard, with a smooth icon swap and a check mark that draws itself.
+description: A button that copies text to the clipboard, then swaps its icon for a check mark that draws itself.
 icon: Copy
 ---
 
@@ -18,9 +18,9 @@ import { CopyButton } from '@vitnode/core/components/ui/copy-button'
 <CopyButton content="Hello world!" />
 ```
 
-Click it and the copy icon blurs away while a check mark draws itself in - the
-same stroke animation as the [Checkbox](/docs/ui/checkbox). After `delay`
-milliseconds it quietly goes back to the copy icon, ready for round two.
+Click it and the copy icon blurs away while a check mark draws itself in, with
+the same stroke animation as the [Checkbox](/docs/ui/checkbox). After `delay`
+milliseconds it goes back to the copy icon, ready for round two.
 
 ## With a label
 
@@ -37,7 +37,7 @@ accessible name, so screen readers hear what you see.
 
 Without children the button renders as an icon. It labels itself "Copy" and
 "Copied" out of the box, but a specific label is friendlier when there are a few
-copy buttons on one screen:
+copy buttons on one screen.
 
 ```tsx
 <CopyButton
@@ -50,8 +50,8 @@ copy buttons on one screen:
 
 ## Controlled
 
-Own the copied state with `copied` and `onCopiedChange` - handy when something
-else on the page should react to the copy.
+Own the copied state with `copied` and `onCopiedChange` when something else on
+the page should react to the copy.
 
 ```tsx
 const [copied, setCopied] = React.useState(false)
@@ -65,8 +65,8 @@ const [copied, setCopied] = React.useState(false)
 
 ## Accessibility
 
-- A polite live region announces "Copied" after a successful copy, so the
-  change is not just a visual one.
+- A polite live region announces "Copied" after a successful copy, so screen
+  reader users hear the change too.
 - With reduced motion turned on, the icons simply fade and the check mark shows
   up fully drawn.
 - If the browser blocks clipboard access (for example on a non-HTTPS page), an
diff --git a/apps/web/content/docs/ui/counter.mdx b/apps/web/content/docs/ui/counter.mdx
index 9361cf4d7..3e13808df 100644
--- a/apps/web/content/docs/ui/counter.mdx
+++ b/apps/web/content/docs/ui/counter.mdx
@@ -34,7 +34,7 @@ Leave out `value` and use `defaultValue` if you only care about changes:
 ## Steps and limits
 
 `step` sets how far one click goes. A step that would jump past a limit stops
-right at it - with `max={10}` and `step={5}`, 8 goes to 10, not 13.
+right at it. With `max={10}` and `step={5}`, 8 goes to 10, not 13.
 
 ```tsx
 <Counter max={100} min={0} step={5} />
@@ -44,8 +44,8 @@ right at it - with `max={10}` and `step={5}`, 8 goes to 10, not 13.
 
 <Preview name="counter-sliding-number" />
 
-The rolling digits are their own component, so you can animate any number -
-stats, prices, likes - without the buttons:
+The rolling digits are their own component, so you can animate any number,
+like a download count or a price, without the buttons:
 
 ```ts
 import { SlidingNumber } from '@vitnode/core/components/ui/sliding-number'
@@ -68,10 +68,10 @@ gets saved.
 ## Accessibility
 
 - The buttons are labelled "Decrease" and "Increase" in the user's language.
-- Screen readers hear the new value after every click, without the rolling
-  digits - those are hidden from assistive tech.
+- Screen readers hear the new value after every click. The rolling digits
+  themselves are hidden from assistive tech.
 - Give the counter a name with `aria-label` or `aria-labelledby`, so "Increase"
-  has context: increase _what_?
+  has context. Increase _what_?
 - With reduced motion turned on, digits change instantly.
 
 ## Props
diff --git a/apps/web/content/docs/ui/data-table/bulk-actions.mdx b/apps/web/content/docs/ui/data-table/bulk-actions.mdx
index 50010a5e4..3ec4e3084 100644
--- a/apps/web/content/docs/ui/data-table/bulk-actions.mdx
+++ b/apps/web/content/docs/ui/data-table/bulk-actions.mdx
@@ -10,7 +10,7 @@ icon: CheckCheck
 
 ## Usage
 
-Pass `bulkActions` to let a person act on several rows at once. That single prop is what turns selection on: the table grows a leading checkbox column - one per row, plus a header checkbox that ticks the whole page - and while anything is ticked, a bar floats at the bottom centre of the viewport with the count, your actions, and a button to clear the selection.
+Pass `bulkActions` to let a person act on several rows at once. That one prop turns selection on. The table grows a leading checkbox column, with a checkbox per row and one in the header that ticks the whole page. While anything is ticked, a bar floats at the bottom centre of the viewport with the count, your actions and a button to clear the selection.
 
 Your actions read the ticked ids with the `useDataTableSelection` hook. They are rendered inside the bar, which lives inside the table's selection provider, so nothing has to be threaded through props:
 
@@ -103,9 +103,9 @@ import { TypeTable } from 'fumadocs-ui/components/type-table'
 
 ## Selection is per page
 
-The selection only ever covers the rows currently on screen. Whenever the server sends a different set of row ids - paging, searching, changing a filter - the selection is pruned to what is still there, so paging away empties it on its own and a bulk action can never touch a row nobody can see.
+The selection only ever covers the rows currently on screen. Whenever the server sends a different set of row ids, because someone paged, searched or changed a filter, the selection is pruned to what is still there. Paging away empties it on its own, and a bulk action can never touch a row nobody can see.
 
-That pruning is also what makes a partly-successful action readable: revalidate after deleting 3 of 5 rows and the 2 that were refused stay on screen _and_ stay ticked, so the bar is still pointed at exactly the work that is left.
+Pruning also keeps a partly successful action easy to read. Revalidate after deleting 3 of 5 rows, and the 2 that were refused stay on screen _and_ stay ticked, so the bar still points at exactly the work that is left.
 
 <Callout type="warn" title="Bulk actions run per row">
   There is no bulk endpoint behind `bulkActions` - it hands you ids, and what
diff --git a/apps/web/content/docs/ui/data-table/draggable-rows.mdx b/apps/web/content/docs/ui/data-table/draggable-rows.mdx
index d2fbecb0d..4fb307d1a 100644
--- a/apps/web/content/docs/ui/data-table/draggable-rows.mdx
+++ b/apps/web/content/docs/ui/data-table/draggable-rows.mdx
@@ -1,6 +1,6 @@
 ---
 title: Draggable Rows
-description: Drag rows into a new order with mouse, touch or keyboard - and save it on your backend.
+description: Drag rows into a new order with mouse, touch or keyboard, then save it on your backend.
 icon: GripVertical
 ---
 
@@ -10,7 +10,7 @@ icon: GripVertical
 
 ## Usage
 
-When the order of rows _is_ the data - a backlog, homepage sections, FAQ entries - pass `reorderable`. Each row grows a grip handle; grab it and drag the row where it belongs. The other rows slide out of the way, and the dropped row glides into its new spot.
+When the order of rows _is_ the data, like a backlog or a list of FAQ entries, pass `reorderable`. Each row grows a grip handle. Grab it and drag the row where it belongs. The other rows slide out of the way, and the dropped row glides into its new spot.
 
 ```tsx
 <DataTable
@@ -67,7 +67,7 @@ import { TypeTable } from 'fumadocs-ui/components/type-table'
 
 What you get for free:
 
-- **Optimistic order.** The table moves the row the moment you drop it and calls `onReorder` in the background. If the promise rejects, it rolls back and shows an error toast - no stale "did it save?" moment.
+- **Optimistic order.** The table moves the row the moment you drop it and calls `onReorder` in the background. If the promise rejects, it rolls back and shows an error toast, so nobody is left wondering "did it save?"
 - **Only the handle drags.** Links, buttons and `rowOpens` clicks in the rest of the row keep working exactly as before.
 - **Mouse, touch and keyboard.** On touch, press and hold the handle for a moment so scrolling the page still scrolls the page. With a keyboard, focus a handle, press Space, move with the arrow keys and press Space again (Escape cancels). Screen readers hear where the row is the whole time.
 - **Expandable rows travel along.** An open detail panel belongs to its row, so it moves with it during the drag.
@@ -84,7 +84,7 @@ What you get for free:
 
 ## Saving the order on the backend
 
-The table hands you ids; making them stick is three small pieces. VitNode's own navigation admin does the same thing in `packages/vitnode/src/api/modules/admin/navigation/routes/reorder.route.ts` - peek there for a production version.
+The table hands you ids. Making them stick takes three small pieces. VitNode's own navigation admin does the same thing, so peek at `packages/vitnode/src/api/modules/admin/navigation/routes/reorder.route.ts` for a production version.
 
 <Steps>
 <Step>
diff --git a/apps/web/content/docs/ui/data-table/expandable-rows.mdx b/apps/web/content/docs/ui/data-table/expandable-rows.mdx
index 681208751..507d0e885 100644
--- a/apps/web/content/docs/ui/data-table/expandable-rows.mdx
+++ b/apps/web/content/docs/ui/data-table/expandable-rows.mdx
@@ -1,6 +1,6 @@
 ---
 title: Expandable Rows
-description: Rows that open a detail panel underneath, sliding smoothly open and closed.
+description: Rows that slide open a detail panel right underneath them.
 icon: UnfoldVertical
 ---
 
@@ -10,7 +10,7 @@ icon: UnfoldVertical
 
 ## Usage
 
-Some rows have more to say than a cell can hold - an order's line items, a job's error log, a user's last logins. Pass `expandable` and every row grows a chevron that slides a detail panel open right underneath it. No modal, no new page, no losing your place.
+Some rows have more to say than a cell can hold, like an order's line items or a job's error log. Pass `expandable` and each row gets a chevron that slides a detail panel open right underneath it. Rows that `canExpand` rules out get no chevron. The panel opens in place, so nobody loses their spot in the list.
 
 ```tsx
 <DataTable
@@ -64,7 +64,7 @@ A few things the table handles for you:
 - **Several rows can be open at once.** Open state lives in the component, not the URL, and it is dropped for rows that leave the page when you paginate, search or filter.
 - **It is a real button.** The chevron is a `<button>` with `aria-expanded` and `aria-controls`, so Enter and Space work and screen readers announce "Expand row" / "Collapse row". Row clicks from `rowOpens` keep working, because a click on a button never counts as a row click.
 - **It plays nice with `bulkActions`.** The chevron column sits right after the selection checkbox.
-- **The motion is polite.** The panel eases its height and opacity open in about 300 ms, and with "reduce motion" turned on it simply fades - no sliding around.
+- **The motion is polite.** The panel eases its height and opacity open in about 300 ms, and with "reduce motion" turned on it only fades.
 
 <Callout type="info" title="Keep the panel light on data">
   `render` runs on the client as soon as a row opens. If the detail needs data
diff --git a/apps/web/content/docs/ui/data-table/filters.mdx b/apps/web/content/docs/ui/data-table/filters.mdx
index fb5d6e699..26c595644 100644
--- a/apps/web/content/docs/ui/data-table/filters.mdx
+++ b/apps/web/content/docs/ui/data-table/filters.mdx
@@ -90,7 +90,7 @@ When the set of options is small and known ahead of time, pass them directly via
 
 ## Async filters
 
-When the options come from the API (for example a large or searchable list), provide an `onSearch` callback instead of `options`. It runs - debounced - as the user types and should return results already filtered and capped by the server. The universal fetcher answers from the browser here, with the visitor's own cookies:
+When the options come from the API (for example a large or searchable list), provide an `onSearch` callback instead of `options`. It runs, debounced, as the user types and should return results already filtered and capped by the server. The universal fetcher answers from the browser here, with the visitor's own cookies:
 
 ```tsx title="search-roles.tsx"
 import type { FilterOption } from '@vitnode/core/components/table/filters'
diff --git a/apps/web/content/docs/ui/data-table/index.mdx b/apps/web/content/docs/ui/data-table/index.mdx
index 5a67fd3c9..41e02fb2f 100644
--- a/apps/web/content/docs/ui/data-table/index.mdx
+++ b/apps/web/content/docs/ui/data-table/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Data Table
-description: A table component with sorting, filtering, and pagination compatible with VitNode API.
+description: A table with sorting, filtering and pagination that works with the VitNode API.
 icon: Table
 ---
 
@@ -17,7 +17,7 @@ import {
 } from '@vitnode/core/components/table/data-table'
 ```
 
-Columns are typed with `ColumnDef<T>`, where `T` is the shape of a single row. An **accessor column** binds to the data through `accessorKey`, which is type-safe - it only accepts a `keyof T`, just like TanStack Table. A **display column** (for actions, selection, etc.) has no `accessorKey` and instead requires a string `id`.
+Columns are typed with `ColumnDef<T>`, where `T` is the shape of a single row. An **accessor column** binds to the data through `accessorKey`, which is type-safe. It only accepts a `keyof T`, just like TanStack Table. A **display column**, for actions or selection, has no `accessorKey` and requires a string `id` instead.
 
 ```tsx
 const columns: ColumnDef<User>[] = [
@@ -179,9 +179,9 @@ import { TypeTable } from 'fumadocs-ui/components/type-table'
   }}
 />
 
-## Cell Renderer
+## Cell renderer
 
-You can customize how each cell is rendered using the `cell` property. The renderer function receives the current row data and all table data as parameters.
+The `cell` property controls how each cell renders. Its function receives the current row and all the table data.
 
 ```tsx
 <DataTable
@@ -214,9 +214,9 @@ You can customize how each cell is rendered using the `cell` property. The rende
 />
 ```
 
-### Order Configuration
+### Order configuration
 
-If you want to enable sorting on specific columns, you can specify them in the `columns` property.
+To enable sorting on specific columns, list them in the `columns` property.
 
 ```tsx
 order={{
@@ -229,9 +229,9 @@ order={{
 }}
 ```
 
-## Column Alignment
+## Column alignment
 
-Use the `align` property to control the horizontal alignment of a column's header and cells. It accepts `"left"` (default), `"center"`, or `"right"`. This is handy for numeric values and action buttons.
+Use the `align` property to control the horizontal alignment of a column's header and cells. It accepts `"left"` (default), `"center"`, or `"right"`. Right alignment suits numbers and action buttons.
 
 ```tsx
 columns={[
@@ -252,16 +252,16 @@ columns={[
 
 Each feature has its own page with a live preview:
 
-- [Search](/docs/ui/data-table/search) - a debounced search box that writes to the URL.
-- [Filters](/docs/ui/data-table/filters) - faceted multi-select filters, static or async.
-- [Pagination](/docs/ui/data-table/pagination) - numbered pages and a rows-per-page select.
-- [Bulk Actions](/docs/ui/data-table/bulk-actions) - select rows and act on all of them at once.
-- [Expandable Rows](/docs/ui/data-table/expandable-rows) - a detail panel under each row.
-- [Draggable Rows](/docs/ui/data-table/draggable-rows) - reorder rows and save the order on your backend.
+- [Search](/docs/ui/data-table/search): a debounced search box that writes to the URL.
+- [Filters](/docs/ui/data-table/filters): faceted multi-select filters, static or async.
+- [Pagination](/docs/ui/data-table/pagination): numbered pages and a rows-per-page select.
+- [Bulk Actions](/docs/ui/data-table/bulk-actions): select rows and act on all of them at once.
+- [Expandable Rows](/docs/ui/data-table/expandable-rows): a detail panel under each row.
+- [Draggable Rows](/docs/ui/data-table/draggable-rows): reorder rows and save the order on your backend.
 
 ## Complete Example
 
-Here's a complete example showing how to use the `DataTable` component in a page:
+Here's `DataTable` wired into a full page:
 
 ```tsx
 import {
diff --git a/apps/web/content/docs/ui/data-table/pagination.mdx b/apps/web/content/docs/ui/data-table/pagination.mdx
index dcb54843c..52f1a9ff7 100644
--- a/apps/web/content/docs/ui/data-table/pagination.mdx
+++ b/apps/web/content/docs/ui/data-table/pagination.mdx
@@ -1,6 +1,6 @@
 ---
 title: Pagination
-description: Numbered pages, a rows-per-page select and a "Showing 21–30 of 380" range - all from pageInfo.
+description: Numbered pages, a rows-per-page select and a "Showing 21–30 of 380" range, all built from pageInfo.
 icon: BookCopy
 ---
 
@@ -10,10 +10,10 @@ icon: BookCopy
 
 ## Usage
 
-The table renders its own pager from `pageInfo` — numbered pages with a first/last
-anchor and an ellipsis in between, a rows-per-page select, and a
-"Showing 21–30 of 380" range. You wire up nothing: pass `pageInfo` through and it
-appears.
+The table renders its own pager from `pageInfo`. You get numbered pages with a
+first/last anchor and an ellipsis in between, a rows-per-page select, and a
+"Showing 21–30 of 380" range. There's nothing to wire up. Pass `pageInfo` through
+and the pager appears.
 
 Each page is a real link (`?page=3`), so middle-click and "open in new tab" work,
 while a plain click stays a client-side navigation. On phones the numbers collapse
diff --git a/apps/web/content/docs/ui/data-table/search.mdx b/apps/web/content/docs/ui/data-table/search.mdx
index 510e3fe14..0da4adb91 100644
--- a/apps/web/content/docs/ui/data-table/search.mdx
+++ b/apps/web/content/docs/ui/data-table/search.mdx
@@ -1,6 +1,6 @@
 ---
 title: Search
-description: Let people search the table - the term lives in the URL, so the API does the heavy lifting.
+description: Let people search the table. The term lives in the URL, so the API does the heavy lifting.
 icon: TextSearch
 ---
 
@@ -10,7 +10,7 @@ icon: TextSearch
 
 ## Usage
 
-Set the `search` prop to `true` to render a search input above the table. You can optionally customize the placeholder with `searchPlaceholder`.
+Set the `search` prop to `true` to render a search input above the table. Change the placeholder with `searchPlaceholder`.
 
 ```tsx
 <DataTable
@@ -34,7 +34,7 @@ Set the `search` prop to `true` to render a search input above the table. You ca
 />
 ```
 
-The input writes the term to the `?search=` query parameter (debounced) and reloads the page, so it works out of the box with server-side data fetching. The columns that are actually searched are defined on the API route.
+The input writes the term to the `?search=` query parameter (debounced), and the route loads the matching rows from the API. The API route decides which columns are searched.
 
 <Callout type="info" title="Configure the API route">
   Enabling `search` only renders the input. You must also tell the backend which
diff --git a/apps/web/content/docs/ui/dialog.mdx b/apps/web/content/docs/ui/dialog.mdx
index a0bf34b91..540d43e1d 100644
--- a/apps/web/content/docs/ui/dialog.mdx
+++ b/apps/web/content/docs/ui/dialog.mdx
@@ -47,9 +47,9 @@ import {
 
 ## Dialog or Alert Dialog?
 
-Use a Dialog for friendly, low-stakes tasks - sharing, quick edits, previews.
+Use a Dialog for friendly, low-stakes tasks like sharing, quick edits or previews.
 Asking someone to confirm something they can't undo? Reach for the
-[Alert Dialog](/docs/ui/alert-dialog) instead: it can't be dismissed by clicking
+[Alert Dialog](/docs/ui/alert-dialog) instead. It can't be dismissed by clicking
 outside, so nobody deletes anything by accident.
 
 ## API Reference
diff --git a/apps/web/content/docs/ui/empty.mdx b/apps/web/content/docs/ui/empty.mdx
index d4fd01485..ec18fb4f2 100644
--- a/apps/web/content/docs/ui/empty.mdx
+++ b/apps/web/content/docs/ui/empty.mdx
@@ -1,6 +1,6 @@
 ---
 title: Empty
-description: Friendly empty states for lists, tables and searches that have nothing to show yet - with an icon, a clear message and a next step.
+description: Empty states for lists, tables and searches that have nothing to show yet, with an icon, a short message and a next step.
 icon: PackageOpen
 ---
 
@@ -46,13 +46,14 @@ that have no items yet.
 
 ## Anatomy
 
-- `Empty` - the centered wrapper. It grows to fill its parent (`flex-1`).
-- `EmptyHeader` - groups the media, title and description.
-- `EmptyMedia` - an icon, avatar or small illustration.
-- `EmptyTitle` - one short line that says what's missing.
-- `EmptyDescription` - why it's empty and what to do about it. Links inside it
-  are underlined automatically.
-- `EmptyContent` - actions, a search box or anything else the user can act on.
+- `Empty` is the centered wrapper. It grows to fill its parent (`flex-1`).
+- `EmptyHeader` groups the media, title and description.
+- `EmptyMedia` holds an icon, avatar or small illustration.
+- `EmptyTitle` is one short line that says what's missing.
+- `EmptyDescription` says why it's empty and what to do about it. Links inside
+  it are underlined automatically.
+- `EmptyContent` holds actions, a search box or anything else the user can act
+  on.
 
 ## Media
 
@@ -79,7 +80,7 @@ illustrations.
 
 ## Outline
 
-`Empty` already has a dashed border style - it just needs a width. Add `border`
+`Empty` already has a dashed border style. It just needs a width. Add `border`
 for a drop-zone look, or `border-2` when it sits alone on a page, like the
 AdminCP dashboard.
 
@@ -91,8 +92,8 @@ AdminCP dashboard.
 
 ## No results
 
-A search that finds nothing deserves its own empty state - not the same one as
-"you have no data". Echo the query back and offer a way out, like clearing the
+A search that finds nothing needs its own empty state, not the same one as "you
+have no data". Echo the query back and offer a way out, like clearing the
 search.
 
 <Preview name="empty-search" />
@@ -123,8 +124,8 @@ search.
 ## Inside a card or sidebar
 
 The default `p-12` is generous on purpose. On phones, `p-6 md:p-12` gives the
-copy room to breathe. In tight spots - a card, a sidebar, a popover - shrink the
-padding and the text:
+copy room to breathe. In tight spots like a card, a sidebar or a popover, shrink
+the padding and the text:
 
 ```tsx
 <Empty className="p-6">
@@ -139,7 +140,7 @@ padding and the text:
 
 ## Writing good empty states
 
-An empty state is a tiny piece of onboarding, so make every word count:
+An empty state is a tiny piece of onboarding. Five rules for writing one:
 
 - **Say what's missing.** "No projects yet" beats "Nothing here".
 - **Say why.** Is it brand new, filtered out, or did the search miss?
@@ -155,7 +156,8 @@ An empty state is a tiny piece of onboarding, so make every word count:
 - `EmptyTitle` renders a `div`. If the empty state replaces a whole page
   section, give the title a heading role so it shows up in the outline:
   `<EmptyTitle aria-level={2} role="heading">`.
-- Icons in `EmptyMedia` are decorative - the title already says it all. Use
+- Icons in `EmptyMedia` are decorative, since the title already says what's
+  missing. Use
   `alt=""` on avatar images for the same reason.
 - When results change while the user types, announce the count in a
   `role="status"` region (a `sr-only` paragraph works great) so screen reader
diff --git a/apps/web/content/docs/ui/field.mdx b/apps/web/content/docs/ui/field.mdx
index 20d082a12..930e1e0d8 100644
--- a/apps/web/content/docs/ui/field.mdx
+++ b/apps/web/content/docs/ui/field.mdx
@@ -1,6 +1,6 @@
 ---
 title: Field
-description: Layout primitives for labels, descriptions, errors and groups of controls - the building blocks behind every AutoForm field.
+description: Layout components for labels, descriptions, errors and groups of controls. AutoForm builds every field out of them.
 icon: ListChecks
 ---
 
@@ -36,9 +36,9 @@ import {
 ## Should I use this for my form?
 
 Probably not directly. In VitNode, forms are built with
-[AutoForm](/docs/ui/auto-form), and AutoForm already lays every field out with
-these primitives - labels, descriptions and error messages included. You get
-validation, ids and ARIA wiring for free.
+[AutoForm](/docs/ui/auto-form), and AutoForm already uses these components for
+every field's label, description and error message. You get validation, ids and
+ARIA wiring for free.
 
 Reach for `Field` when you are:
 
@@ -78,7 +78,7 @@ checkboxes, switches and other compact controls that sit next to their label:
 ```
 
 Put the control first for a checkbox on the left, or last for a switch on the
-right - the layout follows the markup.
+right. The layout follows the markup.
 
 ### Responsive
 
@@ -105,7 +105,7 @@ fold:
 
 Wrap related fields in a `FieldSet` with a `FieldLegend`. Screen readers read
 the legend before each field inside, so "Mentions" becomes "Notifications,
-Mentions" - context without extra words on screen.
+Mentions". The context costs no extra words on screen.
 
 ```tsx
 <FieldSet>
@@ -129,9 +129,9 @@ Need a divider with words? Pass children: `<FieldSeparator>or</FieldSeparator>`.
 
 ## Choice cards
 
-Wrap a whole `Field` in a `FieldLabel` and the label becomes a card - the full
-card is clickable, it highlights when its control is checked, and it shows a
-focus ring when you tab into it. Use `FieldTitle` for the card's title, since
+Wrap a whole `Field` in a `FieldLabel` and the label becomes a card. The full
+card is clickable, highlights when its control is checked and shows a focus
+ring when you tab into it. Use `FieldTitle` for the card's title, since
 it already lives inside a label.
 
 <Preview name="field-choice-card" />
@@ -167,9 +167,9 @@ render a `FieldError`:
 </Field>
 ```
 
-`FieldError` also takes an `errors` array - duplicates are removed, a single
-message renders as text and several render as a list. It renders nothing when
-there is nothing to say.
+`FieldError` also takes an `errors` array. It drops duplicates, renders a single
+message as text and several as a list. It renders nothing when there is nothing
+to say.
 
 ```tsx
 <FieldError errors={[{ message: 'Too short' }, { message: 'Too short' }]} />
@@ -181,12 +181,12 @@ A custom AutoForm field is just a `component` function. Combine `Field` for the
 layout with AutoForm's own helpers and your field gets the same ids, ARIA and
 error handling as the built-in ones:
 
-- `AutoFormLabel` - a `FieldLabel` already pointed at the control, with the
+- `AutoFormLabel` is a `FieldLabel` already pointed at the control, with the
   "optional" hint.
-- `AutoFormDesc` - the description text.
-- `FormControl` - passes `id`, `aria-invalid` and `aria-describedby` to the
+- `AutoFormDesc` renders the description text.
+- `FormControl` passes `id`, `aria-invalid` and `aria-describedby` to the
   control inside it.
-- `FormMessage` - a `FieldError` showing the field's validation errors.
+- `FormMessage` is a `FieldError` showing the field's validation errors.
 
 ```tsx
 import type { ItemAutoFormComponentProps } from '@vitnode/core/components/form/auto-form'
@@ -237,7 +237,7 @@ export const AutoFormSettingSwitch = ({
 
 ## Accessibility
 
-- Every control needs a label: give the control an `id` and the `FieldLabel` a
+- Every control needs a label. Give the control an `id` and the `FieldLabel` a
   matching `htmlFor`. Clicking the label then focuses or toggles the control.
 - `Field` renders `role="group"`, so the control, its label and its help text
   are announced together.
diff --git a/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx b/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
index ca41daa73..17fb92f85 100644
--- a/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
+++ b/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
@@ -1,6 +1,6 @@
 ---
 title: useIntersectionObserver
-description: Find out when an element scrolls into view - perfect for lazy loading, infinite feeds and "seen" tracking.
+description: Find out when an element scrolls into view. Use it for lazy loading, infinite feeds and "seen" tracking.
 icon: ScanEye
 ---
 
@@ -32,7 +32,7 @@ friends.
 ## Load once, then stop watching
 
 Set `freezeOnceVisible` and the hook stops observing the first time the element
-shows up. Handy for lazy loading or a one-off entrance animation - no point
+shows up. Handy for lazy loading or a one-off entrance animation, since there's no point
 paying for an observer that has nothing left to do.
 
 ```tsx
@@ -50,7 +50,7 @@ screen, so people rarely catch it loading.
 ## Inside a scroll container
 
 By default the hook watches the viewport. To watch a scrollable element
-instead, pass it as `root` - store it with a callback ref so the hook picks it
+instead, pass it as `root`. Store it with a callback ref so the hook picks it
 up once it mounts:
 
 ```tsx
@@ -95,4 +95,4 @@ import { TypeTable } from 'fumadocs-ui/components/type-table'
 />
 
 On the server, and in the rare browser without `IntersectionObserver`, the hook
-simply returns `undefined`.
+returns `undefined`.
diff --git a/apps/web/content/docs/ui/hooks/use-local-storage.mdx b/apps/web/content/docs/ui/hooks/use-local-storage.mdx
index 99a70e820..cea1a6db1 100644
--- a/apps/web/content/docs/ui/hooks/use-local-storage.mdx
+++ b/apps/web/content/docs/ui/hooks/use-local-storage.mdx
@@ -18,7 +18,7 @@ export const ExampleComponent = () => {
 }
 ```
 
-It works just like `useState`: pass a key and a default value, get the value and
+It works like `useState`. Pass a key and a default value, and get the value and
 a setter back. Values are saved as JSON, so numbers, booleans, arrays and plain
 objects all come back exactly as you stored them.
 
@@ -43,7 +43,7 @@ const [filters, setFilters, resetFilters] = useLocalStorage('filters', [])
 
 ## Good to know
 
-- **Synced everywhere.** Every component using the same key updates together -
+- **Synced everywhere.** Every component using the same key updates together,
   in this tab and in any other tab of your site.
 - **Server-safe.** During server rendering the hook returns the default value,
   then switches to the stored one in the browser without a hydration mismatch.
diff --git a/apps/web/content/docs/ui/image-zoom.mdx b/apps/web/content/docs/ui/image-zoom.mdx
index 17d3a950e..a7b4c65f7 100644
--- a/apps/web/content/docs/ui/image-zoom.mdx
+++ b/apps/web/content/docs/ui/image-zoom.mdx
@@ -1,6 +1,6 @@
 ---
 title: Image Zoom
-description: Click an image and it grows smoothly from its spot on the page to fill the screen.
+description: Click an image and it grows from its spot on the page to fill the screen.
 icon: ZoomIn
 ---
 
@@ -41,7 +41,7 @@ zooms in:
 
 ## Styling
 
-- `className` styles the clickable wrapper - use it for layout and visibility
+- `className` styles the clickable wrapper. Use it for layout and visibility
   (`hidden dark:block` for theme-specific screenshots).
 - `imageClassName` styles the image on the page: size, border, rounded corners.
 
@@ -51,7 +51,7 @@ The zoomed image always fits the screen without cropping.
 
 - The image is a real button, so it works with the keyboard and screen readers
   announce that it opens a dialog.
-- `alt` is required - it labels the image on the page and names the zoomed view.
+- `alt` is required. It labels the image on the page and names the zoomed view.
 - Focus is trapped while zoomed and returns to the image when you close it.
 - With reduced motion turned on, the image appears zoomed instantly instead of
   gliding.
diff --git a/apps/web/content/docs/ui/input-otp.mdx b/apps/web/content/docs/ui/input-otp.mdx
index 055333134..611151150 100644
--- a/apps/web/content/docs/ui/input-otp.mdx
+++ b/apps/web/content/docs/ui/input-otp.mdx
@@ -48,7 +48,7 @@ const formSchema = z.object({
 />
 ```
 
-The schema does the setup for you: `.length(6)` decides how many slots there
+The schema does the setup for you. `.length(6)` decides how many slots there
 are, and `.regex()` becomes the input's `pattern`, so letters never even make it
 into a digits-only code.
 
@@ -95,7 +95,7 @@ password managers and the "fill code from SMS" suggestion on phones
 ## Groups
 
 `AutoFormInputOTP` builds the slots for you. Codes of 6 or more characters with
-an even length are split in half with a separator (`123-456`), anything else
+an even length are split in half with a separator (`123-456`). Anything else
 stays in one group. Pass `groups` to pick your own split:
 
 ```tsx
@@ -105,8 +105,8 @@ stays in one group. Pass `groups` to pick your own split:
 
 ## Submit when complete
 
-`onComplete` fires once every slot is filled - perfect for verifying the code
-without making people hunt for a button. It works on both `AutoFormInputOTP`
+`onComplete` fires once every slot is filled, so you can verify the code without
+making people hunt for a button. It works on both `AutoFormInputOTP`
 and `InputOTP`.
 
 ```tsx
@@ -138,7 +138,7 @@ import { setFormFieldError } from '@vitnode/core/components/ui/form'
 ```
 
 Using `InputOTP` on its own? Set `aria-invalid` on it and link your message
-with `aria-describedby` - colour alone never tells the whole story.
+with `aria-describedby`. Red slots mean nothing to a screen reader.
 
 ## Only digits (manual)
 
@@ -165,7 +165,7 @@ import {
   input for you.
 - Using `InputOTP` directly? Pass it an `id`, point a `<Label htmlFor>` at it
   and describe where the code was sent with `aria-describedby`.
-- Slots and separators are hidden from screen readers - the real input already
+- Slots and separators are hidden from screen readers. The real input already
   announces the value, so nobody hears every digit twice.
 
 ## Props
diff --git a/apps/web/content/docs/ui/item.mdx b/apps/web/content/docs/ui/item.mdx
index c1bd40a4c..7ee3e4cdf 100644
--- a/apps/web/content/docs/ui/item.mdx
+++ b/apps/web/content/docs/ui/item.mdx
@@ -1,6 +1,6 @@
 ---
 title: Item
-description: A flexible row for lists, settings and menus - media, a title, a description and actions, all lined up without the CSS headache.
+description: A row for lists, settings and menus that lines up media, a title, a description and actions without the CSS headache.
 icon: LayoutList
 ---
 
@@ -43,16 +43,17 @@ right" rows. `Item` is that row, built once, so you can stop rebuilding it.
 
 ## Anatomy
 
-- `Item` - the row itself. Flexbox, wraps when it has to.
-- `ItemMedia` - an icon, avatar or image on the start side. With a description
-  present it aligns itself to the top of the text.
-- `ItemContent` - stacks the title and description and takes the free space.
-- `ItemTitle` - one line, truncated if it gets chatty.
-- `ItemDescription` - up to two lines of muted text. Links inside are
+- `Item` is the row itself. Flexbox, wraps when it has to.
+- `ItemMedia` holds an icon, avatar or image on the start side. With a
+  description present it aligns itself to the top of the text.
+- `ItemContent` stacks the title and description and takes the free space.
+- `ItemTitle` is one line, truncated if it gets chatty.
+- `ItemDescription` shows up to two lines of muted text. Links inside are
   underlined automatically.
-- `ItemActions` - buttons, badges or a chevron on the end side.
-- `ItemHeader` / `ItemFooter` - full-width rows above and below the content.
-- `ItemGroup` / `ItemSeparator` - a list of items and a line between them.
+- `ItemActions` holds buttons, badges or a chevron on the end side.
+- `ItemHeader` and `ItemFooter` are full-width rows above and below the content.
+- `ItemGroup` wraps a list of items, and `ItemSeparator` draws a line between
+  them.
 
 ## Variants
 
@@ -69,9 +70,9 @@ adds a soft background.
 
 ## Sizes
 
-`default`, `sm` and `xs` shrink the padding and the gaps. `ItemMedia` with the
-`image` variant shrinks along with them, and `xs` also uses smaller description
-text.
+Going from `default` to `sm` to `xs` shrinks the padding and the gaps.
+`ItemMedia` with the `image` variant shrinks along with them, and `xs` also uses
+smaller description text.
 
 <Preview name="item-sizes" />
 
@@ -85,9 +86,9 @@ text.
 
 `ItemMedia` comes in three flavours:
 
-- `default` - no styling at all, perfect for an `Avatar`.
-- `icon` - sizes a bare SVG icon to `size-4`.
-- `image` - a rounded square that crops an `img` to fit.
+- `default` adds no styling at all, which suits an `Avatar`.
+- `icon` sizes a bare SVG icon to `size-4`.
+- `image` is a rounded square that crops an `img` to fit.
 
 ```tsx
 <ItemMedia variant="image">
@@ -97,8 +98,8 @@ text.
 
 ## As a link
 
-Pass an element to `render` and the whole row becomes that element - an
-`<a>`, a router `Link`, a `<button>`, whatever you need. Rendered as a link it
+Pass an element to `render` and the whole row becomes that element, whether
+that's an `<a>`, a router `Link` or a `<button>`. Rendered as a link it
 picks up a hover background for free.
 
 <Preview name="item-link" />
@@ -124,7 +125,7 @@ everything you see.
 ## Groups
 
 Wrap items in `ItemGroup` to stack them, and drop an `ItemSeparator` between
-them when they need some breathing room.
+them when you want a line in between.
 
 <Preview name="item-group" />
 
@@ -161,8 +162,8 @@ or a timestamp can sit above or below the main content.
   `role="listitem"`, and an `aria-label` on the group helps screen readers
   announce what the list is about.
 - Keep one interactive element per row. Either the whole row is a link or
-  button (via `render`), or it holds buttons in `ItemActions` - never a button
-  inside a link.
+  button (via `render`), or it holds buttons in `ItemActions`. Never put a
+  button inside a link.
 - Icon-only buttons in `ItemActions` need an `aria-label` that names the row,
   for example "Invite Ada Lovelace" rather than just "Invite".
 - Decorative icons such as a trailing chevron get `aria-hidden`. Links that
diff --git a/apps/web/content/docs/ui/kbd.mdx b/apps/web/content/docs/ui/kbd.mdx
index ea6b91b51..0966b30ee 100644
--- a/apps/web/content/docs/ui/kbd.mdx
+++ b/apps/web/content/docs/ui/kbd.mdx
@@ -19,8 +19,7 @@ import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'
 ```
 
 `Kbd` renders a real `<kbd>` element, so browsers, search engines and assistive
-tech all know it is a key - not just a tiny gray box that happens to look like
-one.
+tech all know it is a key, not a tiny gray box that happens to look like one.
 
 ## Shortcuts
 
@@ -35,7 +34,7 @@ and stays a `<kbd>` too, which is exactly how HTML describes a key combo.
 ```
 
 Prefer a visible plus sign? Drop it between the keys and hide it from screen
-readers, they already hear two keys:
+readers, since they already hear two keys:
 
 ```tsx
 <KbdGroup>
@@ -104,9 +103,9 @@ Pair it with an [Input Group](/docs/ui/input-group) addon for the classic
 
 Showing ⌘ to a Windows user is a small betrayal. Detect the platform on the
 client, but render the same thing on the server and during hydration, or React
-will complain about mismatched HTML. `useSyncExternalStore` does exactly that:
-the third argument is used for the server render and hydration, then React
-switches to the real value.
+will complain about mismatched HTML. `useSyncExternalStore` does exactly that.
+React uses its third argument for the server render and hydration, then switches
+to the real value.
 
 ```tsx
 const subscribeToNothing = () => () => {}
@@ -140,8 +139,8 @@ No `useEffect` plus `setState` dance required.
   An `aria-label` on a plain `<kbd>` is not reliably read out, so visually
   hidden text is the safer bet. `title` adds a hover hint for sighted users.
 - `Kbd` has `pointer-events-none` and `select-none`. It is a hint, not a
-  control - if pressing the key should do something, listen for the key
-  itself (and put the action on a real button).
+  control. If pressing the key should do something, listen for the key itself
+  (and put the action on a real button).
 - Do not make a shortcut the only way to do something. Mouse, touch and
   keyboard users should all get there.
 
diff --git a/apps/web/content/docs/ui/label.mdx b/apps/web/content/docs/ui/label.mdx
index 20d9966d0..d98a383f5 100644
--- a/apps/web/content/docs/ui/label.mdx
+++ b/apps/web/content/docs/ui/label.mdx
@@ -1,6 +1,6 @@
 ---
 title: Label
-description: An accessible text label for form controls - click it and the control it names responds.
+description: An accessible text label for form controls. Click it and the control it names responds.
 icon: TextInitial
 ---
 
@@ -20,15 +20,15 @@ import { Label } from '@vitnode/core/components/ui/label'
 ```
 
 `Label` is a styled native `<label>`. Point `htmlFor` at the control's `id` and
-the browser handles the rest: the whole label becomes a click target, and
+the browser handles the rest. The whole label becomes a click target, and
 screen readers announce the text when the control gets focus.
 
 ## Using AutoForm? You already have labels
 
 [AutoForm](/docs/ui/auto-form) fields render their own label (`AutoFormLabel`)
 from the `label` prop, wired to the right `id`, with an "Optional" hint when the
-schema says so. Don't add a `Label` next to an AutoForm field - you'd just get
-two.
+schema says so. Don't add a `Label` next to an AutoForm field, or you'll end up
+with two.
 
 ```tsx
 <AutoFormInput label="Email" {...props} />
@@ -36,8 +36,8 @@ two.
 
 Reach for `Label` when you build a control by hand: a settings toggle outside a
 form, a custom picker, a filter bar. For a full field layout with description
-and error message, see [Field](/docs/ui/field) - `FieldLabel` is built on top
-of this component.
+and error message, see [Field](/docs/ui/field). Its `FieldLabel` is built on
+top of this component.
 
 ## With a checkbox
 
@@ -53,7 +53,7 @@ in, so clicking anywhere on the text toggles the checkbox.
 
 ## Wrapping the control
 
-No `id` handy? Wrap the control instead - a `<label>` is associated with the
+No `id` handy? Wrap the control instead. A `<label>` is associated with the
 control inside it automatically.
 
 ```tsx
@@ -65,7 +65,7 @@ control inside it automatically.
 
 ## Disabled controls
 
-Disable the control and the label follows along: it dims and shows a
+Disable the control and the label follows along. It dims and shows a
 `not-allowed` cursor, so nobody wonders why clicking it does nothing.
 
 ```tsx
@@ -76,12 +76,12 @@ Disable the control and the label follows along: it dims and shows a
 ```
 
 This works when the control comes **before** the label as a sibling and has the
-`peer` class - VitNode's `Checkbox`, `Switch` and `RadioGroupItem` already do.
+`peer` class. VitNode's `Checkbox`, `Switch` and `RadioGroupItem` already do.
 `Label` reacts to both a native `disabled` attribute and the `data-disabled`
 attribute Base UI puts on its controls.
 
 Label sits somewhere else? Put `group` and `data-disabled="true"` on a shared
-parent instead - that is what [Field](/docs/ui/field) does for you.
+parent instead. [Field](/docs/ui/field) does exactly that for you.
 
 ## Accessibility
 
@@ -89,7 +89,7 @@ parent instead - that is what [Field](/docs/ui/field) does for you.
   by wrapping the control. A label floating next to an input is just text to a
   screen reader.
 - Keep the visible text meaningful. "Email" beats "Field 1", and placeholders
-  are not labels - they vanish the moment someone starts typing.
+  are not labels. They vanish the moment someone starts typing.
 - The label is part of the hit area. That makes small controls like checkboxes
   much easier to tap on a phone, so keep the text next to the control rather
   than far away.
diff --git a/apps/web/content/docs/ui/marker.mdx b/apps/web/content/docs/ui/marker.mdx
index 80c0e225a..fb2422c2c 100644
--- a/apps/web/content/docs/ui/marker.mdx
+++ b/apps/web/content/docs/ui/marker.mdx
@@ -27,8 +27,8 @@ import {
 </Marker>
 ```
 
-A marker is the quiet line between messages - "Switched branch", "Today",
-"Thinking...". It pairs nicely with [Bubble](/docs/ui/bubble) when you build a
+A marker is the quiet line between messages, like "Switched branch", "Today"
+or "Thinking...". It pairs nicely with [Bubble](/docs/ui/bubble) when you build a
 chat thread, and it is just as happy in an activity feed.
 
 ```text
@@ -61,7 +61,7 @@ Pick a `variant` to change how the marker sits in the flow.
 | `separator` | A centered label with a divider line on each side.   |
 | `border`    | A default marker with a bottom border under the row. |
 
-Keep separator labels short - a date or a few words. The divider lines take the
+Keep separator labels short, like a date or a few words. The divider lines take the
 leftover space, so a long label leaves them nothing to work with.
 
 ## With an icon
@@ -99,7 +99,7 @@ import { Spinner } from '@vitnode/core/components/ui/spinner'
 ## Links and buttons
 
 The root is polymorphic. Pass `render` to turn a marker into a link or a
-button - links get an underline for free.
+button. Links get an underline for free.
 
 ```tsx
 <Marker render={<a href="/admin/plugins" />}>
@@ -128,8 +128,8 @@ button - links get an underline for free.
   `role="status"` for live progress, `render` with an `a` or `button` when it is
   clickable, nothing at all for a simple note.
 - A labeled separator needs no role. The lines are decorative pseudo-elements and
-  the label is read as ordinary text. Do not add `role="separator"` - it would
-  hide the label from assistive tech.
+  the label is read as ordinary text. Do not add `role="separator"`, because it
+  would hide the label from assistive tech.
 - `MarkerIcon` is `aria-hidden`, so the meaning lives in `MarkerContent`. For an
   icon-only marker, give the root an `aria-label`.
 - Wrap a whole thread in an element with `role="log"` so new messages and
diff --git a/apps/web/content/docs/ui/menubar.mdx b/apps/web/content/docs/ui/menubar.mdx
index 67b198ada..27fd85f3a 100644
--- a/apps/web/content/docs/ui/menubar.mdx
+++ b/apps/web/content/docs/ui/menubar.mdx
@@ -46,9 +46,9 @@ import {
 </Menubar>
 ```
 
-Every `MenubarMenu` is one menu in the bar: a trigger plus its content. Open one
-and the bar remembers - hover the next trigger and it opens straight away, just
-like the menu bar at the top of your desktop. Handy for editors, dashboards and
+Every `MenubarMenu` is one menu in the bar, made of a trigger and its content.
+Open one and the bar remembers. Hover the next trigger and it opens straight
+away, just like the menu bar at the top of your desktop. Handy for editors, dashboards and
 anything else with more commands than buttons.
 
 ## Submenus
@@ -108,8 +108,8 @@ and sub-triggers in the same menu so their text lines up with the checked ones.
 ## Shortcuts
 
 `MenubarShortcut` shows a keyboard hint at the end of an item. It is only a
-label - wire the actual key binding yourself, otherwise it is a promise you are
-not keeping.
+label. Wire up the actual key binding yourself, or it is a promise you are not
+keeping.
 
 ```tsx
 <MenubarItem>
@@ -237,8 +237,8 @@ import { TypeTable } from 'fumadocs-ui/components/type-table'
 />
 
 `MenubarCheckboxItem` takes `checked`, `defaultChecked` and `onCheckedChange`;
-`MenubarRadioGroup` takes `value`, `defaultValue` and `onValueChange`. Both item
-types accept `inset` and `disabled` too. `MenubarMenu` takes `open`,
+`MenubarRadioGroup` takes `value`, `defaultValue` and `onValueChange`.
+`MenubarCheckboxItem` and `MenubarRadioItem` both accept `inset` and `disabled`. `MenubarMenu` takes `open`,
 `defaultOpen` and `onOpenChange` when you want to drive a single menu yourself.
 
 ## API Reference
diff --git a/apps/web/content/docs/ui/message.mdx b/apps/web/content/docs/ui/message.mdx
index 20aa62198..799a435ce 100644
--- a/apps/web/content/docs/ui/message.mdx
+++ b/apps/web/content/docs/ui/message.mdx
@@ -41,7 +41,7 @@ import {
 ```
 
 `Message` owns the row: who is talking, which side they sit on, and what goes
-above or below. The actual speech bubble is a [Bubble](/docs/ui/bubble) - the
+above or below. The speech bubble itself is a [Bubble](/docs/ui/bubble). The
 two are designed to be best friends.
 
 ## Composition
@@ -60,7 +60,7 @@ MessageGroup
 
 Set `align="end"` for messages the current user sent. The avatar swaps sides,
 and every bubble, attachment, header and footer inside `MessageContent` moves to
-the end - no need to set `align` on each `Bubble`.
+the end, so you don't need to set `align` on each `Bubble`.
 
 ```tsx
 <Message align="end">
diff --git a/apps/web/content/docs/ui/nullable-number.mdx b/apps/web/content/docs/ui/nullable-number.mdx
index 46f09945a..ad6e64576 100644
--- a/apps/web/content/docs/ui/nullable-number.mdx
+++ b/apps/web/content/docs/ui/nullable-number.mdx
@@ -1,6 +1,6 @@
 ---
 title: Nullable Number
-description: Numeric field paired with a checkbox that toggles the value to null - for "unlimited", "never", "no limit", and similar.
+description: A number field with a checkbox that toggles the value to null, for answers like "unlimited", "never" or "no limit".
 icon: Hash
 ---
 
@@ -9,7 +9,7 @@ icon: Hash
 <Preview name="nullable-number" />
 
 It builds on [Number Field](/docs/ui/number-field), so you get the plus and
-minus buttons, arrow-key stepping and min/max clamping for free - plus one
+minus buttons, arrow-key stepping and min/max clamping for free. On top sits one
 checkbox for when the honest answer is "no limit".
 
 ## Usage
@@ -56,13 +56,12 @@ const formSchema = z.object({
 
 ## Adapting the labels
 
-The three label props are plain text, so the same field works for any domain -
-an unlimited storage cap, a session that never expires, an uncapped rate limit,
-and so on:
+The three label props are plain text, so the same field fits an unlimited
+storage cap, a session that never expires or an uncapped rate limit:
 
-- `unitLabel` - shown right after the input (e.g. `kB`, `minutes`, `%`).
-- `orLabel` - an optional connector rendered before the checkbox (e.g. `or`).
-- `toggleLabel` - the checkbox label; checking it sets the value to `null`.
+- `unitLabel` is shown right after the input (e.g. `kB`, `minutes`, `%`).
+- `orLabel` is an optional connector rendered before the checkbox (e.g. `or`).
+- `toggleLabel` is the checkbox label. Checking it sets the value to `null`.
 
 ```tsx
 <AutoFormNullableNumber
@@ -77,7 +76,7 @@ and so on:
 Any other props (`min`, `max`, `step`, `largeStep`, `format`, `placeholder`,
 …) are forwarded to the underlying
 [Number Field](/docs/ui/number-field#props). Validation comes from the Zod
-schema, while `min` / `max` on the field clamp the buttons and arrow keys - so
+schema, and `min` / `max` on the field clamp the buttons and arrow keys, so
 pass them in both places.
 
 ```tsx
diff --git a/apps/web/content/docs/ui/number-field.mdx b/apps/web/content/docs/ui/number-field.mdx
index f2e7edd5e..d43228eb3 100644
--- a/apps/web/content/docs/ui/number-field.mdx
+++ b/apps/web/content/docs/ui/number-field.mdx
@@ -51,8 +51,8 @@ const formSchema = z.object({
 
 The form stores a real `number`, not a string. Clearing the input stores
 `null`, so pair it with `.optional()` or a `default` when empty is allowed.
-Pass `min`/`max` to the field as well as the schema - the schema validates,
-the props clamp the buttons and the arrow keys.
+Pass `min`/`max` to the field as well as the schema. The schema validates,
+and the props clamp the buttons and the arrow keys.
 
 Need an "unlimited" checkbox next to it? That's
 [Nullable Number](/docs/ui/nullable-number).
@@ -92,12 +92,12 @@ button is released) instead of on every keystroke.
 
 ## Min, max and step
 
-- `min` / `max` - the buttons, arrow keys and scrubbing stop at the limits, and
-  the button that would cross one is disabled. A typed value is clamped on blur.
-- `step` - how much one click or arrow press moves the value (default `1`).
-- `largeStep` - used with <kbd>Shift</kbd> held (default `10`).
-- `smallStep` - used with <kbd>Alt</kbd> (default `0.1`).
-- `snapOnStep` - snap to the nearest multiple of the step instead of adding it
+- `min` / `max` stop the buttons, arrow keys and scrubbing at the limits, and
+  disable the button that would cross one. A typed value is clamped on blur.
+- `step` is how much one click or arrow press moves the value (default `1`).
+- `largeStep` is used with <kbd>Shift</kbd> held (default `10`).
+- `smallStep` is used with <kbd>Alt</kbd> (default `0.1`).
+- `snapOnStep` snaps to the nearest multiple of the step instead of adding it
   to whatever was typed.
 
 ```tsx
@@ -110,7 +110,7 @@ button is released) instead of on every keystroke.
 
 `format` takes [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options),
 so currencies, percentages and units come for free. The value stays a plain
-number - `0.15` shows as `15%`, and typing `20%` gives you `0.2` back.
+number. `0.15` shows as `15%`, and typing `20%` gives you `0.2` back.
 
 <Preview name="number-field-format" />
 
@@ -135,7 +135,7 @@ and English users see `12,345`. Pass `locale` to override it.
 
 ## Scrub area
 
-Wrap the label in `NumberFieldScrubArea` and the label becomes a slider: drag
+Wrap the label in `NumberFieldScrubArea` and the label becomes a slider. Drag
 it left or right to change the value, like in a design tool. Give it the same
 `htmlFor` as the field's `id` so clicking the label still focuses the input.
 
@@ -178,8 +178,8 @@ keeps the value readable and focusable but locks the buttons and the keys.
   <kbd>Shift</kbd> for `largeStep` or <kbd>Alt</kbd> for `smallStep`.
   <kbd>Home</kbd> / <kbd>End</kbd> jump to `min` / `max` when set.
 - The plus and minus buttons are labelled "Increase" and "Decrease" in the
-  user's language and are skipped by <kbd>Tab</kbd> - the keyboard already has
-  the arrow keys. On touch screens their hit area grows to 44px.
+  user's language and are skipped by <kbd>Tab</kbd>, since the keyboard already
+  has the arrow keys. On touch screens their hit area grows to 44px.
 - Name the input with a label (`htmlFor` + `id`), a scrub area, or
   `aria-label`. `AutoFormNumber` does it for you.
 
diff --git a/apps/web/content/docs/ui/pagination.mdx b/apps/web/content/docs/ui/pagination.mdx
index 7c422113c..8daa2f230 100644
--- a/apps/web/content/docs/ui/pagination.mdx
+++ b/apps/web/content/docs/ui/pagination.mdx
@@ -121,7 +121,7 @@ const pageWindow = (current: number, total: number): PageSlot[] => {
 
 Even five numbers get crowded on a phone. Give every number's `PaginationItem`
 `className="hidden sm:block"` and show a "Page 2 of 12" line between the arrows
-instead - the same trick the [Data Table](/docs/ui/data-table) uses:
+instead. The [Data Table](/docs/ui/data-table) uses the same trick:
 
 ```tsx
 <PaginationItem className="sm:hidden">
@@ -165,7 +165,7 @@ your feed deserves something more specific:
   page", "Next page") even when only the chevron is visible.
 - Page links are plain anchors named by their number, so "2" is read as
   "link, 2" rather than a generic "Go to page".
-- `PaginationEllipsis` is hidden from assistive technology - it is decoration,
+- `PaginationEllipsis` is hidden from assistive technology. It is decoration,
   not a link.
 - Announce page changes that do not reload the page, for example with an
   `aria-live="polite"` "Page 2 of 12" line like in the preview.
diff --git a/apps/web/content/docs/ui/resizable.mdx b/apps/web/content/docs/ui/resizable.mdx
index 02c6d94ca..eb6e8fb5a 100644
--- a/apps/web/content/docs/ui/resizable.mdx
+++ b/apps/web/content/docs/ui/resizable.mdx
@@ -29,7 +29,7 @@ import {
 ```
 
 A group always fills its parent with an inline `height: 100%`, so a height
-class on the group itself is ignored - give the **parent** a height instead.
+class on the group itself is ignored. Give the **parent** a height instead.
 Otherwise your beautiful layout is only as tall as its text, which is very
 minimalist but not very useful.
 
@@ -63,8 +63,8 @@ meant to be grabbed.
 
 ## Sizes
 
-`defaultSize`, `minSize` and `maxSize` accept a few units. Mind the type -
-it changes the meaning:
+`defaultSize`, `minSize` and `maxSize` accept a few units, and the type
+changes the meaning:
 
 - a **string** without a unit is a percentage: `"30"` and `"30%"` are the same;
 - a **number** is pixels: `minSize={180}` means 180px, not 180%;
@@ -101,8 +101,8 @@ Need a toggle button? Pass `panelRef` and call `collapse()`, `expand()` or
 
 ## Persisting the layout
 
-The group takes a `defaultLayout` - a map of panel `id` to percentage - and
-reports every finished resize through `onLayoutChanged`. Wire both to storage
+The group's `defaultLayout` maps each panel `id` to a percentage, and
+`onLayoutChanged` reports every finished resize. Wire both to storage
 and the layout survives a reload. Give every panel a stable `id`, since that is
 what the saved layout is keyed by.
 
@@ -149,8 +149,8 @@ export const RememberedLayout = () => {
 ```
 
 `useSyncExternalStore` with a server snapshot of `null` keeps server rendering
-happy: the server renders the default sizes and the browser swaps in the saved
-ones. Prefer `meta.requestedLayout` when saving - it is the layout the user
+happy. The server renders the default sizes, and the browser swaps in the saved
+ones. Prefer `meta.requestedLayout` when saving. It is the layout the user
 asked for, before a small screen squeezed it to fit the constraints.
 
 ## Accessibility
@@ -158,8 +158,8 @@ asked for, before a small screen squeezed it to fit the constraints.
 - Every handle is a focusable `role="separator"` with `aria-valuenow`,
   `aria-valuemin`, `aria-valuemax` and `aria-controls` pointing at the panel it
   resizes.
-- Arrow keys resize by 5% - left and right in a horizontal group, up and down in
-  a vertical one.
+- Arrow keys resize by 5%, left and right in a horizontal group and up and down
+  in a vertical one.
 - `Home` and `End` push the panel to its minimum or maximum size.
 - `Enter` collapses or expands a `collapsible` panel.
 - `F6` jumps to the next handle in the group (`Shift + F6` goes back).
diff --git a/apps/web/content/docs/ui/scroll-fade.mdx b/apps/web/content/docs/ui/scroll-fade.mdx
index c8714d145..1f2b362da 100644
--- a/apps/web/content/docs/ui/scroll-fade.mdx
+++ b/apps/web/content/docs/ui/scroll-fade.mdx
@@ -10,15 +10,15 @@ icon: Blend
 
 ## Usage
 
-Scroll Fade is a Tailwind CSS utility, not a React component - there is nothing
-to import. It ships with the `shadcn` package, and VitNode apps already pull it
+Scroll Fade is a Tailwind CSS utility, not a React component, so there is
+nothing to import. It ships with the `shadcn` package, and VitNode apps already pull it
 in from `src/styles.css`:
 
 ```css
 @import 'shadcn/tailwind.css';
 ```
 
-Add the class to the element that actually scrolls - the one with
+Add the class to the element that actually scrolls, the one with
 `overflow-y-auto` or `overflow-x-auto`:
 
 ```tsx
@@ -30,12 +30,12 @@ The fade follows the scroll position:
 - At rest, the start edge is crisp and the end edge fades to hint that there is
   more below.
 - Mid-scroll, both edges fade.
-- At the end, the end edge sharpens - you have reached the bottom, congrats.
+- At the end, the end edge sharpens. You have reached the bottom, congrats.
 - If the content does not overflow, nothing fades, so you can sprinkle it on any
   list without checking first.
 
 It works with `mask-image`, so it dissolves the content itself instead of
-painting a gradient on top. No colors to match, it just works on any
+painting a gradient on top. There are no colors to match, so it works on any
 background.
 
 | Class              | Fades                                                      |
@@ -135,14 +135,14 @@ state variant:
 ## Browser support
 
 The scroll-aware part is built on CSS scroll-driven animations
-(`animation-timeline: scroll()`) - no JavaScript, no scroll listeners. Browsers
+(`animation-timeline: scroll()`), with no JavaScript and no scroll listeners. Browsers
 without scroll-driven animations get a static fade on every edge the class
-covers, all the time, even at the very top. Content is never hidden, it just
+covers, all the time, even at the very top. Content is never hidden. It just
 loses the "you're at the end" polish.
 
 ## Accessibility
 
-- The fade is purely visual. Every item is still in the DOM and reachable - it
+- The fade is purely visual. Every item is still in the DOM and reachable. It
   only looks softer near the edges.
 - A scroll container without focusable children cannot be scrolled with a
   keyboard unless it can take focus. Give it `tabIndex={0}`, `role="region"`
diff --git a/apps/web/content/docs/ui/shimmer.mdx b/apps/web/content/docs/ui/shimmer.mdx
index 35990e9e6..856355fb5 100644
--- a/apps/web/content/docs/ui/shimmer.mdx
+++ b/apps/web/content/docs/ui/shimmer.mdx
@@ -1,6 +1,6 @@
 ---
 title: Shimmer
-description: A Tailwind CSS utility that sweeps a soft highlight across text - the universal sign for "hang on, I'm working on it".
+description: A Tailwind CSS utility that sweeps a soft highlight across text, the universal sign for "hang on, I'm working on it".
 icon: Sparkles
 ---
 
@@ -10,8 +10,8 @@ icon: Sparkles
 
 ## Usage
 
-Shimmer is a Tailwind CSS utility, not a React component - there is nothing to
-import. It ships with the `shadcn` package, and VitNode apps already pull it in
+Shimmer is a Tailwind CSS utility, not a React component, so there is nothing
+to import. It ships with the `shadcn` package, and VitNode apps already pull it in
 from `src/styles.css`:
 
 ```css
@@ -26,7 +26,7 @@ Add it to any text element:
 
 The highlight is derived from `currentColor`, so it works on muted text, brand
 colors and everything in between. In dark mode it brightens on its own to stay
-visible. It's pure CSS: the text is painted with `background-clip: text` and
+visible. It's pure CSS. The text is painted with `background-clip: text` and
 the highlight loops across it every two seconds.
 
 | Class                     | What it does                                       |
@@ -108,7 +108,7 @@ The sweep follows the reading direction out of the box (right to left in RTL).
 
 ### Play once
 
-`shimmer-once` plays a single sweep - a nice little "done!" when streaming
+`shimmer-once` plays a single sweep, a nice little "done!" when streaming
 finishes. Combine it with `shimmer-duration-<ms>` to set how long it takes, and
 change the element's `key` to play it again:
 
@@ -143,11 +143,11 @@ only where it works:
 ## Accessibility
 
 - With reduced motion turned on, the animation stops and the text renders
-  normally - no setup needed. That rule targets the plain `shimmer` class, so
+  normally, with no setup needed. That rule targets the plain `shimmer` class, so
   if you apply it through a variant (`group-hover:shimmer`), add
   `motion-reduce:shimmer-none` yourself.
 - Shimmer is decoration, not a loading signal. Screen readers and reduced-motion
-  users never see it, so pair it with real text inside `role="status"` - like
+  users never see it, so pair it with real text inside `role="status"`, like
   "Thinking..." in the examples above.
 - Keep it on short status text. A whole paragraph sparkling away is more disco
   than progress.
diff --git a/apps/web/content/docs/ui/spinner.mdx b/apps/web/content/docs/ui/spinner.mdx
index 253aed72a..4cbe5502d 100644
--- a/apps/web/content/docs/ui/spinner.mdx
+++ b/apps/web/content/docs/ui/spinner.mdx
@@ -1,6 +1,6 @@
 ---
 title: Spinner
-description: A little spinning circle that says "hold on, it's coming" - in four sizes and any colour.
+description: A little spinning circle that says "hold on, it's coming". It comes in four sizes and any colour.
 icon: Loader
 ---
 
@@ -38,8 +38,8 @@ It takes the text colour of its surroundings, so `className="text-primary"`
 
 <Preview name="spinner-buttons" />
 
-For a button that's busy, prefer `isLoading` on the [Button](/docs/ui/button) -
-it swaps the label for a spinner, disables the button and announces "Loading".
+For a button that's busy, prefer `isLoading` on the [Button](/docs/ui/button).
+It swaps the label for a spinner, disables the button and announces "Loading".
 Put a `Spinner` in by hand when you want to keep the label visible:
 
 ```tsx
@@ -83,8 +83,8 @@ fresh data:
 </Card>
 ```
 
-Showing a whole section while it loads? Center an `xl` spinner - that's what
-VitNode does for Suspense fallbacks across the AdminCP:
+Showing a whole section while it loads? Center an `xl` spinner. VitNode does
+the same for Suspense fallbacks across the AdminCP:
 
 ```tsx
 <Suspense
diff --git a/apps/web/content/docs/ui/toast.mdx b/apps/web/content/docs/ui/toast.mdx
index e97bc7df5..622a4672d 100644
--- a/apps/web/content/docs/ui/toast.mdx
+++ b/apps/web/content/docs/ui/toast.mdx
@@ -1,6 +1,6 @@
 ---
 title: Toast
-description: Short, friendly notifications that pop into the top-right corner - in five colours, with icons, avatars and actions.
+description: Short, friendly notifications that pop into the top-right corner, with five colours, icons, avatars and actions.
 icon: BellRing
 ---
 
@@ -25,8 +25,8 @@ toast('Event has been created', {
 
 ## Variants
 
-Each variant tints the icon, the title and the action button, while the card
-itself stays neutral - so a toast never shouts louder than it has to.
+Each variant tints the icon, the title and the action button. The card
+itself stays neutral, so a toast never shouts louder than it has to.
 
 ```ts
 toast('Event has been created') // default
@@ -38,10 +38,10 @@ toast.error('Storage is full')
 
 Pick the variant by what happened, not by the colour you fancy:
 
-- `success` - something finished the way the user hoped.
-- `info` - worth knowing, nothing to worry about.
-- `warning` - nothing broke yet, but the user should take a look.
-- `error` - it failed, and the description should say what to do next.
+- `success` when something finished the way the user hoped.
+- `info` for things worth knowing, nothing to worry about.
+- `warning` when nothing broke yet, but the user should take a look.
+- `error` when it failed. The description should say what to do next.
 
 After a create, edit or delete, show a toast with a `description` so people
 know exactly what changed.
@@ -63,7 +63,7 @@ quieter button.
 
 ## With an avatar
 
-Swap the icon for a picture with `ToastAvatar` - great for anything a person
+Swap the icon for a picture with `ToastAvatar`. It suits anything a person
 did, like an invite, a mention or a new message. Without a `src`, or while the
 image is still loading, it shows the first letter of `alt`.
 
@@ -78,12 +78,12 @@ toast('Ada Lovelace invited you', {
 })
 ```
 
-Any other element works as `icon` as well - a custom Lucide icon, an emoji or
+Any other element works as `icon` as well, such as a custom Lucide icon, an emoji or
 your own badge.
 
 ## Message with actions
 
-For anything that reads like a message - a reply, a mention, an invite - use
+For anything that reads like a message, such as a reply, a mention or an invite, use
 `ToastMessage` with `toast.custom`. It lays out an avatar, the sender, a
 timestamp, the text and a row of buttons underneath.
 
@@ -109,7 +109,7 @@ toast.custom(
 )
 ```
 
-Give message toasts a longer `duration` than the usual few seconds - people
+Give message toasts a longer `duration` than the usual few seconds. People
 need time to read, and to decide whether to reply.
 
 ## Loading and promises
@@ -158,7 +158,7 @@ toast('Saved', {
   can jump to the toasts with <kbd>Alt</kbd> + <kbd>T</kbd>.
 - The close button appears on hover and keyboard focus, and is always visible on
   touch screens.
-- Colour is never the only signal - every variant has its own icon too.
+- Colour is never the only signal, since every variant has its own icon too.
 
 ## Documentation
 
diff --git a/apps/web/content/docs/ui/tooltip.mdx b/apps/web/content/docs/ui/tooltip.mdx
index bbe31e442..297888aca 100644
--- a/apps/web/content/docs/ui/tooltip.mdx
+++ b/apps/web/content/docs/ui/tooltip.mdx
@@ -1,6 +1,6 @@
 ---
 title: Tooltip
-description: A tooltip component for displaying additional information on hover or focus.
+description: A small hint that shows extra information on hover or focus.
 icon: MessageCircleMore
 ---
 
@@ -24,9 +24,9 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@vitnode/core/component
 </Tooltip>
 ```
 
-### Faster Tooltips
+### Shorter tooltips
 
-If you don't need custom props for components like `TooltipTrigger` or `TooltipContent`, you can use the `TooltipWithContent` component to enable faster tooltips.
+If you don't need custom props on `TooltipTrigger` or `TooltipContent`, `TooltipWithContent` does the same job in one component.
 
 ```ts
 import { Button } from "@vitnode/core/components/ui/button";
@@ -48,9 +48,9 @@ import { PlayIcon } from "lucide-react";
 
 Got a toolbar full of icon buttons? Wrap it in `TooltipGroup` and use
 `TooltipGroupTrigger` for each button. They all share one tooltip, so moving
-from button to button glides it over - resizing to fit the new text, which
-slides in from the direction you came from - instead of closing and opening
-again every time.
+from button to button glides it over instead of closing and opening it again
+every time. It resizes to fit the new text, and the text slides in from the
+direction you came from.
 
 ```ts
 import {
@@ -82,7 +82,7 @@ import {
 `TooltipContent`. With reduced motion turned on, the tooltip jumps straight to
 the next button instead of gliding.
 
-A tooltip is a hint, not a label - icon buttons still need their own
+A tooltip is a hint, not a label, so icon buttons still need their own
 `aria-label`, as above.
 
 ## API Reference
diff --git a/apps/web/src/docs/examples/data-table-filters.tsx b/apps/web/src/docs/examples/data-table-filters.tsx
index 351b7fabc..f11f5d6ed 100644
--- a/apps/web/src/docs/examples/data-table-filters.tsx
+++ b/apps/web/src/docs/examples/data-table-filters.tsx
@@ -53,6 +53,7 @@ export default function DataTableFiltersExample() {
       resolve={(params) =>
         resolveLocalTable(demoUsers, params, {
           defaultOrder,
+          sortBy: { name: (row) => row.name },
           filters: { role: (row) => row.role, status: (row) => row.status },
         })
       }
diff --git a/apps/web/src/docs/examples/data-table-pagination.tsx b/apps/web/src/docs/examples/data-table-pagination.tsx
index 8aab585a1..15e23f5d0 100644
--- a/apps/web/src/docs/examples/data-table-pagination.tsx
+++ b/apps/web/src/docs/examples/data-table-pagination.tsx
@@ -17,7 +17,10 @@ export default function DataTablePaginationExample() {
       id="docs-pagination-table"
       order={{ columns: ['id', 'name'], defaultOrder }}
       resolve={(params) =>
-        resolveLocalTable(demoUsers, params, { defaultOrder })
+        resolveLocalTable(demoUsers, params, {
+          defaultOrder,
+          sortBy: { id: (row) => row.id, name: (row) => row.name },
+        })
       }
     />
   )
diff --git a/apps/web/src/docs/examples/data-table-search.tsx b/apps/web/src/docs/examples/data-table-search.tsx
index 00e7c67f9..f7832ea68 100644
--- a/apps/web/src/docs/examples/data-table-search.tsx
+++ b/apps/web/src/docs/examples/data-table-search.tsx
@@ -25,6 +25,7 @@ export default function DataTableSearchExample() {
       resolve={(params) =>
         resolveLocalTable(demoUsers, params, {
           defaultOrder,
+          sortBy: { name: (row) => row.name },
           searchIn: (row) => `${row.name} ${row.email}`,
         })
       }
diff --git a/apps/web/src/docs/local-table-data.ts b/apps/web/src/docs/local-table-data.ts
index 5074eeab9..dcdd561ce 100644
--- a/apps/web/src/docs/local-table-data.ts
+++ b/apps/web/src/docs/local-table-data.ts
@@ -13,9 +13,10 @@ interface LocalTableOptions<T> {
   defaultOrder?: TableOrder
   filters?: Record<string, (row: T) => string>
   searchIn?: (row: T) => string
+  sortBy?: Record<string, (row: T) => number | string>
 }
 
-const compare = (a: unknown, b: unknown) =>
+const compare = (a: number | string, b: number | string) =>
   typeof a === 'number' && typeof b === 'number'
     ? a - b
     : String(a).localeCompare(String(b))
@@ -23,7 +24,12 @@ const compare = (a: unknown, b: unknown) =>
 export const resolveLocalTable = <T extends { id: number }>(
   rows: readonly T[],
   params: URLSearchParams,
-  { defaultOrder, filters = {}, searchIn }: LocalTableOptions<T> = {},
+  {
+    defaultOrder,
+    filters = {},
+    searchIn,
+    sortBy = {},
+  }: LocalTableOptions<T> = {},
 ) => {
   const term = readTableSearch(params).trim().toLowerCase()
   let result = [...rows]
@@ -41,14 +47,12 @@ export const resolveLocalTable = <T extends { id: number }>(
 
   if (defaultOrder) {
     const { column, order } = readTableOrder(params, defaultOrder)
+    const read = sortBy[column]
     const direction = order === 'asc' ? 1 : -1
-    result.sort(
-      (a, b) =>
-        compare(
-          (a as Record<string, unknown>)[column],
-          (b as Record<string, unknown>)[column],
-        ) * direction,
-    )
+
+    if (read) {
+      result.sort((a, b) => compare(read(a), read(b)) * direction)
+    }
   }
 
   const pageSize = readTablePageSize(params)
diff --git a/apps/web/src/docs/preview-data-table.tsx b/apps/web/src/docs/preview-data-table.tsx
index b5709f32b..61eac91ce 100644
--- a/apps/web/src/docs/preview-data-table.tsx
+++ b/apps/web/src/docs/preview-data-table.tsx
@@ -15,14 +15,13 @@ type LocalData<T extends DataTableTMin> = Pick<
   'edges' | 'pageInfo'
 >
 
-export function DataTable<T extends DataTableTMin>({
-  resolve,
-  ...props
-}:
-  | (DataTableProps<T> & { resolve?: undefined })
-  | (Omit<DataTableProps<T>, 'edges' | 'pageInfo'> & {
-      resolve: (params: URLSearchParams) => LocalData<T>
-    })) {
+export function DataTable<T extends DataTableTMin>(
+  props:
+    | (DataTableProps<T> & { resolve?: undefined })
+    | (Omit<DataTableProps<T>, 'edges' | 'pageInfo'> & {
+        resolve: (params: URLSearchParams) => LocalData<T>
+      }),
+) {
   const [search, setSearch] = React.useState('')
 
   const navigation = React.useMemo<DataTableNavigation>(
@@ -37,10 +36,13 @@ export function DataTable<T extends DataTableTMin>({
 
   return (
     <DataTableNavigationProvider value={navigation}>
-      {resolve ? (
-        <ContentDataTable<T> {...props} {...resolve(navigation.searchParams)} />
+      {props.resolve ? (
+        <ContentDataTable<T>
+          {...props}
+          {...props.resolve(navigation.searchParams)}
+        />
       ) : (
-        <ContentDataTable<T> {...(props as DataTableProps<T>)} />
+        <ContentDataTable<T> {...props} />
       )}
     </DataTableNavigationProvider>
   )
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/bold-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/bold-action.tsx
index f4333b26e..62f519318 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/bold-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/bold-action.tsx
@@ -3,9 +3,9 @@ import { BoldIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import { Toggle } from "@/components/ui/toggle";
+import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
-import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 import { TooltipShortcut } from "./utils/tooltip-shortcut";
 
 export const BoldAction = () => {
@@ -21,7 +21,7 @@ export const BoldAction = () => {
   });
 
   return (
-    <ToolbarTooltip
+    <TooltipWithContent
       text={
         <>
           {t("bold")} <TooltipShortcut>+B</TooltipShortcut>
@@ -39,6 +39,6 @@ export const BoldAction = () => {
           <BoldIcon />
         </Toggle>
       </div>
-    </ToolbarTooltip>
+    </TooltipWithContent>
   );
 };
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/code-block-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/code-block-action.tsx
index 9f8fe1ea8..0dff9143d 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/code-block-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/code-block-action.tsx
@@ -3,9 +3,9 @@ import { CodeSquareIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import { Toggle } from "@/components/ui/toggle";
+import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
-import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 import { TooltipShortcut } from "./utils/tooltip-shortcut";
 
 export const CodeBlockAction = () => {
@@ -17,7 +17,7 @@ export const CodeBlockAction = () => {
   });
 
   return (
-    <ToolbarTooltip
+    <TooltipWithContent
       text={
         <>
           {t("code_block")}
@@ -36,6 +36,6 @@ export const CodeBlockAction = () => {
           <CodeSquareIcon />
         </Toggle>
       </div>
-    </ToolbarTooltip>
+    </TooltipWithContent>
   );
 };
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/color-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/color-action.tsx
index 994ed6f97..d50baed6c 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/color-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/color-action.tsx
@@ -10,9 +10,9 @@ import {
   PopoverTitle,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
-import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 
 export const ColorAction = () => {
   const t = useTranslations("core.global.editor.color");
@@ -38,7 +38,7 @@ export const ColorAction = () => {
 
   return (
     <Popover>
-      <ToolbarTooltip text={t("label")}>
+      <TooltipWithContent text={t("label")}>
         <PopoverTrigger
           render={
             <Button
@@ -55,7 +55,7 @@ export const ColorAction = () => {
             style={{ backgroundColor: activeColor || "currentColor" }}
           />
         </PopoverTrigger>
-      </ToolbarTooltip>
+      </TooltipWithContent>
 
       <PopoverContent className="w-auto gap-3">
         <PopoverTitle>{t("label")}</PopoverTitle>
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx
index 9f8ecd8b6..72af7e221 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx
@@ -9,8 +9,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Spinner } from "@/components/ui/spinner";
-
-import { ToolbarTooltip } from "./utils/toolbar-tooltip";
+import { TooltipWithContent } from "@/components/ui/tooltip";
 
 const EmojiPicker = React.lazy(async () =>
   import("./emoji/emoji-picker").then(module => ({
@@ -24,7 +23,7 @@ export const EmojiAction = () => {
 
   return (
     <Popover onOpenChange={setOpen} open={open}>
-      <ToolbarTooltip text={t("label")}>
+      <TooltipWithContent text={t("label")}>
         <PopoverTrigger
           render={
             <Button aria-label={t("label")} size="icon-sm" variant="ghost" />
@@ -32,7 +31,7 @@ export const EmojiAction = () => {
         >
           <SmilePlusIcon />
         </PopoverTrigger>
-      </ToolbarTooltip>
+      </TooltipWithContent>
 
       <PopoverContent className="w-76 gap-0 p-0">
         <React.Suspense
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/insert-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/insert-action.tsx
index 535d7d371..69aaca677 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/insert-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/insert-action.tsx
@@ -13,11 +13,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Kbd } from "@/components/ui/kbd";
+import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { BLOCK_COMMANDS } from "../../block-commands";
 import { useToolbarEditor } from "../use-toolbar-editor";
 import { AudioDialog } from "./audio-action";
-import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 
 const INSERT_COMMANDS = BLOCK_COMMANDS.filter(
   command => command.group === "insert" || command.id === "quote",
@@ -31,7 +31,7 @@ export const InsertAction = () => {
   return (
     <>
       <DropdownMenu>
-        <ToolbarTooltip text={t("insert.label")}>
+        <TooltipWithContent text={t("insert.label")}>
           <DropdownMenuTrigger
             render={
               <Button
@@ -45,7 +45,7 @@ export const InsertAction = () => {
             <PlusIcon />
             <ChevronDownIcon className="text-muted-foreground" />
           </DropdownMenuTrigger>
-        </ToolbarTooltip>
+        </TooltipWithContent>
 
         <DropdownMenuContent align="end" className="min-w-64">
           <DropdownMenuGroup>
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/italic-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/italic-action.tsx
index 98f794541..89ebb6391 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/italic-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/italic-action.tsx
@@ -3,9 +3,9 @@ import { ItalicIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import { Toggle } from "@/components/ui/toggle";
+import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
-import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 import { TooltipShortcut } from "./utils/tooltip-shortcut";
 
 export const ItalicAction = () => {
@@ -21,7 +21,7 @@ export const ItalicAction = () => {
   });
 
   return (
-    <ToolbarTooltip
+    <TooltipWithContent
       text={
         <>
           {t("italic")}
@@ -40,6 +40,6 @@ export const ItalicAction = () => {
           <ItalicIcon />
         </Toggle>
       </div>
-    </ToolbarTooltip>
+    </TooltipWithContent>
   );
 };
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/link-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/link-action.tsx
index 2cdfeb1a3..228fe3a10 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/link-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/link-action.tsx
@@ -11,9 +11,9 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Toggle } from "@/components/ui/toggle";
+import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
-import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 
 export const LinkAction = () => {
   const t = useTranslations("core.global.editor.link");
@@ -49,7 +49,7 @@ export const LinkAction = () => {
 
   return (
     <Popover onOpenChange={onOpenChange} open={open}>
-      <ToolbarTooltip text={t("label")}>
+      <TooltipWithContent text={t("label")}>
         <PopoverTrigger
           render={
             <Toggle
@@ -62,7 +62,7 @@ export const LinkAction = () => {
         >
           <LinkIcon />
         </PopoverTrigger>
-      </ToolbarTooltip>
+      </TooltipWithContent>
 
       <PopoverContent align="start" className="w-80">
         <form
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx
index 61136b6cf..c8cbb0a6e 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/list-action.tsx
@@ -3,9 +3,9 @@ import { ListChecksIcon, ListIcon, ListOrderedIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import { Toggle } from "@/components/ui/toggle";
+import { TooltipWithContent } from "@/components/ui/tooltip";
 
 import { useToolbarEditor } from "../use-toolbar-editor";
-import { ToolbarTooltip } from "./utils/toolbar-tooltip";
 import { TooltipShortcut } from "./utils/tooltip-shortcut";
 
 export const ListAction = () => {
@@ -24,7 +24,7 @@ export const ListAction = () => {
 
   return (
     <>
-      <ToolbarTooltip
+      <TooltipWithContent
         text={
           <>
             {t("bullet_list")}
@@ -43,9 +43,9 @@ export const ListAction = () => {
             <ListIcon />
           </Toggle>
         </div>
-      </ToolbarTooltip>
+      </TooltipWithContent>
 
-      <ToolbarTooltip
+      <TooltipWithContent
         text={
           <>
             {t("ordered_list")}
@@ -64,9 +64,9 @@ export const ListAction = () => {
             <ListOrderedIcon />
           </Toggle>
         </div>
-      </ToolbarTooltip>
+      </TooltipWithContent>
 
-      <ToolbarTooltip
+      <TooltipWithContent
         text={
           <>
             {t("task_list")}
@@ -85,7 +85,7 @@ export const ListAction = () => {
             <ListChecksIcon />
           </Toggle>
         </div>
-      </ToolbarTooltip>
+      </TooltipWithContent>
     </>
   );
 };
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/text-format-more/text-format-more.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/text-format-more/text-format-more.tsx
index 56abd41d1..7be5d37e7 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/text-format-more/text-format-more.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/text-format-more/text-format-more.tsx
@@ -26,10 +26,10 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { TooltipWithContent } from "@/components/ui/tooltip";
 import { CtrlOrCommandCharacter } from "@/lib/ctrl-or-command-character";
 
 import { useToolbarEditor } from "../../use-toolbar-editor";
-import { ToolbarTooltip } from "../utils/toolbar-tooltip";
 
 const ALIGNMENTS = [
   { value: "left", icon: <AlignLeftIcon />, shortcut: "L" },
@@ -81,7 +81,7 @@ export const TextFormatMore = () => {
 
   return (
     <DropdownMenu>
-      <ToolbarTooltip text={t("text_format_more.label")}>
+      <TooltipWithContent text={t("text_format_more.label")}>
         <DropdownMenuTrigger
           render={
             <Button
@@ -96,7 +96,7 @@ export const TextFormatMore = () => {
         >
           <EllipsisIcon />
         </DropdownMenuTrigger>
-      </ToolbarTooltip>
+      </TooltipWithContent>
 
       <DropdownMenuContent className="min-w-60">
         {marks.map(mark => (
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/utils/toolbar-tooltip.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/utils/toolbar-tooltip.tsx
deleted file mode 100644
index b6cff2632..000000000
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/utils/toolbar-tooltip.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { TooltipGroupTrigger } from "@/components/ui/tooltip";
-
-export const ToolbarTooltip = ({
-  children,
-  text,
-}: {
-  children: React.ReactElement;
-  text: React.ReactNode;
-}) => <TooltipGroupTrigger content={text} render={children} />;
diff --git a/packages/vitnode/src/components/ui/alert-dialog.tsx b/packages/vitnode/src/components/ui/alert-dialog.tsx
index c4c35c8b6..c50353843 100644
--- a/packages/vitnode/src/components/ui/alert-dialog.tsx
+++ b/packages/vitnode/src/components/ui/alert-dialog.tsx
@@ -5,8 +5,6 @@ import { useTranslations } from "use-intl";
 
 import { Button } from "@/components/ui/button";
 
-import { Skeleton } from "./skeleton";
-
 const AlertDialogContext = React.createContext<{
   open: boolean;
   setOpen?: (value: boolean) => void;
@@ -135,24 +133,6 @@ function AlertDialogFooter({
   );
 }
 
-function AlertDialogFooterSkeleton({
-  className,
-  ...props
-}: Omit<React.ComponentProps<"div">, "children">) {
-  return (
-    <div
-      className={cn(
-        "bg-muted/50 -mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-xl border-t px-6 py-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className,
-      )}
-      data-slot="alert-dialog-footer"
-      {...props}
-    >
-      <Skeleton className="h-9 group-data-[size=sm]/alert-dialog-content:w-full sm:w-24" />
-      <Skeleton className="h-9 group-data-[size=sm]/alert-dialog-content:w-full sm:w-24" />
-    </div>
-  );
-}
 function AlertDialogMedia({
   className,
   ...props
@@ -248,7 +228,6 @@ export {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogFooter,
-  AlertDialogFooterSkeleton,
   AlertDialogHeader,
   AlertDialogMedia,
   AlertDialogOverlay,
diff --git a/packages/vitnode/src/components/ui/cascader.tsx b/packages/vitnode/src/components/ui/cascader.tsx
index 6531495ad..beb77e859 100644
--- a/packages/vitnode/src/components/ui/cascader.tsx
+++ b/packages/vitnode/src/components/ui/cascader.tsx
@@ -18,7 +18,6 @@ import { useTranslations } from "use-intl";
 
 import { useIsMobile } from "@/hooks/use-mobile";
 
-import { useDirection } from "./direction";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 
 export interface CascaderOption {
@@ -31,8 +30,7 @@ export interface CascaderOption {
 const COLUMN_WIDTH = 224;
 const PANEL_TRANSITION = { type: "spring", duration: 0.3, bounce: 0 } as const;
 
-export const isCascaderBranch = (option: CascaderOption) =>
-  !!option.children?.length;
+const isCascaderBranch = (option: CascaderOption) => !!option.children?.length;
 
 export const findCascaderPath = (
   options: readonly CascaderOption[],
@@ -170,7 +168,7 @@ const DRILL_VARIANTS = {
   exit: (offset: number) => ({ opacity: 0, x: `${offset * -40}%` }),
 };
 
-const isRtl = (element: HTMLElement) =>
+const isRtl = (element: Element) =>
   getComputedStyle(element).direction === "rtl";
 
 const panelOf = (element: Element) =>
@@ -250,11 +248,9 @@ function Cascader({
   const [direction, setDirection] = React.useState<-1 | 1>(1);
   const [query, setQuery] = React.useState("");
   const [levelHeight, setLevelHeight] = React.useState<null | number>(null);
-  const textDirection = useDirection();
   const columns = cascaderColumns(options, activePath);
   const results = searchable && query ? searchCascader(options, query) : null;
   const transition = shouldReduceMotion ? { duration: 0 } : PANEL_TRANSITION;
-  const slideOffset = textDirection === "rtl" ? -direction : direction;
   const selectedValues = new Set(selectedPath.map(option => option.value));
 
   const handleOpenChange = (next: boolean) => {
@@ -285,15 +281,16 @@ function Cascader({
   const openBranch = (
     level: number,
     option: CascaderOption,
-    focusPanel: Element | null,
+    panel: Element | null,
+    focusNext: boolean,
   ) => {
-    setDirection(1);
+    setDirection(panel && isRtl(panel) ? -1 : 1);
     setActivePath(current => [...current.slice(0, level), option.value]);
-    if (focusPanel) focusLater(focusPanel, level + 1, "first");
+    if (focusNext) focusLater(panel, level + 1, "first");
   };
 
   const goBack = (panel: Element | null) => {
-    setDirection(-1);
+    setDirection(panel && isRtl(panel) ? 1 : -1);
     focusLater(panel, Math.max(0, activePath.length - 1), "active");
     setActivePath(current => current.slice(0, -1));
   };
@@ -306,7 +303,7 @@ function Cascader({
     if (option.disabled) return;
 
     if (isCascaderBranch(option)) {
-      openBranch(level, option, isDrill ? panel : null);
+      openBranch(level, option, panel, isDrill);
 
       return;
     }
@@ -355,7 +352,7 @@ function Cascader({
 
         if (event.key === forward && isCascaderBranch(option)) {
           event.preventDefault();
-          openBranch(level, option, panel);
+          openBranch(level, option, panel, true);
         } else if (event.key === backward && level > 0) {
           event.preventDefault();
           if (isDrill) {
@@ -409,7 +406,7 @@ function Cascader({
             typeof level === "number" &&
             !isActive
           ) {
-            openBranch(level, option, null);
+            openBranch(level, option, null, false);
           }
         }}
         role="option"
@@ -510,15 +507,11 @@ function Cascader({
           initial={false}
           transition={transition}
         >
-          <AnimatePresence
-            custom={slideOffset}
-            initial={false}
-            mode="popLayout"
-          >
+          <AnimatePresence custom={direction} initial={false} mode="popLayout">
             <PresentColumn
               animate="center"
               className="w-full"
-              custom={slideOffset}
+              custom={direction}
               exit="exit"
               initial="enter"
               key={activePath.slice(0, level).join("/") || "root"}
diff --git a/packages/vitnode/src/components/ui/comparison.tsx b/packages/vitnode/src/components/ui/comparison.tsx
index 8f560f50f..75f2fbcfd 100644
--- a/packages/vitnode/src/components/ui/comparison.tsx
+++ b/packages/vitnode/src/components/ui/comparison.tsx
@@ -12,8 +12,7 @@ import { useTranslations } from "use-intl";
 const KEY_STEP = 5;
 const SHIFT_KEY_STEP = 10;
 
-export const clampPosition = (value: number) =>
-  Math.min(100, Math.max(0, value));
+const clampPosition = (value: number) => Math.min(100, Math.max(0, value));
 
 export const positionFromPointer = (
   clientX: number,
diff --git a/packages/vitnode/src/components/ui/counter.tsx b/packages/vitnode/src/components/ui/counter.tsx
index 35c7a2b37..0af14cd15 100644
--- a/packages/vitnode/src/components/ui/counter.tsx
+++ b/packages/vitnode/src/components/ui/counter.tsx
@@ -6,7 +6,7 @@ import { useTranslations } from "use-intl";
 import { Button } from "./button";
 import { SlidingNumber } from "./sliding-number";
 
-export const clampCounterValue = (value: number, min: number, max: number) =>
+const clampCounterValue = (value: number, min: number, max: number) =>
   Math.min(max, Math.max(min, value));
 
 function Counter({
diff --git a/packages/vitnode/src/components/ui/spinner.tsx b/packages/vitnode/src/components/ui/spinner.tsx
index 2a3ff7221..d15812192 100644
--- a/packages/vitnode/src/components/ui/spinner.tsx
+++ b/packages/vitnode/src/components/ui/spinner.tsx
@@ -49,4 +49,4 @@ function Spinner(props: SpinnerProps) {
   );
 }
 
-export { Spinner, spinnerVariants };
+export { Spinner };

From c1e798bc78c1bf86c132d19dcabbc404c7a07d02 Mon Sep 17 00:00:00 2001
From: aXenDeveloper <axen@vitnode.com>
Date: Sat, 3 Oct 2026 09:51:33 +0200
Subject: [PATCH 3/3] =?UTF-8?q?feat(ui):=20=F0=9F=8E=A8=20enhance=20Counte?=
 =?UTF-8?q?r=20and=20Cascader=20components=20with=20improved=20number=20ha?=
 =?UTF-8?q?ndling=20and=20keyboard=20navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/content/docs/ui/counter.mdx          |  7 +-
 .../ui/hooks/use-intersection-observer.mdx    | 19 +++---
 .../src/components/table/reorder.test.tsx     | 67 +++++++++++++++++++
 .../vitnode/src/components/table/reorder.tsx  | 13 +++-
 .../src/components/ui/cascader.test.tsx       | 44 ++++++++++++
 .../vitnode/src/components/ui/cascader.tsx    | 50 ++++++--------
 .../src/components/ui/sliding-number.test.ts  | 33 +++++++--
 .../src/components/ui/sliding-number.tsx      | 44 +++++++++---
 .../hooks/use-intersection-observer.test.ts   | 32 +++++++--
 .../src/hooks/use-intersection-observer.ts    | 10 ++-
 .../src/hooks/use-local-storage.test.ts       | 30 +++++++++
 .../vitnode/src/hooks/use-local-storage.ts    | 13 ++--
 12 files changed, 287 insertions(+), 75 deletions(-)

diff --git a/apps/web/content/docs/ui/counter.mdx b/apps/web/content/docs/ui/counter.mdx
index 3e13808df..61ebcf7fa 100644
--- a/apps/web/content/docs/ui/counter.mdx
+++ b/apps/web/content/docs/ui/counter.mdx
@@ -56,8 +56,9 @@ import { SlidingNumber } from '@vitnode/core/components/ui/sliding-number'
 ```
 
 It takes the font size and colour of its surroundings and always uses
-tabular figures, so digits don't wobble as they change. It handles whole
-numbers, positive or negative.
+tabular figures, so digits don't wobble as they change. It handles positive
+and negative numbers, decimals included (up to 6 places), so `step={0.5}` on a
+`Counter` shows `0.5`, not a fib.
 
 ## In a form
 
@@ -121,7 +122,7 @@ import { TypeTable } from 'fumadocs-ui/components/type-table'
 <TypeTable
   type={{
     value: {
-      description: 'The whole number to show.',
+      description: 'The number to show. Decimals beyond 6 places are rounded.',
       type: 'number',
       required: true,
     },
diff --git a/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx b/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
index 17fb92f85..b686199a3 100644
--- a/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
+++ b/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
@@ -12,11 +12,11 @@ import { useIntersectionObserver } from '@vitnode/core/hooks/use-intersection-ob
 
 ```tsx
 export const ExampleComponent = () => {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const entry = useIntersectionObserver(ref, { threshold: 0.5 }) // [!code ++]
+  const [element, setElement] = React.useState<HTMLDivElement | null>(null)
+  const entry = useIntersectionObserver(element, { threshold: 0.5 }) // [!code ++]
 
   return (
-    <div ref={ref}>
+    <div ref={setElement}>
       {entry?.isIntersecting ? 'I can see you!' : 'Nobody is looking...'}
     </div>
   )
@@ -29,6 +29,10 @@ or `undefined` until the browser reports the first one. Besides
 `isIntersecting` you also get `intersectionRatio`, `boundingClientRect` and
 friends.
 
+Pass the element itself, kept in state through a callback ref, not a
+`useRef`. That way the hook notices when the element mounts late or gets
+swapped for a new one, and starts watching the right node.
+
 ## Load once, then stop watching
 
 Set `freezeOnceVisible` and the hook stops observing the first time the element
@@ -36,12 +40,12 @@ shows up. Handy for lazy loading or a one-off entrance animation, since there's
 paying for an observer that has nothing left to do.
 
 ```tsx
-const entry = useIntersectionObserver(ref, {
+const entry = useIntersectionObserver(element, {
   freezeOnceVisible: true,
   rootMargin: '200px',
 })
 
-return <div ref={ref}>{entry?.isIntersecting ? <HeavyChart /> : null}</div>
+return <div ref={setElement}>{entry?.isIntersecting ? <HeavyChart /> : null}</div>
 ```
 
 A positive `rootMargin` starts loading a little before the element is on
@@ -50,12 +54,11 @@ screen, so people rarely catch it loading.
 ## Inside a scroll container
 
 By default the hook watches the viewport. To watch a scrollable element
-instead, pass it as `root`. Store it with a callback ref so the hook picks it
-up once it mounts:
+instead, pass it as `root`. Store it the same way as the element:
 
 ```tsx
 const [root, setRoot] = React.useState<HTMLDivElement | null>(null)
-const entry = useIntersectionObserver(targetRef, { root })
+const entry = useIntersectionObserver(element, { root })
 
 return (
   <div className="h-48 overflow-y-auto" ref={setRoot}>
diff --git a/packages/vitnode/src/components/table/reorder.test.tsx b/packages/vitnode/src/components/table/reorder.test.tsx
index 07047be2f..a53307721 100644
--- a/packages/vitnode/src/components/table/reorder.test.tsx
+++ b/packages/vitnode/src/components/table/reorder.test.tsx
@@ -213,6 +213,73 @@ describe("useRowOrderDataTable", () => {
     );
   });
 
+  it("goes back to the saved order when two overlapping drops both fail", async () => {
+    const saves = [
+      Promise.withResolvers<undefined>(),
+      Promise.withResolvers<undefined>(),
+    ];
+    const onReorder = vi
+      .fn()
+      .mockReturnValueOnce(saves[0].promise)
+      .mockReturnValueOnce(saves[1].promise);
+    const { result } = renderHook(() =>
+      useRowOrderDataTable({ edges, onReorder }),
+    );
+
+    act(() => {
+      result.current.reorder(1, 3);
+    });
+    act(() => {
+      result.current.reorder(2, 3);
+    });
+    expect(result.current.rows.map(row => row.id)).toEqual([3, 2, 1]);
+
+    await act(async () => {
+      saves[0].reject(new Error("offline"));
+      await saves[0].promise.catch(() => undefined);
+    });
+    expect(result.current.rows.map(row => row.id)).toEqual([3, 2, 1]);
+
+    await act(async () => {
+      saves[1].reject(new Error("offline"));
+      await saves[1].promise.catch(() => undefined);
+    });
+    expect(result.current.rows.map(row => row.id)).toEqual([1, 2, 3]);
+  });
+
+  it("keeps an earlier drop that is still saving when a later one fails", async () => {
+    const saves = [
+      Promise.withResolvers<undefined>(),
+      Promise.withResolvers<undefined>(),
+    ];
+    const onReorder = vi
+      .fn()
+      .mockReturnValueOnce(saves[0].promise)
+      .mockReturnValueOnce(saves[1].promise);
+    const { result } = renderHook(() =>
+      useRowOrderDataTable({ edges, onReorder }),
+    );
+
+    act(() => {
+      result.current.reorder(1, 3);
+    });
+    act(() => {
+      result.current.reorder(2, 3);
+    });
+
+    await act(async () => {
+      saves[1].reject(new Error("offline"));
+      await saves[1].promise.catch(() => undefined);
+    });
+    expect(result.current.rows.map(row => row.id)).toEqual([2, 3, 1]);
+
+    await act(async () => {
+      saves[0].resolve(undefined);
+      await saves[0].promise;
+    });
+    expect(result.current.rows.map(row => row.id)).toEqual([2, 3, 1]);
+  });
+
   it("follows the server again once it sends a new order", () => {
     const { rerender, result } = renderHook(
       ({ rows }) => useRowOrderDataTable({ edges: rows, onReorder: vi.fn() }),
diff --git a/packages/vitnode/src/components/table/reorder.tsx b/packages/vitnode/src/components/table/reorder.tsx
index 798f2731d..2b58d242b 100644
--- a/packages/vitnode/src/components/table/reorder.tsx
+++ b/packages/vitnode/src/components/table/reorder.tsx
@@ -58,6 +58,7 @@ export const useRowOrderDataTable = <T extends DataTableTMin>({
   const serverIds = edges.map(row => row.id);
   const serverKey = serverIds.join(",");
   const [override, setOverride] = React.useState<null | RowOrderOverride>(null);
+  const unfailedAttemptsRef = React.useRef<RowOrderOverride[]>([]);
   const ids = override?.key === serverKey ? override.ids : serverIds;
   const byId = new Map(edges.map(row => [row.id, row]));
   const rows = ids.flatMap(id => {
@@ -71,7 +72,7 @@ export const useRowOrderDataTable = <T extends DataTableTMin>({
     if (!move || !onReorder) return;
 
     const attempt: RowOrderOverride = { ids: move.ids, key: serverKey };
-    const previous = override;
+    unfailedAttemptsRef.current = [...unfailedAttemptsRef.current, attempt];
     setOverride(attempt);
 
     const persist = async () => {
@@ -82,8 +83,16 @@ export const useRowOrderDataTable = <T extends DataTableTMin>({
           overId: move.overId,
           to: move.to,
         });
+        const position = unfailedAttemptsRef.current.indexOf(attempt);
+        if (position > 0) {
+          unfailedAttemptsRef.current =
+            unfailedAttemptsRef.current.slice(position);
+        }
       } catch {
-        setOverride(current => (current === attempt ? previous : current));
+        unfailedAttemptsRef.current = unfailedAttemptsRef.current.filter(
+          pending => pending !== attempt,
+        );
+        setOverride(unfailedAttemptsRef.current.at(-1) ?? null);
         toast.error(t("reorder_failed"), {
           description: t("reorder_failed_desc"),
         });
diff --git a/packages/vitnode/src/components/ui/cascader.test.tsx b/packages/vitnode/src/components/ui/cascader.test.tsx
index 5b3fe27c0..9c5d83c73 100644
--- a/packages/vitnode/src/components/ui/cascader.test.tsx
+++ b/packages/vitnode/src/components/ui/cascader.test.tsx
@@ -174,4 +174,48 @@ describe("Cascader", () => {
       screen.getByRole("button", { name: "core.global.select_option" }),
     ).toBeTruthy();
   });
+
+  it("moves between enabled options with the arrow keys, skipping disabled ones", async () => {
+    render(
+      <Cascader
+        options={[
+          { disabled: true, label: "Closed", value: "closed" },
+          { label: "Alpha", value: "alpha" },
+          { label: "Beta", value: "beta" },
+        ]}
+      />,
+    );
+
+    openCascader();
+    const alpha = await screen.findByRole("option", { name: "Alpha" });
+    const beta = screen.getByRole("option", { name: "Beta" });
+    alpha.focus();
+
+    fireEvent.keyDown(alpha, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(beta);
+
+    fireEvent.keyDown(beta, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(beta);
+
+    fireEvent.keyDown(beta, { key: "ArrowUp" });
+    expect(document.activeElement).toBe(alpha);
+  });
+
+  it("treats an empty string as a selected value", () => {
+    render(
+      <Cascader
+        defaultValue=""
+        options={[
+          { label: "None", value: "" },
+          { label: "Alpha", value: "alpha" },
+        ]}
+        showClear
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "None" })).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "core.global.clear" }),
+    ).toBeTruthy();
+  });
 });
diff --git a/packages/vitnode/src/components/ui/cascader.tsx b/packages/vitnode/src/components/ui/cascader.tsx
index beb77e859..d1e00780a 100644
--- a/packages/vitnode/src/components/ui/cascader.tsx
+++ b/packages/vitnode/src/components/ui/cascader.tsx
@@ -174,25 +174,26 @@ const isRtl = (element: Element) =>
 const panelOf = (element: Element) =>
   element.closest("[data-slot=cascader-panel]");
 
-const focusOption = (
-  panel: Element | null,
-  level: number | string,
-  pick: "active" | "first" | "last" | number,
-) => {
-  const options = [
+const enabledOptions = (panel: Element | null, level: number | string) =>
+  [
     ...(panel?.querySelectorAll<HTMLButtonElement>(
       `[data-cascader-level="${level}"]:not([disabled])`,
     ) ?? []),
   ].filter(option => !option.closest("[inert]"));
+
+const focusOption = (
+  panel: Element | null,
+  level: number | string,
+  pick: "active" | "first" | "last",
+) => {
+  const options = enabledOptions(panel, level);
   const target =
     pick === "first"
       ? options[0]
       : pick === "last"
         ? options.at(-1)
-        : pick === "active"
-          ? (options.find(option => option.dataset.active === "true") ??
-            options[0])
-          : options[pick];
+        : (options.find(option => option.dataset.active === "true") ??
+          options[0]);
 
   target?.focus();
 };
@@ -240,7 +241,7 @@ function Cascader({
     React.useState(defaultValue);
   const value = valueProp === undefined ? uncontrolledValue : valueProp;
   const selectedPath = React.useMemo(
-    () => (value ? findCascaderPath(options, value) : []),
+    () => (value === null ? [] : findCascaderPath(options, value)),
     [options, value],
   );
   const [open, setOpen] = React.useState(false);
@@ -315,28 +316,28 @@ function Cascader({
   const handleOptionKeyDown = (
     event: React.KeyboardEvent<HTMLButtonElement>,
     level: number | string,
-    index: number,
     option: CascaderOption,
-    count: number,
   ) => {
     const rtl = isRtl(event.currentTarget);
     const forward = rtl ? "ArrowLeft" : "ArrowRight";
     const backward = rtl ? "ArrowRight" : "ArrowLeft";
     const panel = panelOf(event.currentTarget);
+    const siblings = enabledOptions(panel, level);
+    const position = siblings.indexOf(event.currentTarget);
 
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
-        focusOption(panel, level, Math.min(count - 1, index + 1));
+        siblings[Math.min(siblings.length - 1, position + 1)]?.focus();
         break;
       case "ArrowUp":
         event.preventDefault();
-        if (index === 0 && searchable) {
+        if (position <= 0 && searchable) {
           panel
             ?.querySelector<HTMLInputElement>("[data-cascader-search]")
             ?.focus();
         } else {
-          focusOption(panel, level, Math.max(0, index - 1));
+          siblings[Math.max(0, position - 1)]?.focus();
         }
         break;
       case "End":
@@ -368,7 +369,6 @@ function Cascader({
     option: CascaderOption,
     level: number | string,
     index: number,
-    count: number,
     label: React.ReactNode,
     onSelect: (panel: Element | null) => void,
   ) => {
@@ -396,7 +396,7 @@ function Cascader({
           onSelect(panelOf(event.currentTarget));
         }}
         onKeyDown={event => {
-          handleOptionKeyDown(event, level, index, option, count);
+          handleOptionKeyDown(event, level, option);
         }}
         onMouseEnter={() => {
           if (
@@ -436,16 +436,9 @@ function Cascader({
       role="listbox"
     >
       {column.map((option, index) =>
-        renderOption(
-          option,
-          level,
-          index,
-          column.length,
-          option.label,
-          panel => {
-            choose(level, option, panel);
-          },
-        ),
+        renderOption(option, level, index, option.label, panel => {
+          choose(level, option, panel);
+        }),
       )}
     </div>
   );
@@ -482,7 +475,6 @@ function Cascader({
               leaf,
               "search",
               index,
-              results.length,
               path.map(node => node.label).join(separator),
               () => {
                 commit(path);
diff --git a/packages/vitnode/src/components/ui/sliding-number.test.ts b/packages/vitnode/src/components/ui/sliding-number.test.ts
index 09b18152f..86b3d2827 100644
--- a/packages/vitnode/src/components/ui/sliding-number.test.ts
+++ b/packages/vitnode/src/components/ui/sliding-number.test.ts
@@ -21,12 +21,37 @@ describe("digitFaceOffset", () => {
 
 describe("numberPlaces", () => {
   it("lists one place per digit, biggest first", () => {
-    expect(numberPlaces(0)).toEqual([1]);
-    expect(numberPlaces(7)).toEqual([1]);
-    expect(numberPlaces(1204)).toEqual([1000, 100, 10, 1]);
+    expect(numberPlaces(0).exponents).toEqual([0]);
+    expect(numberPlaces(7).exponents).toEqual([0]);
+    expect(numberPlaces(1204)).toEqual({
+      exponents: [3, 2, 1, 0],
+      fractionDigits: 0,
+      scaled: 1204,
+    });
   });
 
   it("ignores the sign", () => {
-    expect(numberPlaces(-42)).toEqual([10, 1]);
+    expect(numberPlaces(-42).exponents).toEqual([1, 0]);
+  });
+
+  it("keeps the fraction digits instead of truncating them", () => {
+    expect(numberPlaces(0.5)).toEqual({
+      exponents: [0, -1],
+      fractionDigits: 1,
+      scaled: 5,
+    });
+    expect(numberPlaces(12.05)).toEqual({
+      exponents: [1, 0, -1, -2],
+      fractionDigits: 2,
+      scaled: 1205,
+    });
+  });
+
+  it("rounds floating point noise away", () => {
+    expect(numberPlaces(0.1 + 0.2)).toEqual({
+      exponents: [0, -1],
+      fractionDigits: 1,
+      scaled: 3,
+    });
   });
 });
diff --git a/packages/vitnode/src/components/ui/sliding-number.tsx b/packages/vitnode/src/components/ui/sliding-number.tsx
index fbab13801..8dd6590d2 100644
--- a/packages/vitnode/src/components/ui/sliding-number.tsx
+++ b/packages/vitnode/src/components/ui/sliding-number.tsx
@@ -12,6 +12,10 @@ import React from "react";
 const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 const ROLL_SPRING = { stiffness: 220, damping: 22, mass: 0.4 };
 const PLACE_TRANSITION = { type: "spring", duration: 0.35, bounce: 0 } as const;
+const PLAIN_NUMBER = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 6,
+  useGrouping: false,
+});
 
 export const digitFaceOffset = (face: number, rolled: number) => {
   const current = ((rolled % 10) + 10) % 10;
@@ -21,9 +25,18 @@ export const digitFaceOffset = (face: number, rolled: number) => {
 };
 
 export const numberPlaces = (value: number) => {
-  const length = String(Math.trunc(Math.abs(value))).length;
+  const [integer = "0", fraction = ""] = PLAIN_NUMBER.format(
+    Math.abs(value),
+  ).split(".");
 
-  return Array.from({ length }, (_, index) => 10 ** (length - index - 1));
+  return {
+    exponents: Array.from(
+      { length: integer.length + fraction.length },
+      (_, index) => integer.length - index - 1,
+    ),
+    fractionDigits: fraction.length,
+    scaled: Number(integer + fraction),
+  };
 };
 
 const DigitFace = ({
@@ -47,9 +60,17 @@ const DigitFace = ({
   );
 };
 
-const DigitRoller = ({ place, value }: { place: number; value: number }) => {
+const DigitRoller = ({
+  exponent,
+  fractionDigits,
+  scaled,
+}: {
+  exponent: number;
+  fractionDigits: number;
+  scaled: number;
+}) => {
   const shouldReduceMotion = useReducedMotion();
-  const target = Math.floor(Math.abs(value) / place);
+  const target = Math.floor(scaled / 10 ** (exponent + fractionDigits));
   const rolled = useSpring(target, ROLL_SPRING);
 
   React.useEffect(() => {
@@ -80,7 +101,7 @@ function SlidingNumber({
   value: number;
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const places = numberPlaces(value);
+  const { exponents, fractionDigits, scaled } = numberPlaces(value);
 
   return (
     <span
@@ -95,20 +116,25 @@ function SlidingNumber({
         aria-hidden="true"
         className="inline-flex items-center leading-none"
       >
-        {value < 0 && <span>-</span>}
+        {value < 0 && scaled > 0 && <span>-</span>}
         <AnimatePresence initial={false}>
-          {places.map(place => (
+          {exponents.map(exponent => (
             <motion.span
               animate={{ opacity: 1, width: "auto" }}
               className="inline-flex overflow-hidden"
               exit={{ opacity: 0, width: 0 }}
               initial={{ opacity: 0, width: 0 }}
-              key={place}
+              key={exponent}
               transition={
                 shouldReduceMotion ? { duration: 0 } : PLACE_TRANSITION
               }
             >
-              <DigitRoller place={place} value={value} />
+              {exponent === -1 && <span>.</span>}
+              <DigitRoller
+                exponent={exponent}
+                fractionDigits={fractionDigits}
+                scaled={scaled}
+              />
             </motion.span>
           ))}
         </AnimatePresence>
diff --git a/packages/vitnode/src/hooks/use-intersection-observer.test.ts b/packages/vitnode/src/hooks/use-intersection-observer.test.ts
index a308fd30e..fb789cc7e 100644
--- a/packages/vitnode/src/hooks/use-intersection-observer.test.ts
+++ b/packages/vitnode/src/hooks/use-intersection-observer.test.ts
@@ -34,7 +34,6 @@ const latestObserver = () => FakeIntersectionObserver.instances.at(-1);
 
 describe("useIntersectionObserver", () => {
   const element = document.createElement("div");
-  const ref = { current: element };
 
   beforeEach(() => {
     FakeIntersectionObserver.instances = [];
@@ -47,7 +46,7 @@ describe("useIntersectionObserver", () => {
 
   it("observes the element with the given options", () => {
     renderHook(() =>
-      useIntersectionObserver(ref, { rootMargin: "20px", threshold: 0.5 }),
+      useIntersectionObserver(element, { rootMargin: "20px", threshold: 0.5 }),
     );
 
     expect(latestObserver()?.observed).toEqual([element]);
@@ -57,8 +56,27 @@ describe("useIntersectionObserver", () => {
     });
   });
 
+  it("waits for the element to mount and follows it when it is replaced", () => {
+    const replacement = document.createElement("div");
+    const { rerender } = renderHook(
+      ({ target }: { target: Element | null }) =>
+        useIntersectionObserver(target),
+      { initialProps: { target: null as Element | null } },
+    );
+
+    expect(FakeIntersectionObserver.instances).toHaveLength(0);
+
+    rerender({ target: element });
+    const first = latestObserver();
+    expect(first?.observed).toEqual([element]);
+
+    rerender({ target: replacement });
+    expect(first?.disconnect).toHaveBeenCalled();
+    expect(latestObserver()?.observed).toEqual([replacement]);
+  });
+
   it("returns the latest entry", () => {
-    const { result } = renderHook(() => useIntersectionObserver(ref));
+    const { result } = renderHook(() => useIntersectionObserver(element));
 
     expect(result.current).toBeUndefined();
 
@@ -75,7 +93,7 @@ describe("useIntersectionObserver", () => {
 
   it("does not re-create the observer for a new threshold array", () => {
     const { rerender } = renderHook(() =>
-      useIntersectionObserver(ref, { threshold: [0, 0.5, 1] }),
+      useIntersectionObserver(element, { threshold: [0, 0.5, 1] }),
     );
 
     rerender();
@@ -85,7 +103,7 @@ describe("useIntersectionObserver", () => {
 
   it("stops observing once visible when freezeOnceVisible is set", () => {
     const { result } = renderHook(() =>
-      useIntersectionObserver(ref, { freezeOnceVisible: true }),
+      useIntersectionObserver(element, { freezeOnceVisible: true }),
     );
     const observer = latestObserver();
 
@@ -99,7 +117,7 @@ describe("useIntersectionObserver", () => {
   });
 
   it("disconnects on unmount", () => {
-    const { unmount } = renderHook(() => useIntersectionObserver(ref));
+    const { unmount } = renderHook(() => useIntersectionObserver(element));
 
     unmount();
 
@@ -109,7 +127,7 @@ describe("useIntersectionObserver", () => {
   it("does nothing when the browser has no IntersectionObserver", () => {
     vi.unstubAllGlobals();
 
-    const { result } = renderHook(() => useIntersectionObserver(ref));
+    const { result } = renderHook(() => useIntersectionObserver(element));
 
     expect("IntersectionObserver" in window).toBe(false);
     expect(result.current).toBeUndefined();
diff --git a/packages/vitnode/src/hooks/use-intersection-observer.ts b/packages/vitnode/src/hooks/use-intersection-observer.ts
index a520d4a5c..8cfc7e4a4 100644
--- a/packages/vitnode/src/hooks/use-intersection-observer.ts
+++ b/packages/vitnode/src/hooks/use-intersection-observer.ts
@@ -8,7 +8,7 @@ interface UseIntersectionObserverOptions {
 }
 
 export function useIntersectionObserver(
-  elementRef: React.RefObject<Element | null>,
+  target: Element | null,
   {
     threshold = 0,
     root = null,
@@ -23,9 +23,7 @@ export function useIntersectionObserver(
     : String(threshold);
 
   React.useEffect(() => {
-    const node = elementRef.current;
-
-    if (!node || isFrozen || !("IntersectionObserver" in window)) return;
+    if (!target || isFrozen || !("IntersectionObserver" in window)) return;
 
     const observer = new IntersectionObserver(
       ([nextEntry]) => {
@@ -34,12 +32,12 @@ export function useIntersectionObserver(
       { root, rootMargin, threshold: thresholdKey.split(",").map(Number) },
     );
 
-    observer.observe(node);
+    observer.observe(target);
 
     return () => {
       observer.disconnect();
     };
-  }, [elementRef, isFrozen, root, rootMargin, thresholdKey]);
+  }, [target, isFrozen, root, rootMargin, thresholdKey]);
 
   return entry;
 }
diff --git a/packages/vitnode/src/hooks/use-local-storage.test.ts b/packages/vitnode/src/hooks/use-local-storage.test.ts
index 8c6c8021a..29c55e002 100644
--- a/packages/vitnode/src/hooks/use-local-storage.test.ts
+++ b/packages/vitnode/src/hooks/use-local-storage.test.ts
@@ -105,4 +105,34 @@ describe("useLocalStorage", () => {
 
     expect(result.current[0]).toBe("b");
   });
+
+  it("shows the in-memory value when storage is readable but full", () => {
+    window.localStorage.setItem("full", '"stored"');
+    const setItem = vi
+      .spyOn(Storage.prototype, "setItem")
+      .mockImplementation(() => {
+        throw new Error("QuotaExceededError");
+      });
+    vi.spyOn(Storage.prototype, "removeItem").mockImplementation(() => {
+      throw new Error("QuotaExceededError");
+    });
+    const { result } = renderHook(() => useLocalStorage("full", "default"));
+
+    act(() => {
+      result.current[1]("updated");
+    });
+    expect(result.current[0]).toBe("updated");
+
+    act(() => {
+      result.current[2]();
+    });
+    expect(result.current[0]).toBe("default");
+
+    setItem.mockRestore();
+    act(() => {
+      result.current[1]("saved");
+    });
+    expect(result.current[0]).toBe("saved");
+    expect(window.localStorage.getItem("full")).toBe('"saved"');
+  });
 });
diff --git a/packages/vitnode/src/hooks/use-local-storage.ts b/packages/vitnode/src/hooks/use-local-storage.ts
index 396803182..144f07ddb 100644
--- a/packages/vitnode/src/hooks/use-local-storage.ts
+++ b/packages/vitnode/src/hooks/use-local-storage.ts
@@ -2,13 +2,15 @@ import React from "react";
 
 type SetLocalStorageValue<T> = (value: ((previous: T) => T) | T) => void;
 
-const memoryFallback = new Map<string, string>();
+const memoryFallback = new Map<string, null | string>();
 
 const readRaw = (key: string): null | string => {
+  if (memoryFallback.has(key)) return memoryFallback.get(key) ?? null;
+
   try {
     return window.localStorage.getItem(key);
   } catch {
-    return memoryFallback.get(key) ?? null;
+    return null;
   }
 };
 
@@ -19,12 +21,9 @@ const writeRaw = (key: string, raw: null | string) => {
     } else {
       window.localStorage.setItem(key, raw);
     }
+    memoryFallback.delete(key);
   } catch {
-    if (raw === null) {
-      memoryFallback.delete(key);
-    } else {
-      memoryFallback.set(key, raw);
-    }
+    memoryFallback.set(key, raw);
   }
 
   window.dispatchEvent(new StorageEvent("storage", { key }));