shadcn-hub
HomeOfficial Components64Live GalleryLive
Design Tools
/
Star on GitHub
shadcn-hub100% Strictly Implemented
Visitor Analytics
|
Site Visitor Counter
Star on GitHubMIT License

beUI

Motion 动效

Overview

Overview

Motion

Text Effects
Typing
Button Interactions
Shimmer
Spotlight Cards
Spotlight
Interactive Primitives
Upload
Home/Live Gallery/beui.dev
Visit Source Site
微交互89 Live Itemshttps://beui.dev

beui.dev Components & Blocks Exhibition

beui.dev — All collected resources adapted with source code, 100% interactive live preview in cards.

beui.devCOMPONENT
Source Details

Arc Picker Radial Dial

具有自然角度惯性阻尼的圆弧交互转盘,用于温度、音量或多档位精密选择。

#ArcPicker#Radial#Motion
beui
beui.devCOMPONENT
Source Details

Sortable Stack Drag Reorder

类似物理卡牌抽出的堆叠动画,支持上下滑动切换焦点与层级穿透。

#Sortable#Stack#Cards
beui
beui.devCOMPONENT
Source Details

Animated Color Selector Swatches

点击色环扇形放射展开全部主题色,选中色块伴随流体波纹形变效果。

#ColorPicker#Palette#Motion
beui
beui.devCOMPONENT
Source Details

Tilt Card 3D Perspective Hover

高灵敏度响应光标相对坐标,实时计算 pitch/roll 旋转并投射高光反光层。

#Tilt#3D#Card
beui
beui.devCOMPONENT
Source Details

Expanding Arrow CTA Button

悬停时图标右滑破界而出并带动容器胶囊宽度平滑延展,极具点击驱动力。

#Button#Arrow#CTA
beui
beui.devCOMPONENT
Source Details

Adaptive Stepper Number Control

支持左右拖拽手势快速调值与长按连续加速,数字平滑翻牌过渡。

#Stepper#Control#Input
beui
beui.devCOMPONENT
Source Details

Wheel Picker Inertial Scroll

仿机械滚轮透视滚动,中央聚光区域自动对齐刻度并产生触感反馈。

#Wheel#Picker#Date
beui
beui.devCOMPONENT
Source Details

Animated Toast Stack Queue

后置通知自动按阶梯缩小并带有半透明景深感,点击悬停时展开列表。

#Toast#Notification#Motion
beui
beui.devCOMPONENT
Source Details

Action Swap State Morph

从“下载”平滑形变为“进度环”再形变为“打开文件”,全流程一体化无刷新。

#ActionSwap#Morph#Button
beui
beui.devBLOCK
Source Details

Dynamic Island Capsule Header

支持在通话、音乐播放、计时器与系统告警间无缝拉伸与形态突变。

#DynamicIsland#Capsule#Header
beui
beui.devBLOCK
Source Details

Command Palette Fuzzy Quick Launcher

带分组图标、键盘热键绑定与最近操作记录的快捷呼出面板。

#Command#Palette#Search
beui
beui.devBLOCK
Source Details

Morphing Search Expandable Bar

静止状态为一个轻量搜索图标,点击后向两侧延展并弹出快捷推荐标签。

#Search#Morphing#Input
beui
beui.devBLOCK
Source Details

Notification Stack Drawer

将来自 Slack、GitHub、系统邮件的多条警报折叠为整洁卡片,支持一键清空。

#Notification#Stack#Drawer
beui
beui.devBLOCK
Source Details

Availability Scheduler Matrix

支持框选周一至周五的可用时间段,自动识别时区冲突并生成预约日历。

#Scheduler#Calendar#Booking
beui
beui.devBLOCK
Source Details

Project Folder Skeuomorphic Binder

双层文件夹视觉,点击文件夹标签即可上浮出内部包含的设计稿与文档列表。

#Folder#Design#Block
beui
beui.devBLOCK
Source Details

OTP Input Segmented Security Code

自动跳转下一格、支持粘贴完整串自动分段分配,并配有校验通过动效。

#OTP#Security#Input
beui
beui.devBLOCK
Source Details

Feedback Widget Mood & Comment Box

集成 5 档生动 Emoji 表情选择与单行意见提交,完成后展示感谢动效。

#Feedback#Widget#Rating
beui
beui.devCOMPONENT
Source Details

Voice Orb Real-time Audio Visualizer

仿 Siri / Gemini Live 的多层彩色流体能量球,随麦克风音量动态波荡起伏。

#VoiceOrb#AI#Audio
beui
beui.devBLOCK
Source Details

Tool Approval Human-in-the-Loop Card

展示 Agent 计划调用的 Bash 命令行与文件修改 Diff,由工程师授权或驳回。

#Agent#Approval#HITL
beui
beui.devCOMPONENT
Source Details

beUI Agent Activity

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Agent#Motion
beui
beui.devBLOCK
Source Details

beUI Ai Sidebar

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Ai#Block
beui
beui.devBLOCK
Source Details

beUI Chat App

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Chat#Block
beui
beui.devCOMPONENT
Source Details

beUI Citations

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Citations#Motion
beui
beui.devCOMPONENT
Source Details

beUI Code Block

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Code#Motion
beui
beui.devCOMPONENT
Source Details

beUI File Diff

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#File#Motion
beui
beui.devCOMPONENT
Source Details

beUI Image Generation

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Image#Motion
beui
beui.devCOMPONENT
Source Details

beUI Loading States

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Loading#Motion
beui
beui.devCOMPONENT
Source Details

beUI Message

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Message#Motion
beui
beui.devCOMPONENT
Source Details

beUI Message Bubble

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Message#Motion
beui
beui.devCOMPONENT
Source Details

beUI Message Scroller

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Message#Motion
beui
beui.devCOMPONENT
Source Details

beUI Prompt Input

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Prompt#Motion
beui
beui.devCOMPONENT
Source Details

beUI Streaming Response

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Streaming#Motion
beui
beui.devCOMPONENT
Source Details

beUI Todo List

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Todo#Motion
beui
beui.devBLOCK
Source Details

beUI Tool Approval

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Tool#Block
beui
beui.devCOMPONENT
Source Details

beUI Tool Result

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Tool#Motion
beui
beui.devBLOCK
Source Details

beUI Bloom Menu

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Bloom#Block
beui
beui.devBLOCK
Source Details

beUI Card Folder

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Card#Block
beui
beui.devBLOCK
Source Details

beUI Expandable Action Bar

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Expandable#Block
beui
beui.devBLOCK
Source Details

beUI Expandable Tabs

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Expandable#Block
beui
beui.devBLOCK
Source Details

beUI File Upload

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#File#Block
beui
beui.devBLOCK
Source Details

beUI Infinite Masonry

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Infinite#Block
beui
beui.devBLOCK
Source Details

beUI Knockout Bracket

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Knockout#Block
beui
beui.devBLOCK
Source Details

beUI Morphing Tabs

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Morphing#Block
beui
beui.devBLOCK
Source Details

beUI Not Found

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Not#Block
beui
beui.devBLOCK
Source Details

beUI Overflow Actions

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Overflow#Block
beui
beui.devBLOCK
Source Details

beUI Prediction Market

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Prediction#Block
beui
beui.devBLOCK
Source Details

beUI Signup Form

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Signup#Block
beui
beui.devBLOCK
Source Details

beUI Swap

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Swap#Block
beui
beui.devBLOCK
Source Details

beUI Swipeable List

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Swipeable#Block
beui
beui.devBLOCK
Source Details

beUI Wallet Card

源自 beui.dev 的高性能 复合业务区块,支持真实状态响应与微动效。

#beUI#Wallet#Block
beui
beui.devCOMPONENT
Source Details

beUI Animated Badge

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Animated#Motion
beui
beui.devCOMPONENT
Source Details

beUI Animated Sidebar

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Animated#Motion
beui
beui.devCOMPONENT
Source Details

beUI Bottom Sheet

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Bottom#Motion
beui
beui.devCOMPONENT
Source Details

beUI Bounce Sidebar

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Bounce#Motion
beui
beui.devCOMPONENT
Source Details

beUI Bouncy Accordion

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Bouncy#Motion
beui
beui.devCOMPONENT
Source Details

beUI Breadcrumb

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Breadcrumb#Motion
beui
beui.devCOMPONENT
Source Details

beUI Button

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Button#Motion
beui
beui.devCOMPONENT
Source Details

beUI Center Morph Modal

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Center#Motion
beui
beui.devCOMPONENT
Source Details

beUI Checkbox

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Checkbox#Motion
beui
beui.devCOMPONENT
Source Details

beUI Combobox

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Combobox#Motion
beui
beui.devCOMPONENT
Source Details

beUI Context Menu

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Context#Motion
beui
beui.devCOMPONENT
Source Details

beUI Cylinder Carousel

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Cylinder#Motion
beui
beui.devCOMPONENT
Source Details

beUI Date Range Picker

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Date#Motion
beui
beui.devCOMPONENT
Source Details

beUI Dock

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Dock#Motion
beui
beui.devCOMPONENT
Source Details

beUI Drawer

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Drawer#Motion
beui
beui.devCOMPONENT
Source Details

beUI Expandable Control

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Expandable#Motion
beui
beui.devCOMPONENT
Source Details

beUI File Tree

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#File#Motion
beui
beui.devCOMPONENT
Source Details

beUI Image Viewer

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Image#Motion
beui
beui.devCOMPONENT
Source Details

beUI Input

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Input#Motion
beui
beui.devCOMPONENT
Source Details

beUI Loader

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Loader#Motion
beui
beui.devCOMPONENT
Source Details

beUI Marquee

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Marquee#Motion
beui
beui.devCOMPONENT
Source Details

beUI Morphing Modal

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Morphing#Motion
beui
beui.devCOMPONENT
Source Details

beUI Multi Select

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Multi#Motion
beui
beui.devCOMPONENT
Source Details

beUI Number

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Number#Motion
beui
beui.devCOMPONENT
Source Details

beUI Popover

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Popover#Motion
beui
beui.devCOMPONENT
Source Details

beUI Preview Rail

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Preview#Motion
beui
beui.devCOMPONENT
Source Details

beUI Pull To Refresh

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Pull#Motion
beui
beui.devCOMPONENT
Source Details

beUI Radio

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Radio#Motion
beui
beui.devCOMPONENT
Source Details

beUI Range Slider

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Range#Motion
beui
beui.devCOMPONENT
Source Details

beUI Scroll Animation

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Scroll#Motion
beui
beui.devCOMPONENT
Source Details

beUI Select

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Select#Motion
beui
beui.devCOMPONENT
Source Details

beUI Shader Background

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Shader#Motion
beui
beui.devCOMPONENT
Source Details

beUI Shared Layout Bg

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Shared#Motion
beui
beui.devCOMPONENT
Source Details

beUI Switch

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Switch#Motion
beui
beui.devCOMPONENT
Source Details

beUI Table

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Table#Motion
beui
beui.devCOMPONENT
Source Details

beUI Tabs

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Tabs#Motion
beui
beui.devCOMPONENT
Source Details

beUI Text Animation

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Text#Motion
beui
beui.devCOMPONENT
Source Details

beUI Theme Toggle

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Theme#Motion
beui
beui.devCOMPONENT
Source Details

beUI Tooltip

源自 beui.dev 的高性能 交互基元,支持真实状态响应与微动效。

#beUI#Tooltip#Motion
beui