for developers
Code Linting
Github Actions
Private Registry
Getting StartedGridGrid.ItemModalResponsiveScreensResponsive style objectUsageUtils
🔒  Local Setup
🔒  Server Setup
🔒  Code Challenge


All Styled component props are responsive by default. This means that for every prop, you can also pass a responsive style object instead. This allows you to apply different styles depending on the device screen width.


Responsive props rely on the theme's `screens` key. It is therefore required, that you have added a theme provider to your app. For a list of default screens, refer to the default theme export. Note: the following examples will use the default theme.

Responsive style object

A responsive style object will take any of the theme's screens as a key and any type of value as defined by the base prop. In addition to the screen keys, the interface accepts a initial key to define the default styles.

Given following style prop

const styleProp = { textAlign: "center" };

and assuming the default theme is available, a responsive prop may look like this

const responsiveStyleProp = {
textAlign: {
initial: "center",
md: "left",
lg: "right",


Change the columns value and resize your browser to see the different styles based on the viewport width.