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.
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>
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 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.