M
mat-ui
v0.0.28
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 and a hue/sat/value color picker — all share label, description, error and size.
import { Input, InputPassword, InputTextArea, InputColor } 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.

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

Four flavours: a native <select>, a styled popover select, a searchable variant, and an async-fetch variant.
import { InputSelect, InputSelectNative, InputSelectSearchable, InputSelectSearchableAsync } from "@matthiaskrijgsman/mat-ui"
Native
Popover
React
Click X to clear.
Searchable
Type to filter…
Searchable (async)
Search a city…
Simulated 400ms fetch on each search.

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.
import { TabButtons } from "@matthiaskrijgsman/mat-ui"
Basic
With icons

Tooltip & Dropdown

Both built on the same Floating UI popover. Tooltip is hover-only; DropdownMenu is click-and-dismiss.
import { Tooltip, DropdownMenu, DropdownButton, DropdownButtonGroup } 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.
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

Spinner

Indeterminate progress indicator. Inherits color via currentColor; size is set with className.
import { Spinner } from "@matthiaskrijgsman/mat-ui"
Sizes