A maior e mais profissional biblioteca de componentes React para aplicações modernas.

📖 Documentação • 🚀 Live Demo • 📦 NPM • 🐛 Reportar Issues • 💬 Discussões

Sobre

@glacien/ui é uma biblioteca robusta de componentes React, criada para elevar o padrão de aplicações web modernas. São dezenas de componentes profissionais, acessíveis, altamente customizáveis e prontos para produção, com foco em performance, experiência do desenvolvedor e design consistente.

• +50 componentes: UI, navegação, formulários, overlays, feedback, layout, dados e mais
• Acessibilidade: Totalmente compatível com WCAG 2.1 AA
• Theming avançado: Suporte completo a dark mode e customização via CSS variables
• TypeScript first: Tipagem rigorosa e IntelliSense completo
• Compatível: Next.js, Vite, CRA, Remix, Gatsby e outros
• Tree-shakeable: Importação seletiva para bundles leves
• Documentação completa: Exemplos, playground e guias detalhados

Principais Diferenciais

• Componentes Profissionais: Design enterprise, responsivo e pronto para produção
• Customização Total: Props avançadas, variantes, integração fácil com tokens de design
• Performance: Otimizado para SSR, lazy loading e animações fluidas
• Acessibilidade Real: Foco em navegação por teclado, ARIA, contraste e testes automatizados
• Integração Simples: Instale e use em qualquer stack React moderna

Instalação

npm install @glacien/ui lucide-react
# ou
yarn add @glacien/ui lucide-react
# ou
pnpm add @glacien/ui lucide-react

Veja a documentação de instalação para exemplos de setup em Next.js, Vite, CRA, Remix e Gatsby.

Exemplo Rápido

import { Button, Card, Input } from "@glacien/ui";

export default function App() {
  return (
    <Card className="p-6 max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-4">Bem-vindo ao glacien UI</h1>
      <Input placeholder="Seu e-mail" className="mb-4" />
      <Button className="w-full">Começar</Button>
    </Card>
  );
}

Componentes

@glacien/ui oferece uma coleção completa de componentes para todas as necessidades:

• Formulários: Button, Input, Textarea, Checkbox, Radio, Switch, Label, Slider, DatePicker, Calendar, Input OTP
• Navegação: NavigationMenu, Menubar, Tabs, Pagination, Breadcrumb, Command
• Overlays: Dialog, AlertDialog, Popover, Tooltip, Sheet, Drawer, HoverCard, ContextMenu, DropdownMenu, Combobox
• Feedback: Alert, Toast, Sonner, Progress, Skeleton, Badge
• Layout: Card, Separator, ScrollArea, Accordion, Collapsible, Resizable, AspectRatio, Container
• Dados: DataTable, Avatar, Table, List, Timeline

Veja a lista completa de componentes com exemplos e playground.

Theming & Customização

• Dark Mode: Suporte nativo e detecção automática
• Tokens de Design: Customização via CSS variables
• Exemplo:

:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --background: 0 0% 100%;
  --radius: 0.5rem;
}

Acessibilidade

Todos os componentes seguem as melhores práticas de acessibilidade:

• Navegação por teclado
• ARIA roles e labels
• Contraste de cores
• Foco visível
• Testes automatizados com axe-core

Performance

• Importação seletiva (tree-shaking)
• Lazy loading para componentes pesados
• Animações otimizadas com Framer Motion
• Bundle size monitorado via Bundlephobia

Como Contribuir

Contribuições são bem-vindas! Veja o Guia de Contribuição para detalhes.

• Abrir Issue
• Sugerir Feature
• Pull Requests

Estatísticas

• +50 componentes
• 100% TypeScript
• Cobertura de testes crescente
• Milhares de downloads mensais
• Utilizado em projetos enterprise e startups

Licença

MIT License © 2025 glatztp

Feito com profissionalismo por glatztp

⭐ Se este projeto te ajudou, deixe uma estrela no GitHub! ⭐