---
title: Global Style | gluestack-style
description: How to create global style in gluestack-style. You can create your global style by passing it as third argument to createConfig function from `gluestack-style.config.js`.
---

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

<Meta title="configuration/Global Style" />

# Configure your global style

To configure global style in @gluestack-style/react, create a gluestack-style.config.js file to define your globalStyle along with other configuration settings.

```jsx
import { createConfig } from "@gluestack-style/react"
export const config = createConfig({
  aliases: {},
  tokens: {},
  globalStyle: {
    variants: {
      shadow: {
        softShadow: {
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowRadius: 10,
          shadowOpacity: 0.1,
          _android: {
            shadowColor: '$primary500',
            elevation: 5,
            shadowOpacity: 0.05,
          },
        },
      },
    },
  },
} as const);

```

### To use global style

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

const export Button = () => <MyButton shadow="softShadow" />;
```
