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 }) => (
  <styled.button bg="blue.500" color="white" py="2" px="4" rounded="md">
    {children}
  </styled.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>
)

TypeScript

Panda provides type definitions for all the style props that are supported by the JSX runtime.

You can use these types to get type safety in your components.

Style Object

Use the JSXStyleProps to get the types of the style object that is compatible with JSX elements.

import { styled } from '../styled-system/jsx'
import type { JSXStyleProps } from '../styled-system/types'
 
type ButtonProps = {
  color?: JSXStyleProps['color']
}
 
const Button = (props: ButtonProps) => {
  return <styled.button {...props}>
}

Style Props

Use the HTMLStyledProps type to get the types of an element in addition to the style props.

import { styled } from '../styled-system/jsx'
import type { HTMLStyledProps } from '../styled-system/jsx'
 
type ButtonProps = HTMLStyledProps<'button'> 
 
const Button = (props: ButtonProps) => {
  return <styled.button {...props}>
}

Patterns

Every pattern provided by Panda has a corresponding type that you can use to get type safety in your components.

import { Stack } from '../styled-system/jsx'
import type { StackProps } from '../styled-system/jsx'

Recipes Tokens