Um design system para construção de sistemas.
Painéis, CRMs, backoffice, ferramentas internas ou assinatura de documentos: tokens em CSS, componentes React, gráficos, listas, templates de aplicação e telas prontas. Funciona em qualquer app React, com Next.js, Vite ou React Router, e se instala pelo GitHub Packages.
- componentes
- 83
- esquemas de cor
- 7
- temas
- 2
- fontes
- 2
Um design system. Muitas identidades.
Os componentes não conhecem cor: leem os tokens semânticos. Trocar o esquema, o tema ou a fonte é trocar um atributo no html, e tudo abaixo muda junto, inclusive o resto do styleguide.
- E-mail341
- WhatsApp275
Telas prontas, feitas só com o z-ui.
Cada prévia é a tela de verdade rodando, não uma imagem. Os exemplos usam assinatura de documentos como cenário, mas as peças são as mesmas para qualquer sistema: lista, cadastro, detalhe, agenda, painel e login.
- PainelKPIs, gráfico de volume e envelopes recentes no AppShell.
- ContatosCRUD com DataList, Modal, confirmação e toast com desfazer.
- Detalhe do envelopeAbas, signatários, documento, histórico e selo.
- AgendaScheduler em tela cheia com filtros e criação de compromisso.
- DashboardMeta do mês, barras por canal, anel, rosca e mapa.
- EntrarLogin em card dividido com código de verificação.
Do GitHub Packages para qualquer app React.
Next.js, Vite ou React Router: o pacote não depende de framework. São quatro passos, e o CSS já traz os tokens e o que o Tailwind precisa.
O pacote está no GitHub Packages da zforgehq. Aponte o escopo para o registro e use um token com read:packages.
@zforgehq:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}Tudo o que está documentado, num lugar só.
Componentes, gráficos, listas, templates e exemplos. Filtre por seção e abra a página de cada um.
- Visão geralFundamentos
- MarcaFundamentos
- CoresFundamentos
- Esquemas de corFundamentos
- TipografiaFundamentos
- TamanhosFundamentos
- RaiosFundamentos
- Sombras e movimentoFundamentos
- AccordionComponentes
- AccordionSelectComponentes
- AlertComponentes
- AlertDialogComponentes
- AlertModalComponentes
- AspectRatioComponentes
- AssinaturaComponentes
- AutocompleteComponentes
- AvatarComponentes
- BrandLogoComponentes
- ButtonComponentes
- ButtonGroupComponentes
- CalendarComponentes
- CardComponentes
- CardCheckboxComponentes
- CardListComponentes
- CardOptionComponentes
- CarouselComponentes
- CheckboxComponentes
- ChipComponentes
- ChoiceComponentes
- ChoroplethMapComponentes
- CollapsibleComponentes
- ColorPickerComponentes
- ComboboxComponentes
- CommandComponentes
- DataTableComponentes
- DatePickerComponentes
- DialogComponentes
- DialogAlertComponentes
- DocumentSheetComponentes
- DrawerComponentes
- DropdownMenuComponentes
- EmptyStateComponentes
- FileDropZoneComponentes
- FloatingPanelComponentes
- FormFieldComponentes
- GanttComponentes
- HoverCardComponentes
- IconComponentes
- Input e FieldComponentes
- InputGroupComponentes
- InputOTPComponentes
- InputTextComponentes
- LabelComponentes
- MarkdownTextComponentes
- MenubarComponentes
- ModalComponentes
- MonthYearPickerComponentes
- PaginationComponentes
- PanelComponentes
- Partes do FieldComponentes
- PopoverComponentes
- ProgressComponentes
- ProgressCardComponentes
- RadioGroupComponentes
- SchedulerComponentes
- ScreenLoaderComponentes
- ScreenStepComponentes
- ScreenSteppersComponentes
- ScrollAreaComponentes
- SealComponentes
- SelectComponentes
- SeparatorComponentes
- SignerChipComponentes
- SkeletonComponentes
- SliderComponentes
- SonnerComponentes
- SpinnerComponentes
- StatusBadgeComponentes
- StepperProgressComponentes
- SwitchComponentes
- TableComponentes
- TabsComponentes
- TabsNavigationComponentes
- TextareaComponentes
- TextCollapseComponentes
- ToastComponentes
- ToggleComponentes
- ToggleCardComponentes
- ToggleGroupComponentes
- TooltipComponentes
- ZDialogComponentes
- Visão geralGráficos
- BarrasGráficos
- LinhasGráficos
- ÁreaGráficos
- RadiaisGráficos
- PizzaGráficos
- MapasGráficos
- ComposiçõesGráficos
- ListListas
- DataListListas
- Exemplo: padrãoListas
- Exemplo: agrupada e arrastarListas
- Exemplo: hierárquicaListas
- Exemplo: selecionávelListas
- Exemplo: card ricoListas
- AppShellTemplates
- AppHeaderTemplates
- MenuSidebarTemplates
- SingleMenuSidebarTemplates
- KPITemplates
- PageHeaderTemplates
- VitrineExemplos
- Tela de assinaturaExemplos
- PainelExemplos
- DashboardExemplos
- ContatosExemplos
- Detalhe do envelopeExemplos
- Novo envelopeExemplos
- Editar modeloExemplos
- Detalhe do pedidoExemplos
- AgendaExemplos
- Tutorial de dadosExemplos
- Mapa por estadoExemplos
- EntrarExemplos
Comece por uma tela pronta.
Abra o painel de exemplo, veja como ele é montado e leve as mesmas peças para o seu sistema, seja ele qual for.