# Beamline UI > 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. $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 the editable code, compiled archives and custom style files with your app. Your end products and changes are yours under the [licence](https://beamline.io/docs/licence.md); the paid packs cannot be resold or redistributed on their own. Received versions remain licensed to you if Beamline stops publishing. The free sample on GitHub is MIT. Install with the [local kit tools](https://beamline.io/docs/install.md), or let your agent use the optional hosted MCP server (https://mcp.beamline.io/mcp) to find and install parts. The agent reads the menu, chooses the right control for each field and checks the result. Build your style by hand in the local studio when the bundle includes it, or through the local `style` CLI (`create`, `set`, `parameter`, `export`, `add`). Public tokens cover fonts, radii, density, motion, surfaces, text and chart colours; install custom fonts explicitly. Your `src/styles/beamline` files survive upgrades. Per-part `className`, `data-slot` and `data-state` hooks support app CSS; component CSS sits in `@layer components`. Your own parts can use the same role classes, and editable source lets you change a component directly. A look changes type, icon weight, surfaces and the page without changing the size scale; fonts can change text wrapping. Beamline is also a shadcn registry: add it once (`npx shadcn@latest registry add @beamline=https://beamline.io/registry/{name}.json`), then `npx shadcn@latest add @beamline/`. Next to shadcn/ui or another library, use the compiled packages inside their own UIRoot: they need no Tailwind and leave the app's other controls as they are. Editable source and registry installs use Tailwind v4 and share the app's theme, so follow the source-theme steps in the install guide. It is the interface only: your backend reaches it through props and handlers. Every page below also answers in markdown: add `.md` to its address, or send `Accept: text/markdown`. ## 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) ## Start - [What Beamline is](https://beamline.io/index.md): the product, price and questions - [Connect your agent](https://beamline.io/connect.md): Claude Code, Codex, Cursor and any MCP client - [MCP server card](https://beamline.io/.well-known/mcp/server-card.json): the hosted server, its transport and sign-in - [Agent skill](https://beamline.io/.well-known/agent-skills/index.json): the beamline-ui skill for coding agents - [Free sample on GitHub](https://github.com/dprvda/beamline): 40 parts of the system as editable React source, MIT (commercial use included), with a starter app - [How it's tested](https://beamline.io/tested.md): contrast in every look, the 120 Hz speed bench, installs into Next.js and Vite, agent trials - [Pricing](https://beamline.io/pricing.md): one payment, lifetime updates, the fix-or-refund promise - [Full documentation of every part](https://beamline.io/llms-full.txt): one file, every component's use, spec and props - [Public catalog as JSON](https://beamline.io/components/catalog.json) ## Docs - [Start here](https://beamline.io/docs/start-here.md): Local code in your repo, your own style and no Beamline runtime dependency: source, package archives, rights, install options and the kit's contents. - [Install](https://beamline.io/docs/install.md): Install local editable source or compiled package archives into a React 19 app: commands, the one stylesheet, UIRoot and Tailwind v4 setup. - [Try it in 30 minutes](https://beamline.io/docs/try-in-30.md): Try Beamline on your app in 30 minutes: save and reload real settings, recover with Retry, check a phone layout, restyle the screen and add a new field. - [Customise](https://beamline.io/docs/customize.md): Build your own style from any look: local style files, public tokens, fonts, radii, density, motion, per-part CSS and direct source edits. - [Connect your data](https://beamline.io/docs/data-integration.md): How Beamline components take data and report actions: market data for trading, tables, streaming AI text and whole screens, your backend in charge. - [Upgrade](https://beamline.io/docs/upgrade.md): Moving between Beamline releases: migration notes per version, managed source upgrades that keep your edits, recovery and compiled packages. - [Known limitations](https://beamline.io/docs/limitations.md): What Beamline does not do or has not been checked to do: backends and services, environments, layouts and themes, particular parts, licences. - [Conventions](https://beamline.io/docs/conventions.md): The one API every Beamline component follows: files and imports, one props vocabulary (variant, size, tone, value), the rendering contract, styling. - [Design language](https://beamline.io/docs/design-language.md): The visual and motion rules behind every Beamline component: colour, type, density, radii, elevation, looks, focus, data states and motion. - [Full licence](https://beamline.io/docs/licence.md): The full text of the Beamline licence that ships with the product as LICENSE.md: what you and your team may and may not do, updates, warranty, liability, termination and law. - [Changelog](https://beamline.io/changelog.md): what changed in each release ([Atom](https://beamline.io/changelog.xml)) ## Knowledge - [Beamline UI knowledge](https://beamline.io/knowledge.md): Sourced answers about editable Beamline UI: custom React screens, installation, real data, styling, browser checks, pricing and licence. ## Guides - [Connect your backend](https://beamline.io/guides/connect-react-backend.md): Wire Beamline UI to REST, React Query, SWR, WebSocket or SSE. A tested data boundary for tables, charts and forms, with explicit loading, errors and saved state. - [A real settings-screen trial](https://beamline.io/guides/try-beamline-in-30-minutes.md): Try Beamline's free sample in your app: verify saving, refresh, failed-save recovery, phone and keyboard use, then change the style and add a field through the backend. - [AI agent interface](https://beamline.io/guides/ai-agent-interface.md): The parts of an AI agent or copilot UI in React and what each one is for: streamed answers, reasoning traces, tool calls, plans and approvals, citations, the composer, and the whole workspace screen. - [Agent setup, end to end](https://beamline.io/guides/coding-agent-component-system.md): How Claude Code, Codex or Cursor builds UI from Beamline over MCP, step by step: what the agent reads, what it installs, which files land in your repo and how it uses the screen library. - [Analytics dashboard](https://beamline.io/guides/react-analytics-dashboard.md): A SaaS analytics dashboard in React on your own metrics API: KPIs, revenue, channels, plan mix and uptime under one set of filters, with honest missing data, loading placeholders and a failed state. - [Data grid and CRM](https://beamline.io/guides/react-data-grid-crm.md): A virtualised React data grid for thousands of rows (sorting, filters, pinning, inline edit, range selection, footer totals, full keyboard) and a CRM pipeline screen built on it. - [Speed, measured](https://beamline.io/guides/react-performance-lessons.md): What measuring every example of 260+ React components frame by frame at 120 Hz found: per-instance layout reads, effects without dependencies, theme state, and the fixes with before and after numbers. - [Settings page](https://beamline.io/guides/react-settings-page.md): A complete settings area for a SaaS app in React: profile, workspace, members and roles, billing and seats, notifications and API keys, with one draft, a real save handler and safe destructive actions. - [Sign-in and sign-up](https://beamline.io/guides/react-sign-in-sign-up.md): A complete sign-in and sign-up flow in React on any auth service: passwords, e-mailed codes, magic links, passkeys and single sign-on, validation, a bot check slot and legal links, with your handlers in charge. - [Trading terminal](https://beamline.io/guides/react-trading-terminal.md): Build a crypto or stock trading screen in React with Beamline: an order book, candles, depth, order ticket and positions on your own market feed and order API, with what each part handles for you. - [Voice agent](https://beamline.io/guides/react-voice-agent-ui.md): A voice agent interface in React connected through your speech-provider adapter: a support panel, a call screen and a voice workspace on one session, the agent's orb, a live transcript, mute, typing and every microphone state. - [Your own React UI style](https://beamline.io/guides/theme-react-components-brand-colour.md): Build your own Beamline style from any look: local files, your fonts, public tokens, radii, density, motion and per-part CSS, by hand or with your agent. ## Connect each agent - [Claude Code](https://beamline.io/connect/claude-code.md): Connect Claude Code to find Beamline parts that live in your repo. Your app has no Beamline runtime dependency. 3 setup steps. - [Codex](https://beamline.io/connect/codex.md): Connect Codex to find Beamline parts that live in your repo. Your app has no Beamline runtime dependency. 3 setup steps. - [Cursor](https://beamline.io/connect/cursor.md): Connect Cursor to find Beamline parts that live in your repo. Your app has no Beamline runtime dependency. 3 setup steps. - [Claude](https://beamline.io/connect/claude.md): Connect Claude to find Beamline parts that live in your repo. Your app has no Beamline runtime dependency. 3 setup steps. - [VS Code](https://beamline.io/connect/vscode.md): Connect VS Code to find Beamline parts that live in your repo. Your app has no Beamline runtime dependency. 3 setup steps. - [Gemini CLI](https://beamline.io/connect/gemini.md): Connect Gemini CLI to find Beamline parts that live in your repo. Your app has no Beamline runtime dependency. 3 setup steps. - [Windsurf](https://beamline.io/connect/windsurf.md): Connect Windsurf to find Beamline parts that live in your repo. Your app has no Beamline runtime dependency. 3 setup steps. - [ChatGPT](https://beamline.io/connect/chatgpt.md): Connect ChatGPT to find Beamline parts that live in your repo. Your app has no Beamline runtime dependency. 3 setup steps. - [Any MCP client](https://beamline.io/connect/any.md): Connect any MCP client to find Beamline parts that live in your repo. Your app has no Beamline runtime dependency. 3 setup steps. ## Case studies - [Proofdesk case study](https://beamline.io/showcase/proofdesk.md): Proofdesk answers from a team’s own documents and declines what they can’t prove. Rebuilt on Beamline UI: text-contrast failures in dark 42 → 0, hand-built controls 93 → 3, and a new light theme. - [Scribeline case study](https://beamline.io/showcase/scribeline.md): Scribeline drafts a priced quote from a customer’s photos for the owner to approve. Rebuilt on Beamline UI: text-contrast failures 54 → 0, hand-built controls 98 → 17, and a second theme that follows the device. ## About - [How Beamline compares](https://beamline.io/compare.md): Beamline and shadcn/ui put editable files in your repo. Compare local code, your own style, finished screens, agent guidance, price and licence across React kits. - [Kobra and Beamline](https://beamline.io/compare/kobra-alternatives.md): Compare Beamline UI and Kobra: polished React UI, Prism and custom styles, motion, morphs, responsive app screens, Figma, agent tools and pricing. - [Mantine alternatives](https://beamline.io/compare/mantine-alternatives.md): Mantine has free React controls and hooks. Compare them with Beamline's 50+ coordinated screens, agent workflow and $49 launch price for one person's access. - [MUI alternatives](https://beamline.io/compare/mui-alternatives.md): Compare MUI with Beamline's local code, custom styles and finished screens: no Beamline runtime dependency, plus sourced prices, licences and data features. - [shadcn/ui alternatives](https://beamline.io/compare/shadcn-ui-alternatives.md): Beamline and shadcn/ui both put editable code in your repo. Compare custom styles, finished screens, agent guidance and the commercial versus MIT licences. - [Shadcnblocks alternatives](https://beamline.io/compare/shadcnblocks-alternatives.md): Compare Shadcnblocks' free blocks and paid templates with Beamline's 50+ coordinated app screens, agent workflow and $49 launch price for one person's access. - [Tailwind Plus alternatives](https://beamline.io/compare/tailwind-plus-alternatives.md): React alternatives after Tailwind Plus: compare local code, custom styles and finished screens. Installed Beamline UI needs no Beamline server at runtime. - [Untitled UI alternatives](https://beamline.io/compare/untitled-ui-alternatives.md): Compare Untitled UI React with Beamline's local files, custom styles, finished screens and one-person licence. Installed Beamline UI needs no Beamline server at runtime. - [Beamline UI pricing](https://beamline.io/pricing.md): What Beamline's $49 launch price buys: 50+ complete screens, working UI behaviour, an agent workflow, lifetime updates while published and one person's access. - [How Beamline UI is tested](https://beamline.io/tested.md): Public installation and browser results for editable Beamline UI source: Next.js, Vite, Chromium, Firefox, WebKit and Safari, plus contrast, keyboard and motion checks. - [About Beamline UI](https://beamline.io/about.md): A polished, customizable React design system for developers and coding agents. 200+ components and 50+ complete screens, fluid morphs, responsive layouts and editable source. Made in Kyiv. - [Share Beamline, earn 30% in cash](https://beamline.io/referrals.md): Share Beamline with a partner link and earn 30% of each new customer's first purchase, in cash, paid by Rekomi. ## Component library ### Blocks - [Trading terminal](https://beamline.io/components/trading-terminal.md): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account… - [Market screener](https://beamline.io/components/market-screener.md): The whole market at a glance and a way to narrow it down: a sector heatmap, today's top movers with the market's breadth, ready-made screens (gainers… - [AI agent workspace](https://beamline.io/components/agent-workspace.md): Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with… - [Portfolio overview](https://beamline.io/components/portfolio.md): What an account holds and how it is doing: the total that rolls as prices tick with today's change, value over time against a benchmark, allocation by… - [AI image studio](https://beamline.io/components/image-studio.md): Write a prompt, pick a shape, a style and how many, and watch the variations generate side by side; each one opens full screen and can be upscaled or… - [Model playground](https://beamline.io/components/model-playground.md): Try one prompt on up to three models side by side: pick each model with its price and speed in view, set the system prompt, temperature and length once… - [Artifact workbench](https://beamline.io/components/artifact-workbench.md): Where the things an assistant makes are checked before they leave: every document, piece of code, small app and data result from a conversation, each… - [Workflow builder](https://beamline.io/components/workflow-builder.md): Automation rules for a SaaS without code: a trigger, conditions built with the query builder that branch into Yes and No, actions and waits, drawn as a… - [Analytics dashboard](https://beamline.io/components/analytics-dashboard.md): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime… - [Sales dashboard](https://beamline.io/components/sales-dashboard.md): A sales leader's week in one screen: closed won against quota and pace, pipeline coverage and win rate, the quarter's run toward target with the forecast… - [Document review](https://beamline.io/components/document-review.md): A PDF going through review: the document in the viewer with every comment pinned to its place, the reviewers' threads beside it (open or resolved, one… - [Product analytics](https://beamline.io/components/product-analytics.md): How people use the product: a funnel whose steps are the selector, where the people lost at a step went (saved as a cohort in one action), retention by… - [Status dashboard](https://beamline.io/components/status-dashboard.md): An operations view of service health: the overall state in one line, every service with its status, uptime, latency now and 90 days of history, latency… - [CRM pipeline](https://beamline.io/components/crm.md): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a… - [Helpdesk inbox](https://beamline.io/components/helpdesk-inbox.md): A support team's inbox: views with counts, a virtualised ticket queue with search, priority filters and live SLA clocks, and the open ticket with its… - [Project board](https://beamline.io/components/project-board.md): A team's sprint as a board: the sprint's goal, points done and days left, filters by person and label, the work as cards in columns with work-in-progress… - [Team calendar](https://beamline.io/components/team-calendar.md): A team's schedule: the people and shared calendars to show (each its colour), a month to jump by, who is out this week, and the week, day or month of… - [Invoices](https://beamline.io/components/invoices.md): Accounts receivable in one screen: what is outstanding, overdue and paid, the invoices by status in a virtualised grid with bulk reminders, and each… - [Orders admin](https://beamline.io/components/orders-admin.md): A shop's order desk: today's orders and revenue, quick filters for what needs doing (to fulfil, unpaid, returns), a virtualised orders grid, and the… - [Contact profile](https://beamline.io/components/contact-profile.md): One customer on one page: who they are and how to reach them (fields edit in place), their lifecycle stage and owner, the deals they are in with what is… - [File manager](https://beamline.io/components/file-manager.md): Files and folders in one screen: the views (My files, Shared, Recent, Starred, Trash) with storage at the foot, a folder tree beside the files… - [Projects](https://beamline.io/components/projects.md): A team's projects: the portfolio by health (on track, at risk, off track) with progress, lead, team and due date, filtered and searched; a project opens… - [Report builder](https://beamline.io/components/report-builder.md): Build a chart from your metrics without code: choose metrics, how to group them over time, an optional breakdown, filters, the range and the chart, see… - [Voice agent](https://beamline.io/components/voice-agent.md): A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and… - [Admin users](https://beamline.io/components/admin-users.md): Your staff's view of every account: headline counts that follow the filters, a virtualised users table with search, status and plan filters and sorting… - [Billing & invoices](https://beamline.io/components/billing.md): The billing page of a subscription: the plan with its seats and renewal, cancel and resume in place, the card on file with a checked update form, metered… - [Onboarding checklist](https://beamline.io/components/onboarding-checklist.md): The first screen after sign-up: a welcome with how far set-up has come, a checklist of the few steps that make the product useful (each with why, how… - [Roles & permissions](https://beamline.io/components/roles-permissions.md): What each role may do, as one matrix: permissions grouped by area down the side, roles across the top with their head counts, a check per cell; a group's… - [Security](https://beamline.io/components/account-security.md): A person's account security on one page: how protected they are at a glance with the next step to take, password change with strength and rules, two-step… - [AI support chat](https://beamline.io/components/support-chat.md): The customer's side of AI support: an assistant that answers from your help centre with numbered citations, a thumbs up or down on every answer (a down… - [AI support console](https://beamline.io/components/support-console.md): The support team's side of AI support: a queue sorted by what is due first (who the assistant is still handling, who asked for a person, who waits), the… - [Conversation history](https://beamline.io/components/conversation-history.md): Past conversations with an assistant, ready to pick up again: the list by day with bookmarks and unsent drafts, a search through every message that… - [Agent runs monitor](https://beamline.io/components/agent-runs.md): Every run of your agents in one place: success rate, run time, tokens and spend; the last runs as a strip of status blocks; a live table where running… - [Social media scheduler](https://beamline.io/components/social-scheduler.md): Plan posts across your social accounts: a week calendar where every post sits at its time in its account's colour and moves by drag, a queue of what goes… - [Team chat](https://beamline.io/components/team-chat.md): A team's messages in one screen: channels and direct messages with unread counts and mentions, who is online, the conversation with reactions, receipts… - [Knowledge base manager](https://beamline.io/components/knowledge-base.md): What your assistant knows and whether it is fresh: sources with live sync status (syncing with progress, out of date, failed with the reason and Retry)… - [Meeting and call review](https://beamline.io/components/meeting-review.md): Everything a recorded call left behind on one screen: the recording with its transcript by speaker, an AI summary that streams in, action items with… - [Order history and fills](https://beamline.io/components/order-history.md): Every order the account placed and every fill it got, for a period: totals for volume, fees, fill rate and maker share; orders with their status and how… - [Integrations](https://beamline.io/components/integrations.md): A directory of the apps a product connects to: search and categories with counts, connected apps first with their state (Connected, Needs attention), a… - [Plan comparison](https://beamline.io/components/plan-comparison.md): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in… - [System pages](https://beamline.io/components/system-page.md): The four pages a product shows when the normal one cannot: page not found (search and the likely places), something broke (try again, an error id to… - [API keys & webhooks](https://beamline.io/components/api-keys.md): The developer page of a SaaS: API keys with environment, scopes, last use and expiry, created through a form whose secret is shown once (copy it before… - [Audit log](https://beamline.io/components/audit-log.md): Who did what, to what, when and from where, for a whole workspace: newest first and grouped by day, people with avatars and keys or systems with toned… - [Team & members](https://beamline.io/components/team-members.md): The people page of a workspace: seats used against the plan, members and pending invitations in one list with search and a role filter, role changes that… - [Notification preferences](https://beamline.io/components/notification-preferences.md): What reaches a person and where: events grouped by area down the side, channels (email, push, Slack, in-app) across the top, a switch per pair that saves… - [Workspace switcher](https://beamline.io/components/workspace-switcher.md): Moving between workspaces and making a new one: a switcher for the top of your sidebar (the current workspace's mark, name and plan; a searchable list… - [Step form](https://beamline.io/components/step-form.md): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the… - [Changelog feed](https://beamline.io/components/changelog-feed.md): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last… - [Page header](https://beamline.io/components/page-header.md): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More… - [Empty states](https://beamline.io/components/empty-states.md): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a… - [Settings](https://beamline.io/components/settings.md): Profile and workspace settings with one draft and a real save handler, on grouped panels: photo upload, time zone with the local time, appearance cards… - [Auth page](https://beamline.io/components/auth.md): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm… - [Sign in](https://beamline.io/components/sign-in.md): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in… - [Sign up form](https://beamline.io/components/signup-form.md): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your… ### Trading - [Price chart](https://beamline.io/components/price-chart.md): Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks. - [Market heatmap](https://beamline.io/components/market-heatmap.md): Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles. - [Order book](https://beamline.io/components/order-book.md): Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking. - [Options chain](https://beamline.io/components/options-chain.md): Calls and puts for one expiry around a centre column of strikes: bid, ask, implied volatility, delta, volume and open interest, the money shaded in, a… - [Depth chart](https://beamline.io/components/depth-chart.md): Cumulative bid and ask depth as stepped areas around the mid, with hover readout. - [Ticker tape](https://beamline.io/components/ticker-tape.md): A continuously scrolling row of symbols with price, change and mini trend; anyone can hold it: hover, keyboard focus or a tap. - [Watchlist](https://beamline.io/components/watchlist.md): A selectable, sortable list of markets with mini trends, prices, changes and stars. - [Trades tape](https://beamline.io/components/trades-tape.md): Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes. - [Order ticket](https://beamline.io/components/order-ticket.md): Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary. - [Swap form](https://beamline.io/components/swap-form.md): Exchange one token for another: type what you pay (or Max), pick each token from a searchable list with balances, and the form quotes what you receive… - [Positions table](https://beamline.io/components/positions-table.md): Open positions with live unrealised PnL, liquidation warnings and close actions. - [P&L calendar](https://beamline.io/components/pnl-calendar.md): A trader's month at a glance: every trading day's profit or loss in its cell, shaded deeper the bigger it was in the gain or loss colour and marked ▲ or… - [Price ticker](https://beamline.io/components/price-ticker.md): Symbol, last price with a directional flash, 24h change and stats. - [Funding countdown](https://beamline.io/components/funding-countdown.md): Perpetual funding rate with who pays, and a live countdown ring to the next funding. ### Charts & data-vis - [Sankey chart](https://beamline.io/components/sankey-chart.md): Flows between stages as bands whose width is the amount: sources to pages to outcomes, budgets to teams; hovering or focusing a node lights its flows and… - [Geo map](https://beamline.io/components/geo-map.md): Values by country as a choropleth on the system's own world outline (no map service): classes from a sequential or diverging ramp with a legend you can… - [Streamgraph](https://beamline.io/components/streamgraph.md): Stacked flows over time around a centre baseline, with silhouette, wiggle, expand (shares) and zero offsets: a legend that turns layers on and off, a… - [Ridgeline](https://beamline.io/components/ridgeline.md): Distributions per group as overlapping density ridges (response time by region, order size by plan): an overlap control, median and p95 readouts per row… - [Treemap](https://beamline.io/components/treemap.md): Nested rectangles sized by value (spend by team, then service), squarified so tiles stay close to square: labels that fit or hide, hover and focus… - [Gantt chart](https://beamline.io/components/gantt-chart.md): A plan as bars on a timeline: tasks grouped down the side, each bar from its start to its end with its progress, milestones as diamonds, arrows from each… - [Activity heatmap](https://beamline.io/components/activity-heatmap.md): A calendar of daily counts, one cell per day on a sequential ramp: weeks across, weekdays down, month and weekday labels, a legend scale, hatched days… - [Gauge](https://beamline.io/components/gauge.md): One value against a known range: a semicircle, a 270° dial or a full ring, filled or with a needle, coloured bands with their names (healthy, busy… - [Radial chart](https://beamline.io/components/radial-chart.md): Progress of a few measures toward their targets as concentric rings, full or half circle, with a centre readout and a list of each ring's value, target… - [Radar chart](https://beamline.io/components/radar-chart.md): A few series compared across the same five to eight dimensions as polygons on a polygon or circle grid; hover or arrow keys pick a dimension and read… - [Scatter chart](https://beamline.io/components/scatter-chart.md): Two measures of many items against each other, one point per item, or a bubble chart when a third measure sizes the points: groups by colour and shape… - [Area chart](https://beamline.io/components/area-chart.md): Amounts over time as filled areas: overlapping, stacked or as shares of 100%, five fills, two strokes, five curves, a range handle; gaps for missing… - [Composed chart](https://beamline.io/components/composed-chart.md): Different measures on one time axis: bars, lines and areas per series, a left and a right value axis with their own formats, and reference lines. - [Funnel chart](https://beamline.io/components/funnel-chart.md): People or deals moving through ordered steps, each step a bar narrowing from the first: the part lost between two steps stays beside the next as a fading… - [Waffle chart](https://beamline.io/components/waffle-chart.md): Units of a whole as a grid of cells by category (seats used of a plan, tickets by channel): a 10×10 grid by default, hatched cells for units whose… - [Slope chart](https://beamline.io/components/slope-chart.md): Change between two points in time per item, by value or by rank: labels on both sides that never collide, rising and falling told by the end marker (▲ ▼)… - [Line chart](https://beamline.io/components/line-chart.md): Values over time as lines: curves, point markers, dashed series for forecasts, reference lines for limits and targets, an optional zero baseline and a… - [Bar chart](https://beamline.io/components/bar-chart.md): Amounts by category as bars: columns or rows, grouped, stacked or as shares, reference lines, five looks (rounded, cells, trace, isometric, monospace), a… - [Pie chart](https://beamline.io/components/pie-chart.md): A few shares of a whole as a pie or donut, with spaced slices, percent labels, a centre readout and a list of every slice with value and share; hovering… - [Sparkline](https://beamline.io/components/sparkline.md): A compact trend beside its value: point along it or focus it and use ← → to read each point; nulls are gaps. TrendLine is the bare line. ### AI & agents - [Image generation](https://beamline.io/components/image-generation.md): The frame an AI image is generated into: a field of brand-hued pixels breathes with the progress while the model works, then the image arrives —… - [Flowchart](https://beamline.io/components/flowchart.md): A workflow as steps on a dotted canvas: a trigger, conditions that branch into paths side by side, actions and waits, read top to bottom; during a run… - [Run trace](https://beamline.io/components/run-trace.md): One agent run as a waterfall: every step (model calls, tools, retrieval, checks, sub-agents) nested under the step that started it, each a bar on a… - [Answer compare](https://beamline.io/components/answer-compare.md): Two answers to the same prompt side by side, and a person's verdict: A is better, a tie, B is better, or both are bad, with the reasons that decided it… - [Branch navigator](https://beamline.io/components/branch-navigator.md): The versions of an assistant conversation that forked when a message was edited or an answer regenerated: a “‹ 2 / 3 ›” switch on each message that has… - [Response](https://beamline.io/components/response.md): An assistant's answer as streamed markdown in the system's reading type: bursty tokens flow in at an even pace, each new word fades in through a short… - [Chat thread](https://beamline.io/components/chat-thread.md): People talking to people: messages grouped by person and day, reactions, delivery and read receipts that glide to the newest message read, who is typing… - [Model picker](https://beamline.io/components/model-picker.md): Choose the AI model for a request by what it can do and what it costs: a trigger with the model's name opens a searchable list grouped by provider, with… - [Task rows](https://beamline.io/components/task-rows.md): Background work an agent is doing, one row per task: status as a glyph and a word, what it produced, how long it has run or took, a progress bar while… - [Conversation](https://beamline.io/components/conversation.md): The scrolling column of a conversation: follows new content while you are at the bottom, stops when you scroll up to read, and offers a way back; shared… - [Context cards](https://beamline.io/components/context-cards.md): The knowledge an agent retrieved before it answered: one card per chunk with what it is about, the text it read with the search words marked, how… - [Prompt suggestions](https://beamline.io/components/prompt-suggestions.md): Ready-made prompts a person can start from or follow up with: chips, cards or a list; a picked one lifts off and flies into the composer as its text… - [Plan](https://beamline.io/components/plan.md): An agent's plan: numbered steps with live status, progress, and Approve / Edit / Reject when it needs sign-off; approving shows progress, and a refusal… - [Approval card](https://beamline.io/components/approval-card.md): The agent stops and asks before it acts: what it wants to do, exactly what that changes, any choices it needs, and Approve or Reject; both run your… - [Tool call](https://beamline.io/components/tool-call.md): One tool call in an agent's run: status, what it did and a short result on one quiet row that opens to the exact input and output; stops for permission… - [Recommendation card](https://beamline.io/components/recommendation-card.md): One suggestion from the agent that the person may take or leave: what it suggests, why, the expected effect and how sure it is (a meter and a word… - [Citations](https://beamline.io/components/citations.md): Inline numbered citations that preview their source on hover or focus, plus a numbered source list; streamed answers flow in at an even pace with the… - [Reasoning](https://beamline.io/components/reasoning.md): The agent's trace, fed by your stream: a shimmering label and the seconds so far while it works, then "Thought for N seconds"; steps that check off… - [Attachment](https://beamline.io/components/attachment.md): A file tile: preview or typed glyph with the type named, name, size, upload progress, error with retry, and a keyboard-reachable remove. - [Prompt bar](https://beamline.io/components/prompt-bar.md): The agent composer: a field that grows, @ to add a source, / for a command, a model picker, files and dictation, and one button that sends with progress… - [Selection actions](https://beamline.io/components/selection-actions.md): Select a passage and hand it to the agent: a bar over the selection with quick actions, your own instruction and More; while the agent works it says so… - [Message](https://beamline.io/components/message.md): One turn in a conversation with an agent: the person's words in a quiet bubble, the agent's answer on the page with its orb mark, trace, tool calls and… ### Motion & effects - [Light band](https://beamline.io/components/light-band.md): A band of split light in the dark behind a section, blue at one end and amber at the other with a bright core: Prism's light at a chosen place, a hero… - [Halftone Dots](https://beamline.io/components/halftone-dots.md): A picture rebuilt as a field of dots whose size follows brightness; a new picture morphs the dots, a click ripples through, the pointer pushes dots aside. - [Glow](https://beamline.io/components/glow.md): Ambient light around one element that says something is happening: an aurora under a working composer, or a ring of light round a live card. - [Liquid gooey](https://beamline.io/components/liquid-gooey.md): Liquid surfaces that merge like goo when they touch — split plus-menus, gooey switches, file chips. - [Sound](https://beamline.io/components/sound.md): Opt-in interface cues with scoped volume, graceful mute and bounded repetition; soft tactile gestures and restrained result tones. ### Voice & audio - [Orb](https://beamline.io/components/orb.md): The agent's presence: a thin ring of light around a lens in the brand's hue that holds still at rest, sends an arc round while thinking and widens with… - [Call grid](https://beamline.io/components/call-grid.md): The people on a video call, laid out for the room they are given: tiles as large as the space allows at the camera's shape, or the person talking (or a… - [Bar visualizer](https://beamline.io/components/bar-visualizer.md): A row of bars that says what a voice agent is doing: a sweep while connecting, the person's voice while listening, a slow breath while thinking, the… - [Matrix](https://beamline.io/components/matrix.md): A dot-matrix display: animated frame sets (loading, pulse, wave, syncing), text and digits in a 5×7 font, or a VU meter of levels or a live source. One… - [Transcript viewer](https://beamline.io/components/transcript-viewer.md): A recording and its words together: the spoken word lights up as it plays and the transcript follows it, any word or paragraph time plays from there… - [Waveform](https://beamline.io/components/waveform.md): The shape of a recording: one bar per slice of loudness, fitted to any width, with the played part in the accent, unmeasured slices hatched and a loading… - [Live waveform](https://beamline.io/components/live-waveform.md): Loudness drawn as it happens: a scrolling history of the microphone (or any live source) or its spectrum, a calm processing state while words are… - [Conversation bar](https://beamline.io/components/conversation-bar.md): The control bar of a voice call with an agent: one button to call and hang up, the agent's state as bars, a call timer, mute, and typing when talking is… - [Audio player](https://beamline.io/components/audio-player.md): One audio element and its controls: play with a loading state, a scrub bar with time, skip, speed and a playlist whose rows play into the same player… - [Voice button](https://beamline.io/components/voice-button.md): The control that starts and stops talking: click to toggle or hold to talk (pointer, Space, Enter or a global shortcut), with a live level while… - [Scrub bar](https://beamline.io/components/scrub-bar.md): A seekable timeline for audio or video: elapsed and total time, what has loaded, chapter marks, a time preview under the pointer, and the full keyboard… - [Speech input](https://beamline.io/components/speech-input.md): A text field you can speak into: the mic dictates through any speech-to-text provider, the phrase being heard shows apart from the finished words, and… - [Voice picker](https://beamline.io/components/voice-picker.md): Choose a text-to-speech voice from a searchable list (name, accent, tone, use) and hear it first: each voice has its own orb, previews play one at a time… - [Microphone selector](https://beamline.io/components/mic-selector.md): Choose the microphone, test it with a live level and mute it, with every permission and device state spelled out: not yet allowed, blocked (and how to… ### Dashboard - [Insight cards](https://beamline.io/components/insight-cards.md): Findings from an agent, one per page: the sentence, the series it is about with their change, a chart to scrub that names each point, and a follow-up… - [Tracker](https://beamline.io/components/tracker.md): A row of status blocks for uptime, job runs or daily checks, with tooltips and a legend. - [Metric card](https://beamline.io/components/metric-card.md): A KPI that fills its tile: label, a value that rolls to each new number, the change with arrow, sign and tone, what it compares with and the value it… - [Category bar](https://beamline.io/components/category-bar.md): One bar split into labelled ranges with an optional marker that names its range. - [Bar list](https://beamline.io/components/bar-list.md): Ranked horizontal bars, label and value over a meter, one line per row when there is room — top pages, sources, customers. - [App shell](https://beamline.io/components/app-shell.md): The frame for every app screen: collapsible sidebar with grouped navigation, top bar and page. ### Content & display - [Image compare](https://beamline.io/components/image-compare.md): Two images in one frame with a divider: drag anywhere, or arrow keys on the handle; horizontal or vertical, with captions. - [Live cursors](https://beamline.io/components/live-cursors.md): Who else is working on this, and where: over any shared surface, each person's pointer in the colour their name always gets, with a name flag, gliding… - [Document viewer](https://beamline.io/components/document-viewer.md): A PDF or a paged document read and marked up in place: page thumbnails beside it, zoom to the width, the page or a percentage, pages by keyboard, a… - [Video player](https://beamline.io/components/video.md): A video player on the native