M
mat-ui
v0.0.63
REACT · TAILWIND · FLOATING UI
Small, sturdy components for building UI and Forms
Buttons, inputs, popovers and a few opinions. Built around CSS variables so the whole system can be re-skinned with a handful of tokens — light, dark, or your brand.
$ pnpm install @matthiaskrijgsman/mat-ui
Components
Text inputs
Text, password, textarea and a hue/sat/value color picker — all share label, description, error and size.
import { Input, InputPassword, InputTextArea, InputColor, ColorPicker, ColorSwatch } from "@matthiaskrijgsman/mat-ui"
Sizes
With label, icon and helper text
We'll never share it.
Error state
Only letters and numbers are allowed.
Password
At least 8 characters.
Textarea
A short introduction. Autogrows as you type.
Color
Click the input to open the HSV picker.
Standalone picker & swatch
#F59E0B
Flat variant
Range
A slider in the same visual language as the other controls — draggable thumb, arrow-key support, three sizes and an optional value readout.
import { InputRange } from "@matthiaskrijgsman/mat-ui"
Basic
40
Drag the thumb or focus it and use the arrow keys.
Sizes
Step & formatting
€ 1500
States
Too high.
Choices
Checkbox, radio and toggle. Each accepts a label, description and error.
import { InputCheck, InputRadio, InputToggle } from "@matthiaskrijgsman/mat-ui"
Checkbox
About once a month, nothing more.
Radio
Save 30% compared to monthly.
Toggle
Selects
Six flavours: a native <select>, a styled popover select, a searchable variant, an async-fetch variant, a multi-select, and a drilldown for nested hierarchies. All share one
SelectTrigger.import { InputSelect, InputSelectNative, InputSelectSearchable, InputSelectSearchableAsync, InputSelectMultiple, InputSelectDrilldown } from "@matthiaskrijgsman/mat-ui"
Native
Popover
React
Click X to clear.
Grouped
React
Headers, a divider, and a disabled item. Arrow keys skip non-selectable entries.
Searchable
Type to filter…
Searchable (async)
Search a city…
Simulated 400ms fetch on each search.
Multiple
TypeScript
React
Tailwind CSS
Wraps across multiple rows as more tags are added.
Multiple (single line)
+5 more
Trigger stays one line; overflow collapses into a "+N more" counter.
Drilldown
Pick a location…
Descends Continent → Country → City. Branches slide; picking a leaf commits the path and closes.
Rich text
A Lexical-powered editor with two toolbar variants: a static bar fixed at the top, or a floating dark bar that appears above the editor while it is focused. Both share the same toolbar and an extensible set of building blocks, support minRows/maxRows/autogrow sizing, and collapse overflowing items into a dropdown.
import { InputLexical } from "@matthiaskrijgsman/mat-ui"
Static toolbar
Full toolbar + a custom plugin (Tab indents list items) dropped in via children.
Floating toolbar
The floating toolbar appears above the editor whenever it is focused.
Second row & non-collapsible
A second toolbar row below a divider; with toolbarCollapsible={false} overflowing controls wrap onto extra rows instead of collapsing into "⋮".
File upload
Single-file picker styled like an input, or a drop-zone for multiple files with per-file tiles.
import { InputFileSingle, InputFileMultiple } from "@matthiaskrijgsman/mat-ui"
Single
No file chosen
PNG or JPG, up to 2 MB.
Multiple
or click to browse
Badges
Compact pills in 24 colors. Optionally clickable, with leading icon or a close affordance.
import { Badge } from "@matthiaskrijgsman/mat-ui"
Colors
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
slate
gray
zinc
neutral
stone
white
black
With icon
Verified
Pending
Featured
Clickable / dismissable
Tabs
A simple segmented control. Pass an array of tab descriptors with optional icons — or icons only — and stretch the tabs to equal widths with fullWidth.
import { TabButtons } from "@matthiaskrijgsman/mat-ui"
Basic
With icons
With counts
Icon only
Full width
Sizes
An underline variant for page-level navigation. Same tab descriptors as
TabButtons.import { Tabs } from "@matthiaskrijgsman/mat-ui"
Basic
With icons
With counts
Sizes
Tooltip & Dropdown
Both built on the same Floating UI popover. Tooltip is hover-only; DropdownMenu is click-and-dismiss.
import { Tooltip, DropdownMenu, DropdownButton, DropdownButtonGroup, DropdownDrilldown, DropdownSubMenu } from "@matthiaskrijgsman/mat-ui"
Tooltip
Dropdown menu
Modals
A centered modal and a right-side sheet. Both support outside-click and Escape dismissal.
import { Modal, SidebarModal } from "@matthiaskrijgsman/mat-ui"
Open
Panels
A standard padded container, a tighter stack for fields and links, plus PanelField and PanelLink for settings-style layouts.
import { Panel, PanelStack, PanelField, PanelLink } from "@matthiaskrijgsman/mat-ui"
PanelField — horizontal
Name
Matthias Krijgsman
Email
matthias@example.com
Role
Admin
Plan
Pro
PanelField — vertical
Name
Matthias Krijgsman
Email
matthias@example.com
Role
Admin
Plan
Pro
PanelStack with PanelLink
Table
Column-defined, resizable headers and controlled sort state. The consumer is responsible for sorting rows. Pass
emptyState to render a custom placeholder when there are no rows.import { Table } from "@matthiaskrijgsman/mat-ui"
Name
Role
Status
Alice Andersen
Designer
active
Bram Bakker
Engineer
invited
Chen Cao
Product Manager
active
Daria Dvorák
Engineer
inactive
Eitan Eilon
Designer
active
Empty state
Name
Role
Status
No people yet
Invite teammates and they will show up here.
Auto scroll
Sticks to the bottom as content grows. With
pauseOnScroll, scrolling away from the bottom pauses auto-scroll so you keep your place — scroll back to the bottom and it resumes.import { AutoScroll } from "@matthiaskrijgsman/mat-ui"
Streaming log
Following
Line 1 — initial log output
Line 2 — initial log output
Line 3 — initial log output
Line 4 — initial log output
Line 5 — initial log output
Line 6 — initial log output
Line 7 — initial log output
Line 8 — initial log output
Spinner
Indeterminate progress indicator. Inherits color via currentColor; size is set with className.
import { Spinner } from "@matthiaskrijgsman/mat-ui"
Sizes