kovax-react 0.8.0 is on npm. This release connects Kovax to the wider ecosystem: Tailwind CSS v4 utilities backed by --kx-* tokens, thin form adapters for popular libraries, a FOUC guard for theme mode, and a Storybook catalog beside the existing playground.
- 📦 npm:
- 🧪 Playground:
TL;DR — everything since 0.7.0
| Area | What shipped |
|---|---|
| Tailwind v4 | kovax-react/tailwind — generated @theme inline preset; bg-kx-primary-500, p-kx-md, rounded-kx-md, … |
| Forms | kovax-react/react-hook-form, kovax-react/tanstack-form — FormField, FormFieldError, ref/value injection |
| Theme / FOUC | ColorModeScript (Chakra-style), buildColorModeInitScript, shared KOVAX_* constants |
| Storybook | autoDocs, @storybook/addon-a11y, Visual Tests; deployed to /storybook on GitHub Pages |
| Docs | TAILWIND.md, updated Form.md, QUICK_START.md, RELEASES.md |
Optional peers: react-hook-form, @tanstack/react-form, Tailwind v4.
Tailwind v4 — theme-reactive utilities
Kovax components already use ThemeProvider and var(--kx-…). 0.8 exports a Tailwind v4 preset so utility classes read the same variables:
@import "tailwindcss";
@import "kovax-react/tailwind";
<div className="bg-kx-primary-500 text-kx-base-white p-kx-md rounded-kx-md shadow-kx-sm">
Kovax tokens in Tailwind
</div>
Why @theme inline: utilities resolve var(--kx-…) at use-site — light/dark palette swaps from ThemeProvider stay reactive.
| Kovax token | Example utility |
|---|---|
--kx-color-primary-500 | bg-kx-primary-500 |
--kx-spacing-md | p-kx-md, gap-kx-lg |
--kx-radius-md | rounded-kx-md |
--kx-text-lg | text-kx-lg |
Mix with Kovax components:
import { Button, Box } from "kovax-react";
<Box className="border border-kx-secondary-200 bg-kx-secondary-50 p-kx-lg">
<Button variant="solid" color="primary">Submit</Button>
</Box>
Guide: .
ColorModeScript — no theme flash
Blocking inline script in <head> sets data-kovax-theme before first paint (localStorage + prefers-color-scheme).
// app/layout.tsx — Next.js App Router
import { ColorModeScript } from "kovax-react/server";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<ColorModeScript storageKey="kovax-color-mode" />
</head>
<body>{children}</body>
</html>
);
}
// app/providers.tsx
"use client";
import { ThemeProvider } from "kovax-react";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider storageKey="kovax-color-mode" defaultColorMode="system">
{children}
</ThemeProvider>
);
}
Use the same storageKey / defaultColorMode on script and provider.
Plain HTML: buildColorModeScriptTag() from kovax-react/server.
Storybook alongside the playground
| Site | URL |
|---|---|
| Playground (docs + live demos, EN/RU) |
npm run dev:storybook
npm run build:storybook
autoDocs — props tables from TypeScript (tags: ['autodocs']).
@storybook/addon-a11y— axe in the Accessibility panel.
@chromatic-com/storybook— Visual Tests (connect a Chromatic project for baselines).
Stories resolve library source via Vite aliases — no root npm run build required for local dev.
Recap: 0.6 and 0.7
| Version | Highlights |
|---|---|
| 0.6 | Avatar, Badge, Menu, Skeleton, Pagination, useBreakpointUp |
| 0.7 | kovax-react/server, "use client", jest-axe, size-limit, NEXTJS_APP_ROUTER.md |
Drafts: .
Changelog
— thanks for reading.
SOCIAL SHARE CARD GENERATOR