M
mat-ui
v0.0.73
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

Buttons

Six variants, three sizes, optional leading icon. Loading and disabled states included.
import { Button } from "@matthiaskrijgsman/mat-ui"
Variants
Sizes
With icon
States

Icon buttons

Square and round icon buttons share the same variants and sizes as Button.
import { ButtonIconSquare, ButtonIconRound } from "@matthiaskrijgsman/mat-ui"
Square — variants
Round — variants
Sizes

Text inputs

Text, password, textarea, free-text tags and a hue/sat/value color picker — all share label, description, error and size.
import { Input, InputPassword, InputTextArea, InputTags, 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.
Prefix
/zaken/
Fixed text inside the field; clicking it focuses the input.
https://
Enter a domain.
Password
At least 8 characters.
Textarea
A short introduction. Autogrows as you type.
Tags
design
frontend
Enter or comma adds a tag; paste a list; Backspace removes the last.
C/13/741234
C/13/741236
Monospace chips via badgeClassName, at most 5, Dutch remove labels.
Color
Click the input to open the HSV picker.
Standalone picker & swatch
#F59E0B
Flat variant

Dates

Masked date and date-time fields with a calendar popover. Type digits and the separators fill themselves in, step a segment with the arrow keys, or pick from the calendar — the value is a plain Date.
import { InputDate, InputDateTime, Calendar } from "@matthiaskrijgsman/mat-ui"
Date
Try typing 3-11-88, or click to open the calendar.
Date & time
Wed Oct 14 2026 14:30
Format, locale and bounds
min / max disable days in the calendar and reject typed dates outside them.
Sizes and states
Pick a date in the future.
Standalone calendar
Mo
Tu
We
Th
Fr
Sa
Su

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.
You must accept the terms to continue.
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
PNG or JPG, up to 2 MB.
Multiple

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