Components

The primitives of nsdev/ui, built on Base UI and styled with the theme tokens. More are added as they are built.

Accordion: A stack of sections that open and close, one at a time or several together.
Alert: A message that stays in the page: a note, a success, a warning or an error.
Alert Dialog: A dialog for a question that has to be answered before anything else can happen.
Avatar: An image that stands for a person, with a fallback, three sizes and an overlapping group.
Badge: A small label for a status, with success, warning and destructive variants.
Button: A button that triggers an action, with four intents, two sizes, an icon and icon-only forms.
Card: A raised surface that groups related content, built from a header, content and footer.
Checkbox: A box that is checked, unchecked or indeterminate, and can be disabled.
Collapsible: One section that opens and closes, with a button to control it.
Context Menu: A menu that opens where you right-click or long-press.
Dialog: A window over the page that holds focus until it is closed.
Dropdown Menu: A list of actions that opens from a button.
Field: Joins a label, a control, a hint and an error message, and keeps them connected.
Hover Card: A preview card that opens when you hover or focus a link.
Input: A single-line text field with hover, focus, disabled and invalid states.
Kbd: A keyboard key, so a shortcut like Command K reads as keys, not as text.
Label: A label that names a control, and dims with it when it is disabled.
Popover: A floating panel of content that opens from a button.
Progress: A bar that shows how far a task has got, or that it is still working it out.
Radio Group: A set of radios where exactly one option can be selected.
Scramble on Hover: Text whose letters flicker through random characters and settle when the mouse moves over it.
Scramble on Load: A heading or line of text whose letters flicker and settle as soon as it is on the screen.
Scroll Area: A scrolling region with scrollbars that match the rest of the interface.
Select: A button that opens a list, to choose one value from many.
Separator: A thin line that divides content, horizontal or vertical.
Skeleton: A grey placeholder that holds the shape of content while it loads.
Slider: A control for picking a value, or a range of two, by dragging.
Spinner: A spinning ring for something that is happening for an unknown time.
Switch: A switch that turns a setting on or off straight away, and can be disabled.
Tabs: Panels of content that you switch between with a row of tabs.
Textarea: A multi-line text field with the same states as Input, resizable up and down.
Toast: A short message that appears in the corner and goes away by itself.
Toggle: A button that stays pressed until it is pressed again.
Toggle Group: A row of toggles that belong together: pick one, or several.
Tooltip: A small label that appears when you hover or focus an element.