repository·main·Indexed 11 days ago
https://github.com/chakra-ui/pandaA universal, build-time, type-safe CSS-in-JS styling solution for the modern web. It provides scalable CSS output using cascade layers and variables, featuring a developer experience with recipes and variants. Includes a CLI (@pandacss/dev) for build management, a Model Context Protocol (MCP) server for AI assistants, and a generator for design system artifacts.
Panda is a styling engine that generates styling primitives to author atomic CSS and recipes in a type-safe and readable manner. It combines the developer experience of CSS-in-JS with the performance of atomic CSS by using static analysis to scan JavaScript and TypeScript files for JSX style props and function calls, generating styles on-demand (Just-in-Time).
TLDR: Panda is a CSS-in-JS engine that generates atomic CSS at build time via the CLI or PostCSS.
Panda CSS is designed for modern browsers and relies on native support for the following CSS features:
:where() and :is())Panda targets the latest stable releases of major browsers. The default supported browser range is defined by the following browserslist criteria:
>= 1%
last 1 major version
not dead
Chrome >= 99
Edge >= 99
Firefox >= 97
iOS >= 15.4
Safari >= 15.4
Android >= 115
Opera >= 73Panda CSS provides several built-in patterns for common layout tasks. These include:
stack, hstack (horizontal stack), vstack (vertical stack).wrap.box, container, aspectRatio, flex, center, linkOverlay, float, and grid.For instructions on how to build your own, refer to the customization documentation.
Panda CSS is a universal, build-time, type-safe CSS-in-JS solution. Unlike runtime CSS-in-JS libraries, Panda extracts styles during the build process to generate optimized CSS and TypeScript utilities, resulting in zero runtime overhead in the browser.
Core Principles:
@layer).Panda Studio is a visual, read-only interface designed for exploring and documenting your design system. It automatically visualizes your design system elements, including:
It serves as an alternative to manually generating spec files or building a custom documentation website. Unlike manual documentation workflows, Panda Studio does not require you to run pnpm panda spec and acts as a fully-featured documentation tool without requiring additional code.
The styled-system folder is a generated, lightweight runtime that transforms CSS-in-JS syntax (such as css() calls or template literals) into class name strings.
Because Panda performs static extraction at build-time rather than using a bundler plugin (like Vite or Webpack) to transform code during compilation, this runtime is necessary to map your style objects to the actual CSS classes generated by Panda.
Key characteristics:
config.outdir when running panda or panda codegen.styled-system functions are replaced by static class names at build-time, ensuring the runtime is not shipped to the client.// Example of the runtime transforming a style object to a class name
css({ color: 'blue.300' }) // => "text_blue_300"You can pass breakpoint objects to variant props (e.g., size: { base: 'sm', md: 'lg' }) to create responsive styles. This uses ConditionalValue types generated by Panda.
Requirements for Responsive Variants:
defineRecipe in the config (not cva).compoundVariants defined.import { button } from '../styled-system/recipes'
// ✅ This works if no compoundVariants are present
<button className={button({ size: { base: 'sm', md: 'lg' } })}>Click me</button>Panda organizes global styles into two distinct CSS cascade layers to ensure predictable defaults and safe overrides:
@layer reset: Contains preflight/reset styles. This layer is enabled via the preflight configuration option.@layer base: Contains your custom global styles defined via the globalCss configuration option.By using these layers, Panda ensures that global styles have lower specificity than utility classes or component-specific styles, preventing unexpected overrides.
Panda applies layers in a specific order from lowest to highest priority. Styles in higher-priority layers will override styles in lower-priority layers if they target the same element:
@layer utilities (Highest priority)@layer recipes@layer tokens@layer base@layer reset (Lowest priority)For CSS properties that allow multiple values (like border or box-shadow) or within at-rules (like @media queries), Panda provides two syntaxes to reference tokens:
token() function syntax: Useful when you need to provide a fallback value. Syntax: token(path, fallback).{path}.Composite values (e.g., border):
token(): border: '1px solid token(colors.red.400)' (or with fallback: token(colors.red.400, red))border: '1px solid {colors.red.400}'At-rules (e.g., media queries):
token(): '@media screen and (min-width: token(sizes.4xl))''@media screen and (min-width: {sizes.4xl})'// token() syntax with fallback
const className = css({ border: '1px solid token(colors.red.400, red)' })
// Reference syntax
const className = css({ border: '1px solid {colors.red.400}' })
// Reference syntax in media queries
const className = css({
'@media screen and (min-width: {sizes.4xl})': {
color: 'green.400'
}
})The styled-system folder contains the entrypoints for the Panda runtime and the generated CSS. The structure typically includes:
css/: Functions for generating class names from style objects.jsx/: JSX components for styled elements.recipes/: Runtime support for recipes.patterns/: Runtime support for patterns.tokens/: Generated token definitions.types/: TypeScript definitions for your specific design system.styles.css: The actual extracted CSS used by your application.The Flex pattern provides shortcuts for flexbox properties.
Properties:
direction: row, column, row-reverse, or column-reverse.wrap: Boolean to enable wrapping.align: Alias for align-items.justify: Alias for justify-content.basis: Alias for flex-basis.grow: Alias for flex-grow.shrink: Alias for flex-shrink.import { Flex } from '../styled-system/jsx'
function App() {
return (
<Flex direction="row" align="center">
<div>First</div>
<div>Second</div>
</Flex>
)
}