@vtx-ui/react

A production-ready React + TypeScript UI library with enterprise-grade components.

Features

✨ Enterprise-Ready - Production-grade components with strict TypeScript support
♿ Accessible - WCAG 2.1 AA compliant with full ARIA support
🎨 Unified Theme System - Consistent primary color-based design across all 23 components
🎯 Fully Customizable - Change entire theme with CSS custom properties (no rebuild needed)
📦 Tree-Shakable - Optimized bundle size with ESM support
🧪 Well Tested - 508 passing tests with 100% component coverage
📚 Documented - Complete JSDoc comments, Storybook, and theming guides

Installation

npm install @vtx-ui/react

yarn add @vtx-ui/react

pnpm add @vtx-ui/react

Quick Start

import { ThemeProvider, Button } from '@vtx-ui/react';
import '@vtx-ui/react/styles.css';

function App() {
  return (
    <ThemeProvider>
      <Button variant="primary" onClick={() => console.log('clicked')}>
        Click me
      </Button>
    </ThemeProvider>
  );
}

Theming

All components use a unified primary color system for consistent branding:

/* Change the entire theme by updating primary color tokens */
:root {
  --vtx-color-primary-500: #3b82f6; /* Focus rings, borders */
  --vtx-color-primary-600: #2563eb; /* Main brand color */
  --vtx-color-primary-700: #1d4ed8; /* Hover states */
}

Examples:

• Blue (default): Modern, tech-focused
• Green: Eco-friendly, growth-oriented
• Purple: Premium, creative brand
• Red: Bold, action-driven

📖 Complete Theming Guide - Learn how to customize colors, spacing, typography, and more.

Components

23 Production-Ready Components

Form Controls: Button, Input, Select, MultiSelect, Checkbox, Radio, CheckboxGroup, RadioGroup
Interactive: Accordion, Card, Modal, Toast, Tooltip
Display: Chip, Badge, Alert, Table, Avatar, Divider, Text
Layout: Flex, Grid

Example Usage

Button

import { Button } from '@vtx-ui/react';

<Button variant="primary" size="large" loading={false}>
  Click me
</Button>;

Input

import { Input } from '@vtx-ui/react';

<Input
  label="Email"
  type="email"
  placeholder="[email protected]"
  helperText="We'll never share your email"
  error={errors.email}
/>;

Modal

import { Modal, Button } from '@vtx-ui/react';

const [isOpen, setIsOpen] = useState(false);

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Confirm Action"
  footer={
    <>
      <Button onClick={() => setIsOpen(false)}>Cancel</Button>
      <Button variant="primary">Confirm</Button>
    </>
  }
>
  <p>Are you sure you want to proceed?</p>
</Modal>;

Theming

The library uses a comprehensive design token system with CSS variables:

import { ThemeProvider, tokens } from '@vtx-ui/react';

function App() {
  return (
    <ThemeProvider initialMode="light">
      <YourApp />
    </ThemeProvider>
  );
}

Using Theme Tokens

import { useTheme } from '@vtx-ui/react';

function MyComponent() {
  const { tokens, mode, setMode } = useTheme();

  return <div style={{ color: tokens.colors.primary[500] }}>Current mode: {mode}</div>;
}

Custom Hooks

• useTheme - Access theme tokens and mode
• useClickOutside - Detect clicks outside an element
• useFocusTrap - Trap focus within a component
• useEscapeKey - Handle escape key presses
• useBodyScrollLock - Lock body scroll (for modals)
• useId - Generate unique IDs for accessibility
• useDebounce - Debounce values

Development

Install dependencies

npm install

Start Storybook

npm run storybook

Run tests

npm test

Build library

npm run build

Lint and format

npm run lint
npm run format

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

License

MIT © Innostes Solutions Pvt Ltd

Links

• Documentation
• Storybook
• npm
• GitHub