Visão geral
Design System Paytime
Um visual só para todos os sistemas internos
A lib reúne tokens e componentes React que cada sistema instala como dependência. Tudo o que esta página mostra é a própria lib: o que aparece aqui é exatamente o que um sistema recebe. Os componentes foram reescritos a partir dos do Brain e ficaram iguais a eles, só que mais simples de usar e mais acessíveis.
Comece em três passos
Sistemas em React ou Next.js, com Tailwind 4.
1Instale
A lib e os tokens vêm juntos. O Lucide é dependência do sistema.
pnpm add @paytime/ui @paytime/tokens lucide-react2Importe os estilos
Uma linha traz fontes, tokens, os dois temas e as classes dos componentes.
@import "tailwindcss";
@import "@paytime/ui/styles.css";3Monte a tela
Formulário com React Hook Form e Zod; a mensagem de erro vai direto no campo.
import { Button, FormField, TextInput } from "@paytime/ui";
<FormField label="Razão social" required error={errors.razaoSocial?.message}>
<TextInput {...register("razaoSocial")} />
</FormField>
<Button type="submit">Salvar</Button>Princípios
O que a lib garante, para nenhum sistema voltar a misturar estilos.
A tela pede text-fg-muted, bg-surface, border-line. A paleta fica por baixo e nem vira classe: cor solta não compila.
Cada componente é comparado pixel a pixel com o do Brain, nos dois temas e em hover e foco. Diferença só de propósito, com o motivo escrito.
data-theme no html ou em qualquer bloco. O componente nunca escolhe cor por tema: quem troca é o token.
Campo nomeado pelo rótulo, foco no primeiro campo ao abrir painel, contraste AA nos textos de status, teclado em menus e listas.
Tudo o que tem aqui
Fundações e componentes, por grupo.