7102e297d1
# 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)
2.1 KiB
2.1 KiB
Panda CSS Example
This example contains a simple implementation of Panda CSS. It contains styling for a link made in four different approaches supported by Panda CSS. Refer to the documentation for when to use - and how to combine - the different approaches to suit your needs.
Link examples
- Atomic Recipe (CVA) Create multi-variant atomic styles with a type-safe runtime API.
- Atomic Style Type-safe reusable atoms with small CSS footprint.
- Config Recipe Resuable recipes extracted and generated just-in-time.
- Text Styles Global text styles for consistent and legible typography.
Deploy your own
Deploy the example using Vercel:
Preview
Preview the example live on https://example-panda-css.vercel.app/
How to use
Execute create-next-app
with npm, Yarn, pnpm, or Bun to bootstrap the example:
npx create-next-app --example panda-css panda-css-app
yarn create next-app --example panda-css panda-css-app
pnpm create next-app --example panda-css panda-css-app
bunx create-next-app --example panda-css panda-css-app
Deploy it to the cloud with Vercel (Documentation).