panda

Panda es una solución de estilizado para el desarrollo web moderno, descrita como un CSS-in-JS universal, type-safe y escalable. Funciona en tiempo de compilación, extrayendo objetos de estilo o props de estilo hacia CSS. Sus características principales incluyen: escritura de objetos de estilo o props de estilo que se extraen al compilar; salida de CSS moderno utilizando capas de cascada @layer y variables CSS; compatibilidad con la mayoría de los frameworks de JavaScript; recipes y variantes similares a Stitches; tokens de diseño de alto nivel para temas simultáneos; y estilos type-safe con autocompletado mediante codegen. La instalación se realiza vía npm: npm i -D @pandacss/dev, seguido de npx panda init -p para generar la configuración y postcss. El archivo CSS de entrada debe contener @layer reset, base, tokens, recipes, utilities; y ser importado en la aplicación. Ejemplo de uso: import { css } from '../styled-system/css'; import { stack, vstack, hstack } from '../styled-system/patterns'; luego usar nombres de clase como hstack({ gap: '30px', color: 'pink.300' }) o css({ fontSize: 'lg', color: 'red.400' }). El monorepo incluye paquetes como cli, core, config, extractor, generator, parser, is-valid-prop, node, token-dictionary y shared. El proyecto ofrece documentación en panda-css.com, un playground de StackBlitz, una guía de contribución y una comunidad de Discord. Tiene licencia MIT. El README reconoce la inspiración de Chakra UI, Vanilla Extract, Stitches, Tailwind CSS, Class Variance Authority, Styled System, Linaria, Uno CSS y Goober.