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.

Documentation

Visit our documentation: https://shadow-panda.dev/

Install

Install the preset and a utility package (used by most components) by running:

1npm i -D @shadow-panda/preset

1npm i @shadow-panda/style-context

Add the preset to your panda.config.ts

1import { defineConfig } from '@pandacss/dev'
2
3export default defineConfig({
4  // Required: Add the preset to your config.
5  presets: ['@shadow-panda/preset'],
6
7  // Optional: Enable CSS reset
8  preflight: true,
9
10  // Use React
11  jsxFramework: 'react',
12
13  // Optional: Emit artifacts to `node_modules` as a package.
14  // The copy-paste component examples use `@shadow-panda/styled-system` as the import path of the generated files.
15  // If you choose not to use this option, you should rewrite your component imports as needed.
16  // @see https://panda-css.com/docs/references/config#emitpackage
17  emitPackage: true,
18  outdir: '@shadow-panda/styled-system',
19
20  // Other configurations and overrides...
21})

Compile Panda CSS, copy components and use it!

Acknowledgement

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:

• Panda CSS
• Radix UI

Contributors

Atsushi Yoshitake 💻 📖 🎨 💡 🚧

License

MIT © nanopx