Typography

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Body — the default reading text. Label — form labels & field captions. Caption — small meta text. Code — monospace inline.

default muted faint accent success warn danger

normal medium semibold bold

numeric 1234.50% default 1234.50%

Button

npm i @dorsk/tsumikit

Icon & IconButton

All registry glyphs (sized at 1em — they scale with text):

back

arrow-right

arrow-up

arrow-down

chevron-up

chevron-down

chevron-left

chevron-right

menu

more

external

log-out

plus

minus

check

x

search

filter

copy

edit

trash

save

download

upload

send

share

retry

settings

play

pause

stop

file

file-text

folder

Badge · Link · Dot

neutral ok warn danger info

~/path/to/file removable typescript

uppercase stable

Anchor link

active stale dead hibernated custom

Metric · StatTile

Tracks

1284

Size

42.7 GB

Quality

FLAC

lossless · 16-bit

Added

37 this week

+12% vs last week

EmptyState

No results

No albums match your filters. Try broadening the search or clearing filters.

Your library is empty

Add an artist or album to start building your collection.

Nothing here yet

This section hasn't been set up.

Form atoms & Field

Text input Helper text below the control.

With error This field is required.

Monospace input

Select

Select (compact, no chevron)

Textarea (autoresize)

Textarea (autoresize, starts at one row)

Textarea (resize from bottom)

Textarea (resize from top)

Textarea (autoresize + top handle floor)

Switch

On

Slider

40%

Toggle · OptionButton · SelectButton

SelectButton (native select over a glyph button): selected: a

SegmentedControl

Filter pills with counts

selected: all

Icon view toggle

view: grid

Compact (size=sm)

Checkbox & RadioGroup

Popover & Menu native top layer

A native popover — renders in the top layer, light-dismiss + Escape for free.

Open a menu and navigate with ↑/↓, Enter to select.

Tabs

Overview panel — arrow keys move between tabs.

Toasts

DataTable generic <T>

Name	Role	Status
api-gateway	service	ok
worker-02	worker	warn
cache-01	cache	danger

Tooltip · Progress · Accordion

What is it?

Built on native <details> — zero JS, full keyboard support.

Single-open mode

With multiple=false it uses the platform's exclusive-accordion (one open at a time).

Styling

The chevron rotates via a CSS transition on [open].

Truncate char-count · hover reveal

Character-count truncation (the counterpart to <Text truncate>'s CSS ellipsis). Hover or focus a truncated value to reveal the full text.

middle: 0x71C765…6d8976F end: a-very-long-resourc… start: …/14/request-trace.log fits (no tooltip): short

Timestamp subdued · click for UTC / epoch / zone

Renders an instant in one of five modes (date, time, datetime, relative, iso), subdued by default. The date/time/datetime modes follow the viewer's zone unless you pass utc. Click it for a read-only popover with the same instant as UTC, relative, your time zone and the unix epoch. Opt into selectable to let viewers switch the inline mode.

datetime:

UTC: 2026-06-14T07:30:00.000Z
Local: 6/14/2026, 07:30:00 AM
Relative: 6d ago
Time zone: UTC
Unix: 1781422200

date:

UTC: 2026-06-14T07:30:00.000Z
Local: 6/14/2026, 07:30:00 AM
Relative: 6d ago
Time zone: UTC
Unix: 1781422200

date (utc):

UTC: 2026-06-14T07:30:00.000Z
Local: 6/14/2026, 07:30:00 AM
Relative: 6d ago
Time zone: UTC
Unix: 1781422200

iso:

UTC: 2026-06-14T07:30:00.000Z
Local: 6/14/2026, 07:30:00 AM
Relative: 6d ago
Time zone: UTC
Unix: 1781422200

time:

UTC: 2026-06-14T07:30:00.000Z
Local: 6/14/2026, 07:30:00 AM
Relative: 6d ago
Time zone: UTC
Unix: 1781422200

relative:

UTC: 2026-06-14T06:52:28.840Z
Local: 6/14/2026, 06:52:28 AM
Relative: 7d ago
Time zone: UTC
Unix: 1781419948

mono:

UTC: 2026-06-14T07:30:00.000Z
Local: 6/14/2026, 07:30:00 AM
Relative: 6d ago
Time zone: UTC
Unix: 1781422200

selectable:

UTC: 2026-06-14T07:30:00.000Z
Local: 6/14/2026, 07:30:00 AM
Relative: 6d ago
Time zone: UTC
Unix: 1781422200

no popover: 6/14/2026, 07:30:00 AM

CodeBlock BYO highlighter

typescript

// install and use
import { Button, theme } from '@dorsk/tsumikit';

function greet(name) {
  return `Hello, ${name}!`;
}

Plain (no highlighter, no line numbers):

setup.sh

git clone …
npm install
npm run dev

FileButton & Dropzone

Choose files native picker, keyboard-focusable

Drop files here or click to browse

overlay mode — wraps content, drop UI shows only while dragging a file over it

Drawer-like surface

Buttons and content stay clickable. Drag a file anywhere over this card.

Card & Modal

Static card

An elevated surface with token-driven padding, border and radius.

Stacked card

Looks like a pile — two layers peek out bottom-right.

Stacked (info)

Back layers tinted with the info/blue hue.

Layout: Stack · Cluster · AutoGrid

Cluster — wraps, never overflows:

alpha beta gamma delta epsilon zeta

AutoGrid — columns adapt to available width (resize the window):

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

AutoGrid — capped column width (max), left-packed instead of stretching:

Fixed 1

Fixed 2

Fixed 3

Theme tokens

--bg

--bg-elevated

--bg-elevated-2

--surface

--border

--border-strong

--text

--text-muted

--text-faint

--accent

--link

--ok

--warn

--danger

--info

Text scaling opt-in

Optional in-app text-size control (drives --fs-scale, text tokens only). Most apps should rely on browser zoom and the user's OS/browser font-size instead — the kit is rem-based and never resets the root size, so both are respected out of the box. Reach for this only in reading-dense apps (chat, docs) that want to grow body text while keeping chrome compact.