diff --git a/.cursor/rules/design-system-not-kitchen-sink.mdc b/.cursor/rules/design-system-not-kitchen-sink.mdc
new file mode 100644
index 0000000000..01516e161a
--- /dev/null
+++ b/.cursor/rules/design-system-not-kitchen-sink.mdc
@@ -0,0 +1,23 @@
+---
+description: Facelift and kitchen-sink work changes the Vibe design system itself — kitchen-sink is only a preview surface, never the source of design changes.
+alwaysApply: true
+---
+
+# Design System Changes vs Kitchen Sink
+
+## Core rule
+
+**Every design change must be made on the Vibe design system itself**, not on the kitchen-sink instance that displays it.
+
+Kitchen-sink (`packages/kitchen-sink`) is a **preview / exploration surface** for reviewing components and variants. It exists so we can see the design system while we change it. It is **not** where design work lives.
+
+## What this means in practice
+
+- Change components, tokens, styles, and APIs in the real packages (`packages/core`, `packages/components/*`, `packages/style`, etc.).
+- Use kitchen-sink to **show** those changes (gallery pages, screens, theme toggles).
+- Do **not** “fix” a visual issue by restyling or forking behavior only inside kitchen-sink demos, sections, or gallery wrappers.
+- If a kitchen-sink gallery or section needs an update, it should only reflect or exercise the design-system change — not replace it.
+
+## Why
+
+We are changing the **design system**, so consumers of `@vibe/core` (and related packages) get the new design. Kitchen-sink-only tweaks would leave the actual system unchanged.
diff --git a/CLAUDE.md b/CLAUDE.md
index 95eca3c8ae..76a40aeb61 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -6,6 +6,14 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 The **Vibe Design System** is monday.com's official React component library, managed as a Lerna monorepo with Yarn Workspaces. The main package `@vibe/core` provides the primary component library, while specialized packages handle icons, testing utilities, codemods, and more.
 
+## Design System vs Kitchen Sink
+
+**Every design change must be made on the Vibe design system itself**, not on the kitchen-sink instance that displays it.
+
+- Change components, tokens, styles, and APIs in the real packages (`packages/core`, `packages/components/*`, `packages/style`, etc.).
+- Use `packages/kitchen-sink` only as a **preview / exploration surface** to review variants while redesigning.
+- Do **not** fix or redesign visuals only inside kitchen-sink demos, sections, or gallery wrappers — that leaves the actual design system unchanged for consumers of `@vibe/core`.
+
 ## Development Commands
 
 ### Building and Testing
diff --git a/packages/kitchen-sink/src/App.tsx b/packages/kitchen-sink/src/App.tsx
index c61bf7ef2a..bafab2f82c 100644
--- a/packages/kitchen-sink/src/App.tsx
+++ b/packages/kitchen-sink/src/App.tsx
@@ -3,8 +3,7 @@ import { AppThemeShell } from "./components/AppThemeShell";
 import { LeftPane } from "./components/LeftPane";
 import { useKitchenSink } from "./context/KitchenSinkContext";
 import { ComponentsView } from "./components/ComponentsView";
-import { DropdownGalleryView } from "./components/DropdownGalleryView";
-import { ToastGalleryView } from "./components/ToastGalleryView";
+import { componentGalleries, isComponentGalleryId } from "./components/componentGalleries";
 import { CompareView } from "./components/CompareView";
 import { ThemePanel } from "./components/ThemePanel";
 import { ScreensView } from "./components/ScreensView";
@@ -13,6 +12,11 @@ export default function App() {
   const { view, componentSubPage } = useKitchenSink();
   const [leftPaneCollapsed, setLeftPaneCollapsed] = useState(false);
 
+  const GalleryView =
+    view === "components" && isComponentGalleryId(componentSubPage)
+      ? componentGalleries[componentSubPage]
+      : null;
+
   return (
     <AppThemeShell>
       <div
@@ -24,8 +28,7 @@ export default function App() {
         />
         <main className={`main-area${view === "screens" ? " main-area--no-padding" : ""}`}>
           {view === "components" && componentSubPage === "grid" && <ComponentsView />}
-          {view === "components" && componentSubPage === "toast" && <ToastGalleryView />}
-          {view === "components" && componentSubPage === "dropdown" && <DropdownGalleryView />}
+          {GalleryView && <GalleryView />}
           {view === "compare" && <CompareView />}
           {view === "theme" && <ThemePanel />}
           {view === "screens" && <ScreensView />}
diff --git a/packages/kitchen-sink/src/components/ButtonGalleryView.tsx b/packages/kitchen-sink/src/components/ButtonGalleryView.tsx
new file mode 100644
index 0000000000..b98bef1f74
--- /dev/null
+++ b/packages/kitchen-sink/src/components/ButtonGalleryView.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@vibe/core";
+import { Bolt, Calendar } from "@vibe/icons";
+import { ComponentGallery, type GalleryVariation } from "./ComponentGallery";
+
+const buttonVariations: GalleryVariation[] = [
+  {
+    id: "kind-primary",
+    label: "Kind — Primary",
+    render: () => <Button kind="primary">Primary</Button>,
+  },
+  {
+    id: "kind-secondary",
+    label: "Kind — Secondary",
+    render: () => <Button kind="secondary">Secondary</Button>,
+  },
+  {
+    id: "kind-tertiary",
+    label: "Kind — Tertiary",
+    render: () => <Button kind="tertiary">Tertiary</Button>,
+  },
+  {
+    id: "size-large",
+    label: "Size — Large",
+    render: () => <Button size="large">Large</Button>,
+  },
+  {
+    id: "size-medium",
+    label: "Size — Medium",
+    render: () => <Button size="medium">Medium</Button>,
+  },
+  {
+    id: "size-small",
+    label: "Size — Small",
+    render: () => <Button size="small">Small</Button>,
+  },
+  {
+    id: "disabled-primary",
+    label: "Disabled — Primary",
+    render: () => <Button disabled>Primary</Button>,
+  },
+  {
+    id: "disabled-secondary",
+    label: "Disabled — Secondary",
+    render: () => (
+      <Button kind="secondary" disabled>
+        Secondary
+      </Button>
+    ),
+  },
+  {
+    id: "disabled-tertiary",
+    label: "Disabled — Tertiary",
+    render: () => (
+      <Button kind="tertiary" disabled>
+        Tertiary
+      </Button>
+    ),
+  },
+  {
+    id: "state-active",
+    label: "State — Active",
+    render: () => <Button active>Active</Button>,
+  },
+  {
+    id: "color-positive",
+    label: "Color — Positive",
+    render: () => <Button color="positive">Positive</Button>,
+  },
+  {
+    id: "color-negative",
+    label: "Color — Negative",
+    render: () => <Button color="negative">Negative</Button>,
+  },
+  {
+    id: "icon-left",
+    label: "Icon — Left",
+    render: () => <Button leftIcon={Calendar}>Left icon</Button>,
+  },
+  {
+    id: "icon-right",
+    label: "Icon — Right",
+    render: () => <Button rightIcon={Calendar}>Right icon</Button>,
+  },
+  {
+    id: "icon-both",
+    label: "Icon — Both sides",
+    render: () => (
+      <Button leftIcon={Bolt} rightIcon={Bolt}>
+        Both icons
+      </Button>
+    ),
+  },
+  {
+    id: "loading",
+    label: "State — Loading",
+    render: () => <Button loading>Loading</Button>,
+  },
+];
+
+export function ButtonGalleryView() {
+  return (
+    <ComponentGallery
+      title="Button"
+      description="All button variations currently supported by the component."
+      variations={buttonVariations}
+    />
+  );
+}
diff --git a/packages/kitchen-sink/src/components/ButtonGroupGalleryView.tsx b/packages/kitchen-sink/src/components/ButtonGroupGalleryView.tsx
new file mode 100644
index 0000000000..701cb2a800
--- /dev/null
+++ b/packages/kitchen-sink/src/components/ButtonGroupGalleryView.tsx
@@ -0,0 +1,80 @@
+import { ButtonGroup } from "@vibe/core";
+import { ComponentGallery, type GalleryVariation } from "./ComponentGallery";
+
+const options = [
+  { value: 1, text: "Alpha" },
+  { value: 2, text: "Beta" },
+  { value: 3, text: "Gamma" },
+  { value: 4, text: "Delta" },
+];
+
+const buttonGroupVariations: GalleryVariation[] = [
+  {
+    id: "kind-secondary",
+    label: "Kind — Secondary (default)",
+    render: () => (
+      <ButtonGroup groupAriaLabel="Secondary button group" options={options} value={1} kind="secondary" />
+    ),
+  },
+  {
+    id: "kind-tertiary",
+    label: "Kind — Tertiary",
+    render: () => (
+      <ButtonGroup groupAriaLabel="Tertiary button group" options={options} value={1} kind="tertiary" />
+    ),
+  },
+  {
+    id: "size-medium",
+    label: "Size — Medium",
+    render: () => (
+      <ButtonGroup groupAriaLabel="Medium button group" options={options} value={1} size="medium" />
+    ),
+  },
+  {
+    id: "size-small",
+    label: "Size — Small",
+    render: () => (
+      <ButtonGroup groupAriaLabel="Small button group" options={options} value={1} size="small" />
+    ),
+  },
+  {
+    id: "disabled",
+    label: "State — Disabled",
+    render: () => <ButtonGroup groupAriaLabel="Disabled button group" options={options} disabled />,
+  },
+  {
+    id: "disabled-single",
+    label: "State — Single option disabled",
+    render: () => (
+      <ButtonGroup
+        groupAriaLabel="Button group with disabled option"
+        options={[
+          { value: 1, text: "Alpha" },
+          { value: 2, text: "Beta" },
+          { value: 3, text: "Gamma" },
+          { value: 4, text: "Delta", disabled: true, tooltipContent: "Unavailable option" },
+        ]}
+        value={1}
+      />
+    ),
+  },
+  {
+    id: "full-width",
+    label: "Layout — Full width",
+    render: () => (
+      <div style={{ width: "100%" }}>
+        <ButtonGroup groupAriaLabel="Full width button group" options={options} value={1} fullWidth />
+      </div>
+    ),
+  },
+];
+
+export function ButtonGroupGalleryView() {
+  return (
+    <ComponentGallery
+      title="Button Group"
+      description="All button group variations currently supported by the component."
+      variations={buttonGroupVariations}
+    />
+  );
+}
diff --git a/packages/kitchen-sink/src/components/ChipGalleryView.tsx b/packages/kitchen-sink/src/components/ChipGalleryView.tsx
new file mode 100644
index 0000000000..ca05311eab
--- /dev/null
+++ b/packages/kitchen-sink/src/components/ChipGalleryView.tsx
@@ -0,0 +1,76 @@
+import { Chips } from "@vibe/core";
+import { Email } from "@vibe/icons";
+import { ComponentGallery, type GalleryVariation } from "./ComponentGallery";
+
+const chipVariations: GalleryVariation[] = [
+  {
+    id: "default",
+    label: "Default",
+    render: () => <Chips label="This is a chip" readOnly />,
+  },
+  {
+    id: "color-primary",
+    label: "Color — Primary",
+    render: () => <Chips label="Primary" color="primary" readOnly />,
+  },
+  {
+    id: "color-positive",
+    label: "Color — Positive",
+    render: () => <Chips label="Positive" color="positive" readOnly />,
+  },
+  {
+    id: "color-negative",
+    label: "Color — Negative",
+    render: () => <Chips label="Negative" color="negative" readOnly />,
+  },
+  {
+    id: "color-warning",
+    label: "Color — Warning",
+    render: () => <Chips label="Warning" color="warning" readOnly />,
+  },
+  {
+    id: "color-neutral",
+    label: "Color — Neutral",
+    render: () => <Chips label="Neutral" color="neutral" readOnly />,
+  },
+  {
+    id: "readonly",
+    label: "State — Read only",
+    render: () => <Chips label="Read only chip" readOnly />,
+  },
+  {
+    id: "disabled",
+    label: "State — Disabled",
+    render: () => <Chips label="Disabled" disabled />,
+  },
+  {
+    id: "removable",
+    label: "Removable",
+    render: () => <Chips label="Removable chip" onDelete={() => {}} />,
+  },
+  {
+    id: "clickable",
+    label: "Clickable",
+    render: () => <Chips label="Clickable chip" readOnly onClick={() => {}} />,
+  },
+  {
+    id: "left-icon",
+    label: "With left icon",
+    render: () => <Chips label="Left icon" leftIcon={Email} readOnly />,
+  },
+  {
+    id: "right-icon",
+    label: "With right icon",
+    render: () => <Chips label="Right icon" rightIcon={Email} readOnly />,
+  },
+];
+
+export function ChipGalleryView() {
+  return (
+    <ComponentGallery
+      title="Chip"
+      description="All chip variations currently supported by the component."
+      variations={chipVariations}
+    />
+  );
+}
diff --git a/packages/kitchen-sink/src/components/ComponentGallery.tsx b/packages/kitchen-sink/src/components/ComponentGallery.tsx
new file mode 100644
index 0000000000..74fe11a0c8
--- /dev/null
+++ b/packages/kitchen-sink/src/components/ComponentGallery.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+export type GalleryVariation = {
+  id: string;
+  label: string;
+  render: () => ReactNode;
+};
+
+type ComponentGalleryProps = {
+  title: string;
+  description: string;
+  variations: GalleryVariation[];
+};
+
+export function ComponentGallery({ title, description, variations }: ComponentGalleryProps) {
+  return (
+    <div className="component-gallery">
+      <header className="component-gallery-header">
+        <h1 className="component-gallery-title">{title}</h1>
+        <p className="component-gallery-description">{description}</p>
+      </header>
+      <div className="component-gallery-grid">
+        {variations.map(({ id, label, render }) => (
+          <article key={id} className="component-gallery-item">
+            <h2 className="component-gallery-item-label">{label}</h2>
+            <div className="component-gallery-item-preview">{render()}</div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/kitchen-sink/src/components/IconButtonGalleryView.tsx b/packages/kitchen-sink/src/components/IconButtonGalleryView.tsx
new file mode 100644
index 0000000000..e9e1325475
--- /dev/null
+++ b/packages/kitchen-sink/src/components/IconButtonGalleryView.tsx
@@ -0,0 +1,115 @@
+import { IconButton } from "@vibe/core";
+import { Add, Bolt, Doc, Robot } from "@vibe/icons";
+import { ComponentGallery, type GalleryVariation } from "./ComponentGallery";
+
+const iconButtonVariations: GalleryVariation[] = [
+  {
+    id: "kind-primary",
+    label: "Kind — Primary",
+    render: () => <IconButton icon={Bolt} kind="primary" ariaLabel="Primary icon button" />,
+  },
+  {
+    id: "kind-secondary",
+    label: "Kind — Secondary",
+    render: () => <IconButton icon={Bolt} kind="secondary" ariaLabel="Secondary icon button" />,
+  },
+  {
+    id: "kind-tertiary",
+    label: "Kind — Tertiary",
+    render: () => <IconButton icon={Bolt} kind="tertiary" ariaLabel="Tertiary icon button" />,
+  },
+  {
+    id: "size-xxs",
+    label: "Size — XXS",
+    render: () => <IconButton icon={Robot} kind="secondary" size="xxs" ariaLabel="XXS icon button" />,
+  },
+  {
+    id: "size-xs",
+    label: "Size — XS",
+    render: () => <IconButton icon={Robot} kind="secondary" size="xs" ariaLabel="XS icon button" />,
+  },
+  {
+    id: "size-small",
+    label: "Size — Small",
+    render: () => <IconButton icon={Robot} kind="secondary" size="small" ariaLabel="Small icon button" />,
+  },
+  {
+    id: "size-medium",
+    label: "Size — Medium",
+    render: () => <IconButton icon={Robot} kind="secondary" size="medium" ariaLabel="Medium icon button" />,
+  },
+  {
+    id: "size-large",
+    label: "Size — Large",
+    render: () => <IconButton icon={Robot} kind="secondary" size="large" ariaLabel="Large icon button" />,
+  },
+  {
+    id: "active-primary",
+    label: "Active — Primary",
+    render: () => <IconButton icon={Doc} kind="primary" active ariaLabel="Active primary icon button" />,
+  },
+  {
+    id: "active-secondary",
+    label: "Active — Secondary",
+    render: () => <IconButton icon={Doc} kind="secondary" active ariaLabel="Active secondary icon button" />,
+  },
+  {
+    id: "active-tertiary",
+    label: "Active — Tertiary",
+    render: () => <IconButton icon={Doc} kind="tertiary" active ariaLabel="Active tertiary icon button" />,
+  },
+  {
+    id: "disabled-primary",
+    label: "Disabled — Primary",
+    render: () => (
+      <IconButton
+        icon={Doc}
+        kind="primary"
+        disabled
+        disabledReason="This function is not available"
+        ariaLabel="Disabled primary icon button"
+      />
+    ),
+  },
+  {
+    id: "disabled-secondary",
+    label: "Disabled — Secondary",
+    render: () => (
+      <IconButton
+        icon={Doc}
+        kind="secondary"
+        disabled
+        disabledReason="This function is not available"
+        ariaLabel="Disabled secondary icon button"
+      />
+    ),
+  },
+  {
+    id: "disabled-tertiary",
+    label: "Disabled — Tertiary",
+    render: () => (
+      <IconButton
+        icon={Doc}
+        kind="tertiary"
+        disabled
+        disabledReason="This function is not available"
+        ariaLabel="Disabled tertiary icon button"
+      />
+    ),
+  },
+  {
+    id: "default-add",
+    label: "Default — Add",
+    render: () => <IconButton icon={Add} ariaLabel="Add" onClick={() => {}} />,
+  },
+];
+
+export function IconButtonGalleryView() {
+  return (
+    <ComponentGallery
+      title="Icon Button"
+      description="All icon button variations currently supported by the component."
+      variations={iconButtonVariations}
+    />
+  );
+}
diff --git a/packages/kitchen-sink/src/components/LabelGalleryView.tsx b/packages/kitchen-sink/src/components/LabelGalleryView.tsx
new file mode 100644
index 0000000000..4b9768e346
--- /dev/null
+++ b/packages/kitchen-sink/src/components/LabelGalleryView.tsx
@@ -0,0 +1,87 @@
+import { Label } from "@vibe/core";
+import { ComponentGallery, type GalleryVariation } from "./ComponentGallery";
+
+const labelVariations: GalleryVariation[] = [
+  {
+    id: "kind-fill",
+    label: "Kind — Fill",
+    render: () => <Label text="New" />,
+  },
+  {
+    id: "kind-line",
+    label: "Kind — Outline (line)",
+    render: () => <Label text="New" kind="line" />,
+  },
+  {
+    id: "size-medium",
+    label: "Size — Medium",
+    render: () => <Label text="New" size="medium" />,
+  },
+  {
+    id: "size-small",
+    label: "Size — Small",
+    render: () => <Label text="New" size="small" />,
+  },
+  {
+    id: "color-primary-fill",
+    label: "Color — Primary fill",
+    render: () => <Label text="New" color="primary" />,
+  },
+  {
+    id: "color-positive-fill",
+    label: "Color — Positive fill",
+    render: () => <Label text="New" color="positive" />,
+  },
+  {
+    id: "color-negative-fill",
+    label: "Color — Negative fill",
+    render: () => <Label text="New" color="negative" />,
+  },
+  {
+    id: "color-dark-fill",
+    label: "Color — Dark fill",
+    render: () => <Label text="New" color="dark" />,
+  },
+  {
+    id: "color-primary-line",
+    label: "Color — Primary outline",
+    render: () => <Label text="New" color="primary" kind="line" />,
+  },
+  {
+    id: "color-positive-line",
+    label: "Color — Positive outline",
+    render: () => <Label text="New" color="positive" kind="line" />,
+  },
+  {
+    id: "color-negative-line",
+    label: "Color — Negative outline",
+    render: () => <Label text="New" color="negative" kind="line" />,
+  },
+  {
+    id: "color-dark-line",
+    label: "Color — Dark outline",
+    render: () => <Label text="New" color="dark" kind="line" />,
+  },
+  {
+    id: "clickable-fill",
+    label: "Clickable — Fill",
+    render: () => <Label text="New" onClick={() => {}} aria-label="Clickable new feature label" />,
+  },
+  {
+    id: "clickable-line",
+    label: "Clickable — Outline",
+    render: () => (
+      <Label text="New" kind="line" onClick={() => {}} aria-label="Clickable new feature label" />
+    ),
+  },
+];
+
+export function LabelGalleryView() {
+  return (
+    <ComponentGallery
+      title="Label"
+      description="All label variations currently supported by the component."
+      variations={labelVariations}
+    />
+  );
+}
diff --git a/packages/kitchen-sink/src/components/LeftPane.tsx b/packages/kitchen-sink/src/components/LeftPane.tsx
index 3156af55e4..d47ad79f80 100644
--- a/packages/kitchen-sink/src/components/LeftPane.tsx
+++ b/packages/kitchen-sink/src/components/LeftPane.tsx
@@ -1,6 +1,10 @@
 import { ButtonGroup } from "@vibe/core";
 import { useKitchenSink } from "../context/KitchenSinkContext";
 import type { SystemTheme, ThemeSubPage } from "../types";
+import {
+  COMPONENT_GALLERY_LABELS,
+  COMPONENT_GALLERY_ORDER,
+} from "./componentGalleries";
 
 const THEME_FAMILY_OPTIONS = [
   { value: "original", text: "Original" },
@@ -56,20 +60,16 @@ export function LeftPane({ collapsed, onToggleCollapse }: LeftPaneProps) {
         >
           Components
         </button>
-        <button
-          type="button"
-          className={`left-pane-sublink left-pane-sublink--deep${view === "components" && componentSubPage === "toast" ? " is-active" : ""}`}
-          onClick={() => setComponentSubPage("toast")}
-        >
-          Toast
-        </button>
-        <button
-          type="button"
-          className={`left-pane-sublink left-pane-sublink--deep${view === "components" && componentSubPage === "dropdown" ? " is-active" : ""}`}
-          onClick={() => setComponentSubPage("dropdown")}
-        >
-          Dropdown
-        </button>
+        {COMPONENT_GALLERY_ORDER.map((id) => (
+          <button
+            key={id}
+            type="button"
+            className={`left-pane-sublink left-pane-sublink--deep${view === "components" && componentSubPage === id ? " is-active" : ""}`}
+            onClick={() => setComponentSubPage(id)}
+          >
+            {COMPONENT_GALLERY_LABELS[id]}
+          </button>
+        ))}
         <button
           type="button"
           className={`left-pane-sublink${view === "theme" ? " is-active" : ""}`}
diff --git a/packages/kitchen-sink/src/components/TabsGalleryView.tsx b/packages/kitchen-sink/src/components/TabsGalleryView.tsx
new file mode 100644
index 0000000000..080c3c6ec5
--- /dev/null
+++ b/packages/kitchen-sink/src/components/TabsGalleryView.tsx
@@ -0,0 +1,183 @@
+import {
+  Box,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  TabsContext,
+} from "@vibe/core";
+import { Calendar, Chart, Table } from "@vibe/icons";
+import { ComponentGallery, type GalleryVariation } from "./ComponentGallery";
+
+function Panel({ children }: { children: string }) {
+  return (
+    <Box backgroundColor="greyBackgroundColor" padding="medium" style={{ width: "100%", minHeight: 72 }}>
+      {children}
+    </Box>
+  );
+}
+
+const tabsVariations: GalleryVariation[] = [
+  {
+    id: "default",
+    label: "Default",
+    render: () => (
+      <TabsContext>
+        <TabList>
+          <Tab>First</Tab>
+          <Tab>Second</Tab>
+          <Tab>Third</Tab>
+          <Tab disabled>Disabled</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <Panel>First slide</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Second slide</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Third slide</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Fourth slide</Panel>
+          </TabPanel>
+        </TabPanels>
+      </TabsContext>
+    ),
+  },
+  {
+    id: "size-small",
+    label: "Size — Small",
+    render: () => (
+      <TabsContext>
+        <TabList size="small">
+          <Tab>Overview</Tab>
+          <Tab>Activity</Tab>
+          <Tab>Settings</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <Panel>Overview</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Activity</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Settings</Panel>
+          </TabPanel>
+        </TabPanels>
+      </TabsContext>
+    ),
+  },
+  {
+    id: "size-medium",
+    label: "Size — Medium",
+    render: () => (
+      <TabsContext>
+        <TabList size="medium">
+          <Tab>Overview</Tab>
+          <Tab>Activity</Tab>
+          <Tab>Settings</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <Panel>Overview</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Activity</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Settings</Panel>
+          </TabPanel>
+        </TabPanels>
+      </TabsContext>
+    ),
+  },
+  {
+    id: "size-large",
+    label: "Size — Large",
+    render: () => (
+      <TabsContext>
+        <TabList size="large">
+          <Tab>Overview</Tab>
+          <Tab>Activity</Tab>
+          <Tab>Settings</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <Panel>Overview</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Activity</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Settings</Panel>
+          </TabPanel>
+        </TabPanels>
+      </TabsContext>
+    ),
+  },
+  {
+    id: "with-icons",
+    label: "With icons",
+    render: () => (
+      <TabsContext>
+        <TabList>
+          <Tab icon={Table}>Table</Tab>
+          <Tab icon={Chart}>Chart</Tab>
+          <Tab icon={Calendar}>Calendar</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <Panel>Table view</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Chart view</Panel>
+          </TabPanel>
+          <TabPanel>
+            <Panel>Calendar view</Panel>
+          </TabPanel>
+        </TabPanels>
+      </TabsContext>
+    ),
+  },
+  {
+    id: "stretched",
+    label: "Stretched",
+    render: () => (
+      <div style={{ width: "100%" }}>
+        <TabList tabType="stretched">
+          <Tab>First</Tab>
+          <Tab>Second</Tab>
+          <Tab>Third</Tab>
+          <Tab disabled>Disabled</Tab>
+        </TabList>
+      </div>
+    ),
+  },
+  {
+    id: "stretched-underline",
+    label: "Stretched underline",
+    render: () => (
+      <div style={{ width: "100%" }}>
+        <TabList stretchedUnderline>
+          <Tab>First</Tab>
+          <Tab>Second</Tab>
+          <Tab>Third</Tab>
+          <Tab disabled>Disabled</Tab>
+        </TabList>
+      </div>
+    ),
+  },
+];
+
+export function TabsGalleryView() {
+  return (
+    <ComponentGallery
+      title="Tabs"
+      description="All tabs variations currently supported by the component."
+      variations={tabsVariations}
+    />
+  );
+}
diff --git a/packages/kitchen-sink/src/components/TextFieldGalleryView.tsx b/packages/kitchen-sink/src/components/TextFieldGalleryView.tsx
new file mode 100644
index 0000000000..78479a9e78
--- /dev/null
+++ b/packages/kitchen-sink/src/components/TextFieldGalleryView.tsx
@@ -0,0 +1,128 @@
+import type { ReactNode } from "react";
+import { TextField } from "@vibe/core";
+import { Check, CloseSmall, Duplicate, Email } from "@vibe/icons";
+import { ComponentGallery, type GalleryVariation } from "./ComponentGallery";
+
+function FieldFrame({ children }: { children: ReactNode }) {
+  return <div style={{ width: "100%", maxWidth: 300 }}>{children}</div>;
+}
+
+const textFieldVariations: GalleryVariation[] = [
+  {
+    id: "size-small",
+    label: "Size — Small",
+    render: () => (
+      <FieldFrame>
+        <TextField placeholder="Small" size="small" />
+      </FieldFrame>
+    ),
+  },
+  {
+    id: "size-medium",
+    label: "Size — Medium",
+    render: () => (
+      <FieldFrame>
+        <TextField placeholder="Medium" size="medium" />
+      </FieldFrame>
+    ),
+  },
+  {
+    id: "size-large",
+    label: "Size — Large",
+    render: () => (
+      <FieldFrame>
+        <TextField placeholder="Large" size="large" />
+      </FieldFrame>
+    ),
+  },
+  {
+    id: "with-title",
+    label: "With title",
+    render: () => (
+      <FieldFrame>
+        <TextField title="Project name" placeholder="Enter a project name" size="medium" />
+      </FieldFrame>
+    ),
+  },
+  {
+    id: "disabled",
+    label: "State — Disabled",
+    render: () => (
+      <FieldFrame>
+        <TextField placeholder="Disabled" size="medium" disabled />
+      </FieldFrame>
+    ),
+  },
+  {
+    id: "with-icon",
+    label: "With icon",
+    render: () => (
+      <FieldFrame>
+        <TextField placeholder="With icon" iconName={Email} size="medium" />
+      </FieldFrame>
+    ),
+  },
+  {
+    id: "clickable-icon",
+    label: "With clickable icon",
+    render: () => (
+      <FieldFrame>
+        <TextField
+          placeholder="With clickable icon"
+          iconName={Duplicate}
+          iconTooltipContent="Copy"
+          onIconClick={() => {}}
+          size="medium"
+        />
+      </FieldFrame>
+    ),
+  },
+  {
+    id: "validation-success",
+    label: "Validation — Success",
+    render: () => (
+      <FieldFrame>
+        <TextField
+          placeholder="Success"
+          validation={{ status: "success", text: "Looks good" }}
+          iconName={Check}
+          size="medium"
+        />
+      </FieldFrame>
+    ),
+  },
+  {
+    id: "validation-error",
+    label: "Validation — Error",
+    render: () => (
+      <FieldFrame>
+        <TextField
+          title="Name"
+          placeholder="Validate me"
+          validation={{ status: "error", text: "This field needs attention" }}
+          iconName={CloseSmall}
+          size="medium"
+        />
+      </FieldFrame>
+    ),
+  },
+  {
+    id: "required",
+    label: "Required",
+    render: () => (
+      <FieldFrame>
+        <TextField title="Email" placeholder="Required field" size="medium" required />
+      </FieldFrame>
+    ),
+  },
+];
+
+export function TextFieldGalleryView() {
+  return (
+    <ComponentGallery
+      title="Text Field"
+      description="All text field variations currently supported by the component."
+      variations={textFieldVariations}
+    />
+  );
+}
diff --git a/packages/kitchen-sink/src/components/ToastGalleryView.tsx b/packages/kitchen-sink/src/components/ToastGalleryView.tsx
index baa538adba..cda33e0bd7 100644
--- a/packages/kitchen-sink/src/components/ToastGalleryView.tsx
+++ b/packages/kitchen-sink/src/components/ToastGalleryView.tsx
@@ -115,7 +115,7 @@ export function ToastGalleryView() {
       <header className="toast-gallery-header">
         <h1 className="toast-gallery-title">Toast</h1>
         <p className="toast-gallery-description">
-          Original Vibe Toast baseline. Redesign one design element at a time using Vibe components.
+          All toast variations currently supported by the component.
         </p>
       </header>
       <div className="toast-gallery-grid">
diff --git a/packages/kitchen-sink/src/components/componentGalleries.tsx b/packages/kitchen-sink/src/components/componentGalleries.tsx
new file mode 100644
index 0000000000..fd644a009d
--- /dev/null
+++ b/packages/kitchen-sink/src/components/componentGalleries.tsx
@@ -0,0 +1,51 @@
+import type { ComponentType } from "react";
+import type { ComponentGalleryId } from "../types";
+import { ButtonGalleryView } from "./ButtonGalleryView";
+import { ButtonGroupGalleryView } from "./ButtonGroupGalleryView";
+import { ChipGalleryView } from "./ChipGalleryView";
+import { DropdownGalleryView } from "./DropdownGalleryView";
+import { IconButtonGalleryView } from "./IconButtonGalleryView";
+import { LabelGalleryView } from "./LabelGalleryView";
+import { TabsGalleryView } from "./TabsGalleryView";
+import { TextFieldGalleryView } from "./TextFieldGalleryView";
+import { ToastGalleryView } from "./ToastGalleryView";
+
+export const COMPONENT_GALLERY_ORDER: ComponentGalleryId[] = [
+  "icon-button",
+  "button",
+  "button-group",
+  "tabs",
+  "label",
+  "chip",
+  "text-field",
+  "dropdown",
+  "toast",
+];
+
+export const COMPONENT_GALLERY_LABELS: Record<ComponentGalleryId, string> = {
+  "icon-button": "Icon Button",
+  button: "Button",
+  "button-group": "Button Group",
+  tabs: "Tabs",
+  label: "Label",
+  chip: "Chip",
+  "text-field": "Text Field",
+  dropdown: "Dropdown",
+  toast: "Toast",
+};
+
+export const componentGalleries: Record<ComponentGalleryId, ComponentType> = {
+  "icon-button": IconButtonGalleryView,
+  button: ButtonGalleryView,
+  "button-group": ButtonGroupGalleryView,
+  tabs: TabsGalleryView,
+  label: LabelGalleryView,
+  chip: ChipGalleryView,
+  "text-field": TextFieldGalleryView,
+  dropdown: DropdownGalleryView,
+  toast: ToastGalleryView,
+};
+
+export function isComponentGalleryId(value: string): value is ComponentGalleryId {
+  return (COMPONENT_GALLERY_ORDER as string[]).includes(value);
+}
diff --git a/packages/kitchen-sink/src/context/KitchenSinkContext.tsx b/packages/kitchen-sink/src/context/KitchenSinkContext.tsx
index 2f17bace3a..3f73028365 100644
--- a/packages/kitchen-sink/src/context/KitchenSinkContext.tsx
+++ b/packages/kitchen-sink/src/context/KitchenSinkContext.tsx
@@ -7,6 +7,7 @@ import {
   useState,
   type ReactNode,
 } from "react";
+import { isComponentGalleryId } from "../components/componentGalleries";
 import { loadPersistedState, savePersistedState } from "../lib/storage";
 import type {
   AppState,
@@ -41,10 +42,9 @@ export function KitchenSinkProvider({ children }: { children: ReactNode }) {
   }, [state]);
 
   useEffect(() => {
-    if (window.location.hash === "#toast") {
-      setState((s) => ({ ...s, view: "components", componentSubPage: "toast" }));
-    } else if (window.location.hash === "#dropdown") {
-      setState((s) => ({ ...s, view: "components", componentSubPage: "dropdown" }));
+    const hash = window.location.hash.replace(/^#/, "");
+    if (isComponentGalleryId(hash)) {
+      setState((s) => ({ ...s, view: "components", componentSubPage: hash }));
     }
   }, []);
 
diff --git a/packages/kitchen-sink/src/lib/storage.ts b/packages/kitchen-sink/src/lib/storage.ts
index 9945251403..99631db665 100644
--- a/packages/kitchen-sink/src/lib/storage.ts
+++ b/packages/kitchen-sink/src/lib/storage.ts
@@ -1,10 +1,24 @@
+import { isComponentGalleryId } from "../components/componentGalleries";
 import { defaultComponentStates, mergeWithDefaults } from "./defaultComponentStates";
 import { EMPTY_TOKEN_OVERRIDES } from "./tokenDefinitions";
-import type { AppState, PersistedState, ThemeColorOverrides, ThemeFamily, ThemeSubPage } from "../types";
+import type {
+  AppState,
+  ComponentSubPage,
+  PersistedState,
+  ThemeColorOverrides,
+  ThemeSubPage,
+} from "../types";
 import { STORAGE_KEY, STORAGE_VERSION } from "../types";
 
 const VALID_THEME_SUBPAGES: ThemeSubPage[] = ["colors", "radius", "typography"];
 
+function normalizeComponentSubPage(value: unknown, fallback: ComponentSubPage): ComponentSubPage {
+  if (value === "grid" || (typeof value === "string" && isComponentGalleryId(value))) {
+    return value;
+  }
+  return fallback;
+}
+
 function isSystemThemeKey(key: string): key is "light" | "dark" | "black" {
   return key === "light" || key === "dark" || key === "black";
 }
@@ -84,7 +98,7 @@ export function loadPersistedState(): AppState {
       ...base,
       view: parsed.view ?? base.view,
       themeSubPage: normalizeThemeSubPage(parsed.themeSubPage, base.themeSubPage),
-      componentSubPage: parsed.componentSubPage ?? base.componentSubPage,
+      componentSubPage: normalizeComponentSubPage(parsed.componentSubPage, base.componentSubPage),
       systemTheme: parsed.systemTheme ?? base.systemTheme,
       tokenOverrides: {
         ...base.tokenOverrides,
diff --git a/packages/kitchen-sink/src/types.ts b/packages/kitchen-sink/src/types.ts
index 6ee665d6d5..b8c5236c93 100644
--- a/packages/kitchen-sink/src/types.ts
+++ b/packages/kitchen-sink/src/types.ts
@@ -4,7 +4,18 @@ export type SystemTheme = "light" | "dark" | "black";
 export type ThemeFamily = "original" | "facelift";
 export type AppView = "components" | "compare" | "theme" | "screens";
 export type ThemeSubPage = "colors" | "radius" | "typography";
-export type ComponentSubPage = "grid" | "toast" | "dropdown";
+export type ComponentGalleryId =
+  | "icon-button"
+  | "button"
+  | "button-group"
+  | "tabs"
+  | "label"
+  | "chip"
+  | "text-field"
+  | "dropdown"
+  | "toast";
+
+export type ComponentSubPage = "grid" | ComponentGalleryId;
 
 export type ThemeColorOverrides = Partial<Record<SystemTheme, Record<string, string>>>;