Introduction

Layout patterns are shortcuts for common CSS layout you use in your applications.

Panda CSS comes with a wide variety of layout patterns such as flex, grid, stack, circle and more.

These patterns all come as functions and JSX components. Here's an example of the HStack pattern.

HStack Pattern as a Function

Here's a quick example of pattern as a function

import { hstack } from '../styled-system/patterns'

function App() {
  return (
    <div className={hstack({ gap: '6' })}>
      <div>First</div>
      <div>Second</div>
      <div>Third</div>
    </div>
  )
}

HStack Pattern as a JSX Component

Here's a quick example of pattern as a JSX component

import { HStack } from '../styled-system/jsx'

function App() {
  return (
    <HStack gap="6">
      <div>First</div>
      <div>Second</div>
      <div>Third</div>
    </HStack>
  )
}

In this module, we'll explore different layout patterns and how to use them.