About Beamline

Beamline is a React component system made for AI coding agents: 190 components and screens that Claude Code, Codex, Cursor or any MCP client install into your app's own repo. It is made and sold by Danylo Pravda in Kyiv, Ukraine.

Why it exists

A coding agent can write a working app in an afternoon, and most of those apps look alike: a text input for every value, a dropdown for every choice, a chart library's default colours. Beamline gives the agent a designed part for each job (a date range picker, an order book, an approval card, a streaming answer) and tells it, part by part, what each one is for and what to use instead. The app looks designed because every part in it was.

What is in it

• 176 components and 14 whole screens in 15 groups: forms and settings, tables, charts, dashboards, AI agent workspaces, voice and trading. Every one is live in the component library.
• 9 looks that change type, surfaces and motion across every part at once, and one brand colour the rest derives from (Customise).
• A hosted MCP server, https://mcp.beamline.io/mcp, through which an agent reads what each part is for, installs only what a screen needs, as a ready-built package or as plain React source, and checks the result (Connect your agent).

How it is built

• Every element exists once. When a part already covers a job, it gets a variant or a prop, never a twin.
• Every part has the same API. variant, size and tone; value, defaultValue and onValueChange for anything stateful; className lands on the root and wins. An agent that has used one part can use any other (Conventions).
• Dark first. Dark is the default and the primary target, designed at desktop width first; light and phone widths follow (Design language).
• Honest data. A missing value draws as unmeasured (hatched), never as zero, and colour is never the only signal.
• Its own code. Every part is Beamline's code, written from its spec. Open-source work it builds on keeps its attribution in the notices that ship with it.

How it is checked

Every route of the component library opens in a real browser with scripted interactions, and the run keeps its screenshots. A speed bench renders every example frame by frame at 120 Hz, so a change that slows a part down, alters how it looks or how it moves shows up as a number before it ships. Text, edges and focus rings are measured for WCAG contrast in every look. A fresh Next.js (App Router) app and a Vite app install the release and build. The changelog says what each release changed, and Known limitations says what has not been checked.

Buying it

One payment of $49, no subscription: a year of updates, and every version you received stays yours. One licence covers your whole team and your clients' apps (Licence). The free sample costs nothing. Card payments go through Paddle, the merchant of record; crypto through CoinGate.

Contact

Write to hello@beamline.io. We answer within two days.