Components

Component catalogue and API discovery

All 67 inventory entries in v1.1.0 have official consumable implementations, generated APIs and complete copy bundles. Availability and maturity are separate from execution evidence; read Verification before interpreting coverage as a pass.

Find and consume one component

1. Browse the component portal or run npx --no-install j3w1-ui list after installation.
2. Read the component's anatomy, variants, states and keyboard contract.
3. Read the generated API and maintained examples at your pin.
4. Import its tokens, stylesheet and browser registration, or copy its complete bundle.
5. Incorporate the native children and app behavior, then test the integrated screen.

For text-field, the pinned entry points are:

Artifact	Link
Human docs	Text field
Design contract	Canonical JSON
Implementation API	Package contract
Variant markup	Examples JSON
Complete copy	Bundle files

Replace text-field with the selected ID below. packages/ui/dist/index.json provides compact discovery; the package manifest provides detailed imports and copy identities. Agents should read selected files rather than every component page.

Complete catalogue

ID	Component	Maturity	Documentation
button	Button	stable	Button
icon-button	Icon button	stable	Icon button
link	Link	stable	Link
button-group	Button group	stable	Button group
segmented-control	Segmented control	stable	Segmented control
field	Field	stable	Field
text-field	Text field	stable	Text field
textarea	Textarea	stable	Textarea
select	Select	stable	Select
checkbox	Checkbox	stable	Checkbox
radio-group	Radio group	stable	Radio group
switch	Switch	stable	Switch
range	Range	stable	Range
fieldset	Fieldset	stable	Fieldset
number-field	Number field	stable	Number field
search-field	Search field	stable	Search field
combobox	Combobox	stable	Combobox
multiselect	Multiple selection	stable	Multiple selection
date-picker	Date picker	stable	Date picker
time-picker	Time picker	stable	Time picker
file-input	File input	stable	File input
repeater	Repeater	stable	Repeater
wizard	Wizard	stable	Wizard
form-builder	Form builder	draft	Form builder
tabs	Tabs	stable	Tabs
breadcrumbs	Breadcrumbs	stable	Breadcrumbs
pagination	Pagination	stable	Pagination
sidebar-nav	Sidebar navigation	stable	Sidebar navigation
toolbar	Toolbar	stable	Toolbar
menu	Menu	stable	Menu
command-palette	Command palette	stable	Command palette
tree	Tree	stable	Tree
disclosure	Disclosure	stable	Disclosure
skip-link	Skip link	stable	Skip link
card	Card	stable	Card
list	List	stable	List
description-list	Description list	stable	Description list
badge	Badge	stable	Badge
chip	Chip	stable	Chip
avatar	Avatar	stable	Avatar
table	Table	stable	Table
data-table	Data table	stable	Data table
timeline	Timeline	stable	Timeline
chart	Chart	stable	Chart
kbd	Keyboard key	stable	Keyboard key
alert	Alert	stable	Alert
toast	Toast	stable	Toast
progress	Progress	stable	Progress
loading-indicator	Loading indicator	stable	Loading indicator
skeleton	Skeleton	stable	Skeleton
tooltip	Tooltip	stable	Tooltip
popover	Popover	stable	Popover
dialog	Dialog	stable	Dialog
drawer	Drawer	stable	Drawer
empty-state	Empty state	stable	Empty state
error-state	Error state	stable	Error state
code-editor	Code editor	stable	Code editor
editor-search	Editor search	stable	Editor search
diagnostics	Diagnostics	stable	Diagnostics
diff-view	Diff view	stable	Diff view
terminal	Terminal	stable	Terminal
settings-panel	Settings panel	stable	Settings panel
admin-form	Admin form	stable	Admin form
filterable-table	Filterable table	stable	Filterable table
i3-window-frame	i3 window frame	stable	i3 window frame
file-browser	File browser	stable	File browser
compact-dashboard	Compact dashboard	stable	Compact dashboard

Choose deliberately

Use the select contract for fixed choices, combobox for typed suggestions, and multiselect for its dedicated multiple-selection API. Read table, data-table and filterable-table separately rather than assuming identical sorting/filtering behavior. Developer views and composed examples have bounded APIs; they are not general code-execution engines or production backends.

The workbench and complete reference help inspect states. A rendered matrix is rendering coverage, not proof of every interaction. Test the states used in your app.

Copy and package commands

npx --no-install j3w1-ui copy dialog --out ./vendor/j3w1/dialog
npx --no-install j3w1-ui kit --components text-field,select,button,dialog --mode package --framework vue --out ./settings-kit

Use a new destination. See Package and copy for closure, licensing, IDs and integration behavior.

To add or change the theme's own component contract, follow Contributing; consuming an existing component is a different workflow.

Catalogue source: v1.1.0 package manifest.