Panda CSS: build time and type-safe CSS-in-JS
source link: https://panda-css.com/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience
Write type-safe styles with ease using
panda
$
npm i -D @pandacss/devStyling library you’ll enjoy using 🐼
import { css } from "./styled-system/css";
import { circle, stack } from "./styled-system/patterns";
function App() {
return (
<div className={stack({ direction: "row", p: "4" })}>
<div className={circle({ size: "5rem", overflow: "hidden" })}>
<img src="https://via.placeholder.com/150" alt="avatar" />
</div>
<div className={css({ mt: "4", fontSize: "xl", fontWeight: "semibold" })}>
John Doe
</div>
<div className={css({ mt: "2", fontSize: "sm", color: "gray.600" })}>
</div>
</div>
Generates Modern CSS code at build time
Panda uses modern features like cascade layers, :where selectors and css variables to give you best-in-class css output.
@layer reset, base, tokens, recipes, utilities;
@layer utilities {
.d_flex {
display: flex;
.flex_row {
flex-direction: row;
.mt_2 {
margin-top: var(--space-2);
.fs_sm {
font-size: var(--fontSizes-sm);
.color_gray.600 {
color: var(--color-gray-600);
Design token support
Specify base and semantic tokens with ease using the W3C working token spec.
const theme = {
tokens: {
colors: {
primary: { value: '#0FEE0F' },
secondary: { value: '#EE0F0F' }
fonts: {
body: { value: 'system-ui, sans-serif' }
sizes: {
small: { value: '12px' },
medium: { value: '16px' },
large: { value: '24px' }
const theme = {
semanticTokens: {
colors: {
danger: {
value: { base: '{colors.red.500}', _dark: '{colors.red.200}' }
success: {
value: { base: '{colors.green.500}', _dark: '{colors.green.300}' }
muted:{
value: { base: '{colors.gray.500}', _dark: '{colors.gray.300}' }
canvas: { value : '{colors.white}' }
Recipes and variants just like Stitches
Panda gives you a robust functions to define recipes and even “cva” to help you design composable component styles.
export const badge = cva({
base: {
fontWeight: 'medium',
px: '3',
rounded: 'md',
variants: {
status: {
default: {
color: 'white',
bg: 'gray.500',
success: {
color: 'white',
bg: 'green.500',
warning: {
color: 'white',
bg: 'yellow.500',
defaultVariants: {
status: 'default',
Tons of others love building and shipping sites with Panda.
Love what you see?
Try Panda in 3 quick steps
$
npm i -D @pandacss/dev$
npm run panda init -p$
npm run devWorks Everywhere.
Including Server Components.
Panda today
Join our community
Get support, get involved and join our community of developers - Hop into our DiscordRecommend
-
133
README.md Welcome to panda panda is the nicest universal car interface ever.
-
43
-
37
-
42
-
26
March 12, 2020 Introduction Check Point Research discovered a new campaign against the Mongolian public sector, which takes advantage of the current Coronavirus scare, in order to deliv...
-
6
-
11
A Tale of an Edgy Panda and some Python ReviewsThis post will be a quickie detailing a rather annoying…finding about the pandas package in Python.For those not in the know, I’ve been taking some Python courses, trying to port my R...
-
13
How to trick a neural network into thinking a panda is a vulture I have an article published in Code Words, the Recurse Centre quarterly publication! I’m pretty happy with how it turned out. It comes with code...
-
2
Type safe CSS design systems with @propertySeptember 1, 20238 min readCSS types are a worthy investment into
-
3
Say Hello to Panda CSS—The New CSS-in-JS Library with Zero Runtime ...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK