Catalogue
Every item the registry serves, with the command that copies it into a
project. Search by a name, by a word from what an item is for, or by a prop:
onRetry finds the components that take one, and says so under each.
127 items
- AboutPlatecomponent
Every desktop product has an About box and every one of them was written from scratch: the mark at whatever size came to hand, the version as a string in the middle of a sentence, a line about the family somewhere or nowhere.
npx shadcn@latest add https://lacodda.github.io/dowel/r/about-plate.json - Accordioncomponent
A stack of collapsible sections that share one rule about how many can be open at once - an FAQ, the groups in a long settings page, the filters in a sidebar.
AccordionAccordionItemAccordionHeaderAccordionTriggerAccordionPanelnpx shadcn@latest add https://lacodda.github.io/dowel/r/accordion.json - ActionBarcomponent
The strip of actions that belongs to what is on screen: Save and Cancel at the foot of a form, the bulk actions above a table, the formatting buttons over an editor.
ActionBarActionBarButtonActionBarSeparatorActionBarGroupActionBarSpacernpx shadcn@latest add https://lacodda.github.io/dowel/r/action-bar.json - ActivityHeatmapcomponent
The shape everyone recognises: weeks as columns, weekdays as rows, time running left to right, and a value carried by how dark a square is.
npx shadcn@latest add https://lacodda.github.io/dowel/r/activity-heatmap.json - ActivityLegendcomponent
Separate from the grid because a caller showing three grids on one screen wants one legend, and because the words in it are the product's.
npx shadcn@latest add https://lacodda.github.io/dowel/r/activity-legend.json - ActivityWeekscomponent
Split out for the reason `table-sort` and `track-segments` are - a product that draws this somewhere other than the DOM needs the arithmetic, not a component.
npx shadcn@latest add https://lacodda.github.io/dowel/r/activity-weeks.json - Alertcomponent
A message that stays on the screen, in the flow of the page, about the thing next to it: this field could not be saved, this profile has no axes yet, this export is out of date.
npx shadcn@latest add https://lacodda.github.io/dowel/r/alert.json - dowel appset
The set a product of the line actually starts from: the everyday controls, the overlays it needs on day one, and the ways of choosing something.
npx shadcn@latest add https://lacodda.github.io/dowel/r/app.json - AppShellcomponent
The frame a product draws once and then never thinks about: a bar across the top, a rail down the left, and the screen in the corner they leave.
AppShellScreennpx shadcn@latest add https://lacodda.github.io/dowel/r/app-shell.json - Avatarcomponent
A person, in the space of a word.
AvatarAvatarGroupnpx shadcn@latest add https://lacodda.github.io/dowel/r/avatar.json - Badgecomponent
A small piece of state attached to something else: a count, a status, a label.
npx shadcn@latest add https://lacodda.github.io/dowel/r/badge.json - Bannercomponent
A strip across the top of the application, about the application: you are offline, this build is a preview, your licence expires on Friday, a new version is ready to install.
npx shadcn@latest add https://lacodda.github.io/dowel/r/banner.json - BarChartcomponent
Bars rather than a line, and the distinction is the data's not the drawing's: a line says the value exists between the points, a column says each period is its own sum.
BarChartBaselineChartFramenpx shadcn@latest add https://lacodda.github.io/dowel/r/bar-chart.json - BigCalendarcomponent
A month at a time, with what is on each day of it, filling the box it is given.
npx shadcn@latest add https://lacodda.github.io/dowel/r/big-calendar.json - BigCalendarItemcomponent
One thing on a day of a month view, in one line: a release, a lesson, a payment that falls due.
BigCalendarDayContextBigCalendarItemnpx shadcn@latest add https://lacodda.github.io/dowel/r/big-calendar-item.json - Breadcrumbscomponent
Where you are, as a trail rather than as a word.
npx shadcn@latest add https://lacodda.github.io/dowel/r/breadcrumbs.json - Buttoncomponent
Six variants, because that is what the line's products actually reach for: one primary action per screen, a quiet default, a soft accent for something selected, a destructive one, an icon-only, and one that reads as a link.
npx shadcn@latest add https://lacodda.github.io/dowel/r/button.json - Calendarcomponent
The sums live next door in `calendar-math`, which has no React in it; this is the grid that draws them and the keyboard that moves around it.
npx shadcn@latest add https://lacodda.github.io/dowel/r/calendar.json - CalendarMathcomponent
Split out of the Calendar because the size gate asked the right question: the file was two and a half times over its ceiling, and the reason was that it held two things - the sums, and the grid that draws them.
npx shadcn@latest add https://lacodda.github.io/dowel/r/calendar-math.json - Checkboxcomponent
The interesting part is the words.
CheckboxCheckboxGroupnpx shadcn@latest add https://lacodda.github.io/dowel/r/checkbox.json - Chipcomponent
A badge you can act on - taken away, or switched - and a row of them that switch together.
ChipChipGroupnpx shadcn@latest add https://lacodda.github.io/dowel/r/chip.json - CodeBlockcomponent
The frame around a piece of code is the same everywhere and is written again in every product: the scroll that must not wrap, the gutter of line numbers that must not be selectable, the copy button, the caption saying which file this is, and the marking of the lines the reader was sent here to look at.
npx shadcn@latest add https://lacodda.github.io/dowel/r/code-block.json - Collapsiblecomponent
One region of a screen that a reader shows or hides by choice - release notes under a version number, a filter panel, the raw payload under a log line.
CollapsibleCollapsibleTriggerCollapsiblePanelnpx shadcn@latest add https://lacodda.github.io/dowel/r/collapsible.json - ColorFieldcomponent
Picking a colour for something the product stores: a tag, a project, a calendar.
npx shadcn@latest add https://lacodda.github.io/dowel/r/color-field.json - ColumnResizeHandlecomponent
The handle, and the hook that keeps the widths it produces.
npx shadcn@latest add https://lacodda.github.io/dowel/r/column-resize-handle.json - Comboboxcomponent
A Select you can type in.
ComboboxComboboxInputGroupComboboxTriggerComboboxIconComboboxGroupComboboxCollectionComboboxItemIndicatorComboboxStatusComboboxChipsComboboxValueComboboxInputComboboxClearComboboxPopupComboboxListComboboxItemComboboxEmptyComboboxChipComboboxChipRemoveComboboxGroupLabelnpx shadcn@latest add https://lacodda.github.io/dowel/r/combobox.json - CommandPalettecomponent
One box that finds anything: the shortcut opens it, typing narrows a list, Enter runs what is highlighted.
CommandPaletteCommandPaletteItemCommandPaletteListCommandPaletteEmptyCommandPaletteGroupCommandPaletteGroupLabelCommandPaletteCollectionCommandPalettePopupCommandPaletteInputCommandPaletteRownpx shadcn@latest add https://lacodda.github.io/dowel/r/command-palette.json - Commandscomponent
One list of everything the application can do, declared where the doing lives - and the keyboard, the command palette and the sheet of shortcuts all read that list, so a key is written once and none of them can be a version behind.
npx shadcn@latest add https://lacodda.github.io/dowel/r/commands.json - ConfirmDialogcomponent
The dialog for a choice that cannot be taken back - deleting, discarding, revoking.
ConfirmDialogConfirmDialogTriggerConfirmDialogCloseConfirmDialogBackdropConfirmDialogPopupConfirmDialogTitleConfirmDialogDescriptionConfirmDialogHeaderConfirmDialogBodyConfirmDialogActionsnpx shadcn@latest add https://lacodda.github.io/dowel/r/confirm-dialog.json - ContextMenucomponent
The same list of actions as Menu, opened the other way round: by right click, or by a long press on a touch screen, over an *area* rather than from a button.
ContextMenuContextMenuTriggerContextMenuGroupContextMenuSubContextMenuPopupContextMenuItemContextMenuSubTriggerContextMenuCheckboxItemContextMenuCheckboxIndicatorContextMenuSeparatorContextMenuGroupLabelnpx shadcn@latest add https://lacodda.github.io/dowel/r/context-menu.json - CopyButtoncomponent
Whatever a product shows in a panel - code, a payload, a log, one side of a comparison - somebody eventually wants to take it away, and the button that lets them is written again every time with the same three things missed.
npx shadcn@latest add https://lacodda.github.io/dowel/r/copy-button.json - Copyablecomponent
Any text that someone will eventually want to copy - an id, a path, a hash, a token - copied with one click.
npx shadcn@latest add https://lacodda.github.io/dowel/r/copyable.json - DatePickercomponent
The trigger is a button rather than a text input, and that is the decision worth stating.
npx shadcn@latest add https://lacodda.github.io/dowel/r/date-picker.json - DateRangePickercomponent
The interesting part is the state between them.
npx shadcn@latest add https://lacodda.github.io/dowel/r/date-range-picker.json - Dialogcomponent
The parts are exposed rather than wrapped in one component with `title` and `footer` props.
DialogDialogTriggerDialogCloseDialogBackdropDialogPopupDialogHeaderDialogBodyDialogActionsDialogTitleDialogDescriptionnpx shadcn@latest add https://lacodda.github.io/dowel/r/dialog.json - DiffLinescomponent
Split out like `line-scale` and `table-sort`: a product that wants to know how much moved between two drafts - to put a number in a list, to decide whether to offer the comparison at all - should not have to render a component to find out.
npx shadcn@latest add https://lacodda.github.io/dowel/r/diff-lines.json - DiffViewcomponent
The question this answers is "how did this read before, and how does it read now" - a version against the one before it, a proposal against what is there, a file against what is on disk.
npx shadcn@latest add https://lacodda.github.io/dowel/r/diff-view.json - Dividercomponent
The line between one part of a screen and the next.
DividerSectionHeadernpx shadcn@latest add https://lacodda.github.io/dowel/r/divider.json - Drawercomponent
A panel that slides in from an edge and holds the screen while it is there - a filter sheet, a detail pane, a form too long to centre.
DrawerDrawerTriggerDrawerCloseDrawerBackdropDrawerPopupDrawerTitleDrawerDescriptionDrawerHeaderDrawerBodyDrawerActionsnpx shadcn@latest add https://lacodda.github.io/dowel/r/drawer.json - DurationFieldcomponent
The alternative is what products keep building: two number boxes labelled "hours" and "minutes", which means two tab stops, two validations, and a reader who has to divide 90 minutes in their head before typing.
npx shadcn@latest add https://lacodda.github.io/dowel/r/duration-field.json - EmptyDashboardScreenblock
A dashboard on its first day: the few things to do before it has anything to show, with the next one ready to press, and the figures it will show once it does - drawn empty, so the screen says what it is for.
npx shadcn@latest add https://lacodda.github.io/dowel/r/empty-dashboard-screen.json - EmptyStatecomponent
Three kinds of nothing, and a product that draws the same panel for all three is telling the reader the wrong thing twice: * **empty** - there is nothing here yet, and that is normal. The panel says what would be here and offers the one action that makes it appear.
EmptyMarkFilteredMarkErrorMarkEmptyStatenpx shadcn@latest add https://lacodda.github.io/dowel/r/empty-state.json - ErrorBoundarycomponent
A class component, and the only one in the set - not a style choice: React gives no hook for catching a render error, and `componentDidCatch` exists nowhere else.
npx shadcn@latest add https://lacodda.github.io/dowel/r/error-boundary.json - dowel feedbackset
The three ways of saying that something happened - one that goes away, one that is still true after a reload, one that is true on every screen - and the dialog for anything that needs an answer.
npx shadcn@latest add https://lacodda.github.io/dowel/r/feedback.json - Fieldcomponent
Every form is the same four parts repeated: a name for the control, the control, sometimes a hint, and sometimes an error.
FieldFieldGroupnpx shadcn@latest add https://lacodda.github.io/dowel/r/field.json - FieldDraftcomponent
The rules between a value stored somewhere and the text someone is typing over it, as a pure step and a hook to spread on an input.
npx shadcn@latest add https://lacodda.github.io/dowel/r/field-draft.json - FileDropcomponent
A place to put files: drag them onto it, or press it and pick them.
npx shadcn@latest add https://lacodda.github.io/dowel/r/file-drop.json - FilterPopovercomponent
A text box, a handful of checkboxes - with one way to clear it.
npx shadcn@latest add https://lacodda.github.io/dowel/r/filter-popover.json - dowel formsset
What a form is made of: the fields, the two ways of choosing from a list, and the button that submits it.
npx shadcn@latest add https://lacodda.github.io/dowel/r/forms.json - Framecomponent
The geometry of a screen whose bottom edge is the window's: a column that hands its height down and scrolls nowhere itself, a panel whose bars stand while its body scrolls between them, and a list beside what is open in it.
FramePaneListDetailListDetailBacknpx shadcn@latest add https://lacodda.github.io/dowel/r/frame.json - Imagecomponent
The layout jump a loading picture leaves behind is not a styling defect, it is a missing number: the browser has nowhere to put the box until the file arrives and tells it the pixel size, so everything below the picture slides down and back up.
AspectRatioImagenpx shadcn@latest add https://lacodda.github.io/dowel/r/image.json - InlineFieldcomponent
A value that is edited where it is shown: click it, type, Enter or leave to keep, Escape to take it back.
npx shadcn@latest add https://lacodda.github.io/dowel/r/inline-field.json - Inputcomponent
A single-line field.
npx shadcn@latest add https://lacodda.github.io/dowel/r/input.json - JsonRowscomponent
The sibling of `tree-rows`, built the same way and for the same reason: a product that wants to count the rows before drawing any of them - to put a viewer inside a VirtualList, to say "1,204 entries" - imports this and never the component.
npx shadcn@latest add https://lacodda.github.io/dowel/r/json-rows.json - JsonViewercomponent
What a product reaches for when it has to show a response, a settings file, a webhook payload - data the reader needs to understand, not edit.
npx shadcn@latest add https://lacodda.github.io/dowel/r/json-viewer.json - Kbdcomponent
A key, as printed in a menu or a hint: `Ctrl` `K`.
npx shadcn@latest add https://lacodda.github.io/dowel/r/kbd.json - KeyValuecomponent
The shape every product builds out of two `<div>`s in a flex row, and the reason it is worth having once: it is a `<dl>`, and the pairing is what a screen reader announces.
KeyValueKeyValueRownpx shadcn@latest add https://lacodda.github.io/dowel/r/key-value.json - Layercomponent
Which layer a popup opened inside an overlay lands on, so that a select in a dialog, a menu in a drawer and a date picker in a popover open above the thing that opened them.
npx shadcn@latest add https://lacodda.github.io/dowel/r/layer.json - LineChartcomponent
The distinction against its neighbours is the data's, not the drawing's.
npx shadcn@latest add https://lacodda.github.io/dowel/r/line-chart.json - LineScalecomponent
Split out like `track-segments` and `activity-weeks`: a product labelling its own points, or checking its own domain sums, should not import a component to get at the numbers.
npx shadcn@latest add https://lacodda.github.io/dowel/r/line-scale.json - ListDetailScreenblock
A screen of things and the one that is open: a searchable list beside what is open in it, with the empty states, the keyboard and the narrow width a list needs and every product used to draw for itself.
npx shadcn@latest add https://lacodda.github.io/dowel/r/list-detail-screen.json - ListRowcomponent
A row of a list, one thing said in a line: ListRow for a fact, RowButton for a choice.
ListRowRowButtonnpx shadcn@latest add https://lacodda.github.io/dowel/r/list-row.json - LoginScreenblock
The page a product opens on for someone who is not signed in yet: a name, a password, a button, and the two ways it can go wrong said differently - the server refused, or the server could not be reached.
npx shadcn@latest add https://lacodda.github.io/dowel/r/login-screen.json - MarkedTextcomponent
A textarea cannot colour a word.
MarkedLinesMarkedTextMarkedTextareanpx shadcn@latest add https://lacodda.github.io/dowel/r/marked-text.json - Menucomponent
A list of actions that opens from a button - the row menu, the overflow menu, the one behind the three dots.
MenuMenuTriggerMenuGroupMenuSubMenuPopupMenuItemMenuSubTriggerMenuCheckboxItemMenuCheckboxIndicatorMenuSeparatorMenuGroupLabelnpx shadcn@latest add https://lacodda.github.io/dowel/r/menu.json - NavRailcomponent
The product's own destinations: the screens it has, drawn as a column down the left, a row of tabs in a header, or a bar along the bottom of a phone.
NavRailNavGroupNavSpacernpx shadcn@latest add https://lacodda.github.io/dowel/r/nav-rail.json - NotificationBellcomponent
A bell that is always lit is a bell nobody reads, so the count is the product's decision and this draws it: nothing at zero, the number past that, `9+` past nine.
npx shadcn@latest add https://lacodda.github.io/dowel/r/notification-bell.json - NumberFieldcomponent
A number typed into a text input is a string that happens to look like a number, and every product then writes the same four fixes: strip the letters, clamp to a range, round to a step, and decide what an empty box means.
npx shadcn@latest add https://lacodda.github.io/dowel/r/number-field.json - NumberFormatcomponent
Two things, and the second is the reason this is a component rather than a call to `toLocaleString` at each site.
npx shadcn@latest add https://lacodda.github.io/dowel/r/number-format.json - PageHeadercomponent
What a screen says it is, and the buttons that act on the whole of it: a title, a line under it, and the actions at the far end of the same row.
PageHeaderContainernpx shadcn@latest add https://lacodda.github.io/dowel/r/page-header.json - PageSizecomponent
Its own file rather than a part of `Pagination`, because the two are needed apart often enough: a list that scrolls for ever wants "how many to load at a time" and no page buttons, and a table with a fixed page size wants the buttons and no choice.
npx shadcn@latest add https://lacodda.github.io/dowel/r/page-size.json - Paginationcomponent
The arithmetic is exported separately from the component for the same reason `table-sort` is a file of its own: a product that pages on the server needs the page numbers and not the buttons, and computing them a second time in a different place is how the two disagree about where the last page ends.
npx shadcn@latest add https://lacodda.github.io/dowel/r/pagination.json - Panelcomponent
The raised surface everything else sits on.
PanelSectionLabelnpx shadcn@latest add https://lacodda.github.io/dowel/r/panel.json - PasswordFieldcomponent
The reveal is the whole component, and it is not a convenience.
npx shadcn@latest add https://lacodda.github.io/dowel/r/password-field.json - Popovercomponent
A panel anchored to the thing that opened it, for content that belongs beside a control rather than in the middle of the screen: a filter, a small form, a menu of settings that is not a menu.
PopoverPopoverTriggerPopoverClosePopoverPopupPopoverArrowPopoverTitlePopoverDescriptionnpx shadcn@latest add https://lacodda.github.io/dowel/r/popover.json - PreviewCardcomponent
The card that appears when a link is hovered: who the author is, what the issue says, what is behind the URL.
PreviewCardPreviewCardTriggerPreviewCardPopupPreviewCardArrownpx shadcn@latest add https://lacodda.github.io/dowel/r/preview-card.json - ProductMarkcomponent
Every product of the line has one mark, a hexagonal tile with a two-letter code, in three levels that are a rule rather than options: from 64px it carries the product's metaphor under the code, from 28px it is the code alone and larger, and at 27px and under it is the tile filled with the product's colour and a heavy code - a metaphor at sixteen pixels is noise, and a thin outline disappears.
ProductMarkLineMarknpx shadcn@latest add https://lacodda.github.io/dowel/r/product-mark.json - ProductSwitchercomponent
The line's products are meant to be used together: kasl-server reads what kasl records, rigger plans what furca commits, a note in scheda cites a track in lyrid.
npx shadcn@latest add https://lacodda.github.io/dowel/r/product-switcher.json - Progresscomponent
The distinction the component is built on, and the one products collapse: * **determinate** - the fraction is known. The bar fills to it, and a reader can tell how long is left.
npx shadcn@latest add https://lacodda.github.io/dowel/r/progress.json - dowel proseset
The shape of text a product did not write by hand: rendered markdown, a description from a CMS, a model's reply.
npx shadcn@latest add https://lacodda.github.io/dowel/r/prose.json - QueryStatecomponent
Every list in every product writes the same ladder - loading, then failed, then nothing found, then the content - and writes it slightly differently each time.
npx shadcn@latest add https://lacodda.github.io/dowel/r/query-state.json - RadioGroupcomponent
The rule for reaching for this rather than a Select is whether the options are worth the space: a handful of short choices read faster laid out than hidden behind a trigger, and each one becomes a target rather than a step.
RadioGroupRadionpx shadcn@latest add https://lacodda.github.io/dowel/r/radio-group.json - RatingScalecomponent
Generalised from kilna, where it is how a work is scored on each of its axes.
npx shadcn@latest add https://lacodda.github.io/dowel/r/rating-scale.json - RelativeTimecomponent
The rule the component is built on: **relative time is a convenience, never the only copy of the fact.** "Last week" is quicker to read than a date and useless the moment the reader needs to say when something actually happened - and they cannot get it back, because the page has thrown it away.
npx shadcn@latest add https://lacodda.github.io/dowel/r/relative-time.json - ReorderableListcomponent
The columns in a column picker, the stops of a dial, the roles of a profile.
ReorderGripReorderIndicatornpx shadcn@latest add https://lacodda.github.io/dowel/r/reorderable-list.json - SaveStatecomponent
The quiet line beside a field that saves itself: "saving…", then a tick that fades.
npx shadcn@latest add https://lacodda.github.io/dowel/r/save-state.json - SchemaCheckcomponent
The other half of `schema-shape`: that file reads which fields there are, this one holds a value against them.
npx shadcn@latest add https://lacodda.github.io/dowel/r/schema-check.json - SchemaFieldscomponent
A settings screen, a profile, a config: the data is already described once, as a zod schema or a Rust struct, and the form beside it was the second description - the one that fell behind.
npx shadcn@latest add https://lacodda.github.io/dowel/r/schema-fields.json - SchemaShapecomponent
Settings, a profile, a config file: the description of the data already exists, as a zod schema or a Rust struct, and the form was being written a second time beside it by hand.
npx shadcn@latest add https://lacodda.github.io/dowel/r/schema-shape.json - ScrollAreacomponent
The line has one rule for scrollbars: a thin bar laid over the content, never a gutter that takes width.
npx shadcn@latest add https://lacodda.github.io/dowel/r/scroll-area.json - SearchFieldcomponent
An Input that knows it is a search box, which is three small things the products kept not doing: * - a magnifier, so the field is recognisable before it is read; - a way to clear it that is not "select all and delete" - and one that a keyboard can reach, which a decorative `<span>` cannot; - the shortcut that focuses it, shown in the field rather than learned.
npx shadcn@latest add https://lacodda.github.io/dowel/r/search-field.json - SectionNavcomponent
A settings screen is the usual case: five or six sections, each its own address so it can be linked to and the back button walks between them, listed down the left with the current one tinted.
SectionNavSectionHeadingnpx shadcn@latest add https://lacodda.github.io/dowel/r/section-nav.json - SegmentedControlcomponent
Two to five options, one of them chosen, all of them in view - a radio group in a segment's clothes.
SegmentedControlSegmentnpx shadcn@latest add https://lacodda.github.io/dowel/r/segmented-control.json - Selectcomponent
The component the oldest rule in the line is about.
SelectSelectValueSelectIconSelectGroupSelectItemTextSelectItemIndicatorSelectTriggerSelectPopupSelectItemSelectGroupLabelSelectSeparatornpx shadcn@latest add https://lacodda.github.io/dowel/r/select.json - SettingsScreenblock
Settings in sections: a column of destinations, each named with a line of what is in it, beside the open section - and on a phone, the column first and then the section, with the way back.
SettingsScreenSettingsGroupnpx shadcn@latest add https://lacodda.github.io/dowel/r/settings-screen.json - Shortcutcomponent
The one notation the line writes keys in, and the one reading of a keystroke against it, so that what is bound, what is shown and what a person rebinds are the same words.
npx shadcn@latest add https://lacodda.github.io/dowel/r/shortcut.json - ShortcutsDialogcomponent
The sheet of every key the application answers to, opened by `?` - written from the list of commands rather than by hand, so it cannot promise a key that does not work.
ShortcutListShortcutsDialognpx shadcn@latest add https://lacodda.github.io/dowel/r/shortcuts-dialog.json - Skeletoncomponent
The rule the component is built on, and the reason it takes a shape rather than filling the space: * **A skeleton of the wrong shape is worse than no skeleton.** * It promises something the content does not keep, and the promise is paid for in a jump: the page settles, the scrollbar appears, and whatever the reader was about to click has moved. Measured rather than assumed - the line's own calendar showed a list of four short lines where a six-row month grid was about to land, and the skeleton was itself the jump it existed to prevent.
SkeletonSkeletonTextSkeletonListSkeletonGridnpx shadcn@latest add https://lacodda.github.io/dowel/r/skeleton.json - SkeletonOfcomponent
`Skeleton` and its shapes solved half the problem: they gave a product a list, a card and a grid to reach for instead of a spinner.
npx shadcn@latest add https://lacodda.github.io/dowel/r/skeleton-of.json - Slidercomponent
The case for it over a NumberField is that the number does not matter much: a volume, an opacity, a weight in a search filter.
npx shadcn@latest add https://lacodda.github.io/dowel/r/slider.json - Sparklinecomponent
The shape of a history, not a chart of it: no axes, no gridlines, no ticks.
npx shadcn@latest add https://lacodda.github.io/dowel/r/sparkline.json - Spinnercomponent
Something is happening and the answer has not arrived.
npx shadcn@latest add https://lacodda.github.io/dowel/r/spinner.json - Splashcomponent
A desktop product has a second or two between the window appearing and the first screen being ready - a workspace to open, a database to migrate, a plugin to start - and a blank window for that long reads as a crash.
npx shadcn@latest add https://lacodda.github.io/dowel/r/splash.json - Splittercomponent
Three parts - `Splitter`, `SplitterPane`, `SplitterHandle` - rather than a component with a `first` and a `second`.
SplitterSplitterPaneSplitterHandlenpx shadcn@latest add https://lacodda.github.io/dowel/r/splitter.json - StatTilecomponent
The smallest thing on a dashboard and the one every product writes itself: a label above, a number below, sometimes a word about which way it moved.
StatTileStatRownpx shadcn@latest add https://lacodda.github.io/dowel/r/stat-tile.json - StatusDotcomponent
The smallest thing a screen can say about something's condition: a server is up, a job failed, a person is away.
StatusDotStatusBadgenpx shadcn@latest add https://lacodda.github.io/dowel/r/status-dot.json - Steppercomponent
The steps of a task too long for one screen, and where you stand in them: set up a workspace, import a library, configure a connection.
npx shadcn@latest add https://lacodda.github.io/dowel/r/stepper.json - Switchcomponent
The difference from Checkbox is not how it looks, and getting it wrong is the commonest mistake in the pair.
npx shadcn@latest add https://lacodda.github.io/dowel/r/switch.json - Tablecomponent
Parts rather than a `columns` prop, and that is the decision worth stating: a `<DataTable columns={…} rows={…} />` is quicker to write for the first table and then owns every cell in the product forever.
TableTableScrollTableHeadTableBodyTableRowTableCellTableHeaderTableSortHeaderTableEmptynpx shadcn@latest add https://lacodda.github.io/dowel/r/table.json - TableSortcomponent
Split out of the Table for the reason `calendar-math` was split out of the Calendar: these are the sums, and the component is the thing that draws them.
npx shadcn@latest add https://lacodda.github.io/dowel/r/table-sort.json - Tabscomponent
Two shapes, because the line has two needs and they look nothing alike.
TabsTabsListTabsTabTabsPanelnpx shadcn@latest add https://lacodda.github.io/dowel/r/tabs.json - TagInputcomponent
Free text turned into a list: type a word, press Enter, it becomes a chip.
npx shadcn@latest add https://lacodda.github.io/dowel/r/tag-input.json - Textareacomponent
A multi-line field that can grow with what is typed into it, which is the only interesting part: a fixed box makes someone scroll inside a scroll, and a box that grows without limit pushes the button they are trying to reach off the screen.
npx shadcn@latest add https://lacodda.github.io/dowel/r/textarea.json - dowel themeset
The token vocabulary of the lacodda line, in dark and light.
npx shadcn@latest add https://lacodda.github.io/dowel/r/theme.json - Tiercomponent
The shape comes from kilna, where a work is scored on several axes and the total lands in a named band - "draft", "publishable", "a clip".
TierBadgeTierRulerAxisBarnpx shadcn@latest add https://lacodda.github.io/dowel/r/tier.json - TimeFieldcomponent
No donor for this one: neither product of the line had a time field, so this is written from the same shape as DurationField, and for the same reason.
npx shadcn@latest add https://lacodda.github.io/dowel/r/time-field.json - Timelinecomponent
What happened, in the order it happened: a release history, an audit trail, the steps a job went through.
TimelineTimelineItemnpx shadcn@latest add https://lacodda.github.io/dowel/r/timeline.json - Toastcomponent
For something that already happened and needs no decision.
ToastProviderToastTitleToastDescriptionToastActionToastCloseToastToastViewportnpx shadcn@latest add https://lacodda.github.io/dowel/r/toast.json - Tooltipcomponent
A label for a control that has no room for one - an icon button, a truncated cell, a symbol whose meaning is not obvious.
TooltipProviderTooltipTooltipTriggerTooltipPopupTooltipArrownpx shadcn@latest add https://lacodda.github.io/dowel/r/tooltip.json - Trackcomponent
Two products had written this independently and arrived at the same construction - a rounded track, segments positioned absolutely by percent, a floor under the segment width so a short one does not vanish - differing only in what a segment meant.
TrackTrackScalenpx shadcn@latest add https://lacodda.github.io/dowel/r/track.json - TrackSegmentscomponent
Split out for the reason `table-sort` and `tree-rows` are: a product that needs the numbers - to label a segment, to test its own domain code, to draw the same shape somewhere that is not the DOM - should not import a component to get them.
npx shadcn@latest add https://lacodda.github.io/dowel/r/track-segments.json - TreeRowscomponent
Split out of the TreeView for the reason `table-sort` and `calendar-math` were split out of their components: these are the sums, and the component is the thing that draws them.
npx shadcn@latest add https://lacodda.github.io/dowel/r/tree-rows.json - TreeViewcomponent
The shape products reach for and then get wrong in the same place every time.
npx shadcn@latest add https://lacodda.github.io/dowel/r/tree-view.json - Truncatecomponent
Text that does not fit, cut with an ellipsis - and, importantly, still readable in full: the element carries its own text as a `title`, so hovering shows what was cut.
npx shadcn@latest add https://lacodda.github.io/dowel/r/truncate.json - VirtualListcomponent
The browser is fine with long lists until it is not: a hundred thousand `<div>`s is a layout the machine recomputes on every change, and the page stops responding while it does.
npx shadcn@latest add https://lacodda.github.io/dowel/r/virtual-list.json - WindowFramecomponent
With `decorations: false` the system draws nothing, so everything it used to do is the page's: dragging the window by its title bar, double-click to maximise, the three buttons, and the edges you grab to resize.
WindowButtonsResizeEdgesTitleBarnpx shadcn@latest add https://lacodda.github.io/dowel/r/window-frame.json - Wizardcomponent
A Stepper with the current step's content under it and the Back / Next / Finish row that walks through the steps - checking each one before it lets the user past.
npx shadcn@latest add https://lacodda.github.io/dowel/r/wizard.json
The same list is served as data at
/r/registry.json, and each
component’s props at dowel-ui/props.json in the package.