---
title: Installation | gluestack-style
description: A Quick Installation guide for gluestack-style. To get started with gluestack-style, you'll need to install it using either npm or yarn.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="Getting Started/Install in Expo" />

import {
  Hoverable,
  Button,
  AppProvider,
  HStack,
  Tabs,
} from '@gluestack/design-system';

# Install in Expo project

You can create a new Expo project with [Expo CLI](https://docs.expo.dev/get-started/create-a-new-app/).

## Installation

Install gluestack-style and it's peer dependencies using npm or yarn.

**Using npm**

```bash
npm i @gluestack-style/react react-native-svg
```

**Using yarn**

```bash
yarn add @gluestack-style/react react-native-svg
```

After installing gluestack-style, you need to set up the `config` and `StyledProvider` at the root of your application. This can be either in your `App.tsx` or `App.jsx`.

## Setup Config

To configure gluestack-style, you will need to create a `gluestack-style.config.ts` file (.js works too) in the root of your project. In this config file, you can define your theme tokens, breakpoints, and any other settings that you want to use throughout your application.

For example, in `gluestack-style.config.ts`:

```js
import { createConfig } from '@gluestack-style/react';

export const config = createConfig({
  aliases: {
    bg: 'backgroundColor',
    bgColor: 'backgroundColor',
    rounded: 'borderRadius',
    h: 'height',
    w: 'width',
  },
  tokens: {
    colors: {
      primary0: '#ffffff',
      primary400: '#c084fc',
      primary500: '#a855f7',
      primary600: '#9333ea',
    },
    space: {
      4: 16,
      5: 20,
      6: 24,
    },
    radii: {
      sm: 4,
      md: 6,
    },
    letterSpacings: {
      md: 0,
    },
    lineHeights: {
      sm: 20,
      md: 22,
    },
    fontWeights: {
      normal: '400',
      medium: '500',
    },
    fontSizes: {
      sm: 14,
      md: 16,
    },
    mediaQueries: {
      sm: '@media (min-width: 480px)',
      md: '@media (min-width: 768px)',
    },
  },
  globalStyle: {
    variants: {
      shadow: {
        softShadow: {
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowRadius: 10,
          shadowOpacity: 0.1,
          _android: {
            shadowColor: '$primary500',
            elevation: 5,
            shadowOpacity: 0.05,
          },
        },
      },
    },
  },
} as const);

type ConfigType = typeof config;

declare module '@gluestack-style/react' {
  interface ICustomConfig extends ConfigType {}
}
```

## Setup StyledProvider

You need to setup `StyledProvider` with config at the root of your application. Once your config file is set up, you can import it and pass it as a prop to the `StyledProvider` component. This will make the configuration options available to all components using the styled function. In this example, we are setting up `StyledProvider` in `App.tsx` or `App.jsx` file.

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

const App = () => {
  return (
    <StyledProvider config={config}>
      {/* Other components here */}
    </StyledProvider>
  );
};

export default App;
```

> Note: You need to pass config to StyledProvider otherwise aliases and design tokens will not work.

## Babel Plugin (Optional)

You can also add the babel plugin to your project if you want to perform all style calculations during build time. **The plugin can be installed via npm or yarn and should be added to your babel config**.

### Installation

Install it as development dependency.

**Using npm**

```bash
npm i --save-dev @gluestack-style/babel-plugin-styled-resolver
```

**Using yarn**

```bash
yarn add --dev @gluestack-style/babel-plugin-styled-resolver
```

### Usage

Add it to `babel.config.js` or `.babelrc`.

```jsx
// babel.config.js
module.exports = {
  plugins: ['@gluestack-style/babel-plugin-styled-resolver'],
};
```

or

```json
// .babelrc
{
  "plugins": ["@gluestack-style/babel-plugin-styled-resolver"]
}
```

## That's it 🎉

You are ready to use gluestack-style!

```jsx
import React from 'react';
import { styled, StyledProvider } from '@gluestack-style/react';
import { config } from './gluestack-style.config';
import { View } from 'react-native';

const Box = styled(View, {
  bg: '$primary500',
  h: '$6',
  w: '$6',
});

const App = () => {
  return (
    <StyledProvider config={config}>
      <Box />
    </StyledProvider>
  );
};

export default App;
```
