https://github.com/kumaaa-inc/shadow-panda

Accessible and customizable components built with Panda CSS & Radix, based on shadcn/ui.
https://github.com/kumaaa-inc/shadow-panda

panda-css radix-ui shadcn-ui

Last synced: 3 months ago
JSON representation

Accessible and customizable components built with Panda CSS & Radix, based on shadcn/ui.

• Host: GitHub
• URL: https://github.com/kumaaa-inc/shadow-panda
• Owner: kumaaa-inc
• License: mit
• Created: 2023-07-21T16:13:38.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-12T01:22:14.000Z (7 months ago)
• Last Synced: 2024-09-25T02:59:16.253Z (3 months ago)
• Topics: panda-css, radix-ui, shadcn-ui
• Language: TypeScript
• Homepage: https://shadow-panda.dev
• Size: 180 MB
• Stars: 270
• Watchers: 5
• Forks: 6
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
![Shadow Panda](/apps/docs/src/app/opengraph-image.png)

`Shadow Panda` is created based on [shadcn/ui](https://ui.shadcn.com/), tailored specifically for developers utilizing [Panda CSS](https://panda-css.com/) as an alternative to Tailwind CSS.

We provide a **preset** for [Panda CSS](https://panda-css.com/) that allows you to use the same components as [shadcn/ui](https://ui.shadcn.com/), but with [Panda CSS](https://panda-css.com/).

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

## Documentation

Visit our documentation: [https://shadow-panda.dev/](https://shadow-panda.dev/)

## Install

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

```bash

npm i -D @shadow-panda/preset

```

```bash

npm i @shadow-panda/style-context

```

Add the preset to your `panda.config.ts`

```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](https://shadow-panda.dev/docs/overview/supported-components) and use it!

## Acknowledgement

A huge thanks to the creators of [shadcn/ui](https://ui.shadcn.com/) for providing an excellent set of components and documentation.  

Most of the components and documentation were taken from [shadcn/ui](https://ui.shadcn.com/).

Also, a huge thanks to:

- [Panda CSS](https://panda-css.com/)

- [Radix UI](https://radix-ui.com/)

## Contributors

  

    

      
Atsushi Yoshitake
💻 📖 🎨 💡 🚧

    

  

## License

[MIT](LICENSE.md) © [nanopx](https://github.com/nanopx)