55 components. Copy, paste, ship.
npx shadcn@latest add https://uibeats.com/r/border-beam.jsonThe library
Everything below is the real component, running. Drag the deck, scratch the card, press the button.
Blocks
Install a block and it brings every component it is built from with it. One command, a finished section, and a file you own.
Copy, paste, own
Nothing to import from node_modules. The CLI writes the source into your repo, and from then on it is yours.
Run one command. The CLI installs the packages it needs.
The file lands in your repo. At components/ui/border-beam.tsx, in your next diff.
Change anything. No wrapper API, no version to pin.
npx shadcn@latest add https://uibeats.com/r/border-beam.jsonimport { BorderBeam } from "@/components/ui/border-beam";
<BorderBeam>
<div className="p-6">
<h3 className="text-sm font-semibold">Pro plan</h3>
</div>
</BorderBeam>That is the whole API. Read the props
Built for how you build
Add the MCP server once. Claude Code, Cursor and Windsurf can then search the components, read the real props and install one without opening this site.
claude mcp add uibeats -- npx -y @uibeats/mcpDrag a control, watch it change, copy the snippet. It carries only what you changed. Motion Studio goes further: shape the easing curve or tune the spring, then take the transition.
Install it, read it, change it. If it does not fit, delete it. It is only a file, and there are 55 to pick from.