# Cynco UI

> The design system for accounting and ERP software: React components, layout primitives, productivity patterns and printable business documents (@cynco-labs/ui). Every page below is Markdown.

Install with `pnpm add @cynco-labs/ui @phosphor-icons/react`, then `@import "tailwindcss"; @import "@cynco-labs/ui/theme.css";`. AI components import from `@cynco-labs/ui/ai`.

## Getting started

- [Introduction](https://ui.cynco.io/index.md): What Cynco UI is, what is in it and the principles behind it.
- [Installation](https://ui.cynco.io/installation.md): Install the package, set up Tailwind or the standalone CSS, fonts, themes and providers.
- [CLI](https://ui.cynco.io/cli.md): Browse components and their docs from the terminal.
- [Changelog](https://ui.cynco.io/changelog.md): Release notes for @cynco-labs/ui.

## Foundations

- [Colors](https://ui.cynco.io/colors.md): Every colour token, per theme, with what it is for.
- [Typography](https://ui.cynco.io/typography.md): Inter and JetBrains Mono, the type classes, sizes and weights.
- [Layout](https://ui.cynco.io/layout.md): Container queries, the layout primitives and the rules that keep screens working from 320px up.
- [Accessibility](https://ui.cynco.io/accessibility.md): Keyboard, focus, labels, contrast and status without colour alone.
- [Documents](https://ui.cynco.io/documents.md): The document kit: brand, layouts, languages, print and PDF.

## Components

- [All components](https://ui.cynco.io/components.md): every component by category, with summaries.

### Layout

- [DataList](https://ui.cynco.io/components/data-list.md): The one way to show rows of records: Cynco UI's tray table on wide containers, one stacked card per row on narrow ones.
- [StatTile](https://ui.cynco.io/components/stat-tile.md): One KPI (label, value, optional unit, sub line, badge and status dot) and StatGrid, the auto-fitting grid that holds them.
- [SectionPanel](https://ui.cynco.io/components/section-panel.md): A titled card whose header actions wrap under the title when the container is narrow.
- [KeyValueList](https://ui.cynco.io/components/key-value-list.md): A label/value list: side by side when there's room, label above value below 16rem.
- [ActionBar](https://ui.cynco.io/components/action-bar.md): ActionBar is a row of controls that wraps instead of overflowing; ScrollRow is a single row that scrolls sideways (tabs, steppers, chips).
- [ToneDot](https://ui.cynco.io/components/tone-dot.md): A 6px dot (or square) in one of Cynco UI's status tones; toneBg exposes the same background classes for bars and legend keys.

### Components

- [Button](https://ui.cynco.io/components/button.md): Cynco's one button: six variants on Base UI's Button, 28px tall by default.
- [ButtonGroup](https://ui.cynco.io/components/button-group.md): Joins adjacent buttons, inputs or selects into one segmented control.
- [IconButton](https://ui.cynco.io/components/icon-button.md): A Button with a leading or trailing icon slot, sized for Cynco's 14px Phosphor icons.
- [IconTooltipButton](https://ui.cynco.io/components/icon-tooltip-button.md): An icon-only button that always carries a tooltip label.
- [ShortcutButton](https://ui.cynco.io/components/shortcut-button.md): A primary or secondary Button that shows and binds a keyboard shortcut.
- [ToolbarButton](https://ui.cynco.io/components/toolbar-button.md): The 20px vertical-ellipsis button that opens a table row's actions menu.
- [CopyButton](https://ui.cynco.io/components/copy-button.md): Copy-to-clipboard buttons for IDs and keys, with a "Copied!" tooltip.
- [CopyTextButton](https://ui.cynco.io/components/copy-text-button.md): A bordered mono chip that copies its text, with a copy icon.
- [InlineAction](https://ui.cynco.io/components/inline-action.md): A text-link-style action with an optional small icon.
- [PanelButton](https://ui.cynco.io/components/panel-button.md): A large, tactile tile button with screws and seams; the selected tile takes a primary border and a check mark in its corner.
- [GroupedTabButton](https://ui.cynco.io/components/grouped-tab-button.md): A segmented tab control: equal-width options in a single pill track.
- [Input](https://ui.cynco.io/components/input.md): The single-line text input: 28px, `interactive-secondary` fill, `input` border.
- [InputGroup](https://ui.cynco.io/components/input-group.md): An input with addons — icons, text, buttons — inside one bordered field.
- [InputOTP](https://ui.cynco.io/components/input-otp.md): One-time-code input built on input-otp: grouped slots with an optional separator.
- [Textarea](https://ui.cynco.io/components/textarea.md): Multi-line text input with the input styling.
- [LongInput](https://ui.cynco.io/components/long-input.md): A monospace-friendly textarea on `input-background` for JSON and long values.
- [LabelInput](https://ui.cynco.io/components/label-input.md): A labelled Input with an optional description line above it.
- [TagInput](https://ui.cynco.io/components/tag-input.md): A free-text input that turns entries into removable tags.
- [TagSelect](https://ui.cynco.io/components/tag-select.md): A multi-select shown as removable tags in a select-style field.
- [DateInputUnix](https://ui.cynco.io/components/date-input-unix.md): A date (and optional time) picker whose value is a Unix timestamp in milliseconds.
- [TimePickerInput](https://ui.cynco.io/components/time-picker-input.md): A two-digit time segment input (hours, minutes, 12-hour) with arrow-key stepping.
- [Calendar](https://ui.cynco.io/components/calendar.md): Month calendar on react-day-picker 8, selected day filled with `primary`.
- [Select](https://ui.cynco.io/components/select.md): Base UI select with a 28px trigger and an `overlay` popup with check indicators.
- [SearchableSelect](https://ui.cynco.io/components/searchable-select.md): A generic select with a search box, built on Popover + Command.
- [Checkbox](https://ui.cynco.io/components/checkbox.md): Square checkbox in three sizes, `primary` when checked.
- [TextCheckbox](https://ui.cynco.io/components/text-checkbox.md): A Checkbox with a clickable text label.
- [AreaCheckbox](https://ui.cynco.io/components/area-checkbox.md): A checkbox with a title and description, optionally revealing children when checked.
- [IconCheckbox](https://ui.cynco.io/components/icon-checkbox.md): A toggle that looks like a small secondary button with an icon; checked shows the `primary` border and a check mark in its corner.
- [RadioGroup](https://ui.cynco.io/components/radio-group.md): Base UI radio group; items are small circles filled with `primary`.
- [AreaRadioGroupItem](https://ui.cynco.io/components/area-radio-group-item.md): A radio option with a label and description line.
- [Switch](https://ui.cynco.io/components/switch.md): On/off switch, 36×20 (or 28×16 inside `SwitchSizeProvider size="sm"`).
- [Dialog](https://ui.cynco.io/components/dialog.md): Centered modal on `overlay-dialog` with `overlay-dialog-shadow`.
- [Sheet](https://ui.cynco.io/components/sheet.md): A side panel for create/edit flows, sliding in from any edge.
- [Popover](https://ui.cynco.io/components/popover.md): A floating panel on `overlay` anchored to a trigger.
- [Tooltip](https://ui.cynco.io/components/tooltip.md): Short label shown on hover/focus; delay 0 by default.
- [HoverCard](https://ui.cynco.io/components/hover-card.md): A richer hover preview (Base UI PreviewCard).
- [DropdownMenu](https://ui.cynco.io/components/dropdown-menu.md): Base UI menu: items with icons, shortcuts, checkbox/radio items, submenus and a destructive variant.
- [Command](https://ui.cynco.io/components/command.md): cmdk command palette: search input, grouped items, shortcuts, footer hints.
- [InfoTooltip](https://ui.cynco.io/components/info-tooltip.md): A small info icon that shows an explanatory tooltip.
- [ConditionalTooltip](https://ui.cynco.io/components/conditional-tooltip.md): Wraps an element in a tooltip only when `enabled`.
- [SheetCloseButton](https://ui.cynco.io/components/sheet-close-button.md): The ✕ button positioned in a sheet's top-right corner.
- [SheetBackdrop](https://ui.cynco.io/components/sheet-backdrop.md): Full-viewport dimming backdrop for inline sheets, portaled to the body.
- [Tabs](https://ui.cynco.io/components/tabs.md): Base UI tabs with `default` (pill) and `underline` list variants.
- [Breadcrumb](https://ui.cynco.io/components/breadcrumb.md): Breadcrumb trail with chevron separators.
- [Pagination](https://ui.cynco.io/components/pagination.md): Minimal pagination containers (nav › list › item).
- [Accordion](https://ui.cynco.io/components/accordion.md): Base UI accordion with a chevron that rotates open.
- [SheetAccordion](https://ui.cynco.io/components/sheet-accordion.md): Accordion sections styled for sheets: title, description, optional separators.
- [Collapsible](https://ui.cynco.io/components/collapsible.md): Show/hide a region with a trigger.
- [Carousel](https://ui.cynco.io/components/carousel.md): Embla carousel with previous/next buttons.
- [Badge](https://ui.cynco.io/components/badge.md): A small rounded label in three variants.
- [BetaBadge](https://ui.cynco.io/components/beta-badge.md): A tiny "BETA" tag.
- [IconBadge](https://ui.cynco.io/components/icon-badge.md): A badge with a leading or trailing icon.
- [StatusChip](https://ui.cynco.io/components/status-chip.md): A neutral chip whose only colour is a small status square with a glyph.
- [StepBadge](https://ui.cynco.io/components/step-badge.md): A small numbered square for step lists.
- [SectionTag](https://ui.cynco.io/components/section-tag.md): A muted uppercase-free tag that labels a section.
- [FilterChip](https://ui.cynco.io/components/filter-chip.md): An active filter shown as `label value ×`.
- [InfoRow](https://ui.cynco.io/components/info-row.md): A label/value row with an optional icon.
- [Card](https://ui.cynco.io/components/card.md): A `card` surface with header, title, description, action, content and footer slots.
- [Alert](https://ui.cynco.io/components/alert.md): Inline notice in five tones: default, note, success, warning, destructive.
- [Table](https://ui.cynco.io/components/table.md): Plain table primitives (table, header, row, head, cell, footer, caption).
- [DataTable](https://ui.cynco.io/components/data-table.md): Cynco's data-table kit on TanStack Table: toolbar, heading, tray, header, body, virtualisation, pagination and column visibility.
- [ChartContainer](https://ui.cynco.io/components/chart-container.md): shadcn chart wrapper for Recharts: maps a config to `--color-<key>` variables and supplies tooltip and legend content.
- [Progress](https://ui.cynco.io/components/progress.md): A thin progress bar, `primary` on a muted track.
- [Skeleton](https://ui.cynco.io/components/skeleton.md): A pulsing `muted` placeholder block.
- [SmallSpinner](https://ui.cynco.io/components/small-spinner.md): A small circular spinner.
- [LoadingShimmerText](https://ui.cynco.io/components/loading-shimmer-text.md): A line of text with a moving shimmer and spinner.
- [CopyablePre](https://ui.cynco.io/components/copyable-pre.md): A code block (or inline span) with a copy button.
- [Label](https://ui.cynco.io/components/label.md): A plain form label.
- [FormLabel](https://ui.cynco.io/components/form-label.md): The standard field label (a native `<label>`) in `text-form-label`, dimmed when disabled.
- [FieldLabel](https://ui.cynco.io/components/field-label.md): A field label (a native `<label>`) with optional description and info tooltip.
- [PageHeader](https://ui.cynco.io/components/page-header.md): Page title row: icon + title (+ accessory) on the left, actions on the right.
- [PageContainer](https://ui.cynco.io/components/page-container.md): The main content panel that sits on `outer-background`.
- [SandboxBanner](https://ui.cynco.io/components/sandbox-banner.md): The blue tab hanging from the top edge that marks sandbox mode.
- [Separator](https://ui.cynco.io/components/separator.md): A 1px horizontal or vertical rule in `border`.
- [ScrollArea](https://ui.cynco.io/components/scroll-area.md): A scroll container with thin custom scrollbars.
- [ResizablePanelGroup](https://ui.cynco.io/components/resizable-panel-group.md): Resizable split panes (react-resizable-panels 4).

### Productivity

- [AmountInput](https://ui.cynco.io/components/amount-input.md): The money field accountants type into: accepts plain figures, “1,234.50”, accounting brackets “(500)”, “1.2k” and formulas like “=1200*1.08” or “100+250.50-20”, and commits an exact decimal string.
- [JournalGrid](https://ui.cynco.io/components/journal-grid.md): A keyboard-first journal line editor: searchable Account, Description, Debit and Credit cells with spreadsheet movement, auto-balance and a sticky footer showing Total Dr, Total Cr and whether the entry balances.
- [InlineEditCell](https://ui.cynco.io/components/inline-edit-cell.md): A table cell that edits in place: click, Enter or F2 to edit text or an amount, Enter or Tab to save, Esc to cancel, with a spinner while an async save is pending and a revert plus message when it fails.
- [CommandPalette](https://ui.cynco.io/components/command-palette.md): A ⌘K / Ctrl+K command palette on Cynco UI's CommandDialog: jump to any area, create documents, reopen recent records and run app actions, with fuzzy search across labels, keywords, document numbers and amounts.
- [ShortcutsDialog](https://ui.cynco.io/components/shortcuts-dialog.md): A searchable dialog listing every keyboard shortcut in sections, opened with “?”, plus useGoToShortcuts for two-key “g then i” navigation.
- [SavedViewsBar](https://ui.cynco.io/components/saved-views-bar.md): Saved views for any list: a scrolling row of view tabs with counts, the active filters as removable FilterChips, and Save / Save as new / Reset once the filters drift from the view; rename, duplicate, share and delete from the active view's menu.
- [BulkActionBar](https://ui.cynco.io/components/bulk-action-bar.md): Floating toolbar for ticked rows: "3 selected · RM 34,890.00", Select all N / Clear, the main actions as buttons and the rest in a ⋯ menu.
- [UndoToast](https://ui.cynco.io/components/undo-toast.md): "Do it, then offer Undo": a toast with the message, an Undo button (⌘/Ctrl+Z), an optional countdown and late commit — the real write runs in onCommit only if nobody undoes.
- [DensityToggle](https://ui.cynco.io/components/density-toggle.md): Compact / Default / Comfortable row density as a small segmented radio group with line-spacing icons; its value drives DensityProvider.
- [PrintButton](https://ui.cynco.io/components/print-button.md): A "Print" button with a printer icon and a ⌘/Ctrl+P keycap; calls window.print() unless onPrint is given.

### Documents

- [DocumentStudio](https://ui.cynco.io/components/document-studio.md): The brand editor for every printed document: logo, layout, typeface, language and footer note, with a live preview of any document at any paper size and stamp.
- [DocumentPage](https://ui.cynco.io/components/document-page.md): The document kit: a sheet of paper plus the parts every business document is assembled from — Letterhead, DocumentMeta, PartyGrid, DocumentTable, TotalsBlock, PaymentBlock, EInvoiceBlock, NotesBlock, SignatureBlock, DocumentFooter, DocFields, DocCallout, DocFigureStrip, DocAmountWords.
- [TaxInvoiceDocument](https://ui.cynco.io/components/tax-invoice-document.md): Malaysian tax invoice — or plain Invoice for a seller not registered for SST — assembled from the document kit.
- [QuotationDocument](https://ui.cynco.io/components/quotation-document.md): Quotation with grouped line sections and subtotals, optional add-on items, totals, terms & conditions and a customer acceptance block beside the issuer's signature.
- [AdjustmentNoteDocument](https://ui.cynco.io/components/adjustment-note-document.md): Credit note or debit note (kind) against an original invoice, with reason, lines, totals and the MyInvois e-invoice block.
- [ReceiptDocument](https://ui.cynco.io/components/receipt-document.md): Official receipt in A4, A5 or 80mm thermal size: received from, payment method, amount received, allocation to invoices, amount in words and received-by signature.
- [DeliveryOrderDocument](https://ui.cynco.io/components/delivery-order-document.md): Delivery order without prices: deliver-to and bill-to, delivery date, vehicle and driver, ordered / delivered / back-ordered quantities, packages and weight, and a goods-received block.
- [PurchaseOrderDocument](https://ui.cynco.io/components/purchase-order-document.md): A purchase order to a vendor: letterhead with PO number, PO date / required-by / terms / quotation ref / requester, vendor and deliver-to blocks, priced lines with item code, quantity + unit and SST rate, posted totals in words, delivery instructions, terms and prepared-by / approved-by signatures.
- [PaymentVoucherDocument](https://ui.cynco.io/components/payment-voucher-document.md): A payment voucher: payment date, method (bank transfer with reference, cheque with number, cash, DuitNow, card) and the account it was paid from, payee with bank details, 'Being payment for' purpose, the bills or expense lines paid with account codes, total paid in words, and a four-step approval chain.
- [StatementOfAccountDocument](https://ui.cynco.io/components/statement-of-account-document.md): A customer or vendor statement: statement date, period, account no. and terms; the party with an account summary (opening, invoices & charges, payments & credits, closing balance); every transaction with date, type, number, description, debit, credit and running balance; an aging strip ending in the total due; payment details and a tear-off remittance slip.
- [PayslipDocument](https://ui.cynco.io/components/payslip-document.md): A Malaysian payslip: employer (EPF / SOCSO / LHDN employer numbers) and employee particulars (staff ID, IC, position, department, EPF, SOCSO and income tax numbers, bank account), pay period and pay date, Earnings and Deductions side by side, gross / total deductions / net pay with net pay in words, employer EPF / SOCSO / EIS / HRD Corp contributions as a quieter strip, year-to-date figures and a confidentiality note.
- [ProfitAndLossReport](https://ui.cynco.io/components/profit-and-loss-report.md): Printable Statement of Profit or Loss: revenue, cost of sales, gross profit, grouped operating expenses, operating profit, other income and finance costs, profit before tax, tax and profit for the period, with comparative period, variance and variance %.
- [BalanceSheetReport](https://ui.cynco.io/components/balance-sheet-report.md): Printable Statement of Financial Position: non-current and current assets, current and non-current liabilities, equity, the 'Total equity and liabilities' line with an accountant's double rule, and a Balanced / Out-of-balance check.
- [TrialBalanceDocument](https://ui.cynco.io/components/trial-balance-document.md): Printable trial balance: account code, account name, debit and credit grouped by account type, matching totals with a double rule, and a quiet 'Balanced' or red 'Out of balance by RM x' line.
- [GeneralLedgerReport](https://ui.cynco.io/components/general-ledger-report.md): Printable general ledger: per account a header with code, name and opening balance, dated lines with journal no., description, debit, credit and running balance (Dr/Cr), and a closing-balance row with period totals.
- [AgedReceivablesReport](https://ui.cynco.io/components/aged-receivables-report.md): Printable aged receivables by customer: current, 1–30, 31–60, 61–90 and 90+ days with a total column, a totals row with double rule, a % of total row, and a bucket summary with proportional bars.
- [CashFlowReport](https://ui.cynco.io/components/cash-flow-report.md): Printable Statement of Cash Flows (indirect method): profit before tax, adjustments, working-capital changes, cash generated from operations, interest and tax paid, investing and financing activities, net change, opening and closing cash, with a reconciliation check.

### Accounting

- [InvoiceListTable](https://ui.cynco.io/components/invoice-list-table.md): The invoices list: Invoice #, Customer, Date, Due Date, Amount and Status, with row selection, sort headers and per-row actions.
- [InvoiceLineItems](https://ui.cynco.io/components/invoice-line-items.md): Editable invoice line rows (item and description, qty, unit price, discount, tax code, amount) with a margin dot, a total and estimated-profit footer, and Add item, Browse library and Add line actions.
- [InvoiceTotalsPanel](https://ui.cynco.io/components/invoice-totals-panel.md): The document totals block: Subtotal, Discount (n%), the tax line(s), Total, and Deposit and Balance Due when a deposit is set.
- [InvoiceMetricTiles](https://ui.cynco.io/components/invoice-metric-tiles.md): The all-time invoice metric strip: Sales, Paid, Pending and Overdue, where Overdue turns red and shows an 'n invoices' badge.
- [InvoiceCreateSteps](https://ui.cynco.io/components/invoice-create-steps.md): The invoice builder's vertical three-step rail (Customer Information, Line Items, Invoice Summary) with numbered and checked step markers and a connecting line.
- [InvoiceSummaryRail](https://ui.cynco.io/components/invoice-summary-rail.md): The always-visible total bar under the builder: Subtotal, Discount and Tax figures, a large Total and a caret that opens the full breakdown above it, plus trailing actions.
- [InvoiceActionsPanel](https://ui.cynco.io/components/invoice-actions-panel.md): The invoice view's Actions card, which lists only the shortcuts the status allows (Send email or reminder, Mark as paid, Download receipt, Edit, Delivery orders, Credit and debit notes).
- [MarkAsPaidDialog](https://ui.cynco.io/components/mark-as-paid-dialog.md): Records a manual payment against an invoice: a fact block (customer, invoice, amount, balance to record), payment date, payment method chips, the 'Deposited to' bank account, a note, an offline-payment warning and confirm, plus a 'Payment recorded' success state.
- [InvoiceBulkBar](https://ui.cynco.io/components/invoice-bulk-bar.md): A floating toolbar for ticked invoice rows: 'n selected', Download PDFs, Delete and clear. A blocked action dims and keeps its reason as a tooltip (drafts have no PDF, invoices with payments or voided can't be deleted).
- [InvoiceFilterChips](https://ui.cynco.io/components/invoice-filter-chips.md): One removable chip per active list filter (search, status, issued, due or created period, amount range, issued by, currency), plus Clear all.
- [CreditNoteSummary](https://ui.cynco.io/components/credit-note-summary.md): A credit or debit note's totals and where its money went: Applied, Refunded and Credit left for a credit note, or Paid and Still owed for a debit note, with an optional Payments list.
- [CreditDebitNoteList](https://ui.cynco.io/components/credit-debit-note-list.md): The credit and debit notes list: Note, Type, Customer, Amount, Status, Date and a row menu.
- [QuotationBoardCard](https://ui.cynco.io/components/quotation-board-card.md): One quotation on the Kanban board: customer, quotation number, status, total and relative age ('3d ago', 'Yesterday').
- [QuotationBoardColumn](https://ui.cynco.io/components/quotation-board-column.md): One Kanban column of the quotations board (Draft, Sent / Viewed, Accepted, or Rejected / Expired): icon, label and count above a tray of cards with a column Total, or an empty message.
- [QuotationStats](https://ui.cynco.io/components/quotation-stats.md): The quotation KPI row: Total quoted, Sent, Accepted and Conversion rate.
- [RecurringTemplateTable](https://ui.cynco.io/components/recurring-template-table.md): The recurring invoice templates list: Customer with email, Frequency, Next generation, Amount, Generated count and Status.
- [AccountingWorkbenchHeader](https://ui.cynco.io/components/accounting-workbench-header.md): The slim title bar and metric strip that open every accounting workbench tab (Overview, Journal, Ledger, Periods, Opening Balances).
- [JournalEntryHeader](https://ui.cynco.io/components/journal-entry-header.md): The journal entry form's top bar: Back, the title with the entry number, the entry status and the From template / Save Draft / Save & Post actions.
- [JournalLineEditor](https://ui.cynco.io/components/journal-line-editor.md): The spreadsheet-style debit/credit grid of a journal entry, with an account picker in each Account cell, line description, grouped amount inputs and Add line.
- [AccountPickerField](https://ui.cynco.io/components/account-picker-field.md): A searchable chart-of-accounts picker: recent accounts first, then one group per account type, codes in mono with the account's normal balance (DR/CR).
- [JournalBalanceBar](https://ui.cynco.io/components/journal-balance-bar.md): The journal form's DR = CR footer: debit and credit totals with Balanced or Off by MYR x, plus the auto-save line.
- [JournalDraftRecoveryBanner](https://ui.cynco.io/components/journal-draft-recovery-banner.md): The banner offering to recover an unsaved local journal draft.
- [JournalLinesTable](https://ui.cynco.io/components/journal-lines-table.md): The read-only line items of a saved journal entry: line number, account (code, name, type), description, debit, credit and totals.
- [JournalEntryDetailsRail](https://ui.cynco.io/components/journal-entry-details-rail.md): The Details · Memo · Activity panel beside a journal entry, with the approval/posting timeline.
- [ChartOfAccountsTree](https://ui.cynco.io/components/chart-of-accounts-tree.md): The nested Chart of Accounts: expandable header accounts, category dot, mono code, name, type and balance, with inactive accounts marked.
- [CoaAccountPanel](https://ui.cynco.io/components/coa-account-panel.md): The detail panel for a selected account: current balance, normal balance and status, flags, balance history, recent transactions and AI mapping keywords, with an inline edit form.
- [GeneralLedgerTable](https://ui.cynco.io/components/general-ledger-table.md): The general ledger register for an account: date and entry number, description with counterparty, debit, credit, running balance and reconciled flag, bracketed by opening and closing balance rows.
- [BankLedgerHeader](https://ui.cynco.io/components/bank-ledger-header.md): The header over a bank account's ledger: account name, number and linked GL code, the statement tie-out, book vs statement balance, the month stepper and the month's totals.
- [PeriodCloseRow](https://ui.cynco.io/components/period-close-row.md): One fiscal period in the periods list: open/closed/locked status, year-end marker, account and transaction counts, Dr/Cr totals and the lifecycle actions.
- [PeriodCloseChecklist](https://ui.cynco.io/components/period-close-checklist.md): The pre-close checks for a period, grouped worst first (Blocking, Needs attention, Advisories) with the fix-it actions, and the passed checks folded away.
- [PeriodCloseAttentionCard](https://ui.cynco.io/components/period-close-attention-card.md): A check Cynco could not verify: what is wrong, on which accounts, why it matters, links to fix it, and the closer's note for the close record.
- [OpeningBalanceTotalsBar](https://ui.cynco.io/components/opening-balance-totals-bar.md): The opening-balance trial balance's last line: debit and credit totals, whether they balance (or what is out and where the gap goes), and Discard / Post.
- [BankFeedList](https://ui.cynco.io/components/bank-feed-list.md): The day-grouped bank transaction stream: search, lifecycle filter, count, and per-day sections of feed rows with the day's net.
- [BankFeedRow](https://ui.cynco.io/components/bank-feed-row.md): One bank line: checkbox, lifecycle spine, payee with transfer and review-flag chips, account dot and description, category cell, signed amount, and any proposed matches beneath.
- [BankCategoryCell](https://ui.cynco.io/components/bank-category-cell.md): The categorisation affordance in its four states: AI suggestion with confidence, confirmed chip, '+ Assign', locked, plus the account-picker trigger.
- [BankConfidenceMeter](https://ui.cynco.io/components/bank-confidence-meter.md): AI confidence as a tier chip (≥90 high, 70–89 medium, <70 low), a primary progress ring, or a bare percent.
- [BankLifecycleSpine](https://ui.cynco.io/components/bank-lifecycle-spine.md): Four stacked dots encoding imported → categorized → posted → reconciled; green when settled, hollow when excluded.
- [BankMatchReview](https://ui.cynco.io/components/bank-match-review.md): Proposed matches of a bank line to an invoice or bill: target and mono reference, match % or Confirmed, evidence, what accepting does, and Accept / Reject.
- [BankReviewCard](https://ui.cynco.io/components/bank-review-card.md): One line in the review queue with its AI suggestion and confidence ring, Change / Exclude / Skip, and the why-timeline when active.
- [BankTransactionTimeline](https://ui.cynco.io/components/bank-transaction-timeline.md): The glass-box reasoning trail for one bank line — rule match, AI suggestion, policy hold, user action — newest first.
- [BankPostingSummary](https://ui.cynco.io/components/bank-posting-summary.md): 'Waiting to post, by account': what To post will put in the ledger per account and direction, with line counts and signed totals.
- [BankBalanceEquation](https://ui.cynco.io/components/bank-balance-equation.md): Opening + money in − money out = result, set against a check balance with a verdict: Ties, Off by RM x, or why it can't be verified; pending terms shimmer.
- [BankStatementEquation](https://ui.cynco.io/components/bank-statement-equation.md): A statement's own proof — opening, money in (n lines), money out (n lines), closing vs the statement's printed closing — with a broken running-balance warning by row.
- [BankMonthProof](https://ui.cynco.io/components/bank-month-proof.md): The month-end proof: statement closing − lines not yet in the ledger − lines dated on another day = expected ledger, checked against the linked GL account, with any difference explained in words.
- [BankMonthClose](https://ui.cynco.io/components/bank-month-close.md): Closing a month: the bank sign-off (or its signed / stale state), then Period close — fiscal status, the two bank checklist items with their figures, and the way to Periods.
- [BankCloseStateChip](https://ui.cynco.io/components/bank-close-state-chip.md): A month's close state as a status chip: Closed, Ready to close, Needs work, No statement, Covered, In progress, Not started.
- [BankReconciliationYearStrip](https://ui.cynco.io/components/bank-reconciliation-year-strip.md): 'Month-end close · FY 2026' with year stepping, the fiscal year as twelve month cells with state bars and open-line counts, and the selected month's heading and next step.
- [BankAccountAvatar](https://ui.cynco.io/components/bank-account-avatar.md): A bank account's mark: the institution's short code in a circle on its brand colour, or the account-type glyph (bank, card, wallet) when there is no institution.
- [BankAccountRail](https://ui.cynco.io/components/bank-account-rail.md): Accounts as instruments: all-accounts net position, grouped account rows with avatar, feed glyph, statement-gap warning, compact balance, to-categorize count and settled meter, the 6-month net-flow sparkline, and add actions.
- [BankRulesTable](https://ui.cynco.io/components/bank-rules-table.md): Categorisation rules with match, target account, source, priority, times applied and override rate, plus search, All/Active/Inactive filter, 'Apply to unposted lines' and 'New rule'.
- [BankCashFlowChart](https://ui.cynco.io/components/bank-cash-flow-chart.md): Monthly inflow and outflow bars with net as a line across them, with period totals in the legend.
- [TrialBalanceReport](https://ui.cynco.io/components/trial-balance-report.md): The trial balance grid: account code and name, Debit/Credit pairs per column group, a totals row that must tie, and a Balanced/Unbalanced chip.
- [ProfitLossStatement](https://ui.cynco.io/components/profit-loss-statement.md): Profit & loss statement: section headers, indented account lines, section totals, Gross profit / Operating profit subtotals and Net Income, single-period or comparative.
- [BalanceSheetStatement](https://ui.cynco.io/components/balance-sheet-statement.md): Balance sheet: the Total assets / liabilities / equity strip, an out-of-balance callout, and the Assets / Liabilities / Equity ladder with a Balanced chip.
- [ReportToolbar](https://ui.cynco.io/components/report-toolbar.md): Report page header with its control cluster: period select grouped by fiscal year, Monthly/YTD or Standard/Extended view, Compare toggle + comparison period, Save snapshot, freshness label and Export menu.
- [KpiTileGrid](https://ui.cynco.io/components/kpi-tile-grid.md): A row of KPI tiles: label, hero figure, signed % delta chip, optional meta chip, sparkline and one quiet sub-line.
- [OwedAgingRings](https://ui.cynco.io/components/owed-aging-rings.md): Receivables and payables as aging rings — one arc per band (Current, 1–30, 31–60, 61–90, 90+), the total in the middle, a keyed legend and the overdue footnote.
- [ReceivablesAgingTable](https://ui.cynco.io/components/receivables-aging-table.md): Accounts receivable aging: the five-figure summary strip, then customers (top debtors first) across Current / 1-30 / 31-60 / 61-90 / 90+ / Total with totals on the tray.
- [CashFlowOverview](https://ui.cynco.io/components/cash-flow-overview.md): Money movement chart: inflow and outflow bars per month with net as a line, a 3M/6M range toggle and the window's net, or a connect-bank empty state.
- [CashRunwayPosition](https://ui.cynco.io/components/cash-runway-position.md): The position band of the CFO figures: cash on hand across accounts, the runway meter (months at the last 3 months' burn) and the implied cash trail.
- [BusinessHealthPanel](https://ui.cynco.io/components/business-health-panel.md): The controls checklist: each check's verdict, one line of evidence and its area (Books, Collections, Payables, Compliance), failures first, with a summary like '2 of 5 checks need you'.
- [RecentActivityFeed](https://ui.cynco.io/components/recent-activity-feed.md): Unified feed of invoices raised, payments moved and bills entered: kind tile, counterparty and reference, status, signed amount and relative time.
- [BillCard](https://ui.cynco.io/components/bill-card.md): A bill as a compact card: vendor initials, vendor name, bill number, total, due date, category, Overdue/Duplicate flags, AI-extraction confidence and GL-posting indicator, with a status quick-action menu.
- [BillsBoard](https://ui.cynco.io/components/bills-board.md): The bills Kanban: In Review, Pending Approval, Awaiting Payment, Scheduled and Paid columns of BillCards with counts, empty messages and a compact per-currency column total.
- [BillDetailHeader](https://ui.cynco.io/components/bill-detail-header.md): Bill page header: Bills breadcrumb, vendor title with status and Overdue chips, More menu (Archive with confirm) and Re-extract, plus the Bill no. / Issued / Due / Total / Received fact strip and an archived banner.
- [BillAlerts](https://ui.cynco.io/components/bill-alerts.md): The stack of bill alerts: possible duplicate (with Dismiss), rejection notes, unused vendor credit (Apply vendor credit), vendor list load error and corrupted line items.
- [PayRunTable](https://ui.cynco.io/components/pay-run-table.md): The pay run: Ready / Overdue / Selected metrics, a schedule date (and optional Pay from account) with Schedule selected, and a selectable table of payable bills with outstanding amounts and a total-to-pay footer.
- [RecordBillPaymentDialog](https://ui.cynco.io/components/record-bill-payment-dialog.md): Record payment button and right-side sheet: bill total / outstanding summary, Payment Amount (validated against outstanding), date, method, Bank / Cash Account, reference and notes, with Confirm payment.
- [ReceiptExtractionProgress](https://ui.cynco.io/components/receipt-extraction-progress.md): Every Cynco AI extraction state on a bill: the four-step Reading / Extracting / Checking / Applying timeline, timed out, done with confidence, and failed (with or without retry).
- [PartyOverviewHeader](https://ui.cynco.io/components/party-overview-header.md): Top of a customer or vendor page: breadcrumb, name with Inactive chip, Statement and New invoice/New bill actions, the four position KPIs (owes, overdue since, open items, 12-month total) and Activity / Ledger / Details tabs with the terms fact strip.
- [PartyRail](https://ui.cynco.io/components/party-rail.md): The facts rail of a party page: available credit (customers), Position with Books tie / Needs review, the Aging stacked bar and buckets, the 12-month billed/spend bar chart and the contacts list.
- [PartyTimeline](https://ui.cynco.io/components/party-timeline.md): The party Activity story: month-grouped invoices/bills, payments and bank lines with day, kind dot, reference, due date, status, Overdue chip and amount (with MYR equivalent for foreign documents).
- [PartyLedgerTable](https://ui.cynco.io/components/party-ledger-table.md): The party subledger: Date, Event, Document, Amount and running Balance, newest first.
- [CustomerListTable](https://ui.cynco.io/components/customer-list-table.md): The customers list: selection, customer with initials, contact and location, Owes you (outstanding, overdue or open count, credit-limit chip), Est. margin (90d) and Next action, with row actions.
- [VendorListTable](https://ui.cynco.io/components/vendor-list-table.md): The vendors list: selection, vendor with initials and contact / category / place, You owe (with overdue or All overdue), Paid to date, Last paid and row actions.
- [CustomerStatementMetrics](https://ui.cynco.io/components/customer-statement-metrics.md): Statement of account KPIs: total transactions, invoiced amount with % collected, amount received, balance due, plus credits applied / debits added and the multiple-currencies notice.
- [CustomerStatementTable](https://ui.cynco.io/components/customer-statement-table.md): Statement of account lines: Date, Transactions, Details, Currency, Amount (debit), Payment (credit) and running Balance, with a Balance Due footer.
- [TaxComputationSummary](https://ui.cynco.io/components/tax-computation-summary.md): Form C chargeable income build-up (accounting profit → adjusted → statutory business → total → chargeable income) beside the tax computation (SME bands, rebates, s110/bilateral credits, CP204 paid, balance payable).
- [TaxInstallmentSchedule](https://ui.cynco.io/components/tax-installment-schedule.md): CP204 monthly instalment table (#, due date, amount, paid, status) with Mark paid on pending rows and a paid-to-date progress bar.
- [TaxAdjustmentsTable](https://ui.cynco.io/components/tax-adjustments-table.md): Add-backs, deductions or reliefs for a tax computation: item code, description with GL account, source (Auto (GL) / Manual / AI) and amount, with a total.
- [TaxFilingWorkflow](https://ui.cynco.io/components/tax-filing-workflow.md): Draft → Reviewed → Filed stepper for a tax return with filing reference, reviewed/filed dates and the next action (Mark reviewed / Mark filed).
- [FixedAssetOverview](https://ui.cynco.io/components/fixed-asset-overview.md): Fixed-asset detail: name and status, KPI tiles (total cost, accumulated depreciation, NBV, qualifying expenditure), tabs, fact strip and the Asset details / Depreciation & Tax (method, useful life, CA class, IA/AA) cards, plus disposal details when disposed.
- [AssetDepreciationSchedule](https://ui.cynco.io/components/asset-depreciation-schedule.md): Depreciation schedule by period: charge, accumulated to date, NBV after, and Posted (linked to its journal) or Draft.
- [ItemsListTable](https://ui.cynco.io/components/items-list-table.md): Items catalogue with selection: name and description, unit price, profit (margin % vs cost or estimated on sales), inventory on hand vs reorder point, tax rate and discount.
- [ItemStatsRow](https://ui.cynco.io/components/item-stats-row.md): Items KPI row: estimated margin on sales (or average profit margin), average revenue per item, highest earning item, most sold item, each over the trailing sales window.
- [InventoryFlowPanel](https://ui.cynco.io/components/inventory-flow-panel.md): Stock lifecycle in five steps (set up items, order and receive, record bill, dispatch goods, reconcile) with the GL reconciled / review state.
- [StockBalancesReport](https://ui.cynco.io/components/stock-balances-report.md): Stock balances by item and location (on hand, WAC to 4 dp, value, Healthy/Low/Negative) with the GL inventory vs stock ledger reconciliation strip.
- [PurchaseOrderStats](https://ui.cynco.io/components/purchase-order-stats.md): Purchase order KPI row: total POs, drafts, approved total.
- [PurchaseOrderLines](https://ui.cynco.io/components/purchase-order-lines.md): Editable PO line items (description, qty, unit price, amount auto-calculated as qty × price) with remove, Add line item, and subtotal / SST / total.
- [PurchaseOrderLinkedBills](https://ui.cynco.io/components/purchase-order-linked-bills.md): Bills linked to a purchase order: bill number, issue date, amount and bill status.
- [PayslipSummary](https://ui.cynco.io/components/payslip-summary.md): One payslip: gross, statutory deductions, net pay, employer cost; pay lines (earnings and EPF/SOCSO/EIS/PCB deductions); employee and employer contributions per scheme with Unverified flags; payment state and Mark paid.
- [PayslipsRunTable](https://ui.cynco.io/components/payslips-run-table.md): A payroll run's payslips: employee and reference, gross, statutory, other deductions, net, employer cost and Paid/Unpaid, with run totals.
- [PayrollRemittancesPanel](https://ui.cynco.io/components/payroll-remittances-panel.md): Owed to agencies: employee and employer shares a run remits per creditor (KWSP/EPF, PERKESO SOCSO and EIS, LHDN PCB, HRD Corp).
- [EInvoiceStatusCard](https://ui.cynco.io/components/e-invoice-status-card.md): LHDN MyInvois e-invoice state for an invoice or note per environment (valid, pending validation, rejected with LHDN errors, unconfirmed, cancelled, buyer-requested rejection), the validated UUID / long ID stamp, and Submit / Cancel (72-hour window) actions.

### AI

- [Artifact](https://ui.cynco.io/components/artifact.md): A titled container for something the assistant produced (a file, config or document), with actions and a close button.
- [Canvas](https://ui.cynco.io/components/canvas.md): A React Flow canvas preset for agent workflows: dotted background, pan/zoom, delete keys.
- [Node](https://ui.cynco.io/components/node.md): A Card-styled workflow node with optional connection handles.
- [Edge](https://ui.cynco.io/components/edge.md): Two edge styles for the Canvas: `Edge.Animated` (a dot travels the path) and `Edge.Temporary` (dashed).
- [Controls](https://ui.cynco.io/components/controls.md): React Flow zoom/fit/lock controls styled for Cynco.
- [Panel](https://ui.cynco.io/components/panel.md): A floating panel pinned to a corner of the Canvas.
- [Toolbar](https://ui.cynco.io/components/toolbar.md): A node toolbar that floats above a selected Node.
- [Connection](https://ui.cynco.io/components/connection.md): The connection line drawn while dragging from a handle.
- [ChainOfThought](https://ui.cynco.io/components/chain-of-thought.md): A collapsible list of the assistant's reasoning steps with status, results and images.
- [Checkpoint](https://ui.cynco.io/components/checkpoint.md): A divider row marking a restorable point in a conversation.
- [CodeBlock](https://ui.cynco.io/components/code-block.md): Syntax-highlighted code (Shiki, one-light / one-dark-pro) with line numbers and a copy button.
- [CompactPromptInput](https://ui.cynco.io/components/compact-prompt-input.md): A one-line prompt field with the submit button inline.
- [Confirmation](https://ui.cynco.io/components/confirmation.md): An approval request for a tool call, built on Alert.
- [Context](https://ui.cynco.io/components/context.md): A token-usage meter with a hover card breaking down input, output, reasoning and cache tokens and cost.
- [Conversation](https://ui.cynco.io/components/conversation.md): A scroll container that sticks to the bottom as messages stream in.
- [Image](https://ui.cynco.io/components/image.md): Renders an AI SDK generated image from base64.
- [InlineCitation](https://ui.cynco.io/components/inline-citation.md): Inline citation badges that open a card listing sources (with carousel for several) on hover, click or Enter, so keyboard users can reach every source.
- [Loader](https://ui.cynco.io/components/loader.md): A small spinning loader glyph.
- [Message](https://ui.cynco.io/components/message.md): A chat message: user bubbles on the right, assistant replies as Markdown, with actions, branches and attachments.
- [ModelSelector](https://ui.cynco.io/components/model-selector.md): A command-palette dialog for choosing a model, with provider logos.
- [OpenIn](https://ui.cynco.io/components/open-in.md): A dropdown that opens the current query in ChatGPT, Claude, Cursor, T3, Scira or v0.
- [Plan](https://ui.cynco.io/components/plan.md): A collapsible card describing a plan the agent proposes, with a shimmer while streaming.
- [PromptInput](https://ui.cynco.io/components/prompt-input.md): The full chat composer: textarea, attachments, tools, model select, speech and submit with status.
- [Queue](https://ui.cynco.io/components/queue.md): A collapsible queue of pending and completed tasks or messages.
- [Reasoning](https://ui.cynco.io/components/reasoning.md): The model's reasoning in a collapsible that auto-opens while streaming and reports how long it thought.
- [Shimmer](https://ui.cynco.io/components/shimmer.md): Text with a moving shimmer.
- [Sources](https://ui.cynco.io/components/sources.md): A "Used N sources" disclosure listing source links.
- [Suggestion](https://ui.cynco.io/components/suggestion.md): A horizontal row of suggested prompts as pill buttons.
- [Task](https://ui.cynco.io/components/task.md): A collapsible task with its sub-steps and file references.
- [Tool](https://ui.cynco.io/components/tool.md): A collapsible card for a tool call: name, status badge, parameters and result as highlighted JSON.
- [WebPreview](https://ui.cynco.io/components/web-preview.md): A mini browser: navigation buttons, URL bar, an iframe body and a collapsible console.