QiuYe UI

QiuYe UI

精心设计的自定义UI组件,让您的应用更加出色

15 个组件
4 个分类
一键复制CLI命令
包管理器:

Responsive Tabs

响应式标签页组件:responsive 模式统一等宽并在空间不足时滚动,scroll 模式按内容宽度滚动,grid 模式按配置列数等分换行;支持图标、徽标与禁用状态。

选择与切换
tabsnavigationresponsive+7
@qiuye-ui/responsive-tabs
查看详情
v1.4.1by QiuYeDx

Clip Path Tabs

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

选择与切换
tabsclip-pathtransition+6
@qiuye-ui/clip-path-tabs
查看详情
v1.2.0by QiuYeDx

Segmented Control

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

选择与切换
segmented-controlradio-grouptabs+8
@qiuye-ui/segmented-control
查看详情
v2.0.1by QiuYeDx

Scrollable Dialog

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

浮层与引导
dialogmodalscrollable+3
@qiuye-ui/scrollable-dialog
查看详情
v1.0.0by QiuYeDx

Dot Glass

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

视觉与动效
glassblurbackdrop+5
@qiuye-ui/dot-glass
查看详情
v1.0.0by QiuYeDx

Image Viewer

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

内容与媒体
imageviewerlightbox+6
@qiuye-ui/image-viewer
查看详情
v1.2.0by QiuYeDx

Dual State Toggle

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

选择与切换
togglebuttonicon+5
@qiuye-ui/dual-state-toggle
查看详情
v1.0.0by QiuYeDx

Theme Transition Toggle

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

选择与切换
themedark-modeview-transition+8
@qiuye-ui/theme-transition-toggle
查看详情
v1.0.0by QiuYeDx

Code Block

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

内容与媒体
codesyntax-highlightingprism+8
@qiuye-ui/code-block
查看详情
v1.0.0by QiuYeDx

Typewriter

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

视觉与动效
typewritertypinganimation+5
@qiuye-ui/typewriter
查看详情
v1.0.0by QiuYeDx

Markdown Renderer

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

内容与媒体
markdowngfmcontent+7
@qiuye-ui/markdown-renderer
查看详情
v1.0.0by QiuYeDx

Color Picker

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

选择与切换
colorpickerhsv+9
@qiuye-ui/color-picker
查看详情
v1.0.0by QiuYeDx

Smooth Corners

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

视觉与动效
smooth-cornerscorner-shapesuperellipse+5
@qiuye-ui/smooth-corners
查看详情
v1.0.0by QiuYeDx

Tour

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

浮层与引导
tourguideonboarding+6
@qiuye-ui/tour
查看详情
v1.0.0by QiuYeDx

Matrix Effect

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

视觉与动效
canvasmatrixgrid+9
@qiuye-ui/matrix-effect
查看详情
v1.0.0by QiuYeDx