### Manual Tooltip Installation and Setup

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/tooltip/index.mdx

Install dependencies and copy the provided code to manually integrate the Tooltip component. This setup includes optional animation integration with `@legendapp/motion`.

```bash
npm i @legendapp/motion
```

```jsx
'use client';
import React from 'react';
import { createTooltip } from '@gluestack-ui/core/tooltip/creator';
import { View, Text, ViewStyle } from 'react-native';
import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
import { tva } from '@gluestack-ui/utils/nativewind-utils';
import { withStyleContext } from '@gluestack-ui/utils/nativewind-utils';
import {
  Motion,
  AnimatePresence,
  MotionComponentProps,
} from '@legendapp/motion';
import { styled } from 'nativewind';

type IMotionViewProps = React.ComponentProps<typeof View> &
  MotionComponentProps<typeof View, ViewStyle, unknown, unknown, unknown>;

const MotionView = Motion.View as React.ComponentType<IMotionViewProps>;

const StyledMotionView = styled(MotionView, { className: 'style' });

export const UITooltip = createTooltip({
  Root: withStyleContext(StyledMotionView),
  Content: MotionView,
  Text: Text,
  AnimatePresence: AnimatePresence,
});


const tooltipStyle = tva({
  base: 'w-full h-full web:pointer-events-none',
});

const tooltipContentStyle = tva({
  base: 'py-1 px-3 rounded-sm bg-background/90 web:pointer-events-auto',
});

const tooltipTextStyle = tva({
  base: 'font-normal tracking-normal web:select-none text-xs text-foreground/90',

  variants: {
    isTruncated: {
      true: 'line-clamp-1 truncate',
    },
    bold: {
      true: 'font-bold',
    },
    underline: {
      true: 'underline',
    },
    strikeThrough: {
      true: 'line-through',
    },
    size: {
      '2xs': 'text-2xs',
      'xs': 'text-xs',
      'sm': 'text-sm',
      'md': 'text-base',
      'lg': 'text-lg',
      'xl': 'text-xl',
      '2xl': 'text-2xl',
      '3xl': 'text-3xl',
      '4xl': 'text-4xl',
      '5xl': 'text-5xl',
      '6xl': 'text-6xl',
    },
    sub: {
      true: 'text-xs',
    },
    italic: {
      true: 'italic',
    },
    highlight: {
      true: 'bg-yellow-500',
    },
  },
});

type ITooltipProps = React.ComponentProps<typeof UITooltip> &
  VariantProps<typeof tooltipStyle> & { className?: string };
type ITooltipContentProps = React.ComponentProps<typeof UITooltip.Content> &
  VariantProps<typeof tooltipContentStyle> & { className?: string };
type ITooltipTextProps = React.ComponentProps<typeof UITooltip.Text> &
  VariantProps<typeof tooltipTextStyle> & { className?: string };

const Tooltip = React.forwardRef<
  React.ComponentRef<typeof UITooltip>,
  ITooltipProps
>(function Tooltip({ className, ...props }, ref) {
  return (
    <UITooltip
      ref={ref}
      className={tooltipStyle({ class: className })}
      {...props}
    />
  );
});

const TooltipContent = React.forwardRef<
  React.ComponentRef<typeof UITooltip.Content>,
  ITooltipContentProps & { className?: string }
>(function TooltipContent({ className, ...props }, ref) {
  return (
    <UITooltip.Content
      ref={ref}
      {...props}
      className={tooltipContentStyle({
        class: className,
      })}
      pointerEvents="auto"
    />
  );
});

const TooltipText = React.forwardRef<
  React.ComponentRef<typeof UITooltip.Text>,
  ITooltipTextProps & { className?: string }
>(function TooltipText({ size, className, ...props }, ref) {
  return (
    <UITooltip.Text
      ref={ref}
      className={tooltipTextStyle({ size, class: className })}
      {...props}
    />
  );
});

Tooltip.displayName = 'Tooltip';
TooltipContent.displayName = 'TooltipContent';
TooltipText.displayName = 'TooltipText';

export { Tooltip, TooltipContent, TooltipText };

```

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

### Navigate and Develop gluestack-utils

Source: https://github.com/gluestack/gluestack-ui/blob/main/CONTRIBUTING.md

Use these commands to navigate into the gluestack-utils package, install dependencies, and start the development server for making changes.

```bash
# Navigate to the package
cd packages/gluestack-utils

# Install dependencies
yarn

# Start development mode (if not already linked)
yarn dev

# Make your changes in src/
# Changes will be automatically rebuilt and published to yalc
```

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

### Navigate and Develop gluestack-core

Source: https://github.com/gluestack/gluestack-ui/blob/main/CONTRIBUTING.md

Use these commands to navigate into the gluestack-core package, install dependencies, and start the development server for making changes.

```bash
# Navigate to the package
cd packages/gluestack-core

# Install dependencies
yarn

# Start development mode (if not already linked)
yarn dev

# Make your changes in src/
# Changes will be automatically rebuilt and published to yalc
```

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

### Navigate and Develop gluestack-utils

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/public/llms-full.txt

Steps to navigate into the gluestack-utils package, install its dependencies, and start its development mode for local changes.

```bash
cd packages/gluestack-utils
yarn
yarn dev
```

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

### Link Component Installation

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/components/ui/link/docs/index.mdx

Instructions for installing the gluestack-ui Link component using either the CLI or manual setup.

```APIDOC
## Installation

<Tabs>
<TabItem label="CLI">
### Run the following command:
<CodeBlock code="npx gluestack-ui add link" language="bash" />

</TabItem>
<TabItem label="Manual">

### Step 1: Copy and paste the following code into your project.

```tsx
%%-- File: src/components/ui/link/index.tsx --%%
```

### Step 2: Update the import paths to match your project setup.

</TabItem>
</Tabs>
```

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

### Switch Component Installation

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/components/ui/switch/docs/index.mdx

Instructions on how to install the Switch component using CLI or manually.

```APIDOC
## Installation

### CLI

Run the following command:
```bash
npx gluestack-ui add switch
```

### Manual

#### Step 1: Copy and paste the following code into your project.

```jsx
%%-- File: src/components/ui/switch/index.tsx --%%
```

#### Step 2: Update the import paths to match your project setup.
```

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

### Portal Installation

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/public/llms-full.txt

Instructions for installing the Portal component using the CLI or manually.

```APIDOC
## Portal Installation

### Description
Install the Portal component using the provided CLI command or by manually copying and integrating the component code into your project.

### CLI Installation
```bash
npx gluestack-ui add portal
```

### Manual Installation
#### Step 1: Copy Component Code
```tsx
'use client';

const StyledOverlay = styled(Overlay, { className: "style" });

const Portal = React.forwardRef<
  React.ComponentRef<typeof Overlay>,
  React.ComponentProps<typeof Overlay>
>(function Portal({ ...props }, ref) {
  return <StyledOverlay {...props} ref={ref} />;
});

Portal.displayName = 'Portal';

export { Portal };
```

#### Step 2: Update Import Paths
Adjust the import paths in the copied code to match your project's structure.
```

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

### Install Grid Component via CLI

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/grid/index.mdx

Use the gluestack-ui CLI to add the Grid component to your project. This is the recommended method for quick setup.

```bash
npx gluestack-ui add grid
```

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

### Start App Development (Website)

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/public/llms-full.txt

Starts the development server for the website app. This should be run in a separate terminal after starting the watch mode.

```bash
cd apps/website && yarn dev
```

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

### Start App Development (Kitchen-Sink)

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/public/llms-full.txt

Starts the development server for the kitchen-sink app. This should be run in a separate terminal after starting the watch mode.

```bash
cd apps/kitchen-sink && yarn dev
```

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

### Run Next.js Development Server

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/README.md

Use these commands to start the local development server for your Next.js project. Ensure you have the necessary package manager installed.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

```bash
bun dev
```

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

### Progress Component Installation

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/components/ui/progress/docs/index.mdx

Instructions for installing the Progress component using CLI or manual steps.

```APIDOC
## Installation

<Tabs>
<TabItem label="CLI">
### Run the following command:
<CodeBlock code={`${process.env.NEXT_PUBLIC_GLUESTACK_COMMAND || 'npx gluestack-ui'} add progress`} language="bash" />

</TabItem>
<TabItem label="Manual">
### Step 1: Copy and paste the following code into your project.

```tsx
%%-- File: src/components/ui/progress/index.tsx --%%
```

### Step 2: Update the import paths to match your project setup.

</TabItem>
</Tabs>
```

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

### Install Select Dependencies

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/select/index.mdx

Manually install the necessary dependencies for the Select component, including @legendapp/motion.

```bash
npm i @legendapp/motion
```

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

### Button Installation

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/components/ui/button/docs/index.mdx

Instructions for installing the gluestack-ui Button component using CLI or manually.

```APIDOC
## Installation

<Tabs>
<TabItem label="CLI">
### Run the following command:
<CodeBlock code="npx gluestack-ui add button" language="bash" />
</TabItem>
<TabItem label="Manual">
### Step 1: Copy and paste the following code into your project.

```jsx
%%-- File: src/components/ui/button/index.tsx --%%
```

### Step 2: Update the import paths to match your project setup.
</TabItem>
</Tabs>
```

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

### Clean Installation with Bun

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/docs/guides/more/upgrade-to-v3/index.mdx

Perform a clean installation by removing node_modules and bun.lockb, then reinstalling dependencies with Bun.

```bash
# Remove node_modules and bun.lockb
rm -rf node_modules bun.lockb

# Reinstall dependencies
bun install
```

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

### Install @legendapp/list

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/kitchen-sink/components/ui/chat-ai/USAGE.md

Install the required @legendapp/list package before using the Chat AI component.

```bash
npm install @legendapp/list
```

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

### Clean Installation with Yarn

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/docs/guides/more/upgrade-to-v3/index.mdx

Perform a clean installation by removing node_modules and yarn.lock, then reinstalling dependencies with Yarn.

```bash
# Remove node_modules and yarn.lock
rm -rf node_modules yarn.lock

# Reinstall dependencies
yarn install
```

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

### Run Development Server

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/docs/guides/more/upgrade-to-v3/index.mdx

Start your development server to test components after migration.

```bash
npm run dev
```

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

### Navigate to Project Directory

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/blogs/build-a-simple-ui-with-gluestack-ui-and-expo/blog.mdx

Change into the newly created project directory to begin development.

```bash
cd [project_name]
```

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

### Manual Installation and Setup for Menu Component

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/menu/index.mdx

Manually install the Menu component by adding dependencies and copying the provided code. This setup includes optional integration with react-native-reanimated for animations.

```bash
npm i react-native-reanimated
```

```tsx
'use client';
import { createMenu } from '@gluestack-ui/core/menu/creator';
import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';

import { tva } from '@gluestack-ui/utils/nativewind-utils';
import { styled } from 'nativewind';
import React from 'react';
import { Pressable, ScrollView, Text, View } from 'react-native';
import Animated, { FadeOut, ZoomIn } from 'react-native-reanimated';

const AnimatedView = Animated.createAnimatedComponent(ScrollView);

const menuStyle = tva({
  base: 'rounded-md bg-popover text-popover-foreground border border-border p-1 shadow-hard-5 max-h-[300px] overflow-y-auto',
});

const menuItemStyle = tva({
  base: 'min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-accent data-[hover=true]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground data-[focus=true]:bg-accent data-[focus=true]:text-accent-foreground data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-ring data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent',
});

const menuBackdropStyle = tva({
  base: 'absolute top-0 bottom-0 left-0 right-0 web:cursor-default',
});

const menuSeparatorStyle = tva({
  base: 'bg-border h-px w-full',
});

const menuItemLabelStyle = tva({
  base: 'text-popover-foreground font-normal font-body',

  variants: {
    isTruncated: {
      true: 'web:truncate',
    },
    bold: {
      true: 'font-bold',
    },
    underline: {
      true: 'underline',
    },
    strikeThrough: {
      true: 'line-through',
    },
    sub: {
      true: 'text-xs',
    },
    italic: {
      true: 'italic',
    },
    highlight: {
      true: 'bg-yellow-500',
    },
  },
});

const BackdropPressable = React.forwardRef<
  React.ComponentRef<typeof Pressable>,
  React.ComponentPropsWithoutRef<typeof Pressable> &
  VariantProps<typeof menuBackdropStyle>
>(function BackdropPressable({ className, ...props }, ref) {
  return (
    <Pressable
      ref={ref}
      className={menuBackdropStyle({
        class: className,
      })}
      {...props}
    />
  );
});

type IMenuItemProps = VariantProps<typeof menuItemStyle> & {
  className?: string;
} & React.ComponentPropsWithoutRef<typeof Pressable>;

const Item = React.forwardRef<
  React.ComponentRef<typeof Pressable>,
  IMenuItemProps
>(function Item({ className, ...props }, ref) {
  return (
    <Pressable
      ref={ref}
      className={menuItemStyle({
        class: className,
      })}
      {...props}
    />
  );
});

const Separator = React.forwardRef<
  React.ComponentRef<typeof View>,
  React.ComponentPropsWithoutRef<typeof View> &
  VariantProps<typeof menuSeparatorStyle>
>(function Separator({ className, ...props }, ref) {
  return (
    <View
      ref={ref}
      className={menuSeparatorStyle({ class: className })}
      {...props}
    />
  );
});

const StyledAnimatedView = styled(AnimatedView, {
  className: 'style',
});
export const UIMenu = createMenu({
  Root: StyledAnimatedView,
  Item: Item,
  Label: Text,
  Backdrop: BackdropPressable,
  Separator: Separator,
});


type IMenuProps = React.ComponentProps<typeof UIMenu> &
  VariantProps<typeof menuStyle> & { className?: string };
type IMenuItemLabelProps = React.ComponentProps<typeof UIMenu.ItemLabel> &
  VariantProps<typeof menuItemLabelStyle> & { className?: string };

const Menu = React.forwardRef<React.ComponentRef<typeof UIMenu>, IMenuProps>(
  function Menu({ className, ...props }, ref) {
    return (
      <UIMenu
        entering={ZoomIn.duration(150).withInitialValues({
          transform: [{ scale: 0.9 }],
          opacity: 0,
        })}
        exiting={FadeOut.duration(150)}
        ref={ref}
        className={menuStyle({
          class: className,
        })}
        {...props}
      />
    );
  }
);

const MenuItem = UIMenu.Item;

```

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

### Start App Development Servers

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/docs/guides/more/contribution-guide/index.mdx

After linking packages, start the development servers for the kitchen-sink and website apps to test your changes.

```bash
cd apps/kitchen-sink && yarn dev
cd apps/website && yarn dev
```

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

### Manual Drawer Installation and Setup

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/drawer/index.mdx

Manually install the Drawer component by first installing react-native-reanimated for animations. Then, copy the provided TypeScript code into your project.

```bash
npm i react-native-reanimated
```

```typescript
'use client';
import { createModal as createDrawer } from '@gluestack-ui/core/modal/creator';
import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
import {
  tva,
  useStyleContext,
  withStyleContext,
} from '@gluestack-ui/utils/nativewind-utils';
import React from 'react';
import { Pressable, ScrollView, View } from 'react-native';
import Animated,
  {
    Easing,
    FadeIn,
    FadeOut,
    SlideInDown,
    SlideInLeft,
    SlideInRight,
    SlideInUp,
    SlideOutDown,
    SlideOutLeft,
    SlideOutRight,
    SlideOutUp,
  }
  from 'react-native-reanimated';

const SCOPE = 'MODAL';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
const AnimatedView = Animated.createAnimatedComponent(View);

const UIDrawer = createDrawer({
  Root: withStyleContext(View as any, SCOPE),
  Backdrop: AnimatedPressable,
  Content: AnimatedView,
  Body: ScrollView,
  CloseButton: Pressable,
  Footer: View,
  Header: View,
});

const drawerStyle = tva({
  base: 'w-full h-full web:pointer-events-none relative',
  variants: {
    size: {
      sm: '',
      md: '',
      lg: '',
      full: '',
    },
    anchor: {
      left: 'items-start',
      right: 'items-end',
      top: 'justify-start',
      bottom: 'justify-end',
    },
  },
});

const drawerBackdropStyle = tva({
  base: 'absolute left-0 top-0 right-0 bottom-0 bg-[#000]/50 web:cursor-default',
});

const drawerContentStyle = tva({
  base: 'bg-background shadow-hard-5 p-6 absolute',
  parentVariants: {
    size: {
      sm: '',
      md: '',
      lg: '',
      full: '',
    },
    anchor: {
      left: 'h-full border-r border-border/80',
      right: 'h-full border-l border-border/80',
      top: 'w-full border-b border-border/80 rounded-b-xl',
      bottom: 'w-full border-t border-border/80 rounded-t-xl',
    },
  },
  parentCompoundVariants: [
    {
      size: 'sm',
      anchor: 'left',
      class: 'sm:w-1/4 w-2/5',
    },
    {
      size: 'sm',
      anchor: 'right',
      class: 'sm:w-1/4 w-2/5',
    },
    {
      size: 'sm',
      anchor: 'top',
      class: 'h-1/4',
    },
    {
      size: 'sm',
      anchor: 'bottom',
      class: 'h-1/4',
    },
    {
      size: 'md',
      anchor: 'left',
      class: 'w-1/2',
    },
    {
      size: 'md',
      anchor: 'right',
      class: 'w-1/2',
    },
    {
      size: 'md',
      anchor: 'top',
      class: 'h-1/2',
    },
    {
      size: 'md',
      anchor: 'bottom',
      class: 'h-1/2',
    },
    {
      size: 'lg',
      anchor: 'left',
      class: 'w-3/4',
    },
    {
      size: 'lg',
      anchor: 'right',
      class: 'w-3/4',
    },
    {
      size: 'lg',
      anchor: 'top',
      class: 'h-3/4',
    },
    {
      size: 'lg',
      anchor: 'bottom',
      class: 'h-3/4',
    },
    {
      size: 'full',
      anchor: 'left',
      class: 'w-full',
    },
    {
      size: 'full',
      anchor: 'right',
      class: 'w-full',
    },
    {
      size: 'full',
      anchor: 'top',
      class: 'h-full',
    },
    {
      size: 'full',
      anchor: 'bottom',
      class: 'h-full',
    },
  ],
});

const drawerCloseButtonStyle = tva({
  base: 'z-10 rounded-sm p-2 data-[focus-visible=true]:bg-accent web:cursor-pointer web:outline-0 data-[hover=true]:bg-accent/50',
});

const drawerHeaderStyle = tva({
  base: 'justify-between items-center flex-row pb-4',
});

const drawerBodyStyle = tva({
  base: 'mt-4 mb-6 shrink-0',
});

const drawerFooterStyle = tva({
  base: 'flex-col-reverse gap-2 sm:flex-row sm:justify-end pt-4',
});

type IDrawerProps = React.ComponentProps<typeof UIDrawer> & 
  VariantProps<typeof drawerStyle> & { className?: string };

type IDrawerBackdropProps = React.ComponentProps<typeof UIDrawer.Backdrop> &
  VariantProps<typeof drawerBackdropStyle> & { className?: string };

type IDrawerContentProps = React.ComponentProps<typeof UIDrawer.Content> &
  VariantProps<typeof drawerContentStyle> & { className?: string };

type IDrawerHeaderProps = React.ComponentProps<typeof UIDrawer.Header> &
  VariantProps<typeof drawerHeaderStyle> & { className?: string };

type IDrawerBodyProps = React.ComponentProps<typeof UIDrawer.Body> &
  VariantProps<typeof drawerBodyStyle> & { className?: string };

type IDrawerFooterProps = React.ComponentProps<typeof UIDrawer.Footer> &
  VariantProps<typeof drawerFooterStyle> & { className?: string };

```

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

### Initialize a New Project with gluestack-ui v3

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/blogs/gluestack-v3-release/blog.mdx

Use these commands to start a new project with gluestack-ui v3 and add all available components.

```bash
npx gluestack-ui@latest init
npx gluestack-ui@latest add --all
```

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

### Basic HStack Usage Example

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/hstack/index.mdx

A simple example demonstrating how to render the HStack component. This serves as a minimal starting point for using the component.

```tsx
export default () => <HStack />;
```

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

### Gluestack-UI Applications Directory Structure

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/public/llms-full.txt

Lists the example applications and documentation sites within the `apps/` directory, including the main documentation website, a component showcase, and starter kits.

```tree
- `website/` - Documentation website (gluestack-ui.com)
- `kitchen-sink/` - Component showcase & testing
- `starter-kit-next/` - Next.js starter template
- `starter-kit-expo/` - Expo starter template

```

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

### Run Development Server

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/guides/more/upgrade-to-v3/index.mdx

Start your development server to test core functionality and rendering.

```bash
npm run dev
```

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

### Install gluestack-ui v5

Source: https://github.com/gluestack/gluestack-ui/blob/main/README.md

Run this command to initialize gluestack-ui v5 in your existing Expo or React Native project. Refer to the installation guide for detailed instructions.

```bash
npx gluestack-ui init
```

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

### Basic useBreakpointValue Example

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/hooks/use-break-point-value/index.mdx

A simple example demonstrating how to get a breakpoint-specific value using the useBreakpointValue hook. It sets a default 'column' and a 'row' value for small screens.

```ts
const flexDir = useBreakpointValue({
  default: 'column',
  sm: 'row',
});
```

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

### Install Gluestack-UI Dependencies with yarn (NativeWind v4)

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/home/getting-started/installation/index.mdx

Install the required Gluestack-UI and NativeWind v4 dependencies using yarn. This setup is for Next.js projects where NativeWind v5 is not yet supported.

```bash
yarn add @gluestack-ui/core@alpha @gluestack-ui/utils@alpha nativewind@^4.1.23 @gluestack/ui-next-adapter@alpha react-native-web@^0.20.0 react-native-safe-area-context@^5.6.1 react-aria@^3.45.0 react-stately@^3.39.0 tailwind-variants@^0.1.20 @legendapp/motion@^2.4.0 react-native-svg@^15.12.0 react-native-reanimated@~4.2.1 react-native-worklets@^0.7.1 dom-helpers@^5.2.1 @expo/html-elements@^0.12.5
```

```bash
yarn add --dev tailwindcss@^3.4.17 autoprefixer@^10.4.21 postcss@^8.5.4 @types/react-native@0.72.8 @react-native/assets-registry@^0.79.3
```

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

### Start Development Servers

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/docs/guides/more/contribution-guide/index.mdx

Initiate the development workflow by running the main mapper script and then starting the development server for your chosen application.

```bash
# In one terminal - watch for file changes and mapping
yarn dev

# In another terminal - start your app of choice
cd apps/website && yarn dev
# or
cd apps/kitchen-sink && yarn dev
```

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

### Install Gluestack-UI Dependencies with npm (NativeWind v4)

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/home/getting-started/installation/index.mdx

Install the required Gluestack-UI and NativeWind v4 dependencies using npm. This setup is for Next.js projects where NativeWind v5 is not yet supported.

```bash
npm i @gluestack-ui/core@alpha @gluestack-ui/utils@alpha nativewind@^4.1.23 @gluestack/ui-next-adapter@alpha react-native-web@^0.20.0 react-native-safe-area-context@^5.6.1 react-aria@^3.45.0 react-stately@^3.39.0 tailwind-variants@^0.1.20 @legendapp/motion@^2.4.0 react-native-svg@^15.12.0 react-native-reanimated@~4.2.1 react-native-worklets@^0.7.1 dom-helpers@^5.2.1 @expo/html-elements@^0.12.5
```

```bash
npm i --save-dev tailwindcss@^3.4.17 autoprefixer@^10.4.21 postcss@^8.5.4 @types/react-native@0.72.8 @react-native/assets-registry@^0.79.3
```

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

### Start Development Servers

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/guides/more/contribution-guide/index.mdx

Starts the development watch mode for packages and then launches the development server for a specific app.

```bash
# In one terminal - watch for file changes and mapping
yarn dev

# In another terminal - start your app of choice
cd apps/website && yarn dev
# or
cd apps/kitchen-sink && yarn dev
```

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

### Manual Popover Installation and Setup

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/popover/index.mdx

Manually install the Popover component by first adding necessary dependencies like react-native-reanimated. Then, integrate the provided creator function and component styles into your project.

```bash
npm i react-native-reanimated
```

```tsx
'use client';
import { createPopover } from '@gluestack-ui/core/popover/creator';
import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
import {
  tva,
  useStyleContext,
  withStyleContext,
} from '@gluestack-ui/utils/nativewind-utils';
import { styled } from 'nativewind';
import React from 'react';
import { Pressable, ScrollView, View } from 'react-native';
import Animated,
  {
    FadeIn,
    FadeOut
  }
 from 'react-native-reanimated';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
const AnimatedView = Animated.createAnimatedComponent(View);

const SCOPE = 'POPOVER';

const StyledAnimatedView = styled(AnimatedView, { className: 'style' });
const StyledAnimatedPressable = styled(AnimatedPressable, { className: 'style' });

const UIPopover = createPopover({
  Root: withStyleContext(StyledAnimatedView, SCOPE),
  Arrow: View,
  Backdrop: StyledAnimatedPressable,
  Body: ScrollView,
  CloseButton: Pressable,
  Content: View,
  Footer: View,
  Header: View
});


const popoverStyle = tva({
  base: 'group/popover w-full h-full justify-center items-center web:pointer-events-none',
});

const popoverArrowStyle = tva({
  base: 'bg-popover z-[1] border absolute overflow-hidden h-3.5 w-3.5 border-border dark:border-border/90',
  variants: {
    placement: {
      'top left':
        'data-[flip=false]:border-t-0 data-[flip=false]:border-l-0 data-[flip=true]:border-b-0 data-[flip=true]:border-r-0',
      'top':
        'data-[flip=false]:border-t-0 data-[flip=false]:border-l-0 data-[flip=true]:border-b-0 data-[flip=true]:border-r-0',
      'top right':
        'data-[flip=false]:border-t-0 data-[flip=false]:border-l-0 data-[flip=true]:border-b-0 data-[flip=true]:border-r-0',
      'bottom':
        'data-[flip=false]:border-b-0 data-[flip=false]:border-r-0 data-[flip=true]:border-t-0 data-[flip=true]:border-l-0',
      'bottom left':
        'data-[flip=false]:border-b-0 data-[flip=false]:border-r-0 data-[flip=true]:border-t-0 data-[flip=true]:border-l-0',
      'bottom right':
        'data-[flip=false]:border-b-0 data-[flip=false]:border-r-0 data-[flip=true]:border-t-0 data-[flip=true]:border-l-0',
      'left':
        'data-[flip=false]:border-l-0 data-[flip=false]:border-b-0 data-[flip=true]:border-r-0 data-[flip=true]:border-t-0',
      'left top':
        'data-[flip=false]:border-l-0 data-[flip=false]:border-b-0 data-[flip=true]:border-r-0 data-[flip=true]:border-t-0',
      'left bottom':
        'data-[flip=false]:border-l-0 data-[flip=false]:border-b-0 data-[flip=true]:border-r-0 data-[flip=true]:border-t-0',
      'right':
        'data-[flip=false]:border-r-0 data-[flip=false]:border-t-0 data-[flip=true]:border-l-0 data-[flip=true]:border-b-0',
      'right top':
        'data-[flip=false]:border-r-0 data-[flip=false]:border-t-0 data-[flip=true]:border-l-0 data-[flip=true]:border-b-0',
      'right bottom':
        'data-[flip=false]:border-r-0 data-[flip=false]:border-t-0 data-[flip=true]:border-l-0 data-[flip=true]:border-b-0',
    },
  },
});

const popoverBackdropStyle = tva({
  base: 'absolute left-0 top-0 right-0 bottom-0 web:cursor-default',
});

const popoverCloseButtonStyle = tva({
  base: 'group/popover-close-button z-[1] rounded-sm p-2 data-[focus-visible=true]:bg-accent web:outline-0 web:cursor-pointer data-[hover=true]:bg-accent/50',
});

const popoverContentStyle = tva({
  base: 'bg-popover text-popover-foreground rounded-lg overflow-hidden border border-border dark:border-border/10 shadow-md p-4 w-full max-w-xs web:pointer-events-auto',
});

const popoverHeaderStyle = tva({
  base: 'flex-row justify-between items-center',
});

const popoverBodyStyle = tva({
  base: '',
});

const popoverFooterStyle = tva({
  base: 'flex-row justify-between items-center',
});

type IPopoverProps = React.ComponentProps<typeof UIPopover> &
  VariantProps<typeof popoverStyle> & { className?: string };

type IPopoverArrowProps = React.ComponentProps<typeof UIPopover.Arrow> &
  VariantProps<typeof popoverArrowStyle> & { className?: string };

type IPopoverContentProps = React.ComponentProps<typeof UIPopover.Content> &
  VariantProps<typeof popoverContentStyle> & { className?: string };

type IPopoverHeaderProps = React.ComponentProps<typeof UIPopover.Header> &
  VariantProps<typeof popoverHeaderStyle> & { className?: string };

```

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

### Run the Expo App

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/blogs/build-a-simple-ui-with-gluestack-ui-and-expo/blog.mdx

This command starts the Expo development server to run the application. Ensure you have Expo CLI installed.

```bash
npm start

```

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

### Run Website App for Documentation Testing

Source: https://github.com/gluestack/gluestack-ui/blob/main/CONTRIBUTING.md

Navigate to the website app directory and run the development server to test documentation rendering. This is useful for verifying component examples and API documentation.

```bash
cd apps/website
yarn dev
```

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

### FAB Placement Example

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/fab/index.mdx

Demonstrates how to position a FAB using the 'placement' prop. This example shows a FAB with an add icon at the bottom center. Ensure all necessary components are imported.

```javascript
function Example() {
  return (
    <Box className='max-w-96 border rounded-lg border-border/70  py-4 bg-background mx-5 '>
      <VStack space='lg' className='mb-2 px-6 py-2'>
        <Checkbox size="sm">
          <CheckboxIndicator>
            <CheckboxIcon as={CheckIcon} />
          </CheckboxIndicator>
          <CheckboxLabel>
            <Text size='sm'>
              Prepare any feedback or updates.
            </Text>
          </CheckboxLabel>
        </Checkbox>
        <Checkbox size="sm">
          <CheckboxIndicator>
            <CheckboxIcon as={CheckIcon} />
          </CheckboxIndicator>
          <CheckboxLabel>
            <Text size='sm'>
              Review progress on goals and projects.
            </Text>
          </CheckboxLabel>
        </Checkbox>
        <Checkbox size="sm">
          <CheckboxIndicator>
            <CheckboxIcon as={CheckIcon} />
          </CheckboxIndicator>
          <CheckboxLabel>
            <Text size='sm'>
              Ask challenges and discuss.
            </Text>
          </CheckboxLabel>
        </Checkbox>
      </VStack>
      <Fab size='sm' placement='bottom center' >
        <FabIcon as={AddIcon} size='sm'/>
      </Fab>
    </Box>
  );
}
```

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

### Basic Text Component Usage

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/text/index.mdx

Render a basic Text component. This example shows the minimal setup required to display the component.

```typescript
export default () => <Text />;
```

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

### CLI Commands for UniWind Starter Kit

Source: https://github.com/gluestack/gluestack-ui/blob/main/docs/uniwind-support.md

Provides essential commands for syncing starter kit components, enabling watch mode for development, and linking local @gluestack-ui packages using yalc.

```bash
# Initial one-time sync (populates components/ui/ in the app)
yarn sync:starter-kit-expo-uniwind

# Watch mode during development (re-syncs on src/ changes)
yarn dev:starter-kit-expo-uniwind

# Link local @gluestack-ui packages via yalc (after yarn install in the app)
yarn link:apps-starter-kit-expo-uniwind
```

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

### Initialize a New Component

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/guides/more/contribution-guide/index.mdx

Scaffolds a new component, setting up the necessary files and structure for contribution. Use this command when starting a new UI component.

```bash
yarn create:component
```

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

### Basic Alert Usage

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/components/ui/alert/docs/index.mdx

A fundamental example demonstrating the structure of the Alert component with an icon and text. This serves as a starting point for integrating alerts.

```typescript
export default () => (
  <Alert>
    <AlertIcon />
    <AlertText />
  </Alert>
);
```

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

### Start Expo Development Server

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/blogs/build-a-simple-ui-with-gluestack-ui-and-expo/blog.mdx

Run this command to start the Expo development server, which allows you to preview your app on simulators or devices.

```bash
npm start
```

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

### Default Box Usage

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/box/index.mdx

A minimal example demonstrating how to render a default Box component. This serves as a starting point for integrating the Box into your application.

```tsx
export default () => <Box />;

```

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

### Initialize Project with npm

Source: https://github.com/gluestack/gluestack-ui/blob/main/packages/create-gluestack/README.md

Use this command to initialize a new project with gluestack-ui using npm.

```bash
npm create gluestack
```

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

### Install FAB Component via CLI

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/fab/index.mdx

Use the gluestack-ui CLI to add the FAB component to your project. This command automates the setup process.

```bash
npx gluestack-ui add fab
```

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

### Alert Dialog with Icons and CTA Example

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/components/ui/alert-dialog/docs/index.mdx

Shows how to implement an AlertDialog with icons and a call-to-action button. This pattern is effective for guiding user decisions.

```javascript
import React from "react";
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogCloseButton,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  Button,
  Icon,
  Text,
  VStack,
  useDisclosure,
} from "@gluestack-ui/themed";
import { InfoIcon } from "lucide-react-native";

const AlertDialogWithIconsCTA = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onPress={onOpen}>
        <Text>Open Alert Dialog</Text>
      </Button>
      <AlertDialog
        isOpen={isOpen}
        onClose={onClose}
      >
        <AlertDialogOverlay />
        <AlertDialogContent>
          <AlertDialogHeader>
            <VStack space="sm" alignItems="center" w="$full">
              <Icon as={InfoIcon} size="xl" color="$blue500" />
              <Text size="xl" fontWeight="$bold">
                Title of the Alert Dialog
              </Text>
            </VStack>
          </AlertDialogHeader>
          <AlertDialogBody>
            <Text size="sm">
              This is the body of the alert dialog. It contains the main content and information that the user needs to see.
            </Text>
          </AlertDialogBody>
          <AlertDialogFooter>
            <Button variant="outline" action="secondary" onPress={onClose}>
              <Text>Cancel</Text>
            </Button>
            <Button onPress={onClose}>
              <Text>Confirm</Text>
            </Button>
          </AlertDialogFooter>
          <AlertDialogCloseButton />
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
};

export default AlertDialogWithIconsCTA;

```

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

### Initialize Project with npx

Source: https://github.com/gluestack/gluestack-ui/blob/main/packages/create-gluestack/README.md

Use this command to initialize a new project with gluestack-ui using npx.

```bash
npx create-gluestack
```

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

### Input Component Installation

Source: https://github.com/gluestack/gluestack-ui/blob/main/src/components/ui/input/docs/index.mdx

Instructions for installing the gluestack-ui Input component using both CLI and manual methods.

```APIDOC
## Installation

<Tabs>
<TabItem label="CLI">
### Run the following command:
<CodeBlock code="npx gluestack-ui add input" language="bash" />

</TabItem>
<TabItem label="Manual">

### Step 1: Copy and paste the following code into your project.

```tsx
%%-- File: src/components/ui/input/index.tsx --%%
```

### Step 2: Update the import paths to match your project setup.

</TabItem>
</Tabs>
```

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

### HStack with Justify Content

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/hstack/index.mdx

Demonstrates controlling the horizontal distribution of items within an HStack using the 'justifyContent' prop. This example spreads items to the start and end.

```jsx
import { Box } from '@/components/ui/box';
import { HStack } from '@/components/ui/hstack';

export const MyComponent = () => (
  <HStack space='$4' justifyContent='$spaceBetween'>
    <Box
      w='$48'
      h='$24'
      bg='$blue300'
      borderColor='$blue500'
      borderRadius='$lg'
      borderWidth='$2'
    />
    <Box
      w='$48'
      h='$24'
      bg='$green300'
      borderColor='$green500'
      borderRadius='$lg'
      borderWidth='$2'
    />
    <Box
      w='$48'
      h='$24'
      bg='$red300'
      borderColor='$red500'
      borderRadius='$lg'
      borderWidth='$2'
    />
  </HStack>
);
```

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

### Input with Icons Example

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/public/llms-full.txt

Example showcasing the Input component with icons for enhanced visual representation and navigation.

```APIDOC
## Input with Icons

### Description

The Input with Icons is a variation of the Input component that displays icons next to input field. It's commonly used in apps for a more visual representation of options and easier navigation.

### Request Example

```jsx
function Example() {
  return (
    <Input>
      <InputSlot>
        <InputIcon as={SearchIcon}/>
      </InputSlot>
      <InputField
        placeholder="Search..."
      />
    </Input>
  );
}
```
```

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

### Basic Radio Group Usage

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/public/llms-full.txt

This example demonstrates how to set up a basic RadioGroup with Radio, RadioIndicator, RadioIcon, and RadioLabel components. Ensure correct import paths for your project setup.

```tsx
export default () => (
  <RadioGroup>
    <Radio>
      <RadioIndicator>
        <RadioIcon />
      </RadioIndicator>
      <RadioLabel />
    </Radio>
  </RadioGroup>
);
```

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

### Basic Actionsheet Structure

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/components/actionsheet/index.mdx

This snippet shows the fundamental structure of an Actionsheet component, including its backdrop, content, drag indicator, and an example item. It's a starting point for implementing the Actionsheet in your project.

```tsx
export default () => (
  <Actionsheet>
    <ActionsheetBackdrop />
    <ActionsheetContent>
      <ActionsheetDragIndicatorWrapper>
        <ActionsheetDragIndicator />
      </ActionsheetDragIndicatorWrapper>
      <ActionsheetItem>
        <ActionsheetItemText />
      </ActionsheetItem>
    </ActionsheetContent>
  </Actionsheet>
);
```

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

### Review Template Usage in CLI Source

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/guides/more/contribution-guide/index.mdx

Use grep to review how starter-kit templates are referenced within the gluestack-ui CLI source code. This helps identify areas that might be affected by template changes.

```bash
grep -r "templates" packages/gluestack-ui/src/
```

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

### gluestack-ui CLI Init Command Usage

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/home/getting-started/cli/index.mdx

This command initializes gluestack-ui and installs dependencies. It supports various options for path specification, monorepo setup, package manager selection, and styling engines.

```bash
Usage: npx gluestack-ui init [options] 
 
 initialize your gluestack-ui and install dependencies 
 
 Options: 
   --path <path>      Path to add GluestackUIProvider, defaults to components/ui in the current directory. 
   --monorepo         Run init in monorepo/library mode and interactively choose components path. 
   --use-npm          Use npm as the package manager (default) 
   --use-yarn         Use yarn as the package manager 
   --use-bun          Use bun as the package manager 
   --use-pnpm         Use pnpm as the package manager 
   --nativewind       Use NativeWind v4 (Tailwind CSS v3) 
   --nativewind-v5    Use NativeWind v5 (Tailwind CSS v4) 
   --uniwind          Use UniWind (Tailwind CSS v4, Expo-only) 
   -y, --yes          Answer yes to all prompts (non-interactive mode)
```

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

### Applications Directory Structure

Source: https://github.com/gluestack/gluestack-ui/blob/main/apps/website/app/ui/docs/guides/more/contribution-guide/index.mdx

Lists the example applications and documentation sites within the `apps/` directory.

```tree
- `website/` - Documentation website (gluestack-ui.com)
- `kitchen-sink/` - Component showcase & testing
- `starter-kit-next/` - Next.js starter template
- `starter-kit-expo/` - Expo starter template
```