@sabercontabil/saber-ui

v0.1.0 | Atualizado em 2026-02-01

Design System oficial da Saber Contabil — Componentes React padronizados para o ecossistema de plataformas internas.

Instalacao

npm install @sabercontabil/saber-ui

Setup automatizado

npx @sabercontabil/saber-ui init

O comando init configura automaticamente:

• Tailwind CSS preset com os design tokens do Saber
• CSS variables (tema light/dark) no seu arquivo CSS
• Dependencias necessarias (tailwindcss, postcss, autoprefixer, tailwindcss-animate)

Setup manual

1. Importar o tema no seu CSS principal (apos @tailwind utilities):

@import '@sabercontabil/saber-ui/theme.css';

2. Adicionar o preset no tailwind.config.ts:

export default {
  presets: [require('@sabercontabil/saber-ui/tailwind-preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@sabercontabil/saber-ui/dist/**/*.js',
  ],
};

Uso

import { Button, Input, Heading, Text } from '@sabercontabil/saber-ui';

function LoginForm() {
  return (
    <div>
      <Heading as="h1">Bem-vindo</Heading>
      <Text color="muted">Entre com suas credenciais</Text>
      <Input type="email" placeholder="Email" />
      <Button variant="default" fullWidth>Entrar</Button>
    </div>
  );
}

Componentes

Primitivos (12)

| Componente | Descricao | |------------|-----------| | Button | Botao com variantes (default, secondary, outline, ghost, destructive, link) | | Input | Campo de entrada com suporte a icones e validacao | | Label | Rotulo para campos de formulario | | Select | Seletor dropdown com variantes | | Checkbox | Caixa de selecao com tamanhos e cores | | Switch | Toggle on/off com tamanhos e cores | | Textarea | Area de texto com redimensionamento | | Calendar | Calendario com selecao de data | | ScrollArea | Area de scroll customizada | | Heading | Titulos h1-h6 com variantes | | Text | Texto inline com cores e tamanhos | | Paragraph | Paragrafos com estilos |

Compostos (14)

| Componente | Descricao | |------------|-----------| | Card | Container com header, content e footer | | Dialog | Modal de dialogo | | Table | Tabela de dados com header, body e footer | | Tabs | Abas de navegacao | | FormField | Campo de formulario com label e erro | | Form | Integracao com React Hook Form | | DatePicker | Seletor de data | | DateRangePicker | Seletor de intervalo de datas | | StatsCard | Card de estatisticas com tendencia | | ChartCard | Card com grafico embutido | | DetailSection | Secao de detalhes com campos | | ConfigToggle | Toggle de configuracao | | Charts | BarChart, PieChart, AreaChart (Recharts) | | ThemeProvider | Provedor de tema light/dark |

Feedback (8)

| Componente | Descricao | |------------|-----------| | Alert | Alerta com variantes (success, warning, error, info) | | Progress | Barra de progresso linear e circular | | Skeleton | Placeholder de carregamento | | Spinner | Indicador de carregamento | | Toast | Notificacao temporaria | | Tooltip | Dica flutuante | | ContentLoading | Loading de conteudo | | PageLoading | Loading de pagina inteira |

Navigation (4)

| Componente | Descricao | |------------|-----------| | Breadcrumb | Trilha de navegacao | | DropdownMenu | Menu dropdown com subitens | | Pagination | Paginacao com variantes | | ProtectedRoute | Rota protegida por autenticacao |

Overlay (5)

| Componente | Descricao | |------------|-----------| | AlertDialog | Dialogo de confirmacao | | ConfirmDialog | Dialogo de confirmacao simplificado | | ContextMenu | Menu de contexto (clique direito) | | Popover | Conteudo flutuante | | Sheet | Painel lateral deslizante |

Layout (6)

| Componente | Descricao | |------------|-----------| | Sidebar | Menu lateral colapsavel | | Header | Cabecalho com nav e acoes | | Container | Container responsivo com Stack e Grid | | Footer | Rodape com secoes e links | | PageHeader | Cabecalho de pagina com titulo e acoes | | EmptyState | Estado vazio com icone e acao |

Data Display (4)

| Componente | Descricao | |------------|-----------| | Badge | Tag/etiqueta com variantes | | Avatar | Imagem de perfil com fallback | | AspectRatio | Container com proporcao fixa | | Separator | Linha divisoria |

Auth (6)

| Componente | Descricao | |------------|-----------| | LoginForm | Formulario de login | | RegisterForm | Formulario de cadastro | | ForgotPasswordForm | Formulario de recuperacao de senha | | ResetPasswordForm | Formulario de redefinicao de senha | | TwoFactorForm | Formulario de autenticacao 2FA | | VerifyEmailForm | Formulario de verificacao de email |

Paginas e Layouts (9)

| Componente | Descricao | |------------|-----------| | AuthLayout | Layout padrao para paginas de autenticacao | | LoginPage | Pagina de login com branding | | RegisterPage | Pagina de cadastro | | ForgotPasswordPage | Pagina de recuperacao de senha | | ResetPasswordPage | Pagina de redefinicao de senha | | TwoFactorPage | Pagina de autenticacao 2FA | | VerifyEmailPage | Pagina de verificacao de email | | DashboardLayout | Layout de dashboard com sidebar e header | | DashboardSidebar | Sidebar de navegacao do dashboard |

Total: 68 componentes

Design Tokens

import { colors, typography, spacing } from '@sabercontabil/saber-ui';

// Brand
colors.brand.primary.DEFAULT  // #EA610B (Laranja Saber)
colors.brand.secondary.DEFAULT // #0B1E3F (Azul Escuro)

// Tipografia
typography.fontFamily.sans  // Inter
typography.fontFamily.mono  // JetBrains Mono

Stack

| Camada | Tecnologia | |--------|------------| | Build | Vite + Rollup | | Framework | React 18 | | Linguagem | TypeScript 5 | | Estilizacao | Tailwind CSS 3 | | Primitivos | Radix UI | | Variantes | CVA (class-variance-authority) |

Desenvolvimento

npm install          # Instalar dependencias
npm run dev          # Modo desenvolvimento
npm run storybook    # Documentacao interativa
npm run build:lib    # Build da biblioteca
npm run test:run     # Executar testes

Release

npm run release:check           # Validar antes de publicar
npm version <patch|minor|major> # Bump de versao
npm publish                     # Publicar no npm

Licenca

MIT - Saber Contabil