rsnext/examples/panda-css/README.md
hugo-syn 601eaf0e87
chore: Fix multiple typos (#60531)
## For Contributors

Fix multiple typos
2024-01-11 10:44:55 -08:00

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.

  • 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:

Deploy with 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).