Beui

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

1. Discover current components with the public MCP's list_components or search_components when connected. Otherwise, fetch the live registry:

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

2. For CLI installation, pick the closest install slug from items[].name in 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.
3. Inspect the selected component with MCP get_component, or inspect an installable item through the CLI:

npx shadcn@latest view @beui/<slug>

4. 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># orpnpm dlx shadcn@latest add @beui/<slug># orbunx --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. 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

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.

Chart components (heat-calendar, returns-calendar, price-target-fan) live under /charts in the docs. Their @beui install slugs are unchanged.

Compose charts from their root and exported parts. HeatCalendar provides HeatCalendarGrid, HeatCalendarLegend, and HeatCalendarTooltip; ReturnsCalendar provides ReturnsCalendarGrid and ReturnsCalendarTooltip. Put each calendar tooltip inside its grid. Both accept selection, defaultSelection, and onSelectionChange.

PriceTargetFan provides Header, Plot, Svg, Axes, History, Targets, Now, Cursor, and Tooltip parts (prefix each with PriceTargetFan). Put SVG parts inside Svg and put Tooltip beside Svg inside Plot. Pass current, targets, and an optional chronological history of { date: ISOString, price }; omitted history renders no historical series. Use active, defaultActive, and onActiveChange to control the readout. Each chart exports a use... hook for custom descendant content; tooltip children may be a render function. Sample data belongs in the consuming app, not the chart implementation. HeatCalendar.endDate uses the UTC calendar date.