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
  • Auto Complete 選取後,能否取得該項目的 AutoCompleteOption.value

    Auto Complete 選取後,能否取得該項目的 AutoCompleteOption.value

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

    options = [{"name":"aa","value":"1"},{"name":"bb","value":"2"},]

    透過 v-model:value="value" 綁定選取值,而選到 aa 時,value 值會得到 AutoCompleteOption.name,該如何取得 AutoCompleteOption.value 的數值呢? 即選到 aa 時,該如何取得 1 呢?

    Expected API (期望的 API)

    v-model:value="value" 可以得到 AutoCompleteOption 物件,或 AutoCompleteOption.value, AutoCompleteGroupOption.key,都沒有時再回選取值的 text

    feature request 
    opened by Lonka 0
  • Ellipsis 点击事件不触发

    Ellipsis 点击事件不触发

    TuSimple/naive-ui version (版本)

    2.30.7

    Vue version (Vue 版本)

    3.2.45

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

    chrome 9

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

    win11

    Node version (Node 版本)

    node 16

    Reappearance steps (重现步骤)

    h(
                      NEllipsis,
                      {
                        lineClamp: 2,
                        class: 'g-link',
                        onClick: () => {
                          void router.push({
                            name: 'workflow-instance-detail',
                            params: { id: row.id, projectCode: projectCode },
                            query: {
                              code: row.processDefinitionCode,
                              projectCode: projectCode
                            }
                          })
                        }
                      },
                      //COLUMN_WIDTH_CONFIG['linkEllipsis'],
                      () => row.name
                    ),
    

    Expected results (期望的结果)

    触发点击事件

    Actual results (实际的结果)

    不触发

    Remarks (补充说明)

    untriaged 
    opened by zhoufanglu 0
  • feat(input): adds `inside-label` prop

    feat(input): adds `inside-label` prop

    改动原因

    看到苹果或者小米这类的官网,登录的输入框效果和其他的不太一样,所以尝试新增一个属性来实现

    改动说明:

    • 新增属性inside-label,类型为string
    • 输入框聚焦时,label文本会上移到左上方
    • 可以支持清除
    • 不支持前缀插槽

    如果能过,后续可能会补充到form中去。

    修改后效果如下 image 7178e9b8d62d46d7c4bea534baa93c5f_0_1669285324 (1)

    opened by tiny-dust 1
  • Rate support decimal (Rate组件支持小数)

    Rate support decimal (Rate组件支持小数)

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

    Rate support decimal (Rate组件支持小数)

    Expected API (期望的 API)

    value 位小数的时候,自动分割小数的占比,类似: https://element-plus.org/en-US/component/rate.html#read-only

    feature request 
    opened by de1ck 0
  • TreeSelect 组件在多选模式下,开启可以清空的选项,选中几个节点后,点击右边的清空图标,checkedKeys会清空,但是indeterminateKeys不会被清空

    TreeSelect 组件在多选模式下,开启可以清空的选项,选中几个节点后,点击右边的清空图标,checkedKeys会清空,但是indeterminateKeys不会被清空

    TuSimple/naive-ui version (版本)

    2.34.2

    Vue version (Vue 版本)

    3.2.45

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

    Chrome 107.0.5304.110

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

    MacOS 12.6.1

    Node version (Node 版本)

    16

    Reappearance link (重现链接)

    https://codesandbox.io/s/silly-scott-0w6sfh?file=/src/Demo.vue

    Reappearance steps (重现步骤)

    选中几个节点,然后点击右边的清空图标,查看打印的数据

    Expected results (期望的结果)

    checkedKeys和indeterminateKeys 都应该清空

    Actual results (实际的结果)

    只有checkedKeys被清空了

    Remarks (补充说明)

    untriaged 
    opened by Venus-WXP 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 187 Nov 24, 2022
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 418 Nov 23, 2022
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 Nov 20, 2022
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 Nov 22, 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 860 Nov 23, 2022
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
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 20 Sep 20, 2022
🎉 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 53 Oct 28, 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 166 Nov 17, 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 23 Sep 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 Nov 11, 2022
Free and Open Source UI Library for Vue 3 🤘

Free and Open Source UI Library for Vue 3 ??

Epicmax 1.9k Nov 26, 2022
AnyUI - A cute UI components library for Vue 3

AnyUI This is a cute UI components library for Vue 3. IMPORTANT: This project is still working in progress. How to use Step 1: Install the @any-design

null 19 Jun 13, 2022