# @gluestack-ui/provider

> A universal headless provider component for React Native, Next.js & React

Latest version **0.1.19** (published 2025-03-11) · 0 weekly downloads

## Install

```sh
npm install @gluestack-ui/provider
pnpm add @gluestack-ui/provider
yarn add @gluestack-ui/provider
bun add @gluestack-ui/provider
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.1.19 |
| Published | 2025-03-11 |
| First published | 2023-02-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5300 |
| Maintainers | vidhi499, rohit_singh, viraj-10, rayan1810, rajat693, surajahmedc, meenumakkar, madhavb230100, vaibhk002, daminipandey, amars29, geekgautam, sravankumarvelangi, gluestackadmin, geekashwini, mayankp06 |
| Keywords | react, native, react-native, provider, gluestack-ui, universal, headless, typescript, component, android, ios, nextjs |

## Links

- npm: https://www.npmjs.com/package/@gluestack-ui/provider
- Repository: https://github.com/gluestack/gluestack-ui
- Homepage: https://github.com/gluestack/gluestack-ui/tree/main/packages/unstyled/provider#readme
- Issues: https://github.com/gluestack/gluestack-ui/issues
- npm.io page: https://npm.io/package/@gluestack-ui/provider

## Dependencies (3)

- [tsconfig](https://npm.io/package/tsconfig.md) 7
- [typescript](https://npm.io/package/typescript.md) ^5.6.3
- [@react-native-aria/interactions](https://npm.io/package/@react-native-aria/interactions.md) 0.2.16

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.19 (latest) — 2025-03-11
- 0.1.9-alpha.0 (alpha) — 2023-09-26
- 0.1.18 — 2025-03-03
- 0.1.17 — 2025-02-19
- 0.1.16 — 2025-02-18
- 0.1.15 — 2025-02-18
- 0.1.14 — 2025-02-18
- 0.1.13 — 2024-11-11
- 0.1.12 — 2024-03-21
- 0.1.11 — 2024-03-18
- 0.1.10 — 2023-09-28
- 0.1.9 — 2023-09-26
- 0.1.8 — 2023-09-25
- 0.1.8-alpha.0 — 2023-09-25
- 0.1.7 — 2023-08-17
- … 8 more at https://npm.io/package/@gluestack-ui/provider/versions

## README

# @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>
  );
};
```

---
_Source: https://npm.io/package/@gluestack-ui/provider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._