Concepts

Style props

Style props lets you quickly build UI components in JSX by passing css properties as "props" to your components. Panda will extract the style props through static analysis and generate the CSS at build time.

While you can get very far by using the className prop and function from Panda, style props provide a more ergonomic way of expressing styles.

If you use Chakra UI, Styled System, or Theme UI, you'll feel right at home right away 😊

// The className approach
const Button = ({ children }) => (
  <button
    className={css({
      bg: 'blue.500',
      color: 'white',
      py: '2',
      px: '4',
      rounded: 'md'
    })}
  >
    {children}
  </button>
)
 
// The style props approach
const Button = ({ children }) => (
  <panda.button bg="blue.500" color="white" py="2" px="4" rounded="md">
    {children}
  </panda.button>
)

Configure JSX

Using JSX style props is turned off by default in Panda, but you can opt-in to this feature by using the jsxFramework property in the panda config.

Choose Framework

JSX is a JavaScript syntax extension that allows you to write HTML-like code directly within your JavaScript code and is supported by most popular frameworks. Panda supports JSX style props in React, Preact, Vue 3, Qwik and Solid.js.

panda.config.ts

export default defineConfig({
  // ...
  jsxFramework: 'react'
})

Generate JSX runtime

Next, you need to run panda codegen to generate the JSX runtime for your framework.

pnpm panda codegen --clean

npm panda codegen --clean

yarn panda codegen --clean

That's it! You can now use JSX style props in your components.

Using Style Props

JSX Element

Style props are just CSS properties that you can pass to your components as props. With the JSX runtime, you can use styled.<element> syntax to create supercharged JSX elements that support style props.

import { styled } from '../styled-system/jsx'
 
const Button = ({ children }) => (
  <styled.button bg="blue.500" color="white" py="2" px="4" rounded="md">
    {children}
  </styled.button>
)

Factory Function

You can also use the styled function to create a styled component from any component or JSX intrinsic element (like "a", "button").

import { styled } from '../styled-system/jsx'
import { Button } from 'component-library'
 
const StyledButton = styled(Button)
 
const App = () => (
  <StyledButton bg="blue.500" color="white" py="2" px="4" rounded="md">
    Button
  </StyledButton>
)

Recipe

You can define a recipe for your component using the styled function. This is useful when you want to create a component that has a specific set of style props.

import { styled } from '../styled-system/jsx'
 
const Button = styled('button', {
  base: {
    py: '2',
    px: '4',
    rounded: 'md'
  },
  variants: {
    variant: {
      primary: {
        bg: 'blue.500',
        color: 'white'
      },
      secondary: {
        bg: 'gray.500',
        color: 'white'
      }
    },
  }
})
 
const App = () => <Button variant="secondary" mt="10px">Button</Button>

JSX Patterns

Patterns are common layout patterns like stack, grid, circle that can be used to speed up your css. Think of them as a way to avoid repetitive layout styles.

All the patterns provided by Panda are available as JSX components.

💡

Learn more about the patterns we provide.

import { Stack, Circle } from '../styled-system/jsx'
 
const App = () => (
  <Stack gap="4" align="flex-start">
    <button>Button</button>
    <Circle size="4" bg="red.300">4</Circle>
  </Stack>
)

Recipes Tokens