diff --git a/.changeset/native-motion-preference.md b/.changeset/native-motion-preference.md
new file mode 100644
index 0000000..824c6f6
--- /dev/null
+++ b/.changeset/native-motion-preference.md
@@ -0,0 +1,5 @@
+---
+'@reactive/silk-native': minor
+---
+
+Stop native Spinner and Progress from flashing their reduced-motion appearance on mount. React Native exposes the OS preference only through async `AccessibilityInfo`, so the first render is now `'unresolved'`: motion stays suppressed, but the full-motion visuals render until the OS confirms `'reduced'`. Adds `useMotionPreference` for components that swap appearance (not just animation) and caches the OS answer so only the first mount is ever unresolved.
diff --git a/.changeset/native-visual-forms.md b/.changeset/native-visual-forms.md
new file mode 100644
index 0000000..4d5e644
--- /dev/null
+++ b/.changeset/native-visual-forms.md
@@ -0,0 +1,5 @@
+---
+'@reactive/silk-native': minor
+---
+
+Expand the native renderer with visual primitives (Surface, Card, Heading, Badge, Separator, Avatar, StatusDot, Skeleton, Spinner, Progress) and forms (Input, Textarea, Field, Checkbox, Switch, RadioGroup). Same silk-core recipes as web; RNW a11y compat helpers; Slider deferred to preserve the shared array-valued contract.
diff --git a/.gitignore b/.gitignore
index ad4af64..8053f69 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,9 @@ dist
 storybook-static
 apps/docs/.storybook-serve
 
+# Expo local state
+.expo/
+
 # Test / coverage
 coverage
 .audit
diff --git a/apps/docs/src/Native.mdx b/apps/docs/src/Native.mdx
index 2064c05..41268b2 100644
--- a/apps/docs/src/Native.mdx
+++ b/apps/docs/src/Native.mdx
@@ -8,9 +8,10 @@ React Native renderer for Silk. Same semantic `Theme` object and recipe
 contracts as `@reactive/silk` — delivered through React context, **not** CSS
 variables. Native should feel native; web should feel like the web.
 
-Stories under **Native Components** and the **Fixtures/NativeShell** page render
-these components via `react-native-web` so the docs site can exercise them
-without a simulator. The real-native exit demo is `apps/native-example` (Expo).
+Stories under **Native Components** and the **Fixtures/NativeShell** /
+**Fixtures/NativeSettingsForm** pages render these components via
+`react-native-web` so the docs site can exercise them without a simulator. The
+real-native exit demo is `apps/native-example` (Expo).
 
 ## Install
 
@@ -24,10 +25,14 @@ import { createTheme } from '@reactive/silk-core';
 import {
   Box,
   Button,
+  Card,
+  Field,
+  Heading,
   Inline,
+  Input,
   SilkProvider,
   Stack,
-  Text,
+  Switch,
 } from '@reactive/silk-native';
 
 const theme = createTheme({ colorScheme: 'light' });
@@ -36,15 +41,19 @@ export function Screen() {
   return (
     <SilkProvider theme={theme} density="comfortable">
       <Box padding="4">
-        <Stack gap="3">
-          <Text role="heading">Hello</Text>
-          <Inline gap="2">
-            <Button>Save</Button>
-            <Button variant="outline" tone="neutral">
-              Cancel
-            </Button>
-          </Inline>
-        </Stack>
+        <Card padding="4">
+          <Stack gap="3">
+            <Heading level="2">Hello</Heading>
+            <Field.Root>
+              <Field.Label>Name</Field.Label>
+              <Input />
+            </Field.Root>
+            <Inline gap="2" align="center">
+              <Switch accessibilityLabel="Notify" />
+              <Button>Save</Button>
+            </Inline>
+          </Stack>
+        </Card>
       </Box>
     </SilkProvider>
   );
@@ -83,8 +92,29 @@ No public CSS variables or `className` on native.
 
 ## Control geometry
 
-Button padding steps and `lineHeight: 1.2` are **renderer-local**, intentionally
-parallel to web `controlGeometry.ts` — not core tokens.
+Button / Input / Checkbox / Switch / Spinner geometry is **renderer-local**,
+expressed as density-aware space steps (parallel to web `controlGeometry.ts`) —
+not core tokens. Avatar `mediaScale` sizes stay density-independent (content).
+
+## Native adaptations (documented)
+
+| Web | Native |
+| --- | --- |
+| Skeleton shimmer gradient | Opacity pulse (plain RN views) |
+| Indeterminate Progress 35% solid-over-sunken mix | Static `tone.subtle` fill under reduced motion |
+| Spinner 25% `color-mix` ring | `tone.subtle` + `tone.solid` (no color-string parsing) |
+| `accessibilityLiveRegion` | Android-only enhancement; use roles + labels cross-platform |
+| Slider (Radix array multi-thumb) | **Deferred** — do not ship a scalar fork |
+| Roving keyboard focus (RadioGroup) | Screen readers navigate elements directly |
+
+RNW tests assert ARIA aliases (`aria-checked`, `aria-valuenow`, …) via the
+`a11yState` / `a11yValue` helpers — RN object props alone are dropped by RNW.
+
+## Shipped components
+
+**Layout:** Box, Stack, Inline · **Visual:** Text, Button, Surface, Card,
+Heading, Badge, Separator, Avatar, StatusDot, Skeleton, Spinner, Progress ·
+**Forms:** Input, Textarea, Field, Checkbox, Switch, RadioGroup
 
 ## Stage 1 spike findings (folded forward)
 
diff --git a/apps/docs/src/fixtures/NativeSettingsForm.stories.tsx b/apps/docs/src/fixtures/NativeSettingsForm.stories.tsx
new file mode 100644
index 0000000..5799896
--- /dev/null
+++ b/apps/docs/src/fixtures/NativeSettingsForm.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { withSource } from '../docsSource';
+import {
+  NativeSettingsForm,
+  nativeSettingsFormStates,
+} from './NativeSettingsForm';
+import nativeSettingsFormSource from './NativeSettingsForm.tsx?raw';
+
+const meta = {
+  title: 'Fixtures/NativeSettingsForm',
+  component: NativeSettingsForm,
+  parameters: withSource(nativeSettingsFormSource),
+  args: { state: 'normal' },
+  argTypes: {
+    state: {
+      control: 'select',
+      options: [...nativeSettingsFormStates],
+    },
+  },
+} satisfies Meta<typeof NativeSettingsForm>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Normal: Story = {};
+
+export const Error: Story = { args: { state: 'error' } };
+
+// Field.Root applies opacity when disabled, which drops label/description
+// contrast below WCAG AA. Tracked as a token/style burn-down item.
+const disabledContrastTodo = { a11y: { test: 'todo' as const } };
+
+export const Disabled: Story = {
+  args: { state: 'disabled' },
+  parameters: disabledContrastTodo,
+};
+
+export const InvalidDisabled: Story = {
+  args: { state: 'invalidDisabled' },
+  parameters: disabledContrastTodo,
+};
+export const Compact: Story = { args: { state: 'compact' } };
+export const Dark: Story = { args: { state: 'dark' } };
+export const ReducedMotion: Story = { args: { state: 'reducedMotion' } };
+export const LongContent: Story = { args: { state: 'longContent' } };
+export const Rtl: Story = { args: { state: 'rtl' } };
+export const Indeterminate: Story = { args: { state: 'indeterminate' } };
diff --git a/apps/docs/src/fixtures/NativeSettingsForm.test.tsx b/apps/docs/src/fixtures/NativeSettingsForm.test.tsx
new file mode 100644
index 0000000..7cb4f95
--- /dev/null
+++ b/apps/docs/src/fixtures/NativeSettingsForm.test.tsx
@@ -0,0 +1,117 @@
+import { expect, test } from '@rstest/core';
+import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  NativeSettingsForm,
+  nativeSettingsFormStates,
+  type NativeSettingsFormState,
+} from './NativeSettingsForm';
+
+function renderFixture(state: NativeSettingsFormState) {
+  return render(<NativeSettingsForm state={state} />);
+}
+
+test.each(nativeSettingsFormStates)(
+  'NativeSettingsForm state "%s" mounts with fixture markers',
+  (state) => {
+    const { container } = renderFixture(state);
+    const root = container.querySelector(
+      '[data-fixture="native-settings-form"]',
+    );
+    expect(root).not.toBeNull();
+    expect(root?.getAttribute('data-fixture-state')).toBe(state);
+    expect(screen.getByText('Settings')).toBeTruthy();
+  },
+);
+
+test('error state shows alert and summary', () => {
+  renderFixture('error');
+  expect(screen.getByRole('alert').textContent).toContain('required');
+  expect(screen.getByText(/state=error/)).toBeTruthy();
+});
+
+test('disabled switches and radios expose disabled', () => {
+  renderFixture('disabled');
+  expect(
+    screen.getByRole('switch').getAttribute('aria-disabled'),
+  ).toBe('true');
+  for (const radio of screen.getAllByRole('radio')) {
+    expect(radio.getAttribute('aria-disabled')).toBe('true');
+  }
+});
+
+test('invalidDisabled keeps invalid error with disabled controls', () => {
+  renderFixture('invalidDisabled');
+  expect(screen.getByRole('alert')).toBeTruthy();
+  expect(
+    screen.getByRole('switch').getAttribute('aria-disabled'),
+  ).toBe('true');
+});
+
+test('compact and dark report in summary', () => {
+  expect(renderFixture('compact').getByText(/density=compact/)).toBeTruthy();
+  expect(renderFixture('dark').getByText(/scheme=dark/)).toBeTruthy();
+});
+
+test('rtl sets dir attribute', () => {
+  const { container } = renderFixture('rtl');
+  expect(
+    container
+      .querySelector('[data-fixture="native-settings-form"]')
+      ?.getAttribute('dir'),
+  ).toBe('rtl');
+});
+
+test('indeterminate checkbox starts mixed then becomes checked', () => {
+  renderFixture('indeterminate');
+  const box = screen.getByRole('checkbox', { name: /Select all/i });
+  expect(box.getAttribute('aria-checked')).toBe('mixed');
+  fireEvent.click(box);
+  expect(
+    screen.getByRole('checkbox', { name: /Select all/i }).getAttribute(
+      'aria-checked',
+    ),
+  ).toBe('true');
+});
+
+test('changing state without remount reseeds checkbox and field defaults', () => {
+  const { rerender } = render(<NativeSettingsForm state="normal" />);
+  const checkbox = () =>
+    screen.getByRole('checkbox', { name: /Select all/i });
+  const name = () => screen.getByTestId('settings-name');
+  const bio = () => screen.getByTestId('settings-bio');
+
+  expect(checkbox().getAttribute('aria-checked')).toBe('false');
+  expect((name() as HTMLInputElement).value).toBe('');
+  expect((bio() as HTMLTextAreaElement).value).toBe('');
+
+  rerender(<NativeSettingsForm state="indeterminate" />);
+  expect(checkbox().getAttribute('aria-checked')).toBe('mixed');
+
+  rerender(<NativeSettingsForm state="longContent" />);
+  expect(checkbox().getAttribute('aria-checked')).toBe('false');
+  expect((name() as HTMLInputElement).value.length).toBeGreaterThan(0);
+  expect((bio() as HTMLTextAreaElement).value.length).toBeGreaterThan(0);
+  expect(
+    document.querySelector('[data-region="long-content"]'),
+  ).not.toBeNull();
+});
+
+test('progress exposes aria-valuenow', () => {
+  renderFixture('normal');
+  const bar = screen.getByLabelText('Profile completeness');
+  expect(bar.getAttribute('aria-valuenow')).toBe('72');
+});
+
+test('longContent region present', () => {
+  const { container } = renderFixture('longContent');
+  expect(
+    container.querySelector('[data-region="long-content"]'),
+  ).not.toBeNull();
+});
+
+test('reducedMotion region present', () => {
+  const { container } = renderFixture('reducedMotion');
+  expect(
+    container.querySelector('[data-region="reduced-motion"]'),
+  ).not.toBeNull();
+});
diff --git a/apps/docs/src/fixtures/NativeSettingsForm.tsx b/apps/docs/src/fixtures/NativeSettingsForm.tsx
new file mode 100644
index 0000000..1437080
--- /dev/null
+++ b/apps/docs/src/fixtures/NativeSettingsForm.tsx
@@ -0,0 +1,214 @@
+import {
+  createTheme,
+  generatePairedPalette,
+  type ColorScheme,
+  type DensityName,
+} from '@reactive/silk-core';
+import {
+  Badge,
+  Card,
+  Checkbox,
+  Field,
+  Heading,
+  Inline,
+  Input,
+  Progress,
+  RadioGroup,
+  Separator,
+  SilkProvider,
+  Skeleton,
+  Spinner,
+  Stack,
+  StatusDot,
+  Switch,
+  Text,
+  Textarea,
+} from '@reactive/silk-native';
+import { useMemo, useState, type JSX } from 'react';
+
+export const nativeSettingsFormStates = [
+  'normal',
+  'error',
+  'disabled',
+  'invalidDisabled',
+  'compact',
+  'dark',
+  'reducedMotion',
+  'longContent',
+  'rtl',
+  'indeterminate',
+] as const;
+
+export type NativeSettingsFormState =
+  (typeof nativeSettingsFormStates)[number];
+
+const paired = generatePairedPalette('#0ea5e9');
+const longBio = Array.from({ length: 80 }, () => 'content').join(' ');
+
+export interface NativeSettingsFormProps {
+  readonly state?: NativeSettingsFormState;
+}
+
+/**
+ * Native forms fixture — state matrix for docs + tests (RNW).
+ * Slider is deferred; Progress stands in for determinate feedback.
+ *
+ * Remounts the body when `state` changes so Storybook's select control
+ * reseeds useState / defaultValue (indeterminate, longContent, etc.).
+ */
+export function NativeSettingsForm({
+  state = 'normal',
+}: NativeSettingsFormProps): JSX.Element {
+  return <NativeSettingsFormBody key={state} state={state} />;
+}
+
+function NativeSettingsFormBody({
+  state,
+}: {
+  readonly state: NativeSettingsFormState;
+}): JSX.Element {
+  const scheme: ColorScheme = state === 'dark' ? 'dark' : 'light';
+  const density: DensityName = state === 'compact' ? 'compact' : 'comfortable';
+  const disabled = state === 'disabled' || state === 'invalidDisabled';
+  const invalid = state === 'error' || state === 'invalidDisabled';
+  const dir = state === 'rtl' ? 'rtl' : 'ltr';
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        colorScheme: scheme,
+        ...(state === 'dark' ? { palette: paired.dark } : {}),
+      }),
+    [scheme, state],
+  );
+
+  const [notify, setNotify] = useState(true);
+  const [plan, setPlan] = useState('pro');
+  const [selectAll, setSelectAll] = useState<boolean | 'indeterminate'>(
+    state === 'indeterminate' ? 'indeterminate' : false,
+  );
+
+  return (
+    <div
+      data-fixture="native-settings-form"
+      data-fixture-state={state}
+      dir={dir}
+    >
+      <SilkProvider theme={theme} density={density}>
+        <Card padding="4" elevation="raised" testID="settings-card">
+          <Stack gap="4">
+            <Inline gap="2" align="center">
+              <Heading level="2">Settings</Heading>
+              <Badge tone={invalid ? 'danger' : 'accent'}>
+                {invalid ? 'needs attention' : 'native'}
+              </Badge>
+              <StatusDot tone={invalid ? 'danger' : 'success'} />
+            </Inline>
+
+            <Text tone="secondary" testID="settings-summary">
+              state={state} · scheme={scheme} · density={density} · dir={dir}
+            </Text>
+
+            {state === 'reducedMotion' ? (
+              <div data-region="reduced-motion">
+                <Inline gap="3" align="center">
+                  <Skeleton shape="text" style={{ flex: 1 }} />
+                  <Spinner label="Saving" />
+                </Inline>
+                <Text role="caption" tone="secondary">
+                  reduced-motion: skeleton static / spinner dotted when OS prefers
+                </Text>
+              </div>
+            ) : null}
+
+            <Separator />
+
+            <Field.Root
+              invalid={invalid}
+              disabled={disabled}
+              required
+              controlId="settings-name"
+            >
+              <Field.Label>Display name</Field.Label>
+              <Input
+                placeholder="Ada Lovelace"
+                defaultValue={state === 'longContent' ? longBio.slice(0, 40) : ''}
+                testID="settings-name"
+              />
+              <Field.Description>Shown on your profile.</Field.Description>
+              {invalid ? (
+                <Field.Error>Display name is required.</Field.Error>
+              ) : null}
+            </Field.Root>
+
+            <Field.Root disabled={disabled} controlId="settings-bio">
+              <Field.Label>Bio</Field.Label>
+              <Textarea
+                defaultValue={state === 'longContent' ? longBio : ''}
+                testID="settings-bio"
+              />
+            </Field.Root>
+
+            <Field.Root
+              mode="group"
+              orientation="horizontal"
+              disabled={disabled}
+            >
+              <Checkbox
+                checked={selectAll}
+                onCheckedChange={setSelectAll}
+                accessibilityLabel="Select all"
+                disabled={disabled}
+                testID="settings-select-all"
+              />
+              <Field.Label>Select all notifications</Field.Label>
+            </Field.Root>
+
+            <Field.Root
+              mode="group"
+              orientation="horizontal"
+              disabled={disabled}
+            >
+              <Switch
+                checked={notify}
+                onCheckedChange={setNotify}
+                accessibilityLabel="Email notifications"
+                disabled={disabled}
+                testID="settings-notify"
+              />
+              <Field.Label>Email notifications</Field.Label>
+            </Field.Root>
+
+            <Field.Root mode="group" disabled={disabled}>
+              <Field.Label>Plan</Field.Label>
+              <RadioGroup.Root
+                value={plan}
+                onValueChange={setPlan}
+                disabled={disabled}
+                accessibilityLabel="Plan"
+              >
+                <RadioGroup.Item value="free">Free</RadioGroup.Item>
+                <RadioGroup.Item value="pro">Pro</RadioGroup.Item>
+              </RadioGroup.Root>
+            </Field.Root>
+
+            <div data-region="progress">
+              <Text role="label">Profile completeness</Text>
+              <Progress
+                value={invalid ? 20 : 72}
+                label="Profile completeness"
+                testID="settings-progress"
+              />
+            </div>
+
+            {state === 'longContent' ? (
+              <div data-region="long-content">
+                <Text measure="prose">{longBio}</Text>
+              </div>
+            ) : null}
+          </Stack>
+        </Card>
+      </SilkProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/src/native/Forms.stories.tsx b/apps/docs/src/native/Forms.stories.tsx
new file mode 100644
index 0000000..7b24ec2
--- /dev/null
+++ b/apps/docs/src/native/Forms.stories.tsx
@@ -0,0 +1,107 @@
+import {
+  checkboxRecipe,
+  inputRecipe,
+  radioGroupRecipe,
+  switchRecipe,
+} from '@reactive/silk-core';
+import {
+  Checkbox,
+  Field,
+  Input,
+  RadioGroup,
+  Switch,
+  Text,
+  Textarea,
+} from '@reactive/silk-native';
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { withNativeSilk } from './withNativeSilk';
+
+const meta = {
+  title: 'Native Components/Forms',
+  decorators: [withNativeSilk],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const FieldStack: Story = {
+  render: () => (
+    <Field.Root>
+      <Field.Label>Display name</Field.Label>
+      <Input placeholder="Ada Lovelace" />
+      <Field.Description>Shown on your profile.</Field.Description>
+    </Field.Root>
+  ),
+};
+
+export const FieldInvalid: Story = {
+  render: () => (
+    <Field.Root invalid required>
+      <Field.Label>Email</Field.Label>
+      <Input placeholder="you@example.com" />
+      <Field.Error>Enter a valid email.</Field.Error>
+    </Field.Root>
+  ),
+};
+
+export const TextareaDefault: Story = {
+  render: () => (
+    <Field.Root>
+      <Field.Label>Bio</Field.Label>
+      <Textarea placeholder="A short bio…" />
+    </Field.Root>
+  ),
+};
+
+export const CheckboxTriState: Story = {
+  render: () => (
+    <>
+      <Checkbox accessibilityLabel="Unchecked" style={{ marginBottom: 8 }} />
+      <Checkbox
+        defaultChecked
+        accessibilityLabel="Checked"
+        style={{ marginBottom: 8 }}
+      />
+      <Checkbox
+        checked="indeterminate"
+        accessibilityLabel="Indeterminate"
+        tone={checkboxRecipe.defaults.tone}
+      />
+    </>
+  ),
+};
+
+export const SwitchSizes: Story = {
+  render: () => (
+    <>
+      {switchRecipe.variants.size.map((size) => (
+        <Switch
+          key={size}
+          size={size}
+          accessibilityLabel={`Switch ${size}`}
+          style={{ marginBottom: 12 }}
+        />
+      ))}
+    </>
+  ),
+};
+
+export const RadioGroupOrientations: Story = {
+  render: () => (
+    <>
+      {radioGroupRecipe.variants.orientation.map((orientation) => (
+        <Field.Root key={orientation} mode="group" style={{ marginBottom: 16 }}>
+          <Field.Label>{orientation}</Field.Label>
+          <RadioGroup.Root orientation={orientation} defaultValue="a">
+            <RadioGroup.Item value="a">Option A</RadioGroup.Item>
+            <RadioGroup.Item value="b">Option B</RadioGroup.Item>
+          </RadioGroup.Root>
+        </Field.Root>
+      ))}
+      <Text role="caption" tone="secondary">
+        Input sizes: {inputRecipe.variants.size.join(', ')}
+      </Text>
+    </>
+  ),
+};
diff --git a/apps/docs/src/native/Visual.stories.tsx b/apps/docs/src/native/Visual.stories.tsx
new file mode 100644
index 0000000..862f1db
--- /dev/null
+++ b/apps/docs/src/native/Visual.stories.tsx
@@ -0,0 +1,127 @@
+import {
+  avatarRecipe,
+  badgeRecipe,
+  cardRecipe,
+  headingRecipe,
+  progressRecipe,
+  surfaceRecipe,
+} from '@reactive/silk-core';
+import {
+  Avatar,
+  Badge,
+  Card,
+  Heading,
+  Progress,
+  Separator,
+  Skeleton,
+  Spinner,
+  StatusDot,
+  Surface,
+  Text,
+} from '@reactive/silk-native';
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { withNativeSilk } from './withNativeSilk';
+
+const meta = {
+  title: 'Native Components/Visual',
+  decorators: [withNativeSilk],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SurfaceElevations: Story = {
+  render: () => (
+    <>
+      {surfaceRecipe.variants.elevation.map((elevation) => (
+        <Surface
+          key={elevation}
+          elevation={elevation}
+          border="subtle"
+          style={{ padding: 12, marginBottom: 8 }}
+        >
+          <Text>elevation={elevation}</Text>
+        </Surface>
+      ))}
+    </>
+  ),
+};
+
+export const CardInteractive: Story = {
+  render: () => (
+    <Card
+      elevation={cardRecipe.defaults.elevation}
+      padding="4"
+      interactive="true"
+      onPress={() => undefined}
+    >
+      <Heading level="3">Card</Heading>
+      <Text tone="secondary">Pressable when onPress is provided.</Text>
+      <Badge tone="accent">featured</Badge>
+    </Card>
+  ),
+};
+
+export const HeadingSizes: Story = {
+  render: () => (
+    <>
+      {headingRecipe.variants.size.map((size) => (
+        <Heading key={size} size={size}>
+          Heading {size}
+        </Heading>
+      ))}
+    </>
+  ),
+};
+
+export const BadgesAndDots: Story = {
+  render: () => (
+    <>
+      {badgeRecipe.variants.tone.map((tone) => (
+        <Badge key={tone} tone={tone} style={{ marginRight: 8, marginBottom: 8 }}>
+          {tone}
+        </Badge>
+      ))}
+      {badgeRecipe.variants.tone.map((tone) => (
+        <StatusDot key={`dot-${tone}`} tone={tone} style={{ marginRight: 8 }} />
+      ))}
+    </>
+  ),
+};
+
+export const AvatarMatrix: Story = {
+  render: () => (
+    <>
+      {avatarRecipe.variants.size.map((size) => (
+        <Avatar
+          key={size}
+          size={size}
+          fallback={size.toUpperCase()}
+          style={{ marginRight: 8 }}
+        />
+      ))}
+      <Separator style={{ marginVertical: 12 }} />
+      <Skeleton shape="text" style={{ marginBottom: 8 }} />
+      <Skeleton shape="rect" style={{ marginBottom: 8 }} />
+      <Spinner label="Loading demo" />
+    </>
+  ),
+};
+
+export const ProgressStates: Story = {
+  render: () => (
+    <>
+      {progressRecipe.variants.size.map((size) => (
+        <Progress
+          key={size}
+          size={size}
+          value={60}
+          label={`Progress ${size}`}
+          style={{ marginBottom: 12 }}
+        />
+      ))}
+      <Progress label="Indeterminate" style={{ marginTop: 8 }} />
+    </>
+  ),
+};
diff --git a/apps/native-example/App.tsx b/apps/native-example/App.tsx
index 4326829..c28dafa 100644
--- a/apps/native-example/App.tsx
+++ b/apps/native-example/App.tsx
@@ -7,12 +7,28 @@ import {
   type DensityName,
 } from '@reactive/silk-core';
 import {
+  Avatar,
+  Badge,
   Box,
   Button,
+  Card,
+  Checkbox,
+  Field,
+  Heading,
   Inline,
+  Input,
+  Progress,
+  RadioGroup,
+  Separator,
   SilkProvider,
+  Skeleton,
+  Spinner,
   Stack,
+  StatusDot,
+  Surface,
+  Switch,
   Text,
+  Textarea,
 } from '@reactive/silk-native';
 import { StatusBar } from 'expo-status-bar';
 import { useMemo, useState, type JSX } from 'react';
@@ -159,6 +175,50 @@ export function App(): JSX.Element {
                 </Inline>
               </Stack>
 
+              <Stack gap="2">
+                <Heading level="2">Visual</Heading>
+                <Surface elevation="raised" border="subtle" style={{ padding: 12 }}>
+                  <Inline gap="2" align="center" wrap="wrap">
+                    <Avatar fallback="SK" size="md" />
+                    <Badge tone="accent">native</Badge>
+                    <StatusDot tone="success" />
+                    <Spinner size="sm" label="Loading" />
+                  </Inline>
+                  <Separator style={{ marginVertical: 12 }} />
+                  <Skeleton shape="text" />
+                  <Progress value={55} label="Demo progress" style={{ marginTop: 12 }} />
+                </Surface>
+                <Card padding="3" elevation="flat">
+                  <Heading level="3" size="sm">
+                    Card
+                  </Heading>
+                  <Text tone="secondary">Column + gap + subtle border</Text>
+                </Card>
+              </Stack>
+
+              <Stack gap="2">
+                <Heading level="2">Forms</Heading>
+                <Field.Root>
+                  <Field.Label>Display name</Field.Label>
+                  <Input placeholder="Ada" />
+                  <Field.Description>Shown on your profile.</Field.Description>
+                </Field.Root>
+                <Field.Root>
+                  <Field.Label>Bio</Field.Label>
+                  <Textarea placeholder="A short bio…" />
+                </Field.Root>
+                <Inline gap="3" align="center">
+                  <Checkbox accessibilityLabel="Agree" />
+                  <Text role="label">Agree</Text>
+                  <Switch accessibilityLabel="Notify" />
+                  <Text role="label">Notify</Text>
+                </Inline>
+                <RadioGroup.Root defaultValue="pro" orientation="horizontal">
+                  <RadioGroup.Item value="free">Free</RadioGroup.Item>
+                  <RadioGroup.Item value="pro">Pro</RadioGroup.Item>
+                </RadioGroup.Root>
+              </Stack>
+
               <Stack gap="2">
                 <Text role="heading">Nested providers</Text>
                 <SilkProvider colorScheme={scheme === 'light' ? 'dark' : 'light'}>
diff --git a/apps/native-example/README.md b/apps/native-example/README.md
index f75a18d..199edd0 100644
--- a/apps/native-example/README.md
+++ b/apps/native-example/README.md
@@ -25,7 +25,21 @@ yarn workspace @reactive/silk-native-example export:web
 
 ## Exit demo
 
-`App.tsx` exercises Box / Stack / Inline / Text / Button across recipe axes,
+`App.tsx` exercises layout, visual, and form components across recipe axes,
 densities, light/dark, a tenant theme (`generatePairedPalette` → `createTheme`),
 nested providers, pressed/disabled, long text, wrap / row-reverse / baseline /
-rail.
+rail. Native `Slider` is deferred (see API_POLICY).
+
+## Manual device checklist
+
+RNW / jsdom tests cannot catch these — verify on iOS + Android before release:
+
+- [ ] Surface / Card shadows (iOS `shadow*` vs Android `elevation`)
+- [ ] Spinner ring rendering (mixed border colors + full radius)
+- [ ] Switch thumb slide + reduced-motion instant snap
+- [ ] Skeleton opacity pulse vs static under Reduce Motion
+- [ ] Progress determinate width + indeterminate sweep (RTL flip)
+- [ ] TalkBack / VoiceOver: Checkbox / Switch / Radio / Progress announcements
+- [ ] Field Error `alert` announcement when invalid
+- [ ] RTL layout for Switch travel and Field horizontal rows
+- [ ] Touch targets for Checkbox / Switch in crowded Field rows
diff --git a/docs/API_POLICY.md b/docs/API_POLICY.md
index 73b3b04..b2938a2 100644
--- a/docs/API_POLICY.md
+++ b/docs/API_POLICY.md
@@ -62,9 +62,12 @@ Every user-facing change gets a changeset (`yarn changeset`):
 
 - **`@reactive/silk-native`** — React Native renderer package. Root export only. Peers: `react` ^19, `react-native` >=0.83.
 - **Theme delivery:** `ThemeProvider` / `SilkProvider` / `useTheme` / `useThemeDensity` — context `{ theme, density }` (no CSS variables). Nesting: omitted theme/scheme reuses parent Theme; explicit `colorScheme` creates a fresh default theme; explicit `theme` wins; density inherits independently; `'system'` via Appearance.
-- **Native `SilkDefaults`:** keyed only by `Box` / `Stack` / `Inline` / `Text` / `Button` (core `*VariantProps` partials). Nested defaults replace the map.
-- **Components:** `Box`, `Stack`, `Inline` (no web-only `collapseBelow`), `Text`, `Button` — same recipe prop axes as web. Escape hatches: `style` (last; Button composes Pressable style callbacks), typed `ref`, RN host props.
-- **Public mapper helpers:** `mapBoxStyle` / `mapStackStyle` / `mapInlineStyle` / `mapTextStyle` / `mapButtonStyle`, `resolveNativeFontFamily` (RN-import-free style objects for Node tests / advanced consumers). Control geometry constants stay package-internal.
+- **Native `SilkDefaults`:** recipe-bearing keys only — `Box` / `Stack` / `Inline` / `Text` / `Button` / `Surface` / `Card` / `Heading` / `Badge` / `Separator` / `Avatar` / `StatusDot` / `Skeleton` / `Spinner` / `Progress` / `Input` / `Textarea` / `Checkbox` / `Switch` / `RadioGroup`. **Not** `Field` (no recipe, matches web). Nested defaults replace the map.
+- **Components (layout/visual):** `Box`, `Stack`, `Inline` (no web-only `collapseBelow`), `Text`, `Button`, `Surface`, `Card`, `Heading`, `Badge`, `Separator`, `Avatar`, `StatusDot`, `Skeleton`, `Spinner`, `Progress` — same recipe prop axes as web. Escape hatches: `style` (last; Pressable hosts compose style callbacks), typed `ref`, RN host props. `Surface`/`Card` `interactive` is styling-only; pressability requires `onPress`.
+- **Components (forms):** `Input`, `Textarea`, `Field` (`Root`/`Label`/`Description`/`Error` + `useFieldControlProps` / `useFieldContext` / `fieldLabelAssociation`), `Checkbox` (tri-state `boolean | 'indeterminate'`, same as web/Radix), `Switch`, `RadioGroup` (`Root`/`Item`). Field public contract matches web (`mode`, `orientation`, `controlId`, `invalid`, `disabled`, `required`, explicit-prop precedence, nested boundaries); association mechanics are renderer-specific (`nativeID`, Android `accessibilityLabelledBy`, composed `accessibilityLabel`/`accessibilityHint`).
+- **Deferred:** native `Slider` — web's array-valued multi-thumb Radix contract must not be forked into a scalar API; ships in a follow-up on a vetted native-backed binding or with the full array contract.
+- **Public mapper helpers:** `mapBoxStyle` / `mapStackStyle` / `mapInlineStyle` / `mapTextStyle` / `mapButtonStyle` / `mapSurfaceStyle` / `mapCardStyle` / `mapHeadingStyle` / `mapBadgeStyle` / `mapSeparatorStyle` / `mapAvatarStyle` / `mapStatusDotStyle` / `mapSkeletonStyle` / `mapSpinnerStyle` / `mapProgressStyle` / `mapInputStyle` / `mapTextareaStyle` / `mapCheckboxStyle` / `mapSwitchStyle` / `mapRadioGroupStyle` / `mapRadioItemStyle`, plus `mapShadow` / `elevationBackground` / `resolveNativeFontFamily` / `checkboxIndicatorColor` (RN-import-free). Control geometry constants stay package-internal.
+- **A11y compat helpers:** `a11yState` / `a11yValue` — emit RN object props + RNW/ARIA aliases (`aria-checked`, `aria-valuemin/max/now/text`). `useReducedMotion` subscribes to OS / `prefers-reduced-motion`; `useMotionPreference` (`'full' | 'reduced' | 'unresolved'`) exposes the native window before async `AccessibilityInfo` answers, so components that swap in a distinct reduced-motion appearance only do so on a confirmed `'reduced'`.
 
 ## Stage 3 public additions
 
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index a888910..067eae3 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -66,7 +66,7 @@ Nesting (native analog of web semantic-var replacement):
 
 Density selects `compactSpace` vs `theme.semantic.space` in the mapper — still off the Theme object. Interaction states use `Pressable` pressed + disabled (no hover/focus-visible). Button control padding and `lineHeight: 1.2` are renderer-local, intentionally parallel to web `controlGeometry.ts`. Text `measure="prose"` approximates CSS `ch` as `fontSize × measure.prose × 0.6`.
 
-Native `SilkDefaults` is keyed only by the shipped exemplars (`Box` / `Stack` / `Inline` / `Text` / `Button`). Nested defaults replace the entire map.
+Native `SilkDefaults` is keyed by recipe-bearing components (`Box` / `Stack` / `Inline` / `Text` / `Button` / visual primitives / form controls — not `Field`). Nested defaults replace the entire map. Form interaction uses `Pressable` (RN has no checkbox/radio primitives); roving keyboard focus is a web-only concern. Native `Slider` is deferred so the array-valued web contract is not forked. Animated geometry uses measured widths; RNW a11y object props are paired with ARIA aliases via `a11yState` / `a11yValue`.
 
 Escape hatches (native ladder): recipe props → `style` applied **last** (Button composes object/array/function `Pressable` styles) → typed `ref` → remaining RN host props. No `className` or public CSS variables.
 
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index e566838..3c1203b 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -105,10 +105,11 @@ Harden theming from "works" to "product-grade multi-tenant".
 
 Prove the shared layer is actually shared. Meaningful sharing, not pixel parity — native should feel native.
 
-- New package consuming `silk-core` tokens, themes, recipes directly (no CSS variables): `ThemeProvider` / `SilkProvider`, `Box` / `Stack` / `Inline` / `Text` / `Button`.
+- New package consuming `silk-core` tokens, themes, recipes directly (no CSS variables): `ThemeProvider` / `SilkProvider`, layout (`Box` / `Stack` / `Inline`), visual (`Text` / `Button` / `Surface` / `Card` / `Heading` / `Badge` / `Separator` / `Avatar` / `StatusDot` / `Skeleton` / `Spinner` / `Progress`), forms (`Input` / `Textarea` / `Field` / `Checkbox` / `Switch` / `RadioGroup`).
+- **Deferred:** native `Slider` (preserve array-valued shared contract; vetted binding follow-up).
 - Graduated the Stage 1 native contract spike; spike replaced by `apps/native-example` (Expo).
-- Docs: RNW Storybook stories + Native guide + NativeShell fixture (state matrix + tests).
-- Packaging: packed-consumer-check + hard JS perf budgets for the five native exports. Metro consumability verified locally via `yarn workspace @reactive/silk-native-example export:web` (not a CI gate — Expo export is slow/flaky in headless CI).
+- Docs: RNW Storybook stories + Native guide + NativeShell / NativeSettingsForm fixtures (state matrix + tests).
+- Packaging: packed-consumer-check + hard JS perf budgets for native exports. Metro consumability verified locally via `yarn workspace @reactive/silk-native-example export:web` (not a CI gate — Expo export is slow/flaky in headless CI).
 
 **Exit criteria (met):** a native screen (Expo example + docs NativeShell fixture) renders using the same semantic theme object and recipe contracts as web; core stayed free of React Native views (control geometry remains renderer-local on both platforms).
 
diff --git a/packages/silk-native/src/components/Avatar.tsx b/packages/silk-native/src/components/Avatar.tsx
new file mode 100644
index 0000000..d792e87
--- /dev/null
+++ b/packages/silk-native/src/components/Avatar.tsx
@@ -0,0 +1,83 @@
+import { avatarRecipe, type AvatarVariantProps } from '@reactive/silk-core';
+import { useEffect, useState, type JSX, type ReactNode, type Ref } from 'react';
+import {
+  Image,
+  Text as RNText,
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { mapAvatarStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface AvatarProps
+  extends AvatarVariantProps, Omit<ViewProps, 'children' | 'style'> {
+  readonly ref?: Ref<View>;
+  readonly children?: ReactNode;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly src?: string | ImageSourcePropType;
+  readonly alt?: string;
+  readonly fallback?: ReactNode;
+}
+
+export function Avatar({
+  size,
+  shape,
+  src,
+  alt = '',
+  fallback,
+  children,
+  style,
+  ref,
+  ...rest
+}: AvatarProps): JSX.Element {
+  const { theme } = useTheme();
+  const defaults = useComponentDefaults('Avatar');
+  const resolved: AvatarVariantProps = {
+    size: size ?? defaults.size ?? avatarRecipe.defaults.size,
+    shape: shape ?? defaults.shape ?? avatarRecipe.defaults.shape,
+  };
+  const mapped = mapAvatarStyle(theme, resolved);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    setFailed(false);
+  }, [src]);
+
+  const source =
+    typeof src === 'string' ? { uri: src } : src;
+  const showImage = source !== undefined && !failed;
+
+  let content: ReactNode;
+  if (children !== undefined) {
+    content = children;
+  } else if (showImage) {
+    content = (
+      <Image
+        source={source}
+        accessibilityLabel={alt}
+        resizeMode="cover"
+        onError={() => setFailed(true)}
+        style={{ width: '100%', height: '100%' }}
+      />
+    );
+  } else {
+    content =
+      fallback !== undefined ? (
+        typeof fallback === 'string' || typeof fallback === 'number' ? (
+          <RNText style={mapped.text}>{fallback}</RNText>
+        ) : (
+          fallback
+        )
+      ) : null;
+  }
+
+  return (
+    <View ref={ref} {...rest} style={[mapped.view, style]}>
+      {content}
+    </View>
+  );
+}
diff --git a/packages/silk-native/src/components/Badge.tsx b/packages/silk-native/src/components/Badge.tsx
new file mode 100644
index 0000000..3f0afce
--- /dev/null
+++ b/packages/silk-native/src/components/Badge.tsx
@@ -0,0 +1,44 @@
+import { badgeRecipe, type BadgeVariantProps } from '@reactive/silk-core';
+import type { JSX, ReactNode, Ref } from 'react';
+import {
+  Text as RNText,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { mapBadgeStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface BadgeProps
+  extends BadgeVariantProps, Omit<ViewProps, 'children' | 'style'> {
+  readonly ref?: Ref<View>;
+  readonly children?: ReactNode;
+  readonly style?: StyleProp<ViewStyle>;
+}
+
+export function Badge({
+  variant,
+  tone,
+  size,
+  style,
+  children,
+  ref,
+  ...rest
+}: BadgeProps): JSX.Element {
+  const { theme, density } = useTheme();
+  const defaults = useComponentDefaults('Badge');
+  const resolved: BadgeVariantProps = {
+    variant: variant ?? defaults.variant ?? badgeRecipe.defaults.variant,
+    tone: tone ?? defaults.tone ?? badgeRecipe.defaults.tone,
+    size: size ?? defaults.size ?? badgeRecipe.defaults.size,
+  };
+  const mapped = mapBadgeStyle(theme, resolved, density);
+
+  return (
+    <View ref={ref} {...rest} style={[mapped.view, style]}>
+      <RNText style={mapped.text}>{children}</RNText>
+    </View>
+  );
+}
diff --git a/packages/silk-native/src/components/Card.tsx b/packages/silk-native/src/components/Card.tsx
new file mode 100644
index 0000000..4cddc66
--- /dev/null
+++ b/packages/silk-native/src/components/Card.tsx
@@ -0,0 +1,77 @@
+import { cardRecipe, type CardVariantProps } from '@reactive/silk-core';
+import type { JSX, ReactNode, Ref } from 'react';
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { mapCardStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface CardProps
+  extends CardVariantProps, Omit<ViewProps, 'children' | 'style'> {
+  readonly ref?: Ref<View>;
+  readonly children?: ReactNode;
+  readonly style?: StyleProp<ViewStyle>;
+  /** When provided, host becomes Pressable. `interactive` alone is styling-only. */
+  readonly onPress?: PressableProps['onPress'];
+  readonly disabled?: boolean;
+}
+
+export function Card({
+  elevation,
+  padding,
+  radius,
+  interactive,
+  style,
+  children,
+  ref,
+  onPress,
+  disabled,
+  ...rest
+}: CardProps): JSX.Element {
+  const { theme, density } = useTheme();
+  const defaults = useComponentDefaults('Card');
+  const resolved: CardVariantProps = {
+    elevation: elevation ?? defaults.elevation ?? cardRecipe.defaults.elevation,
+    padding: padding ?? defaults.padding ?? cardRecipe.defaults.padding,
+    radius: radius ?? defaults.radius ?? cardRecipe.defaults.radius,
+    interactive:
+      interactive ?? defaults.interactive ?? cardRecipe.defaults.interactive,
+  };
+  const resting = mapCardStyle(theme, resolved, density, false);
+
+  if (onPress) {
+    const {
+      accessibilityRole = 'button',
+      ...pressableRest
+    } = rest as Omit<PressableProps, 'children' | 'style'>;
+    return (
+      <Pressable
+        ref={ref}
+        {...pressableRest}
+        accessibilityRole={accessibilityRole}
+        disabled={disabled}
+        onPress={onPress}
+        style={(state) => [
+          state.pressed && !disabled
+            ? mapCardStyle(theme, resolved, density, true)
+            : resting,
+          style,
+        ]}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View ref={ref} {...rest} style={[resting, style]}>
+      {children}
+    </View>
+  );
+}
diff --git a/packages/silk-native/src/components/Checkbox.tsx b/packages/silk-native/src/components/Checkbox.tsx
new file mode 100644
index 0000000..4ca8aa9
--- /dev/null
+++ b/packages/silk-native/src/components/Checkbox.tsx
@@ -0,0 +1,183 @@
+import {
+  checkboxRecipe,
+  type CheckboxVariantProps,
+} from '@reactive/silk-core';
+import { useState, type JSX, type ReactNode, type Ref } from 'react';
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { a11yState } from '../styles/a11yProps.js';
+import {
+  checkboxIndicatorColor,
+  mapCheckboxStyle,
+} from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { useFieldControlProps } from './Field.js';
+import { Text } from './Text.js';
+
+export type CheckedState = boolean | 'indeterminate';
+
+export interface CheckboxProps
+  extends CheckboxVariantProps,
+    Omit<PressableProps, 'children' | 'style' | 'onPress'> {
+  readonly ref?: Ref<View>;
+  readonly children?: ReactNode;
+  readonly style?: StyleProp<ViewStyle>;
+  /** Controlled — matches web/Radix tri-state. */
+  readonly checked?: CheckedState;
+  readonly defaultChecked?: boolean;
+  readonly onCheckedChange?: (checked: CheckedState) => void;
+  readonly disabled?: boolean;
+  readonly invalid?: boolean;
+  readonly required?: boolean;
+}
+
+function CheckGlyph({ color, size }: { color: string; size: number }): JSX.Element {
+  const thickness = Math.max(2, size * 0.12);
+  return (
+    <View
+      style={{
+        width: size * 0.55,
+        height: size * 0.35,
+        borderBottomWidth: thickness,
+        borderLeftWidth: thickness,
+        borderColor: color,
+        transform: [{ rotate: '-45deg' }, { translateY: -size * 0.05 }],
+      }}
+    />
+  );
+}
+
+function DashGlyph({ color, size }: { color: string; size: number }): JSX.Element {
+  return (
+    <View
+      style={{
+        width: size * 0.55,
+        height: Math.max(2, size * 0.12),
+        backgroundColor: color,
+        borderRadius: 1,
+      }}
+    />
+  );
+}
+
+/**
+ * Tri-state checkbox on Pressable (RN has no checkbox primitive).
+ * `checked` may be `boolean | 'indeterminate'` — same contract as web/Radix.
+ */
+export function Checkbox({
+  size,
+  tone,
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled,
+  invalid,
+  required,
+  children,
+  style,
+  ref,
+  nativeID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityLabelledBy,
+  accessibilityState,
+  ...rest
+}: CheckboxProps): JSX.Element {
+  const { theme, density } = useTheme();
+  const defaults = useComponentDefaults('Checkbox');
+  const resolved: CheckboxVariantProps = {
+    size: size ?? defaults.size ?? checkboxRecipe.defaults.size,
+    tone: tone ?? defaults.tone ?? checkboxRecipe.defaults.tone,
+  };
+  const fieldProps = useFieldControlProps({
+    disabled,
+    required,
+    'aria-invalid': invalid,
+    nativeID,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelledBy,
+  });
+  const isDisabled = Boolean(fieldProps.disabled);
+  const isInvalid = Boolean(fieldProps.invalid || invalid);
+
+  const isControlled = checkedProp !== undefined;
+  const [uncontrolled, setUncontrolled] = useState<CheckedState>(defaultChecked);
+  const checked = isControlled ? checkedProp : uncontrolled;
+
+  const { row, box } = mapCheckboxStyle(theme, resolved, density, {
+    checked,
+    invalid: isInvalid,
+    disabled: isDisabled,
+  });
+  const edge = typeof box.width === 'number' ? box.width : 20;
+  const glyphColor = checkboxIndicatorColor(
+    theme,
+    resolved.tone ?? checkboxRecipe.defaults.tone,
+    isDisabled,
+  );
+
+  const a11yChecked: boolean | 'mixed' =
+    checked === 'indeterminate' ? 'mixed' : Boolean(checked);
+  const stateProps = a11yState({
+    ...accessibilityState,
+    checked: a11yChecked,
+    disabled: isDisabled,
+  });
+
+  const hitSlop = Math.max(0, Math.ceil((44 - edge) / 2));
+
+  const toggle = (): void => {
+    if (isDisabled) return;
+    const next: CheckedState =
+      checked === 'indeterminate' ? true : !checked;
+    if (!isControlled) setUncontrolled(next);
+    onCheckedChange?.(next);
+  };
+
+  return (
+    <Pressable
+      ref={ref}
+      {...rest}
+      {...stateProps}
+      accessibilityRole="checkbox"
+      accessibilityLabel={fieldProps.accessibilityLabel ?? accessibilityLabel}
+      accessibilityHint={fieldProps.accessibilityHint ?? accessibilityHint}
+      accessibilityLabelledBy={fieldProps.accessibilityLabelledBy}
+      nativeID={fieldProps.nativeID}
+      disabled={isDisabled}
+      hitSlop={hitSlop}
+      onPress={toggle}
+      style={[row, style]}
+      {...({
+        'aria-invalid': fieldProps['aria-invalid'],
+        'aria-required': fieldProps['aria-required'],
+        'data-invalid': isInvalid ? 'true' : undefined,
+        'data-state':
+          checked === 'indeterminate'
+            ? 'indeterminate'
+            : checked
+              ? 'checked'
+              : 'unchecked',
+      } as object)}
+    >
+      <View style={box}>
+        {checked === true ? <CheckGlyph color={glyphColor} size={edge} /> : null}
+        {checked === 'indeterminate' ? (
+          <DashGlyph color={glyphColor} size={edge} />
+        ) : null}
+      </View>
+      {typeof children === 'string' || typeof children === 'number' ? (
+        <Text role="label">{children}</Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
diff --git a/packages/silk-native/src/components/Field.tsx b/packages/silk-native/src/components/Field.tsx
new file mode 100644
index 0000000..7daf186
--- /dev/null
+++ b/packages/silk-native/src/components/Field.tsx
@@ -0,0 +1,591 @@
+import { compactSpace } from '@reactive/silk-core';
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext,
+  useId,
+  useMemo,
+  type JSX,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { Text } from './Text.js';
+
+export type FieldMode = 'single' | 'group';
+export type FieldOrientation = 'vertical' | 'horizontal';
+export type FieldLabelAssociation = 'htmlFor' | 'labelledby';
+export type AriaInvalid = boolean | 'true' | 'false' | 'grammar' | 'spelling';
+
+/**
+ * Mark a control so Field.Root uses labelledby association (no htmlFor/nativeID
+ * auto-wiring). Same symbol as web for cross-package recognition.
+ */
+export const fieldLabelAssociation: unique symbol = Symbol.for(
+  'silk.fieldLabelAssociation',
+);
+
+export interface FieldContextValue {
+  readonly mode: FieldMode;
+  readonly inputId: string;
+  readonly labelId: string;
+  readonly labelledBy: string | undefined;
+  readonly labelAssociation: FieldLabelAssociation;
+  readonly descriptionId: string;
+  readonly errorId: string;
+  readonly describedBy: string | undefined;
+  /** Flattened label text for iOS accessibilityLabel fallback. */
+  readonly labelText: string | undefined;
+  /** Flattened description + error for accessibilityHint. */
+  readonly hintText: string | undefined;
+  readonly invalid: boolean;
+  readonly disabled: boolean;
+  readonly required: boolean;
+}
+
+const FieldContext = createContext<FieldContextValue | null>(null);
+
+export function useFieldContext(): FieldContextValue | null {
+  return useContext(FieldContext);
+}
+
+export interface FieldRootProps extends Omit<ViewProps, 'children'> {
+  readonly mode?: FieldMode;
+  readonly orientation?: FieldOrientation;
+  readonly controlId?: string;
+  readonly invalid?: boolean;
+  readonly disabled?: boolean;
+  readonly required?: boolean;
+  readonly ref?: Ref<View>;
+  readonly children?: ReactNode;
+}
+
+type FieldSlot =
+  | typeof FieldLabel
+  | typeof FieldDescription
+  | typeof FieldError;
+
+function isElementOfType(
+  child: ReactNode,
+  type: FieldSlot,
+): child is ReactElement<{
+  nativeID?: string;
+  id?: string;
+  children?: ReactNode;
+}> {
+  return isValidElement(child) && child.type === type;
+}
+
+/** Slot views use nativeID; id is accepted for RNW/web interop. */
+function slotNativeId(
+  props: { nativeID?: string; id?: string },
+  fallback: string,
+): string {
+  return props.nativeID ?? props.id ?? fallback;
+}
+
+function isLabelledByControl(type: unknown): boolean {
+  return (
+    (typeof type === 'function' ||
+      (typeof type === 'object' && type !== null)) &&
+    fieldLabelAssociation in type &&
+    (type as Record<symbol, unknown>)[fieldLabelAssociation] === 'labelledby'
+  );
+}
+
+function flattenText(node: ReactNode): string {
+  if (node == null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(flattenText).join('');
+  if (isValidElement(node)) {
+    return flattenText(
+      (node.props as { children?: ReactNode }).children,
+    );
+  }
+  return '';
+}
+
+function isFieldSlotElement(child: ReactNode): boolean {
+  return (
+    isElementOfType(child, FieldLabel) ||
+    isElementOfType(child, FieldDescription) ||
+    isElementOfType(child, FieldError)
+  );
+}
+
+/**
+ * True when `node` is (or wraps) a Field slot. Nested Field.Root is opaque so
+ * inner slots stay with the inner field — same boundary as aria wiring.
+ */
+function containsFieldSlot(node: ReactNode): boolean {
+  let found = false;
+  const walk = (nodes: ReactNode): void => {
+    Children.forEach(nodes, (child) => {
+      if (found || !isValidElement(child)) return;
+      if (child.type === FieldRoot) return;
+      if (isFieldSlotElement(child)) {
+        found = true;
+        return;
+      }
+      walk((child.props as { children?: ReactNode }).children);
+    });
+  };
+  walk(node);
+  return found;
+}
+
+/**
+ * Split horizontal Field children into a leading control column and a text
+ * column (label + description + error). Mirrors web’s grid placement so
+ * supporting copy sits under the label, not inline with the control.
+ */
+function partitionHorizontalChildren(children: ReactNode): {
+  control: ReactNode[];
+  labelColumn: ReactNode[];
+} {
+  const control: ReactNode[] = [];
+  const labelColumn: ReactNode[] = [];
+  Children.forEach(children, (child) => {
+    if (child == null || typeof child === 'boolean') return;
+    if (isFieldSlotElement(child) || containsFieldSlot(child)) {
+      labelColumn.push(child);
+    } else {
+      control.push(child);
+    }
+  });
+  return { control, labelColumn };
+}
+
+function ariaFromFieldChildren(
+  children: ReactNode,
+  mode: FieldMode,
+  labelId: string,
+  descriptionId: string,
+  errorId: string,
+): {
+  labelledBy: string | undefined;
+  describedBy: string | undefined;
+  labelAssociation: FieldLabelAssociation;
+  labelText: string | undefined;
+  hintText: string | undefined;
+} {
+  let labelledBy: string | undefined;
+  let labelText: string | undefined;
+  let labelAssociation: FieldLabelAssociation =
+    mode === 'group' ? 'labelledby' : 'htmlFor';
+  const describedParts: string[] = [];
+  const hintParts: string[] = [];
+
+  const walk = (nodes: ReactNode): void => {
+    Children.forEach(nodes, (child) => {
+      if (!isValidElement(child)) return;
+      if (child.type === FieldRoot) return;
+      if (isElementOfType(child, FieldLabel)) {
+        labelledBy ??= slotNativeId(child.props, labelId);
+        labelText ??= flattenText(child.props.children) || undefined;
+        return;
+      }
+      if (isElementOfType(child, FieldDescription)) {
+        describedParts.push(slotNativeId(child.props, descriptionId));
+        const text = flattenText(child.props.children);
+        if (text) hintParts.push(text);
+        return;
+      }
+      if (isElementOfType(child, FieldError)) {
+        describedParts.push(slotNativeId(child.props, errorId));
+        const text = flattenText(child.props.children);
+        if (text) hintParts.push(text);
+        return;
+      }
+      if (labelAssociation === 'htmlFor' && isLabelledByControl(child.type)) {
+        labelAssociation = 'labelledby';
+      }
+      walk((child.props as { children?: ReactNode }).children);
+    });
+  };
+
+  walk(children);
+  return {
+    labelledBy,
+    describedBy:
+      describedParts.length > 0 ? describedParts.join(' ') : undefined,
+    labelAssociation,
+    labelText,
+    hintText: hintParts.length > 0 ? hintParts.join('. ') : undefined,
+  };
+}
+
+function FieldRoot({
+  mode = 'single',
+  orientation = 'vertical',
+  controlId,
+  invalid = false,
+  disabled = false,
+  required = false,
+  children,
+  style,
+  ref,
+  ...props
+}: FieldRootProps): JSX.Element {
+  const reactId = useId();
+  const inputId = controlId ?? `${reactId}-control`;
+  const labelId = `${reactId}-label`;
+  const descriptionId = `${reactId}-description`;
+  const errorId = `${reactId}-error`;
+  const { theme, density } = useTheme();
+  const space = density === 'compact' ? compactSpace : theme.semantic.space;
+
+  const {
+    labelledBy,
+    describedBy,
+    labelAssociation,
+    labelText,
+    hintText,
+  } = useMemo(
+    () =>
+      ariaFromFieldChildren(
+        children,
+        mode,
+        labelId,
+        descriptionId,
+        errorId,
+      ),
+    [children, mode, labelId, descriptionId, errorId],
+  );
+
+  const value = useMemo<FieldContextValue>(
+    () => ({
+      mode,
+      inputId,
+      labelId,
+      labelledBy,
+      labelAssociation,
+      descriptionId,
+      errorId,
+      describedBy,
+      labelText,
+      hintText,
+      invalid,
+      disabled,
+      required,
+    }),
+    [
+      mode,
+      inputId,
+      labelId,
+      labelledBy,
+      labelAssociation,
+      descriptionId,
+      errorId,
+      describedBy,
+      labelText,
+      hintText,
+      invalid,
+      disabled,
+      required,
+    ],
+  );
+
+  const rootDataProps = {
+    'data-invalid': invalid ? 'true' : undefined,
+    'data-disabled': disabled ? 'true' : undefined,
+    'data-mode': mode,
+    'data-orientation': orientation,
+    'data-field-root': '',
+  } as object;
+
+  if (orientation === 'horizontal') {
+    const { control, labelColumn } = partitionHorizontalChildren(children);
+    return (
+      <FieldContext.Provider value={value}>
+        <View
+          ref={ref}
+          {...props}
+          style={[
+            {
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: space[2],
+              opacity: disabled ? 0.7 : 1,
+            },
+            style,
+          ]}
+          {...rootDataProps}
+        >
+          {control.length > 0 ? <View>{control}</View> : null}
+          {labelColumn.length > 0 ? (
+            <View
+              style={{
+                flexGrow: 1,
+                flexShrink: 1,
+                minWidth: 0,
+                flexDirection: 'column',
+                alignItems: 'stretch',
+                gap: space[1],
+              }}
+            >
+              {labelColumn}
+            </View>
+          ) : null}
+        </View>
+      </FieldContext.Provider>
+    );
+  }
+
+  return (
+    <FieldContext.Provider value={value}>
+      <View
+        ref={ref}
+        {...props}
+        style={[
+          {
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            gap: space[1],
+            opacity: disabled ? 0.7 : 1,
+          },
+          style,
+        ]}
+        {...rootDataProps}
+      >
+        {children}
+      </View>
+    </FieldContext.Provider>
+  );
+}
+
+export interface FieldLabelProps
+  extends Omit<React.ComponentProps<typeof Text>, 'role' | 'tone'> {
+  readonly children?: ReactNode;
+}
+
+function FieldLabel({
+  children,
+  style,
+  nativeID,
+  ...props
+}: FieldLabelProps): JSX.Element {
+  const field = useFieldContext();
+  return (
+    <Text
+      {...props}
+      role="label"
+      tone={field?.disabled ? 'secondary' : 'primary'}
+      nativeID={nativeID ?? field?.labelId}
+      style={style}
+      {...({ 'data-field-label': '' } as object)}
+    >
+      {children}
+      {field?.required ? (
+        <Text role="label" accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+          {' *'}
+        </Text>
+      ) : null}
+    </Text>
+  );
+}
+
+export interface FieldDescriptionProps
+  extends Omit<React.ComponentProps<typeof Text>, 'role' | 'tone'> {
+  readonly children?: ReactNode;
+}
+
+function FieldDescription({
+  children,
+  nativeID,
+  style,
+  ...props
+}: FieldDescriptionProps): JSX.Element {
+  const field = useFieldContext();
+  return (
+    <Text
+      {...props}
+      role="caption"
+      tone="secondary"
+      nativeID={nativeID ?? field?.descriptionId}
+      style={style}
+      {...({ 'data-field-description': '' } as object)}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export interface FieldErrorProps
+  extends Omit<React.ComponentProps<typeof Text>, 'role' | 'tone'> {
+  readonly children?: ReactNode;
+}
+
+function FieldError({
+  children,
+  nativeID,
+  style,
+  accessibilityRole = 'alert',
+  ...props
+}: FieldErrorProps): JSX.Element {
+  const field = useFieldContext();
+  return (
+    <Text
+      {...props}
+      role="caption"
+      tone="danger"
+      nativeID={nativeID ?? field?.errorId}
+      accessibilityRole={accessibilityRole}
+      // Android-only live region enhancement — not an iOS status solution.
+      accessibilityLiveRegion="polite"
+      style={style}
+      {...({ 'data-field-error': '' } as object)}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export type FieldControlProps = {
+  nativeID?: string | undefined;
+  /** RN allows string | string[]; we normalize arrays to a space-joined string. */
+  accessibilityLabelledBy?: string | undefined;
+  accessibilityLabel?: string | undefined;
+  accessibilityHint?: string | undefined;
+  accessibilityState?:
+    | { disabled?: boolean; checked?: boolean | 'mixed' }
+    | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+  /** Visual invalid flag for control chrome. */
+  invalid?: boolean | undefined;
+  /** RNW / ARIA aliases for Field wiring. */
+  'aria-invalid'?: boolean | undefined;
+  'aria-required'?: boolean | undefined;
+};
+
+function isVisuallyInvalid(value: AriaInvalid | undefined): boolean {
+  return (
+    value === true ||
+    value === 'true' ||
+    value === 'grammar' ||
+    value === 'spelling'
+  );
+}
+
+/**
+ * Merge Field context into a control. Explicit props always win.
+ * Prefer `Field.Root controlId` over overriding `nativeID` so Label and
+ * control stay in sync.
+ */
+function normalizeLabelledBy(
+  value: string | readonly string[] | undefined,
+): string | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === 'string') return value;
+  return value.join(' ');
+}
+
+export function useFieldControlProps(options?: {
+  readonly nativeID?: string | undefined;
+  readonly id?: string | undefined;
+  readonly accessibilityLabel?: string | undefined;
+  readonly accessibilityHint?: string | undefined;
+  readonly accessibilityLabelledBy?: string | readonly string[] | undefined;
+  readonly 'aria-invalid'?: AriaInvalid | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly required?: boolean | undefined;
+  readonly labelledBy?: boolean | undefined;
+}): FieldControlProps {
+  const field = useContext(FieldContext);
+
+  if (!field) {
+    const result: FieldControlProps = {};
+    const id = options?.nativeID ?? options?.id;
+    if (id !== undefined) result.nativeID = id;
+    if (options?.accessibilityLabel !== undefined) {
+      result.accessibilityLabel = options.accessibilityLabel;
+    }
+    if (options?.accessibilityHint !== undefined) {
+      result.accessibilityHint = options.accessibilityHint;
+    }
+    const labelledBy = normalizeLabelledBy(options?.accessibilityLabelledBy);
+    if (labelledBy !== undefined) {
+      result.accessibilityLabelledBy = labelledBy;
+    }
+    if (options?.disabled !== undefined) result.disabled = options.disabled;
+    if (options?.required !== undefined) {
+      result.required = options.required;
+      if (options.required) result['aria-required'] = true;
+    }
+    if (isVisuallyInvalid(options?.['aria-invalid'])) {
+      result.invalid = true;
+      result['aria-invalid'] = true;
+    }
+    return result;
+  }
+
+  const invalidFlag =
+    options?.['aria-invalid'] !== undefined
+      ? isVisuallyInvalid(options['aria-invalid'])
+      : field.invalid;
+  const required = options?.required ?? field.required;
+
+  const result: FieldControlProps = {
+    disabled: options?.disabled ?? field.disabled,
+    required,
+    ...(invalidFlag ? { invalid: true, 'aria-invalid': true } : {}),
+    ...(required ? { 'aria-required': true } : {}),
+  };
+
+  const useLabelledBy =
+    field.mode === 'group' ||
+    field.labelAssociation === 'labelledby' ||
+    options?.labelledBy === true;
+
+  if (field.mode === 'single' && !useLabelledBy) {
+    result.nativeID = options?.nativeID ?? options?.id ?? field.inputId;
+  } else if (options?.nativeID !== undefined || options?.id !== undefined) {
+    result.nativeID = options.nativeID ?? options.id;
+  }
+
+  // Explicit labelledBy always wins (including outside useLabelledBy mode).
+  const explicitLabelledBy = normalizeLabelledBy(
+    options?.accessibilityLabelledBy,
+  );
+  if (explicitLabelledBy !== undefined) {
+    result.accessibilityLabelledBy = explicitLabelledBy;
+  } else if (useLabelledBy && field.labelledBy !== undefined) {
+    result.accessibilityLabelledBy = field.labelledBy;
+  }
+
+  // Cross-platform name/hint fallback (accessibilityLabelledBy is Android-only).
+  if (options?.accessibilityLabel !== undefined) {
+    result.accessibilityLabel = options.accessibilityLabel;
+  } else if (field.labelText !== undefined) {
+    result.accessibilityLabel = field.labelText;
+  }
+  if (options?.accessibilityHint !== undefined) {
+    result.accessibilityHint = options.accessibilityHint;
+  } else if (field.hintText !== undefined) {
+    result.accessibilityHint = field.hintText;
+  }
+
+  if (result.disabled) {
+    result.accessibilityState = { disabled: true };
+  }
+
+  return result;
+}
+
+export interface FieldNamespace {
+  readonly Root: typeof FieldRoot;
+  readonly Label: typeof FieldLabel;
+  readonly Description: typeof FieldDescription;
+  readonly Error: typeof FieldError;
+}
+
+export const Field: FieldNamespace = {
+  Root: FieldRoot,
+  Label: FieldLabel,
+  Description: FieldDescription,
+  Error: FieldError,
+};
diff --git a/packages/silk-native/src/components/Heading.tsx b/packages/silk-native/src/components/Heading.tsx
new file mode 100644
index 0000000..77bc529
--- /dev/null
+++ b/packages/silk-native/src/components/Heading.tsx
@@ -0,0 +1,51 @@
+import { headingRecipe, type HeadingVariantProps } from '@reactive/silk-core';
+import type { JSX, ReactNode, Ref } from 'react';
+import {
+  Text as RNText,
+  type TextProps as RNTextProps,
+} from 'react-native';
+import { mapHeadingStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface HeadingProps
+  extends HeadingVariantProps, Omit<RNTextProps, 'children' | 'role'> {
+  readonly ref?: Ref<RNText>;
+  readonly children?: ReactNode;
+}
+
+export function Heading({
+  level,
+  size,
+  tone,
+  style,
+  children,
+  ref,
+  accessibilityRole = 'header',
+  ...rest
+}: HeadingProps): JSX.Element {
+  const { theme } = useTheme();
+  const defaults = useComponentDefaults('Heading');
+  const resolvedLevel = level ?? defaults.level ?? headingRecipe.defaults.level;
+  const resolvedSize = size ?? defaults.size;
+  const resolved: HeadingVariantProps = {
+    level: resolvedLevel,
+    ...(resolvedSize !== undefined ? { size: resolvedSize } : {}),
+    tone: tone ?? defaults.tone ?? headingRecipe.defaults.tone,
+  };
+  const mapped = mapHeadingStyle(theme, resolved);
+  const ariaLevel = Number(resolvedLevel);
+
+  return (
+    <RNText
+      ref={ref}
+      {...rest}
+      accessibilityRole={accessibilityRole}
+      // RNW maps aria-level for heading semantics.
+      {...({ 'aria-level': ariaLevel } as object)}
+      style={[mapped, style]}
+    >
+      {children}
+    </RNText>
+  );
+}
diff --git a/packages/silk-native/src/components/Input.tsx b/packages/silk-native/src/components/Input.tsx
new file mode 100644
index 0000000..1ace40c
--- /dev/null
+++ b/packages/silk-native/src/components/Input.tsx
@@ -0,0 +1,88 @@
+import { inputRecipe, type InputVariantProps } from '@reactive/silk-core';
+import { useState, type JSX, type Ref } from 'react';
+import {
+  TextInput,
+  type StyleProp,
+  type TextInputProps,
+  type TextStyle,
+} from 'react-native';
+import { mapInputStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { useFieldControlProps } from './Field.js';
+
+export interface InputProps
+  extends InputVariantProps,
+    Omit<TextInputProps, 'style' | 'editable'> {
+  readonly ref?: Ref<TextInput>;
+  readonly style?: StyleProp<TextStyle>;
+  readonly disabled?: boolean;
+  readonly invalid?: boolean;
+}
+
+export function Input({
+  size,
+  density,
+  style,
+  ref,
+  disabled,
+  invalid,
+  onFocus,
+  onBlur,
+  nativeID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityLabelledBy,
+  ...rest
+}: InputProps): JSX.Element {
+  const { theme, density: themeDensity } = useTheme();
+  const defaults = useComponentDefaults('Input');
+  const resolved: InputVariantProps = {
+    size: size ?? defaults.size ?? inputRecipe.defaults.size,
+    density: density ?? defaults.density ?? themeDensity,
+  };
+  const fieldProps = useFieldControlProps({
+    nativeID,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelledBy,
+    disabled,
+    'aria-invalid': invalid,
+  });
+  const [focused, setFocused] = useState(false);
+  const isDisabled = Boolean(fieldProps.disabled);
+  const isInvalid = Boolean(fieldProps.invalid || invalid);
+  const mapped = mapInputStyle(theme, resolved, themeDensity, {
+    focused,
+    invalid: isInvalid,
+    disabled: isDisabled,
+  });
+
+  return (
+    <TextInput
+      ref={ref}
+      {...rest}
+      nativeID={fieldProps.nativeID}
+      accessibilityLabel={fieldProps.accessibilityLabel}
+      accessibilityHint={fieldProps.accessibilityHint}
+      accessibilityLabelledBy={fieldProps.accessibilityLabelledBy}
+      editable={!isDisabled}
+      placeholderTextColor={theme.semantic.color.textSecondary}
+      onFocus={(event) => {
+        setFocused(true);
+        onFocus?.(event);
+      }}
+      onBlur={(event) => {
+        setFocused(false);
+        onBlur?.(event);
+      }}
+      style={[mapped, style]}
+      {...({
+        'aria-invalid': fieldProps['aria-invalid'],
+        'aria-required': fieldProps['aria-required'],
+        'data-invalid': isInvalid ? 'true' : undefined,
+        'data-disabled': isDisabled ? 'true' : undefined,
+      } as object)}
+    />
+  );
+}
diff --git a/packages/silk-native/src/components/Progress.tsx b/packages/silk-native/src/components/Progress.tsx
new file mode 100644
index 0000000..4282b77
--- /dev/null
+++ b/packages/silk-native/src/components/Progress.tsx
@@ -0,0 +1,163 @@
+import {
+  progressRecipe,
+  type ProgressVariantProps,
+} from '@reactive/silk-core';
+import { useEffect, useRef, useState, type JSX, type Ref } from 'react';
+import {
+  Animated,
+  Easing,
+  I18nManager,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { a11yValue } from '../styles/a11yProps.js';
+import { mapProgressStyle } from '../styles/mapStyles.js';
+import { useMotionPreference } from '../styles/useReducedMotion.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface ProgressProps
+  extends ProgressVariantProps, Omit<ViewProps, 'children' | 'style'> {
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+  /** Omit / null → indeterminate. */
+  readonly value?: number | null;
+  readonly max?: number;
+  readonly label?: string;
+}
+
+/**
+ * Determinate / indeterminate progress bar.
+ * Animations use measured track width (numeric transforms, not % widths).
+ * Reduced-motion indeterminate: static tone.subtle fill (native adaptation of
+ * web's 35% solid-over-sunken mix).
+ */
+export function Progress({
+  size,
+  tone,
+  value,
+  max = 100,
+  label = 'Progress',
+  style,
+  ref,
+  onLayout: onLayoutProp,
+  ...rest
+}: ProgressProps): JSX.Element {
+  const { theme, density } = useTheme();
+  const defaults = useComponentDefaults('Progress');
+  const resolved: ProgressVariantProps = {
+    size: size ?? defaults.size ?? progressRecipe.defaults.size,
+    tone: tone ?? defaults.tone ?? progressRecipe.defaults.tone,
+  };
+  const { track, indicator } = mapProgressStyle(theme, resolved, density);
+  const preference = useMotionPreference();
+  const reduced = preference === 'reduced';
+
+  // Match web Progress normalization (safeMax + Radix-like indeterminate).
+  const safeMax = max > 0 ? max : 100;
+  const indeterminate =
+    value == null || Number.isNaN(value) || value < 0;
+  const resolvedValue = indeterminate ? null : Math.min(value, safeMax);
+  const pct =
+    resolvedValue == null
+      ? 0
+      : Math.min(1, Math.max(0, resolvedValue / safeMax));
+
+  const [trackWidth, setTrackWidth] = useState(0);
+  const translate = useRef(new Animated.Value(0)).current;
+  const rtl = I18nManager.isRTL;
+
+  const onLayout = (event: LayoutChangeEvent): void => {
+    setTrackWidth(event.nativeEvent.layout.width);
+    onLayoutProp?.(event);
+  };
+
+  useEffect(() => {
+    if (!indeterminate || preference !== 'full' || trackWidth === 0) {
+      translate.setValue(0);
+      return;
+    }
+    const indicatorWidth = trackWidth * 0.4;
+    const travel = trackWidth - indicatorWidth;
+    const start = rtl ? travel : -indicatorWidth;
+    const end = rtl ? -indicatorWidth : travel;
+    translate.setValue(start);
+    const loop = theme.semantic.motion.loop.durationMs;
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(translate, {
+          toValue: end,
+          duration: loop,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translate, {
+          toValue: start,
+          duration: 0,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [
+    indeterminate,
+    preference,
+    trackWidth,
+    translate,
+    rtl,
+    theme.semantic.motion.loop.durationMs,
+  ]);
+
+  const indicatorWidth = indeterminate
+    ? reduced
+      ? trackWidth
+      : trackWidth * 0.4
+    : trackWidth * pct;
+
+  const valueProps = a11yValue(
+    indeterminate
+      ? { min: 0, max: safeMax }
+      : { min: 0, max: safeMax, now: resolvedValue as number },
+  );
+
+  const indicatorBg =
+    indeterminate && reduced
+      ? theme.semantic.color.tones[
+          resolved.tone ?? progressRecipe.defaults.tone
+        ].subtle
+      : indicator.backgroundColor;
+
+  return (
+    <View
+      ref={ref}
+      {...rest}
+      {...valueProps}
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      onLayout={onLayout}
+      style={[track, style]}
+    >
+      {trackWidth > 0 ? (
+        <Animated.View
+          style={[
+            indicator,
+            {
+              width: indicatorWidth,
+              backgroundColor: indicatorBg,
+              transform:
+                indeterminate && !reduced
+                  ? [{ translateX: translate }]
+                  : undefined,
+            },
+          ]}
+        />
+      ) : null}
+    </View>
+  );
+}
diff --git a/packages/silk-native/src/components/RadioGroup.tsx b/packages/silk-native/src/components/RadioGroup.tsx
new file mode 100644
index 0000000..97c3d63
--- /dev/null
+++ b/packages/silk-native/src/components/RadioGroup.tsx
@@ -0,0 +1,215 @@
+import {
+  radioGroupRecipe,
+  type RadioGroupVariantProps,
+} from '@reactive/silk-core';
+import {
+  createContext,
+  useContext,
+  useState,
+  type JSX,
+  type ReactNode,
+  type Ref,
+} from 'react';
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { a11yState } from '../styles/a11yProps.js';
+import { mapRadioGroupStyle, mapRadioItemStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { useFieldControlProps } from './Field.js';
+import { Text } from './Text.js';
+
+interface RadioGroupContextValue {
+  readonly value: string | undefined;
+  readonly onValueChange: (value: string) => void;
+  readonly disabled: boolean;
+  readonly invalid: boolean;
+  readonly size: NonNullable<RadioGroupVariantProps['size']>;
+  readonly tone: NonNullable<RadioGroupVariantProps['tone']>;
+  readonly density: 'comfortable' | 'compact';
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+export interface RadioGroupRootProps
+  extends RadioGroupVariantProps, Omit<ViewProps, 'children' | 'style'> {
+  readonly ref?: Ref<View>;
+  readonly children?: ReactNode;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly value?: string;
+  readonly defaultValue?: string;
+  readonly onValueChange?: (value: string) => void;
+  readonly disabled?: boolean;
+  readonly invalid?: boolean;
+  readonly required?: boolean;
+}
+
+function RadioGroupRoot({
+  size,
+  tone,
+  orientation,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  disabled,
+  invalid,
+  required,
+  children,
+  style,
+  ref,
+  nativeID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityLabelledBy,
+  ...rest
+}: RadioGroupRootProps): JSX.Element {
+  const { theme, density } = useTheme();
+  const defaults = useComponentDefaults('RadioGroup');
+  const resolved: RadioGroupVariantProps = {
+    size: size ?? defaults.size ?? radioGroupRecipe.defaults.size,
+    tone: tone ?? defaults.tone ?? radioGroupRecipe.defaults.tone,
+    orientation:
+      orientation ??
+      defaults.orientation ??
+      radioGroupRecipe.defaults.orientation,
+  };
+  const fieldProps = useFieldControlProps({
+    disabled,
+    required,
+    'aria-invalid': invalid,
+    nativeID,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelledBy,
+  });
+  const isDisabled = Boolean(fieldProps.disabled);
+  const isInvalid = Boolean(fieldProps.invalid || invalid);
+  const isControlled = valueProp !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const value = isControlled ? valueProp : uncontrolled;
+
+  const { root } = mapRadioGroupStyle(theme, resolved, density);
+
+  const ctx: RadioGroupContextValue = {
+    value,
+    onValueChange: (next) => {
+      if (isDisabled) return;
+      // Match web/Radix: only emit when the selection actually changes.
+      if (next === value) return;
+      if (!isControlled) setUncontrolled(next);
+      onValueChange?.(next);
+    },
+    disabled: isDisabled,
+    invalid: isInvalid,
+    size: resolved.size ?? radioGroupRecipe.defaults.size,
+    tone: resolved.tone ?? radioGroupRecipe.defaults.tone,
+    density,
+  };
+
+  return (
+    <RadioGroupContext.Provider value={ctx}>
+      <View
+        ref={ref}
+        {...rest}
+        accessibilityRole="radiogroup"
+        accessibilityLabel={fieldProps.accessibilityLabel}
+        accessibilityHint={fieldProps.accessibilityHint}
+        accessibilityLabelledBy={fieldProps.accessibilityLabelledBy}
+        nativeID={fieldProps.nativeID}
+        style={[root, style]}
+        {...({
+          'aria-invalid': fieldProps['aria-invalid'],
+          'aria-required': fieldProps['aria-required'],
+          'data-invalid': isInvalid ? 'true' : undefined,
+          'data-orientation': resolved.orientation,
+        } as object)}
+      >
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export interface RadioGroupItemProps
+  extends Omit<PressableProps, 'children' | 'style' | 'onPress'> {
+  readonly ref?: Ref<View>;
+  readonly value: string;
+  readonly children?: ReactNode;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly disabled?: boolean;
+}
+
+function RadioGroupItem({
+  value,
+  children,
+  style,
+  disabled,
+  ref,
+  ...rest
+}: RadioGroupItemProps): JSX.Element {
+  const group = useContext(RadioGroupContext);
+  if (!group) {
+    throw new Error('RadioGroup.Item must be used within RadioGroup.Root');
+  }
+  const { theme } = useTheme();
+  const isDisabled = Boolean(disabled || group.disabled);
+  const checked = group.value === value;
+  const { row, item, indicator } = mapRadioItemStyle(
+    theme,
+    { size: group.size, tone: group.tone },
+    group.density,
+    { checked, invalid: group.invalid, disabled: isDisabled },
+  );
+  const edge = typeof item.width === 'number' ? item.width : 20;
+  const hitSlop = Math.max(0, Math.ceil((44 - edge) / 2));
+  const stateProps = a11yState({ checked, disabled: isDisabled });
+
+  const content = (
+    <>
+      <View style={item}>
+        {checked ? <View style={indicator} /> : null}
+      </View>
+      {children !== undefined && children !== null ? (
+        typeof children === 'string' || typeof children === 'number' ? (
+          <Text role="label">{children}</Text>
+        ) : (
+          children
+        )
+      ) : null}
+    </>
+  );
+
+  return (
+    <Pressable
+      ref={ref}
+      {...rest}
+      {...stateProps}
+      accessibilityRole="radio"
+      disabled={isDisabled}
+      hitSlop={hitSlop}
+      onPress={() => group.onValueChange(value)}
+      style={[row, style]}
+      {...({
+        'data-state': checked ? 'checked' : 'unchecked',
+      } as object)}
+    >
+      {content}
+    </Pressable>
+  );
+}
+
+export interface RadioGroupNamespace {
+  readonly Root: typeof RadioGroupRoot;
+  readonly Item: typeof RadioGroupItem;
+}
+
+export const RadioGroup: RadioGroupNamespace = {
+  Root: RadioGroupRoot,
+  Item: RadioGroupItem,
+};
diff --git a/packages/silk-native/src/components/Separator.tsx b/packages/silk-native/src/components/Separator.tsx
new file mode 100644
index 0000000..e68b196
--- /dev/null
+++ b/packages/silk-native/src/components/Separator.tsx
@@ -0,0 +1,58 @@
+import {
+  separatorRecipe,
+  type SeparatorVariantProps,
+} from '@reactive/silk-core';
+import type { JSX, Ref } from 'react';
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { mapSeparatorStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface SeparatorProps
+  extends SeparatorVariantProps, Omit<ViewProps, 'children' | 'style'> {
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+  /** When true (default), hidden from the accessibility tree. */
+  readonly decorative?: boolean;
+}
+
+export function Separator({
+  orientation,
+  decorative = true,
+  style,
+  ref,
+  ...rest
+}: SeparatorProps): JSX.Element {
+  const { theme } = useTheme();
+  const defaults = useComponentDefaults('Separator');
+  const resolved: SeparatorVariantProps = {
+    orientation:
+      orientation ?? defaults.orientation ?? separatorRecipe.defaults.orientation,
+  };
+  const mapped = mapSeparatorStyle(theme, resolved);
+  const resolvedOrientation =
+    resolved.orientation ?? separatorRecipe.defaults.orientation;
+
+  if (decorative) {
+    return (
+      <View
+        ref={ref}
+        {...rest}
+        accessible={false}
+        importantForAccessibility="no"
+        style={[mapped, style]}
+      />
+    );
+  }
+
+  return (
+    <View
+      ref={ref}
+      {...rest}
+      // Broader `role` prop — RN + RNW map "separator".
+      role="separator"
+      {...({ 'aria-orientation': resolvedOrientation } as object)}
+      style={[mapped, style]}
+    />
+  );
+}
diff --git a/packages/silk-native/src/components/Skeleton.tsx b/packages/silk-native/src/components/Skeleton.tsx
new file mode 100644
index 0000000..2e930e5
--- /dev/null
+++ b/packages/silk-native/src/components/Skeleton.tsx
@@ -0,0 +1,74 @@
+import {
+  skeletonRecipe,
+  type SkeletonVariantProps,
+} from '@reactive/silk-core';
+import { useEffect, useRef, type JSX } from 'react';
+import {
+  Animated,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { mapSkeletonStyle } from '../styles/mapStyles.js';
+import { useReducedMotion } from '../styles/useReducedMotion.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface SkeletonProps
+  extends SkeletonVariantProps, Omit<ViewProps, 'children' | 'style' | 'ref'> {
+  readonly style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Loading placeholder. Native adaptation: opacity pulse (web uses a moving
+ * gradient unavailable in plain RN views). Static under reduced motion.
+ */
+export function Skeleton({
+  shape,
+  style,
+  ...rest
+}: SkeletonProps): JSX.Element {
+  const { theme, density } = useTheme();
+  const defaults = useComponentDefaults('Skeleton');
+  const resolved: SkeletonVariantProps = {
+    shape: shape ?? defaults.shape ?? skeletonRecipe.defaults.shape,
+  };
+  const mapped = mapSkeletonStyle(theme, resolved, density);
+  const reduced = useReducedMotion();
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (reduced) {
+      opacity.setValue(1);
+      return;
+    }
+    const loop = theme.semantic.motion.loop.durationMs;
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.55,
+          duration: loop / 2,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: loop / 2,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [reduced, opacity, theme.semantic.motion.loop.durationMs]);
+
+  return (
+    <Animated.View
+      {...rest}
+      accessible={false}
+      importantForAccessibility="no"
+      style={[mapped, { opacity }, style]}
+    />
+  );
+}
diff --git a/packages/silk-native/src/components/Spinner.tsx b/packages/silk-native/src/components/Spinner.tsx
new file mode 100644
index 0000000..c0ebd8b
--- /dev/null
+++ b/packages/silk-native/src/components/Spinner.tsx
@@ -0,0 +1,84 @@
+import { spinnerRecipe, type SpinnerVariantProps } from '@reactive/silk-core';
+import { useEffect, useRef, type JSX } from 'react';
+import {
+  Animated,
+  Easing,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { mapSpinnerStyle } from '../styles/mapStyles.js';
+import { useMotionPreference } from '../styles/useReducedMotion.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface SpinnerProps
+  extends SpinnerVariantProps, Omit<ViewProps, 'children' | 'style' | 'ref'> {
+  readonly style?: StyleProp<ViewStyle>;
+  /** Accessible name announced to assistive tech. */
+  readonly label?: string;
+}
+
+/**
+ * Indeterminate loading indicator. Ring uses tone.subtle + tone.solid
+ * (semantic analog of web's 25% solid mix — no color-string parsing).
+ */
+export function Spinner({
+  size,
+  tone,
+  label = 'Loading',
+  style,
+  ...rest
+}: SpinnerProps): JSX.Element {
+  const { theme, density } = useTheme();
+  const defaults = useComponentDefaults('Spinner');
+  const resolved: SpinnerVariantProps = {
+    size: size ?? defaults.size ?? spinnerRecipe.defaults.size,
+    tone: tone ?? defaults.tone ?? spinnerRecipe.defaults.tone,
+  };
+  const preference = useMotionPreference();
+  const mapped = mapSpinnerStyle(
+    theme,
+    resolved,
+    density,
+    preference === 'reduced',
+  );
+  const rotation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (preference !== 'full') {
+      rotation.setValue(0);
+      return;
+    }
+    const loop = theme.semantic.motion.loop.durationMs;
+    const animation = Animated.loop(
+      Animated.timing(rotation, {
+        toValue: 1,
+        duration: loop,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [preference, rotation, theme.semantic.motion.loop.durationMs]);
+
+  const rotate = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View
+      {...rest}
+      accessibilityLabel={label}
+      // Broader role for RNW `role="status"` mapping.
+      role="status"
+      // Android-only live region enhancement.
+      accessibilityLiveRegion="polite"
+      style={[mapped, { transform: [{ rotate }] }, style]}
+    />
+  );
+}
diff --git a/packages/silk-native/src/components/StatusDot.tsx b/packages/silk-native/src/components/StatusDot.tsx
new file mode 100644
index 0000000..9806d1d
--- /dev/null
+++ b/packages/silk-native/src/components/StatusDot.tsx
@@ -0,0 +1,46 @@
+import {
+  statusDotRecipe,
+  type StatusDotVariantProps,
+} from '@reactive/silk-core';
+import type { JSX, Ref } from 'react';
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { mapStatusDotStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface StatusDotProps
+  extends StatusDotVariantProps, Omit<ViewProps, 'children' | 'style'> {
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Decorative status indicator. Hidden from the accessibility tree by default;
+ * composites supply text alternatives (e.g. "Unread").
+ */
+export function StatusDot({
+  tone,
+  size,
+  style,
+  ref,
+  accessible = false,
+  ...rest
+}: StatusDotProps): JSX.Element {
+  const { theme, density } = useTheme();
+  const defaults = useComponentDefaults('StatusDot');
+  const resolved: StatusDotVariantProps = {
+    tone: tone ?? defaults.tone ?? statusDotRecipe.defaults.tone,
+    size: size ?? defaults.size ?? statusDotRecipe.defaults.size,
+  };
+  const mapped = mapStatusDotStyle(theme, resolved, density);
+
+  return (
+    <View
+      ref={ref}
+      {...rest}
+      accessible={accessible}
+      importantForAccessibility={accessible ? 'auto' : 'no'}
+      style={[mapped, style]}
+    />
+  );
+}
diff --git a/packages/silk-native/src/components/Surface.tsx b/packages/silk-native/src/components/Surface.tsx
new file mode 100644
index 0000000..8ff91e9
--- /dev/null
+++ b/packages/silk-native/src/components/Surface.tsx
@@ -0,0 +1,83 @@
+import { surfaceRecipe, type SurfaceVariantProps } from '@reactive/silk-core';
+import type { JSX, ReactNode, Ref } from 'react';
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { mapSurfaceStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+
+export interface SurfaceProps
+  extends SurfaceVariantProps, Omit<ViewProps, 'children' | 'style'> {
+  readonly ref?: Ref<View>;
+  readonly children?: ReactNode;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * When provided, the host becomes a Pressable. `interactive` alone never
+   * implies clickability (web parity).
+   */
+  readonly onPress?: PressableProps['onPress'];
+  readonly disabled?: boolean;
+}
+
+export function Surface({
+  elevation,
+  radius,
+  border,
+  interactive,
+  style,
+  children,
+  ref,
+  onPress,
+  disabled,
+  ...rest
+}: SurfaceProps): JSX.Element {
+  const { theme } = useTheme();
+  const defaults = useComponentDefaults('Surface');
+  const resolved: SurfaceVariantProps = {
+    elevation:
+      elevation ?? defaults.elevation ?? surfaceRecipe.defaults.elevation,
+    radius: radius ?? defaults.radius ?? surfaceRecipe.defaults.radius,
+    border: border ?? defaults.border ?? surfaceRecipe.defaults.border,
+    interactive:
+      interactive ??
+      defaults.interactive ??
+      surfaceRecipe.defaults.interactive,
+  };
+  const resting = mapSurfaceStyle(theme, resolved, false);
+
+  if (onPress) {
+    const {
+      accessibilityRole = 'button',
+      ...pressableRest
+    } = rest as Omit<PressableProps, 'children' | 'style'>;
+    return (
+      <Pressable
+        ref={ref}
+        {...pressableRest}
+        accessibilityRole={accessibilityRole}
+        disabled={disabled}
+        onPress={onPress}
+        style={(state) => [
+          state.pressed && !disabled
+            ? mapSurfaceStyle(theme, resolved, true)
+            : resting,
+          style,
+        ]}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View ref={ref} {...rest} style={[resting, style]}>
+      {children}
+    </View>
+  );
+}
diff --git a/packages/silk-native/src/components/Switch.tsx b/packages/silk-native/src/components/Switch.tsx
new file mode 100644
index 0000000..168f1aa
--- /dev/null
+++ b/packages/silk-native/src/components/Switch.tsx
@@ -0,0 +1,174 @@
+import { switchRecipe, type SwitchVariantProps } from '@reactive/silk-core';
+import { useEffect, useRef, useState, type JSX, type Ref } from 'react';
+import {
+  Animated,
+  I18nManager,
+  Pressable,
+  View,
+  type LayoutChangeEvent,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { a11yState } from '../styles/a11yProps.js';
+import {
+  switchThumbInset,
+  switchThumbTravel,
+} from '../styles/controlGeometry.js';
+import { mapSwitchStyle } from '../styles/mapStyles.js';
+import { useReducedMotion } from '../styles/useReducedMotion.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { useFieldControlProps } from './Field.js';
+
+export interface SwitchProps
+  extends SwitchVariantProps,
+    Omit<PressableProps, 'children' | 'style' | 'onPress'> {
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly checked?: boolean;
+  readonly defaultChecked?: boolean;
+  readonly onCheckedChange?: (checked: boolean) => void;
+  readonly disabled?: boolean;
+  readonly invalid?: boolean;
+  readonly required?: boolean;
+}
+
+export function Switch({
+  size,
+  tone,
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled,
+  invalid,
+  required,
+  style,
+  ref,
+  onLayout: onLayoutProp,
+  nativeID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityLabelledBy,
+  accessibilityState,
+  ...rest
+}: SwitchProps): JSX.Element {
+  const { theme, density } = useTheme();
+  const defaults = useComponentDefaults('Switch');
+  const resolved: SwitchVariantProps = {
+    size: size ?? defaults.size ?? switchRecipe.defaults.size,
+    tone: tone ?? defaults.tone ?? switchRecipe.defaults.tone,
+  };
+  const fieldProps = useFieldControlProps({
+    disabled,
+    required,
+    'aria-invalid': invalid,
+    nativeID,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelledBy,
+  });
+  const isDisabled = Boolean(fieldProps.disabled);
+  const isInvalid = Boolean(fieldProps.invalid || invalid);
+  const isControlled = checkedProp !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+  const checked = isControlled ? checkedProp : uncontrolled;
+
+  const { track, thumb, travel: defaultTravel } = mapSwitchStyle(
+    theme,
+    resolved,
+    density,
+    {
+      checked,
+      invalid: isInvalid,
+      disabled: isDisabled,
+    },
+  );
+  const thumbSize = typeof thumb.width === 'number' ? thumb.width : 0;
+  const [layoutWidth, setLayoutWidth] = useState(0);
+  const travel =
+    layoutWidth > 0
+      ? switchThumbTravel(layoutWidth, thumbSize)
+      : defaultTravel;
+  const reduced = useReducedMotion();
+  const rtl = I18nManager.isRTL;
+  const signedTravel = (rtl ? -1 : 1) * travel;
+
+  const onLayout = (event: LayoutChangeEvent): void => {
+    setLayoutWidth(event.nativeEvent.layout.width);
+    onLayoutProp?.(event);
+  };
+  const offset = useRef(new Animated.Value(checked ? signedTravel : 0)).current;
+
+  useEffect(() => {
+    const toValue = checked ? signedTravel : 0;
+    if (reduced) {
+      offset.setValue(toValue);
+      return;
+    }
+    const animation = Animated.timing(offset, {
+      toValue,
+      duration: theme.semantic.motion.fast.durationMs,
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [
+    checked,
+    signedTravel,
+    reduced,
+    offset,
+    theme.semantic.motion.fast.durationMs,
+  ]);
+
+  const trackHeight = typeof track.height === 'number' ? track.height : 20;
+  const hitSlop = Math.max(0, Math.ceil((44 - trackHeight) / 2));
+  const stateProps = a11yState({
+    ...accessibilityState,
+    checked: Boolean(checked),
+    disabled: isDisabled,
+  });
+
+  const toggle = (): void => {
+    if (isDisabled) return;
+    const next = !checked;
+    if (!isControlled) setUncontrolled(next);
+    onCheckedChange?.(next);
+  };
+
+  return (
+    <Pressable
+      ref={ref}
+      {...rest}
+      {...stateProps}
+      accessibilityRole="switch"
+      accessibilityLabel={fieldProps.accessibilityLabel ?? accessibilityLabel}
+      accessibilityHint={fieldProps.accessibilityHint ?? accessibilityHint}
+      accessibilityLabelledBy={fieldProps.accessibilityLabelledBy}
+      nativeID={fieldProps.nativeID}
+      disabled={isDisabled}
+      hitSlop={hitSlop}
+      onPress={toggle}
+      onLayout={onLayout}
+      style={[track, style]}
+      {...({
+        'aria-invalid': fieldProps['aria-invalid'],
+        'aria-required': fieldProps['aria-required'],
+        'data-invalid': isInvalid ? 'true' : undefined,
+        'data-state': checked ? 'checked' : 'unchecked',
+      } as object)}
+    >
+      <Animated.View
+        style={[
+          thumb,
+          {
+            marginStart: switchThumbInset,
+            transform: [{ translateX: offset }],
+          },
+        ]}
+      />
+    </Pressable>
+  );
+}
diff --git a/packages/silk-native/src/components/Textarea.tsx b/packages/silk-native/src/components/Textarea.tsx
new file mode 100644
index 0000000..72a45f3
--- /dev/null
+++ b/packages/silk-native/src/components/Textarea.tsx
@@ -0,0 +1,93 @@
+import {
+  textareaRecipe,
+  type TextareaVariantProps,
+} from '@reactive/silk-core';
+import { useState, type JSX, type Ref } from 'react';
+import {
+  TextInput,
+  type StyleProp,
+  type TextInputProps,
+  type TextStyle,
+} from 'react-native';
+import { mapTextareaStyle } from '../styles/mapStyles.js';
+import { useComponentDefaults } from '../theme/SilkProvider.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { useFieldControlProps } from './Field.js';
+
+export interface TextareaProps
+  extends TextareaVariantProps,
+    Omit<TextInputProps, 'style' | 'editable' | 'multiline'> {
+  readonly ref?: Ref<TextInput>;
+  readonly style?: StyleProp<TextStyle>;
+  readonly disabled?: boolean;
+  readonly invalid?: boolean;
+}
+
+export function Textarea({
+  size,
+  density,
+  style,
+  ref,
+  disabled,
+  invalid,
+  onFocus,
+  onBlur,
+  nativeID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityLabelledBy,
+  ...rest
+}: TextareaProps): JSX.Element {
+  const { theme, density: themeDensity } = useTheme();
+  const defaults = useComponentDefaults('Textarea');
+  const resolved: TextareaVariantProps = {
+    size: size ?? defaults.size ?? textareaRecipe.defaults.size,
+    density: density ?? defaults.density ?? themeDensity,
+  };
+  const fieldProps = useFieldControlProps({
+    nativeID,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelledBy,
+    disabled,
+    'aria-invalid': invalid,
+  });
+  const [focused, setFocused] = useState(false);
+  const isDisabled = Boolean(fieldProps.disabled);
+  const isInvalid = Boolean(fieldProps.invalid || invalid);
+  const mapped = mapTextareaStyle(theme, resolved, themeDensity, {
+    focused,
+    invalid: isInvalid,
+    disabled: isDisabled,
+  });
+
+  return (
+    <TextInput
+      ref={ref}
+      {...rest}
+      multiline
+      textAlignVertical="top"
+      nativeID={fieldProps.nativeID}
+      accessibilityLabel={fieldProps.accessibilityLabel}
+      accessibilityHint={fieldProps.accessibilityHint}
+      accessibilityLabelledBy={fieldProps.accessibilityLabelledBy}
+      editable={!isDisabled}
+      placeholderTextColor={theme.semantic.color.textSecondary}
+      onFocus={(event) => {
+        setFocused(true);
+        onFocus?.(event);
+      }}
+      onBlur={(event) => {
+        setFocused(false);
+        onBlur?.(event);
+      }}
+      style={[mapped, style]}
+      {...({
+        'aria-invalid': fieldProps['aria-invalid'],
+        'aria-required': fieldProps['aria-required'],
+        'data-invalid': isInvalid ? 'true' : undefined,
+        'data-disabled': isDisabled ? 'true' : undefined,
+      } as object)}
+    />
+  );
+}
diff --git a/packages/silk-native/src/components/forms.test.tsx b/packages/silk-native/src/components/forms.test.tsx
new file mode 100644
index 0000000..d2b638a
--- /dev/null
+++ b/packages/silk-native/src/components/forms.test.tsx
@@ -0,0 +1,296 @@
+import { compactSpace } from '@reactive/silk-core';
+import { expect, test } from '@rstest/core';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState, type JSX } from 'react';
+import { toggleBoxStep } from '../styles/controlGeometry.js';
+import { SilkProvider } from '../theme/SilkProvider.js';
+import { Checkbox } from './Checkbox.js';
+import { Field } from './Field.js';
+import { Input } from './Input.js';
+import { RadioGroup } from './RadioGroup.js';
+import { Stack } from './Stack.js';
+import { Switch } from './Switch.js';
+import { Textarea } from './Textarea.js';
+
+test('Input wires Field label into accessibilityLabel and controlId', () => {
+  render(
+    <SilkProvider>
+      <Field.Root controlId="name-input">
+        <Field.Label>Name</Field.Label>
+        <Input testID="input" />
+        <Field.Description>Your full name</Field.Description>
+      </Field.Root>
+    </SilkProvider>,
+  );
+  const input = screen.getByTestId('input');
+  expect(input.getAttribute('id') ?? input.getAttribute('nativeID')).toBeTruthy();
+  expect(screen.getByLabelText('Name')).toBeTruthy();
+});
+
+test('group Field associates custom slot nativeIDs via accessibilityLabelledBy', () => {
+  render(
+    <SilkProvider>
+      <Field.Root mode="group">
+        <Field.Label nativeID="plan-label">Plan</Field.Label>
+        <RadioGroup.Root testID="plan">
+          <RadioGroup.Item value="free">Free</RadioGroup.Item>
+        </RadioGroup.Root>
+        <Field.Description nativeID="plan-hint">Billing cycle</Field.Description>
+        <Field.Error nativeID="plan-error">Pick one</Field.Error>
+      </Field.Root>
+    </SilkProvider>,
+  );
+  const group = screen.getByTestId('plan');
+  // RNW maps accessibilityLabelledBy → aria-labelledby.
+  expect(group.getAttribute('aria-labelledby')).toBe('plan-label');
+  expect(screen.getByText('Plan').getAttribute('id')).toBe('plan-label');
+  expect(screen.getByText('Billing cycle').getAttribute('id')).toBe('plan-hint');
+  expect(screen.getByRole('alert').getAttribute('id')).toBe('plan-error');
+});
+
+test('Field Error has alert role; invalid/required emit ARIA aliases', () => {
+  render(
+    <SilkProvider>
+      <Field.Root invalid required>
+        <Field.Label>Email</Field.Label>
+        <Input testID="email" />
+        <Field.Error>Required</Field.Error>
+      </Field.Root>
+    </SilkProvider>,
+  );
+  expect(screen.getByRole('alert').textContent).toContain('Required');
+  const input = screen.getByTestId('email');
+  expect(input.getAttribute('aria-invalid')).toBe('true');
+  expect(input.getAttribute('aria-required')).toBe('true');
+  expect(screen.getByLabelText(/Email/)).toBeTruthy();
+});
+
+test('explicit disabled on Input wins over Field', () => {
+  render(
+    <SilkProvider>
+      <Field.Root>
+        <Field.Label>X</Field.Label>
+        <Input disabled testID="x" />
+      </Field.Root>
+    </SilkProvider>,
+  );
+  // RN TextInput uses editable={false}; RNW maps to disabled/readOnly.
+  const input = screen.getByTestId('x') as HTMLInputElement;
+  expect(
+    input.getAttribute('disabled') !== null ||
+      input.getAttribute('aria-disabled') === 'true' ||
+      input.readOnly === true ||
+      input.disabled === true,
+  ).toBe(true);
+});
+
+test('Textarea is multiline', () => {
+  render(
+    <SilkProvider>
+      <Textarea testID="ta" placeholder="Notes" />
+    </SilkProvider>,
+  );
+  expect(screen.getByTestId('ta')).toBeTruthy();
+  expect(screen.getByPlaceholderText('Notes')).toBeTruthy();
+});
+
+test('Checkbox toggles and emits aria-checked', () => {
+  let last: boolean | 'indeterminate' | undefined;
+  render(
+    <SilkProvider>
+      <Checkbox
+        accessibilityLabel="Agree"
+        onCheckedChange={(v) => {
+          last = v;
+        }}
+      />
+    </SilkProvider>,
+  );
+  const box = screen.getByRole('checkbox', { name: 'Agree' });
+  expect(box.getAttribute('aria-checked')).toBe('false');
+  fireEvent.click(box);
+  expect(last).toBe(true);
+  expect(screen.getByRole('checkbox').getAttribute('aria-checked')).toBe(
+    'true',
+  );
+});
+
+test('Checkbox indeterminate → checked transition', () => {
+  function Harness(): JSX.Element {
+    const [checked, setChecked] = useState<boolean | 'indeterminate'>(
+      'indeterminate',
+    );
+    return (
+      <Checkbox
+        checked={checked}
+        accessibilityLabel="Select all"
+        onCheckedChange={setChecked}
+      />
+    );
+  }
+  render(
+    <SilkProvider>
+      <Harness />
+    </SilkProvider>,
+  );
+  const box = screen.getByRole('checkbox', { name: 'Select all' });
+  expect(box.getAttribute('aria-checked')).toBe('mixed');
+  fireEvent.click(box);
+  expect(screen.getByRole('checkbox').getAttribute('aria-checked')).toBe(
+    'true',
+  );
+});
+
+test('Switch toggles with aria-checked', () => {
+  render(
+    <SilkProvider>
+      <Switch accessibilityLabel="Dark mode" />
+    </SilkProvider>,
+  );
+  const sw = screen.getByRole('switch', { name: 'Dark mode' });
+  expect(sw.getAttribute('aria-checked')).toBe('false');
+  fireEvent.click(sw);
+  expect(screen.getByRole('switch').getAttribute('aria-checked')).toBe('true');
+});
+
+test('RadioGroup exclusive selection', () => {
+  render(
+    <SilkProvider>
+      <RadioGroup.Root accessibilityLabel="Plan">
+        <RadioGroup.Item value="free">Free</RadioGroup.Item>
+        <RadioGroup.Item value="pro">Pro</RadioGroup.Item>
+      </RadioGroup.Root>
+    </SilkProvider>,
+  );
+  const free = screen.getByRole('radio', { name: 'Free' });
+  const pro = screen.getByRole('radio', { name: 'Pro' });
+  fireEvent.click(free);
+  expect(free.getAttribute('aria-checked')).toBe('true');
+  fireEvent.click(pro);
+  expect(pro.getAttribute('aria-checked')).toBe('true');
+  expect(screen.getByRole('radio', { name: 'Free' }).getAttribute('aria-checked')).toBe(
+    'false',
+  );
+});
+
+test('RadioGroup does not re-emit onValueChange for the active item', () => {
+  let calls = 0;
+  let last: string | undefined;
+  render(
+    <SilkProvider>
+      <RadioGroup.Root
+        defaultValue="free"
+        onValueChange={(v) => {
+          calls += 1;
+          last = v;
+        }}
+      >
+        <RadioGroup.Item value="free">Free</RadioGroup.Item>
+        <RadioGroup.Item value="pro">Pro</RadioGroup.Item>
+      </RadioGroup.Root>
+    </SilkProvider>,
+  );
+  fireEvent.click(screen.getByRole('radio', { name: 'Free' }));
+  expect(calls).toBe(0);
+  fireEvent.click(screen.getByRole('radio', { name: 'Pro' }));
+  expect(calls).toBe(1);
+  expect(last).toBe('pro');
+});
+
+test('horizontal Field keeps description under the label', () => {
+  render(
+    <SilkProvider>
+      <Field.Root
+        orientation="horizontal"
+        controlId="subscribe"
+        testID="field"
+      >
+        <Checkbox testID="cb" />
+        <Field.Label>Subscribe</Field.Label>
+        <Field.Description>Weekly digest</Field.Description>
+      </Field.Root>
+    </SilkProvider>,
+  );
+  const field = screen.getByTestId('field');
+  expect(getComputedStyle(field).flexDirection).toBe('row');
+  const label = screen.getByText('Subscribe');
+  const description = screen.getByText('Weekly digest');
+  expect(description.parentElement).toBe(label.parentElement);
+  expect(getComputedStyle(description.parentElement!).flexDirection).toBe(
+    'column',
+  );
+  expect(screen.getByTestId('cb').parentElement).not.toBe(
+    label.parentElement,
+  );
+});
+
+test('horizontal Field keeps wrapped description and error under the label', () => {
+  render(
+    <SilkProvider>
+      <Field.Root
+        orientation="horizontal"
+        controlId="digest"
+        invalid
+        testID="field"
+      >
+        <Checkbox testID="cb" />
+        <Field.Label>Subscribe</Field.Label>
+        <Stack gap="1" testID="hints">
+          <Field.Description>Weekly digest</Field.Description>
+          <Field.Error>Confirm your email</Field.Error>
+        </Stack>
+      </Field.Root>
+    </SilkProvider>,
+  );
+  const label = screen.getByText('Subscribe');
+  const hints = screen.getByTestId('hints');
+  expect(hints.parentElement).toBe(label.parentElement);
+  expect(screen.getByTestId('cb').parentElement).not.toBe(label.parentElement);
+});
+
+test('RadioGroup.Item gap honors compact density', () => {
+  render(
+    <SilkProvider density="compact">
+      <RadioGroup.Root accessibilityLabel="Plan">
+        <RadioGroup.Item value="free">Free</RadioGroup.Item>
+      </RadioGroup.Root>
+    </SilkProvider>,
+  );
+  const radio = screen.getByRole('radio', { name: 'Free' });
+  expect(getComputedStyle(radio).gap).toBe(`${compactSpace[2]}px`);
+});
+
+test('Checkbox children sit beside the control, not inside the box', () => {
+  render(
+    <SilkProvider density="compact">
+      <Checkbox accessibilityLabel="Agree">Notify me</Checkbox>
+    </SilkProvider>,
+  );
+  const control = screen.getByRole('checkbox', { name: 'Agree' });
+  const boxEdge = compactSpace[toggleBoxStep.md];
+  expect(getComputedStyle(control).flexDirection).toBe('row');
+  expect(getComputedStyle(control).gap).toBe(`${compactSpace[2]}px`);
+  // Fixed box size must not clamp the Pressable that holds the label.
+  expect(getComputedStyle(control).width).not.toBe(`${boxEdge}px`);
+  expect(screen.getByText('Notify me')).toBeTruthy();
+});
+
+test('disabled Checkbox suppresses press', () => {
+  let flips = 0;
+  render(
+    <SilkProvider>
+      <Checkbox
+        disabled
+        accessibilityLabel="Locked"
+        onCheckedChange={() => {
+          flips += 1;
+        }}
+      />
+    </SilkProvider>,
+  );
+  fireEvent.click(screen.getByRole('checkbox', { name: 'Locked' }));
+  expect(flips).toBe(0);
+  expect(
+    screen.getByRole('checkbox').getAttribute('aria-disabled'),
+  ).toBe('true');
+});
diff --git a/packages/silk-native/src/components/visual.test.tsx b/packages/silk-native/src/components/visual.test.tsx
new file mode 100644
index 0000000..b448f59
--- /dev/null
+++ b/packages/silk-native/src/components/visual.test.tsx
@@ -0,0 +1,151 @@
+import { expect, test } from '@rstest/core';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import type { View } from 'react-native';
+import { SilkProvider } from '../theme/SilkProvider.js';
+import { Avatar } from './Avatar.js';
+import { Badge } from './Badge.js';
+import { Card } from './Card.js';
+import { Heading } from './Heading.js';
+import { Progress } from './Progress.js';
+import { Separator } from './Separator.js';
+import { Skeleton } from './Skeleton.js';
+import { Spinner } from './Spinner.js';
+import { StatusDot } from './StatusDot.js';
+import { Surface } from './Surface.js';
+import { Text } from './Text.js';
+
+test('Heading exposes header role and aria-level', () => {
+  render(
+    <SilkProvider>
+      <Heading level="1">Title</Heading>
+    </SilkProvider>,
+  );
+  const heading = screen.getByRole('heading', { name: 'Title' });
+  expect(heading.getAttribute('aria-level')).toBe('1');
+});
+
+test('Surface with onPress is pressable button; interactive alone is not', () => {
+  let pressed = 0;
+  const { rerender } = render(
+    <SilkProvider>
+      <Surface interactive="true" testID="surface">
+        <Text>Idle</Text>
+      </Surface>
+    </SilkProvider>,
+  );
+  expect(screen.queryByRole('button')).toBeNull();
+
+  rerender(
+    <SilkProvider>
+      <Surface
+        interactive="true"
+        testID="surface"
+        onPress={() => {
+          pressed += 1;
+        }}
+      >
+        <Text>Clickable</Text>
+      </Surface>
+    </SilkProvider>,
+  );
+  expect(screen.getByRole('button', { name: 'Clickable' })).toBeTruthy();
+  fireEvent.click(screen.getByTestId('surface'));
+  expect(pressed).toBe(1);
+});
+
+test('Card ref and Badge render children', () => {
+  const ref = createRef<View>();
+  render(
+    <SilkProvider>
+      <Card ref={ref} testID="card">
+        <Badge>New</Badge>
+      </Card>
+    </SilkProvider>,
+  );
+  expect(ref.current).toBeTruthy();
+  expect(screen.getByText('New')).toBeTruthy();
+});
+
+test('decorative Separator is not in the a11y tree; non-decorative uses role', () => {
+  const { container } = render(
+    <SilkProvider>
+      <Separator decorative testID="deco" />
+      <Separator decorative={false} orientation="vertical" testID="real" />
+    </SilkProvider>,
+  );
+  const deco = screen.getByTestId('deco');
+  expect(deco.getAttribute('aria-hidden') === 'true' || deco.getAttribute('role') === null || deco.getAttribute('role') === 'none' || deco.getAttribute('role') === 'presentation').toBe(true);
+  const real = screen.getByTestId('real');
+  expect(real.getAttribute('role')).toBe('separator');
+  expect(container).toBeTruthy();
+});
+
+test('Avatar falls back when no src', () => {
+  render(
+    <SilkProvider>
+      <Avatar fallback="NT" testID="avatar" />
+    </SilkProvider>,
+  );
+  expect(screen.getByText('NT')).toBeTruthy();
+});
+
+test('StatusDot and Skeleton are not accessible', () => {
+  render(
+    <SilkProvider>
+      <StatusDot testID="dot" />
+      <Skeleton testID="skel" />
+    </SilkProvider>,
+  );
+  expect(screen.getByTestId('dot').getAttribute('aria-hidden')).not.toBe('false');
+  expect(screen.getByTestId('skel')).toBeTruthy();
+});
+
+test('Spinner exposes status role and label', () => {
+  render(
+    <SilkProvider>
+      <Spinner label="Fetching" testID="spin" />
+    </SilkProvider>,
+  );
+  expect(screen.getByLabelText('Fetching')).toBeTruthy();
+});
+
+test('Progress determinate emits aria-valuenow via compat helper', () => {
+  render(
+    <SilkProvider>
+      <Progress value={40} max={100} label="Upload" testID="prog" />
+    </SilkProvider>,
+  );
+  const el = screen.getByLabelText('Upload');
+  expect(el.getAttribute('aria-valuenow')).toBe('40');
+  expect(el.getAttribute('aria-valuemin')).toBe('0');
+  expect(el.getAttribute('aria-valuemax')).toBe('100');
+});
+
+test('Progress clamps value to max and treats negative as indeterminate', () => {
+  const { rerender } = render(
+    <SilkProvider>
+      <Progress value={150} max={100} label="Clamp" />
+    </SilkProvider>,
+  );
+  expect(screen.getByLabelText('Clamp').getAttribute('aria-valuenow')).toBe(
+    '100',
+  );
+  rerender(
+    <SilkProvider>
+      <Progress value={-1} max={100} label="Clamp" />
+    </SilkProvider>,
+  );
+  expect(screen.getByLabelText('Clamp').getAttribute('aria-valuenow')).toBeNull();
+});
+
+test('Progress indeterminate omits aria-valuenow', () => {
+  render(
+    <SilkProvider>
+      <Progress label="Loading bar" testID="indet" />
+    </SilkProvider>,
+  );
+  const el = screen.getByLabelText('Loading bar');
+  expect(el.getAttribute('aria-valuenow')).toBeNull();
+  expect(el.getAttribute('aria-valuemax')).toBe('100');
+});
diff --git a/packages/silk-native/src/index.ts b/packages/silk-native/src/index.ts
index 101c9ea..5856e70 100644
--- a/packages/silk-native/src/index.ts
+++ b/packages/silk-native/src/index.ts
@@ -8,6 +8,57 @@ export { Text } from './components/Text.js';
 export type { TextProps } from './components/Text.js';
 export { Button } from './components/Button.js';
 export type { ButtonProps } from './components/Button.js';
+export { Surface } from './components/Surface.js';
+export type { SurfaceProps } from './components/Surface.js';
+export { Card } from './components/Card.js';
+export type { CardProps } from './components/Card.js';
+export { Heading } from './components/Heading.js';
+export type { HeadingProps } from './components/Heading.js';
+export { Badge } from './components/Badge.js';
+export type { BadgeProps } from './components/Badge.js';
+export { Separator } from './components/Separator.js';
+export type { SeparatorProps } from './components/Separator.js';
+export { Avatar } from './components/Avatar.js';
+export type { AvatarProps } from './components/Avatar.js';
+export { StatusDot } from './components/StatusDot.js';
+export type { StatusDotProps } from './components/StatusDot.js';
+export { Skeleton } from './components/Skeleton.js';
+export type { SkeletonProps } from './components/Skeleton.js';
+export { Spinner } from './components/Spinner.js';
+export type { SpinnerProps } from './components/Spinner.js';
+export { Progress } from './components/Progress.js';
+export type { ProgressProps } from './components/Progress.js';
+export { Input } from './components/Input.js';
+export type { InputProps } from './components/Input.js';
+export { Textarea } from './components/Textarea.js';
+export type { TextareaProps } from './components/Textarea.js';
+export {
+  Field,
+  useFieldContext,
+  useFieldControlProps,
+  fieldLabelAssociation,
+} from './components/Field.js';
+export type {
+  FieldRootProps,
+  FieldLabelProps,
+  FieldDescriptionProps,
+  FieldErrorProps,
+  FieldMode,
+  FieldOrientation,
+  FieldLabelAssociation,
+  FieldContextValue,
+  FieldControlProps,
+  AriaInvalid,
+} from './components/Field.js';
+export { Checkbox } from './components/Checkbox.js';
+export type { CheckboxProps, CheckedState } from './components/Checkbox.js';
+export { Switch } from './components/Switch.js';
+export type { SwitchProps } from './components/Switch.js';
+export { RadioGroup } from './components/RadioGroup.js';
+export type {
+  RadioGroupRootProps,
+  RadioGroupItemProps,
+} from './components/RadioGroup.js';
 
 export { ThemeProvider, useTheme, useThemeDensity } from './theme/ThemeProvider.js';
 export type {
@@ -22,11 +73,48 @@ export {
 export type { SilkDefaults, SilkProviderProps } from './theme/SilkProvider.js';
 
 export {
+  elevationBackground,
+  mapAvatarStyle,
+  mapBadgeStyle,
   mapBoxStyle,
   mapButtonStyle,
+  mapCardStyle,
+  mapCheckboxStyle,
+  mapHeadingStyle,
   mapInlineStyle,
+  mapInputStyle,
+  mapProgressStyle,
+  mapRadioGroupStyle,
+  mapRadioItemStyle,
+  mapSeparatorStyle,
+  mapShadow,
+  mapSkeletonStyle,
+  mapSpinnerStyle,
   mapStackStyle,
+  mapStatusDotStyle,
+  mapSurfaceStyle,
+  mapSwitchStyle,
   mapTextStyle,
+  mapTextareaStyle,
   resolveNativeFontFamily,
+  checkboxIndicatorColor,
 } from './styles/mapStyles.js';
-export type { RnTextStyle, RnViewStyle } from './styles/mapStyles.js';
+export type {
+  RnTextStyle,
+  RnViewStyle,
+  TextControlState,
+  ToggleVisualState,
+} from './styles/mapStyles.js';
+export { a11yState, a11yValue } from './styles/a11yProps.js';
+export type {
+  AccessibilityStateCompat,
+  AccessibilityValueCompat,
+  A11yStateProps,
+  A11yValueProps,
+  AriaChecked,
+} from './styles/a11yProps.js';
+export {
+  useMotionPreference,
+  useReducedMotion,
+} from './styles/useReducedMotion.js';
+export type { MotionPreference } from './styles/useReducedMotion.js';
diff --git a/packages/silk-native/src/styles/a11yProps.ts b/packages/silk-native/src/styles/a11yProps.ts
new file mode 100644
index 0000000..90a277b
--- /dev/null
+++ b/packages/silk-native/src/styles/a11yProps.ts
@@ -0,0 +1,85 @@
+/**
+ * Emit React Native accessibility object props together with react-native-web
+ * ARIA aliases. RNW 0.21 forwards flattened `accessibilityValueMin/Max/Now/Text`
+ * and DOM ARIA attributes, not the RN object shapes — without aliases, Checkbox
+ * `aria-checked` and Progress `aria-valuenow` would silently vanish in
+ * Storybook / jsdom tests.
+ */
+
+/** RN / RNW-compatible checked values (excludes string "true"/"false"). */
+export type AriaChecked = boolean | 'mixed';
+
+export interface AccessibilityStateCompat {
+  readonly disabled?: boolean | undefined;
+  readonly selected?: boolean | undefined;
+  readonly checked?: boolean | 'mixed' | undefined;
+  readonly busy?: boolean | undefined;
+  readonly expanded?: boolean | undefined;
+}
+
+export interface AccessibilityValueCompat {
+  readonly min?: number | undefined;
+  readonly max?: number | undefined;
+  readonly now?: number | undefined;
+  readonly text?: string | undefined;
+}
+
+export interface A11yStateProps {
+  readonly accessibilityState: AccessibilityStateCompat;
+  readonly 'aria-checked'?: AriaChecked;
+  readonly 'aria-disabled'?: boolean;
+  readonly 'aria-selected'?: boolean;
+  readonly 'aria-busy'?: boolean;
+  readonly 'aria-expanded'?: boolean;
+}
+
+export interface A11yValueProps {
+  readonly accessibilityValue: AccessibilityValueCompat;
+  readonly accessibilityValueMin?: number;
+  readonly accessibilityValueMax?: number;
+  readonly accessibilityValueNow?: number;
+  readonly accessibilityValueText?: string;
+  readonly 'aria-valuemin'?: number;
+  readonly 'aria-valuemax'?: number;
+  readonly 'aria-valuenow'?: number;
+  readonly 'aria-valuetext'?: string;
+}
+
+/** Pair `accessibilityState` with ARIA aliases for RNW. */
+export function a11yState(
+  state: AccessibilityStateCompat,
+): A11yStateProps {
+  return {
+    accessibilityState: state,
+    ...(state.checked !== undefined ? { 'aria-checked': state.checked } : {}),
+    ...(state.disabled !== undefined
+      ? { 'aria-disabled': state.disabled }
+      : {}),
+    ...(state.selected !== undefined
+      ? { 'aria-selected': state.selected }
+      : {}),
+    ...(state.busy !== undefined ? { 'aria-busy': state.busy } : {}),
+    ...(state.expanded !== undefined
+      ? { 'aria-expanded': state.expanded }
+      : {}),
+  };
+}
+
+/** Pair `accessibilityValue` with flattened + ARIA aliases for RNW. */
+export function a11yValue(value: AccessibilityValueCompat): A11yValueProps {
+  return {
+    accessibilityValue: value,
+    ...(value.min !== undefined
+      ? { accessibilityValueMin: value.min, 'aria-valuemin': value.min }
+      : {}),
+    ...(value.max !== undefined
+      ? { accessibilityValueMax: value.max, 'aria-valuemax': value.max }
+      : {}),
+    ...(value.now !== undefined
+      ? { accessibilityValueNow: value.now, 'aria-valuenow': value.now }
+      : {}),
+    ...(value.text !== undefined
+      ? { accessibilityValueText: value.text, 'aria-valuetext': value.text }
+      : {}),
+  };
+}
diff --git a/packages/silk-native/src/styles/controlGeometry.ts b/packages/silk-native/src/styles/controlGeometry.ts
index ce8169f..61f1ab6 100644
--- a/packages/silk-native/src/styles/controlGeometry.ts
+++ b/packages/silk-native/src/styles/controlGeometry.ts
@@ -1,4 +1,11 @@
-import type { ButtonVariantProps, SpaceStep } from '@reactive/silk-core';
+import type {
+  ButtonVariantProps,
+  CheckboxVariantProps,
+  InputVariantProps,
+  ProgressVariantProps,
+  SpaceStep,
+  SpinnerVariantProps,
+} from '@reactive/silk-core';
 
 /**
  * Renderer-local control padding — intentionally parallel to web
@@ -24,3 +31,73 @@ export const controlLineHeightFactor = 1.2;
  * Used for Text `measure="prose"` → RN `maxWidth`.
  */
 export const chEmApproximation = 0.6;
+
+type ControlSize = NonNullable<InputVariantProps['size']>;
+type ToggleSize = NonNullable<CheckboxVariantProps['size']>;
+type ProgressSize = NonNullable<ProgressVariantProps['size']>;
+type SpinnerSize = NonNullable<SpinnerVariantProps['size']>;
+
+/**
+ * Min-height space steps for text controls (Input). lg = space[8] + space[2]
+ * (web: `calc(var(--silk-space-8) + var(--silk-space-2))`).
+ * Resolved through the density-aware space scale.
+ */
+export const controlMinHeightStep: Readonly<
+  Record<ControlSize, { readonly a: SpaceStep; readonly b?: SpaceStep }>
+> = {
+  sm: { a: 7 },
+  md: { a: 8 },
+  lg: { a: 8, b: 2 },
+};
+
+/** Checkbox / Radio box and Switch track height (web space-4 / space-5). */
+export const toggleBoxStep: Readonly<Record<ToggleSize, SpaceStep>> = {
+  sm: 4,
+  md: 5,
+};
+
+/**
+ * Switch track width steps. sm = space[7] + space[1]
+ * (web: `calc(var(--silk-space-7) + var(--silk-space-1))`).
+ */
+export const switchTrackWidthStep: Readonly<
+  Record<ToggleSize, { readonly a: SpaceStep; readonly b?: SpaceStep }>
+> = {
+  sm: { a: 7, b: 1 },
+  md: { a: 8 },
+};
+
+/** Spinner diameter (space step) + fixed border width in px. */
+export const spinnerGeometry: Readonly<
+  Record<SpinnerSize, { readonly sizeStep: SpaceStep; readonly border: number }>
+> = {
+  sm: { sizeStep: 4, border: 2 },
+  md: { sizeStep: 5, border: 3 },
+  lg: { sizeStep: 7, border: 3 },
+};
+
+/** Progress track heights as space steps (sm/md/lg → 1/2/3). */
+export const progressTrackStep: Readonly<Record<ProgressSize, SpaceStep>> = {
+  sm: 1,
+  md: 2,
+  lg: 3,
+};
+
+/** Thumb inset on Switch (web: 2px margin each side). */
+export const switchThumbInset = 2;
+
+/** Max translateX for a switch thumb given laid-out track + thumb sizes. */
+export function switchThumbTravel(
+  trackWidth: number,
+  thumbSize: number,
+): number {
+  return Math.max(0, trackWidth - thumbSize - switchThumbInset * 2);
+}
+
+/** Resolve a `{ a, b? }` step pair against a space scale. */
+export function resolveSpaceSum(
+  space: Readonly<Record<SpaceStep, number>>,
+  steps: { readonly a: SpaceStep; readonly b?: SpaceStep },
+): number {
+  return space[steps.a] + (steps.b !== undefined ? space[steps.b] : 0);
+}
diff --git a/packages/silk-native/src/styles/mapStyles.test.ts b/packages/silk-native/src/styles/mapStyles.test.ts
index 06fa1cf..db422db 100644
--- a/packages/silk-native/src/styles/mapStyles.test.ts
+++ b/packages/silk-native/src/styles/mapStyles.test.ts
@@ -1,6 +1,7 @@
 import {
   boxRecipe,
   buttonRecipe,
+  compactSpace,
   createTheme,
   inlineRecipe,
   stackRecipe,
@@ -11,12 +12,17 @@ import {
   chEmApproximation,
   controlLineHeightFactor,
   controlSizePadding,
+  switchThumbInset,
+  switchThumbTravel,
 } from './controlGeometry.js';
 import {
   mapBoxStyle,
   mapButtonStyle,
   mapInlineStyle,
+  mapRadioGroupStyle,
+  mapRadioItemStyle,
   mapStackStyle,
+  mapSwitchStyle,
   mapTextStyle,
   resolveNativeFontFamily,
 } from './mapStyles.js';
@@ -138,6 +144,49 @@ test('mapButtonStyle uses control geometry and density', () => {
   expect((compact.view.paddingTop ?? 0) < (md.view.paddingTop ?? 0)).toBe(true);
 });
 
+test('mapRadioGroupStyle root gap honors compact density', () => {
+  const comfortable = mapRadioGroupStyle(theme, {}, 'comfortable');
+  const compact = mapRadioGroupStyle(theme, {}, 'compact');
+  expect(comfortable.root.gap).toBe(theme.semantic.space[2]);
+  expect(compact.root.gap).toBe(compactSpace[2]);
+  expect(compact.root.gap).toBeLessThan(theme.semantic.space[2]);
+});
+
+test('mapRadioItemStyle row gap honors compact density', () => {
+  const comfortable = mapRadioItemStyle(theme, {}, 'comfortable');
+  const compact = mapRadioItemStyle(theme, {}, 'compact');
+  expect(comfortable.row.gap).toBe(theme.semantic.space[2]);
+  expect(compact.row.gap).toBe(compactSpace[2]);
+});
+
+test('mapSwitchStyle keeps the thumb on surface when disabled', () => {
+  const disabled = mapSwitchStyle(theme, { tone: 'accent' }, 'comfortable', {
+    disabled: true,
+  });
+  expect(disabled.track.backgroundColor).toBe(
+    theme.semantic.color.tones.accent.disabledBg,
+  );
+  expect(disabled.thumb.backgroundColor).toBe(theme.semantic.color.surface);
+  expect(disabled.thumb.backgroundColor).not.toBe(
+    disabled.track.backgroundColor,
+  );
+});
+
+test('switchThumbTravel scales with laid-out track width', () => {
+  const { track, thumb, travel: defaultTravel } = mapSwitchStyle(
+    theme,
+    { size: 'md' },
+    'comfortable',
+    {},
+  );
+  const thumbSize = thumb.width as number;
+  expect(defaultTravel).toBe(switchThumbTravel(track.width as number, thumbSize));
+  expect(switchThumbTravel(200, thumbSize)).toBe(
+    200 - thumbSize - switchThumbInset * 2,
+  );
+  expect(switchThumbTravel(thumbSize, thumbSize)).toBe(0);
+});
+
 test('recipe defaults remain the shared contract', () => {
   expect(boxRecipe.defaults.padding).toBe('0');
   expect(stackRecipe.defaults.align).toBe('stretch');
diff --git a/packages/silk-native/src/styles/mapStyles.ts b/packages/silk-native/src/styles/mapStyles.ts
index 88af9e1..35b3519 100644
--- a/packages/silk-native/src/styles/mapStyles.ts
+++ b/packages/silk-native/src/styles/mapStyles.ts
@@ -4,26 +4,67 @@
  * the emitted .d.ts stands alone without RN types installed.
  */
 import {
+  avatarRecipe,
+  badgeRecipe,
   boxRecipe,
   buttonRecipe,
+  cardRecipe,
+  checkboxRecipe,
   compactSpace,
+  headingRecipe,
   inlineRecipe,
+  inputRecipe,
+  mediaScale,
+  progressRecipe,
+  radioGroupRecipe,
+  separatorRecipe,
+  skeletonRecipe,
+  spinnerRecipe,
   stackRecipe,
+  statusDotRecipe,
+  surfaceRecipe,
+  switchRecipe,
   textRecipe,
+  textareaRecipe,
+  type AvatarVariantProps,
+  type BadgeVariantProps,
   type BoxVariantProps,
   type ButtonVariantProps,
+  type CardVariantProps,
+  type CheckboxVariantProps,
   type DensityName,
+  type ElevationName,
+  type HeadingVariantProps,
   type InlineVariantProps,
+  type InputVariantProps,
+  type ProgressVariantProps,
+  type RadioGroupVariantProps,
+  type SeparatorVariantProps,
+  type SkeletonVariantProps,
   type SpaceStep,
+  type SpinnerVariantProps,
   type StackVariantProps,
+  type StatusDotVariantProps,
+  type SurfaceVariantProps,
+  type SwitchVariantProps,
   type TextVariantProps,
+  type TextareaVariantProps,
   type Theme,
   type ToneName,
+  type TypographyRole,
 } from '@reactive/silk-core';
 import {
   chEmApproximation,
   controlLineHeightFactor,
+  controlMinHeightStep,
   controlSizePadding,
+  progressTrackStep,
+  resolveSpaceSum,
+  spinnerGeometry,
+  switchThumbInset,
+  switchThumbTravel,
+  switchTrackWidthStep,
+  toggleBoxStep,
 } from './controlGeometry.js';
 
 export type RnViewStyle = {
@@ -60,10 +101,24 @@ export type RnViewStyle = {
   borderRadius?: number | undefined;
   borderWidth?: number | undefined;
   borderColor?: string | undefined;
-  borderStyle?: 'solid' | undefined;
+  borderStyle?: 'solid' | 'dotted' | 'dashed' | undefined;
+  borderTopColor?: string | undefined;
   borderStartWidth?: number | undefined;
   borderStartColor?: string | undefined;
-  alignSelf?: 'flex-start' | undefined;
+  alignSelf?: 'flex-start' | 'stretch' | undefined;
+  width?: number | `${number}%` | undefined;
+  height?: number | `${number}%` | undefined;
+  minHeight?: number | undefined;
+  minWidth?: number | undefined;
+  maxWidth?: number | undefined;
+  overflow?: 'hidden' | 'visible' | undefined;
+  opacity?: number | undefined;
+  shadowColor?: string | undefined;
+  shadowOffset?: { readonly width: number; readonly height: number } | undefined;
+  shadowOpacity?: number | undefined;
+  shadowRadius?: number | undefined;
+  elevation?: number | undefined;
+  flexShrink?: number | undefined;
 };
 
 export type RnTextStyle = {
@@ -122,6 +177,26 @@ const textToneColor = {
   (theme: Theme) => string
 >;
 
+type RnTypographyStyle = Pick<
+  RnTextStyle,
+  'fontFamily' | 'fontSize' | 'lineHeight' | 'fontWeight'
+>;
+
+function typographyStyle(
+  theme: Theme,
+  role: TypographyRole,
+): RnTypographyStyle {
+  const typo = theme.semantic.typography[role];
+  return {
+    fontFamily: resolveNativeFontFamily(
+      theme.semantic.fontFamily[typo.family],
+    ),
+    fontSize: typo.size,
+    lineHeight: typo.lineHeight * typo.size,
+    fontWeight: String(typo.weight) as NonNullable<RnTextStyle['fontWeight']>,
+  };
+}
+
 function spaceScale(
   theme: Theme,
   density: DensityName,
@@ -169,6 +244,69 @@ export function resolveNativeFontFamily(stack: string): string | undefined {
   return face;
 }
 
+// --- Elevation ---------------------------------------------------------------
+
+type SurfaceElevation = NonNullable<SurfaceVariantProps['elevation']>;
+
+/** Elevation fill — overlay uses surfaceRaised (no surfaceOverlay token). */
+export function elevationBackground(
+  theme: Theme,
+  elevation: SurfaceElevation,
+): string {
+  switch (elevation) {
+    case 'sunken':
+      return theme.semantic.color.surfaceSunken;
+    case 'flat':
+      return theme.semantic.color.surface;
+    case 'raised':
+    case 'overlay':
+      return theme.semantic.color.surfaceRaised;
+  }
+}
+
+/** Map core ShadowLayer → RN shadow / Android elevation props. */
+export function mapShadow(
+  theme: Theme,
+  level: ElevationName | 'none',
+): Pick<
+  RnViewStyle,
+  | 'shadowColor'
+  | 'shadowOffset'
+  | 'shadowOpacity'
+  | 'shadowRadius'
+  | 'elevation'
+> {
+  if (level === 'none') {
+    return {};
+  }
+  const layer = theme.semantic.shadow[level];
+  return {
+    shadowColor: '#000',
+    shadowOffset: { width: layer.offsetX, height: layer.offsetY },
+    shadowOpacity: layer.opacity,
+    shadowRadius: layer.blur / 2,
+    elevation: layer.offsetY,
+  };
+}
+
+function elevationShadowLevel(
+  elevation: SurfaceElevation,
+): ElevationName | 'none' {
+  if (elevation === 'raised') return 'raised';
+  if (elevation === 'overlay') return 'overlay';
+  return 'none';
+}
+
+/** Pressed elevation bump mirrors web hover (sunken/flat→raised, raised/overlay→overlay). */
+function pressedShadowLevel(
+  elevation: SurfaceElevation,
+): ElevationName | 'none' {
+  if (elevation === 'sunken' || elevation === 'flat') return 'raised';
+  return 'overlay';
+}
+
+// --- Layout ------------------------------------------------------------------
+
 export function mapBoxStyle(
   theme: Theme,
   props: BoxVariantProps = {},
@@ -240,16 +378,10 @@ export function mapTextStyle(
   const tone = props.tone ?? textRecipe.defaults.tone;
   const measure = props.measure ?? textRecipe.defaults.measure;
   const typo = theme.semantic.typography[role];
-  const weight = String(typo.weight) as NonNullable<RnTextStyle['fontWeight']>;
 
   const style: RnTextStyle = {
     color: textToneColor[tone](theme),
-    fontFamily: resolveNativeFontFamily(
-      theme.semantic.fontFamily[typo.family],
-    ),
-    fontSize: typo.size,
-    lineHeight: typo.lineHeight * typo.size,
-    fontWeight: weight,
+    ...typographyStyle(theme, role),
   };
 
   if (measure === 'prose') {
@@ -323,7 +455,6 @@ export function mapButtonStyle(
   const pad = controlSizePadding[size];
   const fontRole = sizeFontRole[size];
   const typo = theme.semantic.typography[fontRole];
-  const label = theme.semantic.typography.label;
   const radius = theme.semantic.radius.md;
   const colors = buttonColors(theme, variant, toneName, pressed, disabled);
 
@@ -346,12 +477,561 @@ export function mapButtonStyle(
     },
     text: {
       color: colors.color,
-      fontFamily: resolveNativeFontFamily(
-        theme.semantic.fontFamily[label.family],
-      ),
+      ...typographyStyle(theme, 'label'),
       fontSize: typo.size,
       lineHeight: controlLineHeightFactor * typo.size,
-      fontWeight: String(label.weight) as NonNullable<RnTextStyle['fontWeight']>,
     },
   };
 }
+
+// --- Visual primitives -------------------------------------------------------
+
+export function mapSurfaceStyle(
+  theme: Theme,
+  props: SurfaceVariantProps = {},
+  pressed = false,
+): RnViewStyle {
+  const elevation = props.elevation ?? surfaceRecipe.defaults.elevation;
+  const radius = props.radius ?? surfaceRecipe.defaults.radius;
+  const border = props.border ?? surfaceRecipe.defaults.border;
+  const interactive = props.interactive ?? surfaceRecipe.defaults.interactive;
+  const shadowLevel =
+    pressed && interactive === 'true'
+      ? pressedShadowLevel(elevation)
+      : elevationShadowLevel(elevation);
+
+  return {
+    backgroundColor: elevationBackground(theme, elevation),
+    borderRadius: theme.semantic.radius[radius],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor:
+      border === 'subtle' ? theme.semantic.color.borderSubtle : 'transparent',
+    ...mapShadow(theme, shadowLevel),
+  };
+}
+
+export function mapCardStyle(
+  theme: Theme,
+  props: CardVariantProps = {},
+  density: DensityName = 'comfortable',
+  pressed = false,
+): RnViewStyle {
+  const elevation = props.elevation ?? cardRecipe.defaults.elevation;
+  const padding = resolveSpaceStep(props.padding, cardRecipe.defaults.padding);
+  const radius = props.radius ?? cardRecipe.defaults.radius;
+  const interactive = props.interactive ?? cardRecipe.defaults.interactive;
+  const space = spaceScale(theme, density);
+  const shadowLevel =
+    pressed && interactive === 'true'
+      ? pressedShadowLevel(elevation)
+      : elevationShadowLevel(elevation);
+
+  return {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: space[2],
+    padding: space[padding],
+    backgroundColor: elevationBackground(theme, elevation),
+    borderRadius: theme.semantic.radius[radius],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.semantic.color.borderSubtle,
+    ...mapShadow(theme, shadowLevel),
+  };
+}
+
+const levelToDefaultSize = {
+  '1': 'xl',
+  '2': 'lg',
+  '3': 'md',
+  '4': 'sm',
+  '5': 'sm',
+  '6': 'sm',
+} as const satisfies Record<
+  NonNullable<HeadingVariantProps['level']>,
+  NonNullable<HeadingVariantProps['size']>
+>;
+
+const headingSizeToRole = {
+  sm: 'headingSm',
+  md: 'heading',
+  lg: 'headingLg',
+  xl: 'headingXl',
+} as const satisfies Record<
+  NonNullable<HeadingVariantProps['size']>,
+  TypographyRole
+>;
+
+export function mapHeadingStyle(
+  theme: Theme,
+  props: HeadingVariantProps = {},
+): RnTextStyle {
+  const level = props.level ?? headingRecipe.defaults.level;
+  const size = props.size ?? levelToDefaultSize[level];
+  const tone = props.tone ?? headingRecipe.defaults.tone;
+  const role = headingSizeToRole[size];
+  return {
+    color: textToneColor[tone](theme),
+    ...typographyStyle(theme, role),
+  };
+}
+
+export function mapBadgeStyle(
+  theme: Theme,
+  props: BadgeVariantProps = {},
+  density: DensityName = 'comfortable',
+): { view: RnViewStyle; text: RnTextStyle } {
+  const variant = props.variant ?? badgeRecipe.defaults.variant;
+  const toneName = props.tone ?? badgeRecipe.defaults.tone;
+  const size = props.size ?? badgeRecipe.defaults.size;
+  const tone = theme.semantic.color.tones[toneName];
+  const space = spaceScale(theme, density);
+  const typoRole = size === 'sm' ? 'caption' : 'label';
+
+  let backgroundColor = 'transparent';
+  let color = tone.text;
+  let borderColor = 'transparent';
+  if (variant === 'solid') {
+    backgroundColor = tone.solid;
+    color = tone.onSolid;
+  } else if (variant === 'soft') {
+    backgroundColor = tone.subtle;
+    color = tone.text;
+  } else {
+    borderColor = tone.border;
+  }
+
+  return {
+    view: {
+      alignSelf: 'flex-start',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: theme.semantic.radius.full,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor,
+      backgroundColor,
+      minHeight: size === 'sm' ? space[4] + space[1] : space[5],
+      paddingTop: size === 'sm' ? 0 : space[1],
+      paddingBottom: size === 'sm' ? 0 : space[1],
+      paddingLeft: size === 'sm' ? space[1] : space[2],
+      paddingRight: size === 'sm' ? space[1] : space[2],
+    },
+    text: {
+      color,
+      ...typographyStyle(theme, typoRole),
+    },
+  };
+}
+
+export function mapSeparatorStyle(
+  theme: Theme,
+  props: SeparatorVariantProps = {},
+): RnViewStyle {
+  const orientation = props.orientation ?? separatorRecipe.defaults.orientation;
+  const base: RnViewStyle = {
+    backgroundColor: theme.semantic.color.borderSubtle,
+    alignSelf: 'stretch',
+    flexShrink: 0,
+  };
+  if (orientation === 'vertical') {
+    return { ...base, width: 1 };
+  }
+  return { ...base, height: 1 };
+}
+
+const avatarRadius = {
+  circle: 'full',
+  rounded: 'md',
+  square: 'none',
+} as const satisfies Record<
+  NonNullable<AvatarVariantProps['shape']>,
+  keyof Theme['semantic']['radius']
+>;
+
+export function mapAvatarStyle(
+  theme: Theme,
+  props: AvatarVariantProps = {},
+): { view: RnViewStyle; text: RnTextStyle } {
+  const size = props.size ?? avatarRecipe.defaults.size;
+  const shape = props.shape ?? avatarRecipe.defaults.shape;
+  const edge = mediaScale[size].media;
+  return {
+    view: {
+      width: edge,
+      height: edge,
+      borderRadius: theme.semantic.radius[avatarRadius[shape]],
+      overflow: 'hidden',
+      backgroundColor: theme.semantic.color.tones.neutral.subtle,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+    },
+    text: {
+      color: theme.semantic.color.textSecondary,
+      ...typographyStyle(theme, 'label'),
+      fontSize: edge * 0.4,
+      lineHeight: edge * 0.4,
+    },
+  };
+}
+
+export function mapStatusDotStyle(
+  theme: Theme,
+  props: StatusDotVariantProps = {},
+  density: DensityName = 'comfortable',
+): RnViewStyle {
+  const toneName = props.tone ?? statusDotRecipe.defaults.tone;
+  const size = props.size ?? statusDotRecipe.defaults.size;
+  const space = spaceScale(theme, density);
+  const edge = size === 'sm' ? space[2] : space[3];
+  return {
+    width: edge,
+    height: edge,
+    borderRadius: theme.semantic.radius.full,
+    backgroundColor: theme.semantic.color.tones[toneName].solid,
+    flexShrink: 0,
+  };
+}
+
+export function mapSkeletonStyle(
+  theme: Theme,
+  props: SkeletonVariantProps = {},
+  density: DensityName = 'comfortable',
+): RnViewStyle {
+  const shape = props.shape ?? skeletonRecipe.defaults.shape;
+  const space = spaceScale(theme, density);
+  const base: RnViewStyle = {
+    backgroundColor: theme.semantic.color.borderSubtle,
+  };
+  if (shape === 'circle') {
+    return {
+      ...base,
+      width: space[8],
+      height: space[8],
+      borderRadius: theme.semantic.radius.full,
+    };
+  }
+  if (shape === 'rect') {
+    return {
+      ...base,
+      width: '100%',
+      minHeight: space[8],
+      borderRadius: theme.semantic.radius.md,
+    };
+  }
+  return {
+    ...base,
+    width: '100%',
+    height: theme.semantic.typography.body.size,
+    borderRadius: theme.semantic.radius.sm,
+  };
+}
+
+export function mapSpinnerStyle(
+  theme: Theme,
+  props: SpinnerVariantProps = {},
+  density: DensityName = 'comfortable',
+  reducedMotion = false,
+): RnViewStyle {
+  const size = props.size ?? spinnerRecipe.defaults.size;
+  const toneName = props.tone ?? spinnerRecipe.defaults.tone;
+  const space = spaceScale(theme, density);
+  const geo = spinnerGeometry[size];
+  const edge = space[geo.sizeStep];
+  const tone = theme.semantic.color.tones[toneName];
+  return {
+    width: edge,
+    height: edge,
+    borderRadius: theme.semantic.radius.full,
+    borderWidth: geo.border,
+    borderStyle: reducedMotion ? 'dotted' : 'solid',
+    borderColor: tone.subtle,
+    borderTopColor: tone.solid,
+  };
+}
+
+export function mapProgressStyle(
+  theme: Theme,
+  props: ProgressVariantProps = {},
+  density: DensityName = 'comfortable',
+): { track: RnViewStyle; indicator: RnViewStyle } {
+  const size = props.size ?? progressRecipe.defaults.size;
+  const toneName = props.tone ?? progressRecipe.defaults.tone;
+  const space = spaceScale(theme, density);
+  const height = space[progressTrackStep[size]];
+  const tone = theme.semantic.color.tones[toneName];
+  return {
+    track: {
+      width: '100%',
+      height,
+      borderRadius: theme.semantic.radius.full,
+      backgroundColor: theme.semantic.color.surfaceSunken,
+      overflow: 'hidden',
+    },
+    indicator: {
+      height,
+      borderRadius: theme.semantic.radius.full,
+      backgroundColor: tone.solid,
+    },
+  };
+}
+
+// --- Forms -------------------------------------------------------------------
+
+export type TextControlState = {
+  readonly focused?: boolean;
+  readonly invalid?: boolean;
+  readonly disabled?: boolean;
+};
+
+export function mapInputStyle(
+  theme: Theme,
+  props: InputVariantProps = {},
+  density: DensityName = 'comfortable',
+  state: TextControlState = {},
+): RnTextStyle & RnViewStyle {
+  const size = props.size ?? inputRecipe.defaults.size;
+  const resolvedDensity = props.density ?? density;
+  const space = spaceScale(theme, resolvedDensity);
+  const pad = controlSizePadding[size];
+  const minHeight = resolveSpaceSum(space, controlMinHeightStep[size]);
+
+  let borderColor = theme.semantic.color.borderSubtle;
+  let backgroundColor = theme.semantic.color.surfaceSunken;
+  let color = theme.semantic.color.textPrimary;
+
+  if (state.disabled) {
+    const tone = theme.semantic.color.tones.neutral;
+    backgroundColor = tone.disabledBg;
+    color = tone.disabledFg;
+    borderColor = 'transparent';
+  } else if (state.invalid) {
+    borderColor = theme.semantic.color.tones.danger.solid;
+  } else if (state.focused) {
+    borderColor = theme.semantic.color.tones.accent.border;
+  }
+
+  return {
+    minHeight,
+    paddingTop: space[pad.py],
+    paddingBottom: space[pad.py],
+    paddingLeft: space[pad.px],
+    paddingRight: space[pad.px],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor,
+    borderRadius: theme.semantic.radius.md,
+    backgroundColor,
+    color,
+    ...typographyStyle(theme, size === 'sm' ? 'bodySm' : 'body'),
+  };
+}
+
+export function mapTextareaStyle(
+  theme: Theme,
+  props: TextareaVariantProps = {},
+  density: DensityName = 'comfortable',
+  state: TextControlState = {},
+): RnTextStyle & RnViewStyle {
+  const size = props.size ?? textareaRecipe.defaults.size;
+  const resolvedDensity = props.density ?? density;
+  const space = spaceScale(theme, resolvedDensity);
+  const inputProps: InputVariantProps = {
+    size,
+    ...(props.density !== undefined ? { density: props.density } : {}),
+  };
+  const base = mapInputStyle(theme, inputProps, resolvedDensity, state);
+  // Web: min-height: space-8 × 2
+  return {
+    ...base,
+    minHeight: space[8] * 2,
+  };
+}
+
+export type ToggleVisualState = {
+  readonly checked?: boolean | 'indeterminate';
+  readonly invalid?: boolean;
+  readonly disabled?: boolean;
+};
+
+/** Shared label row for Checkbox / RadioGroup.Item (control + optional children). */
+function toggleLabelRow(
+  space: Readonly<Record<SpaceStep, number>>,
+): RnViewStyle {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: space[2],
+  };
+}
+
+export function mapCheckboxStyle(
+  theme: Theme,
+  props: CheckboxVariantProps = {},
+  density: DensityName = 'comfortable',
+  state: ToggleVisualState = {},
+): { row: RnViewStyle; box: RnViewStyle } {
+  const size = props.size ?? checkboxRecipe.defaults.size;
+  const toneName = props.tone ?? checkboxRecipe.defaults.tone;
+  const space = spaceScale(theme, density);
+  const edge = space[toggleBoxStep[size]];
+  const tone = theme.semantic.color.tones[toneName];
+  const checked = state.checked === true || state.checked === 'indeterminate';
+
+  let backgroundColor = theme.semantic.color.surfaceSunken;
+  let borderColor = tone.border;
+  if (state.disabled) {
+    backgroundColor = tone.disabledBg;
+    borderColor = 'transparent';
+  } else if (checked) {
+    backgroundColor = tone.solid;
+    borderColor = tone.solid;
+  }
+  if (state.invalid && !state.disabled) {
+    borderColor = theme.semantic.color.tones.danger.solid;
+  }
+
+  return {
+    row: toggleLabelRow(space),
+    box: {
+      width: edge,
+      height: edge,
+      borderRadius: theme.semantic.radius.sm,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor,
+      backgroundColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+    },
+  };
+}
+
+export function mapSwitchStyle(
+  theme: Theme,
+  props: SwitchVariantProps = {},
+  density: DensityName = 'comfortable',
+  state: { readonly checked?: boolean; readonly invalid?: boolean; readonly disabled?: boolean } = {},
+): { track: RnViewStyle; thumb: RnViewStyle; travel: number } {
+  const size = props.size ?? switchRecipe.defaults.size;
+  const toneName = props.tone ?? switchRecipe.defaults.tone;
+  const space = spaceScale(theme, density);
+  const trackHeight = space[toggleBoxStep[size]];
+  const trackWidth = resolveSpaceSum(space, switchTrackWidthStep[size]);
+  const tone = theme.semantic.color.tones[toneName];
+  const thumbSize = trackHeight - switchThumbInset * 2;
+  const travel = switchThumbTravel(trackWidth, thumbSize);
+
+  let trackBg = theme.semantic.color.borderSubtle;
+  if (state.disabled) {
+    trackBg = tone.disabledBg;
+  } else if (state.checked) {
+    trackBg = tone.solid;
+  }
+
+  return {
+    track: {
+      width: trackWidth,
+      height: trackHeight,
+      borderRadius: theme.semantic.radius.full,
+      backgroundColor: trackBg,
+      borderWidth: state.invalid && !state.disabled ? 1 : 0,
+      borderStyle: 'solid',
+      borderColor:
+        state.invalid && !state.disabled
+          ? theme.semantic.color.tones.danger.solid
+          : 'transparent',
+      justifyContent: 'center',
+      flexShrink: 0,
+    },
+    thumb: {
+      width: thumbSize,
+      height: thumbSize,
+      borderRadius: theme.semantic.radius.full,
+      backgroundColor: theme.semantic.color.surface,
+      ...mapShadow(theme, 'raised'),
+    },
+    travel,
+  };
+}
+
+export function mapRadioGroupStyle(
+  theme: Theme,
+  props: RadioGroupVariantProps = {},
+  density: DensityName = 'comfortable',
+): { root: RnViewStyle; item: RnViewStyle; indicator: RnViewStyle } {
+  const orientation =
+    props.orientation ?? radioGroupRecipe.defaults.orientation;
+  const space = spaceScale(theme, density);
+  const { item, indicator } = mapRadioItemStyle(theme, props, density);
+
+  return {
+    root: {
+      flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+      flexWrap: orientation === 'horizontal' ? 'wrap' : 'nowrap',
+      alignItems: orientation === 'horizontal' ? 'center' : 'stretch',
+      gap: space[2],
+    },
+    item,
+    indicator,
+  };
+}
+
+export function mapRadioItemStyle(
+  theme: Theme,
+  props: RadioGroupVariantProps = {},
+  density: DensityName = 'comfortable',
+  state: ToggleVisualState = {},
+): { row: RnViewStyle; item: RnViewStyle; indicator: RnViewStyle } {
+  const size = props.size ?? radioGroupRecipe.defaults.size;
+  const toneName = props.tone ?? radioGroupRecipe.defaults.tone;
+  const space = spaceScale(theme, density);
+  const edge = space[toggleBoxStep[size]];
+  const tone = theme.semantic.color.tones[toneName];
+  let borderColor = tone.border;
+  let backgroundColor = theme.semantic.color.surfaceSunken;
+  if (state.disabled) {
+    backgroundColor = tone.disabledBg;
+    borderColor = 'transparent';
+  } else if (state.checked === true) {
+    borderColor = tone.solid;
+  }
+  if (state.invalid && !state.disabled) {
+    borderColor = theme.semantic.color.tones.danger.solid;
+  }
+  return {
+    row: toggleLabelRow(space),
+    item: {
+      width: edge,
+      height: edge,
+      borderRadius: theme.semantic.radius.full,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor,
+      backgroundColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+    },
+    indicator: {
+      width: edge * 0.5,
+      height: edge * 0.5,
+      borderRadius: theme.semantic.radius.full,
+      backgroundColor: tone.solid,
+    },
+  };
+}
+
+/** Indicator color for checked/indeterminate checkbox glyphs. */
+export function checkboxIndicatorColor(
+  theme: Theme,
+  toneName: ToneName,
+  disabled: boolean,
+): string {
+  const tone = theme.semantic.color.tones[toneName];
+  return disabled ? tone.disabledFg : tone.onSolid;
+}
diff --git a/packages/silk-native/src/styles/recipeConformance.test.ts b/packages/silk-native/src/styles/recipeConformance.test.ts
index d2271dd..cece497 100644
--- a/packages/silk-native/src/styles/recipeConformance.test.ts
+++ b/packages/silk-native/src/styles/recipeConformance.test.ts
@@ -1,18 +1,50 @@
 import {
+  avatarRecipe,
+  badgeRecipe,
   boxRecipe,
   buttonRecipe,
+  cardRecipe,
+  checkboxRecipe,
   createTheme,
+  headingRecipe,
   inlineRecipe,
+  inputRecipe,
+  progressRecipe,
+  radioGroupRecipe,
+  separatorRecipe,
+  skeletonRecipe,
+  spinnerRecipe,
   stackRecipe,
+  statusDotRecipe,
+  surfaceRecipe,
+  switchRecipe,
   textRecipe,
+  textareaRecipe,
 } from '@reactive/silk-core';
 import { expect, test } from '@rstest/core';
 import {
+  elevationBackground,
+  mapAvatarStyle,
+  mapBadgeStyle,
   mapBoxStyle,
   mapButtonStyle,
+  mapCardStyle,
+  mapCheckboxStyle,
+  mapHeadingStyle,
   mapInlineStyle,
+  mapInputStyle,
+  mapProgressStyle,
+  mapRadioGroupStyle,
+  mapSeparatorStyle,
+  mapShadow,
+  mapSkeletonStyle,
+  mapSpinnerStyle,
   mapStackStyle,
+  mapStatusDotStyle,
+  mapSurfaceStyle,
+  mapSwitchStyle,
   mapTextStyle,
+  mapTextareaStyle,
 } from './mapStyles.js';
 
 const theme = createTheme({ colorScheme: 'light' });
@@ -116,3 +148,166 @@ test('conformance: every Button variant/tone/size/density maps', () => {
   const compact = mapButtonStyle(theme, { density: 'compact' });
   expect(compact.view.paddingTop).not.toBe(comfortable.view.paddingTop);
 });
+
+test('conformance: Surface elevation/radius/border maps; overlay uses surfaceRaised', () => {
+  for (const elevation of surfaceRecipe.variants.elevation) {
+    const style = mapSurfaceStyle(theme, { elevation });
+    expect(style.backgroundColor).toBe(elevationBackground(theme, elevation));
+  }
+  expect(elevationBackground(theme, 'overlay')).toBe(
+    theme.semantic.color.surfaceRaised,
+  );
+  for (const radius of surfaceRecipe.variants.radius) {
+    expect(mapSurfaceStyle(theme, { radius }).borderRadius).toBeTypeOf(
+      'number',
+    );
+  }
+  expect(mapSurfaceStyle(theme, { border: 'subtle' }).borderColor).toBe(
+    theme.semantic.color.borderSubtle,
+  );
+  expect(mapSurfaceStyle(theme, { border: 'none' }).borderColor).toBe(
+    'transparent',
+  );
+  const raised = mapShadow(theme, 'raised');
+  expect(raised.elevation).toBe(4);
+  expect(raised.shadowOpacity).toBeTypeOf('number');
+});
+
+test('conformance: Card column/gap/border and elevations', () => {
+  for (const elevation of cardRecipe.variants.elevation) {
+    expect(mapCardStyle(theme, { elevation }).backgroundColor).toBeTruthy();
+  }
+  for (const padding of cardRecipe.variants.padding) {
+    expect(mapCardStyle(theme, { padding }).padding).toBeTypeOf('number');
+  }
+  const card = mapCardStyle(theme, {});
+  expect(card.flexDirection).toBe('column');
+  expect(card.gap).toBeTypeOf('number');
+  expect(card.borderColor).toBe(theme.semantic.color.borderSubtle);
+});
+
+test('conformance: Heading size/tone/level maps', () => {
+  for (const size of headingRecipe.variants.size) {
+    expect(mapHeadingStyle(theme, { size }).fontSize).toBeTypeOf('number');
+  }
+  for (const tone of headingRecipe.variants.tone) {
+    expect(mapHeadingStyle(theme, { tone }).color).toBeTruthy();
+  }
+  // Size defaults from level when omitted
+  expect(mapHeadingStyle(theme, { level: '1' }).fontSize).toBe(
+    mapHeadingStyle(theme, { level: '1', size: 'xl' }).fontSize,
+  );
+});
+
+test('conformance: Badge variant/tone/size maps', () => {
+  for (const variant of badgeRecipe.variants.variant) {
+    for (const tone of badgeRecipe.variants.tone) {
+      const style = mapBadgeStyle(theme, { variant, tone });
+      expect(style.text.color).toBeTruthy();
+      expect(style.view.borderWidth).toBe(1);
+    }
+  }
+  for (const size of badgeRecipe.variants.size) {
+    expect(mapBadgeStyle(theme, { size }).view.minHeight).toBeTypeOf('number');
+  }
+});
+
+test('conformance: Separator orientations', () => {
+  expect(mapSeparatorStyle(theme, { orientation: 'horizontal' }).height).toBe(
+    1,
+  );
+  expect(mapSeparatorStyle(theme, { orientation: 'vertical' }).width).toBe(1);
+  for (const orientation of separatorRecipe.variants.orientation) {
+    expect(mapSeparatorStyle(theme, { orientation }).backgroundColor).toBe(
+      theme.semantic.color.borderSubtle,
+    );
+  }
+});
+
+test('conformance: Avatar size/shape maps (density-independent media)', () => {
+  for (const size of avatarRecipe.variants.size) {
+    const style = mapAvatarStyle(theme, { size });
+    expect(style.view.width).toBeTypeOf('number');
+    expect(style.view.width).toBe(style.view.height);
+  }
+  for (const shape of avatarRecipe.variants.shape) {
+    expect(mapAvatarStyle(theme, { shape }).view.borderRadius).toBeTypeOf(
+      'number',
+    );
+  }
+});
+
+test('conformance: StatusDot / Skeleton / Spinner / Progress axes', () => {
+  for (const tone of statusDotRecipe.variants.tone) {
+    expect(mapStatusDotStyle(theme, { tone }).backgroundColor).toBeTruthy();
+  }
+  for (const size of statusDotRecipe.variants.size) {
+    expect(mapStatusDotStyle(theme, { size }).width).toBeTypeOf('number');
+  }
+  for (const shape of skeletonRecipe.variants.shape) {
+    expect(mapSkeletonStyle(theme, { shape }).backgroundColor).toBeTruthy();
+  }
+  for (const size of spinnerRecipe.variants.size) {
+    for (const tone of spinnerRecipe.variants.tone) {
+      const style = mapSpinnerStyle(theme, { size, tone });
+      expect(style.width).toBeTypeOf('number');
+      expect(style.borderTopColor).toBeTruthy();
+    }
+  }
+  expect(mapSpinnerStyle(theme, {}, 'comfortable', true).borderStyle).toBe(
+    'dotted',
+  );
+  for (const size of progressRecipe.variants.size) {
+    expect(mapProgressStyle(theme, { size }).track.height).toBeTypeOf(
+      'number',
+    );
+  }
+});
+
+test('conformance: Input/Textarea density and invalid/focus states', () => {
+  for (const size of inputRecipe.variants.size) {
+    expect(mapInputStyle(theme, { size }).minHeight).toBeTypeOf('number');
+  }
+  const comfortable = mapInputStyle(theme, { density: 'comfortable' });
+  const compact = mapInputStyle(theme, { density: 'compact' });
+  expect(compact.minHeight).not.toBe(comfortable.minHeight);
+  expect(
+    mapInputStyle(theme, {}, 'comfortable', { invalid: true }).borderColor,
+  ).toBe(theme.semantic.color.tones.danger.solid);
+  expect(
+    mapInputStyle(theme, {}, 'comfortable', { focused: true }).borderColor,
+  ).toBe(theme.semantic.color.tones.accent.border);
+  for (const size of textareaRecipe.variants.size) {
+    const style = mapTextareaStyle(theme, { size });
+    expect(style.minHeight).toBe(theme.semantic.space[8] * 2);
+  }
+});
+
+test('conformance: Checkbox / Switch / RadioGroup axes', () => {
+  for (const size of checkboxRecipe.variants.size) {
+    for (const tone of checkboxRecipe.variants.tone) {
+      const unchecked = mapCheckboxStyle(theme, { size, tone });
+      const checked = mapCheckboxStyle(
+        theme,
+        { size, tone },
+        'comfortable',
+        { checked: true },
+      );
+      expect(unchecked.box.width).toBeTypeOf('number');
+      expect(unchecked.row.flexDirection).toBe('row');
+      expect(checked.box.backgroundColor).not.toBe(unchecked.box.backgroundColor);
+    }
+  }
+  for (const size of switchRecipe.variants.size) {
+    const style = mapSwitchStyle(theme, { size }, 'comfortable', {
+      checked: true,
+    });
+    expect(style.travel).toBeGreaterThan(0);
+    expect(style.track.width).toBeTypeOf('number');
+  }
+  for (const orientation of radioGroupRecipe.variants.orientation) {
+    expect(
+      mapRadioGroupStyle(theme, { orientation }).root.flexDirection,
+    ).toBeTruthy();
+  }
+});
diff --git a/packages/silk-native/src/styles/useReducedMotion.test.tsx b/packages/silk-native/src/styles/useReducedMotion.test.tsx
new file mode 100644
index 0000000..0c4e3e0
--- /dev/null
+++ b/packages/silk-native/src/styles/useReducedMotion.test.tsx
@@ -0,0 +1,189 @@
+import { expect, test } from '@rstest/core';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { AccessibilityInfo } from 'react-native';
+import { setPrefersReducedMotion } from '../../../../test/rstest-setup';
+import { Spinner } from '../components/Spinner.js';
+import { SilkProvider } from '../theme/SilkProvider.js';
+import {
+  resetNativeMotionPreference,
+  useMotionPreference,
+  useReducedMotion,
+} from './useReducedMotion.js';
+
+function Probe() {
+  const reduced = useReducedMotion();
+  return <div data-testid="reduced">{String(reduced)}</div>;
+}
+
+function PreferenceProbe() {
+  return <div data-testid="preference">{useMotionPreference()}</div>;
+}
+
+/**
+ * Emulate real React Native: no `matchMedia`, the OS preference readable only
+ * through async `AccessibilityInfo`, and no answer cached by an earlier test.
+ */
+async function onNative(
+  reduceMotionEnabled: () => Promise<boolean>,
+  run: () => Promise<void>,
+): Promise<void> {
+  const originalMatchMedia = globalThis.matchMedia;
+  const originalQuery = AccessibilityInfo.isReduceMotionEnabled;
+  // @ts-expect-error -- removing the jsdom polyfill to exercise the RN path
+  delete globalThis.matchMedia;
+  AccessibilityInfo.isReduceMotionEnabled = reduceMotionEnabled;
+  resetNativeMotionPreference();
+  try {
+    await run();
+  } finally {
+    globalThis.matchMedia = originalMatchMedia;
+    AccessibilityInfo.isReduceMotionEnabled = originalQuery;
+    resetNativeMotionPreference();
+  }
+}
+
+async function flush(): Promise<void> {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+test('native reports unresolved before AccessibilityInfo answers, then the OS value', async () => {
+  await onNative(() => Promise.resolve(false), async () => {
+    render(<PreferenceProbe />);
+    expect(screen.getByTestId('preference').textContent).toBe('unresolved');
+    await flush();
+    expect(screen.getByTestId('preference').textContent).toBe('full');
+  });
+});
+
+test('native suppresses motion while the preference is unresolved', async () => {
+  await onNative(() => Promise.resolve(false), async () => {
+    render(<Probe />);
+    expect(screen.getByTestId('reduced').textContent).toBe('true');
+  });
+});
+
+test('native Spinner does not flash the reduced-motion ring before resolving', async () => {
+  await onNative(() => Promise.resolve(false), async () => {
+    render(
+      <SilkProvider>
+        <Spinner label="Loading" testID="spin" />
+      </SilkProvider>,
+    );
+    const el = screen.getByTestId('spin');
+    expect(el.style.getPropertyValue('border-top-style')).toBe('solid');
+    await flush();
+    expect(el.style.getPropertyValue('border-top-style')).toBe('solid');
+  });
+});
+
+test('native Spinner adopts the reduced ring once the OS confirms it', async () => {
+  await onNative(() => Promise.resolve(true), async () => {
+    render(
+      <SilkProvider>
+        <Spinner label="Loading" testID="spin" />
+      </SilkProvider>,
+    );
+    await flush();
+    expect(
+      screen.getByTestId('spin').style.getPropertyValue('border-top-style'),
+    ).toBe('dotted');
+  });
+});
+
+test('native remounts use the cached preference synchronously', async () => {
+  let called = 0;
+  await onNative(() => {
+    called += 1;
+    return Promise.resolve(true);
+  }, async () => {
+    const first = render(<PreferenceProbe />);
+    await flush();
+    expect(screen.getByTestId('preference').textContent).toBe('reduced');
+    first.unmount();
+
+    render(<PreferenceProbe />);
+    // Cached answer — never flashes `'unresolved'` again.
+    expect(screen.getByTestId('preference').textContent).toBe('reduced');
+    expect(called).toBeGreaterThanOrEqual(1);
+  });
+});
+
+test('native event updates are not overwritten by a slower bootstrap query', async () => {
+  let resolveQuery!: (value: boolean) => void;
+  const originalAdd = AccessibilityInfo.addEventListener;
+  let onChange: ((enabled: boolean) => void) | undefined;
+  AccessibilityInfo.addEventListener = ((eventName, handler) => {
+    if (eventName === 'reduceMotionChanged') {
+      onChange = handler as (enabled: boolean) => void;
+      return {
+        remove: () => {
+          onChange = undefined;
+        },
+      };
+    }
+    return originalAdd.call(AccessibilityInfo, eventName, handler);
+  }) as typeof AccessibilityInfo.addEventListener;
+
+  try {
+    await onNative(
+      () =>
+        new Promise<boolean>((resolve) => {
+          resolveQuery = resolve;
+        }),
+      async () => {
+        render(<PreferenceProbe />);
+        expect(screen.getByTestId('preference').textContent).toBe('unresolved');
+
+        act(() => {
+          onChange?.(true);
+        });
+        expect(screen.getByTestId('preference').textContent).toBe('reduced');
+
+        await act(async () => {
+          resolveQuery(false);
+          await Promise.resolve();
+        });
+        expect(screen.getByTestId('preference').textContent).toBe('reduced');
+      },
+    );
+  } finally {
+    AccessibilityInfo.addEventListener = originalAdd;
+  }
+});
+
+test('does not consult AccessibilityInfo when matchMedia is available', async () => {
+  setPrefersReducedMotion(true);
+  const original = AccessibilityInfo.isReduceMotionEnabled;
+  let called = 0;
+  AccessibilityInfo.isReduceMotionEnabled = () => {
+    called += 1;
+    return Promise.resolve(false);
+  };
+
+  try {
+    render(<Probe />);
+    await flush();
+    expect(called).toBe(0);
+    expect(screen.getByTestId('reduced').textContent).toBe('true');
+  } finally {
+    AccessibilityInfo.isReduceMotionEnabled = original;
+  }
+});
+
+test('updates when prefers-reduced-motion media query changes', async () => {
+  setPrefersReducedMotion(false);
+  render(<Probe />);
+  expect(screen.getByTestId('reduced').textContent).toBe('false');
+
+  setPrefersReducedMotion(true);
+  await waitFor(() => {
+    expect(screen.getByTestId('reduced').textContent).toBe('true');
+  });
+
+  setPrefersReducedMotion(false);
+  await waitFor(() => {
+    expect(screen.getByTestId('reduced').textContent).toBe('false');
+  });
+});
diff --git a/packages/silk-native/src/styles/useReducedMotion.ts b/packages/silk-native/src/styles/useReducedMotion.ts
new file mode 100644
index 0000000..60f9657
--- /dev/null
+++ b/packages/silk-native/src/styles/useReducedMotion.ts
@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+
+type MediaQueryListLike = {
+  matches: boolean;
+  addEventListener: (
+    type: 'change',
+    listener: (event: { matches: boolean }) => void,
+  ) => void;
+  removeEventListener: (
+    type: 'change',
+    listener: (event: { matches: boolean }) => void,
+  ) => void;
+};
+
+type MatchMedia = (query: string) => MediaQueryListLike;
+
+function getMatchMedia(): MatchMedia | undefined {
+  const matchMedia = (globalThis as { matchMedia?: MatchMedia }).matchMedia;
+  return typeof matchMedia === 'function' ? matchMedia : undefined;
+}
+
+/**
+ * OS reduce-motion preference.
+ * `'unresolved'` only occurs on real React Native before async
+ * `AccessibilityInfo` answers.
+ */
+export type MotionPreference = 'full' | 'reduced' | 'unresolved';
+
+let nativePreference: MotionPreference = 'unresolved';
+let nativeQuery: Promise<MotionPreference> | undefined;
+/** Bumped by live OS events so an in-flight bootstrap cannot clobber them. */
+let nativeEpoch = 0;
+
+function toPreference(reduced: boolean): MotionPreference {
+  return reduced ? 'reduced' : 'full';
+}
+
+/** Shared in-flight query; settled answers refresh `nativePreference`. */
+function queryNative(): Promise<MotionPreference> {
+  if (!nativeQuery) {
+    const epoch = nativeEpoch;
+    nativeQuery = AccessibilityInfo.isReduceMotionEnabled()
+      // Preference unreadable — fail open to full motion rather than sticking
+      // on `'unresolved'`.
+      .catch(() => false)
+      .then((enabled) => {
+        nativeQuery = undefined;
+        if (epoch !== nativeEpoch) {
+          return nativePreference;
+        }
+        nativePreference = toPreference(enabled);
+        return nativePreference;
+      });
+  }
+  return nativeQuery;
+}
+
+/** Test-only: drop the cached native answer. Not part of the public API. */
+export function resetNativeMotionPreference(): void {
+  nativePreference = 'unresolved';
+  nativeQuery = undefined;
+  nativeEpoch = 0;
+}
+
+function initialPreference(): MotionPreference {
+  const matchMedia = getMatchMedia();
+  if (matchMedia) {
+    return toPreference(matchMedia(REDUCED_MOTION_QUERY).matches);
+  }
+  return nativePreference;
+}
+
+/**
+ * Subscribe to the OS reduce-motion preference.
+ * On react-native-web this resolves synchronously from `prefers-reduced-motion`;
+ * on React Native the first mount reports `'unresolved'` until
+ * `AccessibilityInfo` answers.
+ */
+export function useMotionPreference(): MotionPreference {
+  const [preference, setPreference] = useState(initialPreference);
+
+  useEffect(() => {
+    const matchMedia = getMatchMedia();
+    if (matchMedia) {
+      // Prefer live matchMedia on web/RNW — AccessibilityInfo may disagree when
+      // matchMedia is mocked/emulated after RNW captures its MediaQueryList.
+      const mql = matchMedia(REDUCED_MOTION_QUERY);
+      const onChange = (event: { matches: boolean }) => {
+        setPreference(toPreference(event.matches));
+      };
+      setPreference(toPreference(mql.matches));
+      mql.addEventListener('change', onChange);
+      return () => {
+        mql.removeEventListener('change', onChange);
+      };
+    }
+
+    let mounted = true;
+    void queryNative().then((next) => {
+      if (mounted) setPreference(next);
+    });
+    const onNativeChange = (enabled: boolean) => {
+      nativeEpoch += 1;
+      nativePreference = toPreference(enabled);
+      setPreference(nativePreference);
+    };
+    const subscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      onNativeChange,
+    );
+    return () => {
+      mounted = false;
+      subscription.remove();
+    };
+  }, []);
+
+  return preference;
+}
+
+/**
+ * `true` whenever motion must be suppressed, including the brief native
+ * window before the OS preference resolves. Components that also swap in a
+ * distinct reduced-motion *appearance* should use {@link useMotionPreference}
+ * so those visuals wait for a confirmed `'reduced'`.
+ */
+export function useReducedMotion(): boolean {
+  return useMotionPreference() !== 'full';
+}
diff --git a/packages/silk-native/src/theme/SilkProvider.tsx b/packages/silk-native/src/theme/SilkProvider.tsx
index 818ca21..38f55d0 100644
--- a/packages/silk-native/src/theme/SilkProvider.tsx
+++ b/packages/silk-native/src/theme/SilkProvider.tsx
@@ -1,16 +1,32 @@
 import type {
+  AvatarVariantProps,
+  BadgeVariantProps,
   BoxVariantProps,
   ButtonVariantProps,
+  CardVariantProps,
+  CheckboxVariantProps,
+  HeadingVariantProps,
   InlineVariantProps,
+  InputVariantProps,
+  ProgressVariantProps,
+  RadioGroupVariantProps,
+  SeparatorVariantProps,
+  SkeletonVariantProps,
+  SpinnerVariantProps,
   StackVariantProps,
+  StatusDotVariantProps,
+  SurfaceVariantProps,
+  SwitchVariantProps,
   TextVariantProps,
+  TextareaVariantProps,
 } from '@reactive/silk-core';
 import { createContext, useContext, type JSX, type ReactNode } from 'react';
 import { ThemeProvider, type ThemeProviderProps } from './ThemeProvider.js';
 
 /**
- * Typed per-component defaults for native exemplars only.
+ * Typed per-component defaults for recipe-bearing native components.
  * Nested SilkProviders replace the entire map (no component-level merge).
+ * Field has no recipe — excluded (matches web).
  */
 export interface SilkDefaults {
   readonly Box?: Partial<BoxVariantProps>;
@@ -18,6 +34,21 @@ export interface SilkDefaults {
   readonly Inline?: Partial<InlineVariantProps>;
   readonly Text?: Partial<TextVariantProps>;
   readonly Button?: Partial<ButtonVariantProps>;
+  readonly Surface?: Partial<SurfaceVariantProps>;
+  readonly Card?: Partial<CardVariantProps>;
+  readonly Heading?: Partial<HeadingVariantProps>;
+  readonly Badge?: Partial<BadgeVariantProps>;
+  readonly Separator?: Partial<SeparatorVariantProps>;
+  readonly Avatar?: Partial<AvatarVariantProps>;
+  readonly StatusDot?: Partial<StatusDotVariantProps>;
+  readonly Skeleton?: Partial<SkeletonVariantProps>;
+  readonly Spinner?: Partial<SpinnerVariantProps>;
+  readonly Progress?: Partial<ProgressVariantProps>;
+  readonly Input?: Partial<InputVariantProps>;
+  readonly Textarea?: Partial<TextareaVariantProps>;
+  readonly Checkbox?: Partial<CheckboxVariantProps>;
+  readonly Switch?: Partial<SwitchVariantProps>;
+  readonly RadioGroup?: Partial<RadioGroupVariantProps>;
 }
 
 export interface SilkProviderProps extends ThemeProviderProps {
diff --git a/perf-budgets.json b/perf-budgets.json
index a2a9a38..afa15b1 100644
--- a/perf-budgets.json
+++ b/perf-budgets.json
@@ -10,7 +10,23 @@
       "Stack": 1700,
       "Inline": 1700,
       "Text": 1200,
-      "Button": 2300
+      "Button": 2300,
+      "Surface": 1300,
+      "Card": 1900,
+      "Heading": 1300,
+      "Badge": 1900,
+      "Separator": 900,
+      "Avatar": 1600,
+      "StatusDot": 1400,
+      "Skeleton": 1800,
+      "Spinner": 1900,
+      "Progress": 2300,
+      "Input": 2800,
+      "Textarea": 2900,
+      "Checkbox": 3100,
+      "Switch": 3200,
+      "RadioGroup": 3800,
+      "Field": 3200
     },
     "isolatedGzip": {
       "Button": 3200,
@@ -41,7 +57,7 @@
     }
   },
   "measured": {
-    "generatedAt": "2026-07-26T22:26:32.738Z",
+    "generatedAt": "2026-07-27T01:33:59.527Z",
     "sharedBaselineGzip": 2682,
     "css": {
       "raw": 107123,
@@ -151,28 +167,92 @@
     },
     "nativeIsolated": {
       "Box": {
-        "raw": 1848,
-        "gzip": 943
+        "raw": 1858,
+        "gzip": 937
       },
       "Stack": {
-        "raw": 2555,
-        "gzip": 1206
+        "raw": 2591,
+        "gzip": 1208
       },
       "Inline": {
-        "raw": 2607,
-        "gzip": 1198
+        "raw": 2619,
+        "gzip": 1190
       },
       "Text": {
-        "raw": 1880,
-        "gzip": 860
+        "raw": 1981,
+        "gzip": 914
       },
       "Button": {
-        "raw": 3883,
-        "gzip": 1671
+        "raw": 3797,
+        "gzip": 1713
+      },
+      "Surface": {
+        "raw": 2239,
+        "gzip": 949
+      },
+      "Card": {
+        "raw": 3217,
+        "gzip": 1450
+      },
+      "Heading": {
+        "raw": 2018,
+        "gzip": 977
+      },
+      "Badge": {
+        "raw": 3036,
+        "gzip": 1448
+      },
+      "Separator": {
+        "raw": 1194,
+        "gzip": 583
+      },
+      "Avatar": {
+        "raw": 2395,
+        "gzip": 1200
+      },
+      "StatusDot": {
+        "raw": 2022,
+        "gzip": 1007
+      },
+      "Skeleton": {
+        "raw": 2861,
+        "gzip": 1362
+      },
+      "Spinner": {
+        "raw": 3034,
+        "gzip": 1492
+      },
+      "Progress": {
+        "raw": 3921,
+        "gzip": 1882
+      },
+      "Input": {
+        "raw": 5462,
+        "gzip": 2192
+      },
+      "Textarea": {
+        "raw": 5820,
+        "gzip": 2279
+      },
+      "Checkbox": {
+        "raw": 7675,
+        "gzip": 2919
+      },
+      "Switch": {
+        "raw": 6552,
+        "gzip": 2650
+      },
+      "RadioGroup": {
+        "raw": 8177,
+        "gzip": 3069
+      },
+      "Field": {
+        "raw": 5728,
+        "gzip": 2457
       }
     },
     "ssr": {
-      "medianMs": 0.682
+      "medianMs": 0.65
     }
   }
 }
diff --git a/scripts/packed-consumer-check.mjs b/scripts/packed-consumer-check.mjs
index b33375d..461e1d8 100644
--- a/scripts/packed-consumer-check.mjs
+++ b/scripts/packed-consumer-check.mjs
@@ -433,12 +433,28 @@ export function Consumer(): JSX.Element {
     join(fixture, 'consumer.native.tsx'),
     `
 import {
+  Avatar,
+  Badge,
   Box,
   Button,
+  Card,
+  Checkbox,
+  Field,
+  Heading,
   Inline,
+  Input,
+  Progress,
+  RadioGroup,
+  Separator,
   SilkProvider,
+  Skeleton,
+  Spinner,
   Stack,
+  StatusDot,
+  Surface,
+  Switch,
   Text,
+  Textarea,
 } from '@reactive/silk-native';
 import type { JSX } from 'react';
 
@@ -447,10 +463,32 @@ export function NativeConsumer(): JSX.Element {
     <SilkProvider colorScheme="light" density="comfortable">
       <Box padding="2">
         <Stack gap="2" rail="start">
-          <Text role="heading">Native</Text>
-          <Inline gap="1" direction="row-reverse">
-            <Button tone="accent">Go</Button>
-          </Inline>
+          <Heading level="2">Native</Heading>
+          <Surface elevation="raised" border="subtle">
+            <Card padding="3">
+              <Inline gap="1" direction="row-reverse">
+                <Button tone="accent">Go</Button>
+                <Badge tone="success">ok</Badge>
+                <StatusDot tone="accent" />
+                <Avatar fallback="NT" size="sm" />
+              </Inline>
+              <Separator />
+              <Skeleton shape="text" />
+              <Spinner size="sm" />
+              <Progress value={40} />
+              <Field.Root>
+                <Field.Label>Name</Field.Label>
+                <Input />
+                <Textarea />
+                <Checkbox accessibilityLabel="Agree" />
+                <Switch accessibilityLabel="Notify" />
+                <RadioGroup.Root>
+                  <RadioGroup.Item value="a">A</RadioGroup.Item>
+                </RadioGroup.Root>
+                <Field.Error>Required</Field.Error>
+              </Field.Root>
+            </Card>
+          </Surface>
         </Stack>
       </Box>
     </SilkProvider>
@@ -472,11 +510,23 @@ import { createTheme } from '@reactive/silk-core';
 import {
   Box,
   Button,
+  Card,
+  Checkbox,
+  Field,
+  Heading,
   Inline,
+  Input,
+  Progress,
+  RadioGroup,
   SilkProvider,
   Stack,
+  Surface,
+  Switch,
   Text,
   mapButtonStyle,
+  mapSurfaceStyle,
+  mapCheckboxStyle,
+  a11yState,
 } from '@reactive/silk-native';
 
 const theme = createTheme({ colorScheme: 'light' });
@@ -484,16 +534,28 @@ const styles = mapButtonStyle(theme, { variant: 'solid', tone: 'accent' });
 if (!styles.view.backgroundColor) {
   throw new Error('mapButtonStyle failed in packed native bundle');
 }
-if (
-  typeof Box !== 'function' ||
-  typeof Stack !== 'function' ||
-  typeof Inline !== 'function' ||
-  typeof Text !== 'function' ||
-  typeof Button !== 'function' ||
-  typeof SilkProvider !== 'function'
-) {
+const surface = mapSurfaceStyle(theme, { elevation: 'overlay' });
+if (surface.backgroundColor !== theme.semantic.color.surfaceRaised) {
+  throw new Error('overlay elevation must use surfaceRaised');
+}
+const checked = mapCheckboxStyle(theme, {}, 'comfortable', { checked: 'indeterminate' });
+if (!checked.box.backgroundColor) {
+  throw new Error('mapCheckboxStyle indeterminate failed');
+}
+const a11y = a11yState({ checked: 'mixed' });
+if (a11y['aria-checked'] !== 'mixed') {
+  throw new Error('a11yState compat helper failed');
+}
+const required = [
+  Box, Stack, Inline, Text, Button, Surface, Card, Heading,
+  Checkbox, Switch, RadioGroup, Field, Input, Progress, SilkProvider,
+];
+if (required.some((fn) => typeof fn !== 'function' && typeof fn !== 'object')) {
   throw new Error('Packed native missing component exports');
 }
+if (typeof Field.Root !== 'function' || typeof RadioGroup.Item !== 'function') {
+  throw new Error('Packed native missing compound exports');
+}
 console.log('packed-native-bundle: OK');
 `,
   );
diff --git a/scripts/perf-budgets.mjs b/scripts/perf-budgets.mjs
index 89f7daf..5836bbd 100644
--- a/scripts/perf-budgets.mjs
+++ b/scripts/perf-budgets.mjs
@@ -28,36 +28,6 @@ const cssPath = join(silkDist, 'index.css');
 const budgetPath = join(root, 'perf-budgets.json');
 const write = process.argv.includes('--write');
 
-const COMPONENTS = [
-  'Button',
-  'Dialog',
-  'Tooltip',
-  'Popover',
-  'DropdownMenu',
-  'Select',
-  'Tabs',
-  'Accordion',
-  'Toggle',
-  'ToggleGroup',
-  'ScrollArea',
-  'Toast',
-  'Identity',
-  'MediaObject',
-  'ActionBar',
-  'StatGroup',
-  'EmptyState',
-  'PostCard',
-  'Comment',
-  'CommentThread',
-  'Notification',
-  'FeedItem',
-  'ProfileCard',
-  'SettingsPanel',
-  'StatusDot',
-];
-
-const NATIVE_COMPONENTS = ['Box', 'Stack', 'Inline', 'Text', 'Button'];
-
 function gzipBytes(buf) {
   return gzipSync(buf).length;
 }
@@ -141,6 +111,10 @@ function fail(msg) {
 
 async function main() {
   const tmpDir = join(root, 'scripts/.perf-tmp');
+  const budgetFile = loadBudgets();
+  const { budgets } = budgetFile;
+  const components = Object.keys(budgets.isolatedGzip);
+  const nativeComponents = Object.keys(budgets.nativeIsolatedGzip);
   mkdirSync(tmpDir, { recursive: true });
   try {
     const css = measureCss();
@@ -149,13 +123,13 @@ async function main() {
         // createTheme import measures the shared core+theme baseline.
         measureIsolatedJs('createTheme', tmpDir),
         Promise.all(
-          COMPONENTS.map(async (name) => [
+          components.map(async (name) => [
             name,
             await measureIsolatedJs(name, tmpDir),
           ]),
         ),
         Promise.all(
-          NATIVE_COMPONENTS.map(async (name) => [
+          nativeComponents.map(async (name) => [
             name,
             await measureIsolatedJs(name, tmpDir, {
               entryPath: nativeEntry,
@@ -181,13 +155,13 @@ async function main() {
     console.log('perf-budgets: measured');
     console.log(`  shared baseline (createTheme) gzip: ${baseline.gzip} B`);
     console.log(`  CSS raw/gzip: ${css.raw} / ${css.gzip} B`);
-    for (const name of COMPONENTS) {
+    for (const name of components) {
       console.log(
         `  ${name.padEnd(14)} gzip: ${isolated[name].gzip} B (raw ${isolated[name].raw})`,
       );
     }
     console.log('  native (react + react-native external; CSS N/A):');
-    for (const name of NATIVE_COMPONENTS) {
+    for (const name of nativeComponents) {
       console.log(
         `  native ${name.padEnd(8)} gzip: ${nativeIsolated[name].gzip} B (raw ${nativeIsolated[name].raw})`,
       );
@@ -195,12 +169,10 @@ async function main() {
     console.log(`  SSR median (informational): ${ssr.medianMs} ms`);
 
     if (write) {
-      const existing = loadBudgets();
-      const next = { ...existing, measured };
+      const next = { ...budgetFile, measured };
       writeFileSync(budgetPath, `${JSON.stringify(next, null, 2)}\n`);
       console.log(`perf-budgets: wrote ${budgetPath}`);
     } else {
-      const { budgets } = loadBudgets();
       if (css.gzip > budgets.cssGzip) {
         fail(`CSS gzip ${css.gzip} > budget ${budgets.cssGzip}`);
       }
@@ -212,7 +184,7 @@ async function main() {
           `shared baseline gzip ${baseline.gzip} > budget ${budgets.sharedBaselineGzip}`,
         );
       }
-      for (const name of COMPONENTS) {
+      for (const name of components) {
         const max = budgets.isolatedGzip[name];
         if (max == null) {
           fail(`missing isolatedGzip budget for ${name}`);
@@ -222,7 +194,7 @@ async function main() {
           fail(`${name} gzip ${isolated[name].gzip} > budget ${max}`);
         }
       }
-      for (const name of NATIVE_COMPONENTS) {
+      for (const name of nativeComponents) {
         const max = budgets.nativeIsolatedGzip[name];
         if (max == null) {
           fail(`missing nativeIsolatedGzip budget for ${name}`);