@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 | | 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

• Website
• Package on npm

MIT © Ciro Cesar Maciel