Frederik von Sperling
|
7102e297d1
|
example: panda css (#55004)
# Panda CSS example
This example contains a simple implementation of [Panda CSS](https://panda-css.com/). It contains styling for a link made in four different approaches supported by Panda CSS. Refer to the [documentation](https://panda-css.com/docs) for when to use - and how to combine - the different approaches to suit your needs.
## Link examples
- [Atomic Recipe (CVA)](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva) Create multi-variant atomic styles with a type-safe runtime API.
- [Atomic Style](https://panda-css.com/docs/concepts/writing-styles#atomic-styles) Type-safe reusable atoms with small CSS footprint.
- [Config Recipe](https://panda-css.com/docs/concepts/recipes#config-recipe) Resuable recipes extracted and generated just-in-time.
- [Text Styles](https://panda-css.com/docs/theming/text-styles#defining-text-styles) Global text styles for consistent and legible typography.
## Preview
Preview the example live on [https://example-panda-css.vercel.app/](https://example-panda-css.vercel.app/)
## Motivation
Panda CSS is a CSS-in-JS framework, that support the new era of server components and the rise of the app-directory in Next.js. It is a performant, type-safe, developer friendly framework, which uses modern CSS features. It is heavily inspired by existing frameworks, such as Chakra UI, Vanilla Extract, Stitches and Tailwind.
More on [why you should choose Panda CSS](https://panda-css.com/docs/overview/why-panda)
|
2023-09-26 17:17:49 +00:00 |
|