A tour of NubiscoUI components. All demos are live. The components below are the real thing.
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.
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.
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. Correct stacking, focus trap included.
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.
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.