beui

A guide for selecting animated React interface components from the beUI registry and adding them to a project. React is a JavaScript library for building web interfaces, and the registry provides ready-made component source files.

In plain words
What is it for?
Use it when adding animated toasts, sidebars, drawers, bottom sheets, loaders, chat elements, and other beUI components to a React project.
Why use it?
It helps match a requested interface element to the correct component and avoids choosing similar but unsuitable components. The live registry is treated as the current source of available options.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/starc007/ui-components/beui
Any agent
npx skills add starc007/ui-components --skill beui
Clone the repo
git clone --depth 1 https://github.com/starc007/ui-components

Made for: Claude Code, Codex.

Per session 78 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,901 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00078 $0.01901
Opus 5 $0.00039 $0.00950
Sonnet 5 $0.00016 $0.00380
Haiku 4.5 $0.00008 $0.00190

Measured 2d ago against content hash c1737e266b18, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

beui scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -fsS https://beui.dev/r/registry.json
Origin

Copies of this mod

1 near-identical copy found in the catalogue:

  • beui — 100% identical, 0 lines differ
skills/beui/SKILL.md · 143 lines

How it starts

The opening of the file, as written. The whole thing — 143 lines — stays where its author put it; the contents beside it link to each section on GitHub.

beUI

Use beUI as copy-paste source through the @beui shadcn registry.

Workflow

  1. Fetch the live registry before choosing a component:
curl -fsS https://beui.dev/r/registry.json
  1. Pick the closest install slug from items[].name.
  2. Inspect before installing:
npx shadcn@latest view @beui/<slug>
  1. 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>
  1. 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

Read the full file on GitHub · 143 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 143 lines · 78 tokens per session scan A c1737e266b18

Subscribe to this mod's changes

beui is a skill published in the GitHub repository starc007/ui-components (1,355 stars, last pushed 3d ago), licensed MIT. It adds 78 tokens to every session and 1,901 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

tamagui

Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with styled(), configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/"…

tamagui/tamagui · 90 tokens

emil-design-eng

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

persianlabs/ui · 35 tokens

forge

Forge design system for React. Use when writing any React UI in this project, when picking which component to use, when theming, when creating block templates, or when reviewing UI code for accessibility and anti-patterns. Covers components, tokens, theming, motion, patterns, a11y, and anti-patterns.

Webba-Creative-Technologies/forge · 67 tokens

gradio-themes

Build and customise Gradio themes. Use when creating, editing, or publishing Python-based Gradio themes that control colours, typography, spacing, shadows, and dark mode.

gradio-app/gradio · 39 tokens

magic-ui

Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.

magicuidesign/magicui · 56 tokens

claude-design

Design one-off HTML artifacts (landing, deck, prototype).

mateaix/mateclaw · 16 tokens