mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Jam BalayaandGitHub
36dce2fe7e
### Description Follow up #35349. 1. Update the [example template](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) with [StackBlitz](https://stackblitz.com/) preview 2. Add `preview live with StackBlitz` to the examples 3. Remove the below old StackBlitz preview section from the examples ```md ## Preview Preview the example live on [StackBlitz](http://stackblitz.com/): [](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/active-class-name) ``` CC: @samcx ### Improving Documentation - [x] Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - [x] Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### Adding or Updating Examples - [x] The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - [x] Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
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.
Demo
https://example-panda-css.vercel.app/
Deploy your own
Deploy the example using Vercel or preview live with StackBlitz
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).