23 components ready to install

QiuYe UI

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

浏览组件

快速开始

Component previews

真实组件，轻量展示

AnimatedNumber

按数位独立过渡的动态数字，支持可选模糊、平滑宽度变化和 Intl 格式化。

视觉与动效

次探索

数字逐位

详情

ExpandableCard

App Store 风格的展开卡片：从原位置连续放大为居中详情浮层，支持分层视差封面、无重排滚动与无缝阴影交接。

内容与媒体

卡片App Store

详情

Matrix Effect

通用 Canvas 矩阵视觉效果组件：将图片、外部 Canvas 或程序化信号场按响应式网格采样，通过可组合的 Mapper、Transform 与 Renderer 管线生成圆点矩阵、ASCII 艺术和自定义效果，并内置自适应帧率、DPR 限制、离屏暂停与 Reduced Motion 支持。

视觉与动效

canvasmatrix

详情

HoneycombView

Apple Watch 风格的蜂窝图标视图：六边形密排，靠近边缘的图标连续缩小并向内收拢，支持四向自由拖动与仅上下滚动两种模式，带惯性、橡皮筋回弹与吸附。

内容与媒体

Apple Watch蜂窝

详情

SpotlightTile

跟随指针取光的聚光卡片：1px 边框沿指针位置亮起一圈色调光并铺一层内部柔光，角落的大号淡水印图标悬停时漂移转正，带色调渐变的图标底板轻微倾斜、箭头朝右上轻推。色调可为任意 CSS 颜色；标题链接铺满整张卡片而内层按钮仍可点击，支持 asChild、徽标、标签、进入视口时错开上浮、平滑圆角与减少动态效果。

内容与媒体

New

Carousel

通用轮播图，手感对标 iOS 分页滚动：拖拽与触摸 1:1 跟手、纵向滑动交还页面，两端橡皮筋阻尼，松手按速度投影吸附并可中途接住；支持不复制节点的无限循环、每屏多张与断点、居中 / 起始对齐、按张 / 按页吸附与自由惯性滚动、渐隐与中心缩放、图片视差与自动高度；内置悬停箭头、随拖动连续变形并显示自动播放进度的指示点、分数指示、触控板与键盘；配套 CarouselImage 提供 cover / contain（模糊衬底）、懒加载与骨架。

内容与媒体

跟手拖拽

1:1 跟随指针，拉过两端是越拉越沉的橡皮筋

轮播图carousel

详情

Masonry

通用瀑布流：按容器宽度自适应列数（也支持固定列数与断点），最短列优先且已排入的项保持在原列，图片加载只让同列下方平移；自带高度错落的骨架屏，整面共享一道对角线微光，加载更多时骨架落在最短的几列底部，并与到达的内容原地交叉淡出；新项自上而下错开上浮淡入，列数变化、筛选、排序与增删时各项沿可打断的弹簧滑到新位置；最短一列接近底部时触发无限加载，配套 MasonryImage 与 MasonrySkeleton。

内容与媒体

瀑布流masonry

详情

MorphTooltip

形变提示气泡：默认高级黑、平滑圆角；同一个 Provider 内共享一个气泡，只有第一次悬停需要等待，之后在范围内的元素间移动时气泡滑到新目标并连续变形宽高，内容沿移动方向交叉淡入，退场途中再进入会从当前状态反向回来。支持方向与对齐、碰撞翻转与平移、最大宽度换行、快捷键键帽、箭头、富内容、指针可移入气泡、受控、内容变化时原地形变、键盘聚焦、Esc 关闭与触屏长按。

浮层与引导

悬停或长按图标，气泡在图标间滑动

tooltip提示

详情

AdaptivePointer

参照 iPadOS 妙控板圆形指针的自适应指针：淡灰填充层悬停时变形为目标下方的圆角板并带阻尼偏移，图标随之轻微移动，正文上变为 I 形竖条，静止 2 秒后淡出；可选的深灰外环缩成小圆 1:1 标出真实指针位置。支持整页与局部作用域（含浮层）与主题令牌，触屏与减少动态效果时使用系统指针。

视觉与动效

把指针移到按钮或链接上

iPadOS指针

详情

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

详情

Clip Path Tabs

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

选择与切换

当前视图：支付

tabsclip-path

详情

Segmented Control

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

选择与切换

Conversation mode

segmented-controlradio-group

详情

Color Picker

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

选择与切换

#6366F1

colorpicker

详情

Smooth Corners

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

视觉与动效

正在检查浏览器支持检测 CSS corner-shape 能力。

smooth-cornerscorner-shape

详情

Dual State Toggle

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

选择与切换

togglebutton

详情

Theme Transition Toggle

基于浏览器 View Transition API 的深浅模式切换组件：支持从触发点播放圆形、椭圆或多边形揭幕，也可选择边缘扫入、轴线展开与对角揭幕，封装按钮、Hook 与纯函数三种复用方式，并在不支持 API 或减少动态效果偏好下自动降级。

选择与切换

themedark-mode

详情

Typewriter

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

视觉与动效

typewritertyping

详情

Responsive Tabs

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

选择与切换

overview

tabsnavigation

详情

Scrollable Dialog

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

浮层与引导

dialogmodal

详情

Markdown Renderer

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

内容与媒体

markdowngfm

详情

从一个组件开始。

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

浏览全部组件

快速开始

QiuYe UI

真实组件，轻量展示

AnimatedNumber

ExpandableCard

Matrix Effect

HoneycombView

SpotlightTile

ExpandableCard

AdaptivePointer

SmoothCorners

MatrixEffect

Carousel

跟手拖拽

轻甩即翻页

无缝循环

连续变形的指示点

触控板与键盘

Masonry

MorphTooltip

AdaptivePointer

Dot Glass

Code Block

Image Viewer

Tour

Clip Path Tabs

Segmented Control

Color Picker

Smooth Corners

Dual State Toggle

Theme Transition Toggle

Typewriter

Responsive Tabs

Scrollable Dialog

Markdown Renderer

从一个组件开始。