14.4K Star，一款外观漂亮、运行快速、动画细腻的开源免费UI组件库

分手后的思念是犯贱 2023-10-15 10:12 11阅读 0赞

之前给大家推荐了很多后台模版，有读者希望推荐一些跟通用的好看组件，毕竟出了后台还有很多其他场景嘛。所以，今天继续给大家推荐一个广受好评的UI组件库：[**NextUI**][NextUI]

![NextUI][NextUI 1]

### 主要特性 ###

[**NextUI**][NextUI]的主要目标是简化开发流程，为增强的用户体验提供美观且适应性强的系统设计。

它有以下几点核心特性：

*  可个性定制：NextUI提供了插件的模式来定制主题，你可以更改所有的语义标记以创建一个全新的主题
 *  性能优秀：构建在TailWind CSS之上，这意味着没有运行时样式，包中也没有不必要的类，所以性能极佳
 *  日间/夜间模式：支持自动模式识别，当检测到HTML主题变化时，NextUI会自动更改主题模式
 *  快速上手：NextUI是完全组件化的，以最大限度地减少学习曲线，并提供尽可能好的开发体验

### 组件预览 ###

对于一款UI组件，是否好看是大家都特别关注的，下面就带大家一起来看看**NextUI**的一些常用组件效果。

![Avatar][]

![Accordion][]

![Badge][]

![Button][]

![Card With Image][]

![CheckBox][]

![Dropdown][]

![Input][]

![ListBox][]

![Popover][]

![Skeleton][]

![Table 1][]

![Table 2][]

![Tabs][]

由于篇幅有限，就挑选了一些常用的，还有很多其他的组件没有在这里展示，感兴趣的可以自行前往官网查看并体验动态效果。

最后，老规矩，奉上相关链接，感兴趣的可以直接去深入了解：

*  官方网站：[https://nextui.org/][https_nextui.org]
 *  开源地址：[https://github.com/nextui-org/nextui][https_github.com_nextui-org_nextui]

> 欢迎关注我的公众号：程序猿DD。前沿技术早知道，弯道超车有希望！积累超车资本，从关注DD开始！

[NextUI]: https://blog.didispace.com/tj-opensource-nextui/
[NextUI 1]: https://img-blog.csdnimg.cn/fb1ebd0603c543e9996d2b5aba91a795.png
[Avatar]: https://img-blog.csdnimg.cn/a8d02075b78a496dad1b2986dc3e81ed.png
[Accordion]: https://img-blog.csdnimg.cn/5d7a8956aa984e858f0b250cc91780c6.png
[Badge]: https://img-blog.csdnimg.cn/b0bfaead03cb4f4b9ca2d0943bdeb838.png
[Button]: https://img-blog.csdnimg.cn/b74884488a8d41c08704f80ada5418be.png
[Card With Image]: https://img-blog.csdnimg.cn/9ea8314b5e674590907537e9b6d7d054.png
[CheckBox]: https://img-blog.csdnimg.cn/3a858ff562b0497685bcb180d4f99c93.png
[Dropdown]: https://img-blog.csdnimg.cn/7aaa44c61825468bba9676975ed7e13f.png
[Input]: https://img-blog.csdnimg.cn/09aceca99b7147f68258de8367da2396.png
[ListBox]: https://img-blog.csdnimg.cn/538b481b7cc7400dae1dff704e1492ab.png
[Popover]: https://img-blog.csdnimg.cn/729a41e552104be3877ae17ab3d68e23.png
[Skeleton]: https://img-blog.csdnimg.cn/e42712bd45f34e6e97e36a6c6fcdf98f.png
[Table 1]: https://img-blog.csdnimg.cn/ad3c0ce546744a2c8d6f5f523df8a6c3.png
[Table 2]: https://img-blog.csdnimg.cn/3e7baf73fde14c87ba84a93209f16611.png
[Tabs]: https://img-blog.csdnimg.cn/0e56c01eefad44d1b5fdfe5c3ad170b3.png
[https_nextui.org]: https://nextui.org/
[https_github.com_nextui-org_nextui]: https://github.com/nextui-org/nextui