Tessera UI

Accessible components for Tessera, in the open. You copy a component into your project with one command, and from then on it is your code: change it, restyle it, delete what you do not use.

npx tessera add Button

Every component has a contract (its variants, states, parts, slots and events), styles that use only design tokens, and a generated accessibility test that runs in light and dark themes. tessera add also checks that your design system has the tokens a component uses.

Components 25

• Accordion

  A stack of AccordionItems that share a border and spacing.

• AccordionItem

  A heading that shows and hides a region of content. Use several inside an Accordion.

• Alert

  A message the person should notice, announced when it appears. Use it for what happened or what to fix, not for decoration.

• Avatar

  A person or a thing as a picture, or as initials when there is no picture or it does not load.

• Badge

  A small label for a status or category.

• Button

  Triggers an action. Press it with a mouse, a finger, Enter or Space.

• Card

  A raised surface that groups related content, with an optional heading.

• Checkbox

  A choice that is on or off. Press it, or use Space.

• Combobox

  A text field with a list of options that narrows as you type, for choosing from many. Use a Select for a short fixed list.

• Dialog

  A modal dialog: it takes focus, makes the page behind it inert and stops it scrolling, and gives focus back when it closes.

• Form

  A form that checks what the person entered before it lets it through. On submit it runs your rules: a valid form fires submit with the values, an invalid one fires invalid with the errors and moves focus to the first field with one.

• FormField

  A label, a hint and an error around a control that has none of its own: a native input, or a control you built. It connects them for assistive technology, so the control is named, described and marked invalid.

• Icon

  A small drawing that stands for an action or a thing, from Lucide. Give it a label when it says something on its own; without one it is decoration and hidden from assistive technology.

• Kbd

  A key or a shortcut, shown as it is on a keyboard.

• Popover

  A panel that opens next to a button and holds more than a tooltip can: text, a form, a few actions. It closes with Escape or a click outside, and the button always says whether it is open.

• Progress

  How far along something is. Give it a value from 0 to max, or leave the value out when the length of the wait is not known.

• RadioGroup

  A set of options where exactly one can be chosen. Arrow keys move through them and choose; Tab leaves the group.

• Select

  A list of options that opens from a field and takes one, on the browser's own select. Use a Combobox to search a long list.

• Separator

  A thin line that divides content, horizontally or vertically.

• Skeleton

  A placeholder in the shape of content that has not loaded yet. It is hidden from assistive technology: announce the loading with a Spinner or a live region.

• Spinner

  Shows that something is loading. It is announced to a screen reader with the label.

• Switch

  A setting that is on or off, and takes effect at once. Press it, or use Space or Enter.

• TextField

  A text input with a visible label and an optional hint. The label is required: it is what assistive technology reads.

• Textarea

  A text box for more than one line, with a visible label, an optional hint and an optional error. The label is required: it is what assistive technology reads.

• Tooltip

  A short hint for a control, shown when the pointer rests on it or it has focus. It adds a description, never the only name: a control that needs a label has one of its own.

Design systems

Components read their colors, spacing and type from design tokens, so the same component fits any look. Token sets give you a place to start.

The registry

This site is also the registry. tessera add reads https://tessera-ui.pixelscript.io/index.json, and any tool can: it is plain JSON, served with open CORS.