All 46 families

Every @markless/ui family, its own import path, and what it is for.

You can style any family through its ui-* attributes. Here is every family the package exports.

Import any family by name from the package root: import { tabs } from '@markless/ui'. Most families also have their own path. The list follows version 0.5.0.

Family	Own path	What it is
`accordion`	`@markless/ui/accordion`	Stacked sections. Each heading opens or closes its own panel.
`base`	root only	Small parts: `button`, `label`, `separator` and `visuallyhidden`.
`buttongroup`	`@markless/ui/buttongroup`	A set of toggle buttons, such as text alignment or bold and italic.
`calendar`	`@markless/ui/calendar`	A month of days to pick a date from.
`carousel`	`@markless/ui/carousel`	Slides with back, forward, slide-picker and play controls.
`checkbox`	`@markless/ui/checkbox`	One checkbox with a label, a description, an error and a form field.
`checklist`	`@markless/ui/checklist`	A group of checkboxes with a select-all box.
`collapsible`	`@markless/ui/collapsible`	One trigger that shows or hides one panel.
`colorpicker`	`@markless/ui/colorpicker`	A color picker with an area, channel tracks, a typed value and swatches.
`combobox`	`@markless/ui/combobox`	A text field with a list attached. Focus stays in the field.
`crop`	`@markless/ui/crop`	A rectangle you move and resize inside an area, such as an image cropper.
`datebox`	`@markless/ui/datebox`	A date typed into three number boxes.
`drawer`	`@markless/ui/drawer`	A dialog that slides in from an edge and swipes back out.
`editable`	`@markless/ui/editable`	Rename in place. A value shows as a button and edits in a text field.
`fileupload`	`@markless/ui/fileupload`	A drop area, a browse button and a row for each chosen file.
`gridlist`	`@markless/ui/gridlist`	A list of rich items, such as cards, where a row holds its own controls.
`hovercard`	root only	A card that shows when the pointer rests on its trigger or focus stays there.
`ink`	`@markless/ui/ink`	A freehand drawing area, such as a signature pad.
`menu`	`@markless/ui/menu`	A menu that a button or a right-click opens, with submenus.
`menubar`	`@markless/ui/menubar`	An application menu bar, such as File, Edit and View.
`modal`	`@markless/ui/modal`	A dialog that blocks the page behind it. It has an alert mode.
`navbar`	`@markless/ui/navbar`	The site’s main navigation, with dropdown items.
`numberbox`	`@markless/ui/numberbox`	One number in a text field, with two step buttons.
`otp`	`@markless/ui/otp`	A one-time code shown as boxes over one real text field.
`pad`	`@markless/ui/pad`	A control that picks an X and a Y value on one area.
`pagination`	`@markless/ui/pagination`	Page links with back and forward controls.
`popover`	`@markless/ui/popover`	A panel that a trigger opens, placed next to that trigger.
`progress`	`@markless/ui/progress`	A progress bar with a track, an indicator and a value label.
`qrcode`	`@markless/ui/qrcode`	Draws a value as a QR code.
`radiogroup`	`@markless/ui/radiogroup`	A group of radio choices.
`rating`	`@markless/ui/rating`	One number out of a row of marks, such as stars.
`resizable`	`@markless/ui/resizable`	Panels in a row or column with dividers you drag.
`select`	`@markless/ui/select`	A button that opens a list of options. You pick one.
`slider`	`@markless/ui/slider`	A value or a range along a track, with one or two thumbs.
`table`	`@markless/ui/table`	Rows and columns with arrow-key movement, row selection and sort headers.
`tabs`	`@markless/ui/tabs`	A list of tabs. Each tab shows one panel.
`taglist`	`@markless/ui/taglist`	A row of text tags. Add `taglist.input` to type new ones.
`textbox`	`@markless/ui/textbox`	A labelled input or textarea with a description and an error.
`timebox`	`@markless/ui/timebox`	A time of day typed into separate hour and minute boxes.
`toaster`	`@markless/ui/toaster`	A region that shows short messages and reads them to screen readers.
`toggle`	`@markless/ui/toggle`	An on/off switch.
`tokenbox`	root only	Text with tokens inside it, such as mentions.
`toolbar`	`@markless/ui/toolbar`	A bar of controls that share one Tab stop.
`tooltip`	`@markless/ui/tooltip`	A short description that shows on hover or keyboard focus.
`tour`	`@markless/ui/tour`	A tour of steps that highlights elements on the page.
`tree`	`@markless/ui/tree`	A nested tree, such as a file tree.

The package root also exports the icon packs from @markless/icons, such as lucide.

Next: How does your editor understand the .tsrx files that use these families? Editor setup →