# 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](https://beamline.io/components/).
- 9 looks that change type, surfaces and motion across every part at once, and one brand colour the rest derives
  from ([Customise](https://beamline.io/docs/customize)).
- 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](https://beamline.io/connect)).

## 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](https://beamline.io/docs/conventions)).
- **Dark first.** Dark is the default and the primary target, designed at desktop width first; light and phone widths
  follow ([Design language](https://beamline.io/docs/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](https://beamline.io/changelog) says what each release changed, and [Known limitations](https://beamline.io/docs/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](https://beamline.io/licence)). The free sample costs nothing. Card payments go
through Paddle, the merchant of record; crypto through CoinGate.

## Contact

Write to [hello@beamline.io](mailto:hello@beamline.io). We answer within two days.