---
title: Responsive Styles | gluestack-style
description: gluestack-style supports responsive styles using media queries. You can define your breakpoints and other configuration options.
canonical: https://gluestack.io/style
---

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

<Meta title="api/Responsive Styles" />

import { styled, StyledProvider } from '@gluestack-style/react';
import { Pressable, Text } from 'react-native';
import { AppProvider, CodePreview } from '@gluestack/design-system';
import { config } from './config';
import { useState } from 'react';

# Responsive Styles

gluestack-style supports responsive styles using media queries.

## Configure Your breakpoints

To configure breakpoints with @gluestack-style/react, create a gluestack-style.config.js file and define your breakpoints and other configuration options there."

```jsx
mediaQueries: {
  base: '@media screen and (min-width: 0)',
  sm: '@media screen and (min-width: 480px)',
  md: '@media screen and (min-width: 768px)',
  lg: '@media screen and (min-width: 992px)',
  xl: '@media screen and (min-width: 1280px)',
},
```

### Using breakpoints in styled function

Once configured, you can apply different styles at different breakpoints.

<AppProvider>
  <CodePreview
    showArgsController={false}
    metaData={{
      scope: {
        styled,
        Text,
        Pressable,
        Provider: StyledProvider,
        config,
        useState,
      },
      code: `
          function App() {
            const StyledButton = styled(Pressable, {
              'bg': '$red500',
              'p': '$3',
              'shadow': '$4',
              ':hover': {
                  'bg': '$red600',
                },
              ':active': {
                  'bg': '$red700',
                },
              '@md': {
                'bg': '$blue500',
                ':hover': {
                  'bg': '$blue600',
                },
                ':active': {
                  'bg': '$blue700',
                },
              },
            });
            const StyledButtonText = styled(
              Text,
              {
                color: '$textDark50',
              },
            );
            const [isHovered, setIsHovered] = useState(false);
            const [isActive, setIsActive] = useState(false);
            return (
              <Provider config={config}>
                <StyledButton
                  states={{ hover: isHovered, active: isActive }}
                  onMouseEnter={() => setIsHovered(true)}
                  onMouseLeave={() => setIsHovered(false)}
                  onMouseDown={() => setIsActive(true)}
                  onMouseUp={() => setIsActive(false)}
                >
                  <StyledButtonText>Click Me</StyledButtonText>
                </StyledButton>
              </Provider>
            );
          }
      `,
      argsType: {
        isHovered: {
          control: 'boolean',
          default: false,
        },
        isActive: {
          control: 'boolean',
          default: false,
        },
      },
    }}
  />
</AppProvider>


> Note that the '@' symbol indicates a media query.The '@' symbol should be followed by the name of the desired breakpoint for the styles.

> Note that the same API can be used with the sx prop to override styles inline.

> Caution: Utilizing the `Passing Props` feature within `Media Queries` is not supported.
