# UI-lib

**Repository Path**: alex_john/ui-lib

## Basic Information

- **Project Name**: UI-lib
- **Description**: 介绍和提供UI库在原生JS、框架中的使用例子
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://www.bilibili.com/video/BV13C4y1d7HH/
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 4
- **Created**: 2023-11-27
- **Last Updated**: 2025-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript, React, TypeScript, CSS

## README

# 让你认识更多有趣的组件库

## Web Components(几乎适配所有框架和原生 JS)

- [shoelace](https://shoelace.style/)

  - [上手视频](https://www.bilibili.com/video/BV1xw411N7hM/)

- [daisyUI](https://daisyui.com/)

  - [上手视频](https://www.bilibili.com/video/BV1fY9JY8E5x/)

- [Tailwind Elements](https://tw-elements.com/)

  - [上手视频](https://www.bilibili.com/video/BV1SH4y1X7Cq/)

- [Prime UI](https://www.primefaces.org/)

  - [上手视频](https://www.bilibili.com/video/BV1Jp421f7kd/)

- [Layui](https://layui.dev/)

  - [上手视频](https://www.bilibili.com/video/BV12p421R764/)

- [Flowbite](https://flowbite.com/)

  - [上手视频](https://www.bilibili.com/video/BV1Wm4bemE6H/)

- [preline](https://preline.co/)

  - [上手视频](https://www.bilibili.com/video/BV13ztDe4ExW)

- [Tailwind CSS v4](https://tailwindcss.com/)

  - [上手视频](https://www.bilibili.com/video/BV1sPFNe1Ecw)

## Vue & React

- [shadcn/ui-React](https://ui.shadcn.com/) | [shadcn/ui-Vue](https://www.shadcn-vue.com/)

  - [上手视频](https://www.bilibili.com/video/BV1ye411v7Q2/)

- [NutUI](https://nutui.jd.com/#/)

  - [上手视频](https://www.bilibili.com/video/BV1op4y1o7cJ/)

## Vue

- [Vant](https://vant.pro/vant/#/zh-CN/home)

  - [上手视频](https://www.bilibili.com/video/BV13C4y1d7HH/)

- [Equal UI](https://equal-ui.github.io/Equal/)

  - [上手视频](https://www.bilibili.com/video/BV1Gy4y1A7CM/)

- [varlet](https://varlet.gitee.io/varlet-ui/#/zh-CN/index)

  - [上手视频](https://www.bilibili.com/video/BV1EK42187JC/)

- [Quasar](https://www.quasar-cn.cn/)

  - [上手视频](https://www.bilibili.com/video/BV1im411f7gW/)

- [Vuetify](https://vuetifyjs.com/zh-Hans/)

  - [上手视频](https://www.bilibili.com/video/BV1eK421v7aL/)

- [Inspira](https://inspira-ui.com/)

  - [上手视频](https://www.bilibili.com/video/BV1vwAeenEFo/)

## React

- [Mantine UI](https://ui.mantine.dev/)

  - [上手视频](https://www.bilibili.com/video/BV1t94y1M7uU/)

- [Elastic UI](https://eui.elastic.co/#/)

  - [上手视频](https://www.bilibili.com/video/BV12Q4y1n7ms/)

- [NextUI](https://nextui.org/)

  - [上手视频](https://www.bilibili.com/video/BV1Jb4y1L7EH/)

- [Mamba UI](https://www.mambaui.com/)

  - [上手视频](https://www.bilibili.com/video/BV1HW4y1F7fF/)

- [Keep React](https://react.keepdesign.io/)

  - [上手视频](https://www.bilibili.com/video/BV1pe411Y7Aj/)

- [Actify](https://actifyjs.com/)

  - [上手视频](https://www.bilibili.com/video/BV1V5411i7yp/)

- [Semi Design](https://semi.design/zh-CN/)

  - [上手视频](https://www.bilibili.com/video/BV1av421k7jR/)

- [Material UI](https://mui.com/material-ui/)

  - [上手视频](https://www.bilibili.com/video/BV1Ci421Q72o/)

- [Magic UI](https://magicui.design/)

  - [上手视频](https://www.bilibili.com/video/BV1Q8w6eaEvE/)

- [Chakra UI](https://chakra-ui.com/)

## 移动端

- [Vant](https://vant.pro/vant/#/zh-CN/home)

  - [上手视频](https://www.bilibili.com/video/BV13C4y1d7HH/)

- [NutUI](https://nutui.jd.com/#/)

  - [上手视频](https://www.bilibili.com/video/BV1op4y1o7cJ/)

- [varlet](https://varlet.gitee.io/varlet-ui/#/zh-CN/index)

  - [上手视频](https://www.bilibili.com/video/BV1EK42187JC/)