[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71377":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":39,"readmeContent":40,"aiSummary":41,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":42,"discoverSource":43},71377,"panda","chakra-ui\u002Fpanda","chakra-ui","🐼 Universal, Type-Safe, CSS-in-JS Framework for Design Systems ⚡️","https:\u002F\u002Fpanda-css.com",null,"TypeScript",6075,299,14,2,0,7,22,21,38.43,"MIT License",false,"main",[25,26,27,28,29,30,31,32,33,34,35,36,37,38],"atomic-css","compiler","css","css-in-js","design-system","design-tokens","engine","framework-agnostic","jit-compiler","postcss","styled-system","theming","typescript","utility-classes","2026-06-12 02:02:51","![Write typesafe styles with Panda](.github\u002Fassets\u002Fbanner.png 'Write typesafe styles with Panda')\n\n\u003Cp align=\"center\">\n  \u003Cbr\u002F>\n  \u003Ca href=\"https:\u002F\u002Fpanda-css.com\">Panda\u003C\u002Fa> is a universal styling solution for the modern web —\n  \u003Cbr\u002F>\n  build time, type safe, and scalable CSS-in-JS\n  \u003Cbr\u002F>\u003Cbr\u002F>\n  \u003Cimg alt=\"NPM Downloads\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F%40pandacss%2Fdev\"> \u003Cimg alt=\"NPM Version\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F%40pandacss%2Fdev\"> \u003Cimg alt=\"X (formerly Twitter) Follow\" src=\"https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002Fpanda__css\">\n  \n  \u003Cbr\u002F>\u003Cbr\u002F>\n\u003C\u002Fp>\n\n## Features\n\n- ⚡️ Write style objects or style props, extract them at build time\n- ✨ Modern CSS output — cascade layers `@layer`, css variables and more\n- 🦄 Works with most JavaScript frameworks\n- 🚀 Recipes and Variants - Just like Stitches™️ ✨\n- 🎨 High-level design tokens support for simultaneous themes\n- 💪 Type-safe styles and autocomplete (via codegen)\n\n\u003Cbr\u002F>\n\n---\n\n\u003Cp align=\"center\">\n\u003Cb>\n🐼 Get a taste of Panda. Try it out for yourself in \n \u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fvitejs-vite-lfwyue?file=src%2FApp.tsx&terminal=dev\">StackBlitz\u003C\u002Fa>\n\u003C\u002Fb>\n\u003C\u002Fp>\n\n---\n\n\u003Cbr\u002F>\n\n## Documentation\n\nVisit our [official documentation](https:\u002F\u002Fpanda-css.com\u002F).\n\n## Install\n\nThe **recommended** way to install the latest version of Panda is by running the command below:\n\n```bash\nnpm i -D @pandacss\u002Fdev\n```\n\nTo scaffold the panda config and postcss\n\n```bash\nnpx panda init -p\n```\n\nSetup and import the entry CSS file\n\n```css\n@layer reset, base, tokens, recipes, utilities;\n```\n\n```jsx\nimport 'path\u002Fto\u002Fentry.css'\n```\n\nStart the dev server of your project\n\n```bash\nnpm run dev\n```\n\nStart using panda\n\n```jsx\nimport { css } from '..\u002Fstyled-system\u002Fcss'\nimport { stack, vstack, hstack } from '..\u002Fstyled-system\u002Fpatterns'\n\nfunction Example() {\n  return (\n    \u003Cdiv>\n      \u003Cdiv className={hstack({ gap: '30px', color: 'pink.300' })}>Box 1\u003C\u002Fdiv>\n      \u003Cdiv className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## Directory Structure\n\n| Package                                       | Description                                                 |\n| --------------------------------------------- | ----------------------------------------------------------- |\n| [cli](packages\u002Fcli)                           | CLI package installed by the end user                       |\n| [core](packages\u002Fcore)                         | Contains core features of Panda (utility, recipes, etc)     |\n| [config](packages\u002Fconfig)                     | Contains functions for reading and merging the panda config |\n| [extractor](packages\u002Fextractor)               | Contains code for fast AST parsing and scanning             |\n| [generator](packages\u002Fgenerator)               | Contains codegen artifacts (js, css, jsx)                   |\n| [parser](packages\u002Fparser)                     | Contains code for parsing a source code                     |\n| [is-valid-prop](packages\u002Fis-valid-prop)       | Contains code for checking if a prop is a valid css prop    |\n| [node](packages\u002Fnode)                         | Contains the Node.js API of Panda's features                |\n| [token-dictionary](packages\u002Ftoken-dictionary) | Contains code used to process tokens and semantic tokens    |\n| [shared](packages\u002Fshared)                     | Contains shared TS functions                                |\n\n## Contributing\n\nFeel like contributing? That's awesome! We have a\n[contributing guide](https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fpanda\u002Fblob\u002Fmain\u002FCONTRIBUTING.md) to help guide you.\n\n### Want to help improve the docs?\n\nOur docsite lives in the [monorepo](.\u002Fwebsite\u002Fpages\u002Fdocs\u002F).\n\nIf you're interested in contributing to the documentation, check out the\n[contributing guide](https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fpanda\u002Fblob\u002Fmain\u002FCONTRIBUTING.md).\n\n## Support\n\nHaving trouble? Get help in the official [Panda Discord](https:\u002F\u002Fdiscord.gg\u002FVQrkpsgSx7).\n\n## Acknowledgement\n\nThe development of Panda was only possible due to the inspiration and ideas from these amazing projects.\n\n- [Chakra UI](https:\u002F\u002Fchakra-ui.com\u002F) - where it all started\n- [Vanilla Extract](https:\u002F\u002Fvanilla-extract.style\u002F) - for inspiring the utilities API\n- [Stitches](https:\u002F\u002Fstitches.dev\u002F) - for inspiring the recipes and variants API\n- [Tailwind CSS](https:\u002F\u002Ftailwindcss.com\u002F) - for inspiring the JIT compiler and strategy\n- [Class Variance Authority](https:\u002F\u002Fcva.style\u002F) - for inspiring the `cva` name\n- [Styled System](https:\u002F\u002Fgithub.com\u002Fstyled-system\u002Fstyled-system) - for the initial idea of Styled Props\n- [Linaria](https:\u002F\u002Flinaria.dev\u002F) - for inspiring the initial atomic css strategy\n- [Uno CSS](https:\u002F\u002Funocss.dev) - for inspiring the studio and astro integration\n- [Goober](https:\u002F\u002Fgoober.rocks\u002F) - for tiny and performant js functions in template literal styles\n\n## License\n\nMIT License © 2023-Present [Segun Adebayo](https:\u002F\u002Fgithub.com\u002Fsegunadebayo)\n","Panda 是一个现代化的 CSS-in-JS 框架，旨在为设计系统提供类型安全、构建时处理和可扩展的样式解决方案。其核心功能包括支持在构建时提取样式对象或属性、现代 CSS 特性（如层叠层 `@layer` 和 CSS 变量）、与大多数 JavaScript 框架兼容、以及通过代码生成实现类型安全的样式和自动补全。Panda 还提供了配方和变体功能，并支持高层次的设计令牌以适应多种主题需求。适用于需要高度定制化且类型安全的前端项目，特别是在追求高性能和良好开发者体验的场景下。","2026-06-11 03:37:25","high_star"]