Beamline

Beamline UI: React UI components and complete screens for apps built with coding agents. The code is copied into your repo; your app never depends on our servers. Build your own style from any look; tokens, fonts, radii, motion; not only colours. 200+ components and 50+ complete screens. $49 launch price; one payment; your whole team, no seats. Lifetime updates: every new version of the complete system, for as long as we publish it, and every version you received stays yours. React 19, TypeScript, Tailwind v4, Radix. Free MIT sample, commercial use included. Made by Danylo Pravda in Kyiv, Ukraine.

This repository is Beamline's free MIT sample: the settings screen and the parts it uses as editable React source, with a starter app that runs them. Commercial use is included. The Complete System has its own licence; the counts and price above describe that complete product.

Beamline installs editable source in src/ui/beamline or compiled archives in your app's own .beamline/packages/. Commit these files with your app. Your app runs without calls to Beamline servers; the MCP server helps your coding agent discover and install the parts.

Public sample proof

These checks run in public on every change and weekly; rerun them yourself with npm ci --prefix tests/public-proof and the proof commands, with no account or secrets. Safari on macOS is a normal check; iOS Simulator is not yet qualified and runs only on demand because its route interaction is unreliable.

• Complete System release: 0.2.0-rc.33, 11 October 2026 (changelog)
• Free-sample source: published 9 October 2026. This README update does not refresh that source or assign it the Complete System version.
• Made by Danylo Pravda in Kyiv, Ukraine
• Install with your agent (connect) or with the shadcn CLI: npx shadcn@latest registry add @beamline=https://beamline.io/registry/{name}.json, then npx shadcn@latest add @beamline/segmented-control
• Compiled packages inside their own UIRoot can sit alongside shadcn/ui without changing the tested host controls. This repository contains editable source: it needs Tailwind v4 and shares its global theme (source-theme setup). Your app supplies the backend through props and handlers.
• How it's tested · Pricing · Licence

Run it

git clone https://github.com/dprvda/beamline.git
cd beamline
npm install
npm run dev

It opens the settings screen in the Prism look, dark, on demo data that saves to your browser. React 19, Vite, Tailwind v4.

What is in the sample

part	what it is for
Settings	the whole settings area: profile, workspace, members, billing, API keys, one draft and a real save handler
Button	the action control: five weights and a brand fill, three sizes and a 44 px touch size
Input	a text field with its label, help and error wired for assistive tech
Label	the label tied to a control, with a required marker screen readers announce
Select	one choice from a short known list
Combobox	one value from a long list found by typing (time zones, countries, customers)
Tag input	short free-form values as tags; a pasted list adds them all
Switch	a setting that applies at once
Segmented control	two to five views or ranges of the same content
Radio cards	one choice among rich options, as cards
Hold to confirm	a costly action confirmed by holding, not clicking
Copy button	copies a value and confirms in place
Dialog	a focused task over the page, focus trapped and returned
Alert dialog	a blocking confirmation that starts on the safe choice
Bottom sheet	a phone panel that follows the finger
Dropdown menu	actions behind a trigger, with shortcuts, checks and submenus
Toast	results of an action, stacked at an edge, with undo
Alert	a message that stays until it is dealt with
Badge	a short status, category or count
Avatar	a person or account in a small space
Item	the generic list row
Table	a styled HTML table for small static data
Tabs	switches between panels of one object
Spinner	spins while work runs, closes into a check or a cross
Usage meter	an allowance and what fills it
UI root	makes a region of any app a Beamline root: theme, brand, direction

Every part is live, with every example, in the component library.

How it is built

• Every part has the same API. variant, size and tone; value, defaultValue and onValueChange for anything stateful; className lands on the root and wins. Use one and you can use any other.
• One brand colour themes everything. Set brand on UIRoot and the accent, hover, focus ring, selection and the text on brand fills all follow, keeping 4.5:1 contrast. Nine looks change type, surfaces and motion at once (theming guide).
• Dark first, keyboard first. Designed dark at desktop width first; every part has its keyboard model and visible focus.
• Honest data. A missing value draws as unmeasured, never as zero, and colour is never the only signal.

Use it with your coding agent

The complete system reaches your agent through Beamline's MCP server, https://mcp.beamline.io/mcp. Sign in with Google, GitHub or an e-mail code: the free sample opens at once.

claude mcp add --transport http --scope user beamline https://mcp.beamline.io/mcp   # Claude Code
codex mcp add beamline --url https://mcp.beamline.io/mcp                             # Codex

This repository's .mcp.json and .cursor/mcp.json already name the server, so Claude Code and Cursor offer it when you open the folder. Every agent's steps: beamline.io/connect.

Learn more

• Docs: install, customise, connect your data, conventions, design language (also on GitBook)
• Guides: give your agent a component system, build a trading terminal, an AI agent interface, an analytics dashboard, a settings page, sign-in, a voice agent, a data grid
• How Beamline compares with shadcn/ui, Untitled UI and MUI
• Changelog

Licence

The code in this repository is MIT (LICENSE); the packages and fonts it uses are listed in NOTICE.md. The Complete System is $49 launch price: one payment, lifetime updates to the purchased system, one licence for your whole team. Separate add-on packs may be sold separately; terms apply. The free sample in this repository remains MIT, including commercial use. Made by Danylo Pravda in Kyiv, Ukraine. Questions: [email protected].