Back to Details

beui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

beUI

beUI

Use beUI as copy-paste source through the 
@beui
shadcn registry.
通过
@beui
shadcn注册表，将beUI作为复制粘贴的组件来源使用。

Workflow

工作流程

  1. Fetch the live registry before choosing a component:
bash
curl -fsS https://beui.dev/r/registry.json
  1. Pick the closest install slug from 
    items[].name
    .
  2. Inspect before installing:
bash
npx shadcn@latest view @beui/<slug>
  1. Install with the user's package runner:
bash
npx shadcn@latest add @beui/<slug>
  1. 在选择组件前获取实时注册表：
bash
curl -fsS https://beui.dev/r/registry.json
  1. 从
    items[].name
    中选择最匹配的安装标识（slug）。
  2. 安装前先查看组件详情：
bash
npx shadcn@latest view @beui/<slug>
  1. 使用用户的包管理器进行安装：
bash
npx shadcn@latest add @beui/<slug>

or

or

pnpm dlx shadcn@latest add @beui/<slug>
pnpm dlx shadcn@latest add @beui/<slug>

or

or

bunx --bun shadcn@latest add @beui/<slug>

5. Read the files that were added, then compose with the named exports. There is no `beui` runtime package.

The live registry is the source of truth. Use the table below only to resolve common lookalikes.
bunx --bun shadcn@latest add @beui/<slug>

5. 查看已添加的文件，然后通过命名导出组合使用。不存在`beui`运行时包。

实时注册表是唯一可信来源。仅在需要解析常见相似组件时使用下方表格。

Picker

组件选择对照表

User asks forInstall 
@beui/...
Avoid
Toast or snackbar
animated-toast-stack
notification-stack
Expanding notification inbox
notification-stack
animated-toast-stack
Mobile bottom sheet, Vaul-style panel
bottom-sheet
drawer
Side panel or app drawer
drawer
bottom-sheet
App chrome sidebar
animated-sidebar
bounce-sidebar
, 
ai-sidebar
AI files, folders, bookmarks
ai-sidebar
animated-sidebar
Whole agent workspace
chat-app
hand-rolled chat shell
Streaming thread that follows tokens
message-scroller
, 
message
custom scroll math
Just a chat bubble
message-bubble
custom bubble
Prompt box or composer
prompt-input
textarea plus custom buttons
Agent reasoning, search, tool trace
agent-activity
plain log list
Task plan
todo-list
custom checklist
Code surface
code-block
pre/code from scratch
File diff
file-diff
custom diff renderer
Tool output
tool-result
raw terminal block
Tool permission card
tool-approval
alert dialog
Approval or HITL question
approval-card
custom form
Inline citations
citations
plain numbered links
Generated image canvas
image-generation
image card from scratch
Liquid popover
popover
popover-morph
Corner morph popover
popover-morph
popover
Dropdown select
select
select-morph
, 
combobox
Select that grows into panel
select-morph
select
Searchable select
combobox
select
Cmd+K palette
command-palette
combobox
Right-click or long-press menu
context-menu
bloom-menu
Button that blooms into a menu
bloom-menu
context-menu
Press button
button-base
custom 
motion.button
Loading/success/error button
button-stateful
spinner button
Magnetic button
button-magnetic
custom pointer tracking
Hold to confirm
hold-action-button
button-base
Slide to confirm
slide-action-button
swipeable-list
Hover CTA with expanding arrow
expanding-arrow-button
button-base
Spinner, dots, bars loader
loader
thinking-shimmer
Agent thinking status
thinking-shimmer
loader
, 
text-shimmer
Cycling reasoning phrases
reasoning-text
text-cascade
Timed agent progress glyph
agent-progress
loader
Shimmer headline text
text-shimmer
thinking-shimmer
Word or letter reveal
text-reveal
text-cascade
Chromatic cycling word
chromatic-text-reveal
text-shimmer
Slot-machine letters
text-cascade
text-scramble
Scramble resolving text
text-scramble
text-cascade
Rolling digits
number-ticker
animated-number
Count-up on view
animated-number
number-ticker
Tick-dot slider
range-slider
other 
range-slider-*
Liquid fill slider
range-slider-fluid
range-slider
Equalizer slider
range-slider-wave
range-slider
Tilting value bubble slider
range-slider-bubble
range-slider
Ruler slider
range-slider-ruler
range-slider
iOS wheel picker
wheel-picker
select
macOS dock
dock
expandable-action-bar
Icon actions with labels
expandable-action-bar
dock
Overflow action rail
overflow-actions
expandable-action-bar
Icon tabs with active label
expandable-tabs
tabs
Morphing tab content room
morphing-tabs
tabs
Pill or underline tabs
tabs
expandable-tabs
Hover gliding background
shared-layout-bg
tabs
Preview ticks or rail
preview-rail
bounce-sidebar
Dynamic Island
dynamic-island
notification-stack
Swipe row actions
swipeable-list
slide-action-button
Pull to refresh
pull-to-refresh
custom touch math
Basic upload queue
file-upload
attachment-upload
Mixed file, audio, image attachments
attachment-upload
file-upload
OTP or PIN boxes
otp-input
input
Sign-up form
signup-form
manual form assembly
Theme wipe
theme-toggle
class toggle only
Shader background
shader-background
custom canvas
Cylinder carousel
cylinder-carousel
marquee
Logo or text marquee
marquee
cylinder-carousel
Data table
table
HTML table from scratch
Editable table
table-editable
table
Async table
table-async
table
Tournament bracket
knockout-bracket
knockout-wheel
Radial tournament wheel
knockout-wheel
knockout-bracket
404 page
not-found-glitch
custom 404
Project folder card
project-folder
folder card from scratch
Token or chain swap
swap
custom swap form
Weekly availability editor
availability-scheduler
custom calendar grid
Wallet overview card
wallet-card
custom wallet card
Prediction market ticket
prediction-market
custom trade ticket
Feedback popup
feedback-widget
animated-toast-stack
Infinite masonry grid
infinite-masonry
CSS columns
Accordion
bouncy-accordion
custom accordion
3D tilt card
tilt-card
custom glare math
Tooltip
tooltip
popover
Switch, checkbox, radio, input
switch
, 
checkbox
, 
radio
, 
input
restyled native controls
用户需求安装
@beui/...
避免选择
提示框（Toast）或 snackbar
animated-toast-stack
notification-stack
可展开的通知收件箱
notification-stack
animated-toast-stack
移动端底部弹窗、Vaul风格面板
bottom-sheet
drawer
侧边面板或应用抽屉
drawer
bottom-sheet
应用侧边栏框架
animated-sidebar
bounce-sidebar
, 
ai-sidebar
AI文件、文件夹、书签
ai-sidebar
animated-sidebar
完整Agent工作区
chat-app
手动编写的聊天外壳
跟随令牌滚动的流式对话线程
message-scroller
, 
message
自定义滚动逻辑
仅聊天气泡
message-bubble
自定义气泡
提示框或编辑器
prompt-input
文本框加自定义按钮
Agent推理、搜索、工具追踪
agent-activity
普通日志列表
任务计划
todo-list
自定义清单
代码展示区域
code-block
从零开始编写的pre/code标签
文件差异对比
file-diff
自定义差异渲染器
工具输出
tool-result
原始终端块
工具权限卡片
tool-approval
警告对话框
审批或人工介入问题
approval-card
自定义表单
内联引用
citations
普通编号链接
生成图像画布
image-generation
从零开始制作的图片卡片
常规弹出层
popover
popover-morph
角落变形弹出层
popover-morph
popover
下拉选择器
select
select-morph
, 
combobox
可展开为面板的选择器
select-morph
select
可搜索选择器
combobox
select
Cmd+K命令面板
command-palette
combobox
右键或长按菜单
context-menu
bloom-menu
点击后展开为菜单的按钮
bloom-menu
context-menu
基础按钮
button-base
自定义
motion.button
带加载/成功/错误状态的按钮
button-stateful
带加载动画的按钮
磁吸按钮
button-magnetic
自定义指针追踪
按住确认按钮
hold-action-button
button-base
滑动确认按钮
slide-action-button
swipeable-list
悬停时箭头展开的CTA按钮
expanding-arrow-button
button-base
加载动画（ spinner、点状、条状）
loader
thinking-shimmer
Agent思考状态
thinking-shimmer
loader
, 
text-shimmer
循环显示的推理文本
reasoning-text
text-cascade
带时间进度的Agent状态图标
agent-progress
loader
闪光标题文本
text-shimmer
thinking-shimmer
逐字/逐字母显示
text-reveal
text-cascade
彩色循环文本
chromatic-text-reveal
text-shimmer
老虎机式字母切换
text-cascade
text-scramble
字符重组文本
text-scramble
text-cascade
滚动数字
number-ticker
animated-number
可视区域内计数增长
animated-number
number-ticker
带刻度点的滑块
range-slider
其他
range-slider-*
液体填充滑块
range-slider-fluid
range-slider
均衡器样式滑块
range-slider-wave
range-slider
带倾斜数值气泡的滑块
range-slider-bubble
range-slider
标尺样式滑块
range-slider-ruler
range-slider
iOS滚轮选择器
wheel-picker
select
macOS停靠栏
dock
expandable-action-bar
带标签的图标操作栏
expandable-action-bar
dock
溢出操作栏
overflow-actions
expandable-action-bar
带激活标签的图标选项卡
expandable-tabs
tabs
内容区域变形的选项卡
morphing-tabs
tabs
胶囊或下划线样式选项卡
tabs
expandable-tabs
悬停时滑动背景
shared-layout-bg
tabs
预览刻度栏
preview-rail
bounce-sidebar
灵动岛
dynamic-island
notification-stack
可滑动行操作
swipeable-list
slide-action-button
下拉刷新
pull-to-refresh
自定义触摸逻辑
基础上传队列
file-upload
attachment-upload
混合文件、音频、图片附件上传
attachment-upload
file-upload
OTP或PIN输入框
otp-input
input
注册表单
signup-form
手动组装表单
主题切换动画
theme-toggle
仅切换类名
着色器背景
shader-background
自定义画布
圆柱轮播
cylinder-carousel
marquee
Logo或文字跑马灯
marquee
cylinder-carousel
数据表格
table
从零开始编写的HTML表格
可编辑表格
table-editable
table
异步表格
table-async
table
淘汰赛对阵图
knockout-bracket
knockout-wheel
放射状淘汰赛轮盘
knockout-wheel
knockout-bracket
404页面
not-found-glitch
自定义404页面
项目文件夹卡片
project-folder
从零开始制作的文件夹卡片
代币或链交换
swap
自定义交换表单
每周可用时间编辑器
availability-scheduler
自定义日历网格
钱包概览卡片
wallet-card
自定义钱包卡片
预测市场工单
prediction-market
自定义交易工单
反馈弹窗
feedback-widget
animated-toast-stack
无限瀑布流网格
infinite-masonry
CSS列布局
手风琴组件
bouncy-accordion
自定义手风琴
3D倾斜卡片
tilt-card
自定义眩光逻辑
工具提示
tooltip
popover
开关、复选框、单选框、输入框
switch
, 
checkbox
, 
radio
, 
input
重新样式化的原生控件

Composition rules

组合规则

  • Prefer installed beUI source over custom one-off motion widgets.
  • Import named exports from the files shadcn adds.
  • Use 
    className
    for layout and small styling changes. Do not fork internals unless the user asks.
  • Keep helpers installed by the registry, such as 
    @/lib/ease
    , 
    @/lib/utils
    , and hooks.
  • If adding new motion around beUI components, use 
    useReducedMotion()
    from 
    motion/react
    .
  • Gate decorative hover effects like magnetic pull and tilt behind 
    useHoverCapable()
    .
  • Animate 
    transform
    and 
    opacity
    ; avoid layout-property animation.
  • 优先使用已安装的beUI源码，而非自定义一次性动效组件。
  • 从shadcn添加的文件中导入命名导出。
  • 使用
    className
    进行布局和小样式调整。除非用户要求，否则不要修改内部代码。
  • 保留注册表安装的辅助工具，例如
    @/lib/ease
    、
    @/lib/utils
    和hooks。
  • 如果要在beUI组件周围添加新动效，请使用
    motion/react
    中的
    useReducedMotion()
    。
  • 将磁吸、倾斜等装饰性悬停效果通过
    useHoverCapable()
    进行控制。
  • 对
    transform
    和
    opacity
    进行动画处理；避免对布局属性进行动画处理。

In this repo

本仓库说明

When contributing to beUI itself, follow 
AGENTS.md
. A new public component needs source, preview, registry entry, and a passing 
bun run check:registry
. Never rename existing 
/r/{name}.json
slugs.
当向beUI贡献代码时，请遵循
AGENTS.md
。新的公共组件需要包含源码、预览、注册表条目，并且通过
bun run check:registry
检查。请勿重命名现有的
/r/{name}.json
标识。