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 compiler css css-in-js design-system design-tokens engine framework-agnostic jit-compiler postcss styled-system theming typescript utility-classes
Last synced: 4 days ago
JSON representation
🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️
- Host: GitHub
- URL: https://github.com/chakra-ui/panda
- Owner: chakra-ui
- License: mit
- Created: 2022-07-27T06:49:27.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T09:30:44.000Z (about 2 months ago)
- Last Synced: 2024-10-29T09:31:41.398Z (about 1 month ago)
- Topics: atomic-css, compiler, css, css-in-js, design-system, design-tokens, engine, framework-agnostic, jit-compiler, postcss, styled-system, theming, typescript, utility-classes
- Language: TypeScript
- Homepage: https://panda-css.com
- Size: 36.8 MB
- Stars: 5,196
- Watchers: 17
- Forks: 232
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ccamel - chakra-ui/panda - 🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️ (TypeScript)
- awesome-typesafe - chakra-ui/panda - Universal, Type-Safe, CSS-in-JS Framework for Product Teams. (**1. Libraries** / Styles)
README
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)