beUI is a React and Next.js component library whose animated interface components come with previews, examples, source code, and shadcn installation commands. Developers copy the components into their own applications and keep the code there. Catalogue add-ons help coding agents find and use existing beUI components.
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.
npx skills add starc007/ui-components --skill beuigit clone --depth 1 https://github.com/starc007/ui-componentsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/starc007/ui-components/beui)<a href="https://agentmods.dev/skills/starc007/ui-components/beui"><img src="https://agentmods.dev/badge/skills/starc007/ui-components/beui/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/starc007/ui-components/beui"><img src="https://agentmods.dev/badge/skills/starc007/ui-components/beui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
- Socket pass
- Snyk warn
SkillSpector: 2 findings, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium MCP Rug Pull · line 22 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 28 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00081 | $0.02412 |
| Opus 5.5 | $0.00032 | $0.00965 |
| Sonnet 5.5 | $0.00016 | $0.00482 |
| Haiku 4.5 | $0.00008 | $0.00241 |
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 28d 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 Copies of this mod
1 near-identical copy found in the catalogue:
- beui — 100% identical, 28 lines differ
How it starts
The opening of the file, as written. The whole thing — 157 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 its public MCP or the @beui shadcn registry.
See the AI agents guide for current connection instructions and endpoints.
The public MCP at https://mcp.beui.dev/mcp needs no license key or Pro authentication.
For licensed components, use the separate beui-pro skill and Pro connection.
Workflow
- Discover current components with the public MCP's
list_componentsorsearch_componentswhen connected. Otherwise, fetch the live registry:
curl -fsS https://beui.dev/r/registry.json
- For CLI installation, pick the closest install slug from
items[].namein the live registry. Public MCP catalog slugs can name documentation pages with multiple installable variants. Do not assume every page slug is an install slug. - Inspect the selected component with MCP
get_component, or inspect an installable item through the CLI:
npx shadcn@latest view @beui/<slug>
- Install the complete files returned by MCP using the project's paths and aliases, then install the listed package dependencies. Preserve existing helpers and local modifications. Alternatively, install a verified registry slug 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
beuiruntime package. Validate any CLI command returned by MCP against the live install slugs before running it.
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-* |
| Inline label slider | range-slider-inline |
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 |
| Activity heatmap, contribution graph | heat-calendar |
custom grid |
| Monthly returns grid | returns-calendar |
heat-calendar |
| Analyst price target chart, forecast fan | price-target-fan |
custom svg chart |
| 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 |
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.
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.
- 28d ago Changed · +4 lines · +3 tokens per session 63fc9de2fa6b
- 1mo ago Changed · +9 lines e04f5244e691
- 1mo ago Changed · +1 lines ff0c2b9f1015
- 1mo ago First seen · 143 lines · 78 tokens per session scan A c1737e266b18
beui is a skill published in the GitHub repository starc007/ui-components (1,807 stars, last pushed yesterday), licensed MIT. It adds 81 tokens to every session and 2,412 once invoked, about $0.0003 per session on Opus 5.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.
Other skills, from other repositories
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.
tamagui-upgrade-v3
Migrate an app from Tamagui v2 (or v1) to v3. Use when upgrading Tamagui versions, removing $ token prefixes, converting hoverStyle/pressStyle/media/theme/platform condition objects to flat values, running the flat-values codemod, or fixing v3 breaking changes. Triggers: "upgrade tamagui", "migrate to v3", "flat…
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.
tamagui
Universal React UI framework for web and native with flat conditional values. Use when building cross-platform apps with Tamagui, writing styled components, or applying tokens, themes, animations, and media queries.
tamagui-v6-config
Tamagui v6 theme system: the light/dark/accent/brand/inverse/level/active theme family, the background-active one-off key, and recipe-tree authoring with createV6Config. Use when choosing a theme for a surface, building a selected/emphasis state, or authoring a custom v6 colors pack.