QiuYe UI

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

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

Responsive Tabs

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

导航
tabsnavigationresponsive+7
pnpm dlx shadcn@latest add @qiuye-ui/responsive-tabs
查看详情
v1.3.0by QiuYeDx

Scrollable Dialog

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

弹窗
dialogmodalscrollable+3
pnpm dlx shadcn@latest add @qiuye-ui/scrollable-dialog
查看详情
v1.0.0by QiuYeDx

Dot Glass

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

特效
glassblurbackdrop+5
pnpm dlx shadcn@latest add @qiuye-ui/dot-glass
查看详情
v1.0.0by QiuYeDx

Image Viewer

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

媒体
imageviewerlightbox+5
pnpm dlx shadcn@latest add @qiuye-ui/image-viewer
查看详情
v1.1.0by QiuYeDx

Dual State Toggle

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

交互
togglebuttonicon+5
pnpm dlx shadcn@latest add @qiuye-ui/dual-state-toggle
查看详情
v1.0.0by QiuYeDx

Code Block

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

展示
codesyntax-highlightingprism+6
pnpm dlx shadcn@latest add @qiuye-ui/code-block
查看详情
v1.0.0by QiuYeDx