diff --git a/AGENTS.md b/AGENTS.md
index 8cc35887..058989ca 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -28,7 +28,9 @@
- `packages/`: Shared, publishable packages consumed across apps and external projects.
- `packages/react/`: `@cocso-ui/react` — React component library.
- `packages/css/`: `@cocso-ui/css` — design tokens and CSS.
+ - `packages/react-native/`: `@cocso-ui/react-native` — React Native + Expo component package.
- `packages/react-icons/`: `@cocso-ui/react-icons` — icon set.
+ - `packages/react-native-icons/`: `@cocso-ui/react-native-icons` — React Native icon package.
- `packages/baseframe/`: `@cocso-ui/baseframe-sources` — YAML component source definitions.
- `packages/figma/`: `@cocso-ui/figma` — Figma plugin for syncing design tokens to Figma Variables.
- `ecosystem/`: Tooling that wraps or consumes packages for developer workflows.
diff --git a/docs/project-react-native-icons.md b/docs/project-react-native-icons.md
new file mode 100644
index 00000000..dcef72e7
--- /dev/null
+++ b/docs/project-react-native-icons.md
@@ -0,0 +1,88 @@
+# project-react-native-icons
+
+## Goal
+
+Provide a React Native icon package with full parity to `@cocso-ui/react-icons`, so Expo and React Native apps can consume the same icon names without web SVG runtime dependencies.
+
+## Path
+
+```text
+packages/react-native-icons/
+```
+
+## Runtime and Language
+
+React Native + TypeScript (`react-native-svg`).
+
+## Users
+
+- Mobile engineers consuming `@cocso-ui/react-native`.
+- Teams that need icon-name parity between web (`@cocso-ui/react-icons`) and native.
+
+## In Scope
+
+- Full icon parity for all semantic and brand icons from `@cocso-ui/react-icons`.
+- RN icon rendering through generated `react-native-svg` component trees.
+- Grouped exports by `semantic` and `brand`, plus top-level barrel export.
+- Automated source sync script from `packages/react-icons/src/components/**/*.tsx`.
+- Test-level generation contracts for source parity and barrel export parity.
+
+## Out of Scope
+
+- Replacing `@cocso-ui/react-icons` as the source package.
+- Introducing a new global SVG truth source in this PR.
+- Web icon runtime behavior changes.
+
+## Architecture
+
+```text
+packages/react-native-icons/
+├── scripts/
+│ └── generate-icons.mjs
+├── src/
+│ ├── components/
+│ │ ├── semantic/
+│ │ └── brand/
+│ ├── icon.tsx
+│ ├── types.ts
+│ └── index.ts
+└── package.json
+```
+
+## Interfaces
+
+- Package name: `@cocso-ui/react-native-icons`
+- Public icon props: `size`, `width`, `height`, `color` plus `SvgProps`
+- Export parity contract: all icon component names from `@cocso-ui/react-icons` must exist with the same export names.
+
+## Storage
+
+- Generated TSX icon files committed in repository.
+- No runtime storage.
+
+## Security
+
+- No network calls.
+- No secret handling.
+
+## Logging
+
+- Script-level console output for generated file counts and sync status.
+
+## Build and Test
+
+```sh
+pnpm --filter @cocso-ui/react-native-icons lint
+pnpm --filter @cocso-ui/react-native-icons check-types
+pnpm --filter @cocso-ui/react-native-icons test
+pnpm --filter @cocso-ui/react-native-icons build
+```
+
+## Roadmap
+
+- Evaluate a shared raw-SVG source of truth for web/native generation.
+- Add visual snapshot checks for high-risk brand icons.
+
+## Open Questions
+
+- Whether to move all icon generation to an `ecosystem/` pipeline in a dedicated follow-up.
diff --git a/docs/project-react-native.md b/docs/project-react-native.md
new file mode 100644
index 00000000..0c437391
--- /dev/null
+++ b/docs/project-react-native.md
@@ -0,0 +1,132 @@
+# project-react-native
+
+## Goal
+
+Provide a React Native-first component package for Expo environments that reuses cocso design tokens and interaction patterns, so mobile apps can ship a consistent design system without depending on web CSS runtime features.
+
+## Path
+
+```text
+packages/react-native/
+```
+
+## Runtime and Language
+
+React Native + Expo (TypeScript).
+
+## Users
+
+- Mobile engineers building Expo apps that need cocso design-system components.
+- Teams sharing design language across `@cocso-ui/react` (web) and React Native.
+
+## In Scope
+
+- Token-driven React Native exports (`colors`, `spacing`, `radius`, `typography`, `shadow`, `zIndex`) derived from cocso token source.
+- Foundational primitives for RN design systems: `Box`, `Text`, `Stack`.
+- Core interactive components implemented in this scope: `Button`, `Modal`, `GlassView`, `Input`.
+- Feedback component implemented in this scope: `Badge`.
+- React Native `Modal`-compatible presentation controls with explicit component-level semantics.
+- Translucent glass surface with optional blur-component injection for apps that provide native blur.
+
+## Out of Scope
+
+- Porting every existing web component in `@cocso-ui/react` one-to-one.
+- Web-only CSS module behavior and browser-specific styling patterns.
+- App-level navigation logic and screen composition.
+
+## Architecture
+
+```text
+packages/react-native/src/
+├── components/
+│ ├── badge/
+│ ├── box/
+│ ├── button/
+│ ├── glass-view/
+│ ├── input/
+│ ├── modal/
+│ ├── stack/
+│ └── text/
+├── theme/
+│ ├── tokens.generated.ts
+│ ├── tokens.ts
+│ └── index.ts
+└── index.ts
+```
+
+Token architecture contract:
+
+- Source of truth remains `@cocso-ui/css` (`token.css`).
+- RN package consumes generated JS/TS token values (not CSS `var(...)` references).
+- Token keys keep stable enum-like identifiers where possible (`neutral500`, `s8`, `r4`).
+
+## Interfaces
+
+Public package name: `@cocso-ui/react-native`
+
+Public exports:
+
+- `theme` tokens: `colors`, `spacing`, `radius`, `fontSize`, `fontWeight`, `lineHeight`, `shadows`, `zIndex`
+- Components: `Badge`, `Box`, `Button`, `GlassView`, `Input`, `Modal`, `Stack`, `Text`
+
+Modal interfaces:
+
+- `RN_MODAL_PRESENTATION`: `"fullScreen" | "pageSheet" | "formSheet" | "overFullScreen"`
+- `GLASS_INTENSITY`: `"low" | "medium" | "high"`
+
+## Storage
+
+- No runtime persistence.
+- Build artifacts generated into `dist/`.
+- Generated token file committed for deterministic package builds.
+
+## Security
+
+- No network calls.
+- No secret handling.
+- Styling and UI utilities only.
+
+## Logging
+
+- No runtime logging by default.
+- Development-only invariant errors for invalid token keys or unsupported presentation values.
+
+## Build and Test
+
+```sh
+# Build package
+pnpm --filter @cocso-ui/react-native build
+
+# Lint package
+pnpm --filter @cocso-ui/react-native lint
+
+# Type check package
+pnpm --filter @cocso-ui/react-native check-types
+
+# Package tests (token behavior + export contracts)
+pnpm --filter @cocso-ui/react-native test
+```
+
+Repository validation should include:
+
+```sh
+pnpm check
+pnpm build
+```
+
+## Roadmap
+
+- Add higher-level RN components mapped from proven web component semantics.
+- Planned component groups for follow-up migration:
+ - Form controls: `Select`, `Dropdown`, `Checkbox`, `Switch`, `RadioGroup`, `Field`
+ - Feedback and overlays: `Popover`, `Tooltip`, `Toast`, `Dialog`, `Spinner`
+ - Navigation and structure: `Tab`, `Accordion`, `Link`, `Pagination`
+ - Domain components: `OneTimePasswordField`, `StockQuantityStatus`
+ - Date-related components: `DayPicker`, `MonthPicker`
+- Add dark-mode semantic token aliases.
+- Add visual regression examples in Storybook or Expo preview integration.
+
+## Open Questions
+
+- Whether to standardize on `expo-blur` as a hard dependency or keep it as optional peer dependency.
+- Whether to add dedicated Expo Router integration helpers in a separate package layer.
diff --git a/packages/react-native-icons/README.md b/packages/react-native-icons/README.md
new file mode 100644
index 00000000..f768407a
--- /dev/null
+++ b/packages/react-native-icons/README.md
@@ -0,0 +1,23 @@
+## `@cocso-ui/react-native-icons`
+
+React Native icon components for Cocso UI.
+
+### Installation
+
+```bash
+pnpm add @cocso-ui/react-native-icons react-native-svg
+```
+
+### Usage
+
+```tsx
+import { SearchIcon } from "@cocso-ui/react-native-icons";
+
+export function Example() {
+ return ;
+}
+```
+
+### Source of truth
+
+The icon paths are generated from `@cocso-ui/react-icons` source components.
diff --git a/packages/react-native-icons/package.json b/packages/react-native-icons/package.json
new file mode 100644
index 00000000..356da7d0
--- /dev/null
+++ b/packages/react-native-icons/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "@cocso-ui/react-native-icons",
+ "version": "0.1.0",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/cocso/cocso-ui.git",
+ "directory": "packages/react-native-icons"
+ },
+ "type": "module",
+ "scripts": {
+ "prebuild": "node ./scripts/generate-icons.mjs && biome check . --write",
+ "build": "tsc -p tsconfig.build.json",
+ "check-types": "tsc -p tsconfig.json --noEmit",
+ "test": "vitest run",
+ "test:coverage": "vitest run --coverage",
+ "lint": "biome check .",
+ "lint:fix": "biome check . --write"
+ },
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.ts",
+ "default": "./dist/index.js"
+ },
+ "./package.json": "./package.json"
+ },
+ "files": [
+ "dist"
+ ],
+ "peerDependencies": {
+ "react": "^19.1.1",
+ "react-native-svg": "^15.15.0"
+ },
+ "devDependencies": {
+ "@types/node": "^24.9.1",
+ "@vitest/coverage-v8": "^4.0.18",
+ "@types/react": "^19.2.14",
+ "react": "^19.2.4",
+ "react-native-svg": "^15.15.0",
+ "typescript": "^5.9.3",
+ "vitest": "^4.0.18"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/packages/react-native-icons/scripts/generate-icons.mjs b/packages/react-native-icons/scripts/generate-icons.mjs
new file mode 100644
index 00000000..f7989bd7
--- /dev/null
+++ b/packages/react-native-icons/scripts/generate-icons.mjs
@@ -0,0 +1,217 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const REPO_ROOT = path.resolve(import.meta.dirname, "../../..");
+const SOURCE_COMPONENTS_DIR = path.join(
+ REPO_ROOT,
+ "packages/react-icons/src/components"
+);
+const TARGET_COMPONENTS_DIR = path.join(
+ import.meta.dirname,
+ "../src/components"
+);
+const TARGET_SRC_DIR = path.join(import.meta.dirname, "../src");
+const SVG_BLOCK_REGEX = /