Skip to content框架无关的
快速开始 GitHub 快速开始 GitHub
OAS-UI·Web Components
框架无关的
Web Components UI 组件库
一套组件，到处运行，无框架依赖，适配原生 HTML / React / Vue / 等。
TypeScript 全量类型tree-shakablelight/dark 双主题SSR + DSD框架无关 i18nMIT OR Apache-2.0
117
组件总数
234.9 KB
CDN gzip
2
内置语言包
3,120
自动化测试
v2.2.0
最新版本
SCROLL
USE CASES
使用场景
为什么选 Web Components？——一次构建、处处运行，这些正是它被挑中的情境。
跨栈团队，一套组件
团队同时维护 React / Vue / Svelte 项目？只写一份组件，行为与样式完全一致，不复制、不重写。
微前端，体验统一
各子应用技术栈可以不同，但 UI 语言必须一致——OAS-UI 不要求统一的框架。
长期演进，不重写
框架十年四换，组件资产不必跟着重写——绑定的是浏览器标准，不是某一代框架。
零构建，立刻用
一行 CDN script 引入，<oas-button> 直接可用——不需要 node、不需要打包器。
为谁而生
跨框架团队前端基础设施组独立开发者SSR 应用团队
DROP-IN
像写 HTML 一样用它
Web Components 是浏览器原生标准。同一段代码到处跑——框架桥接是可选加分项。
零依赖，零构建，
现代框架都适配。
现代框架都适配。
HTML 直接开用；Vue / React 还有官方集成插件，SSR 开箱即用。
HTMLVueReactSvelteAngularAstrooas-button
1<!-- 原生 HTML：直接引入 --> 2<script type="module" src="https://unpkg.com/@oas-ui/ui"></script> 3 4<oas-button type="primary">保存</oas-button> 5<oas-input placeholder="输入内容"></oas-input>
OUTPUT ▸保存次要✓ 一套组件，处处可用
NUMBERS, NOT SLOGANS
性能速览
公开基准，可复现——完整方法论与各组件链数据见文档。
按钮链 22 KBCDN gzip 234.9 KB全量入口 405.7 KB
22KB
234.9KB
405.7KB
按需引入，省下 93%
tree-shakable · 按需引入一个组件，只打包它自己的链路
GET STARTED
三行代码，开始用
装包、引入主题、引入组件——然后像写 HTML 一样写你的界面。
01
安装
pnpm add 一行命令装齐
02
引入
theme + ui 两个入口
03
使用
<oas-button> 直接用
~/demo $ pnpm add @oas-ui/ui @oas-ui/theme
✓ added 2 packages · 0 framework runtime deps
~/demo $ touch main.ts
import '@oas-ui/theme'
import '@oas-ui/ui'
~/demo $ npm run dev
VITE ready in 22ms · Local: http://localhost:5173