Components

Forms & Inputs23

• ButtonA clickable button (or link styled as a button) with variants, sizes, loading and icon support.
• Button GroupGroups related nana-button elements into a single visual unit — joined together (the default) or evenly spaced. Optionally propagates a shared size and variant to every button so they stay consistent.
• Icon ButtonA compact, icon-only button. Renders a named nana-icon (or slotted icon) and requires a label for accessibility.
• InputA text input with label, helper text, validation, prefix/suffix and clear support.
• TextareaA <nana-textarea> element.
• OTPA one-time-code field: a row of single-character boxes that behave as one input, with typing, pasting and deletion handled across them.
• Number InputA numeric field with its own increment and decrement controls, bounded by min, max and step.
• RangeA range/slider component supporting single and dual-thumb selection, vertical orientation, stepped and continuous modes, tooltips, tick marks, and linked numeric inputs.
• RatingA rating component for displaying and collecting star (or heart/dot) ratings. Supports fractional display, half- and full-step input, multiple symbols, read-only and disabled states, sizes, hover preview, keyboard control and an optional value label.
• SwitchA form-associated on/off switch. Works inside a native <form>, supports keyboard toggling, and mirrors native checkbox semantics for submission.
• CheckboxA form-associated checkbox. Works inside a native <form>, supports the indeterminate state, and offers card / toggle tile variants for selection UIs.
• Checkbox GroupGroups related nana-checkbox elements under one label, lays them out, and propagates a shared size/disabled. Tracks the set of checked values and emits them on change.
• RadioA single radio control — a circle + label. Selection is mutually exclusive and owned by the parent nana-radio-group, which manages the checked value, keyboard roving and form association; on its own a radio still renders and fires nana-change. Rebrand by overriding --nana-radio-accent (or the global --nana-surface-accent) — no need to fork the component.
• Radio GroupOwns single selection across its nana-radio / nana-radio-button children. Implements the ARIA radiogroup keyboard pattern — arrow keys move and select, with roving tabindex — shares one size/disabled, and takes part in native forms through name/value.
• Radio ButtonA button-styled radio option — interchangeable with nana-radio inside a nana-radio-group. Inside a horizontal group the buttons read as a segmented control. The group owns selection, keyboard roving and form association; on its own one still renders, selects and fires nana-change.
• Color PickerA full-featured color selection component with alpha, swatches, multiple formats, an eyedropper, and a WCAG contrast checker.
• Date RangeA date-range picker: a trigger showing the current range, and a popover with one or two month grids plus optional shortcut presets. The form value is the two ISO dates joined by a slash (2026-01-01/2026-01-31), which is what start/end serialise to. An incomplete range submits nothing.
• DropdownA trigger that reveals a panel of options — single or multi-select, optionally searchable. Compose it from nana-option children (use nana-menu-label for groups). Flips above the trigger when it would overflow.
• ComboboxAn editable text field paired with a filterable listbox. Type to filter the nana-option children, then pick a value with the keyboard or pointer. The panel flips above the field when it would overflow the viewport.
• OptionA selectable option for listbox / select / dropdown usage. Bubbles nana-select with its value and reflects selected / disabled.
• SelectA <nana-select> element.
• Copy ButtonA button that copies text to the clipboard and shows a brief "copied" confirmation. Copy a literal value, or read the text from another element via the from selector. Renders icon-only by default; set show-label to display the swapping Copy → Copied text.
• EditorA rich text editor with a JSON document model, snapshot undo/redo, HTML/Markdown export, slash commands, and an extensible toolbar.

Layout & Containers9

• CardA surface container that groups related content. Compose it with nana-card-header, nana-card-title, nana-card-description, nana-card-content and nana-card-footer.
• DetailsA disclosure / expandable panel. A clickable summary toggles a smoothly animated content region. Compose the body from any markup via the default slot, and add a leading icon or trailing badge. Group several together with a shared name for accordion behaviour (one open at a time).
• DividerA separator between content or layout regions. Supports text/icon labels, line styles, thickness and orientation.
• DialogA modal dialog built on the native <dialog> element — so it gets the top layer, a backdrop, focus trapping and Escape-to-close for free. Compose it from nana-dialog-header, nana-dialog-body and nana-dialog-footer.
• DrawerA panel that slides in from an edge, built on the native <dialog> element. temporary (default) shows a modal with a backdrop and focus trap; persistent shows a non-modal panel that doesn't block the page.
• PopupA lightweight anchored popover. Positions floating content relative to an anchor (slotted into anchor), with placement, an optional arrow, and click / hover / manual triggers. Flips on the main axis when it would overflow the viewport.
• TooltipA small contextual label that appears on hover or keyboard focus. Wrap the trigger in the default slot and pass the text via the content attribute (or the content slot for rich markup). Shows on hover and focus for accessibility, dismisses on Escape, and flips on the main axis when it would overflow the viewport.
• Hover CardA rich preview that opens when the pointer rests on a trigger or the trigger takes focus. Unlike a tooltip it holds real content — a profile, a link preview — and stays open while the pointer crosses from the trigger onto the card.
• Split PanelTwo adjacent panels separated by a draggable divider that the user can reposition. Beyond a basic split, this panel supports collapsing, magnetic auto-collapse while dragging, position persistence, animated transitions, and a rich drag lifecycle.

Navigation15

• BreadcrumbA navigation trail showing the user's location in a hierarchy. Compose it from nana-breadcrumb-item children; the last item is usually current. One element covers the common professional patterns through orthogonal attributes: - Standard / Chevron / Path — separator (slash · chevron · arrow · dot, or any custom glyph) and variant="path". - Pill · Card · Step — variant. - Truncated / Dropdown — max-items collapses the middle into a …, either inline (collapse="expand") or into a menu (collapse="dropdown"). - Mobile compact / back-nav — responsive collapses to ← Parent below compact-width. - Underlined — underline emphasises the current page (composes with any variant).
• Breadcrumb ItemA single step in a nana-breadcrumb trail. Renders as a link when href is set, otherwise as plain text. Mark the final step with current so it is announced as the current page and rendered as non-interactive text. Item variants compose through attributes: - Icon / Icon-only — slot a nana-icon into prefix (add aria-label when there is no text). - Disabled / Loading — disabled, loading (skeleton placeholder). - Dropdown — dropdown turns the item into a menu trigger; put the menu entries in the menu slot. - Ellipsis — ellipsis renders a static ⋯. - Status / Badge — status (success·warning·error·info) and badge. The data-* attributes are driven by the parent nana-breadcrumb (variant, step index, collapse/compact state) — you normally don't set them by hand.
• MenuA menu / navigation list. Lays out nana-menu-item (and nana-menu-label) children, manages roving-tabindex keyboard navigation, and bubbles nana-select when an item is chosen.
• Menu ButtonA button that opens a menu of commands, with the menu keyboard contract rather than a listbox's.
• Menu ItemAn item within a nana-menu: icon + label + shortcut, with selected (checkmark), destructive, disabled and submenu states. Renders as a button, or a link when href is set, and bubbles nana-select.
• Menu LabelA non-interactive section header inside a nana-menu.
• MenubarAn application-style menu bar — a horizontal row of nana-menubar-menu top-level menus (File, Edit, View…), each opening a dropdown of nana-menu-item rows. Implements the WAI-ARIA menubar pattern: roving tabindex across the triggers, arrow-key switching between menus (with the open panel following), hover-to-switch once a menu is open, and dismissal on outside click or Escape.
• Menubar MenuA single top-level menu within a nana-menubar — a labelled trigger that reveals a dropdown of nana-menu-item rows. The parent menubar coordinates opening, sibling switching and keyboard roving; on its own it still works as a self-contained click-to-open menu button.
• PaginationA navigation control for paged data. It lives beside a table or list, never inside it. Controlled-by-attribute but self-updating: clicking moves the page (updating page) and emits nana-page-change so consumers can slice (client-side) or refetch (server-side).
• StepperA progress trail through a sequence of steps, with an optional linear mode that keeps a wizard from being skipped.
• Tab GroupOrganises content into a row of tabs and matching panels, with full keyboard support, a sliding active indicator, and four placements.
• TabA single tab within a nana-tab-group. Place tabs in the group's nav slot and link each to a panel via the panel attribute. The host element is the focusable tab (role="tab"), so assistive tech and the group's roving-tabindex navigation operate on a single element.
• Tab PanelA content panel controlled by a nana-tab inside a nana-tab-group. Following the WAI-ARIA tabs pattern, the panel is only made focusable (tabindex="0") when it contains no focusable content of its own, so keyboard users always have a way to reach the panel without an extra stop.
• TreeA hierarchical list for file systems, navigation, and any parent-child data. Compose nana-tree-item nodes inside it. Implements the ARIA tree pattern: roving tabindex, arrow-key navigation, type-ahead, and Home/End/* support.
• Tree ItemA single node in a nana-tree. Branch nodes nest further nana-tree-item elements in the default slot; leaf nodes have none. The label comes from the label attribute (or the label slot for rich content).

Feedback & Status8

• AlertA contextual message banner for feedback, status and important notices. Supports an optional title, a leading status icon, action buttons and a dismiss control.
• BadgeA small status indicator label with clean, modern design.
• Empty StateA placeholder for a region that has nothing to show — an unfilled list, a search with no matches, a feature not set up yet. Pairs a glyph with a short heading, an explanation and the action that resolves it.
• SkeletonA placeholder that mimics the shape of content while it loads. Supports text lines, circles (avatars), and rectangles (images/cards) with shimmer, pulse, or wave animations. When loading becomes false the skeleton fades out smoothly.
• TagA compact label for categories, keywords, or filters. Optionally removable.
• SpinnerAn animated, accessible loading indicator.
• Progress BarA linear progress indicator — determinate or indeterminate, with optional label, stripes, sizes and semantic colours.
• Progress RingA circular progress indicator — determinate or indeterminate, with an optional centre label, sizes and semantic colours.

Data Display & Media14

• TableA composable, accessible data table. Compose it with nana-table-header, nana-table-body, nana-table-footer, nana-table-row, nana-table-head, nana-table-cell and nana-table-caption. Built on the CSS table model + surface tokens, so it lays out natively, scrolls horizontally on small screens, and follows the light/dark theme.
• Stat CardA single headline figure for a dashboard: what it measures, the number, and how it moved. Lay several out with a CSS grid, and set tone to colour the icon and the change.
• FilterCollects a set of filter fields into one value, renders the active ones as removable chips, and publishes the result — the toolbar that sits above a data table.
• Filter ItemWraps one field component and reports its value to the surrounding filter — the bridge between any input and the aggregated filter value.
• CarouselA scroll-snap carousel. Compose it from nana-carousel-item slides and pick the navigation, layout and behaviour through attributes — one element covers basic, multi-item, card, gallery, hero and testimonial use-cases. Built on the native scroll container, so touch swipe, trackpad and momentum work for free; mouse drag, keyboard, autoplay and looping are layered on top.
• Carousel ItemA single slide inside a carousel. It is a thin, separately-importable wrapper that takes any content. The parent nana-carousel sizes it (slides-per-view / peek) and labels it ("3 of 8") for screen readers.
• Image ComparerCompares two images (or any content) with a draggable slider, or a crossfade.
• QR CodeRenders a QR code as crisp, scalable SVG. Encodes any text (byte mode, UTF-8) with a self-contained generator — no runtime dependencies. Choose a module style with variant, theme it with CSS custom properties, and drop a logo into the center via the default slot.
• IconAn SVG icon component backed by a built-in icon set. Accepts a name attribute to render a named icon, or a default slot for custom SVG content.
• Animated IconA motion wrapper around Icon. It renders a real <nana-icon> — inheriting the entire built-in glyph set, the shared icon registry and the accessibility wiring — and layers a CSS-driven animation on top, started by a trigger.
• ChecklistA section of rules and whether each holds — loan eligibility, a tenancy application, a move-out inspection. Each row is a nana-check-item: the outcome, the rule, and what was found. summary adds a line over the list that says how it came out as a whole.
• Check ItemOne rule in a checklist and whether it holds: an icon for the outcome, the rule in a line, and what was found. A failed rule turns its line red and can carry the action that clears it.
• FileOne file — an attachment, an upload, a document on a record — with what it is, how big it is, and what can be done with it. A photograph shows itself; anything else shows a page marked with its kind and extension.
• File ViewerLooks at a file without leaving the page: a photograph to zoom into, a PDF in the browser's own reader, a video or a recording to play, a text file to read. A file the browser cannot draw — a Word document, a spreadsheet — says so plainly and offers the download instead of an empty frame.

Rental8

• Meter InputA utility-meter reading field for rentals. Shows the previous reading beside the box, refuses a reading that runs backwards, and explains a consumption figure that does not look like the usual one for the meter.
• Bulk ProgressProgress for a long run over many items — posting readings, generating invoices, sending reminders — where individual items can fail without stopping the rest.
• Approval CardOne thing waiting on the owner — a repair quote, a fee waiver, a refund, a new tenancy — with what it costs, who asked, and the decision to make.
• Evidence CompareTwo photographs of the same thing, side by side, for a decision that rests on the difference — the kitchen at move-in and at move-out, a meter before and after a repair. Zoom and pan move both pictures together, so the same corner of each is always in view.
• MoneyAn amount of money, written the way a ledger writes it: in its currency, at its currency's precision, in tabular figures so a column of them lines up, with debts and credits told apart.
• StatusThe state of a record — a unit, a tenancy, an invoice, a payment — named from the set that record belongs to, in the colour every other set uses for the same meaning. Overdue and in arrears are both danger; paid and approved are both success; a reader learns the colours once.
• TimelineWhat happened to something, in order — an audit record of changes, a sequence of milestones, or one thing tracked through its stops — down the page or across it, with an icon on any entry.
• Unit MapA building as an interactive explorer — each floor a row of unit cards with the unit's number, its state, a small photograph and the faces of the people who live there. Hover for rent and lease, select for the side panel.

Formatters4

• Format NumberFormats a number with Intl.NumberFormat — decimal, currency or percent, with optional compact notation (1K / 1M) and fixed precision.
• Format BytesFormats a byte (or bit) value into a human-readable, locale-aware string, auto-scaling to the best unit (B → kB → MB → GB …).
• Format DateFormats a date with Intl — relative ("2 days ago"), short/medium/long absolute, or ISO.
• Relative TimeRenders a localised, auto-updating relative timestamp — "2 hours ago", "in 3 days" — from a date. It refreshes itself on a cadence proportional to the elapsed time (every second under a minute, every minute under an hour, and so on) and outputs a semantic <time> element carrying the machine readable datetime plus an absolute title for accessibility.

Utilities3

• Mutation ObserverWatches its slotted content for DOM changes via MutationObserver and emits nana-mutation with the records. Useful for reacting to attribute, child-list, subtree or character-data changes without wiring observers by hand.
• Resize ObserverWatches its slotted content for size changes via ResizeObserver and emits nana-resize with the observer entries. Useful for building container-aware layouts and reacting to element resizes without wiring observers by hand.
• IncludeFetches an external HTML file and renders it inline. Loads eagerly by default, or lazy to defer until it scrolls into view.