SuperAPI AI 工具集

uitripled

前端与建站

查看项目

更新于 10-15 19:57

技能介绍

UITripled 是 TypeScript 组件库,提供 177 个带动画的 UI 组件,分三种设计系统变体:shadcn/ui(主要,171 项)、Base UI(88 项)、Carbon(10 项)。组件经集中注册表分发,用 uitripled CLI 安装,所有动画由 Framer Motion 驱动。版本 1.1.0,源码为 TSX。

安装组件:npx uitripled add native-button-shadcnui;覆盖安装可加 --overwrite。组件 ID 格式为 {component-name}-{variant},如 hero-section-baseui,CLI 会自动识别项目的组件目录(src/components、app/components 或 components)。

主题与变体切换需先设置 Provider: import { ThemeProvider, UILibraryProvider } from "@uitripled/react-shadcn"; <ThemeProvider><UILibraryProvider><YourApp /></UILibraryProvider></ThemeProvider>

带 Props 的用法示例: import { NativeMagnetic } from "@uitripled/react-shadcn"; <NativeMagnetic strength={0.3} scaleOnHover><button>Hover me</button></NativeMagnetic>

组件分类与数量:components 57(如 AI 聊天界面、AI Glow 输入、玻璃拟态登录卡)、sections 38(Hero、定价、用户评价、页脚、统计)、native 26(NativeMagnetic、NativeNotch、NativeHoverCard 等)、cards 16、page 15、decorative 10(液态光标、发光波浪、滚动显现)、micro 8(微光按钮、涟漪点击、情绪渐变按钮)、resumes 4、data 2、forms 1。

关键类型 NativeNotchProps 主要字段:children(ReactNode,可选)、collapsedIcon(ReactNode,可选)、size("sm"|"md"|"lg",默认 "md",可选)、position(NotchPosition,可选)、draggable(布尔,默认 true,可选)、defaultExpanded(布尔,默认 false,可选)、expanded(布尔,可选)、onExpandedChange((expanded: boolean) => void,可选)、onClick((e: React.MouseEvent) => void,可选)、className(字符串,可选)。

架构:三种变体各在 packages/components/react-{variant}/;注册表在 packages/registry/registry.json,含 278 条条目;CLI 在 packages/uitripled/;共享工具在 packages/utils/,提供 cn()、mergeComponentImports()、网格与构建工具;类型含 UILibrary、ComponentCategory、Component,定义于 packages/utils/src/types.ts。

限制:资料未提供收费、价格、平台兼容性等说明;除上述能力外,其余功能暂未提供。