JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 94
  • Score
    100M100P100Q74366F
  • License MIT

Package Exports

  • kovax-react
  • kovax-react/components/Button
  • kovax-react/components/Input
  • kovax-react/components/Layout

Readme

🧩 Kovax UI β€” React Component Library

npm license React TypeScript module


✨ Overview

Kovax UI is a modern, lightweight React component library designed for performance, scalability, and easy customization.
Built with TypeScript, React, and Vite, it provides flexible UI primitives ready for production.

Currently includes:

  • 🧱 Layout
  • βœ… Box β€” universal layout container for building flexible UI.
  • βœ… Flex β€” low-level flexbox container for precise layout control.
  • βœ… Stack (HStack / VStack) β€” powerful flex layout primitives.

🧾 Forms

  • βœ… Input β€” customizable, themeable, and fully typed.
  • βœ… Form β€” unified color, size, shadow, and transition system.

πŸ”˜ Buttons

  • βœ… Button β€” customizable, themeable, and fully typed.

🎨 Foundation

  • βœ… Design Tokens β€” colors, sizes, shadows, transitions.

Form

πŸš€ Coming soon: Datepicker, Select, Modal, Switch, Tabs, and more!


πŸ“¦ Installation

1️⃣ From npm

npm install kovax-react
# or
yarn add kovax-react

⚑ Usage Example

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

export default function App() {
  return (
    <Box
      p={32}
      backgroundColor="#f8f9fa"
      borderRadius={16}
      maxW="480px"
      m="40px auto"
      shadow="md"
    >
      <VStack gap={24}>
        <Heading size="xl">Sign In</Heading>

        <Form>
          <VStack gap={16}>
            <FormLabel>Email</FormLabel>
            <Input type="email" placeholder="Enter your email" />

            <FormLabel>Password</FormLabel>
            <Input type="password" placeholder="Enter password" />
          </VStack>

          <HStack justify="flex-end" gap={12} mt={24}>
            <Button variant="outline">Cancel</Button>
            <Button variant="primary">Login</Button>
          </HStack>
        </Form>

        <Text align="center" color="gray.600">
          Don’t have an account? <a href="#">Sign up</a>
        </Text>
      </VStack>
    </Box>
  );
}

🧠 Features

  • 🌈 Full TypeScript support

  • 🎨 Easy theming and customization

  • βš™οΈ Minimal dependencies

  • 🧱 Production-ready base UI components

  • πŸš€ Built with Vite + Tsup for speed

  • πŸ“˜ Well-structured documentation in Markdown

πŸ›  Tech Stack

  • React 18+

  • TypeScript 5+

  • Vite

  • Tsup for builds

πŸ“š Documentation

Component Description Link
🎨 Tokens Base design tokens (colors, shadows, transitions) View β†’
πŸ”˜ Button Configurable, themeable button View β†’
⌨️ Input Themed input field with masks and states View β†’
🧾 Form Form container with consistent spacing and validation View β†’
πŸ“¦ Box Universal layout container View β†’
πŸ“ Stack (HStack / VStack) Flexible layout stacks with spacing & alignment View β†’

🀝 Contribution & Community

We welcome developers from all over the world to contribute to Kovax UI πŸ’‘ There are plenty of exciting ideas and upcoming features, including:

  • Advanced animations

  • Dark theme

  • Composable components (Form, Modal, Dropdown)

  • I*nteractive documentation & live playground

If you’d like to contribute:

  • Fork this repository

  • Create a new branch

  • Commit your changes

  • Open a Pull Request

Your contribution will be reviewed and merged after discussion.

All contributors will be featured in the Contributors list ❀️

πŸš€ Development

Run in development mode:

npm install
npm run dev

Build the library:

npm run build

Publish a new version:

npm run release

πŸ“„ License

This project is licensed under the MIT License β€” free to use, modify, and distribute for personal and commercial purposes.
By contributing to this repository, you agree that your contributions will be licensed under the same MIT License.

πŸ“˜ License file: LICENSE

🌟 Stay tuned

Kovax UI is actively maintained and constantly evolving. New components, better design systems, and advanced tools are coming soon!