open-index/open-npm huggingface dataset:
npm package: @gluestack-ui/popover
Description: A universal headless Popover component for React Native, Next.js & React
Latest version: 0.1.49

# @gluestack-ui/popover

## Installation

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

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

# or

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

## Usage

Popovers often provide contextual information or quick access to related actions without requiring the user to navigate to a different page or view. Here's an example how to use this package to create one:

```jsx
import { createPopover } from '@gluestack-ui/popover';
import { styled } from '../styled';
import {
  Root,
  Arrow,
  Content,
  Header,
  Footer,
  Body,
  Backdrop,
  CloseButton,
} from './styled-components';

export const Popover = createPopover({
  Root,
  Arrow,
  Content,
  Header,
  Footer,
  Body,
  Backdrop,
  CloseButton,
  //@ts-ignore
  AnimatePresence: styled.Component,
});
```

## Customizing the Popover:

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

```jsx
// import the styles

import {
  Root,
  Arrow,
  Content,
  Header,
  Footer,
  Body,
  Backdrop,
  CloseButton,
} from '../components/core/popover/styled-components';

// import the createPopover function
import { createPopover } from '@gluestack-ui/popover';

// Understanding the API
export const Popover = createPopover({
  Root,
  Arrow,
  Content,
  Header,
  Footer,
  Body,
  Backdrop,
  CloseButton,
});

// Using the popover component
export default () => (
  <Popover>
    <PopoverBackdrop />
    <PopoverContent>
      <PopoverHeader>
        <PopoverCloseButton />
      </PopoverHeader>
      <PopoverBody />
      <PopoverFooter />
    </PopoverContent>
  </Popover>
);
```

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

# @gluestack-ui/pressable

## Installation

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

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

# or

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

## Usage

By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs. Here's an example how to use this package to create one:

```jsx
import Root from './Root';
import { createPressable } from '@gluestack-ui/pressable';
export const Pressable = createPressable({ Root });
```

## Customizing the Pressable:

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

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

// mapping the Pressable to root component
const Pressable = Root;

// using the Pressable component
export default () => (
  <Pressable>
    <Text />
  </Pressable>
);
```

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

# `@gluestack-ui/progress`

The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.

## 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 progress
```

## Usage

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

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

// import the createProgress function
import { createProgress } from '@gluestack-ui/progress';

// Understanding the API
const Progress = createProgress({
  Root,
  FilledTrack,
});

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

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

# @gluestack-ui/provider

## Installation

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

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

# or

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

#### Usage

Provider component that can be used to configure the library. It consists of StyledProvider, OverlayProvider and ToastProvider internally.

Default theme can be found in the `gluestack-ui.config` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/gluestack-ui.config.ts).

```jsx
// import the createProvider function
import { createProvider } from '@gluestack-ui/provider';
import { config } from '../gluestack.config';
import { StyledProvider } from '@gluestack-style/react';

export const Provider = createProvider({
  StyledProvider,
});

// Using the Provider component
export default () => (
  <Provider config={config.theme}>
    <Text />
  </Provider>
);
```

You can also create GluestackUIProvider component which can be used to wrap your entire application. This will make sure that all the components are wrapped with the provider with styling and other providers like OverlayProvider and ToastProvider.

```jsx
// import the createProvider function
import { StyledProvider } from '@gluestack-style/react';
import { OverlayProvider } from '@gluestack-ui/overlay';
import { ToastProvider } from '@gluestack-ui/toast';

const GluestackUIStyledProvider = createProvider({ StyledProvider });

const GluestackUIProvider = ({ children, ...props }: any) => {
  return (
    <GluestackUIStyledProvider {...props}>
      <OverlayProvider>
        <ToastProvider>{children}</ToastProvider>
      </OverlayProvider>
    </GluestackUIStyledProvider>
  );
};
```
npm package: @gluestack-ui/radio
Description: A universal headless Radio component for React Native, Next.js & React
Latest version: 0.1.40

# @gluestack-ui/radio

## Installation

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

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

# or

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

## Usage

The Radio component presents users with predefined choices and enables them to select only one option. It is commonly used for providing a single-choice selection in forms or surveys. Here's an example how to use this package to create one:

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

export const Radio = createRadio({
  Root,
  Group,
  Icon,
  Indicator,
  Label,
});
```

## Customizing the Radio:

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

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

// import the createRadio function
import { createRadio } from '@gluestack-ui/radio';

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

// Using the radio component
export default () => (
  <RadioGroup>
    <Radio>
      <RadioIndicator>
        <RadioIcon as={CircleIcon} />
      </RadioIndicator>
      <RadioLabel />
    </Radio>
  </RadioGroup>
);
```

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

# @gluestack-ui/slider

## Installation

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

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

# or

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

## Usage

The Slider component enables an intuitive selection of values within a designated range. Users can easily adjust their selection by sliding a visual indicator along the track. Here's an example how to use this package to create one:

```jsx
import {
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
} from '../components/core/slider/styled-components';
import { createSlider } from '@gluestack-ui/slider';
const Slider = createSlider({
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
});
```

## Customizing the slider:

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

```jsx
// import the styles
import {
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
} from '../components/core/slider/styled-components';

// import the createSlider function
import { createSlider } from '@gluestack-ui/slider';

// Understanding the API
const Slider = createSlider({
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
});

// Using the Slider component
export default () => (
  <Slider>
    <SliderTrack>
      <SliderFilledTrack />
    </SliderTrack>
    <SliderThumb />
  </Slider>
);
```

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

# @gluestack-ui/slider

## Installation

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

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

# or

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

## Usage

The Slider component enables an intuitive selection of values within a designated range. Users can easily adjust their selection by sliding a visual indicator along the track. Here's an example how to use this package to create one:

```jsx
import {
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
} from '../components/core/slider/styled-components';
import { createSlider } from '@gluestack-ui/slider';
const Slider = createSlider({
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
});
```

## Customizing the slider:

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

```jsx
// import the styles
import {
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
} from '../components/core/slider/styled-components';

// import the createSlider function
import { createSlider } from '@gluestack-ui/slider';

// Understanding the API
const Slider = createSlider({
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
});

// Using the Slider component
export default () => (
  <Slider>
    <SliderTrack>
      <SliderFilledTrack />
    </SliderTrack>
    <SliderThumb />
  </Slider>
);
```

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

# @gluestack-ui/spinner

## Installation

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

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

# or

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

## Usage

Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty. Here's an example how to use this package to create one:

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

export const Spinner = createSpinner({ Root });
```

## Customizing the Spinner:

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

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

// import the createSpinner function
import { createSpinner } from '@gluestack-ui/spinner';

// Understanding the API
const Spinner = createSpinner({
  Root,
});

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

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

# @gluestack-ui/switch

## Installation

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

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

# or

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

## Usage

The Switch component offers a stylish alternative to the Checkbox, allowing users to enable or disable an option with a sleek sliding motion. This component is perfect for adding a touch of elegance and interactivity to your user interface. Here's an example how to use this package to create one:

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

export const Switch = createSwitch({
  Root,
});
```

## Customizing the Switch:

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

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

// import the createSwitch function
import { createSwitch } from '@gluestack-ui/switch';

// Understanding the API
const Switch = createSwitch({
  Root,
});

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

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

# @gluestack-style/textarea

## Installation

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

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

# or

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

## Usage

The Textarea component is designed to accommodate larger amounts of text input. It allows multi-line input and can be easily customized to fit the user's needs. Here's an example how to use this package to create one:

```jsx
import { Root, Input } from '../components/core/text-area/styled-components';
import { createTextarea } from '@gluestack-ui/textarea';
const Textarea = createTextarea({
  Root,
  Input,
});
```

## Customizing the textarea:

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

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

// import the createTextarea function
import { createTextarea } from '@gluestack-ui/textarea';

// Understanding the API
const Textarea = createTextarea({
  Root,
  Input,
});

// Using the textarea component
export default () => (
  <Textarea>
    <TextareaInput placeholder="your text goes here..." />
  </Textarea>
);
```

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

# @gluestack-style/toast

## Installation

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

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

# or

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

## Usage

Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions. Here's an example how to use this package to create one:

```jsx
import { Root, Title, Description } from './styled-components';
import { createToast, createToastHook } from '@gluestack-ui/toast';

export const toast = createtoast({
  Root,
  Title,
  Description,
});
```

## Customizing the toast:

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

```jsx
// import the styles
import {
  Root,
  Title,
  Description,
} from '../components/core/toast/styled-components';

// import the createtoast and createToastHook function
import { createToast, createToastHook } from '@gluestack-ui/toast';

// Understanding the API
export const toast = createtoast({
  Root,
  Title,
  Description,
});

const useToast = createToastHook(Toast);

// Using the toast component
export default () => {
  const toast = useToast();
  return (
    <Button
      {...props}
      onPress={() => {
        toast.show({
          placement: placement,
          render: ({ id }) => {
            return (
              <Toast nativeId={id}>
                <ToastTitle>Hello World Toast {id}</ToastTitle>
              </Toast>
            );
          },
        });
      }}
    >
      <ButtonText>Press Me</ButtonText>
    </Button>
  );
};
```

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

# @gluestack-ui/tooltip

## Installation

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

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

# or

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

## Usage

Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way. Here's an example how to use this package to create one:

```jsx
import { Root, Content } from '../components/core/tooltip/styled-components';
import { createTooltip } from '@gluestack-ui/tooltip';
export const Tooltip = createTooltip({
  Root,
  Content,
});
```

## Customizing the tooltip:

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

```jsx
// import the styles

import { Root, Content } from '../components/core/tooltip/styled-components';

// import the createTooltip function
import { createTooltip } from '@gluestack-ui/tooltip';

// Understanding the API
export const Tooltip = createTooltip({
  Root,
  Content,
});

// Using the tooltip component
export default () => (
  <Tooltip>
    <TooltipContent />
  </Tooltip>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/overlay/tooltip).
npm package: @gluestack-ui/transitions
Description: Transitions animations for React Native, Next.js & React
Latest version: 0.1.11

# @gluestack-ui/transitions

## Installation

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

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

# or

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

## Usage

Here's an example how to use this package to create one:

```jsx
import { PresenceTransition } from '@gluestack-ui/transitions';

function Transitions() {
  return (
    <PresenceTransition>{/* Your Component goes here! */}</PresenceTransition>
  );
}
```

More information about implementation of transitions is available
[here](https://github.com/gluestack/gluestack-ui/blob/development/packages/transitions/src/index.tsx).