From 955bea17d2ef48fb2b5f0ad28069eaa82fbef60e Mon Sep 17 00:00:00 2001 From: Dennis Ludwig Date: Mon, 10 Jun 2024 23:13:44 +0200 Subject: [PATCH] docs: assess Panda CSS --- radar/2024-06-01/panda-css.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 radar/2024-06-01/panda-css.md 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.