Components

Building with an AI agent? Connect bahtui-mcp and it can look up any element below, read its API and check the schemas it writes against the real engine.

72 elements, all plain Web Components. Attributes for simple values, one JS property for structured data. Every tile below is the real element.

Actions

4

The one button.

• Add fieldCancel
  baht-buttonVariants and sizes via attributes; content via children or label.
• baht-menuThe ⋯ menu on a row or card, or a labelled “Export ▾”; shortcut hints included.
• baht-theme-toggleLight / dark switch for the --baht-* themes; remembers the choice.
• baht-split-buttonMain action + menu of related ones; keyboard shortcuts shown and bound.

Data input

24

Controlled fields. Feed value, listen to baht-input.

• baht-inputSingle-line text or email field.
• baht-textStatic text block (type: "label"): no value, no emits.
• baht-markdownWrite and Preview tabs over markdown; files paste, drop or pick in as links.
• baht-markdown-viewMarkdown source as sanitized HTML.
• baht-textareaMulti-line text; rows from field.rows.
• baht-numberNumeric input; emits null when cleared.
• baht-currencyMoney input: plain digits while typing, thousands-separated on blur.
• baht-selectSingle-choice dropdown with its own listbox, identical on every OS.
• baht-multiselectCheckbox group; value is a string[] in option order.
• baht-tagsCreatable chip input; value is a string[], deduped and trimmed.
• baht-checkboxSingle boolean checkbox with an inline label.
• baht-radioRadio group; value is the option key.
• baht-toggleSwitch with an inline label; boolean value.
• baht-datepickerCalendar picker on the tokens, never the OS date wheel.
• baht-fileFile capture, or upload through a registry function.
• baht-uploadUploads to your endpoint on pick; the returned URL is the value.
• baht-ratingStar rating; click the current value to clear.
• baht-otpOne-time-code boxes: auto-advance, paste distributes.
• baht-filterFilter chip group. Feed selected, listen to baht-change.
• baht-rangeRange slider, controlled.
• <baht-repeater>
  baht-repeaterArray-of-rows control: every row renders the same sub-fields.
• baht-reference-pickerRead-only input plus a lookup that opens a typeahead.
• baht-typeaheadText input with suggestions, static or async.
• baht-keyvalue-editorInline key = value rows for maps and config objects.

Data display

19

Read-only surfaces. Server-side contracts: you feed the page.

• baht-badgeStatus pill or tag. Status tones get a dot.
• baht-avatarSmall circular identity chip; initials derived from label.
• Last run 6 h ago.
  baht-cardSurface card: 1px border, no shadow at rest.
• baht-tablePaginated table: toolbar, selection, sortable headers, column picker. Never slices or fetches.
• baht-listDisplay list with the same server-side contract as the table.
• Coffee · ฿65 — swipe left
  baht-swipe-rowTouch list row: swipe left to reveal its actions; keyboard reaches them too.
• baht-commentsA record conversation: thread plus composer, with internal notes.
• baht-notification-bellHeader bell with an unread count and a list panel.
• baht-edit-tableTable edited in place: per-row save, add and remove.
• baht-rule-builderEdit a workflow's rules (UI policies, step skips) without code.
• baht-timelineVertical timeline for run history and audit logs.
• baht-accordionCollapsible panels; multiple allows several open.
• baht-calendarRead-only month, week and day views, holidays and freezes shaded.
• baht-treeHierarchy you open, close and pick from: an org chart.
• npm i bank20baht-ui
  baht-codeMonospace code, inline chip or block. Not a highlighter.
• baht-skeletonLoading placeholder: opacity pulse, no shimmer.
• baht-empty-stateCentered "nothing here" placeholder.
• baht-error-stateCentered failure placeholder with an optional retry.
• baht-stepsWizard progress: numbered markers, current highlighted, done checked.

Charts

8

Pure SVG and DOM on the validated chart tokens; no chart library.

• baht-statFigure, delta vs a named period, sparkline.
• baht-sparklineMicro trend line, accent on the newest point.
• baht-bar-chartBars with a previous period and budget markers.
• baht-line-chartMulti-series lines with a crosshair tooltip.
• baht-heatmapCalendar heat on the sequential ramp.
• baht-meterSpent against budget, with a pace tick.
• baht-donut-chartDonut with legend; the centre defaults to the sum.
• baht-stat-chartBig single-number stat (superseded by baht-stat).

Feedback

9

Tell the user what happened.

• baht-alertInline alert or callout.
• baht-spinnerThe only animated icon the design system allows.
• baht-progressProgress bar; value null is indeterminate.
• baht-progress-ringCircular percent-used ring; the round counterpart to baht-progress.
• <baht-loading-overlay>
  baht-loading-overlayFull-viewport loading scrim with a centered spinner. Controlled by open.
• <baht-modal>
  baht-modalControlled dialog: you flip open, it asks to close.
• <baht-toast>
  baht-toastToast host, one per page; call show().
• Copy
  baht-tooltipHover and focus tooltip around its children. Pure CSS.
• Filters

  Any content: fields, lists, actions.

  baht-popoverClick-open panel anchored to a trigger: filters, quick edits.

Navigation

4

Links and where you are.

• baht-linkStyled anchor with the underline treatment.
• baht-breadcrumbsTrail; the last item is the current page.
• baht-paginationServer-side pagination; the host fetches on page change.

• Details panel

  History panel

  baht-tabsTab strip over your own panels (data-tab); full arrow-key support.

Layout

2

Structure inside a form.

• baht-sectionSection divider inside a form: heading plus rule.
• baht-fieldsetNative fieldset and legend for related fields.

Engine

2

JSON in, UI out.

• baht-formL1: one controlled form. Emits baht-change and baht-validity.
• <baht-workflow>
  baht-workflowL2: multi-step wizard with show, hide, skip and compute rules.