Beamline UI

Polished, responsive React components and complete screens, with editable code in your app. Built for developers and coding agents.

Live library · Install · Docs · GitBook

Campaign dashboard from the Complete System, as seen in the homepage demo.

Start with a working screen. This repository is the free MIT sample: editable Settings code, the components it uses, and a runnable React app. Commercial use is included.

The Complete System has 200+ components and 50+ complete screens for SaaS, dashboards, trading, AI and voice interfaces. It has a separate commercial licence. Your app supplies its data, authentication, model and other backend services.

Nine authored looks include Prism, with its cut-glass surfaces and focused edge light. Fluid morphs, micro-interactions, skeletons and loaders are designed with the rest of the system. Make it yours with custom fonts, colours, corners, density and motion.

Run the sample

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

React 19, TypeScript, Vite and Tailwind v4. Demo changes save in your browser; no account or API key is needed.

Or add the current published Settings source to an existing React app with the shadcn CLI:

npx shadcn@latest add https://beamline.io/registry/settings.json

Follow the installer's local runtime, look and stylesheet instructions. Full installation guide.

One screen, different rooms

The Settings demo adapts its navigation and fields for a phone. Light and dark themes use the same components.

Light theme — the same screen and data.

Phone layout — fields remain usable.

Screenshots show the Settings example on demo data. This checkout's editable source snapshot was published on 9 October 2026; the live installer and its public checks use the current hosted sample.

What you can build with the complete system

These examples are part of the paid Complete System, beyond this repository's free sample. Open each image to try its live demo.

AI workspace. Threads, reasoning, sources and approval controls. Connect your own model, storage and authorized actions. AI interface guide.

Trading terminal. Chart, market list, order book and order entry in one screen. The pictured prices and orders are demo data. Trading UI guide.

Explore dashboards, forms, tables, charts, voice and more →

Make it yours

• Local code. Choose editable source or compiled archives stored with your app. Installed UI does not call Beamline servers at runtime.
• Your style. Start from a look, then adjust tokens, fonts, radii, density and motion. Keep custom style files in your app. Customization.
• One component vocabulary. Shared variants, sizes, tones and controlled/uncontrolled state. Component metadata documents the actual props.
• Optional agent help. Claude Code, Codex, Cursor and other clients can discover and install the same parts. Connect your agent.
• Your application logic. Data and actions pass through props and callbacks; permissions and persistence remain in your app.

The sample includes Settings and the fields, choices, tables, dialogs, navigation, feedback and appearance controls it uses. Browse the library for live examples and usage.

Public checks you can inspect

The badge links to the actual workflow result. It installs the current public Settings source into fresh Vite and Next.js apps, typechecks and builds them, then exercises saving, reload, navigation, dialogs, focus and layout.

Chromium, Firefox, WebKit and Safari on macOS are normal jobs. Phone sizes are browser emulation; a physical iPhone is not covered. The separate iOS Simulator workflow remains on demand and is not yet qualified.

Rerun the checks · Workflow and retained results · Dated product checks and limits

Documentation

• Installation · Customization · Upgrades
• Connect your data · Guides
• GitBook docs · Comparisons · Changelog
• Current pricing · Referral credit in your account

Licence

The code in this repository is MIT, including commercial use: LICENSE. Third-party packages and fonts are listed in NOTICE.md.

The Complete System gives one person Beamline account, library, MCP, install and update access. Teammates, contractors and clients may work with the code installed in that end product. They need their own licence for Beamline access or to take paid parts into other apps. Redistribution of paid parts as a kit, theme, template or starter is restricted. Lifetime updates cover new versions of the purchased system for as long as it is published; versions already received stay yours. Current licence and terms govern the paid product.

Made by Danylo Pravda in Kyiv, Ukraine. hello@beamline.io.