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 Reusable 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).