# Cynco UI

The design system for accounting and ERP software: quiet, dense React components for ledgers, invoices, bank feeds and printed documents, built with Base UI and Tailwind CSS v4. Package: `@cynco-labs/ui` (AI components in `@cynco-labs/ui/ai`).

```bash
pnpm add @cynco-labs/ui @phosphor-icons/react
```

```css
@import "tailwindcss";
@import "@cynco-labs/ui/theme.css";
```

## Components (234)

- **Layout** (6): Responsive primitives every screen is built from: lists that stack, KPI rows that auto-fit, toolbars that wrap. See [/components#layout](/components.md).
- **Components** (76): Buttons, inputs, menus, dialogs, sheets, tables and charts on Base UI. See [/components#components](/components.md).
- **Productivity** (10): Spreadsheet-fast entry, the command palette, saved views, bulk actions and undo. See [/components#productivity](/components.md).
- **Documents** (17): Printable invoices, receipts, statements, payslips and financial reports in black ink. See [/components#documents](/components.md).
- **Accounting** (94): Sales, ledger, banking, reports, parties and tax screens for Malaysian businesses. See [/components#accounting](/components.md).
- **AI** (31): Chat, reasoning, tool calls, prompt input and workflow canvas for in-product agents. See [/components#ai](/components.md).

## Principles

- **Quiet by default.** Neutral surfaces and four steps of text. One blue does the pointing; colour appears only when it carries meaning.
- **Dense, not cramped.** 13px type, 28px controls and tight rows, so a ledger or a bank feed fits on one screen without feeling crowded.
- **Responsive to its container.** Components use container queries, so the same list works in a page, a side sheet and on a phone.
- **Money is exact.** Amounts are decimal strings, maths is done in sen, figures are tabular and right-aligned and never truncate.
- **Keyboard first.** Spreadsheet-fast journal entry, ⌘K everywhere, visible shortcuts and Undo instead of “Are you sure?”.
- **Black ink on paper.** Invoices, statements and reports print in black ink at real paper sizes, in English, Malay or both.

## Guides

- [Installation](/installation.md): Install the package, set up Tailwind or the standalone CSS, fonts, themes and providers.
- [CLI](/cli.md): Browse components and their docs from the terminal.
- [Changelog](/changelog.md): Release notes for @cynco-labs/ui.
- [Colors](/colors.md): Every colour token, per theme, with what it is for.
- [Typography](/typography.md): Inter and JetBrains Mono, the type classes, sizes and weights.
- [Layout](/layout.md): Container queries, the layout primitives and the rules that keep screens working from 320px up.
- [Accessibility](/accessibility.md): Keyboard, focus, labels, contrast and status without colour alone.
- [Documents](/documents.md): The document kit: brand, layouts, languages, print and PDF.