Ptengine Kit一份内核，多框架可用

用 Web Components 写一次，React、Vue、Angular、原生 HTML 里都能直接用。

快速开始

浏览组件

框架无关

产物是标准 Custom Elements，对外的 API（标签、属性、事件、插槽、CSS 变量）不含任何构建工具的概念。React / Vue / Angular 包装层由构建自动生成，只有少数 SSR 相关的补丁手写。

桌面与移动

所有组件响应式布局，触控目标不小于 44px。Select、Modal 这类弹层在窄屏下自动切换为底部抽屉形态。

支持 SSR

Next.js 下组件在服务端就渲染成 Declarative Shadow DOM，首屏不闪烁。每次发版前都有 SSR 冒烟测试把关。

主题可切换

设计变量分原语与语义两层，明暗主题通过在根节点切换一组变量实现，不重新加载样式。局部主题孤岛也支持。

零业务依赖

基础组件不依赖任何业务能力，没有 Ptmind 账号也能用。

开源

Apache-2.0，公开 npm 包与公开文档，1.0 起按语义化版本对 API 稳定性做出承诺。

30 秒试一下

html

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ptengine/ui/dist/ptengine-ui/ptengine-ui.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@ptengine/ui/dist/ptengine-ui/ptengine-ui.esm.js"
></script>

<pt-button variant="brand">开始使用</pt-button>

变体

九种变体覆盖从高强调到静默的全部层级。深色底的三档用白字，其余走正文档。

<pt-button variant="default">高强调</pt-button>
<pt-button variant="brand">品牌</pt-button>
<pt-button variant="secondary">次要</pt-button>
<pt-button variant="tertiary">第三级</pt-button>
<pt-button variant="ghost">幽灵</pt-button>
<pt-button variant="destructive">危险</pt-button>
<pt-button variant="link">链接</pt-button>