Kovax UI — kovax-react 0.8.0

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

Current release: 0.8.0 · npm kovax-react · CHANGELOG

Live documentation & demos

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

npm run dev:playground   # Vite playground
npm run dev:storybook    # Storybook on http://localhost:6006

The playground and Storybook load 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. gzip ESM sizes below (dist/*.js); peers react, react-dom, react/jsx-runtime, and optional react-day-picker are treated as externals. Limits are enforced by size-limit (npm run size); live npm analysis via bundlejs.com.

Import path	Contents	size-limit	bundlejs
kovax-react	Full public API
kovax-react/server	RSC-safe Box, Stack, Container, Text, Heading (no "use client")
kovax-react/layout	Layout primitives
kovax-react/typography	Typography primitives
kovax-react/button	Button, IconButton, ButtonGroup
kovax-react/input	Input, InputGroup, Textarea
kovax-react/form	Form primitives, Checkbox / Radio / RadioGroup / Switch, Select, useCombobox, VirtualizedListbox, + FormControlContext / useFormControlContext
kovax-react/overlays	Tooltip, Popover / Dropdown, compound Dialog, structured Modal, ToastProvider, useToast
kovax-react/menu	Menu, DropdownMenu, animation helpers (ensureMenuKeyframes, …)
kovax-react/tabs	Tabs compound primitives (Root, List, Trigger, Content)
kovax-react/accordion	Collapsible + Accordion compound primitives
kovax-react/alert	Alert inline banner / live region
kovax-react/progress	LinearProgress, CircularProgress
kovax-react/date-picker	DatePicker, DateRangePicker (+ types); peer react-day-picker
kovax-react/table	Table compound primitives, DataTable, helpers (cycleSort, resolveDataCell)
kovax-react/pagination	Pagination, getPaginationItems
kovax-react/tokens	Tokens + themeToken / colorToken, ThemeProvider, useColorMode, useTheme, useMediaQuery, useBreakpointUp, breakpoint helpers, palettes
kovax-react/avatar	Avatar — photo, initials, fallback
kovax-react/badge	Badge status / count pill
kovax-react/skeleton	Skeleton loading placeholders
kovax-react/tailwind	Tailwind CSS v4 @theme inline preset — bg-kx-primary-500, p-kx-md, … (CSS, not JS)	—	docs/TAILWIND.md
kovax-react/react-hook-form	FormField adapter for react-hook-form (FormControl + ref/value injection)		Form.md
kovax-react/tanstack-form	FormField adapter for @tanstack/react-form		Form.md

What’s new (v0.8.0)

• ColorModeScript — FOUC guard for data-kovax-theme before first paint (kovax-react/server, Chakra-style).
• kovax-react/tailwind — Tailwind v4 preset maps all --kx-* tokens to utilities (bg-kx-primary-500, rounded-kx-md, …); @theme inline keeps ThemeProvider light/dark reactive — Tailwind guide.
• kovax-react/react-hook-form — FormField adapter: useController + FormControl context + ref/value injection — Form docs.
• kovax-react/tanstack-form — same FormField API for TanStack Form.

Кратко по-русски: пресет Tailwind v4; адаптеры FormField для react-hook-form и TanStack Form.

Full history: CHANGELOG.md.

Highlights from v0.7

• kovax-react/server — RSC-safe Box, Stack, Container, Text, Heading — Next.js App Router.
• "use client" in client bundles; jest-axe in tests; size-limit / bundlejs badges.

Highlights from v0.6

• Pagination — accessible pager and kovax-react/pagination entry — Pagination.
• Responsive hooks — useMediaQuery, useBreakpointUp, breakpointMinMediaQuery — Tokens.
• Avatar, Badge, Menu, Skeleton — new components with dedicated kovax-react/* entries.

Highlights from 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.

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 ^18 || ^19 (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; peers declare React ^18 || ^19
• 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 run size               # gzip size limits (size-limit)
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