rsnext/examples/panda-css
leung018 66597be8a7
Add .yarn/install-state.gz to .gitignore (#56637)
### Reason for making this change
https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again.
In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited.

### Remaining work
I apologize for only modifying one template initially to initiate the discussion first.

If this change is agreed upon,  it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change.
2023-10-18 16:34:48 +00:00
..
app example: panda css (#55004) 2023-09-26 17:17:49 +00:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
next.config.js example: panda css (#55004) 2023-09-26 17:17:49 +00:00
package.json example: panda css (#55004) 2023-09-26 17:17:49 +00:00
panda.config.ts example: panda css (#55004) 2023-09-26 17:17:49 +00:00
postcss.config.js example: panda css (#55004) 2023-09-26 17:17:49 +00:00
README.md example: panda css (#55004) 2023-09-26 17:17:49 +00:00
tsconfig.json example: panda css (#55004) 2023-09-26 17:17:49 +00:00

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

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