Components

Components

Every part of the kit on one page. Copy the markup you need. Each part follows the theme and the accent colour.

Buttons

Primary uses the accent colour. Ink is for the main action on a quiet screen.

Pills, toggles and keys

Status labels and on/off tool toggles.

DefaultAccentDoneRunning DemoFailed CtrlK

Form fields

Labels are always visible. Errors say how to fix the problem.

Messages

A question with a file, and an answer with steps, a table, a source and actions.

orders-march.csv48 KB
Which products sold best in March?
AskwellSwift
Read orders-march.csv

1,204 rows, 6 columns

Grouped by product

38 products

Three products made up **61%** of March revenue [1]: | Product | Orders | Revenue | |---|--:|--:| | Desk lamp | 212 | $8,268 | | Cable tray | 187 | $4,301 | | Monitor arm | 96 | $7,104 | Use `GROUP BY product` to repeat this for other months.
1 / 2

Message states

Waiting, still arriving, and failed.

AskwellSage
Thinking
AskwellSwift
Searched the web

managed database vs self-hosted

Reading 3 pages
Write the answer

An answer that is still arriving ends with a caret

AskwellSwift

Streaming

The real renderer with the demo adapter.

AskwellSwift

Press play to watch an answer arrive word by word.

Code blocks

Coloured for JavaScript, TypeScript, Python, JSON, HTML, CSS, SQL and shell. Each has a copy button.

```js // Askwell.markdown(text) returns safe HTML const html = Askwell.markdown('**Hello** `world`'); document.querySelector('.prose').innerHTML = html; ``` ```python def greet(name: str) -> str: """Return a greeting.""" return f"Hello, {name}!" # f-string ``` ```json { "model": "swift", "stream": true, "temperature": 0.7 } ```

Answer text

Everything the Markdown renderer supports.

## Heading two ### Heading three #### Heading four A paragraph with **bold**, *italic*, ~~struck~~ text, `inline code` and [a link](https://example.com). Bare addresses like https://example.org become links too. - A bullet - A nested bullet - [x] A finished task - [ ] An open task 1. First 2. Second > A quote, for the one line worth repeating. | Left | Centre | Right | |:--|:-:|--:| | a | b | 1 | | c | d | 22 | --- HTML in the text is shown, not run: <b onclick="alert(1)">safe</b>

Message box

With a file, a tool switched on and dictation running.

brief.pdf212 KB
about 120 tokens

Suggestion cards

Shown on an empty conversation.

Menus, dialogs and toasts

All keyboard friendly: arrows in menus, focus stays inside dialogs, Esc closes.

Banners, meters and loading

For limits, offline and loading states.

28 of 40 messages todayFree plan