Components

Composer

A product-grade form shell for creating or editing work without turning every field into another bordered box.

Complete composer

The shell provides hierarchy, scrolling, responsive geometry, and action regions. Title and description are normal form controls in borderless mode, so submission and accessibility stay native.

tsx

import { Button, Composer, PropertyPill } from "@karnstack/dowel";

<Composer.Root aria-label="Create work item" onSubmit={createItem}>
  <Composer.Header>
    <PropertyPill label="Workspace" tone="accent" />
    <Button size="sm" variant="muted">Save draft</Button>
  </Composer.Header>
  <Composer.Body>
    <Composer.Title name="title" placeholder="Add title" />
    <Composer.Description
      name="description"
      placeholder="What needs to change, and why?"
    />
  </Composer.Body>
  <Composer.Properties>
    <PropertyPill label="Triage" />
    <PropertyPill label="Priority" />
    <PropertyPill label="Assignee" />
    <PropertyPill label="Project" />
    <PropertyPill label="Labels" />
  </Composer.Properties>
  <Composer.Footer>
    <PropertyPill label="More actions" />
    <Composer.Actions>
      <Button variant="primary" type="submit">Create item</Button>
    </Composer.Actions>
  </Composer.Footer>
</Composer.Root>

Property pills

PropertyPill is a compact trigger for status, priority, assignee, project, labels, dates, and similar metadata. Wrap it with a picker primitive when the property is editable.

tsx

<PropertyPill label="Status" />
<PropertyPill label="Selected" active />
<PropertyPill label="Workspace" tone="accent" />
<PropertyPill label="Blocked" tone="danger" />

Anatomy

Header, Body, Properties, Footer, and Actions are layout contracts. Title and Description are the opinionated borderless controls. A Divider can separate structured content inside the editing region.