# Beamline UI: polished, editable react components and screens Beamline UI: polished, editable React components and complete screens for custom applications. 200+ components and 50+ complete screens. Responsive interfaces that feel fast, with fluid morphs, precise micro-interactions, thoughtfully designed loading states and optional sound. ## Try it free [Start with the 40 free components](https://beamline.io/components/start): one install command (or your coding agent) puts their MIT source in your app, to build any screen with. No account or card is needed for this public installation. Keep and edit the code; your app supplies its data and storage. [Get Beamline](https://beamline.io/checkout?pack=complete) for the complete system: $49 launch price, one payment, no subscription, lifetime updates, one licence for one person. ## Animations, micro-interactions, sound and responsive layouts Responsive interfaces that feel fast, with fluid morphs, precise micro-interactions, thoughtfully designed loading states and optional sound. ### Fluid motion and morphs Selections glide, cards expand and values roll, with movement designed for each interaction. Try it on the homepage. Switch the range and the revenue figure rolls digit by digit, its change turns over and the trend redraws. Dialogs open from their trigger and selected surfaces travel between choices. Each look brings its own motion character, from Prism's quick, rigid movement to softer, more fluid styles. Tune the pace for the whole app from one setting. [Motion foundation](https://beamline.io/components/foundations/motion) · [Explore the morphs](https://beamline.io/components/foundations/morph) · [Expandable card](https://beamline.io/components/expandable-card) · [Motion settings](https://beamline.io/docs/customize#motion-and-effects) ### Micro-interactions in the controls Hover, press, focus, loading, copied, success and error states belong to the components themselves. Try it on the homepage. Press Save, copy the free sample's install command, then delete the draft and undo it. Buttons acknowledge a press, loaders turn into a check or cross, and skeletons hold the shape of content as it arrives. Copy actions confirm success; destructive actions ask in place and offer undo. Bring these finished interactions straight into your app. [Button states](https://beamline.io/components/button) · [Copy feedback](https://beamline.io/components/copy-button) · [Confirm morph](https://beamline.io/components/confirm-morph) · [Skeleton loading](https://beamline.io/components/skeleton) · [Loaders and results](https://beamline.io/components/spinner) ### A real interface sound system Synthesized cues for tap, select, destructive actions, toggles, opening, closing, ticks, success and error. Try it on the homepage. Sound starts off. Turn it on, then press a pad to hear its cue; every pad also answers visibly. Give everyday actions a distinct sound: a tap, a toggle, a completed task. Enable the cues that suit your app, set their volume and let people mute them. Every action also responds visually. [Listen to the sound kit](https://beamline.io/components/sound) · [Sound API and setup](https://beamline.io/docs/customize#interface-sound-media-and-voice) ### Responsive layouts, desktop to phone Controls and complete screens adapt to their available room, with keyboard paths and visible focus states. Try it on the homepage. Switch to Phone and Plan, Seats and Status fold under each customer's name as the frame narrows. Tables fold supporting details beneath the main column, and screens rearrange as their space changes. Keyboard navigation, visible focus and focus return after closing a dialog keep people moving through the same workflows. [Table layouts](https://beamline.io/components/table) · [Settings screen](https://beamline.io/components/settings) Keep editable components in `src/ui/beamline`, compiled archives in `.beamline/packages/` and your custom style files in `src/styles/beamline`. Commit those files with the app. You own your end products and changes under the [licence](https://beamline.io/docs/licence); the paid packs cannot be resold or redistributed on their own. The free GitHub sample is MIT. - MCP server: https://mcp.beamline.io/mcp - Claude Code: `claude mcp add --transport http --scope user beamline https://mcp.beamline.io/mcp` - Codex: `codex mcp add beamline --url https://mcp.beamline.io/mcp` - Cursor: `npx --yes -p https://mcp.beamline.io/cli/latest.tgz beamline-connect --hosted https://mcp.beamline.io/mcp` - Claude: `https://mcp.beamline.io/mcp/signin` - Every agent's steps: [Connect your agent](https://beamline.io/connect.md) - Price: $49 launch price, one payment, no subscription, lifetime updates, one licence for one person. A free sample of 40 components costs nothing. - Made by [Danylo Pravda](https://beamline.io/about) in Kyiv, Ukraine. Contact: hello@beamline.io ## Facts - What it is: [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/) - Ownership: [Editable React, TypeScript and CSS source in your repo; build custom screens and change any component](https://beamline.io/docs/install) - Your design: [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize) - In it: [200+ components and 50+ complete screens](https://beamline.io/components/) - Price: [$49 launch price, plus VAT or sales tax where it applies; one payment; one person's access; collaborators can work with the installed code in that app. Lifetime updates: every new version of the complete system, for as long as we publish it, and every version you received stays yours.](https://beamline.io/pricing) - Stack: [React 19, TypeScript, Tailwind v4, Radix](https://beamline.io/docs/install) - Free sample: [Free MIT sample, commercial use included](https://github.com/dprvda/beamline) - Founder: [Made by Danylo Pravda in Kyiv, Ukraine](https://beamline.io/about) - Version: [0.2.0-rc.40, 23 October 2026; 40 versions since 3 October 2026](https://beamline.io/changelog) - Examples and looks: [650+ live examples, 9 starting looks, dark and light](https://beamline.io/components/) - Animations and micro-interactions: [Fluid morphs and carefully designed press, hover, focus, loading and result states; motion you can tune across the app](https://beamline.io/docs/customize#motion-and-effects) - Loading, designed: [Skeletons hold the shape of arriving content; loaders turn into success or error feedback when work finishes](https://beamline.io/components/skeleton) - Performance: [Install only the parts your app uses; component size and interaction performance are measured alongside the design](https://beamline.io/tested) - Interface sound: [SoundProvider and useSound: synthesized interaction cues, opt-in, volume and mute; off by default](https://beamline.io/components/sound) - Responsive layouts: [Controls and complete screens adapt from desktop to phone, with keyboard navigation and visible focus](https://beamline.io/tested) - Works with: Next.js (App Router) and Vite; compiled packages need no Tailwind, editable source uses Tailwind v4; any backend - Try with shadcn: [npx shadcn@latest add https://beamline.io/registry/settings.json — the free Settings sample, no account or key](https://beamline.io/docs/install) - Browsers: [Tested in Chromium, Firefox and WebKit](https://beamline.io/tested) - Promise: [If a part doesn't work as described, we will fix it or refund you](https://beamline.io/refunds) ## Pages - [Component library, every element live](https://beamline.io/components/) - [Connect your agent](https://beamline.io/connect) - [Docs](https://beamline.io/docs): install, customise, connect your data · [Guides](https://beamline.io/guides) · [Compare](https://beamline.io/compare) · [How it's tested](https://beamline.io/tested) · [Pricing](https://beamline.io/pricing) · [Changelog](https://beamline.io/changelog) · [About](https://beamline.io/about) · [Partner programme](https://beamline.io/referrals) - [Get Beamline](https://beamline.io/checkout?pack=complete) - [Terms](https://beamline.io/terms) · [Licence](https://beamline.io/licence) · [Privacy](https://beamline.io/privacy) · [Refunds](https://beamline.io/refunds) · [Contact](https://beamline.io/contact) ## What is inside - [Blocks](https://beamline.io/components/blocks) (54): Whole screens composed from the library's own parts. - [Trading](https://beamline.io/components/trading) (14): Order books, candles, depth, tickers, positions and order entry. - [Charts & data-vis](https://beamline.io/components/charts) (20): Line, bar, scatter, funnels, maps, plans, sankey, heatmaps, treemaps. - [AI & agents](https://beamline.io/components/ai) (22): Chat, reasoning, streaming, tool calls, approvals. - [Motion & effects](https://beamline.io/components/effects) (5): Light, goo, halftone and sound. - [Voice & audio](https://beamline.io/components/voice) (14): Orbs, waveforms, players and speech input. - [Dashboard](https://beamline.io/components/dashboard) (6): KPIs, metric tiles, trackers and app shells. - [Content & display](https://beamline.io/components/display) (24): Avatars, badges, media, code and text effects. - [Data & tables](https://beamline.io/components/data) (12): Rows, pivots, boards and calendars: sort, filter, sum up, compare, schedule. - [Actions](https://beamline.io/components/actions) (7): Buttons and one-press commands. - [Form controls](https://beamline.io/components/forms) (41): Everything a person types into, picks or drags. - [Overlays](https://beamline.io/components/overlays) (13): Dialogs, sheets, menus and floating layers. - [Feedback](https://beamline.io/components/feedback) (9): Status, progress, loading and empty states. - [Navigation](https://beamline.io/components/navigation) (10): Moving between places and steps. - [Layout](https://beamline.io/components/layout) (12): Surfaces and containers that arrange content. ## Questions ### Can I try it without an account? Yes. Choose Try it free: one command installs every free component's MIT source with Beamline or shadcn, without an account or card. The free sample is also on GitHub. Connecting an agent through our hosted MCP is optional and needs sign-in; buying opens the complete system. ### Does it work with my stack? Beamline works with React 19 and any backend: your data and actions reach the parts through props and handlers. We test Next.js App Router and Vite, with npm or pnpm. Compiled packages need no Tailwind; editable source and registry installs use Tailwind v4. Already use shadcn/ui? Try the free Settings screen first, or use compiled packages inside their own UIRoot to adopt one screen at a time. Your app supplies storage and permissions. ### Can my team work with the code? One purchase gives one person access to their Beamline account, the MCP server, installs, updates and the full library. Teammates, contractors and clients may use, edit, build and ship the code you install as part of that app, without a Beamline account. They need their own licence to use Beamline's MCP server or library, or to take Beamline parts into other apps. Commercial use is included; there is no subscription. ### Can I edit the source and build my own screens? Yes. Individual components and complete screens come as editable React, TypeScript and CSS source in src/ui/beamline. Compose your own layouts, change a component's behavior and style it for your product. You can also choose local compiled packages. You own your end products and changes under the licence; paid Beamline parts cannot be resold as a UI kit. The free sample on GitHub is MIT. Coding agents are optional. ### Can I use my own design system or my own style? Yes. Start from any look and change its public tokens: your own fonts, radii, roundness, spacing density, motion, and surface, text and chart colours. Use the local studio when your bundle includes it, or ask your agent to use the local style CLI. Your files live in src/styles/beamline; upgrades leave them alone. Use className, data-slot and data-state for individual parts, or edit their source directly. Component CSS is in @layer components, and your own parts can use the same role classes. A look changes type, icon weight, surfaces and the page without changing the size scale; fonts can change text wrapping. ### What if Beamline disappears? Lifetime updates, for as long as we publish them. Your installed app keeps running without our website or MCP server: Beamline makes no runtime calls to our servers. Keep the source and .beamline/ archives with your app. Versions you received remain licensed to you if we stop publishing; future downloads and updates may stop. Your own backend and other dependencies remain yours to maintain. ### What if a part doesn't work? Try the free sample first; it is the same system. If a part you bought doesn't work as described, tell us: we will fix it or refund you. ### How do I pay? By card or PayPal through Paddle, our reseller and Merchant of Record, which adds any VAT or sales tax for your country and sends your invoice; or in crypto (USDC, USDT, BTC, ETH, SOL and more) through NOWPayments. Your account gets access as soon as you have paid. Crypto checkout is for buyers outside the EU, EEA and UK; there, or when we can't tell your country, pay by card or PayPal. Changed your mind? Our voluntary 30-day refund holds until you first install a paid element or open its source. Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [200+ components and 50+ complete screens](https://beamline.io/components/).