Write styles

Styling

Write styles next to your markup. Panda turns them into atomic CSS at build time.

Panda looks like CSS-in-JS when you write it. You write style objects in TypeScript, and the build emits plain atomic CSS. Nothing in the browser computes those styles.

import { css } from 'styled-system/css'
 
function Button() {
  return (
    <button
      className={css({
        bg: 'blue.500',
        color: 'white',
        px: '4',
        py: '2',
        borderRadius: 'md',
        _hover: { bg: 'blue.600' }
      })}
    >
      Click me
    </button>
  )
}

There is more than one way to author styles in Panda. While the above syntax holds true, css() is only one entry point. Every API below compiles down to the same CSS.

Pick an API

Most styles start as a quick css() call. Reach for patterns when you need layout primitives, style props if you want JSX-prop ergonomics, and recipes once a component actually has variants.

css()Object styles on a className. The default for one-off and colocated styles.Write a style Style propsPass CSS as JSX props on styled.* elements when you want Chakra-like ergonomics.Use style props PatternsLayout primitives like stack, grid, and container, typed and responsive.Browse patterns RecipesVariants and compound variants for components. Lives in the Recipes tab.Write a recipe

Write styles

Writing Styles

Edit this page on GitHub View as markdown

Last updated on September 29, 2026