Primeiro uso

Comece pela relação, não pelo tema.

Em um projeto Astro, conecte o preset Panda e use só a decisão compartilhável de que você precisa. A identidade visual continua local.

1. Instale

npm install github:franklinbaldo/cobogo#main
npm install -D @pandacss/dev

2. Conecte o preset

import { defineConfig } from '@pandacss/dev'
import cobogo from 'cobogo/preset'

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{astro,js,jsx,ts,tsx}'],
  presets: [cobogo],
  outdir: 'styled-system',
})

3. Expresse uma relação

Por exemplo, prioridade de ação: principal → secundária.

---
import { button } from '../styled-system/recipes'
---

<button class={button({ visual: 'solid' })}>Continuar</button>
<a href="/detalhes">Ver detalhes</a>

Próximo passo

Escolha pelo problema que você quer resolver.

Explorar problemas →