beUI
Use beUI as copy-paste source through the @beui shadcn registry.
Workflow
- Fetch the live registry before choosing a component:
curl -fsS https://beui.dev/r/registry.json
- Pick the closest install slug from
items[].name.
- Inspect before installing:
npx shadcn@latest view @beui/<slug>
- Install with the user's package runner:
npx shadcn@latest add @beui/<slug>
# or
pnpm dlx shadcn@latest add @beui/<slug>
# or
bunx --bun shadcn@latest add @beui/<slug>
- 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.
Picker
| User asks for |
Install @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 |
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.
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.
1---2name: beui3description: Pick and install beUI (@beui) animated React components from the shadcn registry. Use when building motion UI, agent/chat interfaces, toasts, docks, bottom sheets, drawers, popovers, sliders, loaders, 404 pages, or any beui.dev component. Maps user intent to exact @beui install slugs instead of inventing custom widgets.4---5
6# beUI
7
8Use beUI as copy-paste source through the `@beui` shadcn registry.
9
10## Workflow
11
121. Fetch the live registry before choosing a component:
13
14```bash
15curl -fsS https://beui.dev/r/registry.json
16```
17
182. Pick the closest install slug from `items[].name`.
193. Inspect before installing:
20
21```bash
22npx shadcn@latest view @beui/<slug>
23```
24
254. Install with the user's package runner:
26
27```bash
28npx shadcn@latest add @beui/<slug>
29# or
30pnpm dlx shadcn@latest add @beui/<slug>
31# or
32bunx --bun shadcn@latest add @beui/<slug>
33```
34
355. Read the files that were added, then compose with the named exports. There is no `beui` runtime package.
36
37The live registry is the source of truth. Use the table below only to resolve common lookalikes.
38
39## Picker
40
41| User asks for | Install `@beui/...` | Avoid |
42| --- | --- | --- |
43| Toast or snackbar | `animated-toast-stack` | `notification-stack` |
44| Expanding notification inbox | `notification-stack` | `animated-toast-stack` |
45| Mobile bottom sheet, Vaul-style panel | `bottom-sheet` | `drawer` |
46| Side panel or app drawer | `drawer` | `bottom-sheet` |
47| App chrome sidebar | `animated-sidebar` | `bounce-sidebar`, `ai-sidebar` |
48| AI files, folders, bookmarks | `ai-sidebar` | `animated-sidebar` |
49| Whole agent workspace | `chat-app` | hand-rolled chat shell |
50| Streaming thread that follows tokens | `message-scroller`, `message` | custom scroll math |
51| Just a chat bubble | `message-bubble` | custom bubble |
52| Prompt box or composer | `prompt-input` | textarea plus custom buttons |
53| Agent reasoning, search, tool trace | `agent-activity` | plain log list |
54| Task plan | `todo-list` | custom checklist |
55| Code surface | `code-block` | pre/code from scratch |
56| File diff | `file-diff` | custom diff renderer |
57| Tool output | `tool-result` | raw terminal block |
58| Tool permission card | `tool-approval` | alert dialog |
59| Approval or HITL question | `approval-card` | custom form |
60| Inline citations | `citations` | plain numbered links |
61| Generated image canvas | `image-generation` | image card from scratch |
62| Liquid popover | `popover` | `popover-morph` |
63| Corner morph popover | `popover-morph` | `popover` |
64| Dropdown select | `select` | `select-morph`, `combobox` |
65| Select that grows into panel | `select-morph` | `select` |
66| Searchable select | `combobox` | `select` |
67| Cmd+K palette | `command-palette` | `combobox` |
68| Right-click or long-press menu | `context-menu` | `bloom-menu` |
69| Button that blooms into a menu | `bloom-menu` | `context-menu` |
70| Press button | `button-base` | custom `motion.button` |
71| Loading/success/error button | `button-stateful` | spinner button |
72| Magnetic button | `button-magnetic` | custom pointer tracking |
73| Hold to confirm | `hold-action-button` | `button-base` |
74| Slide to confirm | `slide-action-button` | `swipeable-list` |
75| Hover CTA with expanding arrow | `expanding-arrow-button` | `button-base` |
76| Spinner, dots, bars loader | `loader` | `thinking-shimmer` |
77| Agent thinking status | `thinking-shimmer` | `loader`, `text-shimmer` |
78| Cycling reasoning phrases | `reasoning-text` | `text-cascade` |
79| Timed agent progress glyph | `agent-progress` | `loader` |
80| Shimmer headline text | `text-shimmer` | `thinking-shimmer` |
81| Word or letter reveal | `text-reveal` | `text-cascade` |
82| Chromatic cycling word | `chromatic-text-reveal` | `text-shimmer` |
83| Slot-machine letters | `text-cascade` | `text-scramble` |
84| Scramble resolving text | `text-scramble` | `text-cascade` |
85| Rolling digits | `number-ticker` | `animated-number` |
86| Count-up on view | `animated-number` | `number-ticker` |
87| Tick-dot slider | `range-slider` | other `range-slider-*` |
88| Liquid fill slider | `range-slider-fluid` | `range-slider` |
89| Equalizer slider | `range-slider-wave` | `range-slider` |
90| Tilting value bubble slider | `range-slider-bubble` | `range-slider` |
91| Ruler slider | `range-slider-ruler` | `range-slider` |
92| iOS wheel picker | `wheel-picker` | `select` |
93| macOS dock | `dock` | `expandable-action-bar` |
94| Icon actions with labels | `expandable-action-bar` | `dock` |
95| Overflow action rail | `overflow-actions` | `expandable-action-bar` |
96| Icon tabs with active label | `expandable-tabs` | `tabs` |
97| Morphing tab content room | `morphing-tabs` | `tabs` |
98| Pill or underline tabs | `tabs` | `expandable-tabs` |
99| Hover gliding background | `shared-layout-bg` | `tabs` |
100| Preview ticks or rail | `preview-rail` | `bounce-sidebar` |
101| Dynamic Island | `dynamic-island` | `notification-stack` |
102| Swipe row actions | `swipeable-list` | `slide-action-button` |
103| Pull to refresh | `pull-to-refresh` | custom touch math |
104| Basic upload queue | `file-upload` | `attachment-upload` |
105| Mixed file, audio, image attachments | `attachment-upload` | `file-upload` |
106| OTP or PIN boxes | `otp-input` | `input` |
107| Sign-up form | `signup-form` | manual form assembly |
108| Theme wipe | `theme-toggle` | class toggle only |
109| Shader background | `shader-background` | custom canvas |
110| Cylinder carousel | `cylinder-carousel` | `marquee` |
111| Logo or text marquee | `marquee` | `cylinder-carousel` |
112| Data table | `table` | HTML table from scratch |
113| Editable table | `table-editable` | `table` |
114| Async table | `table-async` | `table` |
115| Tournament bracket | `knockout-bracket` | `knockout-wheel` |
116| Radial tournament wheel | `knockout-wheel` | `knockout-bracket` |
117| 404 page | `not-found-glitch` | custom 404 |
118| Project folder card | `project-folder` | folder card from scratch |
119| Token or chain swap | `swap` | custom swap form |
120| Weekly availability editor | `availability-scheduler` | custom calendar grid |
121| Wallet overview card | `wallet-card` | custom wallet card |
122| Prediction market ticket | `prediction-market` | custom trade ticket |
123| Feedback popup | `feedback-widget` | `animated-toast-stack` |
124| Infinite masonry grid | `infinite-masonry` | CSS columns |
125| Accordion | `bouncy-accordion` | custom accordion |
126| 3D tilt card | `tilt-card` | custom glare math |
127| Tooltip | `tooltip` | `popover` |
128| Switch, checkbox, radio, input | `switch`, `checkbox`, `radio`, `input` | restyled native controls |
129
130## Composition rules
131
132- Prefer installed beUI source over custom one-off motion widgets.
133- Import named exports from the files shadcn adds.
134- Use `className` for layout and small styling changes. Do not fork internals unless the user asks.
135- Keep helpers installed by the registry, such as `@/lib/ease`, `@/lib/utils`, and hooks.
136- If adding new motion around beUI components, use `useReducedMotion()` from `motion/react`.
137- Gate decorative hover effects like magnetic pull and tilt behind `useHoverCapable()`.
138- Animate `transform` and `opacity`; avoid layout-property animation.
139
140## In this repo
141
142When 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.
starc007