🧩 Kovax UI — React Component Library

✨ 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.
• ✅ Grid — CSS Grid container for two-dimensional layouts.
• ✅ Stack (HStack / VStack) — powerful flex layout primitives.
• ✅ Center — flex container for perfect content centering.
• ✅ Container — content wrapper with max-width constraints.
• ✅ AspectRatio — responsive container for maintaining content proportions.
• ✅ Separator — visual divider for content separation.
• ✅ Bleed — layout component for breaking out of parent containers.
• ✅ VisuallyHidden — accessibility utility for visually hiding content while keeping it available to screen readers.
• ✅ Sticky — layout component for creating elements that stay fixed within the viewport while scrolling.

🧾 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

🔗 Quick Links

• 📖 Full Documentation
• 🚀 Getting Started
• 🎨 Design System

🤝 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!