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."
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.
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}>
states={{ hover: isHovered, active: isActive }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onMouseDown={() => setIsActive(true)}
onMouseUp={() => setIsActive(false)}
<StyledButtonText>Click Me</StyledButtonText>
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.