About Kalki DesignGetting StartedResourcesThemeChangelog
Guidelines
Grid & LayoutTypographyColorIconographyValidationAccessibility
Components
AccordionAvatarBar ChartBreadcrumbsButtonCardCheckboxDate PickerDialogDropzoneInputKPILine ChartPaginationProgressRadioSelectSkeletonSliderStacked Bar ChartSwitchTableTabsTextareaToastTooltip
Kalki Design System

Build consistent, scalable interfaces for product dashboards.

A design system and React component library focused on accessibility, clarity, and fast implementation.

Install

Click to copy

Icons

Powered by Phosphor Icons.

Tokens
:root {
--background: #09090b;
--foreground: #fafafa;
--primary: #ffffff;
--muted: #27272a;
--border: #27272a;
}
Colors

A high contrast, accessible color system.

Typography

Geist Sans

Sans-serif

Geist Mono

Monospace

Specifically designed for developers and designers.

Grid & Layout
Components
ButtonInputDialogSelectCheckboxToastTabsTableBar ChartLine ChartStacked BarTooltip

27 production-ready components built for dashboards and data-heavy UIs.