mz-ui × mz-ctrl-ui — Showcase
Comparação lado a lado: mesma funcionalidade nas duas bibliotecas (mz-ui = Tailwind/tema claro; mz-ctrl-ui = styled-components/tema claro).Ver exemplo Web Dashboard (Sidebar, TopNav, DataTable, modais)Componentes compostos
Sidebar, TopNav, DashboardLayout, PageHeader, EmptyState, DataTable, OrdersTable, ConfirmDialog. Ver uso completo em /componentes/dashboard.PageHeader
Título da página
Descrição opcional e breadcrumb.
EmptyState
Nenhum registro
Mensagem e botão de ação opcionais.
OrdersTable
| Ações | |||||
|---|---|---|---|---|---|
| #1001 | 12/03/2025 | Cliente A | Pendente | 1.250,90 | |
| #1002 | 11/03/2025 | Cliente B | Pago | 890,00 | |
| #1003 | 10/03/2025 | Cliente C | Cancelado | 450,50 |
Exibindo 1 a 3 de 3 registros
Página 1 de 1
ConfirmDialog
Button
variant (solid | outline | ghost | subtle | danger), size (xs | sm | md | lg), fullWidth, isLoading, leftIcon, rightIconmz-ui
mz-ctrl-ui
Input, TextArea, Select
label, error, helperText, options, placeholder, fullWidthmz-ui
mz-ctrl-ui
▾
/
Checkbox, RadioGroup, Switch
label, options, value, onChange, orientation (RadioGroup), checked/onChange (Switch)mz-ui
Opção
mz-ctrl-ui
Opção
ComboBoxModal (mz-ctrl-ui)
Campo com busca no modal. ComcreateNewPath, o botão "Adicionar" abre o cadastro em nova aba. Sem path, use onCreateNew (mesma aba, ex. router.push).mz-ui
Sem equivalente direto neste showcase.
mz-ctrl-ui
CompanySelectionModal (mz-ctrl-ui)
Modal para trocar empresa ativa; lista de empresas com nome, CNPJ e permissão.mz-ui
Sem equivalente direto neste showcase.
mz-ctrl-ui
Badge
variant: solid | outline | subtle | danger | successmz-ui
SolidOutlineSubtleDangerSuccess
mz-ctrl-ui
SolidOutlineSubtleDangerSuccess
Card
mz-ui: CardHeader, CardTitle, CardDescription, CardContent. NDS: padded, shadow (sm|md|lg).mz-ui
Título do card
Descrição opcional.
Conteúdo principal.
mz-ctrl-ui
Título do card
Descrição e conteúdo com tema claro.Modal e ConfirmModal
isOpen, onClose, title; ConfirmModal: message, confirmText, cancelText, variant, onConfirm, onCancelmz-ui
mz-ctrl-ui
Table
TableHead, TableBody, TableRow, TableHeader, TableCell; fullWidthmz-ui
| Nome | Status |
|---|---|
| Item 1 | Ativo |
| Item 2 | Pendente |
mz-ctrl-ui
| Nome | Status |
|---|---|
| Item 1 | Ativo |
| Item 2 | Pendente |
Pagination e ListPagination
page, pageSize, total, onPageChange; ListPagination usa usePaginationmz-ui
Página 2 de 5
Exibindo 1 a 10 de 87 registros
Página 1 de 9
mz-ctrl-ui
Página 1 de 3
Exibindo 1 a 10 de 42 registros
Página 1 de 5
Typography (Heading, Text)
Heading: level 1–4. Text: variant body | muted | caption | labelmz-ui
Heading 2
Heading 3
Text bodyText mutedText labelmz-ctrl-ui
Heading 2
Heading 3
Text bodyText mutedText labelStack e Grid
Stack: direction, gap, wrap. Grid: columns (CSS string), gapmz-ui
A
B
C
1
2
3
mz-ctrl-ui
A
B
C
1
2
3
Divider
orientation: horizontal | verticalmz-ui
Acima
Abaixo
Esq
Dir
Dir
mz-ctrl-ui
Acima
Abaixo
Abaixo
Esq
Dir
Dir
LoadingSpinner, Skeleton
LoadingSpinner: text. LoadingSkeleton/BlinkingSkeleton: rows, columnsmz-ui
Carregando...
mz-ctrl-ui
Carregando...
Carregando...
SearchBar, FilterSection, ActiveFilters
SearchBar: placeholder, onSearch, label. FilterSection: title. ActiveFilters: filters, onClearAll, totalmz-ui
Filtros
Conteúdo da seção.
🔍 Filtros ativos:Status: AtivoTotal: R$ 15.000,00Selecionados: R$ 3.200,00
mz-ctrl-ui
Filtros
Conteúdo da seção.Filtros ativos:Filtro 1Total: R$ 1.000,00
PageHeader e EmptyState
PageHeader: title, description, breadcrumb, actions. EmptyState: icon, title, description, actionmz-ui
Título da página
Descrição e breadcrumb.
Nenhum registro
Mensagem e botão opcionais.
mz-ctrl-ui
Título da página
Descrição e breadcrumb.
Nenhum registro
Mensagem e botão opcionais.