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)
33 lines
636 B
JSON
33 lines
636 B
JSON
{
|
|
"compilerOptions": {
|
|
"target": "es6",
|
|
"lib": ["dom", "dom.iterable", "esnext"],
|
|
"allowJs": true,
|
|
"skipLibCheck": true,
|
|
"strict": true,
|
|
"noEmit": true,
|
|
"esModuleInterop": true,
|
|
"module": "ESNext",
|
|
"moduleResolution": "bundler",
|
|
"resolveJsonModule": true,
|
|
"isolatedModules": true,
|
|
"jsx": "preserve",
|
|
"incremental": true,
|
|
"plugins": [
|
|
{
|
|
"name": "next"
|
|
}
|
|
],
|
|
"paths": {
|
|
"@/*": ["./*"]
|
|
}
|
|
},
|
|
"include": [
|
|
"next-env.d.ts",
|
|
"**/*.ts",
|
|
"**/*.tsx",
|
|
".next/types/**/*.ts",
|
|
"styled-system"
|
|
],
|
|
"exclude": ["node_modules"]
|
|
}
|