Naive UI - A Vue 3 Component Library. Fairly Complete. Customizable Themes

Overview

Naive UI

A Vue 3 Component Library

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

Kinda Interesting

English | 中文

Documentation

www.naiveui.com

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 that built Uses Typescript. All you need is to provide a theme overrides object in JS. Then all the staff is done by us.

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

Uses Typescript

All the staff in Naive UI is wrote 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

Working in progress.

Community

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.

Issues
  • Add an actions 'slot' to the Date Picker

    Add an actions 'slot' to the Date Picker

    What problem does the feature solve?

    It would be nice to have a slot exposed for custom actions in the Date Picker to augment the three that are available. This way you can add buttons on the component itself for your own predefined date range's such as This Month, Last Week, etc.

    enhancement 
    opened by Ataraxy 6
  • change demos from kebab-case to PascalCase

    change demos from kebab-case to PascalCase

    see https://vuejs.org/v2/style-guide/index.html#Component-name-casing-in-templates-strongly-recommended

    In most projects, component names should always be PascalCase in single-file components ... using kebab-case everywhere is also acceptable

    It seems that it will be great if we change demo codes from from kebab-case to PascalCase

    opened by xiaoxiangmoe 4
  • [Bug] Wrong behavior of manually located Dropdown

    [Bug] Wrong behavior of manually located Dropdown

    I have some interest in naive-ui and am browsing the documentation. This error occurs when I tried the demo in the documentation.

    Environment Info

    • Naive UI version: 2.11.4
    • Browser Info: Edge 91.0.864.41
    • System Info: Windows 10

    Reproduction link

    https://www.naiveui.com/zh-CN/light/components/dropdown

    Steps to reproduce

    Right click in the green square more than three times.

    For the first two click, the dropdown component opens where I clicked. But from the third click, it will never change position.

    x15GK0HW0e

    What is expected?

    Maybe change the position?

    What is actually happening?

    See above.


    I also tried the demo in the sandbox. I noticed that the xRef.value and yRef.value changed as I clicked, but the position of the component did not change. But I am new to vue3, so I can't locate where is the problem.

    opened by duskmoon314 3
  • Add onClick event on table row

    Add onClick event on table row

    What problem does the feature solve?

    Hello,

    Really nice library. Thanks for sharing.

    Playing around with table component and not able handle onClick event on table row. Documentation says there is only one event onSelect in selection mode but this is other usecase.

    What does the proposed API look like?

    Just propagate event on table props ( onRowSelect:(record:T(any)) => void; )

    Btw really nice styles - so clean! Gj

    enhancement 
    opened by martinsura 3
  • docs: Fix document errors in jsx

    docs: Fix document errors in jsx

    hello! I found an error in the JSX document and I'm glad to help fix it.

    opened by amadeus711 3
  • chore(deps-dev): bump eslint-plugin-standard from 4.1.0 to 5.0.0

    chore(deps-dev): bump eslint-plugin-standard from 4.1.0 to 5.0.0

    Bumps eslint-plugin-standard from 4.1.0 to 5.0.0.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 2
  • chore(deps-dev): bump @types/estree from 0.0.46 to 0.0.48

    chore(deps-dev): bump @types/estree from 0.0.46 to 0.0.48

    Bumps @types/estree from 0.0.46 to 0.0.48.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • ci: add pr template

    ci: add pr template

    opened by 07akioni 1
  • fix(popover): x, y may not be synced

    fix(popover): x, y may not be synced

    fix #20

    opened by 07akioni 1
  • Feat show disable on time picker

    Feat show disable on time picker

    https://github.com/TuSimple/naive-ui/issues/22

    给 time-picker 添加 showDisable 属性

    opened by w1301625107 1
  • 下拉容器组件

    下拉容器组件

    What problem does the feature solve?

    发现TreeSelect组件没有提供,但我觉得是不是抽象出来一个下拉容器组件更加容易实现select的各种需求

    What does the proposed API look like?

    https://xuliangzhan_admin.gitee.io/vxe-table/v4/table/module/pulldown

    opened by agileago 2
  • Add a prop to control  show/hide disabled hours, or minutes, seconds

    Add a prop to control show/hide disabled hours, or minutes, seconds

    What problem does the feature solve?

    When I use time-picker to quickly select a time, I wish to just leave the value not disabled on the panel.

    Such as I disable every 10 minutes(enable 0, 10, 20...), to choose 08:00, 08:10, 08:20... But the panel show 9 disabled value and 1 enable value. It not make me choose value faster but slow down.

    So i think if you can add a prop to control the show/hide of disabled hours(minutes, seconds), because these values have been disabled by user, means user don't want to use them, so these disabled value should not be shown by default.

    What does the proposed API look like?

    The disabled value should not show by default.

    <template>
      <n-time-picker
        v-model:value="time0"
        :show-disabled="true"
        :is-hour-disabled="isHourDisabled"
        :is-minute-disabled="isMinuteDisabled"
        :is-second-disabled="isSecondDisabled"
      />
    </template>
    

    |name|type|default value| | ---- | ---- |---- | |show-disabled|boolean|false|

    Thank your!

    enhancement help wanted 
    opened by angela-1 3
  • chore(deps): bump highlight.js from 10.7.3 to 11.0.1

    chore(deps): bump highlight.js from 10.7.3 to 11.0.1

    Bumps highlight.js from 10.7.3 to 11.0.1.

    Release notes

    Sourced from highlight.js's releases.

    Version 11

    Potentially Breaking Changes

    This is a major release. As such it contains breaking changes which may require action from users. Most of the breaking changes work was done by the current maintainer [Josh Goebel][] (ref: #2558) while many other contributors contributed many other changes for this release. You'll find that list below the breaking changes summary.

    Please read VERSION_11_UPGRADE.md for a detailed summary of all breaking changes. The below list should only be considered to be a summary.

    Deprecations / Removals / API Changes:

    • initHighlighting() and initHighlightingOnLoad() deprecated. Use highlightAll().
    • highlightBlock(el) deprecated. Use highlightElement(el)
    • before:highlightBlock & after:highlightBlock callbacks deprecated. Use equivalent highlightElement callbacks.
    • highlight(languageName, code, ignoreIllegals, continuation) signature deprecated. Use highlight(code, {language, ignoreIllegals}).
    • Deprecated highlight() signature no longer supports continuation argument.
    • tabReplace option removed. Consider a plugin.
    • useBR option removed. Consider a plugin or CSS.
    • requireLanguage() removed. Use getLanguage().
    • endSameAsBegin mode key removed. Use hljs.END_SAME_AS_BEGIN.
    • lexemes mode key removed. Use keywords.$pattern.
    • The return values/keys of some APIs have changed slightly.

    Security:

    • HTML auto-passthru has been removed. Consider a plugin.
    • Unescaped HTML is now stripped (for security). A warning is logged to the console. (#3057) [Josh Goebel][]

    Themes:

    • The default padding of all themes increases (0.5em => 1em).
    • schoolbook has been updated to remove the lined background.
    • github updated to better match modern GitHub (#1616) [Jan Pilzer][]
    • github-gist has been removed in favor of github [Jan Pilzer][]
    • Base16 named themes have been updated to their "canonical" versions
    • nnfx updated for v11 xml styles and improved css support

    Language Grammars:

    • Default CDN build drops support for several languages.
    • Some language grammar files have been removed.
    • Some redundant language aliases have been removed.

    Other changes

    Parser:

    • enh(vala) improve language detection for Vala (#3195) [Konrad Rudolph][]
    • enh(r) add support for operators, fix number highlighting bug (#3194, #3195) [Konrad Rudolph][]
    • enh(parser) add beginScope and endScope to allow separate scoping begin and end (#3159) [Josh Goebel][]
    • enh(parsed) endScope now supports multi-class matchers as well (#3159) [Josh Goebel][]
    • enh(parser) highlightElement now always tags blocks with a consistent language-[name] class [Josh Goebel][]

    ... (truncated)

    Changelog

    Sourced from highlight.js's changelog.

    Version 11.0.1

    Version 11.0.0

    This is a major release. As such it contains breaking changes which may require action from users. Please read VERSION_11_UPGRADE.md for a detailed summary of all breaking changes.

    Potentially breaking changes

    Unless otherwise attributed items below are thanks to Josh Goebel (ref: #2558).

    The below list should only be considered to be a high-level summary.

    Deprecations / Removals / API Changes:

    • initHighlighting() and initHighlightingOnLoad() deprecated. Use highlightAll().
    • highlightBlock(el) deprecated. Use highlightElement(el)
    • before:highlightBlock & after:highlightBlock callbacks deprecated. Use equivalent highlightElement callbacks.
    • highlight(languageName, code, ignoreIllegals, continuation) signature deprecated. Use highlight(code, {language, ignoreIllegals}).
    • Deprecated highlight() signature no longer supports continuation argument.
    • tabReplace option removed. Consider a plugin.
    • useBR option removed. Consider a plugin or CSS.
    • requireLanguage() removed. Use getLanguage().
    • endSameAsBegin mode key removed. Use hljs.END_SAME_AS_BEGIN.
    • lexemes mode key removed. Use keywords.$pattern.
    • The return values/keys of some APIs have changed slightly.

    Security:

    • HTML auto-passthru has been removed. Consider a plugin.
    • Unescaped HTML is now stripped (for security). A warning is logged to the console. (#3057) Josh Goebel

    Themes:

    • The default padding of all themes increases (0.5em => 1em).
    • schoolbook has been updated to remove the lined background.
    • github updated to better match modern GitHub (#1616) [Jan Pilzer][]
    • github-gist has been removed in favor of github [Jan Pilzer][]
    • Base16 named themes have been updated to their "canonical" versions
    • nnfx updated for v11 xml styles and improved css support

    Language Grammars:

    • Default CDN build drops support for several languages.
    • Some language grammar files have been removed.

    ... (truncated)

    Commits
    • 1cf31f0 (chore) release 11.0.1
    • fbf223a (fix) use console.log for .js.js deprecation warning
    • 9268dc2 (fix) do not restrict exports from cdn-assets
    • 2185721 bump for CDN redeploy
    • 0261c45 (chore) update browser tests
    • 1c7c696 (chore) bump some deps
    • 970a4d3 (fix) fire after:highlightElement after DOM is updated
    • 947e925 bump version to 11.0.0
    • 5dc5176 (chore) dual package (#3188)
    • 15ed6a4 enh(r) Add operators and punctuation (#3195)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump husky from 4.3.8 to 6.0.0

    chore(deps-dev): bump husky from 4.3.8 to 6.0.0

    Bumps husky from 4.3.8 to 6.0.0.

    Release notes

    Sourced from husky's releases.

    v6.0.0

    After being in early access for Open Source projects and Sponsors for a limited time, I'm happy to announce that husky 6 is MIT again and can be freely used in commercial projects! 🎉

    Many thanks to the Open Source projects and Companies which have switched to/sponsored the new husky during this period!

    OSS is my full-time job, please consider sponsoring the development of husky on GitHub sponsors or Open Collective. Thank you!

    Breaking change

    • husky init has been moved to its own package (npx husky-init)

    Added

    • Programmatically use husky: require('husky')
    • TypeScript definitions

    Migrating from husky 4

    Husky 6 contains breaking changes. If you're coming from v4, npm install [email protected] won't be enough.

    Recommended: see husky-4-to-6 CLI to automatically migrate your config. There's also a dedicated section in the docs.

    If you're curious why config has changed, you may be interested in reading: https://blog.typicode.com/husky-git-hooks-javascript-config/

    Also Husky 6 follows official npm and Yarn best practices regarding autoinstall. It's recommended to use prepare script instead (see usage in docs).

    v5.2.0

    • Add set command to replace hooks (husky set .husky/pre-commit cmd)
    • Update add command to append command (husky add .husky/pre-commit cmd)
    • Improve error messages

    v5.1.3

    • docs: add specific Yarn v2 install/uninstall instructions
    • cli: husky init will detect Yarn v2 and initialize accordingly

    v5.1.2

    • docs: recommend prepare script instead of postinstall (#890)
    • cli: husky init use prepare script (#890)

    v5.1.1

    • style(shell): add trailing newlines (#870)
    • fix(init): update package.json postinstall

    v5.1.0

    • Add husky init

    v5.0.9

    • fix(install): do not fail if not inside a Git directory (closes #851)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump eslint-config-standard-with-typescript from 19.0.1 to 20.0.0

    chore(deps-dev): bump eslint-config-standard-with-typescript from 19.0.1 to 20.0.0

    Bumps eslint-config-standard-with-typescript from 19.0.1 to 20.0.0.

    Changelog

    Sourced from eslint-config-standard-with-typescript's changelog.

    20.0.0 (2021-01-25)

    ⚠ BREAKING CHANGES

    • Now based on eslint-config-standard v16. Also bumped some peerDeps, including eslint. Notice removed eslint-plugin-standard peerDep.

    Features

    • eslint-config-standard v16 (020569b)
    • require-array-sort-compare ignoreStringArrays (#359) (95fcb7c)

    Bug Fixes

    • docs: install version of @​typescript-eslint/eslint-plugin@​4 (#414) (51c40be)
    Commits
    • efdb89b chore(release): 20.0.0
    • e714d01 chore(deps): update node.js to 10,12,14,15
    • 020569b feat: eslint-config-standard v16
    • fe38f1b chore(deps): update dependency @​types/node to v14.14.22
    • b9a4356 chore(deps): update dependency husky to v4.3.8
    • fcd41a8 chore(deps): update dependency eslint to v7.18.0
    • 95fcb7c feat: require-array-sort-compare ignoreStringArrays (#359)
    • 881a023 chore(deps): update dependency @​types/node to v14.14.21
    • 749a1de chore(deps): update dependency husky to v4.3.7
    • cb06af0 chore(deps): update dependency @​types/node to v14.14.20
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
Owner
TuSimple
The Future of Trucking
TuSimple
Vue components based on the JUI components available in Vue.js

vue-uix A vue component library based on the JUI components available in vuejs. Installation NPM npm install --save vue-uix Browser (Legacy) If you ar

JUI Framework 15 Feb 9, 2021
Vue UI components with configurable classes ready for TailwindCSS

Vue-Tailwind For more info, check the official site: https://vue-tailwind.com/. VueTailwind is a set of Vue components created to be customized to ada

Alfonso Bribiesca 1.4k Jun 13, 2021
fun vue component library for my own use.

@knowscount/vue-lib vue component library containing fun stuff. ?? to-dos marked in issues. ?? usage see #3. to install the library, run npm install -

KnowsCount 9 Jun 5, 2021
Semantic UI integration for Vue

Semantic UI Vue Website · Installation · Configuration (TBD) Looking for maintainers! There is a lot to do and few maintainers with little time :). If

Semantic UI Vue 923 Jun 3, 2021
A mostly renderless Vue UI component and utility framework.

Banshee A mostly renderless Vue UI component and utility library. Introduction Banshee is a component library for Vue which seeks to only provide the

null 88 Jun 3, 2021
A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.

Keen UI Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design. Keen UI is not a CSS framework. Therefore, it doesn't

Josephus Paye II 4k Jun 2, 2021
🎨 Vue.js components implementing Microsoft Fluent Design

Vuent Vuent is a set of reusable UI components for Vue created according to Microsoft Fluent Design, in particular its official variation about buildi

Artur Mizera 220 Jun 3, 2021
Simple components library used for building lightweight vuejs projects

slim-ui slim-ui is a simple vue components library contains needed UI elements. It was developed to solve zerodha's application frontend needs and gen

htoniv 42 May 30, 2021
A Vue.js 2 UI component library.

atlas Documentation and examples at https://vue-atlas.com Installation and usage $ yarn add vue-atlas # or $ npm install vue-atlas Usage Import everyt

Jonathan Pyers 179 May 19, 2021
New Framework Components for Vue.js 2

Supporting through Patreon Vuesax is an open source MIT project if you want to contribute to keep improving, If you are interested in supporting this

Lusaxweb 5.1k Jun 13, 2021
🧬 Equal is a Vue 3 UI library based on TypeScript

Equal UI Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system. Explore Equal UI docs Features Ent

Yan Savinov 489 Jun 13, 2021
Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Buefy 8.7k Jun 11, 2021
A responsive Vue UI library for web site interfaces

Vuikit A responsive Vue 2 UI library for web site interfaces based on the UIkit 3 framework. If you are enjoying Vuikit and want to support the projec

Vuikit 1.5k Jun 13, 2021
A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

Antoni 702 Jun 10, 2021