@aui.io/aui-ui-kit

A lightweight React component library for building widget UIs. Ships with 20 composable components, zero-config styling, and full TypeScript support.

Current version: 0.5.2

Installation

npm install @aui.io/aui-ui-kit

Usage

ESM (Vite, webpack, etc.) -- styles are auto-loaded:

import { Card, Row, Col, Text, Button } from '@aui.io/aui-ui-kit';

CJS without a CSS pipeline -- import styles explicitly:

require('@aui.io/aui-ui-kit/style.css');

Quick Start

import { Card, Row, Text } from '@aui.io/aui-ui-kit';

const App = () => (
  <Card
    size="sm"
    modal={<Text>This opens in a modal overlay</Text>}
    modalTitle="Details"
  >
    <Row gap={2} align="center">
      <Text weight="semibold">Click to open modal</Text>
    </Row>
  </Card>
);

Components

Container

| Component | Description | |-----------|-------------| | Card | Container with size presets, theming, background images, and built-in modal integration | | Modal | Overlay container with size/position presets, header/footer slots, Escape and click-to-close |

Layout

| Component | Description | |-----------|-------------| | Row | Horizontal flex container -- alignment, justification, gap, wrapping | | Col | Vertical flex container -- alignment and gap | | Box | Generic container -- dimensions, radius, background, border, positioning | | Accordion | Collapsible panel with title header, size presets, optional color prop driving border + chevron |

Display

| Component | Description | |-----------|-------------| | Text | Typography -- 6 sizes, colors, weights, alignment, line truncation | | Icon | 150 stroke-based SVG icons with custom size and color; filled variants support color prop | | Image | Image with rounded mode, object-fit, square sizing shorthand, optional background color; width/height/size accept numbers (px) or CSS strings like "100%" | | ImageSwiper | Image carousel with navigation arrows and thumbnail strip, optional background color for letterboxing; accepts single URL, array of URLs, or array of {src, alt} objects | | Caption | Small text for labels and hints | | Chip | Colored label/tag -- 6 colors, 3 sizes | | Table | Compound data table -- Table.Row / Table.Cell, header rows, custom header/border/row colors, size presets |

Input

| Component | Description | |-----------|-------------| | Button | 9 variants (incl. ghost + outline-light for dark surfaces), 6 sizes, icon mode, block layout, custom background | | Input | Text input -- 4 sizes, 7 input types | | Textarea | Multi-line input with size presets | | Link | Styled anchor -- size, weight, underline behavior, external indicator |

Utility

| Component | Description | |-----------|-------------| | Divider | Separator line with optional SVG icon(s); supports single icon or array of icons (e.g. dot + airplane) | | Spacer | Flexible spacer that fills available space |

Card + Modal

Card has built-in modal support. Pass the modal prop to make it clickable:

<Card
  size="sm"
  modal={
    <Col gap={2}>
      <Text>Content displayed inside the modal</Text>
      <Text size="sm" color="secondary">Click overlay or press Escape to close</Text>
    </Col>
  }
  modalTitle="Product Details"
  modalSize="lg"
>
  <Row gap={2} align="center">
    <Icon name="star" size={20} color="#F59E0B" />
    <Text size="sm" weight="semibold">Click this card</Text>
  </Row>
</Card>

Modal props on Card: modal, modalTitle, modalSize, modalPosition, modalHeader, modalFooter

The Modal opened from a Card automatically inherits the Card's background, backgroundSize, backgroundPosition, backgroundRepeat, and backgroundImage — set the background once on Card and the modal matches.

Layout System

Row and Col use a 4px gap unit:

<Row gap={3} align="center" justify="between">   {/* gap = 12px */}
  <Col gap={2}>                                    {/* gap = 8px */}
    <Text>First</Text>
    <Text>Second</Text>
  </Col>
  <Spacer />
  <Button label="Action" variant="primary" size="sm" />
</Row>

Size Presets

| Preset | Usage | |--------|-------| | xs | Compact/dense UIs | | sm | Secondary content | | md | Default | | lg | Prominent content | | xl | Hero sections | | 2xl | Display headings |

TypeScript

All props interfaces and type unions are exported:

import type {
  ModalSize, ModalPosition, IModalProps,
  ButtonSize, ButtonVariant,
  TextSize, TextColor, TextWeight,
  CardSize, InputSize, InputType,
  ChipColor, ChipSize,
  AccordionSize, IAccordionProps,
  LinkSize, LinkColor, LinkWeight, LinkUnderline, LinkVariant, ILinkProps,
  TableSize, TableCellAlign, ITableProps, ITableRowProps, ITableCellProps,
} from '@aui.io/aui-ui-kit';

Peer Dependencies

• react >= 18
• react-dom >= 18

Table

Table is a compound component. Compose rows with Table.Row and cells with Table.Cell. Mark header rows with header:

<Table headerBackground="#1F2937" borderColor="#8169FF" radius={12}>
  <Table.Row header>
    <Table.Cell><Text value="Item" size="sm" color="white" /></Table.Cell>
    <Table.Cell align="end"><Text value="Qty" size="sm" color="white" /></Table.Cell>
  </Table.Row>
  <Table.Row>
    <Table.Cell><Text value="Notebook" size="sm" /></Table.Cell>
    <Table.Cell align="end"><Text value="3" size="sm" /></Table.Cell>
  </Table.Row>
</Table>

Props on Table: headerBackground, borderColor, rowBackground, size, fullWidth, radius, bordered.