### Install Dependencies

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/showcase/README.md

Installs project dependencies using pnpm from the repository root.

```bash
pnpm install

```

--------------------------------

### Install React Native USMDS Dependencies (Expo)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Installs necessary dependencies for React Native USMDS using Expo's package manager. This includes libraries for animations, component variants, and utility functions.

```bash
npx expo install tailwindcss-animate class-variance-authority clsx tailwind-merge @rn-primitives/portal
```

--------------------------------

### Install React Native USMDS Dependencies (Non-Expo)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Installs necessary dependencies for React Native USMDS using npm for non-Expo projects. This includes libraries for animations, component variants, and utility functions.

```bash
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge @rn-primitives/portal
```

--------------------------------

### Install Toggle Group with CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/toggle-group.mdx

Installs the Toggle Group component using the blen CLI. This is the recommended installation method for quick setup.

```bash
npx @blen/usmds add toggle-group
```

--------------------------------

### Installation

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/menubar.mdx

Instructions for installing the Menubar component using either the CLI or manually by copying code and installing dependencies.

```APIDOC
## Installation

### CLI Installation
```bash
npx @blen/usmds add menubar
```

### Manual Installation

1.  **Install dependencies:**
    ```bash
    npx expo install @rn-primitives/menubar react-native-reanimated react-native-screens lucide-react-native
    ```

2.  **Copy and paste the following code into your project:**
    ```json doc-gen:file
    {
      "file": "../../packages/registry/src/usa/components/ui/menubar.tsx",
      "codeblock": {
        "lang": "tsx",
        "meta": "title=\"@/components/ui/menubar.tsx\""
      }
    }
    ```

3.  **Update import paths to match your project setup.**
```

--------------------------------

### Install Menubar Dependencies - react-native-usmds

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/menubar.mdx

Installs necessary dependencies for the Menubar component, including `@rn-primitives/menubar`, `react-native-reanimated`, `react-native-screens`, and `lucide-react-native`. Ensure these are installed before proceeding with manual setup.

```bash
npx expo install @rn-primitives/menubar react-native-reanimated react-native-screens lucide-react-native
```

--------------------------------

### Install Dependencies

Source: https://github.com/blencorp/react-native-usmds/blob/main/CONTRIBUTING.md

This command installs all the necessary project dependencies using npm. It should be run after cloning the repository and navigating into the project directory.

```bash
npm install
```

--------------------------------

### Install Alert Dialog via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/alert-dialog.mdx

This command-line interface command installs the alert-dialog component using the @blen/usmds package manager. Ensure you have npx available in your environment to run this command. This is the recommended method for quick setup.

```bash
npx @blen/usmds add alert-dialog
```

--------------------------------

### Manual Installation for Tabs Component

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/tabs.mdx

Provides instructions for manually installing the Tabs component, including installing the necessary dependency and copying the component code. This method is useful for custom setups or when the CLI is not preferred.

```bash
npx expo install @rn-primitives/tabs
```

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Text } from '@/components/ui/text';

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">
      <Text>Tab 1</Text>
    </TabsTrigger>
    <TabsTrigger value="tab2">
      <Text>Tab 2</Text>
    </TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    <Text>Content 1</Text>
  </TabsContent>
  <TabsContent value="tab2">
    <Text>Content 2</Text>
  </TabsContent>
</Tabs>
```

--------------------------------

### Add PortalHost in Manual Installation (Root Layout)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Renders the PortalHost component from '@rn-primitives/portal' as the last child within the root layout's providers. This is a manual step required for components like DropdownMenu, Tooltip, and Popover to function correctly.

```tsx
import { PortalHost } from '@rn-primitives/portal';

export default function RootLayout() {
  return (
    <ThemeProvider>
      <Stack />
      <PortalHost />
    </ThemeProvider>
  );
}
```

--------------------------------

### Install Tooltip using CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/tooltip.mdx

Command to install the Tooltip component using the project's command-line interface (CLI). This is the recommended method for quick integration.

```bash
npx @blen/usmds add tooltip
```

--------------------------------

### Install Aspect Ratio Manually - React Native USMDs

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/aspect-ratio.mdx

Provides manual installation steps for the AspectRatio component, including installing necessary dependencies and copying the component code. Ensure you update import paths to match your project setup.

```bash
npx expo install @rn-primitives/aspect-ratio
```

```tsx
import { AspectRatio } from '@/components/ui/aspect-ratio';
import { Image } from 'react-native';

<AspectRatio ratio={16 / 9}>
  <Image
    source={{ uri: 'https://example.com/image.jpg' }}
    className="h-full w-full rounded-md"
    resizeMode="cover"
  />
</AspectRatio>
```

--------------------------------

### Install Context Menu CLI - react-native-usmds

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/context-menu.mdx

Installs the context-menu component using the CLI command. This is the recommended way to add the component to your project.

```bash
npx @blen/usmds add context-menu
```

--------------------------------

### Manual Installation of Badge Component Dependencies

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/badge.mdx

This section outlines the manual installation process for the Badge component, starting with installing the '@rn-primitives/slot' dependency using Expo.

```bash
npx expo install @rn-primitives/slot
```

--------------------------------

### Install Textarea Component (CLI)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/textarea.mdx

This command installs the Textarea component into your project using the blen/usmds CLI. Ensure you have npx installed and are in the root directory of your React Native project.

```bash
npx @blen/usmds add textarea
```

--------------------------------

### Install Menubar CLI - react-native-usmds

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/menubar.mdx

This command installs the Menubar component using the CLI. It's a quick way to add the component to your project.

```bash
npx @blen/usmds add menubar
```

--------------------------------

### Install Select Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/select.mdx

This command installs the Select component and its dependencies using the npx command-line interface. It's a quick way to add the component to your project.

```bash
npx @blen/usmds add select
```

--------------------------------

### Install Tooltip Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/tooltip.mdx

Steps for manually installing the Tooltip component, including installing necessary dependencies like '@rn-primitives/tooltip' and 'react-native-reanimated'. It also instructs to copy the component code into the project.

```bash
npx expo install @rn-primitives/tooltip react-native-reanimated react-native-screens
```

```tsx
// Copy and paste the following code into your project.
// Make sure to update import paths to match your project setup.

// @/components/ui/tooltip.tsx
// ... (component code will be placed here)
```

--------------------------------

### Install Progress Component Dependencies - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/progress.mdx

Manual installation steps for the Progress component, including the necessary dependencies: '@rn-primitives/progress' and 'react-native-reanimated'.

```bash
npx expo install @rn-primitives/progress react-native-reanimated
```

--------------------------------

### Install Select Component Dependencies Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/select.mdx

Manually install the required dependencies for the Select component. This includes '@rn-primitives/select', 'lucide-react-native', 'react-native-reanimated', and 'react-native-screens'. Ensure these are installed before proceeding.

```bash
npx expo install @rn-primitives/select lucide-react-native react-native-reanimated react-native-screens
```

--------------------------------

### Configure Metro for NativeWind

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Updates the metro.config.js file to enable NativeWind with a specified CSS input file and inline rem value. This configuration is part of the manual installation process.

```js
const {
  getDefaultConfig
} = require('expo/metro-config');
const {
  withNativeWind
} = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, {
  input: './global.css',
  inlineRem: 16
});
```

--------------------------------

### Tabs Installation

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/tabs.mdx

Instructions for installing the Tabs component using either the CLI or manual steps.

```APIDOC
## Tabs Installation

### Description
Provides instructions for installing the Tabs component. You can choose between a quick CLI installation or a manual setup process.

### Method
N/A (Installation Guide)

### Endpoint
N/A (Installation Guide)

### Parameters
N/A (Installation Guide)

### Request Example
**CLI Installation:**
```bash
npx @blen/usmds add tabs
```

**Manual Installation:**
1. **Install dependencies:**
   ```bash
   npx expo install @rn-primitives/tabs
   ```
2. **Copy and paste the following code into your project:**
   ```json doc-gen:file
   {
     "file": "../../packages/registry/src/usa/components/ui/tabs.tsx",
     "codeblock": {
       "lang": "tsx",
       "meta": "title=\"@/components/ui/tabs.tsx\""
     }
   }
   ```
3. **Update import paths to match your project setup.**

### Response
N/A (Installation Guide)

### Response Example
N/A (Installation Guide)
```

--------------------------------

### Installing Snackbar Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/snackbar.mdx

This command installs the Snackbar component and its dependencies using the USMDs CLI. Ensure you have npx installed and configured to run @blen/usmds commands. This is the recommended method for quick integration.

```bash
npx @blen/usmds add snackbar
```

--------------------------------

### Install Button Component via CLI (bash)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/button.mdx

Installs the Button component using the Blen USMDs CLI. This is a convenient way to add the component to your project.

```bash
npx @blen/usmds add button
```

--------------------------------

### Install Skeleton Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/skeleton.mdx

Provides the command to install the Skeleton component using the command-line interface (CLI) tool provided by @blen/usmds. This is the recommended method for adding the component to your project.

```bash
npx @blen/usmds add skeleton
```

--------------------------------

### Install Collapsible via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/collapsible.mdx

Command to add the Collapsible component to your project using the usmds CLI. This is the recommended method for quick installation.

```bash
npx @blen/usmds add collapsible
```

--------------------------------

### Install Step Indicator via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/step-indicator.mdx

Provides the command to add the Step Indicator component to your project using the blen CLI. This is the recommended method for installation.

```bash
npx @blen/usmds add stepindicator
```

--------------------------------

### Install Skeleton Component Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/skeleton.mdx

Details the manual installation process for the Skeleton component, which involves copying and pasting the component's code into your project and updating import paths. This method is an alternative if the CLI installation is not preferred.

```tsx
import { Skeleton } from '@/components/ui/skeleton';

// Usage example:
<Skeleton className="h-12 w-12 rounded-full" />
```

--------------------------------

### Install Context Menu Dependencies - react-native-usmds

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/context-menu.mdx

Manually installs the necessary dependencies for the context-menu component. This includes `@rn-primitives/context-menu`, `react-native-reanimated`, `react-native-screens`, and `lucide-react-native`.

```bash
npx expo install @rn-primitives/context-menu react-native-reanimated react-native-screens lucide-react-native
```

--------------------------------

### Install Dropdown Menu CLI - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/dropdown-menu.mdx

Installs the dropdown-menu component using the @blen/usmds CLI. This is a one-step process to add the component to your project.

```bash
npx @blen/usmds add dropdown-menu
```

--------------------------------

### Install Alert Component Manually (Expo CLI)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/alert.mdx

Manual installation steps for the Alert component, including installing the 'lucide-react-native' dependency using Expo CLI.

```bash
npx expo install lucide-react-native
```

--------------------------------

### CLI Installation for Tabs Component

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/tabs.mdx

Installs the Tabs component using the USMDs CLI. This command-line interface simplifies the process of adding UI components to your project.

```bash
npx @blen/usmds add tabs
```

--------------------------------

### Separator Component Installation (Manual)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/separator.mdx

Manually installs the Separator component by first installing the necessary dependency `@rn-primitives/separator` via Expo or npm, and then copying the component's source code into your project. This method provides more control over the integration process.

```bash
npx expo install @rn-primitives/separator
```

```tsx
import { Separator } from '@/components/ui/separator';

<Separator />
```

--------------------------------

### Install Aspect Ratio CLI - React Native USMDs

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/aspect-ratio.mdx

Installs the AspectRatio component using the command-line interface (CLI). This is a quick way to add the component to your project.

```bash
npx @blen/usmds add aspect-ratio
```

--------------------------------

### Install Hover Card CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/hover-card.mdx

Installs the hover-card component using the blen CLI. This is a quick way to add the component to your project.

```bash
npx @blen/usmds add hover-card
```

--------------------------------

### Install Radio Tile Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/radio-tile.mdx

Installs the Radio Tile component into your project using the @blen/usmds CLI tool. This is a quick way to add the component and its dependencies.

```bash
npx @blen/usmds add radio-tile
```

--------------------------------

### Install Badge Component using CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/badge.mdx

This command-line instruction installs the 'badge' component using the '@blen/usmds' package manager. It's a quick way to add the component to your project.

```bash
npx @blen/usmds add badge
```

--------------------------------

### Install Button Dependencies (bash)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/button.mdx

Installs necessary dependencies for the Button component, including 'lucide-react-native' and 'class-variance-authority'. These are required for the component's functionality and styling.

```bash
npx expo install lucide-react-native class-variance-authority
```

--------------------------------

### Install and Use Node.js Version 22

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/README.md

Ensures the correct Node.js version (22) is installed and active using nvm. This is a prerequisite for running the development server.

```bash
nvm install && nvm use
```

--------------------------------

### Install Switch Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/switch.mdx

Installs the Switch component into your project using the `@blen/usmds` CLI tool. This is the recommended method for quick integration.

```bash
npx @blen/usmds add switch
```

--------------------------------

### Installing Text Component via CLI - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/text.mdx

Command to add the Text component to your project using the USMDS CLI. This is the recommended installation method for quick integration.

```bash
npx @blen/usmds add text
```

--------------------------------

### Install Toggle Component Dependencies - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/toggle.mdx

Lists the necessary npm dependencies to manually install for the Toggle component. Includes `@rn-primitives/toggle` and `lucide-react-native`.

```bash
npx expo install @rn-primitives/toggle lucide-react-native
```

--------------------------------

### Usage

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/menubar.mdx

Example code demonstrating how to use the Menubar component in your application.

```APIDOC
## Usage

```tsx
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from '@/components/ui/menubar';
import { Text } from '@/components/ui/text';

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>
      <Text>File</Text>
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        <Text>New File</Text>
      </MenubarItem>
      <MenubarItem>
        <Text>Open</Text>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        <Text>Save</Text>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```
```

--------------------------------

### Install Checkbox Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/checkbox.mdx

Installs the checkbox component using the project's CLI tool. This is the recommended method for adding components to your project.

```bash
npx @blen/usmds add checkbox
```

--------------------------------

### Install Popover Dependencies - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/popover.mdx

Manual installation command for Popover dependencies using Expo. This includes core libraries like `@rn-primitives/popover`, `react-native-reanimated`, and `react-native-screens`.

```bash
npx expo install @rn-primitives/popover react-native-reanimated react-native-screens
```

--------------------------------

### Install Pagination Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/pagination.mdx

This command installs the Pagination component into your React Native project using the @blen/usmds CLI tool. Ensure you have npx available in your environment.

```bash
npx @blen/usmds add pagination
```

--------------------------------

### Install Banner Component via CLI (Bash)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/banner.mdx

Provides the command-line instruction to install the Banner component using the USWDS React Native CLI. This is the recommended method for adding the component to your project.

```bash
npx @blen/usmds add banner
```

--------------------------------

### Conventional Commit Example

Source: https://github.com/blencorp/react-native-usmds/blob/main/CONTRIBUTING.md

This is an example of a commit message following the Conventional Commits specification. It indicates a new feature related to the Button component.

```git
feat(button): add loading state to Button component
```

--------------------------------

### Install Text Input Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/text-input.mdx

Provides the command-line instruction to add the Text Input component to a project using the blen/usmds CLI. This is the recommended method for installation.

```bash
npx @blen/usmds add textinput
```

--------------------------------

### Add USMDS Components using CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

These bash commands demonstrate how to use the `@blen/usmds` CLI to add components to your project. You can add individual components, multiple components at once, or all available components using the `--all` flag.

```bash
npx @blen/usmds add button
```

```bash
npx @blen/usmds add alert badge button card
```

```bash
npx @blen/usmds add --all
```

--------------------------------

### Install Dialog Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/dialog.mdx

Installs the Dialog component using the project's command-line interface (CLI). This is a quick way to add the component to your project.

```bash
npx @blen/usmds add dialog
```

--------------------------------

### Install Avatar Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/avatar.mdx

Installs the Avatar component using the command line interface (CLI) provided by @blen/usmds. This is a quick method to add the component to your project.

```bash
npx @blen/usmds add avatar
```

--------------------------------

### Add Multiple Components to React Native USMDS Project

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Command to add multiple components (e.g., button, alert, badge) to your React Native USMDS project simultaneously.

```bash
npx @blen/usmds add button alert badge
```

--------------------------------

### Manual Installation Dependencies (Bash)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/banner.mdx

Lists the necessary dependencies to manually install for the Banner component, including React Native SVG, Reanimated, and Lucide React Native. These are required for the component's functionality and styling.

```bash
npx expo install react-native-svg react-native-reanimated
npm install lucide-react-native
```

--------------------------------

### Install Alert Component via CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/alert.mdx

Command to install the Alert component using the USMDs CLI. This is the recommended method for adding the component to your project.

```bash
npx @blen/usmds add alert
```

--------------------------------

### React Native Tooltip Usage Example

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/tooltip.mdx

A concise example illustrating the basic structure for using the Tooltip component in React Native. It shows how to wrap content with TooltipTrigger and TooltipContent.

```tsx
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Text } from '@/components/ui/text';

<Tooltip>
  <TooltipTrigger>
    <Text>Hover</Text>
  </TooltipTrigger>
  <TooltipContent>
    <Text>Tooltip content</Text>
  </TooltipContent>
</Tooltip>
```

--------------------------------

### Install Required Primitives (NPM)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/banner.mdx

Specifies the installation command for the required primitives, specifically '@rn-primitives/collapsible', which is a dependency for the Banner component's interactive features.

```bash
npm install @rn-primitives/collapsible
```

--------------------------------

### Install Card Component using CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/card.mdx

This command installs the Card component and its dependencies using the US MDS CLI. Run this command in your project's root directory. It automates the process of adding the necessary files and configurations for the Card component.

```bash
npx @blen/usmds add card
```

--------------------------------

### Import and Use UI Components (React Native)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Demonstrates how to import and utilize various UI components like Button, Alert, and Badge from the '@/components/ui/' path alias in a React Native application. It also shows how to render custom text within these components.

```tsx
import { Button } from '@/components/ui/button';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Text } from '@/components/ui/text';
import { InfoIcon } from 'lucide-react-native';

export default function Screen() {
  return (
    <>
      <Button>
        <Text>Click me</Text>
      </Button>

      <Alert icon={InfoIcon}>
        <AlertTitle>Notification</AlertTitle>
        <AlertDescription>This is an alert message</AlertDescription>
      </Alert>

      <Badge variant="default">
        <Text>New</Text>
      </Badge>
    </>
  );
}
```

--------------------------------

### Default Variant Toggle Example - React Native

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/toggle.mdx

Illustrates the default visual style of the Toggle component. This example shows a basic setup with state management and an icon, rendering the toggle in its default appearance.

```tsx
import { Toggle, ToggleIcon } from '@/components/ui/toggle';
import { Bold } from 'lucide-react-native';
import { useState } from 'react';

function DefaultToggle() {
  const [pressed, setPressed] = useState(false);

  return (
    <Toggle pressed={pressed} onPressedChange={setPressed}>
      <ToggleIcon as={Bold} />
    </Toggle>
  );
}
```

--------------------------------

### Initialize React Native USMDS Project

Source: https://context7.com/blencorp/react-native-usmds/llms.txt

Installs USMDS configuration files and dependencies into a React Native project. Supports interactive prompts, auto-confirmation, and specifying a project directory. Created files include Tailwind, Metro, Babel configs, global CSS, and TypeScript definitions.

```bash
npx @blen/usmds init

npx @blen/usmds init -y

npx @blen/usmds init -c /path/to/project
```

--------------------------------

### React Native Tooltip Example

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/tooltip.mdx

A basic example demonstrating how to implement a Tooltip component in a React Native application. It shows the structure for trigger and content elements and assumes necessary UI components like Button and Text are available.

```tsx
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';
import { Text } from '@/components/ui/text';

export default function TooltipExample() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">
          <Text>Hover me</Text>
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <Text>Add to library</Text>
      </TooltipContent>
    </Tooltip>
  );
}
```

--------------------------------

### Separator Component Installation (CLI)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/separator.mdx

Installs the Separator component into your React Native project using the USMDS CLI. This command-line interface simplifies the process of adding components and their dependencies to your project.

```bash
npx @blen/usmds add separator
```

--------------------------------

### Install Button Group Component - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/button-group.mdx

Command to add the Button Group component to your project using the USMDS CLI. This command automates the installation process for the component.

```bash
npx @blen/usmds add button-group
```

--------------------------------

### Install Step Indicator Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/step-indicator.mdx

Instructions for manually installing the Step Indicator component by copying its source code. Remember to update the import paths to match your project structure.

```tsx
import { StepIndicator } from '@/components/ui/stepindicator';

<StepIndicator
  steps={6}
  currentStep={3}
  title="Current Step Title"
  size="default"
/>
```

--------------------------------

### Initialize USMDS CLI (Bash)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Provides the command to initialize the USMDS CLI, which is useful when encountering a 'command not found' error. This command ensures the CLI tool is available for use.

```bash
npx @blen/usmds@latest init
```

--------------------------------

### Basic Card Usage Example

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/card.mdx

This example demonstrates the basic structure of a Card component in React Native. It shows how to import and use the Card, CardHeader, CardTitle, CardDescription, CardContent, and Text components. Remember to adjust the import paths to match your project's specific setup.

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@/components/ui/card';
import { Text } from '@/components/ui/text';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <Text>Card content</Text>
  </CardContent>
  <CardFooter>
    {/* Footer content */}
  </CardFooter>
</Card>
```

--------------------------------

### React Native Select Usage Example

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/select.mdx

A concise example demonstrating the usage of the Select component in React Native. This snippet shows how to integrate the Select component into your application, including setting up the state and rendering the basic structure of the select input with options. It imports necessary components and uses the useState hook.

```tsx
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { useState } from 'react';

const [value, setValue] = useState<string>();

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Options</SelectLabel>
      <SelectItem label="Option 1" value="option-1">
        Option 1
      </SelectItem>
      <SelectItem label="Option 2" value="option-2">
        Option 2
      </SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
```

--------------------------------

### Dialog Example in React Native

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/dialog.mdx

Demonstrates how to use the Dialog component in a React Native application. It includes basic setup with DialogTrigger, DialogContent, DialogHeader, DialogTitle, and DialogDescription.

```tsx
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Text } from '@/components/ui/text';

export default function DialogExample() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">
          <Text>Open Dialog</Text>
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>
            Dialog description goes here.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}
```

--------------------------------

### Build and Development Commands for React Native USMDS

Source: https://github.com/blencorp/react-native-usmds/blob/main/AGENTS.md

Commands to build, test, and develop the react-native-usmds project using pnpm and Turbo. These commands cover building all workspaces, running development servers, building specific apps like docs, and running tests for the registry package.

```shell
pnpm build
pnpm dev
pnpm build:docs
pnpm --filter @blen/react-native-usmds-registry-internal test
```

--------------------------------

### Hover Card Component

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/hover-card.mdx

Documentation for the Hover Card component, covering installation, usage, and props.

```APIDOC
## Hover Card Component Documentation

### Description
Provides a component for sighted users to preview content available behind a link.

### Installation

**CLI Installation:**
```bash
npx @blen/usmds add hover-card
```

**Manual Installation:**
1. **Install dependencies:**
   ```bash
   npx expo install @rn-primitives/hover-card react-native-reanimated react-native-screens
   ```
2. **Copy and paste the component code into your project.**
   ```json doc-gen:file
   {
     "file": "../../packages/registry/src/usa/components/ui/hover-card.tsx",
     "codeblock": {
       "lang": "tsx",
       "meta": "title=\"@/components/ui/hover-card.tsx\""
     }
   }
   ```
3. **Update import paths to match your project setup.**

### Usage

```tsx
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import { Text } from '@/components/ui/text';

<HoverCard>
  <HoverCardTrigger>
    <Text>Hover</Text>
  </HoverCardTrigger>
  <HoverCardContent>
    <Text>Content</Text>
  </HoverCardContent>
</HoverCard>
```

### Props

#### HoverCard
Extends `@rn-primitives/hover-card` Root props.

| Prop | Type | Description | Default |
|---|---|---|---|
| open | `boolean` | The controlled open state of the hover card. | N/A |
| onOpenChange | `(open: boolean) => void` | Event handler called when the open state changes. | N/A |
| defaultOpen | `boolean` | The open state when initially rendered. | N/A |
| openDelay | `number` | Time in milliseconds before opening. | `700` |
| closeDelay | `number` | Time in milliseconds before closing. | `300` |

#### HoverCardTrigger
Extends `@rn-primitives/hover-card` Trigger props.

| Prop | Type | Description | Default |
|---|---|---|---|
| asChild | `boolean` | Change the default rendered element for the one passed as a child. | `false` |

#### HoverCardContent
Extends `@rn-primitives/hover-card` Content props.

| Prop | Type | Description | Default |
|---|---|---|---|
| side | `'top' | 'right' | 'bottom' | 'left'` | The preferred side of the trigger to render against. | N/A |
| sideOffset | `number` | The distance in pixels from the trigger. | `4` |
| align | `'start' | 'center' | 'end'` | The preferred alignment against the trigger. | `'center'` |
| alignOffset | `number` | Offset in pixels from the alignment axis. | N/A |
| portalHost | `string` | The host where the hover card content will be rendered. | N/A |
| className | `string` | Additional classes for styling. | N/A |
```

--------------------------------

### Conventional Commits Examples

Source: https://github.com/blencorp/react-native-usmds/wiki/Code-contribution-guideline

Examples demonstrating the Conventional Commits specification for feature and fix commits, including ticket numbers in the commit body.

```git
feat(user): add user profile page
[proj-123] Implement user profile page with editable fields and avatar upload.
```

```git
fix(auth): correct login validation error
[proj-789] Resolve issue with incorrect password validation logic.
```

--------------------------------

### Install Dropdown Menu Dependencies - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/dropdown-menu.mdx

Manually installs the necessary dependencies for the dropdown menu component. This includes core libraries like @rn-primitives/dropdown-menu and react-native-reanimated, along with lucide-react-native for icons.

```bash
npx expo install @rn-primitives/dropdown-menu react-native-reanimated react-native-screens lucide-react-native
```

--------------------------------

### Extend Button Variants (React Native)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Illustrates how to extend the existing variants of a Button component using `class-variance-authority`. This example shows adding a new 'custom' variant with specific background and text colors.

```tsx
const buttonVariants = cva(
  // base styles...
  {
    variants: {
      variant: {
        default: '...',
        destructive: '...',
        outline: '...',
        // Add your custom variant:
        custom: 'bg-purple-500 text-white',
      },
    },
  }
);
```

--------------------------------

### Import global.css in Bare React Native App Entrypoint

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Adds the global CSS import to the root App.tsx file for bare React Native projects, ensuring styles are applied.

```tsx
import './global.css'; // Add this at the top

export default function App() {
  return (
    <NavigationContainer>
      {/* Your app */}
    </NavigationContainer>
  );
}
```

--------------------------------

### Popover Component API

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/popover.mdx

Detailed information on how to install and use the Popover component, along with its available props.

```APIDOC
## Popover Component

### Description
Displays rich content in a portal, triggered by a button.

### Installation

#### CLI
```bash
npx @blen/usmds add popover
```

#### Manual
1. **Install dependencies:**
   ```bash
   npx expo install @rn-primitives/popover react-native-reanimated react-native-screens
   ```
2. **Copy and paste the following code into your project.**
   ```tsx
   // ../../packages/registry/src/usa/components/ui/popover.tsx
   import {
     Popover,
     PopoverContent,
     PopoverTrigger,
   } from '@/components/ui/popover';
   import { Button } from '@/components/ui/button';
   import { Text } from '@/components/ui/text';

   export default function PopoverExample() {
     return (
       <Popover>
         <PopoverTrigger asChild>
           <Button variant="outline">
             <Text>Open Popover</Text>
           </Button>
         </PopoverTrigger>
         <PopoverContent>
           <Text className="font-semibold">Popover Content</Text>
           <Text className="text-sm text-muted-foreground">
             You can place any content here.
           </Text>
         </PopoverContent>
       </Popover>
     );
   }
   ```
3. **Update import paths to match your project setup.**

### Usage

```tsx
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Text } from '@/components/ui/text';

<Popover>
  <PopoverTrigger>
    <Text>Open</Text>
  </PopoverTrigger>
  <PopoverContent>
    <Text>Content</Text>
  </PopoverContent>
</Popover>
```

### Props

#### Popover

Extends `@rn-primitives/popover` Root props.

| Prop           | Type                                | Description                                      |
| -------------- | ----------------------------------- | ------------------------------------------------ |
| open           | `boolean`                           | The controlled open state of the popover.        |
| onOpenChange   | `(open: boolean) => void`           | Event handler called when the open state changes. |
| defaultOpen    | `boolean`                           | The open state when initially rendered.          |

#### PopoverTrigger

Extends `@rn-primitives/popover` Trigger props.

| Prop     | Type      | Description                                                  |
| -------- | --------- | ------------------------------------------------------------ |
| asChild  | `boolean` | Change the default rendered element for the one passed as a child. |

#### PopoverContent

Extends `@rn-primitives/popover` Content props.

| Prop         | Type                                    | Description                                                      |
| ------------ | --------------------------------------- | ---------------------------------------------------------------- |
| side         | `'top' | 'right' | 'bottom' | 'left'` | The preferred side of the trigger to render against.             |
| sideOffset   | `number`                                | The distance in pixels from the trigger. Default is `4`.         |
| align        | `'start' | 'center' | 'end'`     | The preferred alignment against the trigger. Default is `'center'`. |
| alignOffset  | `number`                                | Offset in pixels from the alignment axis.                        |
| portalHost   | `string`                                | The host where the popover content will be rendered.             |
| className    | `string`                                | Additional classes for styling.                                  |

```

--------------------------------

### Run Development Server

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/README.md

Commands to start the development server for the Next.js application. Supports npm, pnpm, and yarn package managers.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

--------------------------------

### Install Radio Group Dependencies (Bash)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/radio-group.mdx

Installs the necessary @rn-primitives/radio-group package using Expo's package manager. This is a prerequisite for manual installation.

```bash
npx expo install @rn-primitives/radio-group
```

--------------------------------

### Running Storybook for React Native USMDS

Source: https://github.com/blencorp/react-native-usmds/blob/main/AGENTS.md

Instructions for running the Expo Storybook for UI review. This includes commands to start the Storybook from the dedicated app directory and specific commands for web view.

```shell
pnpm storybook
pnpm storybook:web
```

--------------------------------

### Install Collapsible Dependencies

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/collapsible.mdx

Manually install the necessary dependency for the Collapsible component using npm or yarn. This step is part of the manual installation process.

```bash
npx expo install @rn-primitives/collapsible
```

--------------------------------

### Install Text Input Component Manually (TypeScript)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/text-input.mdx

Details the manual installation process for the Text Input component by copying its source code. It specifies the file path for the component and advises updating import paths to match the project's structure. This method is an alternative to using the CLI.

```tsx
// @/components/ui/textinput.tsx
// Note: Actual component code would be here, this is a placeholder.
// Ensure to copy the content from the specified file path.
```

--------------------------------

### Install Alert Dialog Dependencies Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/alert-dialog.mdx

Manually install the necessary dependencies for the Alert Dialog component. This involves using the expo install command for `@rn-primitives/alert-dialog`, `react-native-reanimated`, and `react-native-screens`. After installation, you will need to copy the component code into your project and adjust import paths.

```bash
npx expo install @rn-primitives/alert-dialog react-native-reanimated react-native-screens
```

--------------------------------

### Create TypeScript Definitions for NativeWind

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

This TypeScript declaration file (`nativewind-env.d.ts`) provides type definitions for NativeWind, enabling better autocompletion and type checking within your TypeScript project. It leverages the types provided by the `nativewind/types` package.

```ts
/// <reference types="nativewind/types" />
```

--------------------------------

### Install Progress Component via CLI - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/progress.mdx

Instructions for adding the Progress component to your project using the command-line interface (CLI) provided by @blen/usmds.

```bash
npx @blen/usmds add progress
```

--------------------------------

### Import Global Styles in App Entry Point

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

This code snippet demonstrates how to import the global CSS file, which contains the USMDS theme variables, into the application's entry point (e.g., `App.tsx` or `app/_layout.tsx`). This ensures that the theme styles are applied throughout the application.

```tsx
import './global.css';

// Rest of your app...
```

--------------------------------

### Install Toggle Group Dependencies Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/toggle-group.mdx

Manually installs the necessary dependencies for the Toggle Group component, including @rn-primitives/toggle-group, @rn-primitives/toggle, and lucide-react-native. This method is useful if the CLI installation is not feasible.

```bash
npx expo install @rn-primitives/toggle-group @rn-primitives/toggle lucide-react-native
```

--------------------------------

### Initialize USMDS CLI

Source: https://github.com/blencorp/react-native-usmds/blob/main/README.md

Installs and initializes the USMDS CLI tool in your React Native project. This is the first step to integrate USMDS components.

```sh
npx @blen/usmds init
```

--------------------------------

### Install Switch Component Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/switch.mdx

Provides manual installation steps for the Switch component, including installing the `@rn-primitives/switch` dependency and copying the component code. Remember to update import paths after pasting the code.

```bash
npx expo install @rn-primitives/switch
```

```tsx
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { useState } from 'react';

const [checked, setChecked] = useState(false);

<div className="flex items-center gap-2">
  <Switch
    checked={checked}
    onCheckedChange={setChecked}
    id="switch"
  />
  <Label htmlFor="switch">Label</Label>
</div>
```

--------------------------------

### Install Avatar Component Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/avatar.mdx

Manually installs the Avatar component by first adding the necessary dependency `@rn-primitives/avatar` using Expo's installer. It then instructs to copy the component code into the project and adjust import paths.

```bash
npx expo install @rn-primitives/avatar
```

```tsx
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Text } from '@/components/ui/text';

<Avatar>
  <AvatarImage source={{ uri: 'https://github.com/shadcn.png' }} />
  <AvatarFallback>
    <Text>CN</Text>
  </AvatarFallback>
</Avatar>
```

--------------------------------

### Run Storybook

Source: https://github.com/blencorp/react-native-usmds/blob/main/CONTRIBUTING.md

This command navigates to the Storybook application directory and starts the Storybook development server with a cache reset. Storybook is used for developing and showcasing UI components.

```bash
cd apps/storybook
npm storybook --reset-cache
```

--------------------------------

### Button Component Example (tsx)

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/button.mdx

Basic usage of the Button component with text content. This example demonstrates how to render a simple button with customizable text.

```tsx
import { Button } from '@/components/ui/button';
import { Text } from '@/components/ui/text';

export default function ButtonExample() {
  return (
    <Button>
      <Text>Button</Text>
    </Button>
  );
}
```

--------------------------------

### Add PortalHost for Modals and Popups

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Integrates PortalHost into the root layout for Expo Router projects. This is crucial for the correct rendering of components like Dialog, Popover, and Tooltip.

```tsx
import '../global.css';
import { PortalHost } from '@rn-primitives/portal';

export default function RootLayout() {
  return (
    <>
      <Stack>
        {/* Your routes */}
      </Stack>
      <PortalHost />
    </>
  );
}
```

--------------------------------

### Install Dependencies for Checkbox Tile - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/checkbox-tile.mdx

Installs the necessary dependencies for the Checkbox Tile component, specifically the @rn-primitives/checkbox and lucide-react-native packages using Expo.

```bash
npx expo install @rn-primitives/checkbox lucide-react-native
```

--------------------------------

### Install Radio Tile Dependencies Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/radio-tile.mdx

Manually installs the necessary dependencies for the Radio Tile component, including `@rn-primitives/radio-group` and `class-variance-authority`, using npm or yarn.

```bash
npx expo install @rn-primitives/radio-group class-variance-authority
```

--------------------------------

### Install Dialog Component Dependencies

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/dialog.mdx

Manually installs the necessary dependencies for the Dialog component. This includes packages like '@rn-primitives/dialog', '@rn-primitives/portal', 'lucide-react-native', and 'react-native-reanimated'.

```bash
npx expo install @rn-primitives/dialog @rn-primitives/portal lucide-react-native react-native-reanimated
```

--------------------------------

### Configure Path Aliases in tsconfig.json

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Adds path aliases to the tsconfig.json file, allowing for shorter import paths. It configures '@/*' to point to the project's root directory, facilitating cleaner imports.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

--------------------------------

### Create Utility Helper for Class Merging

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

This TypeScript file defines a utility function `cn` that merges class names using `clsx` and `tailwind-merge`. This is a common pattern in React projects using Tailwind CSS to conditionally apply classes and avoid conflicts.

```ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

--------------------------------

### Usage Example of Default Badge Variant

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/badge.mdx

Illustrates how to use the Badge component with its default variant. This example requires 'Badge' and 'Text' components to be imported from '@/components/ui/'.

```tsx
import { Badge } from '@/components/ui/badge';
import { Text } from '@/components/ui/text';

<Badge variant="default">
  <Text>Badge</Text>
</Badge>
```

--------------------------------

### Import global.css in Expo Router App Entrypoint

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/getting-started/initial-setup.mdx

Adds the global CSS import to the root layout file for Expo Router projects, ensuring styles are applied.

```tsx
import '../global.css'; // Add this at the top

export default function RootLayout() {
  return (
    <Stack>
      {/* Your routes */}
    </Stack>
  );
}
```

--------------------------------

### Testing React Native Components with Jest

Source: https://github.com/blencorp/react-native-usmds/blob/main/AGENTS.md

Command to run tests for the react-native-usmds registry package using Jest and related testing libraries. This is a prerequisite before opening a Pull Request.

```shell
pnpm --filter @blen/react-native-usmds-registry-internal test
```

--------------------------------

### Install Popover via CLI - Bash

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/popover.mdx

Command to add the Popover component to your project using the USMDs CLI. This is the recommended method for quick integration.

```bash
npx @blen/usmds add popover
```

--------------------------------

### Install Hover Card Dependencies Manually

Source: https://github.com/blencorp/react-native-usmds/blob/main/apps/docs/content/docs/components/hover-card.mdx

Manually installs the necessary dependencies for the hover-card component, including `@rn-primitives/hover-card`, `react-native-reanimated`, and `react-native-screens`. This method is useful if you prefer not to use the CLI.

```bash
npx expo install @rn-primitives/hover-card react-native-reanimated react-native-screens
```

--------------------------------

### Add Component Descriptions - TypeScript Configuration

Source: https://github.com/blencorp/react-native-usmds/blob/main/packages/registry/scripts/README.md

This TypeScript snippet shows how to add descriptions for new components. The `DESCRIPTIONS` object maps component names (strings) to their descriptive text (strings). This configuration is used by the build script to populate component metadata.

```typescript
const DESCRIPTIONS: Record<string, string> = {
  'my-component': 'My component description here.',
  // ...
};
```