23 lines
1.2 KiB
Markdown
23 lines
1.2 KiB
Markdown
---
|
|
title: "Panda CSS"
|
|
ring: assess
|
|
quadrant: languages-and-frameworks
|
|
tags: [frontend, styling]
|
|
---
|
|
|
|
[Panda CSS](https://panda-css.com/) is a feature-rich and highly versatile [CSS-in-JS](/methods-and-patterns/css-in-js/) library that generates CSS at build time. It provides a great developer experience without the disadvantages of runtime libraries. It is framework-agnostic, but unlike [Stylex](/languages-and-frameworks/stylex/) and Vanilla Extract, it provides JSX-specific features like the `styled` function and style props on top of it.
|
|
|
|
### Key Features:
|
|
- Compatible with [React Server Components](/methods-and-patterns/react-server-components/)
|
|
- No performance disadvantages compared to runtime libraries
|
|
- Highly versatile:
|
|
- Recipes and variants like Stitches
|
|
- Framework-agnostic
|
|
- `styled` function to create UI components like Stitches
|
|
- Style props like styled-system
|
|
- Utility classes like Tailwind
|
|
- W3C-compliant design system with tokens and utilities support
|
|
- Fully typed API
|
|
|
|
With comprehensive documentation and great community support from the Chakra UI Team, we see a lot of potential for it to become one of the best CSS-in-JS libraries in the future.
|