cieloazul310 / next-panda-example

Next.js (App Router), Park UI, Panda CSS and Storybook example project

• Next.js v14 (App Router)
• Park UI v0
• Panda CSS v0
• Storybook v8
• MDX

Demo
https://next-panda-example.vercel.app/

Storybook
https://cieloazul310.github.io/next-panda-example/

Project structure

.
├── .storybook
├── content
│   └── post // MDX posts
├── public
├── src
│   ├── app // Next.js App Router 
│   ├── components
│   ├── lib
│   ├── stories // Storybook stories
│   ├── styles
│   ├── theme // for Panda config
│   ├── utils
│   └── mdx-components.tsx
├── next.config.mjs
├── package.json
├── panda.config.ts
├── park-ui.json
├── postcss.config.cjs
└── tsconfig.json

References

Next.js - Example app with Storybook
https://github.com/vercel/next.js/tree/canary/examples/with-storybook

Next.js - App dir MDX
https://github.com/vercel/next.js/tree/canary/examples/app-dir-mdx

Panda CSS - Next.js (app) example
https://github.com/chakra-ui/panda/tree/main/sandbox/next-js-app

Panda CSS - Storybook example
https://github.com/chakra-ui/panda/tree/main/sandbox/storybook

Panda CSS - Website
https://github.com/chakra-ui/panda/tree/main/website