Sipal UI

Versão: 1.0.5

Biblioteca de componentes React moderna e completa para construção de interfaces administrativas e dashboards.

Construída com React 18, TypeScript, Tailwind CSS 4.1, Radix UI, TanStack Table e Chart.js.

✨ Características

• 🎨 56 componentes profissionais prontos para uso
• 🌗 Dark Mode nativo com suporte completo
• ♿ Acessível - Construído sobre Radix UI com suporte WAI-ARIA
• 📊 Charts integrados - Gráficos com tema sincronizado ao Tailwind
• 🎯 TypeScript - Tipagem completa em todos os componentes
• 🎭 Tailwind CSS 4.1 - Sistema de design baseado em variáveis CSS
• 📱 Responsivo - Otimizado para mobile, tablet e desktop
• 🚀 Tree-shakeable - Bundle otimizado com imports individuais

📦 Instalação

npm install @sipal/ui
# ou
yarn add @sipal/ui
# ou
pnpm add @sipal/ui

Peer Dependencies

npm install react react-dom tailwindcss

🚀 Quick Start

1. Configure o Tailwind CSS

No seu tailwind.config.ts:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@sipal/ui/dist/**/*.{js,mjs}', // Adicione esta linha
  ],
  darkMode: 'class',
  plugins: [require('tailwindcss-animate')],
}

export default config

2. Importe o CSS do tema

No seu arquivo CSS principal (ex: app/globals.css ou src/index.css):

@import "@sipal/ui/styles";

Ou importe diretamente no seu _app.tsx / layout.tsx:

import '@sipal/ui/styles'

3. Use os componentes

import { Button, Card, Input } from '@sipal/ui'

function App() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Bem-vindo ao Sipal UI</Card.Title>
      </Card.Header>
      <Card.Content>
        <Input placeholder="Digite seu nome..." />
        <Button>Enviar</Button>
      </Card.Content>
    </Card>
  )
}

📚 Documentação

🎯 Início Rápido

• 📋 Índice Visual de Componentes - Referência rápida de todos os 56 componentes
• 📖 Índice de Documentação - Portal completo da documentação

📖 Guias Detalhados

• Guia Completo - Parte 1 - Fundamentos & Formulários (22 componentes)
• Guia Completo - Parte 2 - Visualização de Dados (11 componentes)
• Guia Completo - Parte 3 - Charts & Navegação (15 componentes)
• Guia Completo - Parte 4 - Feedback & Overlays (8 componentes)

🎨 Temas e Arquitetura

• Arquitetura e Padrões
• Sistema de Temas
• Sipal Charts
• Exemplos Práticos

🎨 Sistema de Temas

A Sipal UI utiliza um sistema de temas baseado em variáveis CSS (Tailwind CSS 4.1).

Customizando o Tema

Crie ou edite seu arquivo src/styles/theme.css:

@import "tailwindcss";

@theme {
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --radius-lg: var(--radius);
}

:root {
  --primary: 222.2 47.4% 11.2%; /* Azul escuro */
  --primary-foreground: 210 40% 98%;
  --radius: 0.75rem; /* Bordas mais arredondadas */
}

.dark {
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
}

🧩 Lista de Componentes

| Componente | Exemplo de Uso Básico | |------------|-----------------------| | Button | <Button>Salvar</Button> | | Badge | <Badge>Novo</Badge> | | Separator | <Separator /> | | Skeleton | <Skeleton className="h-4 w-full" /> | | Aspect Ratio | <AspectRatio ratio={16/9}><img ... /></AspectRatio> | | Label | <Label htmlFor="email">Email</Label> | | Input | <Input placeholder="Email" /> | | Password Input | <PasswordInput /> | | Textarea | <Textarea /> | | Checkbox | <Checkbox /> | | Radio Group | <RadioGroup><RadioGroupItem value="1" /></RadioGroup> | | Switch | <Switch /> | | Select | <Select><SelectTrigger><SelectValue /></SelectTrigger></Select> | | MultiSelect | <MultiSelect options={[]} /> | | Slider | <Slider defaultValue={[50]} /> | | Date Picker | <DatePicker /> | | Date Range Picker | <DateRangePicker /> | | Time Picker | <TimePicker /> | | File Upload | <FileUpload /> | | Color Picker | <ColorPicker /> | | Form | <Form {...form}><form>...</form></Form> | | Card | <Card><CardContent>Content</CardContent></Card> | | KPI Card | <KpiCard title="Total" value="100" /> | | Table | <Table><TableRow><TableCell>Cell</TableCell></TableRow></Table> | | DataTable | <DataTable columns={columns} data={data} /> | | Accordion | <Accordion><AccordionItem value="1">...</AccordionItem></Accordion> | | Collapsible | <Collapsible>...</Collapsible> | | Scroll Area | <ScrollArea>...</ScrollArea> | | Timeline | <Timeline items={[]} /> | | Tree View | <TreeView data={[]} /> | | Code Block | <CodeBlock code="..." /> | | Resizable | <ResizablePanelGroup>...</ResizablePanelGroup> | | Bar Chart | <BarChart data={data} /> | | Line Chart | <LineChart data={data} /> | | Area Chart | <AreaChart data={data} /> | | Pie Chart | <PieChart data={data} /> | | Scatter Chart | <ScatterChart data={data} /> | | Mixed Chart | <MixedChart data={data} /> | | Avatar | <Avatar><AvatarImage src="..." /></Avatar> | | Tabs | <Tabs><TabsList>...</TabsList></Tabs> | | Breadcrumb | <Breadcrumb>...</Breadcrumb> | | Pagination | <Pagination>...</Pagination> | | Stepper | <Stepper steps={[]} /> | | Menubar | <Menubar>...</Menubar> | | Dropdown Menu | <DropdownMenu>...</DropdownMenu> | | Side Navigation | <SideNavigation>...</SideNavigation> | | Alert | <Alert><AlertTitle>Info</AlertTitle></Alert> | | Dialog | <Dialog><DialogTrigger>Open</DialogTrigger></Dialog> | | Sheet | <Sheet><SheetTrigger>Open</SheetTrigger></Sheet> | | Popover | <Popover><PopoverTrigger>Open</PopoverTrigger></Popover> | | Tooltip | <Tooltip><TooltipTrigger>Hover</TooltipTrigger></Tooltip> | | Toast | toast("Message") | | Progress | <Progress value={50} /> | | Empty State | <EmptyState title="No Data" /> |

📄 Licença

MIT © Sipal

🔗 Links Úteis

• Radix UI
• Tailwind CSS
• TanStack Table
• Chart.js