Entry points

Custom dashboard code imports from two entry points:

• alinea/components: generic UI building blocks, such as buttons, inputs, dialogs and tables. They don't know about your content and work anywhere inside the dashboard.

• alinea/cms: what is tied to the CMS, such as the hooks that read and write field values, the entry being edited and the signed-in user, FieldChrome and the prop types of field, type and root views. See the alinea/cms API in Custom fields.

Usage

import {type FieldViewProps, useField, useFieldOptions} from 'alinea/cms'
import {Select, SelectItem} from 'alinea/components'
import type {Priority, PriorityField} from './Priority'

export function PriorityView({field}: FieldViewProps<PriorityField>) {
  const [value, setValue] = useField(field)
  const options = useFieldOptions(field)
  return (
    <Select
      label={options.label}
      value={value}
      onValueChange={next => setValue((next ?? 'normal') as Priority)}
      readOnly={options.readOnly}
    >
      <SelectItem value="low">Low</SelectItem>
      <SelectItem value="normal">Normal</SelectItem>
      <SelectItem value="high">High</SelectItem>
    </Select>
  )
}

The components are styled by the dashboard's stylesheet and theme, so they are meant for code that runs inside the dashboard.

Conventions

The API follows shadcn/ui and Radix, so the names will feel familiar:

• Compound components are named after their parts: Dialog, DialogTrigger, DialogContent, DialogTitle.

• Controlled and uncontrolled state use the same prop names everywhere: value, defaultValue and onValueChange; checked and onCheckedChange; open, defaultOpen and onOpenChange.

• Form controls take label, description, error, required, disabled, readOnly, icon and shared, and render their label and messages with Field.

• Dates and times are ISO strings (2026-09-23, 14:30). Collection keys are strings or numbers, and a selection is a Set of keys or 'all'.

• Every component accepts className and style. Each rendered part has a data-slot attribute (data-slot="dialog-content"), and variants are exposed as data-variant and data-size, which gives your CSS stable hooks.

• Colors, fonts and radii come from CSS variables such as --alinea-fg, --alinea-bg, --alinea-border, --alinea-primary and --alinea-radius. Use them in your own styles to follow the theme.

The props of every component are typed, so your editor shows what each one accepts. Types shared between components, such as Selection, Key and IconType, are exported as types from alinea/components too.

Icons

Components with an icon prop take an icon component (any component that renders an <svg>, such as those from react-icons or copied from Icones) or an element. The icons of the dashboard itself are exported from alinea/dashboard/icons.