Work / Trunk / Wiki / Entities
trunk-kit
Entitydraftverified 2026-10-22
KIT.TRUNKTrunk Kit
Summary
Trunk's own catalogue of 66 components, like Figma's Simple Design System. Every one is painted from the product's own Styles and comes with its variants, properties, interactions, events and states. Proposed in 2026-10-21-components-like-figma; all of it is in release 1.0.0.
Canonical values
| Key | Value | Last changed |
|---|---|---|
| KIT.NAME | Trunk Kit | 2026-10-21 |
| KIT.SIZE | 66 components in 8 groups | 2026-10-21 |
| KIT.GROUPS | Actions · Inputs · Selection · Navigation · Feedback · Overlays · Data display · Form layout | 2026-10-21 |
| KIT.VERSION.DEMO | 1.0 in use; 1.1 offered | 2026-10-21 |
| KIT.RELEASES | 1.0.0, 1.1.0 in @trunk/kit; a component is taken at the latest. 1.1.0: Select (↑ opens, Esc emits onClose), Date picker (PageUp, PageDown change the month), Switch (Interaction states · Focus), Accordion (Enter, Space) |
2026-10-22 |
| KIT.COPY | The kit's sample words are neutral and fit any product, with no currency; the tables below and the design screens use Chitragupt's words only because the design set draws Chitragupt | 2026-10-22 |
| KIT.SPAN | A variant that spans a property is drawn with the property's default | 2026-10-22 |
| KIT.PAINT | Colors, fonts, type, radius, spacing, shadows, motion and icons come from the product's Styles; the kit names roles, never values | 2026-10-21 |
| KIT.STATES | Every component has Empty · Loading · Data · Error; a state that is not real for it is "not made" and shows Data | 2026-10-21 |
| KIT.FIXED | State and Size are on every component; Size is the viewport | 2026-10-21 |
| KIT.INTERACTION-STATES | Hover · Focus · Pressed · Disabled, where listed, are the built-in Interaction states property and become CSS | 2026-10-21 |
How to read the tables: "Set X · toggle" flips a boolean or a two-value variant; "Change to" moves to another variant; "→ onX" is an Emit event, which Get code writes as a handler prop. Where a component goes on click is never in the kit: Open page lives on the instance in Pages.
Actions (6)
| Component | Variant properties | Component properties | Interactions and events | Real states |
|---|---|---|---|---|
| Button | Type: primary · secondary · danger · ghost · warn; Interaction states | Label (text) · Icon (swap) · Show icon (boolean) | Click, Enter, Space → onClick. Loading and Disabled take no clicks | Loading · Data |
| Icon button | Type: primary · secondary · ghost; Shape: square · round; Interaction states | Icon (swap) · Label (text, for screen readers) | Click, Enter, Space → onClick | Loading · Data |
| Button group | Attached: yes · no | Buttons (slot) | None of its own; each Button emits onClick | Data |
| Link | Tone: default · subtle; Interaction states | Label (text) · Icon (swap) · Show icon (boolean) | Click → onClick. Where it goes is set on the page | Data |
| Split button | Open: no · yes; Type: primary · secondary | Label (text) · Options (slot of Menu items) | Main click → onClick; arrow → Set Open · toggle; an option → onSelect, Set Open · no; Esc → Set Open · no | Loading · Data |
| FAB | Extended: no · yes; Interaction states | Icon (swap) · Label (text) | Click → onClick | Loading · Data |
Inputs (18)
| Component | Variant properties | Component properties | Interactions and events | Real states |
|---|---|---|---|---|
| Text field | Interaction states (Hover · Focus · Disabled) | Label · Placeholder · Help · Value (text) · Leading icon (swap) · Required (boolean) | Typing → Set Value, onChange; blur → onBlur; Enter → onSubmit | Data · Error |
| Textarea | Interaction states | Label · Placeholder · Value (text) · Max length (text) · Show count (boolean) | Typing → Set Value, onChange; blur → onBlur | Data · Error |
| Number | Interaction states | Label · Value · Min · Max · Step · Unit (text) | Typing, ↑↓ or the steppers → Set Value, onChange | Data · Error |
| Password | Shown: no · yes; Interaction states | Label · Value (text) · Show strength (boolean) | The eye → Set Shown · toggle; typing → onChange | Data · Error |
| Search | Has value: no · yes | Placeholder · Value (text) | Typing → Set Value; after 300 ms → onSearch; × → Set Value "", onClear; Enter → onSubmit | Empty · Loading · Data · Error |
| Select | Open: no · yes | Label · Placeholder · Value (text) · Options (slot of Option) · Icon (swap) | Click → Set Open · toggle; an option → Set Value, Set Open · no, onChange; ↑↓ move; type-ahead; Esc → Set Open · no | Empty · Loading · Data · Error |
| Dropdown menu | Open: no · yes | Trigger (slot) · Items (slot of Menu items) | Click → Set Open · toggle; an item → onSelect, Set Open · no; Esc → Set Open · no | Data |
| Combobox | Open: no · yes | Label · Placeholder · Value · Query (text) · Options (slot) | Typing → Set Query, Set Open · yes; after 300 ms → onSearch; an option → Set Value, onChange; Esc → Set Open · no | Empty · Loading · Data · Error |
| Multi-select | Open: no · yes | Label · Placeholder (text) · Values (slot of Chips) · Options (slot) | An option → toggles it in Values, onChange; a chip’s × → onChange; Esc → Set Open · no | Empty · Loading · Data · Error |
| Date picker | Open: no · yes | Label · Value · Min · Max (text) | Click → Set Open · toggle; a day → Set Value, Set Open · no, onChange; ‹ › → Set Month · previous / next; arrows move the day; Esc → Set Open · no | Empty · Loading · Data · Error |
| Time picker | Open: no · yes | Label · Value · Step (text) | A time → Set Value, Set Open · no, onChange; Esc → Set Open · no | Data · Error |
| Date range | Open: no · yes | Label · Start · End (text) · Presets (slot) | First day → Set Start; second → Set End, Set Open · no, onChange; a preset → both, onChange | Empty · Data · Error |
| Slider | Interaction states | Label · Value · Min · Max · Step (text) · Show value (boolean) | Drag or ←→ → Set Value, onChange; release → onCommit | Data |
| Range slider | Interaction states | Label · Start · End · Min · Max (text) | Drag either end → Set Start or End, onChange; release → onCommit | Data |
| File upload | Dragging: no · yes | Label · Accept · Max size (text) · Multiple (boolean) | Click → onPick; drop → onFiles; × on a file → onRemove | Empty · Loading · Data · Error |
| OTP / PIN | Interaction states | Length · Value (text) · Masked (boolean) | Typing → next box, onChange; all filled → onComplete; paste fills every box | Loading · Data · Error |
| Color picker | Open: no · yes | Value (text) · Swatches (from Styles › Colors) | A swatch → Set Value, onChange; Esc → Set Open · no | Data |
| Rating | Read only: no · yes | Value · Max (text) | While hovering a star → previews it; click → Set Value, onChange | Data |
Selection (8)
| Component | Variant properties | Component properties | Interactions and events | Real states |
|---|---|---|---|---|
| Checkbox | Checked: off · on · mixed; Interaction states | Label · Help (text) | Click, Space → Set Checked · toggle, onChange | Data · Error |
| CheckboxGroup | — | Label (text) · Options (slot of Checkbox) · Required (boolean) | When a part emits onChange → onChange with the checked values | Empty · Loading · Data · Error |
| Radio | Checked: off · on | Label · Hint (text) | Click → Set Checked · on, onSelect | Data · Error |
| RadioGroup | Value: one per option | Label (text) · Options (slot of Radio) | A radio → Change to Value, onChange; ↑↓ move the value | Empty · Loading · Data · Error |
| Switch | Checked: off · on | Label · Description (text) | Click, Space → Set Checked · toggle, onChange | Empty · Loading · Data · Error |
| Segmented control | Selected: one per segment | Segments (slot) | A segment → Change to Selected, onChange; ←→ move | Data |
| Chip / Tag | Selected: no · yes; Removable: no · yes | Label (text) · Icon (swap) | Click → Set Selected · toggle, onToggle; × → onRemove | Data |
| Toggle | Pressed: no · yes | Icon (swap) · Label (text) | Click → Set Pressed · toggle, onChange | Data |
Navigation (9)
| Component | Variant properties | Component properties | Interactions and events | Real states |
|---|---|---|---|---|
| Tabs | Selected: one per tab | Tabs (slot of Tab) · Panels (slot) | A tab → Change to Selected, onChange; ←→ → Set Selected · previous / next | Loading · Data |
| Breadcrumb | — | Items (slot of Link) · Separator (swap) | An item → onNavigate. Where it goes is set on the page | Data |
| Pagination | — | Page · Pages · Per page (text) | ‹ › → Set Page · previous / next, onChange; a number → Set Page, onChange | Loading · Data |
| Stepper | Current: one per step | Steps (slot) | Next → Change to Current · next, onStep; Back → previous; a done step → Change to it | Data · Error |
| Sidebar nav | Collapsed: no · yes | Items (slot) · Selected (text) | An item → Set Selected, onNavigate; the handle → Set Collapsed · toggle | Data |
| Top bar | — | Logo (swap) · Items (slot) · Actions (slot) | The menu button (Mobile) → Show component · Drawer | Data |
| Bottom nav | Selected: one per item | Items (slot, 3 to 5) | An item → Change to Selected, onNavigate | Data |
| Menu | Open: no · yes | Trigger (slot) · Items (slot of Menu items) | An item → onSelect, Close; ↑↓ move; Esc → Close | Data |
| Command palette | Open: no · yes | Query (text) · Groups (slot) | ⌘K → Show component; typing → Set Query, onSearch; Enter → onRun, Close; Esc → Close | Empty · Loading · Data |
Feedback (7)
| Component | Variant properties | Component properties | Interactions and events | Real states |
|---|---|---|---|---|
| Toast | Tone: success · danger · warn · info | Message · Action (text) · Icon (swap) · Show action (boolean) | After 5 s → Close, onDismiss; × or Esc → Close, onDismiss; the action → onAction, Close | Loading · Data |
| Alert / Banner | Tone: info · success · warn · danger | Title · Message · Action (text) · Dismissible (boolean) | × → Close, onDismiss; the action → onAction | Data |
| Progress bar | Indeterminate: no · yes | Value · Label (text) · Show value (boolean) | None | Loading · Data |
| Spinner | — | Label (text, for screen readers) | None | Loading |
| Skeleton | Shape: line · block · circle | Lines (text) | None | Loading |
| Empty state | — | Icon (swap) · Title · Message (text) · Action (slot) | The action → onAction | Empty |
| Badge | Tone: neutral · success · warn · danger · info | Label (text) · Dot (boolean) | None | Data |
Overlays (6)
| Component | Variant properties | Component properties | Interactions and events | Real states |
|---|---|---|---|---|
| Modal / Dialog | Width: sm · md · lg · sheet | Title (text) · Body (slot) · Primary · Secondary (text) | ×, Esc or the backdrop → Close, onClose; Primary → onConfirm; Secondary → Close. Focus stays inside and returns to the opener | Loading · Data · Error |
| Drawer / Sheet | Side: left · right · bottom | Title (text) · Body (slot) | ×, Esc or the backdrop → Close, onClose; drag down (bottom) → Close | Loading · Data |
| Popover | Open: no · yes; Placement: top · right · bottom · left | Trigger (slot) · Body (slot) | Click the trigger → Set Open · toggle; a click outside or Esc → Set Open · no | Data |
| Tooltip | Placement: top · right · bottom · left | Text (text) | While hovering or focused, after 400 ms → shows; leaving → hides | Data |
| Confirm dialog | Tone: default · danger | Title · Message · Confirm · Cancel (text) | Confirm → onConfirm, Close; Cancel or Esc → onCancel, Close | Loading · Data |
| Context menu | — | Items (slot of Menu items) | Right-click on its target → Show at the pointer; an item → onSelect, Close; Esc → Close | Data |
Data display (9)
| Component | Variant properties | Component properties | Interactions and events | Real states |
|---|---|---|---|---|
| Card | Tone: default · muted · outlined | Title (text) · Body (slot) · Footer (slot) · Clickable (boolean) | Click, when clickable → onClick | Empty · Loading · Data · Error |
| Table | Density: comfortable · compact; Selectable: no · yes | Columns (slot) · Rows (slot) · Sort (text) | A header → Set Sort · none, up, down, onSort; a row’s checkbox → onSelect; a row → onRowClick | Empty · Loading · Data · Error |
| List | — | Items (slot of List item) · Dividers (boolean) | An item → onSelect | Empty · Loading · Data · Error |
| Avatar | Shape: circle · square; Kind: image · initials · icon | Name (text) · Image (swap) · Status dot (boolean) | None | Loading · Data |
| Avatar group | — | Avatars (slot) · Max (text) | +N → onMore | Data |
| Accordion | Expanded: no · yes | Title · Meta (text) · Icon (swap) · Content (slot) | The header, Enter, Space → Set Expanded · toggle, onToggle | Empty · Loading · Data · Error |
| Stat / KPI tile | Tone: emerald · rose · blue · amber · zinc | Label · Value · Sub (text) · Trend (swap) | None; a click is set on the page | Empty · Loading · Data · Error |
| Timeline | — | Items (slot of Event) | None | Empty · Loading · Data |
| Tree view | Expanded, per node: no · yes | Nodes (slot) · Selected (text) | A chevron → Set Expanded · toggle, onToggle; a node → Set Selected, onSelect; arrows move | Empty · Loading · Data |
Form layout (3)
| Component | Variant properties | Component properties | Interactions and events | Real states |
|---|---|---|---|---|
| Form field | — | Label · Help · Error (text) · Required (boolean) · Control (slot) | When its control emits onBlur → checks it: Change to State · Error or Data | Data · Error |
| Fieldset | — | Legend (text) · Fields (slot) · Disabled (boolean) | None | Data |
| Inline validation | Tone: success · warn · danger | Message (text) · Icon (swap) | Shown when a part it watches emits onInvalid; hidden on onValid | Data · Error |
Related
- 2026-10-21-components-like-figma — the model
- components-start-from — the catalogue picker
- components-kit — the kit in a product, and its updates
- demo-tenants — what the screens draw
Sources
- .context/designs/web/components-edit/components-start-from.html
- .context/designs/web/components-kit/kit.html