Beamline UI: free sample

React components built for AI coding agents. Beamline gives Claude Code, Codex, Cursor or any MCP client a designed part for every job, tells the agent what each one is for and what to use instead, and installs only what a screen needs into your repo. The app your agent builds looks designed, because every part in it was.

This repository is Beamline's free sample: 26 components and a complete settings screen as editable React source, under MIT, with a starter app that runs them. The complete system (190 parts, including tables, charts, dashboards, AI agent workspaces, voice and trading screens) is at beamline.io.

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
Billing toggle	monthly or yearly, saying what the choice saves
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 Beamline system is sold at beamline.io: one payment, a year of updates, one licence for your whole team. Made by Danylo Pravda in Kyiv, Ukraine. Questions: [email protected].