Showcase

A tour of NubiscoUI components. All demos are live. The components below are the real thing.

A complete screen ​

Before the parts, the whole. This is a working application screen built only from library components: search, filters, sorting, selection, paging, an editing dialog, a destructive confirmation and every state a real list reaches. It is functional, so try it.

Its own controls switch the table between loading, error and empty, between compact and comfortable, and between square and rounded. The full walkthrough, and the decisions behind it, are in Team management.

Layout ​

NbGrid is the primary layout primitive. Combine dir, gap, align, and justify to build any layout without custom CSS. Every spacing value is a multiple of the 8px base unit.

Full Grid documentation →

Forms ​

A complete form using NbTextInput, NbSelect, NbCheckbox, NbSwitch, and NbButton, composed with NbGrid. No wrapper divs, no custom spacing.

Buttons ​

Seven variants, seven sizes, icon support, and loading/disabled states. All from a single NbButton component.

Full Button documentation →

Feedback & Messaging ​

Contextual feedback with NbMessage, compact labels with NbLabel, and count indicators with NbBadge.

Overlays ​

NbModal uses Vue's Teleport to render above all other content, so stacking is correct wherever it is declared. While it is open it holds keyboard focus: focus moves into the dialog, Tab and Shift+Tab cycle within it rather than reaching the page behind, Escape emits close, and focus returns to the control that opened it.

open is a one-way prop and the dialog reports dismissal through close, so a dialog that is never given an @close handler cannot be closed by Escape, the close button or the scrim.

Data Tables ​

NbDataTable is a presentational, data-driven table for read-mostly application lists. It ships full <table> semantics with controlled sorting (aria-sort), row selection, loading / empty / error states, density, a sticky header, and a companion NbPagination footer. It is not an editable spreadsheet, reach for NbSpreadsheet when cells need in-place editing.

Icons ​

Over 9,000 icons from the Phosphor set, available in 6 weights. Icons are loaded as async Vue components via a Vite virtual module. Only the icons you reference end up in your bundle.

Browse the full icon library →

Flags ​

ISO 3166-1 country flags, loaded as async SVG components via the same virtual module pattern as icons.

Browse all flags →

Theming ​

Every value you saw above, the colors, spacing, type sizes, field heights, is a CSS custom property generated from a typed SCSS system. Rebrand the entire library by overriding semantic tokens:

:root {
  --nb-c-primary: #1a56db;
  --nb-c-primary-hover: #1e429f;
}

No SCSS required for consumers. No rebuilding the library. No hunting for hardcoded values.

Explore the theming system →