Responsive Design

Responsive styling in Panda CSS is fundamental for developing adaptable user interfaces and ensures UI components work across various screen sizes.

Panda CSS provides five default breakpoints:

const breakpoints = {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

Example of Responsive Styling

At various breakpoints, specify the required style.

bg: { base: "white", md: "gray", lg: "black" }

In the above example, the background color changes based on various screen sizes.

flexDirection: { base: "column", lg: "row" }

In this example, the flex direction changes from column to row for large screen sizes and above.