{"owner":"gluestack","repo":"gluestack-ui","hasSkills":true,"hasMcp":false,"mcpConfig":null,"found":["CLAUDE.md"],"skills":{"CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\n```bash\n# Install dependencies\nyarn\n\n# Development — watch src/ and sync changes to all apps\nyarn dev                          # all mappers\nyarn dev:kitchen-sink             # kitchen-sink mapper only\nyarn dev:website                  # website mapper only\nyarn dev:starter-kits             # starter-kits mapper only\n\n# One-time sync (no watching)\nyarn sync                         # all mappers\nyarn sync:kitchen-sink\nyarn sync:website\nyarn sync:starter-kits\n\n# Local package development (uses yalc; requires `npm install -g yalc`)\nyarn link:create                  # build + publish gluestack-utils & gluestack-core to yalc, start watch\nyarn link:apps                    # link yalc packages into all apps\nyarn link:apps-website            # link into website app only\nyarn link:apps-kitchen-sink       # link into kitchen-sink app only\nyarn unlink:apps                  # remove yalc links from all apps, clean up\n\n# Build all packages\nyarn build                        # runs `yarn workspaces run build`\n\n# Formatting\nyarn format                       # prettier --write\nyarn format:check                 # prettier --check\n\n# Create a new component (scaffolding script)\nyarn create:component\n\n# Changesets (for publishing packages)\nyarn changeset                    # create a changeset\nyarn changeset:version            # bump versions\nyarn release                      # publish\n```\n\nTo run an app locally after syncing: `cd apps/kitchen-sink && yarn dev` or `cd apps/website && yarn dev`.\n\n## Architecture\n\n### Source-to-Destination system\n\nThis is a **source-to-destination** repo. `src/` is the single source of truth. Mapper scripts in `scripts/` copy files from `src/` into `apps/` destinations. Generated files under `apps/*/components/ui/` are **gitignored** — never edit them directly. Always edit in `src/` and let the mappers sync.\n\n```\nsrc/\n├── components/ui/        # All UI components (Button, Input, Modal, etc.)\n├── docs-components/      # Documentation-specific components (website only)\n├── docs/                 # Component docs/examples (website only)\n└── sidebar.json          # Documentation sidebar config (website only)\n\napps/\n├── website/              # gluestack.io documentation site (Next.js)\n├── kitchen-sink/         # Component showcase & testing (Expo)\n├── starter-kit-next/     # Next.js starter template\n└── starter-kit-expo/     # Expo starter template\n```\n\nMappers expose two hooks: `component(componentName, event)` for files within `components/ui/` and `nonComponent(filePath)` for everything else (docs, sidebar, docs-components). The dev script (`scripts/dev.ts`) watches `src/` with chokidar, debounces events (1s), and dispatches to active mappers.\n\n### Packages\n\n| Package | Purpose |\n|---|---|\n| `gluestack-ui` (published as `gluestack-ui`) | CLI for `gluestack-ui init`, `add`, `upgrade` commands. Contains templates for Next.js, Expo, React Native CLI project scaffolding. |\n| `create-gluestack` | CLI for `create-gluestack` (project initializer). |\n| `@gluestack-ui/core` | Component **creator** functions and **aria** hooks. Each component has a factory (`createX`) that takes primitive components (Pressable, View, Text, etc.) and returns a compound component with sub-components (Root, Text, Icon, Spinner, etc.). Deep sub-path exports like `@gluestack-ui/core/button/creator`. |\n| `@gluestack-ui/utils` | Shared hooks (`useDisclose`, `useMediaQuery`, `useControllableState`, etc.), aria utilities, NativeWind helpers (`tva`, `withStyleContext`, `useStyleContext`). Deep sub-path exports like `@gluestack-ui/utils/nativewind-utils`. |\n| `@gluestack/ui-next-adapter` | Next.js adapter that enables React Native Web components in RSC environments. |\n\n### Component architecture\n\nEach component follows a two-layer pattern:\n\n1. **`packages/gluestack-core/src/<component>/creator/`** — The `createX` factory function. It receives generic primitive components (Root, Text, Group, Spinner, Icon) and composes them into a compound component with sub-components. This layer has **no styling** — pure logic and accessibility.\n\n2. **`packages/gluestack-core/src/<component>/aria/`** — Accessibility hooks using React Aria for keyboard navigation, focus management, and screen reader support.\n\n3. **`src/components/ui/<component>/index.tsx`** — The copy-pasteable component. Calls `createX()` with React Native primitives (Pressable, View, Text), applies styling via `tva()` (tailwind-variants), and uses `withStyleContext` for style inheritance. Components are `'use client'` and import from `react-native` directly (not from NativeWind wrappers).\n\n```\nsrc/components/ui/button/\n├── index.tsx              # Styled Button component (copy-pasteable)\n├── dependencies.json      # External dependencies used by this component\n├── docs/index.mdx         # Documentation page\n└── examples/              # Usage examples (meta.json + template.handlebars)\n```\n\n### Adding a new component\n\n1. `yarn create:component` scaffolds in `src/components/ui/`\n2. If the component needs core logic: add a creator in `packages/gluestack-core/src/<name>/creator/`\n3. If it needs a11y: add aria hooks in `packages/gluestack-core/src/<name>/aria/`\n4. Add examples in `src/components/ui/<name>/examples/`\n5. Add docs in `src/components/ui/<name>/docs/`\n6. Update `src/sidebar.json` to list the component in navigation\n7. If new dependencies are needed, update `packages/gluestack-ui/src/dependencies.ts` for CLI-based installs\n\n### CI / publishing\n\n- **Changesets** manage versioning across all packages. PRs should include a changeset via `yarn changeset`.\n- CI workflows: `next-latest.yml` and `expo-latest.yml` run on PRs to `main`. `publish-production.yml` handles npm publishes.\n- There's a preview publish system (`preview-publish.yml`, `cleanup-preview.yml`) for pre-release testing."},"files":{"CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\n```bash\n# Install dependencies\nyarn\n\n# Development — watch src/ and sync changes to all apps\nyarn dev                          # all mappers\nyarn dev:kitchen-sink             # kitchen-sink mapper only\nyarn dev:website                  # website mapper only\nyarn dev:starter-kits             # starter-kits mapper only\n\n# One-time sync (no watching)\nyarn sync                         # all mappers\nyarn sync:kitchen-sink\nyarn sync:website\nyarn sync:starter-kits\n\n# Local package development (uses yalc; requires `npm install -g yalc`)\nyarn link:create                  # build + publish gluestack-utils & gluestack-core to yalc, start watch\nyarn link:apps                    # link yalc packages into all apps\nyarn link:apps-website            # link into website app only\nyarn link:apps-kitchen-sink       # link into kitchen-sink app only\nyarn unlink:apps                  # remove yalc links from all apps, clean up\n\n# Build all packages\nyarn build                        # runs `yarn workspaces run build`\n\n# Formatting\nyarn format                       # prettier --write\nyarn format:check                 # prettier --check\n\n# Create a new component (scaffolding script)\nyarn create:component\n\n# Changesets (for publishing packages)\nyarn changeset                    # create a changeset\nyarn changeset:version            # bump versions\nyarn release                      # publish\n```\n\nTo run an app locally after syncing: `cd apps/kitchen-sink && yarn dev` or `cd apps/website && yarn dev`.\n\n## Architecture\n\n### Source-to-Destination system\n\nThis is a **source-to-destination** repo. `src/` is the single source of truth. Mapper scripts in `scripts/` copy files from `src/` into `apps/` destinations. Generated files under `apps/*/components/ui/` are **gitignored** — never edit them directly. Always edit in `src/` and let the mappers sync.\n\n```\nsrc/\n├── components/ui/        # All UI components (Button, Input, Modal, etc.)\n├── docs-components/      # Documentation-specific components (website only)\n├── docs/                 # Component docs/examples (website only)\n└── sidebar.json          # Documentation sidebar config (website only)\n\napps/\n├── website/              # gluestack.io documentation site (Next.js)\n├── kitchen-sink/         # Component showcase & testing (Expo)\n├── starter-kit-next/     # Next.js starter template\n└── starter-kit-expo/     # Expo starter template\n```\n\nMappers expose two hooks: `component(componentName, event)` for files within `components/ui/` and `nonComponent(filePath)` for everything else (docs, sidebar, docs-components). The dev script (`scripts/dev.ts`) watches `src/` with chokidar, debounces events (1s), and dispatches to active mappers.\n\n### Packages\n\n| Package | Purpose |\n|---|---|\n| `gluestack-ui` (published as `gluestack-ui`) | CLI for `gluestack-ui init`, `add`, `upgrade` commands. Contains templates for Next.js, Expo, React Native CLI project scaffolding. |\n| `create-gluestack` | CLI for `create-gluestack` (project initializer). |\n| `@gluestack-ui/core` | Component **creator** functions and **aria** hooks. Each component has a factory (`createX`) that takes primitive components (Pressable, View, Text, etc.) and returns a compound component with sub-components (Root, Text, Icon, Spinner, etc.). Deep sub-path exports like `@gluestack-ui/core/button/creator`. |\n| `@gluestack-ui/utils` | Shared hooks (`useDisclose`, `useMediaQuery`, `useControllableState`, etc.), aria utilities, NativeWind helpers (`tva`, `withStyleContext`, `useStyleContext`). Deep sub-path exports like `@gluestack-ui/utils/nativewind-utils`. |\n| `@gluestack/ui-next-adapter` | Next.js adapter that enables React Native Web components in RSC environments. |\n\n### Component architecture\n\nEach component follows a two-layer pattern:\n\n1. **`packages/gluestack-core/src/<component>/creator/`** — The `createX` factory function. It receives generic primitive components (Root, Text, Group, Spinner, Icon) and composes them into a compound component with sub-components. This layer has **no styling** — pure logic and accessibility.\n\n2. **`packages/gluestack-core/src/<component>/aria/`** — Accessibility hooks using React Aria for keyboard navigation, focus management, and screen reader support.\n\n3. **`src/components/ui/<component>/index.tsx`** — The copy-pasteable component. Calls `createX()` with React Native primitives (Pressable, View, Text), applies styling via `tva()` (tailwind-variants), and uses `withStyleContext` for style inheritance. Components are `'use client'` and import from `react-native` directly (not from NativeWind wrappers).\n\n```\nsrc/components/ui/button/\n├── index.tsx              # Styled Button component (copy-pasteable)\n├── dependencies.json      # External dependencies used by this component\n├── docs/index.mdx         # Documentation page\n└── examples/              # Usage examples (meta.json + template.handlebars)\n```\n\n### Adding a new component\n\n1. `yarn create:component` scaffolds in `src/components/ui/`\n2. If the component needs core logic: add a creator in `packages/gluestack-core/src/<name>/creator/`\n3. If it needs a11y: add aria hooks in `packages/gluestack-core/src/<name>/aria/`\n4. Add examples in `src/components/ui/<name>/examples/`\n5. Add docs in `src/components/ui/<name>/docs/`\n6. Update `src/sidebar.json` to list the component in navigation\n7. If new dependencies are needed, update `packages/gluestack-ui/src/dependencies.ts` for CLI-based installs\n\n### CI / publishing\n\n- **Changesets** manage versioning across all packages. PRs should include a changeset via `yarn changeset`.\n- CI workflows: `next-latest.yml` and `expo-latest.yml` run on PRs to `main`. `publish-production.yml` handles npm publishes.\n- There's a preview publish system (`preview-publish.yml`, `cleanup-preview.yml`) for pre-release testing."},"items":[{"name":"CLAUDE.md","path":"CLAUDE.md","title":"CLAUDE.md","content":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\n```bash\n# Install dependencies\nyarn\n\n# Development — watch src/ and sync changes to all apps\nyarn dev                          # all mappers\nyarn dev:kitchen-sink             # kitchen-sink mapper only\nyarn dev:website                  # website mapper only\nyarn dev:starter-kits             # starter-kits mapper only\n\n# One-time sync (no watching)\nyarn sync                         # all mappers\nyarn sync:kitchen-sink\nyarn sync:website\nyarn sync:starter-kits\n\n# Local package development (uses yalc; requires `npm install -g yalc`)\nyarn link:create                  # build + publish gluestack-utils & gluestack-core to yalc, start watch\nyarn link:apps                    # link yalc packages into all apps\nyarn link:apps-website            # link into website app only\nyarn link:apps-kitchen-sink       # link into kitchen-sink app only\nyarn unlink:apps                  # remove yalc links from all apps, clean up\n\n# Build all packages\nyarn build                        # runs `yarn workspaces run build`\n\n# Formatting\nyarn format                       # prettier --write\nyarn format:check                 # prettier --check\n\n# Create a new component (scaffolding script)\nyarn create:component\n\n# Changesets (for publishing packages)\nyarn changeset                    # create a changeset\nyarn changeset:version            # bump versions\nyarn release                      # publish\n```\n\nTo run an app locally after syncing: `cd apps/kitchen-sink && yarn dev` or `cd apps/website && yarn dev`.\n\n## Architecture\n\n### Source-to-Destination system\n\nThis is a **source-to-destination** repo. `src/` is the single source of truth. Mapper scripts in `scripts/` copy files from `src/` into `apps/` destinations. Generated files under `apps/*/components/ui/` are **gitignored** — never edit them directly. Always edit in `src/` and let the mappers sync.\n\n```\nsrc/\n├── components/ui/        # All UI components (Button, Input, Modal, etc.)\n├── docs-components/      # Documentation-specific components (website only)\n├── docs/                 # Component docs/examples (website only)\n└── sidebar.json          # Documentation sidebar config (website only)\n\napps/\n├── website/              # gluestack.io documentation site (Next.js)\n├── kitchen-sink/         # Component showcase & testing (Expo)\n├── starter-kit-next/     # Next.js starter template\n└── starter-kit-expo/     # Expo starter template\n```\n\nMappers expose two hooks: `component(componentName, event)` for files within `components/ui/` and `nonComponent(filePath)` for everything else (docs, sidebar, docs-components). The dev script (`scripts/dev.ts`) watches `src/` with chokidar, debounces events (1s), and dispatches to active mappers.\n\n### Packages\n\n| Package | Purpose |\n|---|---|\n| `gluestack-ui` (published as `gluestack-ui`) | CLI for `gluestack-ui init`, `add`, `upgrade` commands. Contains templates for Next.js, Expo, React Native CLI project scaffolding. |\n| `create-gluestack` | CLI for `create-gluestack` (project initializer). |\n| `@gluestack-ui/core` | Component **creator** functions and **aria** hooks. Each component has a factory (`createX`) that takes primitive components (Pressable, View, Text, etc.) and returns a compound component with sub-components (Root, Text, Icon, Spinner, etc.). Deep sub-path exports like `@gluestack-ui/core/button/creator`. |\n| `@gluestack-ui/utils` | Shared hooks (`useDisclose`, `useMediaQuery`, `useControllableState`, etc.), aria utilities, NativeWind helpers (`tva`, `withStyleContext`, `useStyleContext`). Deep sub-path exports like `@gluestack-ui/utils/nativewind-utils`. |\n| `@gluestack/ui-next-adapter` | Next.js adapter that enables React Native Web components in RSC environments. |\n\n### Component architecture\n\nEach component follows a two-layer pattern:\n\n1. **`packages/gluestack-core/src/<component>/creator/`** — The `createX` factory function. It receives generic primitive components (Root, Text, Group, Spinner, Icon) and composes them into a compound component with sub-components. This layer has **no styling** — pure logic and accessibility.\n\n2. **`packages/gluestack-core/src/<component>/aria/`** — Accessibility hooks using React Aria for keyboard navigation, focus management, and screen reader support.\n\n3. **`src/components/ui/<component>/index.tsx`** — The copy-pasteable component. Calls `createX()` with React Native primitives (Pressable, View, Text), applies styling via `tva()` (tailwind-variants), and uses `withStyleContext` for style inheritance. Components are `'use client'` and import from `react-native` directly (not from NativeWind wrappers).\n\n```\nsrc/components/ui/button/\n├── index.tsx              # Styled Button component (copy-pasteable)\n├── dependencies.json      # External dependencies used by this component\n├── docs/index.mdx         # Documentation page\n└── examples/              # Usage examples (meta.json + template.handlebars)\n```\n\n### Adding a new component\n\n1. `yarn create:component` scaffolds in `src/components/ui/`\n2. If the component needs core logic: add a creator in `packages/gluestack-core/src/<name>/creator/`\n3. If it needs a11y: add aria hooks in `packages/gluestack-core/src/<name>/aria/`\n4. Add examples in `src/components/ui/<name>/examples/`\n5. Add docs in `src/components/ui/<name>/docs/`\n6. Update `src/sidebar.json` to list the component in navigation\n7. If new dependencies are needed, update `packages/gluestack-ui/src/dependencies.ts` for CLI-based installs\n\n### CI / publishing\n\n- **Changesets** manage versioning across all packages. PRs should include a changeset via `yarn changeset`.\n- CI workflows: `next-latest.yml` and `expo-latest.yml` run on PRs to `main`. `publish-production.yml` handles npm publishes.\n- There's a preview publish system (`preview-publish.yml`, `cleanup-preview.yml`) for pre-release testing.","category":"root","tokens":1487}]}