7102e297d1
# Panda CSS example This example contains a simple implementation of [Panda CSS](https://panda-css.com/). It contains styling for a link made in four different approaches supported by Panda CSS. Refer to the [documentation](https://panda-css.com/docs) for when to use - and how to combine - the different approaches to suit your needs. ## Link examples - [Atomic Recipe (CVA)](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva) Create multi-variant atomic styles with a type-safe runtime API. - [Atomic Style](https://panda-css.com/docs/concepts/writing-styles#atomic-styles) Type-safe reusable atoms with small CSS footprint. - [Config Recipe](https://panda-css.com/docs/concepts/recipes#config-recipe) Resuable recipes extracted and generated just-in-time. - [Text Styles](https://panda-css.com/docs/theming/text-styles#defining-text-styles) Global text styles for consistent and legible typography. ## Preview Preview the example live on [https://example-panda-css.vercel.app/](https://example-panda-css.vercel.app/) ## Motivation Panda CSS is a CSS-in-JS framework, that support the new era of server components and the rise of the app-directory in Next.js. It is a performant, type-safe, developer friendly framework, which uses modern CSS features. It is heavily inspired by existing frameworks, such as Chakra UI, Vanilla Extract, Stitches and Tailwind. More on [why you should choose Panda CSS](https://panda-css.com/docs/overview/why-panda)
22 lines
457 B
JSON
22 lines
457 B
JSON
{
|
|
"private": true,
|
|
"scripts": {
|
|
"prepare": "panda codegen",
|
|
"dev": "next dev",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "next lint"
|
|
},
|
|
"dependencies": {
|
|
"next": "latest",
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0"
|
|
},
|
|
"devDependencies": {
|
|
"@pandacss/dev": "^0.15.1",
|
|
"@types/node": "^20.7.0",
|
|
"@types/react": "^18.2.22",
|
|
"@types/react-dom": "^18.2.7",
|
|
"typescript": "^5.2.2"
|
|
}
|
|
}
|