%% generate tags start %%
#software-engineering #software-engineering/css #software-engineering/react
%% generate tags end %%
#software-engineering/react/shadcn #software-engineering/css/panda-css
> [!warning]
> This package is not stable yet. So I don't recommend using it.
Overall I think Panda CSS is better than tailwind. Therefore, I will want to use Shadow Panda more than the original shadcn ui. It should also be easier to set up.
## How to Use?
> [!info] see more
> see [Theming | Shadow Panda (shadow-panda.dev)](https://shadow-panda.dev/docs/guides/theming)
1. run `pnpm add -D @shadow-panda/preset`
2. run `pnpm add @shadow-panda/style-context`
3. update `panda.config.ts` and you are ready to go 🎉
```ts
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
// Required: Add the preset to your config.
presets: ['@shadow-panda/preset'],
// this will output jsx using React
jsxFramework: 'react',
outdir: 'styled-system',
})
```