@ciromaciel/dashboard-kit
The components every dashboard shares: table, empty state, loading state, destructive confirm and wordmark. Built on Mantine.
Installation
bun add @ciromaciel/dashboard-kit
Peers: @mantine/core, @mantine/hooks, @mantine/notifications,
@tabler/icons-react, react.
Quick start
import { DataTable, EmptyState, AuthLoader } from '@ciromaciel/dashboard-kit'
function Projects({ rows, loading }) {
if (loading) return <AuthLoader />
return (
<DataTable
columns={[{ key: 'name', label: 'Name' }, { key: 'status', label: 'Status', hideBelow: true }]}
rows={rows}
getRowKey={row => row.id}
onRowClick={row => navigate(`/projects/${row.id}`)}
emptyState={<EmptyState title="No projects yet" description="Create your first one." actionLabel="New project" onAction={create} />}
/>
)
}
API
| Export | What it is |
|---|---|
DataTable · TableSkeleton · TableToolbar · templateFor · ROW_PADDING · HEAD_PADDING | The table, its toolbar and its waiting state |
EmptyState | The empty — which is not the same thing as "still loading" |
SectionCard · Field · FieldStacked · CardActions | The section card |
PageHeader | Title and breadcrumb |
HoldToConfirmButton · HoldToConfirmIcon | The reversible destructive confirm |
DeleteModal · deleteTitleScale | The top of the escalation: reversible → hold → this. before holds the way out (backup) |
DangerZone | The door to DeleteModal at the end of a settings page |
AuthLoader · AuthScreen · AUTH_LABELS · AUTH_TEXTS | The moment the dashboard does not know who you are |
Wordmark | The mark, in two roles (variant="mark" / "label"). The name comes by prop |
ZenLabel · notify · NOTIFICATIONS_PROPS · NOTIFY_DESCRIPTION_CSS · notificationTheme | Label and notice |
DashboardFrame · SidebarShell · SIDEBAR_WIDTH | The frame and the sidebar |
MenuItem · NavItem · GroupLabel · ResourceItem · ActiveResource | The sidebar's pieces |
Metric · CommandCenter | The first screen |
PlanBanner | The billing banner: it warns, it never blocks |
SupportModal · HealthRow · useHealthCheck | Support and health |
CardSkeleton · ListSkeleton · MoreResults | Loading and "load more" |
Terminal · TerminalOutput | Command output |
usePaginatedList · useDebounce · useExclusiveModal | The hooks |
What goes in here
What is the same across dashboards. What belongs to a product stays out — a status light, a currency rule. The dividing line: if a dashboard had to change the component to serve its product, the component is not everyone's yet.
Why there is no build
The package publishes source. The consumers are Vite apps, which compile JSX from a dependency without ceremony — a build step would only produce what the consumer already knows how to produce. One less moving part to break.
Links
MIT © Ciro Cesar Maciel