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; GitHub Pages builds are produced by the repo workflow on push to master / main.

Overview

Everything above is exported from the package root:

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

Optional entry points (deep imports)

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

What’s new (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.

Full history: CHANGELOG.md.

Highlights from v0.3 (still current)

• 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.
• themeToken / colorToken — palette, text.*, spacing.*, borderRadius.*, shadow.*, transition.* (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

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); react-hook-form is used only in playground demos, not shipped with the library.

Documentation

On npm, relative links in this file resolve against the GitHub repository when viewing the package readme.

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 to GitHub Pages (see .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