open-index/open-npm huggingface dataset:
npm package: @gluestack-style/animation-plugin
Description: A gluestack-style plugin for animation properties, utilizing animation libraries.
Latest version: 0.1.12

# @gluestack-style/animation-plugin

## Installation

To use `@gluestack-style/animation-plugin`, all you need to do is install the
`@gluestack-style/animation-plugin` package:

```sh
$ yarn add @gluestack-style/animation-plugin

# or

$ npm i @gluestack-style/animation-plugin
```

## Usage

You can initialize the Animation plugin by creating a new instance of the AnimationResolver class and providing it as an argument to the createStyled function. The `AnimationResolver` takes an optional `styledUtils` object that maps the styled utils object. Here's an example:

```jsx
import { createStyled } from '@gluestack-style/react';
import { AnimationResolver } from '@gluestack-style/animation-plugin';

const styled = createStyled([
  new AnimationResolver({
    aliases: {
      ':initial': 'initial',
      ':animate': 'animate',
      ':exit': 'exit',
    },
  }),
]);
```

In this example, we are creating a new instance of the AnimationResolver class, passing an object with the 'aliases' property as an argument. The aliases object maps the aliases :initial, :animate, and :exit to their corresponding animation props.

## Example of creating a styled component:

Once the plugin is initialized, you can use the styled function to create styled components with animation props. Here's an example:

```jsx
const Box = styled(Motion.View, {
  ':initial': { opacity: 0 },
  ':animate': { opacity: 1 },
  ':exit': { opacity: 0 },
});
```

The final internal styled object that will be resolved is:

```jsx
styledObject = {
  'props': {
    initial: {
      opacity: 0,
    },
    animate: {
      opacity: 1,
    },
    exit: {
      opacity: 0,
    },
    }
  },
};
```

More guides on how to get started are available
[here](https://style.gluestack.io/).
npm package: @gluestack-style/animation-resolver
Description: A gluestack-style plugin for resolving animation properties, utilizing animation libraries.
Latest version: 1.0.4

# @gluestack-style/animation-resovler

## Installation

To use `@gluestack-style/animation-resovler`, all you need to do is install the
`@gluestack-style/animation-resovler` package:

```sh
$ yarn add @gluestack-style/animation-resovler

# or

$ npm i @gluestack-style/animation-resovler
```

## Usage

In this example, we are creating a new instance of the AnimationResolver class, passing an object with the 'aliases' property as an argument. The aliases object maps the aliases :initial, :animate, and :exit to their corresponding animation props.

## Example of creating a styled component:

Once the plugin is initialized, you can use the styled function to create styled components with animation props. Here's an example:

More guides on how to get started are available
[here](https://style.gluestack.io/).
npm package: @gluestack-style/babel-plugin-styled-resolver
Description: A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.
Latest version: 1.0.7

# @gluestack-style/babel-plugin-styled-resolver

## Installation

To use `@gluestack-style/babel-plugin-styled-resolver`, all you need to do is install the
`@gluestack-style/babel-plugin-styled-resolver` package:

```sh
$ yarn add @gluestack-style/babel-plugin-styled-resolver

# or

$ npm i @gluestack-style/babel-plugin-styled-resolver
```

## Usage

Add Babel plugin to your app `babel.config.js`.

```jsx
const path = require('path');
const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [gluestackStyleResolver],
  };
};
```

Just make sure your babel.config.js and gluestack-style.config.js/ts are in the same directory. We suggest you keep both of them at the root of your app codebase.

More guides on how to get started are available
[here](https://gluestack.io/style).
npm package: @gluestack-style/build-config
Description: A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.
Latest version: 0.0.1

# @gluestack-style/babel-plugin-styled-resolver

## Installation

To use `@gluestack-style/babel-plugin-styled-resolver`, all you need to do is install the
`@gluestack-style/babel-plugin-styled-resolver` package:

```sh
$ yarn add @gluestack-style/babel-plugin-styled-resolver

# or

$ npm i @gluestack-style/babel-plugin-styled-resolver
```

## Usage

Add Babel plugin to your app `babel.config.js`.

```jsx
const path = require('path');
const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [gluestackStyleResolver],
  };
};
```

Just make sure your babel.config.js and gluestack-style.config.js/ts are in the same directory. We suggest you keep both of them at the root of your app codebase.

More guides on how to get started are available
[here](https://gluestack.io/style).
npm package: @gluestack-style/extract-styles
Description: A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.
Latest version: 0.0.1

# @gluestack-style/babel-plugin-styled-resolver

## Installation

To use `@gluestack-style/babel-plugin-styled-resolver`, all you need to do is install the
`@gluestack-style/babel-plugin-styled-resolver` package:

```sh
$ yarn add @gluestack-style/babel-plugin-styled-resolver

# or

$ npm i @gluestack-style/babel-plugin-styled-resolver
```

## Usage

Add Babel plugin to your app `babel.config.js`.

```jsx
const path = require('path');
const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [gluestackStyleResolver],
  };
};
```

Just make sure your babel.config.js and gluestack-style.config.js/ts are in the same directory. We suggest you keep both of them at the root of your app codebase.

More guides on how to get started are available
[here](https://gluestack.io/style).
npm package: @gluestack-style/legend-motion-animation-driver
Description: A gluestack-style plugin for animation support using legendapp motion library
Latest version: 1.0.3

# @gluestack-style/legend-motion-animation-driver

## Installation

To use `@gluestack-style/legend-motion-animation-driver`, all you need to do is install the
`@gluestack-style/legend-motion-animation-driver` package:

```sh
$ yarn add @gluestack-style/legend-motion-animation-driver

# or

$ npm i @gluestack-style/legend-motion-animation-driver
```

## Usage

More guides on how to get started are available
[here](https://gluestack.io/style).
npm package: @gluestack-style/metro-plugin
Description: A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.
Latest version: 0.0.1

# @gluestack-style/babel-plugin-styled-resolver

## Installation

To use `@gluestack-style/babel-plugin-styled-resolver`, all you need to do is install the
`@gluestack-style/babel-plugin-styled-resolver` package:

```sh
$ yarn add @gluestack-style/babel-plugin-styled-resolver

# or

$ npm i @gluestack-style/babel-plugin-styled-resolver
```

## Usage

Add Babel plugin to your app `babel.config.js`.

```jsx
const path = require('path');
const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [gluestackStyleResolver],
  };
};
```

Just make sure your babel.config.js and gluestack-style.config.js/ts are in the same directory. We suggest you keep both of them at the root of your app codebase.

More guides on how to get started are available
[here](https://gluestack.io/style).
npm package: @gluestack-style/moti-animation-driver
Description: A gluestack-style driver for using moti animation with animation resolver plugin.
Latest version: 1.0.2

# @gluestack-style/moti-animation-driver

## Installation

To use `@gluestack-style/moti-animation-driver`, all you need to do is install the
`@gluestack-style/moti-animation-driver` package:

```sh
$ yarn add @gluestack-style/moti-animation-driver

# or

$ npm i @gluestack-style/moti-animation-driver
```

## Usage

More guides on how to get started are available
[here](https://gluestack.io/style).
npm package: @gluestack-style/react
Description: A universal & performant styling library for React Native, Next.js & React
Latest version: 1.0.57

<h3 align="center">
  <a href="https://github.com/gluestack/gluestack-style">
    <img src="https://raw.githubusercontent.com/gluestack/gluestack-style/main/img/gluestack-logo.svg" alt="gluestack logo">
  </a>
  <br>
  <br>
</h3>

## Introduction

A library that allows you to use CSS in your React and React Native projects with a modern, powerful and flexible way. `gluestack-style` allows you to write CSS using JavaScript, which enables you to take advantage of the power and expressiveness of both languages. With its simple and intuitive API, you can easily create dynamic styles, responsive design, and handle themes for your applications.

## Documentation

You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/style/docs/getting-started/installation website.

## Installation

To use `@gluestack-style/react`, all you need to do is install the
`@gluestack-style/react` package and its peer dependencies:

```sh
$ yarn add @gluestack-style/react react-native-web react-native-svg

# or

$ npm i @gluestack-style/react react-native-web react-native-svg
```

## Usage

To use the `@gluestack-style/react` in your project, follow these steps:

1. Wrap your application with the `StyledProvider` provided by
   **@gluestack-style/react**.

```jsx
import { StyledProvider } from '@gluestack-style/react';

// Do this at the root of your application
function App({ children }) {
  return <StyledProvider>{children}</StyledProvider>;
}
```

1. Now you can use `@gluestack-style/react` to style your components by using the `styled` function provided by the library. For example:

```jsx
import React from 'react';
import { styled } from '@gluestack-style/react';

const StyledButton = styled(
  Pressable,
  {
    bg: '$red500',
    p: '$3',
  },
  {}
);

const StyledButtonText = styled(Text, {}, {});

export const App = () => {
  return (
    <StyledProvider>
      <StyledButton>
        <StyledButtonText>Button</StyledButtonText>
      </StyledButton>
    </StyledProvider>
  );
};
```

More guides on how to get started are available
[here](https://gluestack.io/style).
npm package: @gluestack-ui/accordion
Description: A universal headless accordion component for React Native, Next.js & React
Latest version: 1.0.14

# `@gluestack-ui/accordion`

The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.

## Installation

To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.

```sh
npx install @gluestack-ui/accordion
```

## Usage

```jsx
// import the styles
import {
  Root,
  Item,
  Header,
  Trigger,
  Content,
  Icon,
  TitleText,
  ContentText,
} from '../components/core/accordion/styled-components';

// import the createAccordion function
import { createAccordion } from '@gluestack-ui/accordion';

// Understanding the API
const Accordion = createAccordion({
  Root,
  Item,
  Header,
  Trigger,
  Content,
  Icon,
  TitleText,
  ContentText,
});

// Using the Accordion component
export default () => (
  <Accordion>
    <AccordionItem value="a">
      <AccordionHeader>
        <AccordionTrigger>
          {({ isExpanded }: { isExpanded: boolean }) => {
            return (
              <>
                <AccordionTitleText>
                  How do I place an order?
                </AccordionTitleText>
                {isExpanded ? (
                  // ChevronUpIcon is imported from 'lucide-react-native'
                  <AccordionIcon as={ChevronUpIcon} />
                ) : (
                  // ChevronDownIcon is imported from 'lucide-react-native'
                  <AccordionIcon as={ChevronDownIcon} />
                )}
              </>
            );
          }}
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>
        <AccordionContentText>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        </AccordionContentText>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/).
npm package: @gluestack-ui/actionsheet
Description: A universal headless actionsheet component for React Native, Next.js & React
Latest version: 0.2.53

# `@gluestack-ui/actionsheet`

The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.

## Installation

To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.

```sh
npx install @gluestack-ui/actionsheet
```

## Usage

Default styling of all these components can be found in the components/core/actionsheet file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/ui-components/Actionsheet/styled-components/index.tsx) of the styled Actionsheet components.

```jsx
// import the styles
import {
  Root,
  Content,
  Item,
  ItemText,
  DragIndicator,
  IndicatorWrapper,
  Backdrop,
} from '../components/core/actionsheet/styled-components';

// import the createActionsheet function
import { createActionsheet } from '@gluestack-ui/actionsheet';

// Understanding the API
const Actionsheet = createActionsheet({
  Root,
  Content,
  Item,
  ItemText,
  DragIndicator,
  IndicatorWrapper,
  Backdrop,
});

// Using the actionsheet component
export default () => (
  <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
    <ActionsheetBackdrop />
    <ActionsheetContent>
      <ActionsheetDragIndicatorWrapper>
        <ActionsheetDragIndicator />
      </ActionsheetDragIndicatorWrapper>
      <ActionsheetItem onPress={handleClose}>
        <ActionsheetItemText>Community</ActionsheetItemText>
      </ActionsheetItem>
    </ActionsheetContent>
  </Actionsheet>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/).
npm package: @gluestack-ui/alert
Description: A universal headless Alert component for React Native, Next.js & React
Latest version: 0.1.16

# @gluestack-ui/alert

## Installation

To use `@gluestack-ui/alert`, all you need to do is install the
`@gluestack-ui/alert` package:

```sh
$ yarn add @gluestack-ui/alert

# or

$ npm i @gluestack-ui/alert
```

## Usage

Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user. Here's an example how to use this package to create one:

```jsx
import { createAlert } from '@gluestack-ui/alert';
import { Root, Text, Icon } from './styled-components';
export const Alert = createAlert({
  Root,
  Text,
  Icon,
});
```

## Customizing the Alert:

Default styling of all these components can be found in the components/core/alert file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Alert/index.tsx) of the styled `Alert` components.

```jsx
// import the styles
import { Root, Text, Icon } from '../components/core/alert/styled-components';

// Understanding the API
const Alert: any = Root;
AlertIcon = Icon;
AlertText = Text;

// Using the alert component
export default () => (
  <Alert>
    <AlertIcon />
    <AlertText />
  </Alert>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/feedback/alert)
npm package: @gluestack-ui/alert-dialog
Description: A universal headless alert-dialog component for React Native, Next.js & React
Latest version: 0.1.38

# `@gluestack-ui/alert-dialog`

AlertDialog effectively interrupts a user's flow and prompts them to take a specific action. It's commonly used for mandatory confirmations or call-to-actions.

## Installation

To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.

```sh
npx gluestack-ui@latest add alert-dialog
```

## Usage

Default styling of all these components can be found in the components/core/Default styling of all these components can be found in the components/core/alert-dialog file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/ui-components/AlertDialog/styled-components/index.tsx) of the styled AlertDialog components.

```jsx
// import the styles
import {
  Root,
  Content,
  CloseButton,
  Header,
  Footer,
  Body,
  Backdrop,
} from '../components/core/alert-dialog/styled-components';

// import the createAlertDialog function
import { createAlertDialog } from '@gluestack-ui/alert-dialog';

// Understanding the API
const AlertDialog = createAlertDialog({
  Root,
  Content,
  CloseButton,
  Header,
  Footer,
  Body,
  Backdrop,
});

// Using the alert-dialog component
export default () => (
  <AlertDialog>
    <AlertDialogBackdrop />
    <AlertDialogContent>
      <AlertDialogHeader>
        <Heading>Confirm your request</Heading>
        <AlertDialogCloseButton>
          <CloseIcon />
        </AlertDialogCloseButton>
      </AlertDialogHeader>
      <AlertDialogBody>
        <Text>AlertDialog Body</Text>
      </AlertDialogBody>
      <AlertDialogFooter>
        <Button>
          <ButtonText></ButtonText>
        </Button>
        <Button>
          <ButtonText></ButtonText>
        </Button>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/).
npm package: @gluestack-ui/avatar
Description: A universal headless avatar component for React Native, Next.js & React
Latest version: 0.1.18

# @gluestack-ui/avatar

## Installation

To use `@gluestack-ui/avatar`, all you need to do is install the
`@gluestack-ui/avatar` package:

```sh
$ yarn add @gluestack-ui/avatar

# or

$ npm i @gluestack-ui/avatar
```

## Usage

The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging. Here's an example how to use this package to create one:

```jsx
import {
  Root,
  Badge,
  Group,
  Image,
  FallbackText,
} from '../components/core/avatar/styled-components';
import { createAvatar } from '@gluestack-ui/avatar';
const Avatar = createAvatar({
  Root,
  Badge,
  Group,
  Image,
  FallbackText,
});
```

## Customizing the avatar:

Default styling of all these components can be found in the components/core/avatar file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Avatar/index.tsx) of the styled `avatar` components.

```jsx
// import the styles
import {
  Root,
  Badge,
  Group,
  Image,
  FallbackText,
} from '../components/core/avatar/styled-components';

// import the createAvatar function
import { createAvatar } from '@gluestack-ui/avatar';

// Understanding the API
const Avatar = createAvatar({
  Root,
  Badge,
  Group,
  Image,
  FallbackText,
});

// Using the avatar component
export default () => (
  <AvatarGroup>
    <Avatar>
      <AvatarFallbackText />
      <AvatarBadge />
    </Avatar>
  </AvatarGroup>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/media-and-icons/avatar).
npm package: @gluestack-ui/button
Description: A universal headless Button component for React Native, Next.js & React
Latest version: 1.0.14

# @gluestack-ui/button

## Installation

To use `@gluestack-ui/button`, all you need to do is install the
`@gluestack-ui/button` package:

```sh
$ yarn add @gluestack-ui/button

# or

$ npm i @gluestack-ui/button
```

## Usage

A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website. Here's an example how to use this package to create one:

```jsx
import { createButton } from '@gluestack-ui/button';
import {
  Root,
  Text,
  Group,
  GroupHSpacer,
  GroupVSpacer,
  Spinner,
  Icon,
} from './styled-components';

export const Button = createButton({
  Root,
  Text,
  Group,
  GroupHSpacer,
  GroupVSpacer,
  Spinner,
  Icon,
});
```

## Customizing the Button:

Default styling of all these components can be found in the components/core/button file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Button/index.tsx) of the styled `Button` components.

```jsx
// import the styles
import {
  Root,
  Text,
  Group,
  GroupHSpacer,
  GroupVSpacer,
  Spinner,
} from '../components/core/button/styled-components';

// import the createButton function
import { createButton } from '@gluestack-ui/button';

// Understanding the API
const Button = createButton({
  Root,
  Text,
  Group,
  GroupHSpacer,
  GroupVSpacer,
  Spinner,
});

// Using the button component
export default () => (
  <ButtonGroup>
    <Button>
      <ButtonText />
      <ButtonSpinner />
      <ButtonIcon />
    </Button>
  </ButtonGroup>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/button).
npm package: @gluestack-ui/checkbox
Description: A universal headless Checkbox component for React Native, Next.js & React
Latest version: 0.1.39

# @gluestack-ui/checkbox

## Installation

To use `@gluestack-ui/checkbox`, all you need to do is install the
`@gluestack-ui/checkbox` package:

```sh
$ yarn add @gluestack-ui/checkbox

# or

$ npm i @gluestack-ui/checkbox
```

## Usage

Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list. Here's an example how to use this package to create one:

```jsx
import { Root, Indicator, Icon, Label, Group } from './styled-components';
import { createCheckbox } from '@gluestack-ui/checkbox';

export const Checkbox = createCheckbox({
  Root,
  Indicator,
  Icon,
  Label,
  Group,
});
```

## Customizing the checkbox:

Default styling of all these components can be found in the components/core/checkbox file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Checkbox/index.tsx) of the styled `Checkbox` components.

```jsx
// import the styles
import {
  Root,
  Indicator,
  Icon,
  Label,
  Group,
} from '../components/core/checkbox/styled-components';

// import the createCheckbox function
import { createCheckbox } from '@gluestack-ui/checkbox';

// Understanding the API
const Checkbox = createCheckbox({
  Root,
  Indicator,
  Icon,
  Label,
  Group,
});

// Using the checkbox component
export default () => (
  <CheckboxGroup>
    <Checkbox>
      <CheckboxIndicator>
        <CheckboxIcon />
      </CheckboxIndicator>
      <CheckboxLabel />
    </Checkbox>
  </CheckboxGroup>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/checkbox).
npm package: @gluestack-ui/divider
Description: A universal headless Divider component for React Native, Next.js & React
Latest version: 0.1.10

# @gluestack-ui/divider

## Installation

To use `@gluestack-ui/divider`, all you need to do is install the
`@gluestack-ui/divider` package:

```sh
$ yarn add @gluestack-ui/divider

# or

$ npm i @gluestack-ui/divider
```

## Usage

Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface. Here's an example how to use this package to create one:

```jsx
import Root from './styled-components/Root';
import { createDivider } from '@gluestack-ui/divider';
export const Divider = createDivider({ Root });
```

## Customizing the Divider:

Default styling of all these components can be found in the components/core/divider file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Divider/index.tsx) of the styled `Divider` components.

```jsx
// import the styles
import { Root } from '../components/core/divider/styled-components';

// import the createDivider function
import { createDivider } from '@gluestack-ui/divider';

// Understanding the API
const Divider = createDivider({
  Root,
});

// Using the Divider component
export default () => <Divider />;
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/data-display/divider).
npm package: @gluestack-ui/fab
Description: A universal headless fab component for React Native, Next.js & React
Latest version: 0.1.28

# `@gluestack-ui/fab`

The Floating Action Button (FAB) is a dynamic button that stays visible and provides access to a primary action throughout the user's journey in the application. It is a powerful UI element that adds a touch of elegance and convenience to the user experience.

## Installation

To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.

```sh
npm install @gluestack-ui/fab
```

## Usage

Default styling of all these components can be found in the components/core/fab file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/ui-components/Fab/styled-components/index.tsx) of the styled Fab components.

```jsx
// import the styles
import { Root, Label } from '../components/core/fab/styled-components';
// import the createFab function
import { createFab } from '@gluestack-ui/fab';
// Understanding the API
const Fab = createFab({
  Root,
  Label,
});
// Using the fab component
export default () => (
  <Fab>
    <FabLabel />
  </Fab>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/).
npm package: @gluestack-ui/form-control
Description: A universal headless form-control component for React Native, Next.js & React
Latest version: 0.1.19

# @gluestack-ui/form-control

## Installation

To use `@gluestack-ui/form-control`, all you need to do is install the
`@gluestack-ui/form-control` package:

```sh
$ yarn add @gluestack-ui/form-control

# or

$ npm i @gluestack-ui/form-control
```

## Usage

By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required. Here's an example how to use this package to create one:

```jsx
import {
  Root,
  Error,
  ErrorText,
  ErrorIcon,
  Label,
  LabelText,
  LabelAstrick,
  Helper,
  HelperText,
} from '../components/core/form-control/styled-components';
import { createFormControl } from '@gluestack-ui/form-control';
const FormControl = createFormControl({
  Root,
  Error,
  ErrorText,
  ErrorIcon,
  Label,
  LabelText,
  LabelAstrick,
  Helper,
  HelperText,
});
```

## Customizing the form-control:

Default styling of all these components can be found in the components/core/form-control file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/FormControl/index.tsx) of the styled `form-control` components.

```jsx
// import the styles
import {
  Root,
  Error,
  ErrorText,
  ErrorIcon,
  Label,
  LabelText,
  LabelAstrick,
  Helper,
  HelperText,
} from '../components/core/form-control/styled-components';

// import the createFormControl function
import { createFormControl } from '@gluestack-ui/form-control';

// Understanding the API
const FormControl = createFormControl({
  Root,
  Error,
  ErrorText,
  ErrorIcon,
  Label,
  LabelText,
  LabelAstrick,
  Helper,
  HelperText,
});

// Using the FormControl component
export default () => (
  <FormControl>
    <FormControlLabel>
      <FormControlLabelText></FormControlLabelText>
    </FormControlLabel>
    <Input />
    <FormControlHelper>
      <FormControlHelperText></FormControlHelperText>
    </FormControlHelper>
    <FormControlError>
      <FormControlErrorIcon>
        <AlerCircleIcon />
      </FormControlErrorIcon>
      <FormControlErrorText></FormControlErrorText>
    </FormControlError>
  </FormControl>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/form-control).
npm package: @gluestack-ui/grid
Description: A universal headless Grid component for React Native, Next.js & React
Latest version: 0.0.1

# @gluestack-ui/grid

## Installation

To use `@gluestack-ui/grid`, all you need to do is install the
`@gluestack-ui/grid` package:

```sh
$ yarn add @gluestack-ui/grid

# or

$ npm i @gluestack-ui/grid
```

## Usage

When you need to Grid-align content, the Grid component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.

```jsx
import { createGrid } from '@gluestack-ui/grid';
import { Parent, Root, Item } from './styled-components';

export const Gridn = createGrid({
  Parent,
  Root,
  Item,
});
```

## Customizing the Grid:

Default styling of all these components can be found in the components/core/grid file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/grid/index.tsx) of the styled `grid` components.

```jsx
// import the styles
import { Parent, Root, Item } from '../components/core/grid/styled-components';

// import the createGrid function
import { createGrid } from '@gluestack-ui/grid';

// Understanding the API
const Grid = createGrid({
  Parent,
  Root,
  Item,
});

// Using the GRID component
export default () => (
  <Grid>
    <GridItem></GridItem>
  </Grid>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/layout/grid).
npm package: @gluestack-ui/hooks
Description: Provides hooks used in gluestack-ui
Latest version: 0.1.13

# @gluestack-ui/hooks

## Installation

To use `@gluestack-ui/hooks`, all you need to do is install the
`@gluestack-ui/hooks` package:

```sh
$ yarn add @gluestack-ui/hooks

# or

$ npm i @gluestack-ui/hooks
```

## Usage

This package provides hooks that are used in gluestack-ui

More information about implementation of hooks is available
[here](https://github.com/gluestack/gluestack-ui/blob/development/packages/hooks/src/index.ts).
npm package: @gluestack-ui/hstack
Description: A universal headless hstack component for React Native, Next.js & React
Latest version: 0.1.17

# @gluestack-style/hstack

## Installation

To use `@gluestack-ui/hstack`, all you need to do is install the
`@gluestack-ui/hstack` package:

```sh
$ yarn add @gluestack-ui/hstack

# or

$ npm i @gluestack-ui/hstack
```

## Usage

HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack. Here's an example how to use this package to create one:

```jsx
import { Root, Spacer } from '../components/core/hstack/styled-components';
import { createHStack } from '@gluestack-ui/hstack';
const HStack = createHStack({
  Root,
  Spacer,
});
```

## Customizing the hstack:

Default styling of all these components can be found in the components/core/hstack file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/HStack/index.tsx) of the styled `hstack` components.

```jsx
// import the styles
import { Root, Spacer } from '../components/core/hstack/styled-components';

// import the createHStack function
import { createHStack } from '@gluestack-ui/hstack';

// Understanding the API
const HStack = createHStack({
  Root,
  Spacer,
});

// Using the HStack component
export default () => <HStack />;
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/layout/hstack).
npm package: @gluestack-ui/icon
Description: A universal headless icon component for React Native, Next.js & React
Latest version: 0.1.27

# @gluestack-ui/icon

## Installation

To use `@gluestack-ui/icon`, all you need to do is install the
`@gluestack-ui/icon` package:

```sh
$ yarn add @gluestack-ui/icon

# or

$ npm i @gluestack-ui/icon
```

## Usage

Whether you're building a simple form or a complex data collection system, the icon component offers a user-friendly way for users to select multiple options from a list. Here's an example how to use this package to create one:

```jsx
import { Root } from '../components/core/icon/styled-components';
import { createIcon } from '@gluestack-ui/icon';
const Icon = createIcon({
  Root,
});
```

## Customizing the icon:

Default styling of all these components can be found in the components/core/icon file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Icons/index.tsx) of the styled `icon` components.

```jsx
// import the styles
import { Root } from '../components/core/icon/styled-components';

// import the createIcon function
import { createIcon } from '@gluestack-ui/icon';

// Understanding the API
const Icon = createIcon({
  Root,
});

// Using the icon component
export default () => <Icon />;
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/media-and-icons/icon).
npm package: @gluestack-ui/image
Description: A universal headless Button component for React Native, Next.js & React
Latest version: 0.1.17

# @gluestack-ui/image

## Installation

To use `@gluestack-ui/image`, all you need to do is install the
`@gluestack-ui/image` package:

```sh
$ yarn add @gluestack-ui/image

# or

$ npm i @gluestack-ui/image
```

## Usage

A image component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website. Here's an example how to use this package to create one:

```jsx
import { createImage } from '@gluestack-ui/image';
import { Root } from './styled-components';

export const Image = createImage({
  Root,
});
```

## Customizing the Image:

Default styling of all these components can be found in the components/core/image file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Image/index.tsx) of the styled `Image` components.

```jsx
// import the styles
import { Root } from '../components/core/image/styled-components';

// import the createImage function
import { createImage } from '@gluestack-ui/image';

// Understanding the API
const Image = createImage({
  Root,
});

// Using the image component
export default () => <Image />;
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/image).
npm package: @gluestack-ui/input
Description: A universal headless input component for React Native, Next.js & React
Latest version: 0.1.38

# @gluestack-style/input

## Installation

To use `@gluestack-ui/input`, all you need to do is install the
`@gluestack-ui/input` package:

```sh
$ yarn add @gluestack-ui/input

# or

$ npm i @gluestack-ui/input
```

## Usage

The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered. Here's an example how to use this package to create one:

```jsx
import { Root, Input } from '../components/core/input/styled-components';
import { createInput } from '@gluestack-ui/input';
const InputField = createInput({
  Root,
  Input,
});
```

## Customizing the input:

Default styling of all these components can be found in the components/core/input file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Input/index.tsx) of the styled `input` components.

```jsx
// import the styles
import { Root, Input } from '../components/core/input/styled-components';

// import the createInput function
import { createInput } from '@gluestack-ui/input';

//import any icon
import { searchIcon } from '@gluestack/icons';

// Understanding the API
const InputField = createInput({
  Root,
  Input,
});

// Using the input component
export default () => (
  <Input>
    <InputSlot pl="$3">
      <InputIcon as={SearchIcon} />
    </InputSlot>
    <InputInput placeholder="your text goes here..." />
  </Input>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/input).
npm package: @gluestack-ui/linear-gradient
Description: A universal headless LinearGradient component for React Native, Next.js & React
Latest version: 0.1.3

# @gluestack-ui/linear-gradient

## Installation

To use `@gluestack-ui/linear-gradient`, all you need to do is install the
`@gluestack-ui/linear-gradient` package:

```sh
$ yarn add @gluestack-ui/linear-gradient

# or

$ npm i @gluestack-ui/linear-gradient
```

## Usage

A linear-gradient component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website. Here's an example how to use this package to create one:

```jsx
import { createLinearGradient } from '@gluestack-ui/linear-gradient';
import {
  Root,
  Text,
  Group,
  GroupHSpacer,
  GroupVSpacer,
  Spinner,
  Icon,
} from './styled-components';

export const LinearGradient = createLinearGradient({
  Root,
  Text,
  Group,
  GroupHSpacer,
  GroupVSpacer,
  Spinner,
  Icon,
});
```

## Customizing the LinearGradient:

Default styling of all these components can be found in the components/core/linear-gradient file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/LinearGradient/index.tsx) of the styled `LinearGradient` components.

```jsx
// import the styles
import {
  Root,
  Text,
  Group,
  GroupHSpacer,
  GroupVSpacer,
  Spinner,
} from '../components/core/linear-gradient/styled-components';

// import the createLinearGradient function
import { createLinearGradient } from '@gluestack-ui/linear-gradient';

// Understanding the API
const LinearGradient = createLinearGradient({
  Root,
  Text,
  Group,
  GroupHSpacer,
  GroupVSpacer,
  Spinner,
});

// Using the linear-gradient component
export default () => (
  <LinearGradientGroup>
    <LinearGradient>
      <LinearGradientText />
      <LinearGradientSpinner />
      <LinearGradientIcon />
    </LinearGradient>
  </LinearGradientGroup>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/linear-gradient).
npm package: @gluestack-ui/link
Description: A universal headless Link component for React Native, Next.js & React
Latest version: 0.1.29

# @gluestack-ui/link

## Installation

To use `@gluestack-ui/link`, all you need to do is install the
`@gluestack-ui/link` package:

```sh
$ yarn add @gluestack-ui/link

# or

$ npm i @gluestack-ui/link
```

## Usage

With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience. Here's an example how to use this package to create one:

```jsx
import { Root, Text } from './styled-components';
import { createLink } from '@gluestack-ui/link';

export const Link = createLink({
  Root,
  Text,
});
```

## Customizing the Link:

Default styling of all these components can be found in the components/core/link file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Link/index.tsx) of the styled `Link` components.

```jsx
// import the styles
import { Root } from '../components/core/link/styled-components';

// import the createLink function
import { createLink } from '@gluestack-ui/link';

// Understanding the API
const Link = createLink({
  Root,
});

// Using the link component
export default () => (
  <Link href="">
    <LinkText />
  </Link>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/link).
npm package: @gluestack-ui/menu
Description: A universal headless menu component for React Native, Next.js & React
Latest version: 0.2.43

# `@gluestack-ui/menu`

The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.

## Installation

To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.

```sh
npx install @gluestack-ui/menu
```

## Usage

Default styling of all these components can be found in the components/core/menu file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/ui-components/Menu/styled-components/index.tsx) of the styled Menu components.

```jsx
// import the styles
import {
  Root,
  Item,
  Label,
  Backdrop,
} from '../components/core/menu/styled-components';

// import the createMenu function
import { createMenu } from '@gluestack-ui/menu';

// Understanding the API
const Menu = createMenu({
  Root,
  Item,
  Label,
  Backdrop,
});

// Using the menu component
export default () => (
  <Menu>
    <MenuItem>
      <MenuItemLabel />
    </MenuItem>
  </Menu>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/).
npm package: @gluestack-ui/modal
Description: A universal headless modal component for React Native, Next.js & React
Latest version: 0.1.41

# `@gluestack-ui/modal`

A Modal is a window on top of the primary content to draw the user's attention to important information or actions. It provides a focused and interruptive way to interact with the application.

## Installation

To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.

```sh
npx gluestack-ui@latest add modal
```

## Usage

Default styling of all these components can be found in the components/core/modal file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/ui-components/Modal/styled-components/index.tsx) of the styled Modal components.

```jsx
// import the styles
import {
  Root,
  Content,
  CloseButton,
  Header,
  Footer,
  Body,
  Backdrop,
} from '../components/core/modal/styled-components';
import { styled } from '../components/styled';

// import the createModal function
import { createModal } from '@gluestack-ui/modal';

// Understanding the API
const Modal = createModal({
  Root,
  Content,
  CloseButton,
  Header,
  Footer,
  Body,
  Backdrop,
  AnimatePresence: styled.Component, // Can be AnimatePresence from the library you are using
});

// Using the modal component
export default () => (
  <Modal>
    <ModalBackdrop />
    <ModalContent>
      <ModalHeader>
        <Heading>Confirm your request</Heading>
        <ModalCloseButton>
          <CloseIcon />
        </ModalCloseButton>
      </ModalHeader>
      <ModalBody>
        <Text>Modal Body</Text>
      </ModalBody>
      <ModalFooter>
        <Button>
          <ButtonText></ButtonText>
        </Button>
        <Button>
          <ButtonText></ButtonText>
        </Button>
      </ModalFooter>
    </ModalContent>
  </Modal>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/).
npm package: @gluestack-ui/nativewind-utils
Description: A utility function package for @gluestack-ui/nativewind
Latest version: 1.0.28

# `@gluestack-ui/nativewind-utils`

A utility function package for @gluestack-ui/nativewind

## Installation

To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.

```sh
npx install @gluestack-ui/nativewind-utils
```

## Usage

```jsx
// import the tva
import { tva } from '@gluestack-ui/nativewind-utils/tva';

// Understanding the API
const buttonStyle = tva({
  base: 'bg-primary-500',
  variants: {
    size: {
      lg: 'w-6 h-6',
      md: 'w-5 h-5',
      sm: 'w-4 h-4',
    },
  },
});

const buttonText = tva({
  base: 'text-white',
  parentVariants: {
    size: {
      lg: 'text-lg',
      md: 'text-base',
      sm: 'text-sm',
    },
  },
});

// Using the in component
export default ({ size, ...props }) => (
  <Pressable className={buttonStyle({ size })} {...props}>
    <Text className={buttonText({ parentVariants: { size } })}>
      Hello World!
    </Text>
  </Pressable>
);
```
npm package: @gluestack-ui/overlay
Description: A universal headless overlay component for React Native, Next.js & React
Latest version: 0.1.22

# @gluestack-ui/overlay

## Installation

To use `@gluestack-ui/overlay`, all you need to do is install the
`@gluestack-ui/overlay` package:

```sh
$ yarn add @gluestack-ui/overlay

# or

$ npm i @gluestack-ui/overlay
```

More information about implementation of overlay is available
[here](https://github.com/gluestack/gluestack-ui/blob/development/packages/overlay/src/index.tsx).
npm package: @gluestack-ui/pin-input
Description: A universal headless pin-input component for React Native, Next.js & React
Latest version: 0.0.14

# @gluestack-style/pin-input

## Installation

To use `@gluestack-ui/pin-input`, all you need to do is install the
`@gluestack-ui/pin-input` package:

```sh
$ yarn add @gluestack-ui/pin-input

# or

$ npm i @gluestack-ui/pin-input
```

## Usage

The PinInput component is specifically designed for capturing One-Time Passwords (OTPs) in a user-friendly and secure manner. It's perfect for implementing OTP verification in your application, ensuring a smooth user experience. Here's an example of how to use this package to create an OTP input field:

```jsx
import { View, TextInput } from 'react-native';
import { createPinInput } from '@gluestack-ui/pin-input';
const PinInputRoot = createPinInput({
  Root: View,
  Input: TextInput,
});
```

## Customizing the pin-input:

Default styling of all these components can be found in the components/core/pin-input file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/PinInput/index.tsx) of the styled `pin-input` components.

```jsx
import { View, TextInput } from 'react-native';

// import the createPinInput function
import { createPinInput } from '@gluestack-ui/pin-input';

// Understanding the API
const PinInputField = createPinInput({
  Root: View,
  Input: TextInput,
});

// Using the pin-input component
export default () => (
  <PinInputField>
    <PinInputFieldInput />
  </PinInputField>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/pin-input).