diff --git a/apps/website/content/docs/grid/components.mdx b/apps/website/content/docs/grid/components.mdx
index 40122764..0e015ad8 100644
--- a/apps/website/content/docs/grid/components.mdx
+++ b/apps/website/content/docs/grid/components.mdx
@@ -13,8 +13,10 @@ and popup menus. Choose the customization level that matches your task:
 | Replace a control while keeping the grid's behavior   | The [`components` prop](#replacing-a-component)                             |
 | Build a different editor, such as a date-range picker | Column [`renderEditor`](/docs/grid/editing#custom-editors)                  |
 
-The kit is exported from `@pretable/react`. For the default appearance, load
-the `@pretable/ui` skin as described in [Getting started](/docs).
+The kit is exported from `@pretable/react`. These examples assume you have
+imported an `@pretable/ui` theme and the grid skin once at your app’s entry point,
+as shown in [Import the styles](/docs#import-the-styles). Each preview has a
+Code tab with the complete component source.
 
 ## Replacing a component
 
@@ -111,6 +113,8 @@ which the built-in controls emit as `data-pretable-site`.
 A labelled action. `variant="ghost"` (the default) uses a hover tint;
 `variant="link"` uses plain accent text. Other props are native button props.
 
+<Example id="kit-button" />
+
 | Prop      | Type                | Meaning                       |
 | --------- | ------------------- | ----------------------------- |
 | `variant` | `"ghost" \| "link"` | Appearance; defaults to ghost |
@@ -121,6 +125,8 @@ A labelled action. `variant="ghost"` (the default) uses a hover tint;
 An icon-only action. Supply its icon as children and a nonempty `aria-label`
 describing the action, such as `Next month`. The label is required by its type.
 
+<Example id="kit-icon-button" />
+
 | Prop         | Type           | Meaning                  |
 | ------------ | -------------- | ------------------------ |
 | `aria-label` | `string`       | Required accessible name |
@@ -132,20 +138,7 @@ A controlled select-only combobox with a button trigger and a portalled
 listbox. It differs from the [editable enum editor](/docs/grid/editing#enums),
 which accepts typed queries in a text field.
 
-```tsx
-import { PretableSelect } from "@pretable/react";
-
-<PretableSelect
-  aria-label="Filter operator"
-  options={[
-    { value: "contains", label: "Contains" },
-    { value: "equals", label: "Equals" },
-    { value: "regex", label: "Matches regex", disabled: true },
-  ]}
-  value={operator}
-  onChange={setOperator}
-/>;
-```
+<Example id="kit-select" />
 
 | Prop         | Type                              | Meaning                                                                                            |
 | ------------ | --------------------------------- | -------------------------------------------------------------------------------------------------- |
@@ -181,14 +174,7 @@ closed when options are added again.
 only `site` and the `data-pretable-text-input` styling hook. Debouncing, parsing,
 and commit behavior belong to the caller.
 
-```tsx
-<PretableTextInput
-  aria-label="Filter value"
-  type="date"
-  value={value}
-  onChange={(event) => setValue(event.target.value)}
-/>
-```
+<Example id="kit-text-input" />
 
 | Prop   | Type           | Meaning                                                 |
 | ------ | -------------- | ------------------------------------------------------- |
@@ -201,6 +187,8 @@ contract as TextInput. It emits `data-pretable-textarea`. The multiline editor
 handles auto-grow and commit keys; the shared control forwards native props
 such as `rows`, `value`, and `onChange`.
 
+<Example id="kit-textarea" />
+
 | Prop   | Type           | Meaning                                                    |
 | ------ | -------------- | ---------------------------------------------------------- |
 | `site` | `PretableSite` | Placement name; other props are native textarea attributes |
@@ -210,14 +198,7 @@ such as `rows`, `value`, and `onChange`.
 A controlled `<button role="checkbox">` with `aria-checked` set to `true`,
 `false`, or `mixed`. Space and Enter activate it through the native click.
 
-```tsx
-import { PretableCheckbox } from "@pretable/react";
-
-<label>
-  <PretableCheckbox checked={hideGrouped} onCheckedChange={setHideGrouped} />
-  Hide grouped columns
-</label>;
-```
+<Example id="kit-checkbox" />
 
 | Prop              | Type                      | Meaning                                                   |
 | ----------------- | ------------------------- | --------------------------------------------------------- |
diff --git a/apps/website/content/examples/kit-button/SavedViewActions.tsx b/apps/website/content/examples/kit-button/SavedViewActions.tsx
new file mode 100644
index 00000000..f8483d40
--- /dev/null
+++ b/apps/website/content/examples/kit-button/SavedViewActions.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { PretableButton } from "@pretable/react";
+import { useState } from "react";
+
+export function SavedViewActions() {
+  const [applied, setApplied] = useState(false);
+
+  return (
+    <div style={{ padding: 20, fontSize: 13 }}>
+      <p style={{ margin: "0 0 16px" }}>
+        Apply the saved “Open orders” view, then reset to all orders.
+      </p>
+      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+        <PretableButton
+          variant="ghost"
+          site="saved-view-apply"
+          disabled={applied}
+          onClick={() => setApplied(true)}
+        >
+          Apply saved view
+        </PretableButton>
+        <PretableButton
+          variant="link"
+          site="saved-view-reset"
+          disabled={!applied}
+          onClick={() => setApplied(false)}
+        >
+          Reset view
+        </PretableButton>
+      </div>
+      <p role="status" style={{ margin: "16px 0 0" }}>
+        Current view: {applied ? "Open orders" : "All orders"}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/website/content/examples/kit-button/demo.tsx b/apps/website/content/examples/kit-button/demo.tsx
new file mode 100644
index 00000000..1145640c
--- /dev/null
+++ b/apps/website/content/examples/kit-button/demo.tsx
@@ -0,0 +1,5 @@
+import { SavedViewActions } from "./SavedViewActions";
+
+export default function Demo() {
+  return <SavedViewActions />;
+}
diff --git a/apps/website/content/examples/kit-button/example.ts b/apps/website/content/examples/kit-button/example.ts
new file mode 100644
index 00000000..696ef40b
--- /dev/null
+++ b/apps/website/content/examples/kit-button/example.ts
@@ -0,0 +1,9 @@
+import { defineExample } from "../../../lib/docs/examples/define";
+
+export default defineExample({
+  title: "Saved view actions",
+  description:
+    "Apply a saved view with a ghost button, then reset it with a link button. Disabled states prevent repeating the current action.",
+  files: ["SavedViewActions.tsx"],
+  height: 200,
+});
diff --git a/apps/website/content/examples/kit-checkbox/CheckboxSelectionExample.tsx b/apps/website/content/examples/kit-checkbox/CheckboxSelectionExample.tsx
new file mode 100644
index 00000000..c5c665ca
--- /dev/null
+++ b/apps/website/content/examples/kit-checkbox/CheckboxSelectionExample.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { PretableCheckbox } from "@pretable/react";
+import { useState } from "react";
+
+const projects = ["Atlas", "Beacon", "Cedar"];
+
+export function CheckboxSelectionExample() {
+  const [selected, setSelected] = useState<string[]>(["Atlas"]);
+  const allChecked =
+    selected.length === projects.length
+      ? true
+      : selected.length === 0
+        ? false
+        : "mixed";
+
+  return (
+    <div style={{ padding: 20, maxWidth: 360, fontSize: 13 }}>
+      <label
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          marginBottom: 12,
+        }}
+      >
+        <PretableCheckbox
+          checked={allChecked}
+          onCheckedChange={(checked) =>
+            setSelected(checked ? [...projects] : [])
+          }
+        />
+        Select all projects
+      </label>
+      <div style={{ display: "grid", gap: 10 }}>
+        {projects.map((project) => (
+          <label
+            key={project}
+            style={{ display: "flex", alignItems: "center", gap: 8 }}
+          >
+            <PretableCheckbox
+              checked={selected.includes(project)}
+              onCheckedChange={(checked) =>
+                setSelected((current) =>
+                  checked
+                    ? [...current, project]
+                    : current.filter((name) => name !== project),
+                )
+              }
+            />
+            {project}
+          </label>
+        ))}
+      </div>
+      <p role="status" style={{ margin: "12px 0 0" }}>
+        {selected.length} of {projects.length} selected
+      </p>
+    </div>
+  );
+}
diff --git a/apps/website/content/examples/kit-checkbox/demo.tsx b/apps/website/content/examples/kit-checkbox/demo.tsx
new file mode 100644
index 00000000..b118bb8d
--- /dev/null
+++ b/apps/website/content/examples/kit-checkbox/demo.tsx
@@ -0,0 +1,5 @@
+import { CheckboxSelectionExample } from "./CheckboxSelectionExample";
+
+export default function Demo() {
+  return <CheckboxSelectionExample />;
+}
diff --git a/apps/website/content/examples/kit-checkbox/example.ts b/apps/website/content/examples/kit-checkbox/example.ts
new file mode 100644
index 00000000..d537d307
--- /dev/null
+++ b/apps/website/content/examples/kit-checkbox/example.ts
@@ -0,0 +1,9 @@
+import { defineExample } from "../../../lib/docs/examples/define";
+
+export default defineExample({
+  title: "Select projects",
+  description:
+    "Controlled checkboxes share a selected-project list. Select all starts mixed, selects every project on activation, then clears the list on the next activation.",
+  files: ["CheckboxSelectionExample.tsx"],
+  height: 240,
+});
diff --git a/apps/website/content/examples/kit-icon-button/PinViewButton.tsx b/apps/website/content/examples/kit-icon-button/PinViewButton.tsx
new file mode 100644
index 00000000..ea21afea
--- /dev/null
+++ b/apps/website/content/examples/kit-icon-button/PinViewButton.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { PretableIconButton } from "@pretable/react";
+import { useState } from "react";
+
+export function PinViewButton() {
+  const [pinned, setPinned] = useState(false);
+
+  return (
+    <div style={{ padding: 20, fontSize: 13 }}>
+      <p style={{ margin: "0 0 16px" }}>
+        Pin “Open orders” for quick access. Use Enter or Space on the button.
+      </p>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <PretableIconButton
+          aria-label="Pin view"
+          aria-pressed={pinned}
+          site="saved-view-pin"
+          onClick={() => setPinned((value) => !value)}
+        >
+          <svg
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill={pinned ? "currentColor" : "none"}
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M8 3h8l-1 6 4 4v2H5v-2l4-4-1-6Z" />
+            <path d="M12 15v6" />
+          </svg>
+        </PretableIconButton>
+        <span>Open orders</span>
+      </div>
+      <p role="status" style={{ margin: "16px 0 0" }}>
+        {pinned ? "View pinned to quick access." : "View is not pinned."}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/website/content/examples/kit-icon-button/demo.tsx b/apps/website/content/examples/kit-icon-button/demo.tsx
new file mode 100644
index 00000000..95f0adc9
--- /dev/null
+++ b/apps/website/content/examples/kit-icon-button/demo.tsx
@@ -0,0 +1,5 @@
+import { PinViewButton } from "./PinViewButton";
+
+export default function Demo() {
+  return <PinViewButton />;
+}
diff --git a/apps/website/content/examples/kit-icon-button/example.ts b/apps/website/content/examples/kit-icon-button/example.ts
new file mode 100644
index 00000000..4dbf1fcb
--- /dev/null
+++ b/apps/website/content/examples/kit-icon-button/example.ts
@@ -0,0 +1,9 @@
+import { defineExample } from "../../../lib/docs/examples/define";
+
+export default defineExample({
+  title: "Pin a view",
+  description:
+    "Toggle a view’s pinned state with an icon-only button. The accessible name stays the same while aria-pressed and a visible status report the change.",
+  files: ["PinViewButton.tsx"],
+  height: 200,
+});
diff --git a/apps/website/content/examples/kit-select/SelectSortExample.tsx b/apps/website/content/examples/kit-select/SelectSortExample.tsx
new file mode 100644
index 00000000..eb1f4efc
--- /dev/null
+++ b/apps/website/content/examples/kit-select/SelectSortExample.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { PretableSelect, type PretableSelectOption } from "@pretable/react";
+import { useId, useState } from "react";
+
+const projects = [
+  { name: "Atlas", updated: 1 },
+  { name: "Beacon", updated: 3 },
+  { name: "Cedar", updated: 2 },
+];
+
+const options: readonly PretableSelectOption[] = [
+  { value: "ascending", label: "Name: A–Z" },
+  { value: "manual", label: "Manual order (unavailable)", disabled: true },
+  { value: "descending", label: "Name: Z–A" },
+  {
+    value: "recent",
+    label: (
+      <span>
+        Recently updated <small>(newest first)</small>
+      </span>
+    ),
+    // Rich labels need plain text for keyboard typeahead.
+    textValue: "Recently updated",
+  },
+];
+
+export function SelectSortExample() {
+  const selectId = useId();
+  const [sort, setSort] = useState("ascending");
+  const sortedProjects = [...projects].sort((a, b) =>
+    sort === "recent"
+      ? b.updated - a.updated
+      : sort === "descending"
+        ? b.name.localeCompare(a.name)
+        : a.name.localeCompare(b.name),
+  );
+
+  return (
+    <div style={{ padding: 20, maxWidth: 360, fontSize: 13 }}>
+      <label htmlFor={selectId} style={{ display: "block", marginBottom: 8 }}>
+        Sort projects
+      </label>
+      <PretableSelect
+        id={selectId}
+        aria-label="Sort projects"
+        options={options}
+        value={sort}
+        onChange={setSort}
+      />
+      <ol
+        aria-label="Projects"
+        style={{ margin: "16px 0 0", paddingLeft: 24, display: "grid", gap: 6 }}
+      >
+        {sortedProjects.map((project) => (
+          <li key={project.name}>{project.name}</li>
+        ))}
+      </ol>
+    </div>
+  );
+}
diff --git a/apps/website/content/examples/kit-select/demo.tsx b/apps/website/content/examples/kit-select/demo.tsx
new file mode 100644
index 00000000..c021d09d
--- /dev/null
+++ b/apps/website/content/examples/kit-select/demo.tsx
@@ -0,0 +1,5 @@
+import { SelectSortExample } from "./SelectSortExample";
+
+export default function Demo() {
+  return <SelectSortExample />;
+}
diff --git a/apps/website/content/examples/kit-select/example.ts b/apps/website/content/examples/kit-select/example.ts
new file mode 100644
index 00000000..51ddd026
--- /dev/null
+++ b/apps/website/content/examples/kit-select/example.ts
@@ -0,0 +1,9 @@
+import { defineExample } from "../../../lib/docs/examples/define";
+
+export default defineExample({
+  title: "Sort a project list",
+  description:
+    "A controlled Select reorders projects. Open it with ArrowDown, skip the disabled option, or type R to find the rich Recently updated label through textValue.",
+  files: ["SelectSortExample.tsx"],
+  height: 240,
+});
diff --git a/apps/website/content/examples/kit-text-input/SearchPeople.tsx b/apps/website/content/examples/kit-text-input/SearchPeople.tsx
new file mode 100644
index 00000000..cbfa3d5e
--- /dev/null
+++ b/apps/website/content/examples/kit-text-input/SearchPeople.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useId, useState } from "react";
+import { PretableTextInput } from "@pretable/react";
+
+const people = ["Ada Lovelace", "Grace Hopper", "Katherine Johnson"];
+
+export function SearchPeople() {
+  const fieldId = useId();
+  const resultsId = useId();
+  const [query, setQuery] = useState("");
+  const matches = people.filter((name) =>
+    name.toLowerCase().includes(query.trim().toLowerCase()),
+  );
+
+  return (
+    <div style={{ maxWidth: 360 }}>
+      <label htmlFor={fieldId} style={{ display: "block", marginBottom: 8 }}>
+        Find a teammate
+      </label>
+      <PretableTextInput
+        id={fieldId}
+        type="search"
+        placeholder="Try Grace"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        aria-controls={resultsId}
+        style={{ width: "100%" }}
+      />
+      <p role="status" style={{ margin: "8px 0", fontSize: 13 }}>
+        {matches.length} {matches.length === 1 ? "person" : "people"} found
+      </p>
+      <ul id={resultsId} aria-label="Matching teammates" style={{ margin: 0 }}>
+        {matches.map((name) => (
+          <li key={name}>{name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/apps/website/content/examples/kit-text-input/demo.tsx b/apps/website/content/examples/kit-text-input/demo.tsx
new file mode 100644
index 00000000..b0bdccf5
--- /dev/null
+++ b/apps/website/content/examples/kit-text-input/demo.tsx
@@ -0,0 +1,5 @@
+import { SearchPeople } from "./SearchPeople";
+
+export default function Demo() {
+  return <SearchPeople />;
+}
diff --git a/apps/website/content/examples/kit-text-input/example.ts b/apps/website/content/examples/kit-text-input/example.ts
new file mode 100644
index 00000000..417c1108
--- /dev/null
+++ b/apps/website/content/examples/kit-text-input/example.ts
@@ -0,0 +1,9 @@
+import { defineExample } from "../../../lib/docs/examples/define";
+
+export default defineExample({
+  title: "Search teammates",
+  description:
+    "A labelled native search input filters a small list as you type. Clear it to show everyone again.",
+  files: ["SearchPeople.tsx"],
+  height: 220,
+});
diff --git a/apps/website/content/examples/kit-textarea/EditNote.tsx b/apps/website/content/examples/kit-textarea/EditNote.tsx
new file mode 100644
index 00000000..eb27ccdb
--- /dev/null
+++ b/apps/website/content/examples/kit-textarea/EditNote.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { useId, useState } from "react";
+import { PretableButton, PretableTextarea } from "@pretable/react";
+
+export function EditNote() {
+  const fieldId = useId();
+  const hintId = useId();
+  const [draft, setDraft] = useState("");
+  const [saved, setSaved] = useState("");
+
+  return (
+    <div style={{ maxWidth: 420 }}>
+      <label htmlFor={fieldId} style={{ display: "block", marginBottom: 8 }}>
+        Handoff note
+      </label>
+      <PretableTextarea
+        id={fieldId}
+        rows={3}
+        maxLength={160}
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        aria-describedby={hintId}
+        placeholder="What should the next teammate know?"
+        style={{ width: "100%", resize: "vertical" }}
+      />
+      <p id={hintId} style={{ margin: "8px 0", fontSize: 13 }}>
+        Up to 160 characters. Enter adds a new line.
+      </p>
+      <PretableButton
+        disabled={!draft.trim() || draft === saved}
+        onClick={() => setSaved(draft)}
+      >
+        Save note
+      </PretableButton>
+      <p role="status" style={{ whiteSpace: "pre-wrap", margin: "8px 0" }}>
+        {saved ? `Saved note:\n${saved}` : "No note saved yet."}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/website/content/examples/kit-textarea/demo.tsx b/apps/website/content/examples/kit-textarea/demo.tsx
new file mode 100644
index 00000000..1f12a9b4
--- /dev/null
+++ b/apps/website/content/examples/kit-textarea/demo.tsx
@@ -0,0 +1,5 @@
+import { EditNote } from "./EditNote";
+
+export default function Demo() {
+  return <EditNote />;
+}
diff --git a/apps/website/content/examples/kit-textarea/example.ts b/apps/website/content/examples/kit-textarea/example.ts
new file mode 100644
index 00000000..83ee4179
--- /dev/null
+++ b/apps/website/content/examples/kit-textarea/example.ts
@@ -0,0 +1,9 @@
+import { defineExample } from "../../../lib/docs/examples/define";
+
+export default defineExample({
+  title: "Write a handoff note",
+  description:
+    "A controlled textarea uses native rows and maxLength props. Save the note to preview its line breaks.",
+  files: ["EditNote.tsx"],
+  height: 320,
+});
diff --git a/apps/website/e2e/kit-examples-actions.spec.ts b/apps/website/e2e/kit-examples-actions.spec.ts
new file mode 100644
index 00000000..82a73fbc
--- /dev/null
+++ b/apps/website/e2e/kit-examples-actions.spec.ts
@@ -0,0 +1,64 @@
+import { expect, test, type Page } from "@playwright/test";
+
+async function actionExample(page: Page, id: string) {
+  await page.goto("/docs/grid/components", { waitUntil: "domcontentloaded" });
+  const figure = page.locator("figure").filter({
+    has: page.locator(`a[href="/examples/${id}.md"]`),
+  });
+  await figure.scrollIntoViewIfNeeded();
+  await figure.getByRole("tab", { name: "Preview", exact: true }).click();
+  await figure
+    .getByRole("tabpanel", { name: "Preview", exact: true })
+    .scrollIntoViewIfNeeded();
+  return figure;
+}
+
+test("Button applies and resets a saved view with disabled action states", async ({
+  page,
+}) => {
+  const figure = await actionExample(page, "kit-button");
+  const apply = figure.getByRole("button", { name: "Apply saved view" });
+  const reset = figure.getByRole("button", { name: "Reset view", exact: true });
+  const status = figure.getByRole("status");
+
+  await expect(apply).toBeEnabled();
+  await expect(reset).toBeDisabled();
+  await expect(status).toHaveText("Current view: All orders");
+  await expect(apply).toHaveAttribute("data-pretable-variant", "ghost");
+  await expect(reset).toHaveAttribute("data-pretable-variant", "link");
+
+  await apply.click();
+  await expect(status).toHaveText("Current view: Open orders");
+  await expect(apply).toBeDisabled();
+  await expect(reset).toBeEnabled();
+
+  await reset.focus();
+  await page.keyboard.press("Enter");
+  await expect(status).toHaveText("Current view: All orders");
+  await expect(apply).toBeEnabled();
+  await expect(reset).toBeDisabled();
+});
+
+test("IconButton toggles its pressed state with mouse, Enter, and Space", async ({
+  page,
+}) => {
+  const figure = await actionExample(page, "kit-icon-button");
+  const pin = figure.getByRole("button", { name: "Pin view", exact: true });
+  const status = figure.getByRole("status");
+
+  await expect(pin).toHaveAttribute("aria-pressed", "false");
+  await expect(pin.locator("svg")).toHaveAttribute("aria-hidden", "true");
+  await expect(status).toHaveText("View is not pinned.");
+  await pin.click();
+  await expect(pin).toHaveAttribute("aria-pressed", "true");
+  await expect(status).toHaveText("View pinned to quick access.");
+
+  await pin.focus();
+  await page.keyboard.press("Enter");
+  await expect(pin).toHaveAttribute("aria-pressed", "false");
+  await expect(status).toHaveText("View is not pinned.");
+  await page.keyboard.press("Space");
+  await expect(pin).toHaveAttribute("aria-pressed", "true");
+  await expect(pin).toHaveAccessibleName("Pin view");
+  await expect(status).toHaveText("View pinned to quick access.");
+});
diff --git a/apps/website/e2e/kit-examples-choices.spec.ts b/apps/website/e2e/kit-examples-choices.spec.ts
new file mode 100644
index 00000000..90193753
--- /dev/null
+++ b/apps/website/e2e/kit-examples-choices.spec.ts
@@ -0,0 +1,70 @@
+import { expect, test, type Page } from "@playwright/test";
+
+async function choiceExample(page: Page, id: string) {
+  await page.goto("/docs/grid/components", { waitUntil: "domcontentloaded" });
+  const example = page.locator("figure").filter({
+    has: page.locator(`a[href="/examples/${id}.md"]`),
+  });
+  await example.scrollIntoViewIfNeeded();
+  return example;
+}
+
+test("Select sorts projects with keyboard typeahead and skips a disabled option", async ({
+  page,
+}) => {
+  const example = await choiceExample(page, "kit-select");
+  const select = example.getByRole("combobox", { name: "Sort projects" });
+  const projects = example
+    .getByRole("list", { name: "Projects" })
+    .getByRole("listitem");
+  await expect(projects).toHaveText(["Atlas", "Beacon", "Cedar"]);
+  await select.focus();
+  await select.press("ArrowDown");
+  const listbox = page.getByRole("listbox");
+  await expect(listbox).toBeVisible();
+  await expect(
+    listbox.getByRole("option", { name: "Manual order (unavailable)" }),
+  ).toHaveAttribute("aria-disabled", "true");
+  await select.press("ArrowDown");
+  await select.press("Enter");
+  await expect(select).toHaveAttribute("data-pretable-value", "descending");
+  await expect(projects).toHaveText(["Cedar", "Beacon", "Atlas"]);
+  await expect(select).toBeFocused();
+  await select.press("ArrowDown");
+  await select.press("r");
+  await select.press("Enter");
+  await expect(select).toHaveAttribute("data-pretable-value", "recent");
+  await expect(projects).toHaveText(["Beacon", "Cedar", "Atlas"]);
+  await select.press("ArrowDown");
+  await select.press("Home");
+  await select.press("Escape");
+  await expect(select).toHaveAttribute("data-pretable-value", "recent");
+  await expect(listbox).toHaveCount(0);
+});
+
+test("Checkbox select-all moves from mixed to all to none and rows update it", async ({
+  page,
+}) => {
+  const example = await choiceExample(page, "kit-checkbox");
+  const all = example.getByRole("checkbox", { name: "Select all projects" });
+  const atlas = example.getByRole("checkbox", { name: "Atlas", exact: true });
+  const beacon = example.getByRole("checkbox", { name: "Beacon", exact: true });
+  const cedar = example.getByRole("checkbox", { name: "Cedar", exact: true });
+  await expect(all).toHaveAttribute("aria-checked", "mixed");
+  await expect(atlas).toBeChecked();
+  await expect(beacon).not.toBeChecked();
+  await all.focus();
+  await all.press("Space");
+  for (const checkbox of [all, atlas, beacon, cedar])
+    await expect(checkbox).toBeChecked();
+  await all.press("Space");
+  for (const checkbox of [all, atlas, beacon, cedar])
+    await expect(checkbox).not.toBeChecked();
+  await example.getByText("Beacon", { exact: true }).click();
+  await expect(beacon).toBeChecked();
+  await expect(all).toHaveAttribute("aria-checked", "mixed");
+  await beacon.focus();
+  await beacon.press("Enter");
+  await expect(all).not.toBeChecked();
+  await expect(example.getByRole("status")).toHaveText("0 of 3 selected");
+});
diff --git a/apps/website/e2e/kit-examples-fields.spec.ts b/apps/website/e2e/kit-examples-fields.spec.ts
new file mode 100644
index 00000000..3925e554
--- /dev/null
+++ b/apps/website/e2e/kit-examples-fields.spec.ts
@@ -0,0 +1,50 @@
+import { expect, test, type Page } from "@playwright/test";
+
+async function example(page: Page, slug: string) {
+  await page.goto("/docs/grid/components");
+  const figure = page.locator("figure").filter({
+    has: page.locator(`a[href="/examples/${slug}.md"]`),
+  });
+  await figure.scrollIntoViewIfNeeded();
+  return figure;
+}
+
+test("TextInput searches teammates and clears back to the full list", async ({
+  page,
+}) => {
+  const figure = await example(page, "kit-text-input");
+  const field = figure.getByRole("searchbox", { name: "Find a teammate" });
+  await expect(figure.getByRole("listitem")).toHaveCount(3);
+  await field.fill("grace");
+  await expect(figure.getByRole("listitem")).toHaveText(["Grace Hopper"]);
+  await expect(figure.getByRole("status")).toHaveText("1 person found");
+  await field.fill("Nobody");
+  await expect(figure.getByRole("listitem")).toHaveCount(0);
+  await expect(figure.getByRole("status")).toHaveText("0 people found");
+  await field.fill("");
+  await expect(figure.getByRole("listitem")).toHaveCount(3);
+});
+
+test("Textarea preserves a multiline note and disables unchanged saves", async ({
+  page,
+}) => {
+  const figure = await example(page, "kit-textarea");
+  const field = figure.getByRole("textbox", { name: "Handoff note" });
+  const save = figure.getByRole("button", { name: "Save note" });
+  await expect(save).toBeDisabled();
+  await expect(field).toHaveAccessibleDescription(
+    "Up to 160 characters. Enter adds a new line.",
+  );
+  await field.fill("First line");
+  await field.press("End");
+  await field.press("Enter");
+  await field.pressSequentially("Second line");
+  await save.click();
+  await expect(figure.getByRole("status")).toHaveText(
+    "Saved note:\nFirst line\nSecond line",
+  );
+  await expect(field).toHaveValue("First line\nSecond line");
+  await expect(save).toBeDisabled();
+  await field.fill("Revised note");
+  await expect(save).toBeEnabled();
+});
diff --git a/apps/website/lib/docs/examples/demos.generated.ts b/apps/website/lib/docs/examples/demos.generated.ts
index 2d1f4097..322d7bc0 100644
--- a/apps/website/lib/docs/examples/demos.generated.ts
+++ b/apps/website/lib/docs/examples/demos.generated.ts
@@ -30,6 +30,12 @@ import headlessDistinctValuesDemo from "../../../content/examples/headless-disti
 import headlessRebuildProgressDemo from "../../../content/examples/headless-rebuild-progress/demo";
 import headlessTransactionsDemo from "../../../content/examples/headless-transactions/demo";
 import keyboardNavigationDemo from "../../../content/examples/keyboard-navigation/demo";
+import kitButtonDemo from "../../../content/examples/kit-button/demo";
+import kitCheckboxDemo from "../../../content/examples/kit-checkbox/demo";
+import kitIconButtonDemo from "../../../content/examples/kit-icon-button/demo";
+import kitSelectDemo from "../../../content/examples/kit-select/demo";
+import kitTextInputDemo from "../../../content/examples/kit-text-input/demo";
+import kitTextareaDemo from "../../../content/examples/kit-textarea/demo";
 import liveEventsGridDemo from "../../../content/examples/live-events-grid/demo";
 import multiColumnSortDemo from "../../../content/examples/multi-column-sort/demo";
 import numberFormattingDemo from "../../../content/examples/number-formatting/demo";
@@ -76,6 +82,12 @@ export const exampleDemos: Partial<Record<ExampleId, ComponentType>> = {
   "headless-rebuild-progress": headlessRebuildProgressDemo,
   "headless-transactions": headlessTransactionsDemo,
   "keyboard-navigation": keyboardNavigationDemo,
+  "kit-button": kitButtonDemo,
+  "kit-checkbox": kitCheckboxDemo,
+  "kit-icon-button": kitIconButtonDemo,
+  "kit-select": kitSelectDemo,
+  "kit-text-input": kitTextInputDemo,
+  "kit-textarea": kitTextareaDemo,
   "live-events-grid": liveEventsGridDemo,
   "multi-column-sort": multiColumnSortDemo,
   "number-formatting": numberFormattingDemo,
diff --git a/apps/website/lib/docs/examples/registry.generated.ts b/apps/website/lib/docs/examples/registry.generated.ts
index 33430833..918a9198 100644
--- a/apps/website/lib/docs/examples/registry.generated.ts
+++ b/apps/website/lib/docs/examples/registry.generated.ts
@@ -27,6 +27,12 @@ import headlessDistinctValues from "../../../content/examples/headless-distinct-
 import headlessRebuildProgress from "../../../content/examples/headless-rebuild-progress/example";
 import headlessTransactions from "../../../content/examples/headless-transactions/example";
 import keyboardNavigation from "../../../content/examples/keyboard-navigation/example";
+import kitButton from "../../../content/examples/kit-button/example";
+import kitCheckbox from "../../../content/examples/kit-checkbox/example";
+import kitIconButton from "../../../content/examples/kit-icon-button/example";
+import kitSelect from "../../../content/examples/kit-select/example";
+import kitTextInput from "../../../content/examples/kit-text-input/example";
+import kitTextarea from "../../../content/examples/kit-textarea/example";
 import liveEventsGrid from "../../../content/examples/live-events-grid/example";
 import multiColumnSort from "../../../content/examples/multi-column-sort/example";
 import numberFormatting from "../../../content/examples/number-formatting/example";
@@ -146,6 +152,30 @@ export const exampleRegistry = {
     meta: keyboardNavigation,
     hasDemo: true,
   },
+  "kit-button": {
+    meta: kitButton,
+    hasDemo: true,
+  },
+  "kit-checkbox": {
+    meta: kitCheckbox,
+    hasDemo: true,
+  },
+  "kit-icon-button": {
+    meta: kitIconButton,
+    hasDemo: true,
+  },
+  "kit-select": {
+    meta: kitSelect,
+    hasDemo: true,
+  },
+  "kit-text-input": {
+    meta: kitTextInput,
+    hasDemo: true,
+  },
+  "kit-textarea": {
+    meta: kitTextarea,
+    hasDemo: true,
+  },
   "live-events-grid": {
     meta: liveEventsGrid,
     hasDemo: true,
diff --git a/docs/superpowers/plans/2026-09-09-component-examples.md b/docs/superpowers/plans/2026-09-09-component-examples.md
new file mode 100644
index 00000000..ca0459aa
--- /dev/null
+++ b/docs/superpowers/plans/2026-09-09-component-examples.md
@@ -0,0 +1,18 @@
+# Individual Component Examples
+
+> Use the subagent-driven-development workflow for independent examples and review.
+
+**Goal:** Give each kit component one small, concrete, copyable live example beside its reference.
+
+**Design:** Preserve the existing integration examples. Add standalone Button actions, IconButton pin toggle, Select sort control, TextInput search, Textarea note, and Checkbox select-all/mixed examples. Each example owns local state, uses accessible names and the real exported component, and registers its complete source. Keep preview height appropriate to the small task; no runtime API changes.
+
+**Files:** Six `apps/website/content/examples/kit-*/` folders (example.ts, demo.tsx, named component source), `content/docs/grid/components.mdx`, generated example registries, focused `e2e/kit-examples-*.spec.ts` tests.
+
+- [x] Implement Button and IconButton examples with focused browser checks.
+- [x] Implement Select and Checkbox examples with focused browser checks.
+- [x] Implement TextInput and Textarea examples with focused browser checks.
+- [x] Embed each example beside its component; remove superseded partial code fences.
+- [x] Generate registry; validate docs/API links, website tests/types/lint/format/build, browser interactions in Chromium and WebKit, and layout in Chrome.
+- [ ] Review, create PR, verify preview, merge on green, and verify production using the user's established authorization.
+
+Use the existing isolated worktree on `blove/component-examples` and pinned `PATH=/tmp/pretable-kit-bin:$PATH pnpm`. The website's Next.js agent instructions apply.