TNI Design

特性

• 90+ 组件 — 组件丰富，支持 Tree Shaking
• 主题可调 — 类型安全的主题系统，无需 CSS 变量或 loader
• TypeScript — 全量 TypeScript，与你的 TS 项目无缝衔接
• 快 — 数据类组件支持虚拟列表（Select、Tree、Table 等）
• 无需导入 CSS — 组件开箱即用

安装

npm install tni-design
# 或
pnpm add tni-design
# 或
yarn add tni-design

依赖要求

{
  "vue": "^3.0.0"
}

快速开始

<script setup>
import { TButton, TConfigProvider, TSpace } from 'tni-design'
</script>

<template>
  <TConfigProvider>
    <TSpace>
      <TButton type="primary">
        主要按钮
      </TButton>
      <TButton>默认按钮</TButton>
    </TSpace>
  </TConfigProvider>
</template>

按需自动引入 (unplugin-vue-components)

import { TniDesignResolver } from 'tni-design/resolver'
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [TniDesignResolver()]
    })
  ]
})

图标

推荐使用 xicons 作为图标库。

许可证

MIT