Clipboard
Font
Fill
Arrange
Components
From a button to a timeline
109 components on 58 pages. Base controls sit beside the ones only professional editors need, and every one draws through the theme tokens alone: switch the skin above and this whole page follows.
Made for professional editors
Ribbons, colour, curves and time. These are running components: drag them.
Shadows
#5645d4
00:01:23:10
HistogramA smoothed histogram of an image’s tones.
General 6
Button PlaygroundStarts an action. One primary button per view; the rest secondary or ghost.
Spinner PlaygroundA spinning circle for work in progress.
IconButton PlaygroundAn icon-only button with an accessible label; pressed makes it a toggle.
Badge PlaygroundA small count or status beside a label.
CardA product card: 12px radius, a hairline, a light shadow.
Disclosure PlaygroundA section that opens and closes under its title.
Forms 11
TextInput PlaygroundA single-line text field in three sizes: sm (toolbars), md (panels), lg (forms).
PasswordInput PlaygroundA password field with a show and hide button outside the tab order.
Textarea PlaygroundMulti-line text; with autoSize it grows with its text (useAutoSize does the same for a text area of your own).
Select PlaygroundA drop-down: a native select drawn as Tessera’s control, for the platform’s popup and accessibility.
Switch PlaygroundAn on/off switch for a setting that applies at once.
FieldA label, a control, and its hint or error, wired for screen readers.
NumberField PlaygroundA number with a label you drag to scrub, arrows to step, and units.
Bar controls PlaygroundCompact controls for options bars: Segmented, Choice, Checkbox, Hint, BarSeparator.
FormA form that keeps its values and checks them against rules before onFinish; useForm reaches it from outside, useWatch reads one field.
Combobox and MultiSelectOne choice from a long list, searched as the person types or on the server with onSearch, and several choices toggled in a list.
NumberInput, DateTimeInput, PopconfirmA number field that is empty as null, a date or date-and-time field, and a confirmation beside the button it guards.
Data display 7
TableRecords in rows and columns: columns say what each shows, dataSource holds the records; pages, pinned columns, loading and empty states.
Tag PlaygroundA short status or category label on a soft tint of its tone.
Alert PlaygroundA message in the page, in its tone, with an optional action or close.
Descriptions PlaygroundLabelled values of one record, in columns; with Breadcrumb, Avatar, and Divider for a detail page.
Empty and Result PlaygroundNothing to show yet, and the outcome of a whole page or flow, each with what to do next.
Skeleton PlaygroundA placeholder in the shape of content that is loading.
ChartsLineChart and BarChart draw one or more series over ordered categories; PieChart draws parts of a whole, as a pie or a donut. A legend, a readout under the pointer, the chart palette tokens or a colour of yours; height="fill" takes the height of its box.
Navigation 4
Tabs PlaygroundSections of one page under a row of tabs; arrow keys move between them.
AppRailA suite’s app switcher on the left edge: each app’s icon over its name, the open one marked, badges, the product mark above and the account below; compact shows icons only, each name as its tooltip.
NavMenuAn app’s sidebar: its pages as links under headings, the current one marked; collapses to icons.
Pagination PlaygroundThe pages of a long list on the server: the range shown, page buttons, and a page size.
Menus and overlays 12
MenuButtonA button that opens a menu of MenuItems, with shortcuts and check marks.
ContextMenuA menu at a point, for right-clicks.
DialogA modal (or modeless) dialog with a title, content, and actions; it traps focus and closes on Escape.
PreviewDialogA dialog whose values preview live in the document: the kit supplies begin, update and end.
ToastA short notice at the top. Render Toaster once; call toast() or toast.success(), .error(), .loading(), .promise() anywhere, with an id to replace a notice and an action button.
ModalA composable modal dialog for host apps: header, content, footer; it traps focus and closes on Escape or an outside press.
TooltipA short label shown on hover or keyboard focus, for an icon or a status that needs a word.
PopoverFloating content anchored to a trigger, positioned to stay on screen: filters, pickers, small forms.
SheetA panel that slides in from the right to edit one thing beside the work, guarding unsaved changes; from the left, it holds an app’s navigation on a phone.
ConfirmuseConfirm() asks a yes-or-no question and resolves a promise; asks queue one at a time.
CommandA searchable list of commands or choices: type to filter, arrows and Enter to pick.
DropPanelA popover anchored to an element, closing on a press outside or Escape.
Editor chrome 6
ScrollbarA persistent scrollbar for a virtual document viewport, with a proportional thumb, dragging, track clicks and keyboard navigation.
Ribbon PlaygroundOffice-style command groups: large and small buttons, stacks, rows, and swatches; it collapses to Single line, and a ribbon too wide for its window gives way in steps (RibbonFit): small buttons, icons alone, then groups collapsed to one button each.
OverflowStripA row that scrolls sideways when it does not fit: the cut edge fades, and a button there scrolls.
StatusBarThe bottom bar: document facts on the left, zoom on the right.
TableSizePickerPick a table size by hovering a grid.
Panel partsPieces of list panels: visibility eyes, in-place rename, footers, thumbnails.
Workspace 3
Color 5
ColorPicker PlaygroundSaturation and brightness square, hue strip, hex and RGB fields.
ColorWheel PlaygroundA grading wheel with a lightness slider, as colour correction panels use.
GradientSlider PlaygroundA slider drawn over its own gradient: temperature, tint, hue.
CurveEditorTone curves: drag points, double-click to add, with a histogram under them.
Histogram PlaygroundA smoothed histogram of an image’s tones.