Panda CSS in 120 Seconds

Panda provides several features, and in this lesson, we'll do a quick overview of the styling primitives in panda such as the css function, recipes and patterns.

Authoring styles

The css function is used to write styles in Panda. It accepts a style object and returns a className string. Panda follows the atomic CSS pattern which produces leaner output with one class or property and flattened styles over time.

import { css } from '../styled-system/css'

const styles = css({
  fontSize: '48px',
  fontWeight: '800',
})

<h1 className={styles}>Heading</h1>

Recipes

Atomic recipes are a way to create multi-variant styles with a type-safe runtime API. The cva function is used to create atomic recipes and takes an object as its argument.

import { cva } from '../styled-system/css'

const buttonRecipe = cva({
  base: {
   ...
  },
  variants: {
    variant: {
      primary: {
       ...
      },
      secondary: {
      ...
      },
    },
  },
  defaultVariants: { },
});

Patterns

Patterns are layout primitives can be used to create robust and responsive layouts with ease. Panda comes with predefined patterns like stack, hstack, vstack, wrap, and so on.

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

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

Due to Panda's framework agnostic nature, you're free to use it in any of your preferred JavaScript framework or libraries like React, Remix, Solid, Astro and more.