Patterns

Recipes

Production-shaped examples that combine Axie primitives into focused app surfaces.

Recipes

Each recipe includes a preview, copyable code, ingredients, and accessibility notes.

Workspace

Notification settings

Control how billing updates reach the team.

Renewal scheduled
The card on file renews on June 18.
CardFieldInput

Settings panel

A compact settings panel for forms, binary controls, and account-level status.

Open recipe
Queued18
Ready7
Blocked3

Merchant review

Rate table changed by 4.2%.

Ready

Contract sync

Missing approver from finance.

Blocked

Invoice audit

Three invoices need category cleanup.

Draft
StatSegmented ControlProgress

Review queue

A dense review queue with filters, metrics, progress, and row-level summaries.

Open recipe
Collected$8,428
Pending$642
Failed2
InvoiceStatusAmount
AX-1048Paid$184.20
AX-1047Pending$642.18
AX-1046Failed$91.40
TableBadgeStat

Billing table

A billing view that combines summary stats, table rows, status badges, and inline notes.

Open recipe

Publish note

Prepare the update before it reaches the team feed.

CardFieldInput

Edit form

A focused edit form for short notes, helper copy, and one primary action.

Open recipe
Launch

Workspace setup

Four required steps before inviting the operations team.

  1. OKProfileName, domain, and time zone are set.
  2. 2BillingBilling contact needs confirmation.
  3. 3TeamInvite links stay locked until setup completes.
  4. 4LaunchPublish the workspace for the whole team.
Almost ready
Invite links unlock after the billing contact is verified.
ProgressStepperCheckbox

Onboarding checklist

A launch checklist with setup progress, visible prerequisites, and a clear next action.

Open recipe
RecordOwnerStatus
Invoice AX-1192Maris BelloReady
Contract CL-448Ilya VeranoReview
Payment PM-207Noor LazoFailed
AutocompleteSelectTable

Data toolbar

A searchable table header with scoped filters, status badges, and pagination.

Open recipe

Refund timing

Waiting 18m

Open

Seat transfer

Updated 42m ago

Draft

Tax document

Needs invoice

Hold
List RowTabsTextarea

Support reply

A two-pane support view with conversation rows, draft text, and policy notes.

Open recipe
Today

$482.40

Live
Collected$2,184

North Pier Ops

Autopay succeeded

Harbor Studio

Receipt waiting

Mobile DockStatProgress

Mobile dock shell

A mobile-first finance shell with summary content and a floating navigation dock.

Open recipe
Review

Contract approval

  1. OKIntakePartner terms were uploaded.
  2. 2Legal reviewCounsel is checking renewal language.
  3. 3FinanceFinance owner confirms the new rate.
  4. 4SendSend countersigned copy to the account.
One blocker
The renewal cap needs a named approver before sending.
StepperAlertBadge

Approval timeline

A contract timeline that combines review progress, blockers, and document actions.

Open recipe
Security

Access controls

Passkey ready
Three owners have a passkey enrolled.
CardFieldInput

Security settings

A security settings panel with owner recovery details and account controls.

Open recipe
Projects0
Members4
Tasks0

No active projects

Create the first project or import a task list to start assigning work.

Empty StateButtonStat

Empty project

A useful empty state with context metrics and two first-run actions.

Open recipe
Files

Import queue

vendor-rates.csv

2.4 MB

Done

april-ledger.xlsx

8.8 MB

47%
ProgressList RowBadge

Upload queue

An import queue with mixed completed, active, and loading file rows.

Open recipe

Coverage

Recipes intentionally use existing primitives, so they stay portable and easy to copy into product screens.

CardFieldInputSwitchCheckboxAlertStatSegmented ControlProgressList RowBadgeTableSeparatorRadio GroupTextareaButtonStepperAutocompleteSelectPaginationTabsMobile DockEmpty StateSkeleton