MyGit

chakra-ui/panda

Fork: 237 Star: 5255 (更新于 2024-11-30 02:10:37)

license: MIT

Language: TypeScript .

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

最后发布版本: @pandacss/types@0.46.0 ( 2024-09-10 02:16:05)

官方网址 GitHub网址

Write typesafe styles with Panda


Panda is a universal styling solution for the modern web —
build time, type safe, and scalable CSS-in-JS

NPM Downloads NPM Version X (formerly Twitter) Follow



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.

Install

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

npm i -D @pandacss/dev

To scaffold the panda config and postcss

npx panda init -p

Setup and import the entry CSS file

@layer reset, base, tokens, recipes, utilities;
import 'path/to/entry.css'

Start the dev server of your project

npm run dev

Start using panda

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

function Example() {
  return (
    <div>
      <div className={hstack({ gap: '30px', color: 'pink.300' })}>Box 1</div>
      <div className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2</div>
    </div>
  )
}

Directory Structure

Package Description
cli CLI package installed by the end user
core Contains core features of Panda (utility, recipes, etc)
config Contains functions for reading and merging the panda config
extractor Contains code for fast AST parsing and scanning
generator Contains codegen artifacts (js, css, jsx)
parser Contains code for parsing a source code
is-valid-prop Contains code for checking if a prop is a valid css prop
node Contains the Node.js API of Panda's features
token-dictionary Contains code used to process tokens and semantic tokens
shared Contains shared TS functions

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

Want to help improve the docs?

Our docsite lives in the monorepo.

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

Support

Having trouble? Get help in the official Panda Discord.

Acknowledgement

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

License

MIT License © 2023-Present Segun Adebayo

最近版本更新:(数据更新于 2024-09-15 02:26:18)

2024-09-10 02:16:05 @pandacss/types@0.46.0

2024-09-10 02:16:02 @pandacss/token-dictionary@0.46.0

2024-09-10 02:15:59 @pandacss/generator@0.46.0

2024-09-10 02:15:56 @pandacss/studio@0.46.0

2024-09-10 02:15:53 @pandacss/shared@0.46.0

2024-09-10 02:15:50 @pandacss/preset-base@0.46.0

2024-09-10 02:15:47 @pandacss/preset-panda@0.46.0

2024-09-10 02:15:44 @pandacss/preset-open-props@0.46.0

2024-09-10 02:15:41 @pandacss/parser@0.46.0

2024-09-10 02:15:38 @pandacss/preset-atlaskit@0.46.0

主题(topics):

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

chakra-ui/panda同语言 TypeScript最近更新仓库

2024-12-21 21:40:12 lobehub/lobe-chat

2024-12-21 12:01:51 siyuan-note/siyuan

2024-12-21 10:57:01 ai16z/eliza

2024-12-21 09:15:35 MetaCubeX/metacubexd

2024-12-21 04:50:26 mediar-ai/screenpipe

2024-12-20 19:36:48 vitejs/vite