Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/chakra-ui/panda

🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️
https://github.com/chakra-ui/panda

atomic-css css css-in-js design-system engine framework-agnostic jit-compiler postcss styled-system typescript utility-classes

Last synced: 3 months ago
JSON representation

🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️

Lists

README 

        
![Write typesafe styles with Panda](.github/assets/banner.png 'Write typesafe styles with Panda')





  


  Panda is a universal styling solution for the modern web —

  


  build time, type safe, and scalable CSS-in-JS

  






## Features



- ⚡️ Write style objects or style props, extract them at build time

- ✨ Modern CSS output — cascade layers `@layer`, css variables and more

- 🦄 Works with most JavaScript frameworks

- 🚀 Recipes and Variants - Just like Stitches™️ ✨

- 🎨 High-level design tokens support for simultaneous themes

- 💪 Type-safe styles and autocomplete (via codegen)







---







🐼 Get a taste of Panda. Try it out for yourself in 

 StackBlitz






---







## Documentation



Visit our [official documentation](https://panda-css.com/).



## Install



The **recommended** way to install the latest version of Panda is by running the command below:



```bash

npm i -D @pandacss/dev

```



To scaffold the panda config and postcss



```bash

npx panda init -p

```



Setup and import the entry CSS file



```css

@layer reset, base, tokens, recipes, utilities;

```



```jsx

import 'path/to/entry.css'

```



Start the dev server of your project



```bash

npm run dev

```



Start using panda



```jsx

import { css } from '../styled-system/css'

import { stack, vstack, hstack } from '../styled-system/patterns'



function Example() {

  return (

    


      
Box 1


      
Box 2


    


  )

}

```



## Directory Structure



| Package                                       | Description                                                 |

| --------------------------------------------- | ----------------------------------------------------------- |

| [cli](packages/cli)                           | CLI package installed by the end user                       |

| [core](packages/core)                         | Contains core features of Panda (utility, recipes, etc)     |

| [config](packages/config)                     | Contains functions for reading and merging the panda config |

| [extractor](packages/extractor)               | Contains code for fast AST parsing and scanning             |

| [generator](packages/generator)               | Contains codegen artifacts (js, css, jsx)                   |

| [parser](packages/parser)                     | Contains code for parsing a source code                     |

| [is-valid-prop](packages/is-valid-prop)       | Contains code for checking if a prop is a valid css prop    |

| [node](packages/node)                         | Contains the Node.js API of Panda's features                |

| [token-dictionary](packages/token-dictionary) | Contains code used to process tokens and semantic tokens    |

| [shared](packages/shared)                     | Contains shared TS functions                                |



## Contributing



Feel like contributing? That's awesome! We have a

[contributing guide](https://github.com/chakra-ui/panda/blob/main/CONTRIBUTING.md) to help guide you.



### Want to help improve the docs?



Our docsite lives in the [monorepo](./website/pages/docs/).



If you're interested in contributing to the documentation, check out the

[contributing guide](https://github.com/chakra-ui/panda/blob/main/CONTRIBUTING.md).



## Support



Having trouble? Get help in the official [Panda Discord](https://discord.gg/VQrkpsgSx7).



## Acknowledgement



The development of Panda was only possible due to the inspiration and ideas from these amazing projects.



- [Chakra UI](https://chakra-ui.com/) - where it all started

- [Vanilla Extract](https://vanilla-extract.style/) - for inspiring the utilities API

- [Stitches](https://stitches.dev/) - for inspiring the recipes and variants API

- [Tailwind CSS](https://tailwindcss.com/) - for inspiring the JIT compiler and strategy

- [Class Variance Authority](https://cva.style/) - for inspiring the `cva` name

- [Styled System](https://styled-system.com/) - for the initial idea of Styled Props

- [Linaria](https://linaria.dev/) - for inspiring the initial atomic css strategy

- [Uno CSS](https://unocss.dev) - for inspiring the studio and astro integration

- [Goober](https://goober.rocks/) - for tiny and performant js functions in template literal styles



## License



MIT License © 2023-Present [Segun Adebayo](https://github.com/segunadebayo)