New UI is a modern, semantic UI for building beautiful, accessible sites and apps. Thoughtfully made for makers, teams, and anyone who cares about great design.
Run with npx
npx create-new-uiOr install globally
npm install -g create-new-uiNote: To add New UI foundations to an existing project, use
npm i -D @new-ui/foundations. This includes reset styles, colors, effects, spacings, and typography.
Set the theme by adding the data-new-ui-theme attribute to your HTML wrapper element, for example:
<html data-new-ui-theme="light">| Available themes | Value |
|---|---|
| Light (Default) | light |
| Light warm | light--warm |
| Light cold | light--cold |
| Dark (Default) | dark |
| Dark warm | dark--warm |
| Dark cold | dark--cold |
- All classes associated with the New UI are prefixed with a global namespace followed by a hyphen:
nu- - In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax.
c-for UI components.l-for layout-related styles.u-for utilities.is-andhas-for state-based classes.js-for targeting JavaScript-specific functionality.
| Background | Role |
|---|---|
--background |
Default app background |
--background-secondary |
Secondary app background |
--background-hover |
Background hover |
--background-selected |
UI element background |
--background-selected-hover |
UI element background hovered |
--background-high-contrast |
High contrast background |
| Border | Role |
|---|---|
--border-muted |
Muted strokes and separators |
--border |
Default strokes and separators |
--border-strong |
Strong strokes and separators |
--border-inked |
Inked strokes and separators |
--border-inverse |
Inverse strokes and separators |
--border-focus |
Focus outline |
| Button | Role |
|---|---|
--button |
Primary button background |
--button-hover |
Primary button hover |
--button-active |
Primary button active |
--button-disabled |
Disabled button background |
| Icon | Role |
|---|---|
--icon-primary |
Primary icons |
--icon-secondary |
Secondary icons |
--icon-disabled |
Disabled icons |
--icon-on-color |
Icon on interactive colors |
--icon-inked |
Inked icons |
| Link | Role |
|---|---|
--link |
Primary link |
--link-hover |
Hover state for primary link |
--link-subtle |
Secondary link |
--link-visited |
Link visited |
| Support | Role |
|---|---|
--support-error |
Error |
--support-warning |
Warning |
--support-success |
Success |
--support-info |
Information |
| Text | Role |
|---|---|
--text-primary |
Primary body copy |
--text-secondary |
Secondary text color |
--text-secondary-alt |
Secondary text color alt |
--text-placeholder |
Placeholder text color |
--text-on-color |
Text on interactive color |
--text-error |
Error message |
--text-success |
Success message |
--text-inked |
Inked text |
| Shadows | Role |
|---|---|
--dialog-strong |
Modals, sidebar overlays, toasts |
--dialog |
Dropdown, tooltip, popover |
--content |
Content area, buttons, controls, cards, pills |
--canvas |
Background |
--keyboard-key |
Keyboard key component |
| Focus | Role |
|---|---|
--focus-default |
Default focus |
--focus-accent |
Accent focus |
--focus-inverse |
Focus inverse |
| Borders | Role |
|---|---|
--border-width-01 |
Default border width |
--border-width-02 |
Used for the selection and focus order |
| Token | Size (px/rem) |
|---|---|
--spacing-00 |
0 / 0 |
--spacing-01 |
2 / 0.125 |
--spacing-02 |
4 / 0.25 |
--spacing-03 |
6 / 0.375 |
--spacing-04 |
8 / 0.5 |
--spacing-05 |
12 / 0.75 |
--spacing-06 |
16 / 1 |
--spacing-07 |
20 / 1.25 |
--spacing-08 |
24 / 1.5 |
--spacing-09 |
32 / 2 |
--spacing-10 |
40 / 2.5 |
--spacing-11 |
48 / 3 |
--spacing-12 |
56 / 3.5 |
--spacing-13 |
64 / 4 |
--spacing-14 |
72 / 4.5 |
--spacing-15 |
80 / 5 |
--spacing-16 |
96 / 6 |
--spacing-17 |
120 / 7.5 |
--spacing-18 |
160 / 10 |
| Heading (Desktop) | Heading (Mobile) | Role |
|---|---|---|
--desktop-heading-01 |
--mobile-heading-01 |
Heading 01 |
--desktop-heading-02 |
--mobile-heading-02 |
Heading 02 |
--desktop-heading-03 |
--mobile-heading-03 |
Heading 03 |
--desktop-heading-04 |
--mobile-heading-04 |
Heading 04 |
--desktop-heading-05 |
--mobile-heading-05 |
Heading 05 |
--desktop-heading-06 |
--mobile-heading-06 |
Heading 06 |
| Body (Desktop) | Body (Mobile) | Role |
|---|---|---|
--desktop-body-xl |
--mobile-body-xl |
Body large |
--desktop-body |
--mobile-body |
Body copy |
--desktop-body-sm |
--mobile-body-sm |
Body small |
| Utility (Desktop) | Utility (Mobile) | Role |
|---|---|---|
--desktop-caption |
--mobile-caption |
Caption |
--desktop-helper-text |
--mobile-helper-text |
Helper text |
--desktop-code |
--mobile-code |
Code |
Note: To set line height, simply add the prefix
--lhto the font size variables. For instance,--desktop-body-xlbecomes--lh-desktop-body-xl.