React后台

vaultui — React 后台模板

作者 SAGARBABU123

Vault UI 是一个基于 Turborepo 的 React 组件库 monorepo，包含多个按套件拆分的包、设计令牌主题引擎，以及用于展示组件的 Storybook 应用。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-06查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

Turborepo monorepo 结构，包含 Storybook 展示应用和多个按套件拆分的组件包

免费层组件以 @vaultui/ui 等包名发布到 npm，支持 npm、yarn、pnpm、bun 安装

提供设计令牌/主题引擎包 @vaultui/tokens，基于 Tailwind v4 CSS-first

包含 ai-chat、commerce、data-viz、dev-tools、project 等多个组件套件包

使用 pnpm workspace 和 turbo 命令进行开发、构建与类型检查

免费层采用 MIT 许可，另有商业许可文件

模板详细介绍

Vault UI 是一个以 Turborepo 组织的 monorepo，目标是为 React + Tailwind 项目提供组件。仓库结构显示它包含一个 Storybook 应用（apps/showroom）和多个按套件划分的包：ai-chat（11 个组件）、commerce（5 个组件）、data-viz（5 个组件）、dev-tools（4 个组件）、project（3 个组件），以及 tokens（设计令牌/主题引擎，Tailwind v4 CSS-first）、utils（cn() 与共享辅助函数）和 ui（免费层组件，MIT 许可）。README 说明免费层已发布到 npm，包名为 @vaultui/ui、@vaultui/tokens、@vaultui/utils，可通过 npm、yarn、pnpm 或 bun 安装。仓库使用 pnpm workspace，并提供 turbo typecheck、turbo dev、turbo build 等命令，以及 pnpm storybook 启动 Storybook（端口 6006）。README 还提到一个路线图文档（component-marketplace-roadmap.md），但未在 README 中展开具体阶段内容。README 未提供各套件组件的具体功能说明、浏览器兼容性、性能数据或生产就绪程度。

React后台

适合你的项目吗？

适用场景

在 React + Tailwind 项目中安装并使用 @vaultui/ui 和 @vaultui/tokens 提供的组件与设计令牌
通过 pnpm storybook 在本地启动 Storybook，浏览和调试组件
在 monorepo 中运行 turbo typecheck、turbo build 等命令进行类型检查与构建
参考仓库结构了解按套件划分的组件包组织方式

适合人群

使用 React 和 Tailwind 的前端开发者
需要按套件引入组件（如 AI 聊天、数据可视化、电商等）的项目
希望基于设计令牌统一主题的团队
使用 Turborepo 或 pnpm workspace 管理多包项目的开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
安装依赖：pnpm install
2
类型检查：turbo typecheck 或 pnpm typecheck
3
启动 Storybook：pnpm storybook，默认端口 6006
4
安装组件包：npm i @vaultui/ui @vaultui/tokens（或使用 yarn、pnpm、bun 对应命令）
5
README 未提供详细的配置步骤或环境要求

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
ui 包仅为免费层（MIT teaser），其余套件包（ai-chat、commerce、data-viz、dev-tools、project）属于商业许可范围，不在免费代码内。
仓库包含 COMMERCIAL-LICENSE.md，商业套件需遵循单独的商业许可条款。
许可证徽章标注为 MIT + Commercial，免费层为 MIT，商业套件为商业许可。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

│ └── ui/ # free-tier components (MIT teaser)
README 原文

├── COMMERCIAL-LICENSE.md
README 原文

[![license](https://img.shields.io/badge/license-MIT%20%2B%20Commercial-5b66e8)](./LICENSE)
README 原文

https://github.com/SAGARBABU123/vaultui/blob/main/LICENSE https://github.com/SAGARBABU123/vaultui/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-06。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 80 / 100
技术栈: React
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-10-06
截图检查日期: 2026-10-06

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: 81154c151fc2e7ba47377bfc073c8fe96a61c974ab1c2ad8c1fc8dcf314ff87c

2026-10-06T13:06:20.078Z

来源文件 / 仓库

# 💎 Vault UI

[![npm version](https://img.shields.io/npm/v/@vaultui/ui?color=5b66e8&label=npm%20v)](https://www.npmjs.com/package/@vaultui/ui)
[![npm downloads](https://img.shields.io/npm/dm/@vaultui/ui?color=5b66e8)](https://www.npmjs.com/package/@vaultui/ui)
[![bun ready](https://img.shields.io/badge/bun-ready-5b66e8?logo=bun&label=bun)](https://bun.sh/)
[![license](https://img.shields.io/badge/license-MIT%20%2B%20Commercial-5b66e8)](./LICENSE)
[![CI](https://github.com/SAGARBABU123/vaultui/actions/workflows/ci.yml/badge.svg)](https://github.com/SAGARBABU123/vaultui/actions/workflows/ci.yml)

**Premium React + Tailwind components — the ones you can't find elsewhere.**

A Turborepo monorepo: docs-explorer app, package-per-kit, token-driven theme engine, and a free tier published once to **npm** — installable with **npm, yarn, pnpm, or bun** (`@vaultui/ui`, `@vaultui/tokens`, `@vaultui/utils`).

> ⚠️ **Working name.** Renaming later = one find-replace of `@vault` / `vault-ui`.

## Structure

```
vault-ui/
├── apps/
│   └── showroom/     # Storybook — the storefront
├── packages/
│   ├── ai-chat/      # 🤖 AI Agent Kit — 11 components
│   ├── commerce/     # 🛒 Commerce Kit — 5 components
│   ├── configs/      # shared tsconfig
│   ├── data-viz/     # 📈 Data Viz Pro — 5 components
│   ├── dev-tools/    # 🧰 Dev Tools Kit — 4 components
│   ├── project/      # 🗂️ Project Mgmt Kit — 3 components
│   ├── tokens/       # design tokens / theme engine (Tailwind v4 CSS-first)
│   ├── utils/        # cn() + shared helpers
│   └── ui/           # free-tier components (MIT teaser)
├── LICENSE           # MIT (free tier)
├── COMMERCIAL-LICENSE.md
├── RELEASE.md        # release guide + consumer smoke tests
└── pnpm-workspace.yaml
```

## Getting started

```bash
pnpm install
turbo typecheck        # or: pnpm typecheck
pnpm storybook         # opens Storybook on :6006
```

## Install the components

One package, one registry (npm) — pick your package manager:

```bash
# npm
npm i @vaultui/ui @vaultui/tokens

# yarn
yarn add @vaultui/ui @vaultui/tokens

# pnpm
pnpm add @vaultui/ui @vaultui/tokens

# bun (installs the same npm tarball — no separate bun registry)
bun add @vaultui/ui @vaultui/tokens
```

## Roadmap

See [`../component-marketplace-roadmap.md`](../component-marketplace-roadmap.md) for the full phased plan (Phase 0–6).

## Commands (Turborepo)

| Command        | What it does                 |
| -------------- | ---------------------------- |
| `turbo dev`    | run all dev tasks            |
| `turbo build`  | build all (cached by turbo)  |
| `turbo typecheck` | typecheck all packages    |
| `pnpm storybook` | showroom only            |

反馈内容错误