Every component @nmmty/dotmatrix exports, grouped the same way this codebase's own master plan
grouped its build phases: primitives first, then typography and display, bitmap graphics, forms,
overlays and navigation, and data display.
Primitives
ColumnFlex fixed to direction: column — the default vertical layout primitive.FlexThe base layout primitive — Row and Column are Flex with a fixed direction.GridCSS Grid layout primitive — columns/rows take 1–12 / 1–6 templates.LineA hairline divider.MasonryGridA Pinterest-style column layout via native CSS multi-column, not JS height measurement.RowFlex fixed to direction: row — the default horizontal layout primitive.
Typography & display
AvatarA circular image or initials fallback. Not polymorphic — always inline.BadgeA small status/category label. Not polymorphic — a badge is always inline.ButtonA button that resolves its own honest default tag rather than going through ElementType.CardColumn with a surface's worth of sensible defaults — not a new visual vocabulary.ChipA removable tag. For a non-removable label, use Badge instead.CodeBlockA tabbed code snippet display with an optional live preview panel.ExternalIconAdapts an icon component from react-icons (or any icon set shaped the same way) into this system.HeadingA section heading — as picks the semantic level, displaySize picks the visual size.IconEvery icon in the design system renders through this one component.IconButtonA square, icon-only button. See Button for the text/icon+text case.InlineCodeInline code, always rendered as a real <code>.KbdA single keyboard key. Always renders as a real <kbd>.MediaOne component for any embeddable media — image, video, or a YouTube/Vimeo URL.SkeletonA loading placeholder. Purely decorative — aria-hidden.TextInline text — deliberately not a Flex variant, so normal inline flow keeps working.
Bitmap graphics
AsciiArtRenders an image as a grid of monospace characters — density instead of dots or dither noise.BarChartA single-series bar chart — segmented cells by default, or an exact continuous height.CrossHatchA classic engraving cross-hatch — overlaid diagonal, vertical, and horizontal strokes standing in for tone.DitherRuns an image through a dithering algorithm and paints it at a reduced pixel size.HalftoneA classic halftone screen — variable-radius dots instead of dither's on/off pattern.ImageEditorCrop, rotate, and flip a single image — a standalone tool, or the editing step inside FileUpload.MeterA segmented gauge — spend against a budget, not a task-completion indicator.
Forms
CalendarA month-grid date picker — single selection, keyboard navigable, with min/max range support.CheckboxA single checkbox. For a related group of radio options, use RadioGroup.ColorInputA fully custom color picker — not a wrapper over native input type=color.ComboboxA filterable Select — same options/value/onChange shape, but opens with a search field.DatePickerA trigger button that opens a Calendar in a popover — pick a date without a permanently visible grid.FieldsetGroups related fields under a shared legend — a real fieldset, not a styled Column.FileUploadA dropzone plus file list — real, unmodified previews, with an optional crop/rotate/flip step for images.InputA labeled text input. For multi-line text, use Textarea.NumberInputA number input with +/- stepper buttons alongside the native spinner.OTPInputA one-time-passcode field — length single-character boxes acting as one logical value.PasswordInputA text input that masks its value by default, with a trailing toggle to reveal it.RadioA single option within a RadioGroup — never used standalone.RadioGroupA mutually-exclusive set of Radio options, sharing one native name.RichTextEditorBold, italic, underline, headings, lists, quotes, and links — a bitmap-styled toolbar over a normal-typography content area.SearchInputA text input with a search icon and a clear button, shown once there's a value.SelectA listbox-style select built on Dropdown, driven by an options array.SliderA single-value range slider — controlled or uncontrolled, like a native input.SwitchAn on/off toggle, announced as switch rather than checkbox to assistive tech.TextareaA labeled multi-line text input. For a single line, use Input.
Overlays & navigation
AccordionA single-open accordion — opening one item closes whatever else was open.AccordionItemA single collapsible section inside Accordion.BreadcrumbsA navigation trail — every item but the last is a link; the last is always the current page.CommandPaletteA searchable list of actions in a hotkey-triggered overlay.ContextMenuThe same menu as Dropdown, opened by right-click and positioned at the cursor.DialogA modal dialog: focus trap, scroll lock, and Escape/backdrop dismiss.DrawerDialog's edge-anchored sibling — docked to a side of the viewport instead of centered.DropdownA menu of choices with roving keyboard navigation (arrow keys, typeahead, Home/End).DropdownItemA single selectable row inside Dropdown or ContextMenu.PopoverClick-triggered floating content that can hold real interactive elements.StepperA linear progress indicator for multi-step flows — markers connected by a line that fills in as steps complete.TabA single tab button — Arrow Left/Right and Home/End move focus and activate immediately.TabListThe role=tablist row of Tab buttons inside Tabs.TabPanelThe content shown for one Tab — hidden (not unmounted) while its tab isn't selected.TabsA set of switchable panels, each with a corresponding tab button.ToastProviderWraps your app to enable toast notifications via the useToast hook, from anywhere.TooltipA hover/focus-triggered label for an element that has no visible text of its own.
Data display
EmptyStateA placeholder for an empty Table/List — not a loading state (that's Skeleton).ListAn accessible list container, role=list, for a series of ListItems.ListItemA title/description/action row inside List.PaginationPrevious/next controls plus a collapsing range of page numbers.StatA labeled headline figure with an optional trend delta.TableA native table with this system's borders/spacing — sorting, zebra, and selection are opt-in.TableBodyThe <tbody> section of a Table.TableCellA <td> with this system's cell padding/border.TableHeadThe <thead> section of a Table.TableHeaderCellA <th> that becomes a sort button once you pass it onSort.TableRowA <tr> that can be highlighted and marked aria-selected via the selected prop.VirtualizedTableA table that only mounts the rows near the current scroll position — built for thousands of rows.