@chakra-ui/panda-preset
v3.35.0
Published
Panda preset for Chakra UI
Readme
@chakra-ui/panda-preset
Panda CSS preset that mirrors the Chakra UI default theme (tokens, semantic colors, recipes, slot recipes, and global styles) so you can build with Panda while keeping Chakra-aligned design tokens.
Installation
pnpm add @chakra-ui/panda-preset
# or
npm install @chakra-ui/panda-presetPeer expectations: @pandacss/dev (and your app’s React/Vite/Next setup as
usual for Panda).
Configure Panda
panda.config.ts (or .js):
import { defineConfig } from "@pandacss/dev"
export default defineConfig({
presets: ["@chakra-ui/panda-preset"],
preflight: true,
include: ["./src/**/*.{js,jsx,ts,tsx}"],
outdir: "styled-system", // default; change if you prefer another folder
})Then generate the runtime:
pnpm exec panda codegenIn your app, import the CSS layers Panda emits (for example the generated
styled-system/styles.css or your own entry that matches Panda’s layer setup)
and use css(), recipes, and patterns from your outdir like any other
Panda project.
Color mode (light / dark)
Semantic tokens in this preset use _light and _dark (e.g. colors,
shadows). For those values to apply correctly, the document root should carry a
class that selects the active color mode:
- Set
class="light"orclass="dark"on<html>(or another wrapping element your setup uses).
Example:
<html class="light">
<!-- ... -->
</html>Without one of these classes, light/dark–dependent tokens may not resolve the way you expect.
Next.js and next-themes
With next-themes, use
attribute="class" so the active theme is reflected as light / dark on
<html>, matching Panda’s _light / _dark semantic tokens.
defaultTheme / enableSystem are up to your product defaults.
// e.g. app/providers.tsx — mark as a Client Component in the App Router
"use client"
import { ThemeProvider } from "next-themes"
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
)
}// e.g. app/layout.tsx — wrap the app; suppressHydrationWarning avoids a class mismatch warning on <html>
import { Providers } from "./providers"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}Install: pnpm add next-themes.