Naive UI

Naive UI's distinguishing idea is that the entire theme is a plain TypeScript object, not a stylesheet. Your design system becomes type-checked code, with autocompletion on every token and a compile error when you rename one.

At a glance

Install	npm install naive-ui
Theming	typed TypeScript objects, no Sass, no CSS file
Stylesheet	none shipped, styles are generated at runtime
Tree shaking	full, no global import needed
MCP server	not published
License	MIT

Install

npm install naive-ui

What theming looks like

This is the part worth seeing. No Sass variables, no CSS override file, no specificity war.

import type { GlobalThemeOverrides } from 'naive-ui'

const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#339999',
    borderRadius: '6px'
  },
  Button: {
    textColorPrimary: '#ffffff',
    fontWeight: '500'
  }
}

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <n-button type="primary">Save</n-button>
    <n-data-table :columns="columns" :data="rows" :pagination="{ pageSize: 10 }" />
  </n-config-provider>
</template>

The trade

No global stylesheet means nothing to override by accident, and it also means a styling runtime. Styles are computed in the browser, so server rendering needs the documented setup rather than working by default.

Choose it if

• You want a design system your compiler can check.
• You are tired of fighting CSS specificity to change a component.
• You want strong tree shaking without configuring anything.

Look elsewhere if

• Your team prefers styling in CSS or Sass files.
• Server rendering performance is a hard constraint. CSS Modules libraries like Mantine carry no runtime.