Design

@tripo3d/design · Vue 3 组件库,基于 Reka UI + UnoCSS + SCSS,服务于 Tripo Studio、Homepage 等前端产品。

特性

🧩

20+ 基础组件

Button / Dialog / Select / Tabs / Drawer / Toast ... 覆盖常见业务场景

🎨

CSS 变量主题

所有组件通过 CSS 变量驱动,可逐实例覆写颜色与尺寸

⚡

Nuxt 自动导入

通过 @tripo3d/design/nuxt 模块,在 Nuxt 4/3 项目中无需 import 即可使用

🧱

10+ 业务组件

CreditsButton / ImgViewer / ModelUploader / Guide 等 Tripo 专属封装

🪶

Headless 内核

核心交互行为基于 Reka UI,支持完整的键盘与屏幕阅读器可访问性

🎯

类型完备

ESM + DTS,全量 TypeScript 类型,IDE 可直接跳转源码

安装

请先完成 GitHub Packages 认证配置。

pnpm add @tripo3d/design

快速开始

Vue 3 项目

main.ts:

import { createApp } from 'vue';
import 'virtual:uno.css';
import '@tripo3d/design/style.css';
import App from './App.vue';

createApp(App).mount('#app');

uno.config.ts:

import { defineConfig } from '@tripo3d/design/config';

export default defineConfig();

模板中:

<script setup lang="ts">
import { Button, toast } from '@tripo3d/design';
</script>

<template>
  <Button @click="toast('Hello Tripo')">点我</Button>
</template>

Nuxt 项目

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@tripo3d/design/nuxt', '@unocss/nuxt'],
  css: ['@tripo3d/design/style.css'],
});

无需 import,直接使用:

<template>
  <Button @click="toast('Hello Tripo')">点我</Button>
</template>

下一步

• 浏览所有组件 — 全部 UI 组件的交互示例
• 主题定制 — CSS 变量与设计令牌
• UnoCSS Preset — 与宿主工程的样式集成
• Nuxt 模块 — 自动导入细节