Shadow Panda is created based on shadcn/ui, tailored specifically for developers utilizing Panda CSS as an alternative to Tailwind CSS.
We provide a preset for Panda CSS that allows you to use the same components as shadcn/ui, but with Panda CSS.
Visit our documentation: https://shadow-panda.dev/
Install the preset and a utility package (used by most components) by running:
npm i -D @shadow-panda/presetnpm i @shadow-panda/style-contextAdd the preset to your panda.config.ts
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
// Required: Add the preset to your config.
presets: ['@shadow-panda/preset'],
// Optional: Enable CSS reset
preflight: true,
// Use React
jsxFramework: 'react',
// Optional: Emit artifacts to `node_modules` as a package.
// The copy-paste component examples use `@shadow-panda/styled-system` as the import path of the generated files.
// If you choose not to use this option, you should rewrite your component imports as needed.
// @see https://panda-css.com/docs/references/config#emitpackage
emitPackage: true,
outdir: '@shadow-panda/styled-system',
// Other configurations and overrides...
})Compile Panda CSS, copy components and use it!
A huge thanks to the creators of shadcn/ui for providing an excellent set of components and documentation.
Most of the components and documentation were taken from shadcn/ui.
Also, a huge thanks to:
 Atsushi Yoshitake 💻 📖 🎨 💡 🚧 |