A React component library for Konstruct infrastructure products (Kubefirst, Colony) and the Civo dashboard. Built with React, TypeScript, Tailwind CSS v4, and Radix UI primitives.
Note: This library is in active development (alpha). APIs may change between releases.
- 40+ components — forms, tables, modals, charts, navigation, and more
- Accessible — built on Radix UI primitives, tested with jest-axe
- Themeable — light, dark, and brand themes switchable at runtime
- Tree-shakeable — ESM build with component-level code splitting
- Broad React support — compatible with React 16.8+, 17, 18, and 19
| Peer dependency | Version |
|---|---|
react / react-dom |
^16.8 || ^17 || ^18 || ^19 |
tailwindcss |
^4 |
@tanstack/react-query |
^5.90 |
react-router-dom |
^7 |
npm install @konstructio/uiIn your global CSS file, import Tailwind, the library theme, and the brand theme you need:
@import 'tailwindcss';
@import '@konstructio/ui/ui/theme.css';
@import '@konstructio/ui/ui/civo-theme.css'; /* or kubefirst-theme.css */
@import '@konstructio/ui/ui/utilities.css';Component styles are bundled with the components and injected automatically — no extra CSS import is needed.
Add the package to Tailwind's source detection so it generates the utility classes used by the components. The path is relative to your CSS file:
@source '../node_modules/@konstructio/ui/dist';import { ThemeProvider } from '@konstructio/ui';
const App = () => {
return (
<ThemeProvider theme="light">
<YourApp />
</ThemeProvider>
);
};import { Alert, Button, Input, Modal, Typography } from '@konstructio/ui';
const Example = () => {
return (
<form>
<Typography variant="h3">Create instance</Typography>
<Input label="Hostname" isRequired helperText="Must be unique" />
<Button variant="primary" type="submit">
Create
</Button>
</form>
);
};Icons ship as a separate entry point:
import { AlertOutlineIcon, InfoCircleIcon } from '@konstructio/ui/icons';Utilities such as the cn class-merging helper are exported from the root:
import { cn } from '@konstructio/ui';
<div className={cn('flex items-center', isActive && 'bg-primary')} />;Four themes are available: light (default styling), dark, kubefirst, and kubefirst-dark. The active theme is applied through the data-theme attribute on <body> and persisted in a cookie.
Switch themes at runtime with the useTheme hook:
import { useTheme } from '@konstructio/ui';
const { theme, setTheme } = useTheme();
setTheme('dark');Alternatively, set data-theme directly on the document root — useful when the theme is controlled by a host application, such as a micro-frontend shell:
<html data-theme="dark"></html>| Category | Components |
|---|---|
| Forms | Input, TextArea, Select, Checkbox, Switch, Radio, RadioGroup, RadioCard, Counter, Datepicker, TimePicker, PhoneNumberInput, Range, Slider, Autocomplete, Filter, TagSelect, MultiSelectDropdown, ImageUpload |
| UI | Button, Badge, Card, Alert, AlertDialog, Modal, Breadcrumb, Divider, Tag, Tooltip, Toast, Tabs, Typography |
| Data display | Table, VirtualizedTable, PieChart, ProgressBar, Loading, Spinner |
| Layout | Sidebar |
| Other | DropdownButton, Command |
Full documentation with live examples is available in the Storybook.
npm install && npm run setup # install dependencies and rebuild trusted packages
npm run storybook # dev server on http://localhost:6006
npm run test # run tests with coverage
npm run lint # lint
npm run check:types # type check
npm run build # production build
npm run ci # full CI pipeline