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)
4 lines
92 B
JavaScript
4 lines
92 B
JavaScript
/** @type {import('next').NextConfig} */
|
|
const nextConfig = {}
|
|
|
|
module.exports = nextConfig
|