vizonomy-ui

Headless, accessible React UI primitives with strong TypeScript types. Includes Button, Image, Input, Select, StepModal, Tabs, Table, When, and pagination utilities.

Installation

npm install vizonomy-ui
# or
yarn add vizonomy-ui

Quick start

import { Button, Select, Table, StepModal } from 'vizonomy-ui';

function App() {
  return (
    <div>
      <Button onClick={() => alert('clicked')}>Click me</Button>
    </div>
  );
}

Components

• Button: Headless button with loading and full a11y.
• Image: Image with loading/error handling and fallback.
• Input: Controlled input with context-aware helpers.
• Select: Single/Multi select with optional autocomplete and custom rendering.
• StepModal: Headless, composable modal and step wizard.
• Tabs: Simple tab system with hooks.
• Table: Headless table with pagination, sorting, selection, fixed columns, and scrolling.
• When: Conditional rendering helper.
• Pagination utilities: Hooks and UI for pagination.

Usage examples

Select (multi + autocomplete)

import { useState } from 'react';
import { Select } from 'vizonomy-ui';

const options = [
  { id: 1, value: 'apple', label: 'Apple' },
  { id: 2, value: 'banana', label: 'Banana' },
  { id: 3, value: 'orange', label: 'Orange' },
];

export default function FruitSelect() {
  const [selected, setSelected] = useState([]);
  return (
    <Select
      options={options}
      selected={selected}
      onChange={setSelected}
      placeholder="Select fruits"
      isMulti
      autocomplete
    />
  );
}

Table (basic)

import { Table, type TableColumn } from 'vizonomy-ui';

type Row = { id: string; name: string; email: string };

const data: Row[] = [
  { id: '1', name: 'Ada', email: '[email protected]' },
  { id: '2', name: 'Alan', email: '[email protected]' },
];

const columns: TableColumn<Row>[] = [
  { id: 'name', key: 'name', label: 'Name', sortable: true },
  { id: 'email', key: 'email', label: 'Email' },
];

export default function BasicTable() {
  return <Table data={data} columns={columns} pagination={{ page: 1, pageSize: 10, total: data.length }} />;
}

TypeScript

All components are fully typed. You can import prop types from vizonomy-ui (e.g., TableColumn, SelectProps).

Licensing

MIT