Kovax UI

React component library focused on layout primitives, typography, forms, data tables, and typed design tokens.

Live documentation & demos

Browse interactive examples and the same Markdown documentation as in this repo (props tables, guides):

https://mrkamura.github.io/kovax/

The playground loads components from source via the kovax-react workspace alias; production builds are deployed by the CI workflow on push to master / main.

Overview

Everything above is exported from the package root:

import {
  Box,
  Text,
  Button,
  IconButton,
  Input,
  Textarea,
  FormControl,
  ThemeProvider,
  themeToken,
} from "kovax-react";

Optional entry points (deep imports)

Smaller bundles when you only need a slice of the library:

What’s new (v0.5)

• ThemeProvider & dark mode — mount ThemeProvider once (or scope with target); light/dark colorMode, optional palettes overrides, localStorage persistence (storageKey), CSP nonce on injected styles. themeToken / colorToken resolve to var(--kx-…, hex-fallback) so components follow CSS variables when the provider is active; without it, fallbacks keep previous hex appearance.
• Hooks — useColorMode() (setColorMode, toggleColorMode, resolved vs stored mode) and useTheme() (active palette + scope selector).
• Playground — static prerender for better SEO (sitemap.xml, robots.txt, per-route meta); Components → ThemeProvider live docs with examples.

Full history: CHANGELOG.md.

Highlights from v0.4

• Playground — responsive layout, sticky header with backdrop blur, redesigned Home (hero + CTAs + quick cards), documentation topics as a responsive grid (no cramped horizontal tab strip), wider column for Markdown docs; EN/RU language switcher available on every section; live sections for Accordion, Alert, Controls, Date picker, Overlays, Progress, Select, Tabs, Table, and more. react-hook-form is still only a playground dependency (e.g. Input / Date picker demos).
• Table & DataTable — token-backed Table.* primitives (variant, size, striped rows, sticky header) plus DataTable with columns, rowHeader, and optional controlled sort — see Table; kovax-react/table.
• Textarea — same chrome as Input (variants, FormControl context, floatingLabel, character counter, resize) — see Textarea; kovax-react/input.
• Date picker — variant="datetime" (time inputs + Apply) for DatePicker and DateRangePicker; playground + docs examples — see DatePicker; kovax-react/date-picker.

Highlights from v0.3

• Accordion & Collapsible, Alert, Progress, Tabs, overlays (Popover, Dialog, Modal, Toast, …), Input (floating label, clear, masks), Select & useCombobox, Form context wiring — see docs/README.md.

Foundations

• Typography — token-backed sizes.text and spacing props where applicable.
• ThemeProvider, useColorMode, useTheme — CSS variables and dark mode (Design system); themeToken / colorToken — var(--kx-…) with hex fallbacks (Tokens).
• Live site — mrkamura.github.io/kovax (EN/RU UI chrome).

Requirements

• react and react-dom ≥16 <20 (peer dependencies)
• react-day-picker ^9 (peer dependency) when using DatePicker / DateRangePicker — install alongside kovax-react and import react-day-picker/style.css once in your app (see DatePicker).

Installation

npm install kovax-react react-day-picker

If you do not use the date pickers, you may omit react-day-picker (it remains an optional peer).

npm install kovax-react

yarn add kovax-react

Usage

Wrap your app (or a subtree) with ThemeProvider so themeToken / colorToken values resolve through CSS variables and respond to light/dark mode:

import { ThemeProvider } from "kovax-react";

export function App({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider defaultColorMode="system">
      {children}
    </ThemeProvider>
  );
}

import {
  Box,
  VStack,
  HStack,
  Button,
  Input,
  FormControl,
  FormLabel,
  Text,
  themeToken,
} from "kovax-react";

export function SignInExample() {
  return (
    <Box
      p={32}
      backgroundColor={themeToken("secondary.50")}
      borderRadius={themeToken("borderRadius.md")}
      maxW={480}
      m="40px auto"
      boxShadow={themeToken("shadow.md")}
    >
      <VStack gap={24} align="stretch">
        <Text size="lg" fontWeight={600}>
          Sign in
        </Text>

        <FormControl isRequired>
          <FormLabel htmlFor="email">Email</FormLabel>
          <Input id="email" type="email" placeholder="you@example.com" />
        </FormControl>

        <FormControl>
          <FormLabel htmlFor="password">Password</FormLabel>
          <Input
            id="password"
            type="password"
            floatingLabel
            placeholder="Password"
          />
        </FormControl>

        <HStack justify="flex-end" gap={12}>
          <Button variant="outline">Cancel</Button>
          <Button variant="solid" color="primary">
            Log in
          </Button>
        </HStack>
      </VStack>
    </Box>
  );
}

Box supports forwardRef and forwards native attributes while spacing props are turned into CSS. Button, Input, Select, Checkbox, Radio, Switch, IconButton, and Text forward refs to their underlying DOM nodes where applicable.

Features

• TypeScript-first props, including polymorphic Box with the as prop
• Spacing scale via SpacingProps (m, p, w, flex, grid, and more) on layout and several other primitives
• Accessible patterns where components expose roles, labels, and focus-visible styling (e.g. Button, Input, Textarea, Select, Checkbox, Switch, FormError, useCombobox, Tabs, Alert, DataTable sort controls)
• Jest tests under src/components/**/__tests__

Tech stack

• React 18 in development; library targets React 16+ via peers
• TypeScript 5, tsup for library builds
• Vite + react-markdown for the optional playground app (apps/playground); production builds run a prerender step for static HTML per route; react-hook-form is used only in playground demos, not shipped with the library.

Documentation

On npm, relative links in this readme resolve against the package page on npmjs.com.

Sponsored by

Corporate sponsorship helps fund ongoing work on kovax-react. Logo placement by tier (USD per month):

Logo wall

Logos are listed below as sponsors join.

To discuss a tier, use the Support section on the playground or reach out via Boosty.

Hire the maintainer

Paid engagements around kovax-react and related React / UI work:

• Integration — adopting the library in your app, theming, aligning tokens with your stack
• Custom components — extending kovax primitives or building new ones to spec
• Design systems — component sets and documentation tailored to your product

Rates: from $20 USD/hour; fixed-price projects by agreement.

Contact: @mr_kamura on Telegram.

Scripts (contributors)

npm install
npm run build              # library bundle → dist/
npm test                   # Jest
npm run type-check         # tsc --noEmit
npm run dev:playground     # Vite dev server for apps/playground
npm run build:playground   # production build of the playground

Automation (maintainers): pushing a version tag v* publishes to npm if NPM_TOKEN is configured; pushes to master/main can deploy the playground via the workflow under .github/workflows/.

Contributing

Fork the repository, create a branch, open a pull request. Changes are expected to pass npm test and npm run type-check.

License

MIT