🐷 PiggyUI

PiggyUI é um Design System divertido, funcional e acessível feito para turbinar o desenvolvimento de interfaces modernas com Tailwind CSS, shadcn/ui e Radix UI. Com suporte completo a modo escuro, tokens com OKLCH, e foco em produtividade e consistência visual.

✨ Features

| 💡 Recurso | ⚙️ Descrição | |-------------------|-------------| | 🎨 Cores | Paleta baseada em oklch com tokens brand, neutral, success, danger, chart. | | 🔠 Tipografia | Fonte Fredoka, amigável e acessível. | | 🧩 Base Radix + Shadcn | Componentes acessíveis prontos para estilização. | | ⚡ Tokens CSS | Totalmente customizável via CSS Custom Properties. | | 📦 Composição fácil | Otimizado para uso com React e Storybook. |

📦 Instalação

pnpm add @pellegrinidev/piggy-ui

ou

npm install @pellegrinidev/piggy-ui

🎨 Estilos

Para aplicar os estilos corretamente, importe o arquivo de CSS principal no seu projeto:

import '@pellegrinidev/piggy-ui/style.css';

Essa linha deve ser importada uma única vez, preferencialmente no nível da aplicação, como em _app.tsx (Next.js) ou main.tsx (Vite/React).

🛠️ Uso

Importe os componentes individualmente:

import { Button } from '@pellegrinidev/piggy-ui'

export function App() {
  return <Button>Me clica 🐷</Button>
}

📚 Documentação

Acesse a Documentação via Storybook para exemplos, variações e playground dos componentes.

🚀 Roadmap

• [x] Suporte a modo escuro
• [x] Tokens em oklch
• [x] Base Radix com Tailwind
• [ ] Temas customizáveis
• [ ] Composição de layout pronta

🤝 Contribuindo

1. Fork o projeto
2. Crie sua branch: git checkout -b minha-feature
3. Commit: git commit -m 'feat: nova feature'
4. Push: git push origin minha-feature
5. Crie um Pull Request ✨

🧠 Feito com

• React
• Tailwind CSS
• shadcn/ui
• Radix UI
• TypeScript

🐷 Sobre

Feito com carinho por @pellegrinidev

PiggyUI: simples, consistente e pronto pra produção ✨