10 components ready to install

QiuYe UI

一组基于 shadcn/ui 构建的高质量自定义组件。复制、安装、组合，然后把它变成你自己的设计系统。

Component previews

真实组件，轻量展示

Dot Glass

点阵开孔毛玻璃组件：一种「反直觉」的玻璃效果，只在点阵孔洞里露出背后内容的模糊（blur），其余区域是纯色盖板遮挡，适用于 Header、Navbar 等需要特殊视觉效果的场景。

特效

glassblur

Code Block

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

展示

use-counter.ts

import { useState, useCallback } from "react";

interface UseCounterOptions {
  min?: number;
  max?: number;
}

export function useCounter(initial = 0, opts?: UseCounterOptions) {
  const [count, setCount] = useState(initial);

  const increment = useCallback(
    () => setCount((c) => opts?.max != null ? Math.min(c + 1, opts.max) : c + 1),
    [opts?.max]
  );

  const reset = useCallback(() => setCount(initial), [initial]);

  return { count, increment, reset } as const;
}

codesyntax-highlighting

Image Viewer

带灯箱预览的图片查看器，支持点击放大、滚轮/触控缩放与拖拽平移，内置骨架屏加载过渡与悬浮放大动效。

媒体

imageviewer

Tour

产品引导组件：基于目标 selector 高亮页面元素并展示步骤 Popover，内置遮罩聚焦、Motion layoutId 迁移动画、进度显示、上一步/下一步/跳过与自动滚动定位。

导航

tourguide

Responsive Tabs

响应式标签页组件：小屏横向滚动、可选左右滚动按钮与渐变遮罩；大屏可切换为网格布局；支持图标、徽标、禁用与自定义样式。

导航

overview

tabsnavigation

Color Picker

通用取色器组件：基于 HSV 色彩模型的饱和度/亮度面板与色相条拖拽选色，支持可选透明度（Alpha）选择、触屏操作、十六进制输入、40 色预设色卡、最近使用颜色记录，提供 Popover 弹出与 Inline 内嵌两种布局模式。

表单

#6366F1

colorpicker

Dual State Toggle

双状态切换按钮：基于 shadcn/ui Button，内置点击缩放 + 图标切换动画（opacity + blur），支持 5 种过渡效果预设与自定义过渡配置。

交互

togglebutton

Typewriter

平滑打字机效果组件：弹簧宽度跟随（useSpring）实现无顿挫的容器缩放，全文渲染 + overflow 裁剪避免字符闪现，支持多文案轮播、单次打字、自定义光标与弹簧参数。

特效

typewritertyping

Scrollable Dialog

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

弹窗

发布确认

固定头部、滚动正文、居中操作

Review

图标语义切换前后状态保持同一对象

滚动内容长内容分组清晰，遮罩提示保留

底部操作取消与确认按钮固定居中

dialogmodal

Markdown Renderer

通用 Markdown 渲染器：内置 Blog / Chat 两套预设，支持 GFM、标题锚点、代码块高亮、Mermaid 图表、图片预览、安全链接策略与可扩展 Widget 运行时。

展示

MarkdownRenderer

GFM

Release checklist

Tables, code blocks, widgets and safe links.

ItemStatusOwner

DocsDoneQiuYe

CLIDoneQiuYe

PreviewDoneQiuYe

pnpm dlx shadcn@latest add @qiuye-ui/markdown-renderer

markdowngfm

从一个组件开始。

QiuYe UI 组件可以通过 shadcn/ui registry 方式按需安装。先浏览组件，再复制 CLI 命令，把需要的代码带进你的项目。

浏览全部组件