XButton — variant × color

to (link)

Inputs

Name

Shown on your public profile.

Email

That address is already taken.

£

@example.com

Notes

Grows as you type.

XSelect

Fruit

Choices

Accept the termsIndeterminateDisabledEmail notificationssmmdlgDisabled

HobbyProTeam

Wave 2 — layout + feedback

A card

title/description are content props — slot twins + block values.

Saved

Everything is in its place.

A block title

Solid variant

Outline variant

Badges + status

(this card is variant=soft)

primaryneutralsuccesswarningdanger solid activependingfailedbespoke

instance classes

Nothing here yet

An XEmpty with an action slot.

Wave 2.5 — XApi (renderless data)

Wave 3 — overlays + navigation

The overview panel — each tab is a named slot keyed by the option value.

XForm — the form engine

Bare controls auto-bind through XFormField names (labels derive from them too). Live validation after the first attempt; an email containing 'taken' triggers a server-shaped error.

…from OUTSIDE the form — the native form attribute (the slideover-footer fix).

XForm — entity mode

no row = insert (Create) · a row with an id = update (Save)

The fields derive from the baked forms.json — controls, labels, required marks and the status/type enum options all come off the bake (checklist plumbing skipped). The database is injected (no DB here): a name containing 'taken' answers a server-shaped 400. The title field shows a per-field slot override. File Id is the x.file() control (batch 4): XUpload → the file row id (the transport is injected here; wired for real it POSTs /api/v1/files/upload).

XSpinner

Wave 4 — data components

Name	Email	Status	Logins
Ada Lovelace	ada@example.com	active	42
Grace Hopper	grace@example.com	pending	17
Edsger Dijkstra	edsger@example.com	archived	5
Margaret Hamilton	margaret@example.com	active	88

XList: one rows contract, `is` swaps the semantic rendering.

Ada Lovelace
Grace Hopper
Edsger Dijkstra
Margaret Hamilton

page 1 of 7 — speaks the API envelope ({ total, page, pages, limit }).

Wave 5 batch 1 — toast · stat · details · divider · guard · expose · avatar

Revenue

£48,230 12.4vs last month

Churn

2.1% 0.4

Loading

Name: Ada Lovelace
Email: ada@example.com
Cookbook: /x/cookbook

the divider

Guard the cardALGH·

ALtyping…

Guarded content

Flip the switch — overlay mode blurs this and centres the overlay slot.

Secret things live here.

Wave 5 batch 2 — icon · mask · date · multi-select · attribute

XIcon — any of the Iconify catalogue via @nuxt/icon.

Sort code

mask: ##-##-##

Birthday

mm

dd

yyyy

Team

multiple

XAttribute

key + operator + value rows → the XWhere DSL, live.

{}

Wave 5 batch 3 — the editor cluster (lazy chunks, SSR shells)

XCode

export function greet(name: string) {
  // a comment
  return `Hello ${name}`
}

CodeMirror 6, theme from the tokens, grammar by name.

XMarkdown (edit mode)

Rendered ⇆ code toggle; the code view is an XCode.

XHtml (editable)

Sanitised in and out; the element itself is editable.

XEditor (input mode)

The tiptap editor — try selecting and typing. v-model is HTML.

tiptap + StarterKit; mode=inline drops the chrome.

Wave 5 batch 4 — XUpload (useXUploader)

The default transport POSTs the live /api/v1/files/upload route and resolves the inserted file row — this demo injects a ticking fake (no server needed).

Drop files here or click to browseimage/*,.pdf · up to 5.0 MB

Wave 5 batch 4b — media (XImage · XVideo · XEmbed · XFile)

a-very-long-export-of-everything-2026-06-10-final-FINAL-v2.csv471 KB

portrait.png2.3 MB

linked-by-id.pdf100 KB

A file-entity row's id derives the download link (/api/v1/files/:id/download) — same bridge on XImage :file (a row or a row id → src).

Wave 5 batch 4 stretch — XCropper (cropperjs v2)

SSR paints the plain image (no CLS); cropperjs mounts into its own chunk. The v-model is the crop box in natural image px — the file row's cropX/cropY/cropWidth/cropHeight columns, spoken bare. @crop fires on commit; Save PATCHes the file row through useXDatabase('file') — the database is injected here (no DB), answering the patched row back.

crop box: —

Wave 5 batch 5 — showcase chrome + css-as-data

xcookbook — gates

$npm run gates

typecheck · lint · 368 tests · bake · smoke

smoke green — the module boots, serves its pages

$git commit

$

localhost:3210/x/components

Components

56 8this session

This paragraph is styled by an XCss block — css-as-data rendered into a live style tag.

…and this one by XStyle — style-as-data on the element itself.

XChallenge — one control, four guards (slide · pin · code · hold)

The v-model is the resolved boolean — set it false to rearm. pass/fail report verdicts; a pin without expected hands the entry to the parent via @code. The code type's verifier is injected here (no backend) — the default posts the live 2FA endpoint.

slide — slide to unlock (drag, or arrow keys / End)

Slide to confirm

→

hold — press and hold (the delete-guard pattern)

pin — local verify (the pin is 2468; a wrong entry fails + clears)

pin — parent verify (no expected: @code hands over; 1357 passes)

code — authenticator (injected verifier; 246810 passes after a beat)

Enter the 6-digit code

XColorMode — the dark-mode toggle

One control over useXColorMode(): light / dark / system, persisted in the x-color-mode cookie so the server renders <html class="dark"> in the initial payload (no flash). The baked theme's .dark { --x-* } scope and Tailwind's dark: variant both ride the one class; system follows the OS live.

mode system → resolved light

XChart · KPI stats · XFacets · XShare — the Lane G batch

XChart lazy-chunks Chart.js behind an SSR shell; the palette and text/grid colours read off the live --x-* tokens at mount (authored dataset colours win). The SAME config object becomes an email-embeddable image via quickChartUrlOf. XStat's chart prop is the KPI sparkline; XFacets rides the facets crud op (here an injected fetcher) and speaks XWhere; XShare is the native sheet with a clipboard + toast fallback.

No data yet

the same config as a QuickChart image URL: https://quickchart.io/chart?c=%7B%22type%22%3A%22line%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22Jan%22%2C%22Feb%22%2C%22Mar%22%2C%22Apr%22%2C%22May%22%2C%22Jun%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22Signups%22%2C%22data%22%3A%5B12%2C19%2C14%2C27%2C32%2C41%5D%7D%2C%7B%22label%22%3A%22Churn%22%2C%22data%22%3A%5B3%2C5%2C2%2C6%2C4%2C5%5D%7D%5D%7D%7D&w=600&h=300&bkg=white

Signups

41 9

Active

1,204users 12

Loading KPI

Status

No values

Type

No values

{
  "selection": {
    "status": [
      "active"
    ]
  },
  "where": {}
}

XGraphic — the konva graphic editor

Canva/Polotno posture: pages of elements on a Konva stage — drag with smart guides, transform, marquee/multi-select, align, z-order, undo/redo, inline text editing, page presets — exporting to PNG, multi-page PDF, webm video and the document JSON (which IS the v-model).

Empty page — add elements from the toolbar.

Document

Preset

W / H

Page

Name

Fill

Seconds

Reference — every registered component

Generated from the baked kitchen manifest (the same nodes the Studio and the form layer read) — 75 components. Props marked “model” are the v-model; “content” props take a string or an XBlock tree.

XAlert

loader #default #title #icon @close

prop	type	default
color	primary \| neutral \| success \| warning \| danger	"neutral"
variant	soft \| solid \| outline	"soft"
title	content (string \| block)	—
description	content (string \| block)	—
icon	string	—
closable	boolean	false
classes	json	—

XApi

loader #default #loading #error #empty

prop	type	default
fetch	json
immediate	boolean	true

XAttribute

loader @where

prop	type	default
modelValue (model)	json
keys	json	—
operators	json	—
classes	json	—

XAuth

loader #default #fallback

prop	type	default
rule	json	true

XAutomationBuilder

loader @save

prop	type	default
modelValue (model)	json
baked	boolean	false
saving	boolean	false
classes	json	—

XAutomationList

loader @open @refresh

prop	type	default
entity	string	"automation"
rows	json	—
loading	boolean	false
classes	json	—

XAvatar

loader

prop	type	default
src	string	—
name	string	—
alt	string	—
size	sm \| md \| lg \| xl	"md"
shape	circle \| square	"circle"
classes	json	—

XBadge

loader #default

prop	type	default
color	primary \| neutral \| success \| warning \| danger	"neutral"
variant	solid \| soft \| outline	"soft"
size	sm \| md \| lg	"md"
classes	json	—

XButton

loader #default #prepend #append

prop	type	default
variant	solid \| soft \| outline \| ghost \| link	"solid"
color	primary \| neutral \| success \| warning \| danger	"primary"
size	sm \| md \| lg	"md"
type	button \| submit \| reset	"button"
disabled	boolean	false
loading	boolean	false
block	boolean	false
prepend	content (string \| block)	—
append	content (string \| block)	—
icon	string	—
to	string	—
classes	json	—

XCard

loader #default #header #footer

prop	type	default
variant	outline \| elevated \| soft	"outline"
title	content (string \| block)	—
description	content (string \| block)	—
classes	json	—

XChallenge

loader #label @pass @fail @code

prop	type	default
modelValue (model)	boolean
type	slide \| pin \| code \| hold	"slide"
label	content (string \| block)	—
length	number	—
expected	string	—
masked	boolean	true
pad	boolean	true
pendingToken	string	—
duration	number	1500
size	sm \| md \| lg	"md"
color	primary \| neutral \| success \| warning \| danger	"primary"
disabled	boolean	false
classes	json	—

XChart

loader #empty

prop	type	default
config	json	—
sparkline	boolean	false
height	number	256
loading	boolean	false
empty	content (string \| block)	—
classes	json	—

XChat

loader #empty #message #avatar @reply @error

prop	type	default
assistant	string
regarding	json	—
thread	string	—
placeholder	string	"Message…"
height	string	—
stream	boolean	true
classes	json	—

XCheckbox

loader #default

prop	type	default
modelValue (model)	boolean
label	string	—
size	sm \| md \| lg	"md"
disabled	boolean	false
indeterminate	boolean	false
classes	json	—

XChrome

loader #default

prop	type	default
is	browser \| window \| phone	"browser"
url	string	—
title	string	—
classes	json	—

XCode

loader

prop	type	default
modelValue (model)	string
lang	string	"javascript"
readonly	boolean	false
lineNumbers	boolean	true
classes	json	—

XColorMode

loader

prop	type	default
variant	solid \| soft \| outline \| ghost \| link	"ghost"
color	primary \| neutral \| success \| warning \| danger	"neutral"
size	sm \| md \| lg	"md"
classes	json	—

XComponentDoc

loader

prop	type	default
component	string
classes	json	—

XContainer

loader #default

prop	type	default
size	sm \| md \| lg \| xl \| full	"xl"
padded	boolean	true
classes	json	—

XCropper

loader #actions @crop @saved @error

prop	type	default
src	string	—
file	json	—
modelValue (model)	json
aspect	string	—
alt	string	—
disabled	boolean	false
save	boolean	false
classes	json	—

XCss

loader

prop	type	default
css	json
scope	string	—
classes	json	—

XDatePicker

loader

prop	type	default
modelValue (model)	date
variant	outline \| filled \| underline	"outline"
size	sm \| md \| lg	"md"
disabled	boolean	false
classes	json	—

XDefaults

loader #default

prop	type	default
props	json

XDesigner

loader @voiceover @render

prop	type	default
modelValue (model)	json
preset	string	"video"
title	string	—
saved	string	—
speaking	boolean	false
rendering	boolean	false
classes	json	—

XDetails

loader #value @copy

prop	type	default
rows	json
loading	boolean	false
classes	json	—

XDivider

loader #default

prop	type	default
orientation	horizontal \| vertical	"horizontal"
label	content (string \| block)	—
classes	json	—

XDocs

loader #default #aside

prop	type	default
options	json
classes	json	—

XDrawer

loader #default #trigger #footer #title

prop	type	default
open (model)	boolean
title	content (string \| block)	—
description	content (string \| block)	—
side	left \| right \| top \| bottom	"right"
classes	json	—

XEditor

loader

prop	type	default
modelValue (model)	string
mode	input \| inline	"input"
editable	boolean	true
classes	json	—

XEmbed

loader

prop	type	default
src	string
title	string	—
ratio	string	"16/9"
sandbox	string	"allow-scripts allow-same-origin allow-popups allow-forms"
allow	string	—
rounded	boolean	true
lazy	boolean	true
classes	json	—

XEmpty

loader #title #description #action

prop	type	default
title	content (string \| block)	"Nothing here yet"
description	content (string \| block)	—
icon	string	—
classes	json	—

XExpose

loader #default

prop	type	default
open (model)	json
options	json
multiple	boolean	false
memory	json	false
classes	json	—

XFacets

loader @where

prop	type	default
entity	string	—
columns	json
where	json	—
refine	boolean	false
modelValue (model)	json
classes	json	—

XFile

loader #default #actions @remove @download

prop	type	default
file	json	—
name	string	—
size	number	—
mime	string	—
url	string	—
loading	boolean	false
removable	boolean	false
classes	json	—

XForm

loader #default #footer @submit @success @error @reset

prop	type	default
modelValue (model)	json
action	string	—
method	post \| put \| patch	"post"
validate	submit \| live	"submit"
draft	json	false
history	boolean	false
timeout	number	—
id	string	—
entity	string	—
row	json	—
fields	json	—
exclude	json	—
classes	json	—

XFormField

loader #default

prop	type	default
label	string	—
hint	string	—
error	string	—
required	boolean	false
name	string	—
classes	json	—

XGraphic

loader

prop	type	default
modelValue (model)	json
preset	presentation \| presentation-4x3 \| instagram-post \| instagram-story \| facebook-post \| x-post \| linkedin-post \| youtube-thumbnail \| a4 \| a4-landscape \| video \| video-vertical	"presentation"
editable	boolean	true
toolbar	boolean	true
panels	boolean	true
pagebar	boolean	true
snap	boolean	true
files	boolean	true
save	download \| files \| both	"download"
maxHistory	number	50
classes	json	—

XGrid

loader #default

prop	type	default
cols	json
gap	none \| xs \| sm \| md \| lg \| xl	"md"
classes	json	—

XGuard

loader #default #fallback #overlay

prop	type	default
when	boolean	true
mode	block \| overlay	"block"
classes	json	—

XHeartRate

loader

prop	type	default
speed	slow \| normal \| fast	"normal"
classes	json	—

XHtml

loader @change

prop	type	default
modelValue (model)	string
editable	boolean	false
trusted	boolean	false
classes	json	—

XIcon

loader

prop	type	default
name	string
size	xs \| sm \| md \| lg \| xl	"md"
classes	json	—

XImage

loader

prop	type	default
src	string	—
file	json	—
alt	string	—
width	number	—
height	number	—
sizes	string	—
ratio	string	—
fit	cover \| contain	"cover"
filters	string	—
rounded	boolean	true
lazy	boolean	true
classes	json	—

XIndicator

loader

prop	type	default
type	typing \| cursor	"typing"
classes	json	—

XInput

loader #prepend #prefix #suffix #append @clear

prop	type	default
modelValue (model)	string
type	text \| email \| password \| number \| search \| url \| tel	"text"
variant	outline \| filled \| underline	"outline"
mask	string	—
placeholder	string	—
size	sm \| md \| lg	"md"
prefix	content (string \| block)	—
suffix	content (string \| block)	—
prepend	content (string \| block)	—
append	content (string \| block)	—
icon	string	—
disabled	boolean	false
readonly	boolean	false
clearable	boolean	false
classes	json	—

XList

loader #item #empty @rowClick

prop	type	default
rows	json
is	list \| table \| grid	"list"
labelKey	string	—
loading	boolean	false
empty	content (string \| block)	—
classes	json	—

XManage

loader

prop	type	default
entity	string
readonly	boolean	false
exclude	json	—
classes	json	—

XMarkdown

loader

prop	type	default
modelValue (model)	string
mode	display \| edit	"display"
classes	json	—

XMenu

loader #trigger #option @select

prop	type	default
options	json
classes	json	—

XModal

loader #default #trigger #footer #title

prop	type	default
open (model)	boolean
title	content (string \| block)	—
description	content (string \| block)	—
size	sm \| md \| lg \| full	"md"
classes	json	—

XNav

loader #option

prop	type	default
options	json
orientation	horizontal \| vertical	"horizontal"
classes	json	—

XPagination

loader

prop	type	default
page (model)	number
total	number	0
perPage	number	20
classes	json	—

XPing

loader #default

prop	type	default
show	boolean	true
color	primary \| neutral \| success \| warning \| danger	"danger"
position	top-right \| top-left \| bottom-right \| bottom-left	"top-right"
classes	json	—

XPopover

loader #default #trigger

prop	type	default
side	top \| right \| bottom \| left	"bottom"
align	start \| center \| end	"center"
classes	json	—

XRadio

loader #option

prop	type	default
modelValue (model)	string
options	json
orientation	vertical \| horizontal	"vertical"
size	sm \| md \| lg	"md"
disabled	boolean	false
classes	json	—

XSelect

loader #option

prop	type	default
modelValue (model)	json
options	json	—
source	json	—
labelKey	string	—
valueKey	string	"id"
multiple	boolean	false
placeholder	string	"Select…"
variant	outline \| filled \| underline	"outline"
size	sm \| md \| lg	"md"
disabled	boolean	false
clearable	boolean	false
classes	json	—

XServiceSchematic

loader

prop	type	default
entity	string	"service"
row	json	—
classes	json	—

XServiceWizard

loader @refresh

prop	type	default
entity	string	"service"
row	json	—
classes	json	—

XShare

loader #default @share

prop	type	default
title	string	—
text	string	—
url	string	—
variant	solid \| soft \| outline \| ghost \| link	"outline"
color	primary \| neutral \| success \| warning \| danger	"neutral"
size	sm \| md \| lg	"md"
disabled	boolean	false
classes	json	—

XSkeleton

loader

prop	type	default
classes	json	—

XSpinner

loader

prop	type	default
size	sm \| md \| lg	"md"
classes	json	—

XSpreadsheet

loader #empty @edit

prop	type	default
modelValue (model)	json
columns	json	—
fields	json	—
readonly	boolean	false
loading	boolean	false
empty	content (string \| block)	—
classes	json	—

XStack

loader #default

prop	type	default
direction	vertical \| horizontal	"vertical"
gap	none \| xs \| sm \| md \| lg \| xl	"md"
align	start \| center \| end \| stretch \| baseline	—
justify	start \| center \| end \| between \| around	—
wrap	boolean	false
classes	json	—

XStat

loader #default #prefix #suffix #prepend #append

prop	type	default
label	string	—
value	content (string \| block)	—
delta	number	—
unit	string	—
chart	json	—
prefix	content (string \| block)	—
suffix	content (string \| block)	—
prepend	content (string \| block)	—
append	content (string \| block)	—
loading	boolean	false
classes	json	—

XStatus

loader #default

prop	type	default
value	string
colors	json	—
variant	solid \| soft \| outline	"soft"
size	sm \| md \| lg	"md"
classes	json	—

XStyle

loader #default

prop	type	default
value	json
is	string	"div"
classes	json	—

XSwitch

loader #default

prop	type	default
modelValue (model)	boolean
label	string	—
size	sm \| md \| lg	"md"
disabled	boolean	false
classes	json	—

XTable

loader #empty @rowClick @sort

prop	type	default
rows	json
columns	json	—
sort (model)	json
selectable	none \| one \| many	"none"
selected (model)	json
rowKey	string	"id"
loading	boolean	false
empty	content (string \| block)	—
classes	json	—

XTabs

loader #default

prop	type	default
modelValue (model)	string
options	json
variant	boxed \| underline \| pill	"boxed"
classes	json	—

XTerminal

loader

prop	type	default
lines	json
prompt	string	"$"
animate	boolean	true
speed	number	28
loop	boolean	false
classes	json	—

XTextarea

loader

prop	type	default
modelValue (model)	string
rows	number	3
variant	outline \| filled \| underline	"outline"
size	sm \| md \| lg	"md"
placeholder	string	—
disabled	boolean	false
readonly	boolean	false
autoresize	boolean	false
classes	json	—

XToaster

loader

prop	type	default
position	top-right \| top-left \| top-center \| bottom-right \| bottom-left \| bottom-center	"bottom-right"
classes	json	—

XTooltip

loader #default

prop	type	default
text	content (string \| block)
side	top \| right \| bottom \| left	"top"
classes	json	—

XUpload

loader #default #upload @select @success @error @reject @progress

prop	type	default
url	string	"/api/v1/files/upload"
multiple	boolean	false
accept	string	—
maxFiles	number	—
maxFileSize	number	—
autoUpload	boolean	true
global	string	—
disabled	boolean	false
classes	json	—

XVideo

loader

prop	type	default
src	string
provider	auto \| youtube \| vimeo \| stream \| native	"auto"
poster	string	—
ratio	string	"16/9"
controls	boolean	true
autoplay	boolean	false
muted	boolean	false
loop	boolean	false
rounded	boolean	true
lazy	boolean	true
classes	json	—

XButton — variant × color

Inputs

XSelect

Choices

Wave 2 — layout + feedback

Wave 2.5 — XApi (renderless data)

Wave 3 — overlays + navigation

XForm — the form engine

XForm — entity mode

XSpinner

Wave 4 — data components

Wave 5 batch 1 — toast · stat · details · divider · guard · expose · avatar

What is XExpose? ▾

Does it remember? ▾

Wave 5 batch 2 — icon · mask · date · multi-select · attribute

Wave 5 batch 3 — the editor cluster (lazy chunks, SSR shells)

Wave 5 batch 4 — XUpload (useXUploader)

Wave 5 batch 4b — media (XImage · XVideo · XEmbed · XFile)

Wave 5 batch 4 stretch — XCropper (cropperjs v2)

Wave 5 batch 5 — showcase chrome + css-as-data

XChallenge — one control, four guards (slide · pin · code · hold)

slide — slide to unlock (drag, or arrow keys / End)

hold — press and hold (the delete-guard pattern)

pin — local verify (the pin is 2468; a wrong entry fails + clears)

pin — parent verify (no expected: @code hands over; 1357 passes)

code — authenticator (injected verifier; 246810 passes after a beat)

XColorMode — the dark-mode toggle

XChart · KPI stats · XFacets · XShare — the Lane G batch

XGraphic — the konva graphic editor

Reference — every registered component