Give us a star

Changelog

Notable changes to nsdev/ui, newest first. Entries are dated, not versioned, until it is decided how the library is distributed.

Block: Navigation 2

Added

  • Navigation 2: a fixed underlay navigation. The menu sits underneath the page, and a Menu button slides the page aside to show it, with the same entrance as Navigation 1 for the links, the hairline and the contact details. See Navigation 2.

Navigation 1: optional picture

Added

  • No picture: <Navigation1 image={false} /> puts the card on the plain page background instead of the canyon picture. See Navigation 1.

Fixed

  • Narrow cards: in a narrow space the phone number in the open card no longer wraps onto two lines.

Button: small size and ghost variant

Added

  • Small Button: size="sm" is 28px tall with 14px text, and size="icon-sm" is a 28px square for an icon. See Button.
  • Ghost Button: variant="ghost" has no fill and no outline until you point at it.

Changed

  • Button widths animate: a button that changes between two set widths, such as a label becoming an icon, now grows or shrinks smoothly. The regular buttons look the same as before.
  • Navigation 1: its links use Scramble on Hover and its menu button is a Button.

Text effects

Added

  • Scramble on Hover: text whose letters flicker through random characters and settle when the mouse moves over it. See Scramble on Hover.
  • Scramble on Load: a heading or line of text that does the same as soon as it is on the screen. See Scramble on Load.

Changed

  • Components menu: a fifth group, Text, for effects on text.

First block: Navigation 1

Added

  • Navigation 1: an animated navigation menu. A small card with a logo and a MENU button opens into a larger one with the links, and the button becomes a plain cross. Contact details and social links sit under the links. See Navigation 1.
  • Blocks: the section is open, with a menu of Marketing, Form and Authentication, and a viewer that shows each block in a Desktop, Tablet or Mobile frame, with its code a click away.

Ten toast examples

Changed

  • Toast: now compact, with an icon before the text. The page shows ten examples: success, error, promise, multi line, emoji, dark, JSX content, themed, custom position and a fully custom layout. See Toast.
  • Toast options: a toast takes an icon, one of six positions and a tone through data, and promise() turns a loading toast into its result.
  • Toast close button: now just a quiet cross in the top right corner, lined up with the first line of text, with no border.
  • Toast loading type: type: "loading" shows a spinner and stays until it is updated or closed.

Overlays, menus and feedback

Added

  • Accordion: a stack of sections that open and close. See Accordion.
  • Alert Dialog: a dialog for a question that has to be answered. See Alert Dialog.
  • Collapsible: one section with a button that opens it. See Collapsible.
  • Context Menu: a menu that opens where you right-click. See Context Menu.
  • Dialog: a window over the page that holds focus. See Dialog.
  • Dropdown Menu: a list of actions that opens from a button. See Dropdown Menu.
  • Hover Card: a preview that opens when you hover or focus a link. See Hover Card.
  • Popover: a floating panel that opens from a button. See Popover.
  • Scroll Area: a scrolling region with themed scrollbars. See Scroll Area.
  • Select: choose one value from a list. See Select.
  • Tabs: panels you switch between with a row of tabs. See Tabs.
  • Toast: a short message that goes away by itself. See Toast.
  • Tooltip: a small label for hover and focus. See Tooltip.

Changed

  • Components menu: it now has four groups: Foundations, Form controls, Disclosure & Overlays, and Menus & Feedback.
  • Overlays share one look: every popup uses the same surface, motion and stacking order.

Eight more components

Added

  • Alert: a message in the page, in four tones. See Alert.
  • Card: a raised surface built from a header, content and footer. See Card.
  • Field: joins a label, a control, a hint and an error, with a Fieldset for groups. See Field.
  • Kbd: a keyboard key. See Kbd.
  • Skeleton: a placeholder that holds the shape of loading content. See Skeleton.
  • Spinner: a ring for something that is happening for an unknown time. See Spinner.
  • Textarea: a multi-line text field. See Textarea.
  • Toggle Group: a row of toggles, to pick one or several. See Toggle Group.

Changed

  • Components menu: it now has two groups, Foundations and Form controls. Checkbox, Input, Label, Radio Group, Slider, Switch and Toggle moved to Form controls.

Eleven new components

Added

  • Avatar: an image with a fallback, three sizes and an overlapping group. See Avatar.
  • Badge: a small status label, with success, warning and destructive variants, that can render as a link. See Badge.
  • Checkbox: checked, unchecked, indeterminate and disabled. See Checkbox.
  • Input: a text field with hover, focus, disabled and invalid states. See Input.
  • Label: a label that dims along with a disabled control. See Label.
  • Progress: a bar for known and unknown progress. See Progress.
  • Radio Group: pick one option from a list. See Radio Group.
  • Separator: a horizontal or vertical divider. See Separator.
  • Slider: a single value or a range of two. See Slider.
  • Switch: an on-off setting that works straight away. See Switch.
  • Toggle: a button that stays pressed. See Toggle.

Changed

  • Components menu and index: they now list components from A to Z.

Button page, and a green default

Added

  • Button page: a live demo of every variant with its source, plus notes on the design, the interaction and accessibility. See Button.
  • Destructive variant: a danger fill for actions that remove something.
  • Inverse variant: the light fill the default button used to have, for places where green isn't wanted.
  • Components section: its own menu on the left, and an index page.

Changed

  • Default Button: it now uses the green accent. The old light fill is theinverse variant.
  • Pressed state: a pressed button shrinks to 97% with a 150ms animation. Before, it moved 1px, and the animation never ran.
  • Icons in a button: they are 16px unless you size them yourself.

Fixed

  • Focus rings: keyboard focus was not visible on buttons and links across the site. It now draws a 2px outline.

Foundations begin

Added

  • Design tokens: color, typography and radius, declared once in a single @theme block. See Theming.
  • Typefaces: Host Grotesk for interface text and Geist Mono for code. See Typeset.
  • Button: primary and secondary variants and a default and an icon size, built on Base UI. Hover, focus, pressed and disabled states are all styled.
  • Docs: Introduction, Theming and Typeset.