A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.

Overview

Naive UI

A Vue 3 Component Library

Fairly Complete, Customizable Themes, Uses TypeScript, Not too Slow

Kinda Interesting

English | 中文

Documentation

www.naiveui.com

Community

Features

Fairly Complete

There are more than 70 components. Hope they can help you write less code.

What's more, they are all treeshakable.

Customizable Themes

We provide an advanced type safe theme system built using TypeScript. All you need is to provide a theme overrides object in JS. Then all the stuff will be done by us.

What's more, no less/sass/css variables, no webpack loaders are required.

Uses TypeScript

All the stuff in Naive UI is written in TypeScript. It can work with your typescript project seamlessly.

What's more, you don't need to import any CSS to use the components.

Not too Slow

I try to make it not rather slow. At least select, tree, transfer, table and cascader work with virtual list.

What's more, ..., no more. Just enjoy it.

Installation

npm

Use npm to install.

npm i -D naive-ui

Fonts

npm i -D vfonts

Icons

Naive UI recommends using xicons as icon library.

Design Resources

Naive UI (Sketch).

Contributing

Please see CONTRIBUTING.md.

License

Naive UI is licensed under the MIT license.

Graphics resouces of result component is licensed under the CC-BY 4.0. The graphics resources come from Twemoji.

Comments
  • does not provide an export named 'getTimezoneOffset'

    does not provide an export named 'getTimezoneOffset'

    TuSimple/naive-ui version (版本)

    2.26.0

    Vue version (Vue 版本)

    3.2.31

    Browser and its version (浏览器及其版本)

    Chrome(98.0.4758.102)

    System and its version (系统及其版本)

    Chrome(98.0.4758.102)

    Node version (Node 版本)

    Reappearance link (重现链接)

    https://codesandbox.io/s/practical-northcutt-woeq78

    Reappearance steps (重现步骤)

    浏览器报错:Uncaught SyntaxError: The requested module '/_nuxt/node_modules/date-fns-tz/index.js?v=297527ff' does not provide an export named 'getTimezoneOffset'

    Expected results (期望的结果)

    没有错误

    Actual results (实际的结果)

    Uncaught SyntaxError: The requested module '/_nuxt/node_modules/date-fns-tz/index.js?v=297527ff' does not provide an export named 'getTimezoneOffset'

    Remarks (补充说明)

    need reproduction 
    opened by phcent 29
  • Can the select and dropdown components of naiveui be adapted in qiankun sandbox mode?

    Can the select and dropdown components of naiveui be adapted in qiankun sandbox mode?

    This function solves the problem (这个功能解决的问题)

    Adapted to the qiankun sandbox mode environment

    Expected API (期望的 API)

    Can a drop-down floating window be used to make a mode similar to ant-design teleport?

    feature request 
    opened by wawa0584 22
  • 在Microsoft Edge中naive-ui官方文档切换深色模式浅色模式时,左边的menu组件的字体颜色不对

    在Microsoft Edge中naive-ui官方文档切换深色模式浅色模式时,左边的menu组件的字体颜色不对

    TuSimple/naive-ui version (版本)

    2.26.1

    Vue version (Vue 版本)

    3.2.31

    Browser and its version (浏览器及其版本)

    Microsoft Edge(99.0.1150.30 (官方内部版本) (64 位))

    System and its version (系统及其版本)

    windows 11

    Node version (Node 版本)

    Reappearance link (重现链接)

    https://www.naiveui.com/zh-CN/dark/components/avatar

    Reappearance steps (重现步骤)

    在Microsoft Edge打开https://www.naiveui.com/zh-CN/dark/components/avatar 点击右上角的深色模式浅色模式切换

    Expected results (期望的结果)

    深色模式,浅色模式下 字体颜色正常

    Actual results (实际的结果)

    深色模式,浅色模式下 字体颜色不正常

    Remarks (补充说明)

    bug 
    opened by 2383155523 22
  • Badge 处理中动画优化成类似进度动画或调整下闪烁速度可能会更好

    Badge 处理中动画优化成类似进度动画或调整下闪烁速度可能会更好

    What problem does the feature solve?

    https://www.naiveui.com/zh-CN/os-theme/components/badge#processing 现在处理中的动画,感觉上有点闪烁速度有点快 在设置 value 后没有动画,设计上就是这样么

    What does the proposed API look like?

    https://www.naiveui.com/zh-CN/os-theme/components/progress

    help wanted platform-specific-bug 
    opened by Hucy 21
  • 在移动端 深色主题的情况下,输入框的背景色和文本颜色均为白色

    在移动端 深色主题的情况下,输入框的背景色和文本颜色均为白色

    TuSimple/naive-ui version (版本)

    2.14.0

    Vue version (Vue 版本)

    3.1.2

    Browser and its version (浏览器及其版本)

    华为浏览器 11.1.2.301(也包括其他手机的浏览器)

    System and its version (系统及其版本)

    Android 9

    Node version (Node 版本)

    Reappearance link (重现链接)

    https://github.com/Eve-Wings/toDoList

    Reappearance steps (重现步骤)

    这是我个人做的一个小项目小工具,这个bug是后来通过配置输入框的样式修复了。

    在PC端的浏览器中,chrome 火狐 Edge,在深色主题的情况下,输入框的颜色暗灰色,而所输入的文本是白色,用户是可以看到自己所输入的文本的。 但是使用移动端的浏览器时,输入框的颜色是白色,但所输入的文本也是白色,用户是看不到自己输入的文本的。

    重现方法:

    在深色主题下,input组件,然后手机端上测试;

    可以在我提供的仓库中,也可以src/assets/css/style.less中,将171~185行代码删除之后,在移动端上,点击蓝色底的加号按钮弹出表单进行测试。

    (在这里还有一个bug,部分移动端上,使用图标的按钮会出现图标丢失的异常,初步怀疑可能是移动端上的浏览器中的层叠关系不一致导致的)

    Expected results (期望的结果)

    移动端上,输入框的样式能够和在PC端上的样式一样

    Actual results (实际的结果)

    移动端上的输入框样式发生了改变

    Remarks (补充说明)

    opened by Eve-Wings 19
  • ellipsis show tooltip bug

    ellipsis show tooltip bug

    TuSimple/naive-ui version (版本)

    2.19.9

    Vue version (Vue 版本)

    3.2.20

    Browser and its version (浏览器及其版本)

    Microsoft Edge 94.0.992.50

    System and its version (系统及其版本)

    MacOS(11.6)

    Node version (Node 版本)

    Reappearance link (重现链接)

    https://codesandbox.io/s/funny-swirles-f2m9e?file=/src/Demo.vue

    Reappearance steps (重现步骤)

    文本省略字体换了之后,宽度正好可以放下,显示了省略号,但不显示tootip,感觉是浏览器的bug

    Expected results (期望的结果)

    显示tooltip

    Actual results (实际的结果)

    没有显示tooltip

    Remarks (补充说明)

    bug 
    opened by cwjTerrace 18
  • n-tree 初始化设置default-checked-keys后,不会触发@update:checked-keys和@update:indeterminate-keys

    n-tree 初始化设置default-checked-keys后,不会触发@update:checked-keys和@update:indeterminate-keys

    TuSimple/naive-ui version (版本)

    2.33.4

    Vue version (Vue 版本)

    3.2.40

    Browser and its version (浏览器及其版本)

    chrome

    System and its version (系统及其版本)

    windows

    Node version (Node 版本)

    Reappearance link (重现链接)

    https://codesandbox.io/s/r0c7vg?file=/src/Demo.vue

    Reappearance steps (重现步骤)

    n-tree 初始化设置default-checked-keys后,不会触发@update:checked-keys和@update:indeterminate-keys

    Expected results (期望的结果)

    当我初始化default-checked-keys的时候, 如果不手动点击一下复选框,不会触发@update:checked-keys和@update:indeterminate-keys,则无法拿到indeterminate半选的数据

    是否可以像elementplus一样提供 getHalfCheckedKeys getCheckedKeys 等方法来解决这个场景

    Actual results (实际的结果)

    n-tree 初始化设置default-checked-keys后,不会触发@update:checked-keys和@update:indeterminate-keys

    Remarks (补充说明)

    feature request 
    opened by laterdays 17
  • Add `Download` component

    Add `Download` component

    This function solves the problem (这个功能解决的问题)

    Download Progress Visualization

    Expected API (期望的 API)

    Bind a link and click to download files, etc. Triggers a browser download, or displays progress, network speed, remaining time, and so on

    feature request 
    opened by Air-Cooled 15
  • table  使用 template 风格的 API

    table 使用 template 风格的 API

    This function solves the problem (这个功能解决的问题)

    结构更清晰,更易使用

    Expected API (期望的 API)

    参考antd,element

    <a-table-column key="action" title="Action"> <template slot-scope="text, record"> <span> <a>Action 一 {{ record.firstName }}</a> <a-divider type="vertical" /> <a>Delete</a> </span> </template> </a-table-column>

    opened by jahnli 15
  • data-table的数据, 双击复制会带空格, 尽管双击选中的数据是没有空格的

    data-table的数据, 双击复制会带空格, 尽管双击选中的数据是没有空格的

    TuSimple/naive-ui version (版本)

    2.27.0

    Vue version (Vue 版本)

    3.2.31

    Browser and its version (浏览器及其版本)

    C

    System and its version (系统及其版本)

    win10

    Node version (Node 版本)

    Reappearance link (重现链接)

    https://www.naiveui.com/zh-CN/os-theme/components/data-table#ajax-usage

    Reappearance steps (重现步骤)

    看官网例子就行

    Expected results (期望的结果)

    没有空格

    Actual results (实际的结果)

    有空格

    Remarks (补充说明)

    untriaged 
    opened by a15218378694 14
  • Wrong wite NuxtJs(3.0.0 RC1)

    Wrong wite NuxtJs(3.0.0 RC1)

    This function solves the problem (这个功能解决的问题)

    各种方式引入nuxtjs(3.0.0 RC1)失败,全局,按需,手动,都报各种错误,导致vite预建模块速度极慢,然后报错,这是手动引入的一个错误: (node:13776) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use node --trace-warnings ... to show where the warning was created) D:\NodeJsWS\my-nuxt3-app\node_modules\vueuc\es\shared\finweck-tree.js:4 export class FinweckTree { ^^^^^^

    SyntaxError: Unexpected token 'export' at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1032:15) at Module._compile (node:internal/modules/cjs/loader:1067:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at ModuleWrap. (node:internal/modules/esm/translators:168:29) at ModuleJob.run (node:internal/modules/esm/module_job:195:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:337:24)

    Expected API (期望的 API)

    适配nuxtjs(3.0.0 RC1)的按需引入方式。

    feature request 
    opened by TangsWang 13
  • DataTable 增加template支持

    DataTable 增加template支持

    This function solves the problem (这个功能解决的问题)

    目前的render方式过于复杂,语法晦涩难懂,复杂的单元格简直没法看。并且不能实现数据分离,我们需要持久化columns,现在这种columns中定义函数无法实现持久化。

    希望能是实现类似于iview或者antd的语法,【不是element那种,不够灵活】

    https://www.iviewui.com/view-ui-plus/component/form/table https://antdv.com/components/table-cn

    Expected API (期望的 API)

    <Table :columns="columns" :data="data">
        <template #name="{ row, index }">
          <Input type="text" v-model="editName" v-if="editIndex === index" />
          <span v-else>{{ row.name }}</span>
        </template>
    
        <template #age="{ row, index }">
          <Input type="text" v-model="editAge" v-if="editIndex === index" />
          <span v-else>{{ row.age }}</span>
        </template>
    <Table/>
    
    feature request 
    opened by liu-xinhui 0
  • n-pagination 部署到服务器之后,点击页码不执行@update:page函数,本地正常执行;@update:page-size方法本地和服务器环境都正常执行

    n-pagination 部署到服务器之后,点击页码不执行@update:page函数,本地正常执行;@update:page-size方法本地和服务器环境都正常执行

    TuSimple/naive-ui version (版本)

    2.34.3

    Vue version (Vue 版本)

    3.2.37

    Browser and its version (浏览器及其版本)

    Chrome(107.0.5304.87)

    System and its version (系统及其版本)

    MacOS(13.0.1)

    Node version (Node 版本)

    16.18.0

    Reappearance link (重现链接)

    https://github.com/wanglei1346/navie.git

    Reappearance steps (重现步骤)

    线上环境中点击页码无法执行对应函数。对应git地址中的代码:src/components/DataTable.vue文件

    Expected results (期望的结果)

    希望帮助解决一下

    Actual results (实际的结果)

    无法点击页码

    Remarks (补充说明)

    untriaged 
    opened by wanglei1346 0
  • Feature Request: NMarkdown

    Feature Request: NMarkdown

    This function solves the problem (这个功能解决的问题)

    Provide a markdown component <n-markdown>{{ md }}</n-markdown>

    See also https://github.com/tusen-ai/naive-ui/blob/main/build/loaders/md-renderer.js

    Expected API (期望的 API)

    <n-markdown>{{ md }}</n-markdown>

    feature request 
    opened by rwv 0
  • 受控模式下,NRadioGroup不能重复触发change事件

    受控模式下,NRadioGroup不能重复触发change事件

    TuSimple/naive-ui version (版本)

    2.34.3

    Vue version (Vue 版本)

    3.2.45

    Browser and its version (浏览器及其版本)

    108.0.5359.124

    System and its version (系统及其版本)

    MacOS 13

    Node version (Node 版本)

    Reappearance link (重现链接)

    https://codesandbox.io/s/quizzical-oskar-7rnzlm?file=/src/App.vue

    Reappearance steps (重现步骤)

    选择李四之后,取消选择,再次点击不会触发事件了

    Expected results (期望的结果)

    能重复触发事件

    Actual results (实际的结果)

    不能重复触发了

    Remarks (补充说明)

    untriaged 
    opened by gp0119 0
Owner
TuSimple
The Future of Trucking
TuSimple
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Fundamental Vue Description The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles. Fundamental Library for

SAP 188 Jan 1, 2023
Most complete implementation of Spectre.css on Vue.js

A Lightweight, Simple and Responsive Component Framework Vectre is a set of lightweight, simple and responsive Vue components based on Spectre CSS Fea

null 64 Oct 16, 2022
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

BalmJS 428 Jan 4, 2023
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 1.1k Jan 2, 2023
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 1.1k Dec 30, 2022
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

??Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Yan Savinov 873 Jan 3, 2023
Flow-UI is a highly customizable UI framework based Seajs/jQuery。

English | 中文 Flow-UI ?? Flow-UI is a highly customizable UI framework based Seajs/jQuery。 Introduction Flow-UI has built-in CSS components, JS plug-in

Flow-UI 84 Jul 26, 2022
a vue component with typescript

vue-ripple-effect a vue component with typescript install npm i vue-ripple-effect use import Vue from ''vue import ripple from 'vue-ripple-effect' im

阿林 1 Jan 28, 2023
a vue ui-framework with typescript

mb-ui a vue ui-framework with typescript demo page npm i npm run dev Installation npm i vue-mb-ui Usage es6 module import Vue from 'vue' import MbUi

阿林 3 Mar 21, 2019
BookerUI-Next 是一个基于 Vue3 + TypeScript 的 UI 组件库

BookerUI-Next 组件介绍 BookerUI-Next 是一个基于 Vue3 + TypeScript 的 UI 组件库,这是我在Vue3 和 TypeScript 的项目过程中,开发的一个UI框架。

Booker Drew 4 Mar 13, 2022
Ory Kratos Vue3 / Vite with Typescript User Interface Reference Implementation

Ory Kratos Vue3 / Vite with Typescript User Interface Reference Implementation This repository contains a reference implementation for Ory Kratos' in

Tim 21 Jan 1, 2023
🎉 A high quality component library built on Vue.js 2.0

dao-style A high quality component library built on Vue.js. English | 简体中文 Docs latest Who's using dao-style DaoCloud DaoVoice If you are also using d

DaoCloud.io 116 Aug 31, 2022
A Vue.js 2.0 universal responsive UI component library

A Vue.js 2.0 universal responsive UI component library.. ?? Only for study purposes, do not use in production Docs Home Page Storybook Getting Started

Osiris UI 36 May 4, 2021
A Vue 3 Component Library🖖

Unge - Means young in Danish Introduce ?? A component library based on Vue3 ?? Writen in .jsx | .vue && stylus Usage Install $ yarn add ungeui Import

null 54 Dec 30, 2022
An enterprise-level UI component library and front-end solution based on Vue.js 3

An enterprise-level UI component library and front-end solution based on Vue.js 3

View Design 187 Dec 31, 2022
A flexible {vue3 + TS} UI component library

Viewer-Design UI Viewer-Design - A customized UI Library ?? Vue 3.0 Composition API ?? Written in TypeScript Status: Beta This project is still under

null 24 Dec 16, 2022
🖖Element-ui-s is a interesting component library 🦄

??Element-ui-s is a interesting component library ??

null 33 Aug 24, 2022
MADE Vue - A library of Vue 3 UI Components

MADE Vue A library of Vue 3 UI Components. Support MADE Vue ♥ Projects like MADE Vue are built and maintained in spare time. If you find this project

MADE Apps 4 Oct 6, 2022
N3-components , Powerful Vue UI Library.

N3-components - Powerful Vue Library. N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build

null 1k Dec 17, 2022