15 个可安装组件Based on shadcn/ui

QiuYe UI 快速开始

用 shadcn/ui 熟悉的方式，把 QiuYe UI 的交互组件添加到你的项目里。先接入 registry，再按需安装组件，组件源码会落在你自己的代码库中。

推荐第一步

选择你的包管理器后复制命令

Terminal

1pnpm dlx shadcn@latest add @qiuye-ui/responsive-tabs

已配置 registry 时，用组件名安装最顺手。

还没配置时，也可以先用下方 URL 方式验证。

Start Path

四步接入

这条路径适合 Next.js、Vite、React Router 等已经使用 shadcn/ui 的项目。复制命令前先确认当前终端位于项目根目录。

准备 shadcn/ui 项目

QiuYe UI 组件会被添加到你的项目源码里，因此先确认项目已经完成 shadcn/ui 初始化。

Terminal

1pnpm dlx shadcn@latest init

接入 QiuYe UI registry

在 components.json 里添加 registry alias，之后就可以用 @qiuye-ui/name 安装组件。

components.json

{
  "registries": {
    "@qiuye-ui": "https://ui.qiuyedx.com/registry/{name}.json"
  }
}

添加第一个组件

从一个组件开始验证路径。安装完成后，组件文件会出现在你的 components 目录中。

Terminal

1pnpm dlx shadcn@latest add @qiuye-ui/responsive-tabs

在业务界面中使用

组件是普通 React 代码，可以按项目需要继续改样式、组合交互或抽象业务封装。

Demo.tsx

import { useState } from "react";
import { ResponsiveTabs } from "@/components/qiuye-ui/responsive-tabs";

const items = [
  { value: "overview", label: "Overview" },
  { value: "details", label: "Details" },
];

export function Demo() {
  const [value, setValue] = useState("overview");

  return (
    <ResponsiveTabs value={value} onValueChange={setValue} items={items}>
      <div className="rounded-md border p-4">Your content</div>
    </ResponsiveTabs>
  );
}

Components

先从这些组件开始

全部组件

选择与切换v1.4.2

Responsive Tabs

响应式标签页组件：responsive 模式统一等宽并在空间不足时滚动，scroll 模式按内容宽度滚动，grid 模式按配置列数等分换行；列表、标签与动画高亮均使用 Figma/iOS 风格平滑圆角，并支持图标、徽标与禁用状态。

@qiuye-ui/responsive-tabs

选择与切换v1.2.1

Clip Path Tabs

通过 clip-path 平滑切换完整选中态的标签按钮组：默认使用无间隙的连续背景，也可选择保留间隙的分段过渡；背景与文本颜色保持同步，支持胶囊/圆角矩形、Figma/iOS 风格平滑圆角、自定义配色、三档尺寸、等宽布局、禁用项及受控/非受控状态。

@qiuye-ui/clip-path-tabs

选择与切换v2.0.1

Segmented Control

ChatGPT 风格的分段单选控件：使用 Motion layoutId 与 spring 弹性滑块过渡，提供内嵌与悬浮两种风格及中、小两档尺寸，并支持受控/非受控状态、键盘导航、禁用项与表单提交。

@qiuye-ui/segmented-control

浮层与引导v1.0.0

Scrollable Dialog

可滚动对话框组件：头部和底部固定，内容区域可滚动，支持自定义高度，适用于需要展示大量内容的场景。

@qiuye-ui/scrollable-dialog

内容与媒体v1.0.0

Code Block

通用代码块显示组件：基于 prism-react-renderer 的语法高亮，7 套内置配色主题（浅/深色变体）+ 自定义主题支持，支持折叠、滚动、自适应高度三种显示模式，Diff 高亮模式（绿色/红色行背景 + 左侧指示条），行高亮标记（淡蓝色背景标记指定行），行号 sticky 固定，自带完整样式。含 CodeBlockPanel 外层容器面板（仿 Tailwind CSS 官网风格），支持文件名标签与复制按钮。

@qiuye-ui/code-block

视觉与动效v1.0.0

Smooth Corners

Figma/iOS 风格平滑圆角组件：基于 CSS corner-shape 的渐进增强方案，将 radius + smoothing 转换为补偿半径和 superellipse，并在不支持的浏览器中自动回退到标准 border-radius。

@qiuye-ui/smooth-corners

不想先改配置？

可以直接使用 registry JSON 地址安装组件，适合快速验证或临时试用。

Terminal

pnpm dlx shadcn@latest add https://ui.qiuyedx.com/registry/responsive-tabs.json

接入检查

项目根目录存在 components.json。
components.json 里的 aliases 指向项目真实目录。
安装后按组件详情页示例补齐必要状态和 props。

Registry

国内访问优先使用 ui.qiuyedx.com

components.json

{
  "registries": {
    "@qiuye-ui": "https://ui.qiuyedx.com/registry/{name}.json"
  }
}

国际备用地址： https://qiuye-ui.vercel.app/registry/{name}.json

AI Assistant

在编辑器里读取组件库

Cursor、Claude、Codex 等支持 MCP 的工具可以通过 @qiuye-ui/mcp 查询组件、读取 registry，并生成安装命令。

.cursor/mcp.json

{
  "mcpServers": {
    "@qiuye-ui/mcp": {
      "command": "npx",
      "args": ["-y", "--package", "@qiuye-ui/mcp@latest", "qiuye-ui-mcp"]
    }
  }
}

准备挑组件了？

组件页包含预览、Props、基础用法和安装命令。

打开组件列表反馈问题