norns-ui

Component library for the Norns ecosystem — Pug + Civet components on Tailwind v4, headless behaviors on @floating-ui/dom, Iconify icons, theming tokens and motion.

@human-synthesis/norns-ui ships around seventy components written as .n files, so they compile through the same pipeline as your app and can be shadowed by dropping a file with the same name into your project.

#Stack

Svelte 5 components and runes, Pug templates, Civet scripts.
Tailwind CSS v4 as a hard peer dependency; tokens are a Tailwind @theme block.
@floating-ui/dom for every overlay (Popover, Dropdown, Tooltip, ContextMenu, pickers).
In-tree headless behaviors: focus trap, scroll lock, click outside, escape, portal, roving tabindex.
Iconify with the Lucide set bundled.
tailwind-merge behind cn() for class deduplication.
@human-synthesis/norns as a peer, for nornsAutoImport and presetUI().

#What is in the box

Tier	Components
Atoms (CSS only)	`.btn`, `.input`, `.field`, `.form`, `.checkbox`, `.radio`, `.switch`, `.card`, `.surface-elevated`, `.badge`, `.chip`, `.avatar`, `.skeleton`, `.progress`, `.norns-header`, `.hero`, `.stepper`, `.breadcrumbs`, `.pagination`, `.accordion`, `.carousel`, with variants and sizes
Forms	`Btn`, `Form`, `Field`, `FieldGroup`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `NumberInput`, `OtpField`, `TagsInput`, `Autocomplete`, `MultiSelect`, `DatePicker`, `DateRangePicker`, `TimePicker`, `Calendar`, `ColorPicker`, `Uploader`
Behavior	`Dialog`, `Sheet`, `Popover`, `Dropdown`, `Tooltip`, `Tabs`, `Accordion`, `ContextMenu`, `Collapsible`, `ScrollArea`
Display	`Card`, `Surface`, `Window`, `Banner`, `Badge`, `Chip`, `Avatar`, `AvatarGroup`, `Skeleton`, `Progress`, `ProgressCircular`, `Icon`, `Image`, `Audio`, `Video`, `Separator`, `GradientText`, `Timeline`, `DataTable`, `Tree`
Composite	`Header`, `HeroBanner`, `Stepper`, `Breadcrumbs`, `Pagination`, `Carousel`, `Toolbar`, `ButtonGroup`, `ToggleButton`, `ToggleButtonGroup`, `HierarchicalMenu`, `MegaMenu`, `CopyButton`, `ThemeToggler`, `ShinyButton`, `RippleButton`
Toast	`ToastProvider` plus `toast()` / `notify()` / `dismiss()`
Motion (opt-in)	`AnimatedNumber`, `GradientBackground`, `LiquidButton`, `Reveal`, `Sparkles`

Every component accepts class and merges it with cn(). The component reference lists each one with its props; the live gallery is /examples/ui in norns-demo.