N
Norns
← examples

norns-ui

Every component in@human-synthesis/norns-uiwith its variants. Toggle the theme to verify dark-mode contrast.

Typography

Bare HTML elements pick up the library defaults. No wrapper components needed.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body paragraph. The lazy dog jumps over the quick brown fox, then thinks better of it and curls up by the fire. Defaultline-height, defaultfont-family, default contrast role tokens.

Muted paragraph using.text-fg-mutedutility — for secondary copy.

Inlinecode, a pre block, and a⌘ Kkeyboard hint.

const norns = {
  framework: 'svelte+kit',
  language:  'civet',
  template:  'pug'
}
“Programs must be written for people to read, and only incidentally for machines to execute.”

Colors

Five oklch scales (50–950) forprimary,success,warning,danger,info. Use asbg-<name>-<step>,text-<name>-<step>,border-<name>-<step>.

primary
50 — 950
50P
100P
200P
300P
400P
500P
600P
700P
800P
900P
950P
success
50 — 950
50S
100S
200S
300S
400S
500S
600S
700S
800S
900S
950S
warning
50 — 950
50W
100W
200W
300W
400W
500W
600W
700W
800W
900W
950W
danger
50 — 950
50D
100D
200D
300D
400D
500D
600D
700D
800D
900D
950D
info
50 — 950
50I
100I
200I
300I
400I
500I
600I
700I
800I
900I
950I

Role tokens

What atoms reference. Swap themes — these are the cells that change.

fg on bg
fg on bg-muted
fg on bg-elevated
fg-muted on bg
fg-subtle on bg
white on primary-600
success
warning
danger

Icon

Iconify wrapper. Default collection islucide; install + register more viaaddCollection.

Common glyphs

Sizes / tinted

Btn

Variants, sizes, loading state, icon prop, snippet slots. Polymorphic — passhrefto render an<a>instead.

Variants

Sizes

States

Icon-only / icon slots

Full-width / link buttons

rendered as <a> via href

Input / Textarea / Select

Form controls. Field wraps with label, help, error.

size='sm'

autocomplete + type

children: option elements

rows=3

Checkbox / Radio / Switch

Native form controls; accent color comes from--color-primary-600.

Card / Surface

Surface primitives. Card has structural header / body / footer slots; Surface is a bare panel. Card is polymorphic — passhrefto render as an<a>.

Header + footer

Body content goes here. Padded by default.

Interactive

Hover me. The border shifts + lift on hover.

Link card

Rendered as<a>viahref— click anywhere on the card.
padded={false}

Unpadded card lets you bleed custom regions to the edge.

Surface

Bare elevated panel — same role tokens, no structural slots.

Surface glass

Same atom withtone="glass"— semi-transparent + backdrop blur.

Banner

Variants, optional icon, optional actions. Inline tinted surface for non-blocking messages.

Badge / Chip

Compact status indicators. Badge is read-only; Chip is interactive (filter, removable).

Badge

defaultprimarysuccesswarningdangerinfo
smallsmallwith icononline

Chip

tag removable with icon
filter public active

Avatar

Falls back fromsrc→ initials → a lucideuserglyph.

Sizes

AL AL AL GH

Source / fallback

Photo LT
AL

Skeleton / Progress

Loading placeholders + linear / circular determinate / indeterminate bars.

Skeleton

Progress

Tree

Recursive nodes; click to expand or select. Bindexpanded(array of ids) andselected.

Files

Selected

selected: src/lib/cn.js
expanded: ["src","src/lib"]

Breadcrumbs / Pagination

Wayfinding pair — trail of the current location plus paged navigation.

Breadcrumbs

Pagination

Page 4 of 19

Stepper / Accordion

Step-by-step progress paired with collapsible details. Accordion uses native<details>; passmultipleto allow several open at once.

Stepper

  1. Account
  2. 2
    Profile
  3. 3
    Preferences
  4. 4
    Review

Accordion

Build quality

Lighter than chrome plate, heavier than a Faraday cage.

Sound design

Polyphonic notes layered through ratio-based wave folding.

Controls

Knobs are smooth-detented; macros bind via shift-click.

Carousel

Defaultaspect="video"; passaspect="square"oraspect="wide", or override withclass="aspect-[…]".

16:9 video (default)

Mountain
River
Forest

Square + autoplay

Mountain
River
Forest

Header

Site header — brand / nav / actions slots.

N
Norns

HeroBanner

Page-opening banner with title / description / actions slots.align="center"flips to centered.

Build apps you can read in five minutes.

Pug + Civet on top of Svelte 5. Feature folders, DI, valibot.

Centered hero

Same API; align='center'.

Dialog / Sheet

Portal + focus trap + scroll lock + escape, on the shared behaviors module. Sheet covers all four sides; theside="left"variant replaces the oldDrawer.

Open dialog Sheet left Sheet right Sheet bottom

Popover / Dropdown / Tooltip

Floating overlays — positioned with@floating-ui/dom, portaled to<body>, close on click-outside / Escape.

Popover Actions ▾

Tabs

Overview content. Keyboard nav (←/→, Home, End) and aria roles wired.

Toast

Imperative API:toast(msg, opts). Bottom-right region;duration: 0stays until dismissed.

Variants

Duration

DataTable

Styled minimal table — sticky header, optional striping, sortable columns.

Status
Ada LovelaceProgrammerAnalyticalPioneer
Grace HopperCompilerCOBOLPioneer
Donald KnuthAuthorTeXActive
Linus TorvaldsMaintainerCActive
Anders HejlsbergArchitectTypeScriptActive

DatePicker / DateRangePicker / TimePicker

All three are Popover + a custom Calendar / time grid — no external date library.

DatePicker

DateRangePicker

TimePicker

Autocomplete / MultiSelect / TagsInput

Custom combobox + listbox — arrow keys / Home / End navigate, Enter selects, Esc closes.

Autocomplete

MultiSelect

SveltePug

TagsInput

nornspugcivet

Press , or Enter to add

NumberInput / OtpField / ColorPicker

Specialised inputs — clamped integers, segmented one-time-passwords, and a hex+swatch combo.

NumberInput

min 0, max 99

OtpField

value: ∅

ColorPicker

Uploader

Drag and drop or click. Multi-file by default.

Drop files here or click to browseUp to 10MB each

Toggles / ButtonGroup / Toolbar / Separator

ToggleButton is.btn-secondary[data-pressed]— same visual language as buttons, just with a pressed state.

ToggleButton + ToggleButtonGroup

ButtonGroup + Toolbar

Collapsible / Tooltip (rich)

Collapsible is one section of expand-collapse (use Accordion for many).richswaps Tooltip's compact dark style for a surface-elevated card; ideal for previewing user cards or links.

Collapsible

Show details

Inline expand-collapse for one section. Use Accordion for many.

More info

Each instance is independent.

Tooltip (rich)

Hover

Tooltip on a link

Hover the ' 'Svelte link

ContextMenu / HierarchicalMenu / MegaMenu

Right-click + horizontal nav patterns. Hierarchical opens on hover/focus; ContextMenu anchors to the pointer.

ContextMenu (right-click)

Right-click anywhere in this box

HierarchicalMenu

MegaMenu

ScrollArea

Constrained-height region with native scrollbars. Passhorizontalfor x-axis scroll instead.

Vertical (default)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

Horizontal

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
Card 13
Card 14
Card 15
Card 16
Card 17
Card 18
Card 19
Card 20
Card 21
Card 22
Card 23
Card 24
Card 25
Card 26
Card 27
Card 28
Card 29
Card 30

Timeline

Vertical event list with colored dots — passvariantper item to tint.

  1. May 2026
    Phase 1 ships
    Btn + atoms + presetUI
  2. May 2026
    Phase 2 ships
    Forms tier + valibot
  3. May 2026
    0.0.4
    Theming + icons + display + composite + 27 more
  4. May 2026
    0.0.6
    bits-ui dropped; custom behaviors on @floating-ui/dom

Image / Audio / Video

Thin wrappers around the native elements — aspect ratio, loading state, sensible defaults.

Sample
Image with aspect-video

Audio

Native<audio>with controls

Native<video>, muted

AvatarGroup

Overlapping avatars with hover lift; truncates to+Nonce max is reached.

AL GH DK
AL GH DK LT
AL GH DK LT

GradientText / AnimatedNumber

GradientText is CSS-only and free.AnimatedNumberlives in the/motionsubpath since it pulls in Motion One.

GradientText

Build for the web — beautifully.

Animated background-position; CSS-only.

AnimatedNumber

0
downloads

CopyButton / ShinyButton / RippleButton / LiquidButton

Decorative button variants. The first three are CSS-only; LiquidButton lives in the/motionsubpath.

Reveal / Sparkles / GradientBackground

All three live in the/motionsubpath. Free to remix; pause onprefers-reduced-motion.

Reveal

Scroll the page — wrappers fade up when entering the viewport.

Hello — I revealed myself.
I followed.
And me last.

Sparkles

GradientBackground

Looping color-stop animation. CSS-driven; pauses off-screen via IntersectionObserver.

norns-ui v0.0.13 · early access