invin-uix

A comprehensive React UI component library built for enterprise security applications.
70+ production-ready components with OKLCH design tokens, dark/light themes, and 7 product accent palettes.

Why invin-uix?

• Enterprise-Ready: Built for SOC dashboards, incident management, and security operations
• 70+ Components: From basic buttons to complex data tables, flow builders, animations, and guided tours
• 12 Animation Components: Text animations, number tickers, theme togglers powered by Motion
• Design Token System: UI Guide v2.0 compliant with OKLCH color space for consistent theming
• Accessibility First: Radix primitives for ~20 components, ARIA-compliant custom components
• Tree-Shakeable: Import only what you need with subpath exports
• TypeScript Native: Full type definitions for all components and props
• Tailwind v4 Ready: Ships with @theme block — no config file needed
• Dark Mode Default: Enterprise-grade dark theme with light mode support

Quick Start

1. Install

npm install invin-uix
npm install -D tailwindcss @tailwindcss/vite

2. Configure Vite

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

3. Setup CSS

/* src/index.css */
@import "tailwindcss";
@import "invin-uix/tokens.css";

html, body, #root {
  min-height: 100vh;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), system-ui, sans-serif;
}

4. Set Theme

// src/main.jsx
document.documentElement.setAttribute('data-theme', 'dark')
document.documentElement.setAttribute('data-accent', 'xdr')

5. Use Components

import { Button } from 'invin-uix/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from 'invin-uix/ui/card'
import { DataTable } from 'invin-uix/ui/data-table'

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Security Dashboard</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="primary">View Incidents</Button>
      </CardContent>
    </Card>
  )
}

Component Reference

Display Components

| Component | Import | Description | |-----------|--------|-------------| | Button | invin-uix/ui/button | Primary, secondary, outline, ghost, destructive variants | | Badge | invin-uix/ui/badge | Status indicators, labels, notification counts | | Card | invin-uix/ui/card | Container with header, content, footer slots | | Alert | invin-uix/ui/alert | Informational, warning, error messages | | Avatar | invin-uix/ui/avatar | User avatars with fallback and groups | | Separator | invin-uix/ui/separator | Horizontal/vertical dividers with optional text | | Skeleton | invin-uix/ui/skeleton | Loading placeholders | | Spinner | invin-uix/ui/spinner | Loading indicators | | Label | invin-uix/ui/label | Form labels with required indicator | | KPI Card | invin-uix/ui/kpi-card | Metric display with trend indicators | | Collapsible | invin-uix/ui/collapsible | Expandable content sections | | Icons | invin-uix/ui/icons | Full Phosphor icon set + 26 product icons |

Form Components

| Component | Import | Description | |-----------|--------|-------------| | Form | invin-uix/ui/form | Form wrapper with validation hooks | | Input | invin-uix/ui/input | Text, email, password, search inputs | | NumberInput | invin-uix/ui/number-input | Numeric input with increment/decrement | | Textarea | invin-uix/ui/textarea | Multi-line text input | | Select | invin-uix/ui/select | Dropdown with groups and search | | Combobox | invin-uix/ui/combobox | Searchable select with custom values | | Checkbox | invin-uix/ui/checkbox | Single or group checkboxes | | Radio Group | invin-uix/ui/radio-group | Single-select option groups | | Switch | invin-uix/ui/switch | Toggle switches | | Slider | invin-uix/ui/slider | Range sliders | | Toggle | invin-uix/ui/toggle | Pressable toggle buttons | | Toggle Group | invin-uix/ui/toggle | Single/multi-select button groups | | Progress | invin-uix/ui/progress | Progress bars | | Tabs | invin-uix/ui/tabs | Tabbed navigation |

Overlay Components

| Component | Import | Description | |-----------|--------|-------------| | Dialog | invin-uix/ui/dialog | Modal dialogs | | Alert Dialog | invin-uix/ui/alert-dialog | Confirmation dialogs | | Drawer | invin-uix/ui/drawer | Slide-out panels (left/right/top/bottom) | | Command | invin-uix/ui/command | Command palette (Cmd+K) | | Tooltip | invin-uix/ui/tooltip | Hover tooltips | | Popover | invin-uix/ui/popover | Click-triggered popovers | | Dropdown Menu | invin-uix/ui/dropdown-menu | Context menus | | Context Menu | invin-uix/ui/context-menu | Right-click menus | | Hover Card | invin-uix/ui/hover-card | Rich hover previews | | Toast | invin-uix/ui/toast | Notifications |

Error Handling

| Component | Import | Description | |-----------|--------|-------------| | ErrorBoundary | invin-uix/ui/error-boundary | Catch React errors with fallback UI |

Data Components

| Component | Import | Description | |-----------|--------|-------------| | Table | invin-uix/ui/table | Basic data tables | | Data Table | invin-uix/ui/data-table | Sorting, search, pagination, selection | | Accordion | invin-uix/ui/accordion | Collapsible content panels | | Menu | invin-uix/ui/menu | Navigation menus | | Tree View | invin-uix/ui/tree-view | Hierarchical tree navigation | | Breadcrumb | invin-uix/ui/breadcrumb | Navigation breadcrumbs | | Pagination | invin-uix/ui/pagination | Page navigation | | Calendar | invin-uix/ui/calendar | Date selection calendar | | Date Picker | invin-uix/ui/date-picker | Date input with calendar popup | | Chart | invin-uix/ui/chart | Line, bar, pie charts | | Stepper | invin-uix/ui/stepper | Multi-step progress indicators | | Timeline | invin-uix/ui/timeline | Event timelines | | File Upload | invin-uix/ui/file-upload | Drag-and-drop file uploads |

Layout Components

| Component | Import | Description | |-----------|--------|-------------| | Topbar | invin-uix/ui/topbar | Application header | | Sidebar | invin-uix/ui/sidebar | Collapsible navigation sidebar | | Scroll Area | invin-uix/ui/scroll-area | Custom scrollbars | | Resizable | invin-uix/ui/resizable | Resizable panels | | Aspect Ratio | invin-uix/ui/aspect-ratio | Fixed aspect ratio containers | | Tour | invin-uix/ui/tour | Guided product tours | | Flow Builder | invin-uix/ui/flow-builder | Node-based workflow editor |

Animation Components

| Component | Import | Description | |-----------|--------|-------------| | TextAnimate | invin-uix/ui/text-animate | Staggered text animations (fade, blur, slide) | | TypingAnimation | invin-uix/ui/typing-animation | Typewriter effect with cursor | | NumberTicker | invin-uix/ui/number-ticker | Animated number counter | | WordRotate | invin-uix/ui/word-rotate | Cycling word animations | | ShinyText | invin-uix/ui/shiny-text | Shimmer text effect | | GradientText | invin-uix/ui/gradient-text | Animated gradient text | | HyperText | invin-uix/ui/hyper-text | Scrambling text reveal | | AuroraText | invin-uix/ui/aurora-text | Aurora borealis text effect | | SpinningText | invin-uix/ui/spinning-text | Circular rotating text | | Highlighter | invin-uix/ui/highlighter | Hand-drawn text annotations | | Text3DFlip | invin-uix/ui/text-3d-flip | 3D flip card text | | AnimatedThemeToggler | invin-uix/ui/animated-theme-toggler | Animated theme toggle with transitions |

Theming

Dark / Light Mode

// Dark mode (default)
document.documentElement.setAttribute('data-theme', 'dark')

// Light mode
document.documentElement.setAttribute('data-theme', 'light')

Product Accents

Seven enterprise product palettes:

| Accent | Product | Primary Color | |--------|---------|---------------| | xdr | ISOC Core | Blue (default) | | xdrplus | ISOC Extension | Indigo | | oxdr | UEMP | Violet | | gsos | GRC | Emerald | | pulse | CPS Pulse | Cyan | | regimentAI | RegimentAI | Rose | | assentra | Assentra | Amber |

document.documentElement.setAttribute('data-accent', 'xdr')

Custom Branding

Override CSS tokens for complete customization:

:root {
  --accent: #6366f1;
  --accent-foreground: #ffffff;
  --radius-md: 8px;
  --font-sans: 'Inter', system-ui, sans-serif;
}

Design Tokens

All styling uses CSS custom properties for consistency and theming.

Typography

| Token | Value | Use | |-------|-------|-----| | --text-display | 30px | Hero headlines | | --text-title | 20px | Page titles | | --text-section | 18px | Section headers | | --text-body | 14px | Body text (default) | | --text-label | 13px | Labels, buttons | | --text-caption | 12px | Captions (floor) |

Spacing

| Token | Value | Use | |-------|-------|-----| | --space-1 | 4px | Tight gaps | | --space-2 | 8px | Default gap | | --space-4 | 16px | Section gap | | --space-6 | 24px | Card padding |

Radius

| Token | Value | Use | |-------|-------|-----| | --radius-sm | 6px | Chips, badges | | --radius-md | 8px | Buttons, inputs | | --radius-lg | 10px | Cards, popovers | | --radius-xl | 14px | Modals, drawers |

Z-Index Layers

| Token | Value | Use | |-------|-------|-----| | --z-dropdown | 100 | Menus, selects | | --z-overlay | 200 | Backdrops | | --z-modal | 300 | Dialogs, drawers | | --z-toast | 400 | Notifications | | --z-tooltip | 500 | Tooltips |

Form Integration

Works seamlessly with React Hook Form and Zod:

import { useForm, Controller } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Button, Input, Label, Select } from 'invin-uix'

const schema = z.object({
  email: z.string().email(),
  role: z.string().min(1),
})

function MyForm() {
  const { register, control, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  })

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Label htmlFor="email" required>Email</Label>
      <Input id="email" {...register('email')} />
      {errors.email && <span className="text-[var(--error)]">{errors.email.message}</span>}

      <Controller
        name="role"
        control={control}
        render={({ field }) => (
          <Select value={field.value} onValueChange={field.onChange}>
            {/* ... options ... */}
          </Select>
        )}
      />

      <Button type="submit">Submit</Button>
    </form>
  )
}

VS Code Snippets

Add to .vscode/invin-ui.code-snippets for rapid development:

{
  "Invin Button": {
    "prefix": "ivbtn",
    "body": ["<Button variant=\"${1|primary,secondary,outline,ghost,destructive|}\">${2:Label}</Button>"]
  },
  "Invin Card": {
    "prefix": "ivcard",
    "body": ["<Card>", "  <CardHeader><CardTitle>${1:Title}</CardTitle></CardHeader>", "  <CardContent>$0</CardContent>", "</Card>"]
  },
  "Invin Form Field": {
    "prefix": "ivfield",
    "body": ["<div className=\"space-y-2\">", "  <Label htmlFor=\"${1:id}\">${2:Label}</Label>", "  <Input id=\"${1:id}\" {...register('${1:id}')} />", "</div>"]
  }
}

See PATTERNS.md for more snippets and recipes.

Documentation

For Consumers (Using the Library)

• Getting Started — Installation, setup, and first steps
• Design Tokens — Complete token reference
• Theming — Dark/light modes, accents, custom branding
• Patterns — Copy-paste recipes for common UI patterns
• Component Docs — Individual component API references
• Migration Guide — Migrating from other UI libraries
• Preset Guide — Tailwind utility class reference

For Developers (Contributing to the Library)

• Developer Guide — Complete setup, development workflow, and publishing
• Contributing — Contribution guidelines and git conventions
• Design System — Design rules and anti-slop guardrails
• Token Architecture — Token system design specification

Requirements

• React 18+
• Tailwind CSS v4
• Vite (recommended) or any bundler with Tailwind v4 support

Bundled Dependencies

The following dependencies are bundled with invin-uix and do not need separate installation:

| Dependency | Used By | Purpose | |------------|---------|---------| | motion | Animation components | TextAnimate, TypingAnimation, viewport detection | | rough-notation | Highlighter | Hand-drawn annotation effects | | recharts | Chart | Line, bar, pie, area charts | | @xyflow/react | FlowBuilder | Node-based workflow editor | | @phosphor-icons/react | Icons | 6,000+ icons | | react-remove-scroll | Dialog, Drawer | Scroll lock for overlays |

Development

pnpm install        # Install dependencies
pnpm build          # Build library to dist/
pnpm dev            # Build in watch mode
pnpm test           # Run Vitest tests
pnpm typecheck      # TypeScript check
pnpm lint           # ESLint

Project Structure

src/
├── components/     # 70+ component directories
│   ├── button/
│   ├── card/
│   ├── data-table/
│   ├── error-boundary/
│   ├── form/
│   ├── number-input/
│   ├── text-animate/
│   ├── shiny-text/
│   └── ...
├── tokens/         # CSS custom properties
│   ├── colors.css
│   ├── typography.css
│   ├── spacing.css
│   └── ...
└── index.ts        # Main entry point

docs/
└── src/content/docs/
    ├── getting-started.mdx
    ├── tokens.mdx
    ├── theming.mdx
    └── components/   # 70+ component docs

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-component)
3. Make your changes with tests
4. Run pnpm test && pnpm typecheck && pnpm lint
5. Commit with conventional commits (feat:, fix:, docs:)
6. Open a pull request

License

MIT