### Example Installation Code Snippet

Source: https://github.com/founded-labs/react-native-reusables/wiki/[-Docs-]-Guidelines-for-Primitives

Use this component to display installation steps for primitives. It requires the imported code, language, and the component name.

```tsx
<Code code={importedCode} lang="tsx" title="~/components/primitives/${component}" />
```

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

### Install Button via CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/button.mdx

Installs the button component using the command-line interface. This is the recommended method for quick setup.

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

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

### Toggle Group Installation (CLI)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/toggle-group.mdx

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

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

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

### Dialog Component Installation via CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/dialog.mdx

Installs the Dialog component using the CLI command. This is the recommended method for quick setup.

```bash
npx expo install @rnr/dialog
```

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

### Initialize Project with Clerk Authentication Template

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/index.mdx

Use this command to start a new project with all Clerk authentication blocks pre-configured. Ensure you follow the provided link for template setup.

```bash
npx @founded-labs/cli init -t clerk-auth
```

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

### Install Accordion via Manual Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/accordion.mdx

For manual installation with NativeWind, install the dependency and then copy the provided UI component code into your project. Ensure the file paths are correct for your setup.

```json
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/text.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/text.tsx\""
  }
}
```

```json
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/icon.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/icon.tsx\""
  }
}
```

```json
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/accordion.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/accordion.tsx\""
  }
}
```

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

### Install Accordion via Manual Installation (Uniwind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/accordion.mdx

For manual installation with Uniwind, install the dependency and then copy the provided UI component code into your project. Ensure the file paths are correct for your setup.

```json
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/text.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/text.tsx\""
  }
}
```

```json
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/icon.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/icon.tsx\""
  }
}
```

```json
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/accordion.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/accordion.tsx\""
  }
}
```

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

### Install UserMenu CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/user-menu.mdx

Use this command to add the UserMenu component to your project. This is the standard installation method.

```bash
npx expo install user-menu
```

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

### Check Project Setup

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/cli.mdx

Checks your project setup and diagnoses issues. Use `--summary` to show only a summary or `--yes` to skip the confirmation prompt.

```bash
Usage: react-native-reusables doctor [options]

Check your project setup and diagnose issues

Options:
  -c, --cwd <cwd>        the working directory. defaults to the current directory.
  -s, --summary          show summary only
  -y, --yes              skip confirmation prompt
  -h, --help             display help for command
```

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

### Code Component for Installation Steps

Source: https://github.com/founded-labs/react-native-reusables/wiki/[-Docs-]-Guidelines-for-UI-Components

Use this component to display installation steps for related files. Replace `~/components/ui/${component}` with the actual file path.

```jsx
<Code code={importedCode} lang="tsx" title="~/components/ui/${component}" />
```

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

### Basic Menubar Example

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/menubar.mdx

A basic implementation of the Menubar component with a 'File' menu. This example demonstrates how to structure menu items, separators, and shortcuts.

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>
      <Text>File</Text>
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        <Text>New Tab</Text> <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        <Text>New Window</Text>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        <Text>Share</Text>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        <Text>Print</Text>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

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

### Collapsible Component Installation (UniWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/collapsible.mdx

Provides the code for installing the Collapsible component using UniWind styling. Ensure the import paths match your project setup.

```json
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/collapsible.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/collapsible.tsx\""
  }
}
```

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

### Install Social Connections CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/social-connections.mdx

Use this command to add the SocialConnections block to your project. This is the recommended installation method for general use.

```bash
npx expo install add social-connections
```

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

### Install Context Menu Dependency

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/context-menu.mdx

Installs the necessary dependency for the context menu component.

```bash
npx expo install @rn-primitives/context-menu
```

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

### Props Table Example

Source: https://github.com/founded-labs/react-native-reusables/wiki/[-Docs-]-Guidelines-for-UI-Components

Example of how to structure a table for component props. Includes columns for Prop, Type, and Note.

```markdown
| Prop |       Type        |                   Note                   |
| :--: | :---------------: | :--------------------------------------: |
|      |                   |                                          |
```

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

### Collapsible Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/collapsible.mdx

Provides the code for installing the Collapsible component using NativeWind styling. Ensure the import paths match your project setup.

```json
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/collapsible.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/collapsible.tsx\""
  }
}
```

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

### Separator Component Installation (UniWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/separator.mdx

Provides the code for installing the Separator component using UniWind for styling. Ensure the import path matches your project setup.

```json
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/separator.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/separator.tsx\""
  }
}
```

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

### Run Development Server

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/README.md

Commands to start the Next.js development server. Use the package manager of your choice.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

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

### Separator Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/separator.mdx

Provides the code for installing the Separator component using NativeWind for styling. Ensure the import path matches your project setup.

```json
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/separator.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/separator.tsx\""
  }
}
```

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

### Popover Example

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/popover.mdx

A basic example demonstrating how to use the Popover component with a trigger and content.

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

<Popover>
  <PopoverTrigger>
    <Text>Open</Text>
  </PopoverTrigger>
  <PopoverContent>
    <Text>Place content for the popover here.</Text>
  </PopoverContent>
</Popover>
```

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

### Toggle Group Installation (Manual - NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/toggle-group.mdx

Manual installation steps for Toggle Group using NativeWind for styling. Includes necessary component files.

```tsx
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
import {
  Text,
  Icon,
  IconProps,
} from "@/components/ui/text";

export default function Page() {
  return (
    <ToggleGroup type="single" defaultValue="1" className="gap-2">
      <ToggleGroupItem value="1" aria-label="Toggle 1">
        <Icon name="heart" size={20} />
      </ToggleGroupItem>
      <ToggleGroupItem value="2" aria-label="Toggle 2">
        <Icon name="star" size={20} />
      </ToggleGroupItem>
      <ToggleGroupItem value="3" aria-label="Toggle 3">
        <Icon name="bell" size={20} />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

```

```tsx
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
import {
  Text,
  Icon,
  IconProps,
} from "@/components/ui/text";

export default function Page() {
  return (
    <ToggleGroup type="single" defaultValue="1" className="gap-2">
      <ToggleGroupItem value="1" aria-label="Toggle 1">
        <Icon name="heart" size={20} />
      </ToggleGroupItem>
      <ToggleGroupItem value="2" aria-label="Toggle 2">
        <Icon name="star" size={20} />
      </ToggleGroupItem>
      <ToggleGroupItem value="3" aria-label="Toggle 3">
        <Icon name="bell" size={20} />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

```

```tsx
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
import {
  Text,
  Icon,
  IconProps,
} from "@/components/ui/text";

export default function Page() {
  return (
    <ToggleGroup type="single" defaultValue="1" className="gap-2">
      <ToggleGroupItem value="1" aria-label="Toggle 1">
        <Icon name="heart" size={20} />
      </ToggleGroupItem>
      <ToggleGroupItem value="2" aria-label="Toggle 2">
        <Icon name="star" size={20} />
      </ToggleGroupItem>
      <ToggleGroupItem value="3" aria-label="Toggle 3">
        <Icon name="bell" size={20} />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

```

```tsx
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";
import {
  Text,
  Icon,
  IconProps,
} from "@/components/ui/text";

export default function Page() {
  return (
    <ToggleGroup type="single" defaultValue="1" className="gap-2">
      <ToggleGroupItem value="1" aria-label="Toggle 1">
        <Icon name="heart" size={20} />
      </ToggleGroupItem>
      <ToggleGroupItem value="2" aria-label="Toggle 2">
        <Icon name="star" size={20} />
      </ToggleGroupItem>
      <ToggleGroupItem value="3" aria-label="Toggle 3">
        <Icon name="bell" size={20} />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

```

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

### Textarea Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/textarea.mdx

Provides the code for installing the Textarea component using NativeWind styling. Ensure the import paths match your project setup.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/textarea.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/textarea.tsx\""
  }
}
```

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

### Dropdown Menu Example

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/dropdown-menu.mdx

A basic example demonstrating how to use the Dropdown Menu component with trigger, content, label, separator, and menu items.

```tsx
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Text } from '@/components/ui/text';

<DropdownMenu>
  <DropdownMenuTrigger>
    <Text>Open</Text>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>
      <Text>My Account</Text>
    </DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <Text>Profile</Text>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Text>Team</Text>
    </DropdownMenuItem> 
  </DropdownMenuContent>
</DropdownMenu>
```

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

### Install UserMenu with Clerk Integration CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/user-menu.mdx

Use this command to add the UserMenu component when integrating with Clerk. This command is specific to Clerk-based setups.

```bash
npx expo install user-menu-clerk
```

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

### Textarea Component Installation (UniWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/textarea.mdx

Provides the code for installing the Textarea component using UniWind styling. Ensure the import paths match your project setup.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/textarea.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/textarea.tsx\""
  }
}
```

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

### Aspect Ratio Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/aspect-ratio.mdx

Provides the code for installing the AspectRatio component using NativeWind for styling. Copy and paste this code into your project.

```json
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/aspect-ratio.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/aspect-ratio.tsx\""
  }
}
```

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

### Aspect Ratio Installation (UniWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/aspect-ratio.mdx

Provides the code for installing the AspectRatio component using UniWind for styling. Copy and paste this code into your project.

```json
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/aspect-ratio.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/aspect-ratio.tsx\""
  }
}
```

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

### Install Context Menu via CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/context-menu.mdx

Command to add the context-menu component to your project using the CLI.

```bash
add "context-menu"
```

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

### Install Component using CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/create-your-own-registry.mdx

Install components into your registry using the 'add' command with the full URL of the registry item. This can be done with either the 'shadcn' CLI or the '@react-native-reusables/cli'.

```bash
shadcn add http://localhost:3000/r/hello-world.json
```

```bash
@react-native-reusables/cli add http://localhost:3000/r/hello-world.json
```

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

### Install Menubar via CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/menubar.mdx

Use this command to add the Menubar component to your project using the CLI.

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

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

### Select Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/select.mdx

Provides the necessary code for installing the Select component using NativeWind for styling. Ensure you have NativeWind configured in your project.

```tsx
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Text } from "@/components/ui/text";
import { Icon } from "@/components/ui/icon";
import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";

// Example usage (assuming you have Text, Icon, and NativeOnlyAnimatedView components)

export function SelectPreview() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a fruit" />
        <Icon name="chevron-down" className="h-4 w-4" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">
            <NativeOnlyAnimatedView>
              <Text>Apple</Text>
            </NativeOnlyAnimatedView>
          </SelectItem>
          <SelectItem value="banana">
            <NativeOnlyAnimatedView>
              <Text>Banana</Text>
            </NativeOnlyAnimatedView>
          </SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Vegetables</SelectLabel>
          <SelectItem value="broccoli">
            <NativeOnlyAnimatedView>
              <Text>Broccoli</Text>
            </NativeOnlyAnimatedView>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

```

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

### Avatar Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/avatar.mdx

Provides the code for installing the Avatar component using NativeWind for styling. Ensure the import paths match your project setup.

```json
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/avatar.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/avatar.tsx\""
  }
}
```

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

### Install Sign-In Form CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/sign-in-form.mdx

Use this command to add the Sign-In Form component to your project when not using Clerk integration.

```bash
npx expo install @rnr/sign-in-form
```

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

### Manual Installation of UserMenu

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/user-menu.mdx

Manually install the UserMenu component by copying the provided code into your project. Ensure you have the necessary dependencies like Avatar, Button, Popover, and Text.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/blocks/user-menu.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/user-menu.tsx\""
  }
}
```

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

### Manual Installation: Clerk Social Connections Dependencies

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/social-connections.mdx

Install these dependencies when manually setting up Clerk social connections. These are required for Clerk's authentication flow.

```bash
npx expo install expo-auth-session expo-web-browser
```

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

### Toggle Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/toggle.mdx

Installs the Toggle component with NativeWind styling. Ensure you have the necessary UI components installed.

```tsx
import { Text } from "@/components/ui/text"
import { Icon } from "@/components/ui/icon"
import { Toggle } from "@/components/ui/toggle"

export default function ToggleDemo() {
  const [pressed, setPressed] = React.useState(false)

  return (
    <Toggle pressed={pressed} onPressedChange={setPressed}>
      <Icon name="check" className="h-4 w-4" />
      <Text className="text-sm font-medium leading-none">
        Accept terms
      </Text>
    </Toggle>
  )
}
```

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

### Install Text Component via CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/text.mdx

Use this command to add the Text component to your project via the CLI.

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

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

### Manual Installation of UserMenu with Clerk

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/user-menu.mdx

Manually install the UserMenu component for Clerk integration by copying the provided code. This requires installing the Clerk package and configuring your app with Clerk's API keys.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/blocks/clerk/user-menu.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/user-menu.tsx\""
  }
}
```

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

### Input Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/input.mdx

Provides the code for installing the Input component using NativeWind. This involves copying and pasting the component's code into your project.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/input.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/input.tsx\""
  }
}
```

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

### Install Sign-In Form with Clerk CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/sign-in-form.mdx

Use this command to add the Sign-In Form component to your project when integrating with Clerk.

```bash
npx expo install @rnr/sign-in-form-clerk
```

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

### Manual Installation: Social Connections

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/social-connections.mdx

This snippet shows the file path for the SocialConnections component when performing a manual installation. Ensure you adjust import paths and handle TODO comments.

```json
{
  "file": "./node_modules/@rnr/registry/src/blocks/social-connections.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/social-connections.tsx\""
  }
}
```

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

### Install Verify Email Form (Clerk Integration)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/verify-email-form.mdx

Use this command to add the verify-email-form-clerk component for integration with Clerk.

```bash
npx expo install verify-email-form-clerk
```

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

### Install Alert Component with NativeWind

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/alert.mdx

Provides the necessary code for installing the Alert component using NativeWind styling. Ensure to update import paths as needed.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/text.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/text.tsx\""
  }
}
```

```tsx
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/icon.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/icon.tsx\""
  }
}
```

```tsx
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/alert.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/alert.tsx\""
  }
}
```

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

### Input Component Installation (UniWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/input.mdx

Provides the code for installing the Input component using UniWind. This involves copying and pasting the component's code into your project.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/input.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/input.tsx\""
  }
}
```

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

### Progress Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/progress.mdx

Provides the code for installing the Progress component using NativeWind styling. Copy this code into your project's UI components directory.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/progress.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/progress.tsx\""
  }
}
```

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

### Card Component Usage Example

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/card.mdx

Demonstrates how to structure and render a Card component with a title, description, content, and footer.

```tsx
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <Text>Card Content</Text>
  </CardContent>
  <CardFooter>
    <Text>Card Footer</Text>
  </CardFooter>
</Card>
```

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

### Progress Component Installation (UniWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/progress.mdx

Provides the code for installing the Progress component using UniWind styling. Copy this code into your project's UI components directory.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/progress.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/progress.tsx\""
  }
}
```

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

### Install Alert Component with Uni-wind

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/alert.mdx

Provides the necessary code for installing the Alert component using Uni-wind styling. Ensure to update import paths as needed.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/text.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/text.tsx\""
  }
}
```

```tsx
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/icon.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/icon.tsx\""
  }
}
```

```tsx
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/alert.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/alert.tsx\""
  }
}
```

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

### Alert Dialog Example

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/alert-dialog.mdx

Displays a preview of the Alert Dialog component.

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@rn-primitives/alert-dialog";
import {
  Button,
  Text,
  NativeOnlyAnimatedView,
} from "@rn-primitives/native-only";

export function AlertDialogPreview() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button>
          <Text>Show Dialog</Text>
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel asChild>
            <Button variant="outline">
              Cancel
            </Button>
          </AlertDialogCancel>
          <AlertDialogAction asChild>
            <Button>
              Continue
            </Button>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
```

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

### Manual Installation: Clerk Social Connections Component

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/social-connections.mdx

This snippet shows the file path for the Clerk-specific SocialConnections component during manual installation. Adjust import paths and handle TODO comments.

```json
{
  "file": "./node_modules/@rnr/registry/src/blocks/clerk/social-connections.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/social-connections.tsx\""
  }
}
```

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

### Install Verify Email Form (Standalone)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/verify-email-form.mdx

Use this command to add the verify-email-form component to your project for standalone integration.

```bash
npx expo install verify-email-form
```

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

### Skeleton Component Example

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/skeleton.mdx

This snippet shows a basic example of how to use the Skeleton component with a specific height, width, and rounded full border. It's useful for creating placeholder elements that mimic the shape of the content to be loaded.

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

<Skeleton className="h-[20px] w-[100px] rounded-full" />
```

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

### Radio Group Preview Example

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/radio-group.mdx

Displays a preview of the Radio Group component. This snippet is for visual demonstration.

```json
{
  "file": "./node_modules/@rnr/registry/src/examples/radio-group.tsx",
  "codeblock": {
    "lang": "tsx"
  }
}
```

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

### Tooltip Component Preview

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/tooltip.mdx

Displays a preview of the Tooltip component. This snippet is for rendering the visual example.

```json
{
  "file": "./node_modules/@rnr/registry/src/examples/tooltip.tsx",
  "codeblock": {
    "lang": "tsx"
  }
}
```

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

### Install and Run CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/cli/README.md

Shows how to run the CLI using different package managers. Replace '<command>' with the desired CLI action.

```sh
npx @react-native-reusables/cli@latest <command>
```

```sh
pnpm dlx @react-native-reusables/cli@latest <command>
```

```sh
yarn dlx @react-native-reusables/cli@latest <command>
```

```sh
bunx --bun @react-native-reusables/cli@latest <command>
```

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

### Install Reset Password Form (CLI)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/reset-password-form.mdx

Use this command to add the reset-password-form component to your project via the CLI.

```bash
npx @rnr/cli add reset-password-form
```

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

### Skeleton Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/skeleton.mdx

This code block provides the necessary file content for installing the Skeleton component when using NativeWind for styling. Ensure the file path and meta information are correctly set up in your project.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/skeleton.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/skeleton.tsx\""
  }
}
```

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

### Toggle Group Preview Example

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/toggle-group.mdx

Displays a preview of the Toggle Group component. This snippet is used to render the interactive preview.

```tsx
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@rn-primitives/toggle-group";
import * as React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import {
  Icon,
  IconProps,
} from "@rn-primitives/icon";

export function ToggleGroupPreview() {
  const [value, setValue] = React.useState("1");

  return (
    <View style={styles.container}>
      <ToggleGroup type="single" value={value} onValueChange={setValue} className="gap-2">
        <ToggleGroupItem value="1" aria-label="Toggle 1" className="h-10 w-10 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground">
          <Icon name="heart" size={20} />
        </ToggleGroupItem>
        <ToggleGroupItem value="2" aria-label="Toggle 2" className="h-10 w-10 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground">
          <Icon name="star" size={20} />
        </ToggleGroupItem>
        <ToggleGroupItem value="3" aria-label="Toggle 3" className="h-10 w-10 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground">
          <Icon name="bell" size={20} />
        </ToggleGroupItem>
      </ToggleGroup>

      <Text className="mt-4">Selected value: {value}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
});

```

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

### Initialize New Project with CLI

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/installation/index.mdx

Use this command to create a new project with React Native Reusables. Refer to CLI options for further customization.

```bash
npx react-native-reusables init
```

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

### Clone Repository and Navigate

Source: https://github.com/founded-labs/react-native-reusables/blob/main/CONTRIBUTING.md

Clone the forked repository to your local machine and navigate into the project directory.

```bash
git clone https://github.com/your-username/react-native-reusables.git
cd react-native-reusables
```

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

### Avatar Component Installation (UniWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/avatar.mdx

Provides the code for installing the Avatar component using UniWind for styling. Ensure the import paths match your project setup.

```json
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/avatar.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/avatar.tsx\""
  }
}
```

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

### Import and Use Button Component

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/installation/index.mdx

Example of how to import and use the Button component in your React Native application after installation.

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

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

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

### Checkbox Component for NativeWind

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/checkbox.mdx

The Checkbox component implementation using NativeWind for styling. This is a direct copy-paste example for manual installation.

```tsx
import {
  Root,
  Indicator,
  Label,
} from "@tamagui/checkbox";
import * as React from "react";
import {
  cn,
  withRef,
  withStyle,
  withVariant,
} from "@/lib/utils";
import { Check } from "@tamagui/lucide-icons";

const Checkbox = React.forwardRef<
  React.ElementRef<typeof Root>,
  React.ComponentPropsWithoutRef<typeof Root>
>(({ className, checked, ...props }, ref) => (
  <Root
    ref={ref}
    className={cn(
      "h-4 w-4 shrink-0 rounded-md border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
      checked && "bg-primary text-primary-foreground",
      className
    )}
    {...props}
  >
    <Indicator
      className={cn(
        "flex items-center justify-center text-current",
        checked && "text-white"
      )}
    >
      <Check className="h-3.5 w-3.5" />
    </Indicator>
  </Root>
));
Checkbox.displayName = Root.displayName;

export { Checkbox };

```

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

### Manual Setup: Sign-In Form Component Code

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/sign-in-form.mdx

Copy this code into your project for the standalone Sign-In Form. Adjust import paths and handle TODO comments as needed.

```tsx
import {
  Button,
  Card,
  Input,
  Label,
  Separator,
  Text,
  SocialConnections,
} from '@rnr/components';
import {
  Form,
  useForm,
  useFormState,
  useFormWatch,
} from '@rnr/reusables';
import {
  Link,
  useRouter,
} from 'expo-router';
import React from 'react';

const SignInForm = ({
  initialValues,
  onSubmit,
  onResetPassword,
  onSignUpPress,
  socialConnections,
  ...props
}) => {
  const router = useRouter();
  const form = useForm({
    initialValues: initialValues || {
      email: '',
      password: '',
    },
    validate: (values) => {
      const errors = {};
      if (!values.email) {
        errors.email = 'Required';
      } else if (!/
        ^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\.$
      /i.test(values.email)) {
        errors.email = 'Invalid email address';
      }
      if (!values.password) {
        errors.password = 'Required';
      }
      return errors;
    },
    validateOnMount: true,
  });

  const { isValid } = useFormState(form);
  const email = useFormWatch(form, 'email');

  return (
    <Card {...props}>
      <Card.Header>
        <Card.Title>Sign In</Card.Title>
        <Card.Description>Enter your email below to sign in to your account.</Card.Description>
      </Card.Header>
      <Card.Content className="space-y-4">
        <Form form={form} onSubmit={onSubmit || (() => { /* TODO: Implement sign in logic */ console.log('Sign in with:', email); form.reset(); })}>
          <Input label="Email" name="email" inputMode="email" autoCapitalize="none" />
          <Input label="Password" name="password" secureTextEntry />
          <Button type="submit" disabled={!isValid}>Sign In</Button>
        </Form>
        <Button
          variant="outline"
          onPress={onResetPassword || (() => router.push('/reset-password'))}
          className="w-full">
          Forgot Password?
        </Button>
        <Separator text="or continue with" />
        <SocialConnections connections={socialConnections} />
        <Button
          variant="link"
          onPress={onSignUpPress || (() => router.push('/sign-up'))}
          className="w-full">
          Don't have an account? Sign Up
        </Button>
      </Card.Content>
    </Card>
  );
};

export default SignInForm;

```

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

### Import and Use SocialConnections

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/social-connections.mdx

After installation, import the SocialConnections component into your app. This example shows how to render it within a centered view.

```tsx
import { SocialConnections } from '@/components/social-connections';
import { View } from 'react-native';

export default function SocialConnectionsScreen() {
  return (
    <View className='flex-1 items-center justify-center p-8'>
      <View className="w-full max-w-sm">
        <SocialConnections />
      </View>
    </View>
  );
}
```

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

### Add Project Dependencies

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/installation/manual.mdx

Install necessary packages for Tailwind CSS animation, component variants, and utility classes, along with the `@rn-primitives/portal` library.

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

```

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

### Card Component Installation (UniWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/card.mdx

Provides the code for the Card and Text components when using UniWind for styling. Ensure the import paths match your project setup.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/text.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/text.tsx\""
  }
}
```

```tsx
{
  "file": "./node_modules/@rnr/registry/src/uniwind/components/ui/card.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/card.tsx\""
  }
}
```

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

### Card Component Installation (NativeWind)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/card.mdx

Provides the code for the Card and Text components when using NativeWind for styling. Ensure the import paths match your project setup.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/text.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/text.tsx\""
  }
}
```

```tsx
{
  "file": "./node_modules/@rnr/registry/src/nativewind/components/ui/card.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/ui/card.tsx\""
  }
}
```

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

### Initialize New Expo Project

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/cli.mdx

Scaffolds a new Expo project using a specified template. Use the `--cwd` option to set the working directory and `--template` to choose a template.

```bash
Usage: react-native-reusables init [options]

Initialize a new Expo project with React Native Reusables

Options:
  -c, --cwd <cwd>               the working directory. defaults to the current directory.
  -t, --template <template>     the template to use.
  -h, --help                    display help for command
```

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

### Manual Setup: Clerk Sign-In Form Component Code

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/sign-in-form.mdx

Copy this code into your project for the Clerk-integrated Sign-In Form. Ensure Clerk is installed and configured, and adjust import paths as needed.

```tsx
import {
  Button,
  Card,
  Input,
  Label,
  Separator,
  Text,
  SocialConnections,
} from '@rnr/components';
import {
  useSignIn,
  useSignUp,
  useAuth,
} from '@clerk/clerk-expo';
import {
  Form,
  useForm,
  useFormState,
  useFormWatch,
} from '@rnr/reusables';
import {
  Link,
  useRouter,
} from 'expo-router';
import React from 'react';

const SignInForm = ({
  initialValues,
  onSubmit,
  onResetPassword,
  onSignUpPress,
  socialConnections,
  ...props
}) => {
  const router = useRouter();
  const { isLoaded, signIn, setActive } = useSignIn();
  const { signUp } = useSignUp();

  const form = useForm({
    initialValues: initialValues || {
      email: '',
      password: '',
    },
    validate: (values) => {
      const errors = {};
      if (!values.email) {
        errors.email = 'Required';
      } else if (!/
        ^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\.$
      /i.test(values.email)) {
        errors.email = 'Invalid email address';
      }
      if (!values.password) {
        errors.password = 'Required';
      }
      return errors;
    },
    validateOnMount: true,
  });

  const { isValid } = useFormState(form);
  const email = useFormWatch(form, 'email');

  const handleSignIn = async () => {
    if (!isLoaded) {
      return;
    }

    try {
      const completeSignIn = await signIn.create({
        identifier: email,
        password,
      });

      // This is an important step,
      // This indicates the user is logged in
      await setActive({ session: completeSignIn.createdSessionId });
      router.replace('/');
    } catch (error) {
      console.error(JSON.stringify(error, null, 2));
    }
  };

  return (
    <Card {...props}>
      <Card.Header>
        <Card.Title>Sign In</Card.Title>
        <Card.Description>Enter your email below to sign in to your account.</Card.Description>
      </Card.Header>
      <Card.Content className="space-y-4">
        <Form form={form} onSubmit={onSubmit || handleSignIn}>
          <Input label="Email" name="email" inputMode="email" autoCapitalize="none" />
          <Input label="Password" name="password" secureTextEntry />
          <Button type="submit" disabled={!isValid || !isLoaded}>Sign In</Button>
        </Form>
        <Button
          variant="outline"
          onPress={onResetPassword || (() => router.push('/reset-password'))}
          className="w-full">
          Forgot Password?
        </Button>
        <Separator text="or continue with" />
        <SocialConnections connections={socialConnections} />
        <Button
          variant="link"
          onPress={onSignUpPress || (() => router.push('/sign-up'))}
          className="w-full">
          Don't have an account? Sign Up
        </Button>
      </Card.Content>
    </Card>
  );
};

export default SignInForm;

```

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

### Manual Installation of Forgot Password Form

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/forgot-password-form.mdx

Manually add the Forgot Password Form component to your project. This involves adding necessary dependencies and copying the component's code. Adjust import paths and // TODO: comments as needed for your project setup.

```tsx
{
  "file": "./node_modules/@rnr/registry/src/blocks/forgot-password-form.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/forgot-password-form.tsx\""
  }
}
```

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

### Button Primary Example Code

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/button.mdx

Displays the code for the primary button example. This is typically the default or most common button style.

```tsx
import {
  Button,
  ButtonIcon,
  ButtonText,
} from "@rn-primitives/button";

export function ButtonPreview() {
  return (
    <Button>
      <ButtonIcon />
      <ButtonText>Button</ButtonText>
    </Button>
  );
}
```

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

### Install Clerk Expo Package

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/user-menu.mdx

Install the Clerk Expo package using npm or yarn. This is a prerequisite for using Clerk-specific features with UserMenu.

```bash
npx expo install @clerk/expo
```

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

### Sign Up Form Component (Default Integration)

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/blocks/authentication/sign-up-form.mdx

This JSON configuration points to the source file for the default Sign Up Form component. Adjust import paths and TODO comments as needed for your project setup.

```json
{
  "file": "./node_modules/@rnr/registry/src/blocks/sign-up-form.tsx",
  "codeblock": {
    "lang": "tsx",
    "meta": "title=\"@/components/sign-up-form.tsx\""
  }
}
```

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

### Init CLI Command

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/cli/README.md

Command to initialize a new React Native project pre-configured for reusables. Use the --cwd option to specify the working directory.

```sh
rnr init [options]
```

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

### Button Secondary Example Code

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/button.mdx

Displays the code for a secondary button example. This is suitable for less important actions compared to the primary button.

```tsx
import {
  Button,
  ButtonIcon,
  ButtonText,
} from "@rn-primitives/button";

export function ButtonSecondaryPreview() {
  return (
    <Button>
      <ButtonIcon />
      <ButtonText>Button</ButtonText>
    </Button>
  );
}
```

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

### Doctor CLI Command

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/cli/README.md

Command to check your project setup and diagnose issues. Use options like --yes to skip confirmations or --summary for concise output.

```sh
rnr doctor [options]
```

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

### Button Destructive Example Code

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/button.mdx

Displays the code for a destructive button example. Use this for actions that have significant consequences, like deleting data.

```tsx
import {
  Button,
  ButtonIcon,
  ButtonText,
} from "@rn-primitives/button";

export function ButtonDestructivePreview() {
  return (
    <Button>
      <ButtonIcon />
      <ButtonText>Button</ButtonText>
    </Button>
  );
}
```

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

### Run CLI in Development Mode

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/cli/README.md

Starts the CLI in development mode. Requires the 'apps/docs' app to be running to serve the component registry.

```sh
pnpm dev:docs
```

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

### Import Switch Component

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/switch.mdx

Demonstrates how to import the Switch component into your project. Ensure the path matches your project's alias setup.

```tsx
import { Switch } from "@/components/ui/switch"

```

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

### Button Ghost Example Code

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/button.mdx

Displays the code for a ghost button example. This style is typically very minimal, often just text, and is used for low-emphasis actions.

```tsx
import {
  Button,
  ButtonIcon,
  ButtonText,
} from "@rn-primitives/button";

export function ButtonGhostPreview() {
  return (
    <Button>
      <ButtonIcon />
      <ButtonText>Button</ButtonText>
    </Button>
  );
}
```

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

### Input Component Basic Usage

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/components/input.mdx

Demonstrates the basic import and usage of the Input component. Ensure the import path matches your project structure.

```tsx
import { Input } from "@/components/ui/input"

```

```tsx
<Input />
```

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

### Configure components.json

Source: https://github.com/founded-labs/react-native-reusables/blob/main/apps/docs/content/docs/installation/manual.mdx

Configuration file for `shadcn/ui` components, specifying project settings like style, RSC support, Tailwind CSS integration, and component aliases.

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "global.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}
```