# view-shadcn-ui

**Repository Path**: devlive-community/view-shadcn-ui

## Basic Information

- **Project Name**: view-shadcn-ui
- **Description**: View Shadcn UI 是一个基于 Tailwind CSS 构建的 Vue3 组件库。目前已经支持 80+ 组件，更多的组件还在支持中，详见 https://github.com/devlive-community/view-shadcn-ui/issues
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: dev
- **Homepage**: https://view-shadcn-ui.devlive.org
- **GVP Project**: No

## Statistics

- **Stars**: 70
- **Forks**: 13
- **Created**: 2024-03-21
- **Last Updated**: 2025-06-20

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

<div align="center">

<img src="docs/public/logo.svg" width=120 height=120  alt="Logo"/>

# View Shadcn UI

![NPM Downloads](https://img.shields.io/npm/d18m/view-shadcn-ui)
![NPM Version](https://img.shields.io/npm/v/view-shadcn-ui)

![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Fdevlive-community%2Fshadcn-ui-vue-admin&countColor=%23263759&style=flat)
[![](https://tokei.rs/b1/github/devlive-community/shadcn-ui-vue-admin)](https://github.com/devlive-community/shadcn-ui-vue-admin)
![version](https://img.shields.io/github/v/release/devlive-community/shadcn-ui-vue-admin.svg)

![GitHub](https://img.shields.io/github/license/devlive-community/shadcn-ui-vue-admin)
[![Push code checker](https://github.com/devlive-community/shadcn-ui-vue-admin/actions/workflows/checker.yml/badge.svg)](https://github.com/devlive-community/shadcn-ui-vue-admin/actions/workflows/checker.yml)
![GitHub Release Date](https://img.shields.io/github/release-date/devlive-community/shadcn-ui-vue-admin?style=flat-square)

![GitHub commit activity](https://img.shields.io/github/commit-activity/y/devlive-community/shadcn-ui-vue-admin?style=flat-square)
![GitHub contributors](https://img.shields.io/github/contributors-anon/devlive-community/shadcn-ui-vue-admin?style=flat-square)
![GitHub last commit](https://img.shields.io/github/last-commit/devlive-community/shadcn-ui-vue-admin?style=flat-square)

View Shadcn UI 是一个基于 Tailwind CSS 构建的 Vue3 组件库。

</div>

## 安装与使用

```bash
pnpm i view-shadcn-ui
# or
npm install view-shadcn-ui
# or
yarn add view-shadcn-ui
```

## 导入并注册组件

```ts
import { createApp } from 'vue'
import App from './App.vue'

import ViewShadcnUI from 'view-shadcn-ui'

const app = createApp(App)
app.use(ViewShadcnUI)
```