diff --git a/radar/2024-06-01/panda-css.md b/radar/2024-06-01/panda-css.md new file mode 100644 index 0000000..241b5a7 --- /dev/null +++ b/radar/2024-06-01/panda-css.md @@ -0,0 +1,22 @@ +--- +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.html) 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 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.html) +- 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.