Locked Video

Please log in or buy the course to watch

Buy Now

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.