Beamline component library

Every one of Beamline's 190 React components and screens, live, in nine looks: forms, tables, charts, dashboards, AI agent, voice and trading UI. Your…

190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent · Foundations

Actions

Buttons and one-press commands.

Button: The action control: five weights and a brand fill, a buy/sell tone, sm/md/lg and a 44 px touch size, icon-only, a loading state that keeps its size and…
Confirm morph: A destructive action that asks in place: the button morphs into its question, then into working, then into the result with Undo or Retry, without a dialog.
Copy button: Copies a value and confirms in place: the icon becomes a check and the label says Copied; a refused copy says so instead of pretending.
Hold to confirm: Confirms a costly action by holding instead of clicking: a fill sweeps across while held and drains if let go early; pointer, touch, Space and Enter all…
Split button: One obvious action joined to a menu of close alternatives; both halves are real buttons and the menu uses the shared menu rows.
Swipe actions: Row actions behind a swipe on touch screens, mirrored in a menu at the row's end for pointer and keyboard; a full swipe runs the edge action.
Theme switch: The light/dark control: the page changes in one of four transitions starting from the button (reveal, eclipse, split, rise), and the icon turns between…

Form controls

Everything a person types into, picks or drags.

Allocation editor: Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
Billing toggle: Monthly or yearly: a segmented control whose yearly note turns into what the choice saves.
Calendar: Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that…
Checkbox: A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
Chip group: Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N more”.
Color Palette: A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
Colour picker: A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
Combobox: One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
Date picker: One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
Date range picker: A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.
File drop zone: A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
Form: Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
Inline edit: Text that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves; saving shows progress and a refusal…
Input: A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments.
Input Dissolve: A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
Label: The text label tied to a form control, with a required marker that screen readers announce.
Mention input: A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
Multi-select: Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear.
Number field: A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
OTP input: A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
Password field: A password field with a reveal control, and a strength meter when a password is being created.
Phone input: A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the…
Radio cards: One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.
Radio group: One choice from a short visible set, each option with an optional description, vertical or in a row.
Rich text editor: A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste…
Search field: The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
Segmented control: Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.
Select: One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
Shortcut recorder: Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
Signature pad: A pad for a drawn signature whose ink thins with speed; undo, replay, PNG or SVG export, and typing instead for keyboards and screen readers.
Slider: A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
Switch: A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
Tag input: Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
Textarea: Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
Time picker: A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
Toggle group: Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.

Overlays

Dialogs, sheets, menus and floating layers.

Alert Dialog: A blocking confirmation that must be answered: the scrim does not dismiss it, focus starts on the safe choice, and an async action keeps it open until…
Bottom sheet: A phone panel that rests at a peek and follows the finger to full height; a flick down closes it, and the handle works from the keyboard.
Command menu: Search-first list of every action: ranked matching, groups, keycap shortcuts and nested pages; inline as CommandPalette or in a ⌘K dialog as CommandMenu.
Context menu: Actions for an object on right-click, long-press, Shift+F10 or the menu key, opened at the pointer, with the same rows as the dropdown menu.
Dialog: A focused task over the page (create, invite, rename) with a title, body and footer; focus moves in, is trapped and returns on close.
Dropdown menu: A list of actions behind a trigger, with shortcuts, check items, headings and submenus; one highlight glides under the pointer and jumps with the keyboard.
Hover card: A preview of a person, link or record on hover or keyboard focus, without leaving the page; HoverCardProfile is the standard person preview.
Popover: A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close.
Sheet: A panel that slides in from an edge with the page still visible behind it: header and footer stay put while the body scrolls.
Toast: Short results of an action stacked at an edge: point at the stack to fan it out and pause the timers; undo or retry in place; Alt+T, Escape and a swipe…
Tooltip: Short supporting text for a control: opens after a moment on hover and at once on keyboard focus; inside a toolbar group the next one opens instantly.

Navigation

Moving between places and steps.

Breadcrumb: Where a page sits and the way back up; long paths keep the first and last two levels and fold the middle into a menu.
Menu bar: A desktop-style File / Edit / View bar for editor-like apps; each menu takes the same rows as the dropdown menu, and pointing moves between open menus.
Navigation menu: A site or docs header whose sections open into one panel that resizes and slides between them; NavigationMenuCard is the standard link row.
Pagination: Moves through pages of a known length: first, last and the current page's neighbours, with an optional “41–60 of 468”; a phone shows “Page 6 of 24”.
Sidebar: The app's main navigation: sections, items with counts and one level of sub-pages, an icon rail with tooltips (⌘B, the trigger or the edge), and a sheet…
Stepper: Where someone is in a multi-step flow: done steps carry a check, the current one a ring, and the line between marks fills as steps complete.
Tabs: Switches between panels of one object; one indicator slides to the active tab, counts sit beside labels, and a long row scrolls instead of wrapping.
Tree view: Nested folders and records with the full tree keyboard model (arrows, Home/End, *, type to jump), depth guides, counts and animated opening.
User menu: The account menu behind the avatar: who is signed in, status, theme, account pages and sign out with progress; a bottom sheet on phones.

Layout

Surfaces and containers that arrange content.

Accordion: Topics that open in place, one at a time or several: FAQs and settings sections; each header is a button and the panel's height follows its content.
Aspect ratio: Holds media, video and embeds at a fixed width-to-height ratio while the layout resizes.
Bezel: A double-bezel frame: an outer shell with a hairline, a small gap, and an inset panel with its own edge, so a preview, chart or media reads as set into…
Card: A record or a small group of related content and actions: optional media, avatar, title, status, action, meta, free content and a Details toggle; plain…
Carousel: A row of slides that snap into place: swipe on touch, drag or the arrows with a mouse, ← → when focused, or the dots; optional autoplay that pauses and…
Collapsible: One region that opens and closes in place from its trigger, its height animating to the content.
Direction: Sets left-to-right or right-to-left for everything inside: text and logical spacing flip, and Radix parts read the direction for keys and placement.
Expandable card: A dense card that grows in place when asked: the frame resizes and the clamped preview opens into the full text.
Resizable panels: Panes that trade space across draggable dividers; each divider is a focusable separator with arrow keys, limits, folding for collapsible panes and…
Scroll area: A native scroll region with thin overlay thumbs and edge fades that show only where more content waits; thumbs can be dragged or clicked.
Separator: A hairline between groups, horizontal or vertical; hidden from screen readers unless it carries meaning.
UI root: Makes a region of any app a Beamline root: theme, brand and direction for everything inside, and a matching layer at page level where its menus, dialogs…

Feedback

Status, progress, loading and empty states.

Alert: A message that stays until it is dealt with: what happened, what to do, an action; danger and warning are announced; dismissing folds its height away.
Announcement bar: A banner across the top for news and offers: messages take turns, a countdown ticks, and dismissing folds it away and can remember it.
Empty state: What a place will hold and the first step to fill it, instead of a blank; a compact size for panels and filtered tables.
Notification centre: Updates that wait to be read: a bell with the unread count opens All / Unread, new and earlier groups, and per item mark read or dismiss.
Progress: How much of a known task is done, or a moving bar when the length is unknown, with an optional label and value.
Skeleton: Holds the shape of content while it loads, then crossfades into it, so nothing jumps.
Spinner: A ring that spins while work runs and closes into a drawn check or cross when it ends.
Usage meter: An allowance and what fills it: one bar split by source, the room left, a warning near the limit and the overflow in its own red well past a notch at the…

Content & display

Avatars, badges, media, code and text effects.

Advertisement: A sponsor or promo slot that turns through its ads on a hairline that fills; hovering or focusing holds the current ad.
Avatar: A person or account in a small space: a photo, or initials on the hue their name always gets; presence dot; circle for people, square for companies.
Avatar group: A team in a small space: overlapping faces that name themselves on hover or focus, and “+N” naming the rest.
Badge: A short status, category or count label: six tones, an icon or a status dot, two sizes.
Code block: Code to read and copy: highlighted in the system's colours, numbered, marked lines, long files folded behind “Show all”.
Comment thread: A discussion attached to something: replies, reactions, @mentions, editing and deleting your own, resolve that folds the thread.
File diff: A change to one file as a unified diff: line numbers, tinted lines, only the changed words marked, long unchanged stretches folded; give rows or just…
Image compare: Two images in one frame with a divider: drag anywhere, or arrow keys on the handle; horizontal or vertical, with captions.
Item: The generic list row: media, title, description, meta and trailing actions; becomes a link or button when interactive.
Kbd: Keyboard keys as keycaps; `mod` resolves to ⌘ or Ctrl per platform, symbols are spoken as words.
Lightbox: A full-screen image viewer: a thumbnail grows into it and shrinks back, arrows and ←/→ step through the set, Esc or a downward drag closes it.
Logo Carousel: A wall of logos shown a few at a time: every few seconds the slots turn left to right, each logo leaving upward as the next rises in.
Marker: A labelled point in a stream: a status event with an icon between messages, or a label such as "Today" between two hairlines.
QR Code: A scannable code set as gradient dots with rounded finder rings and an optional centre mark; a new value ripples out from the centre.
Slot text: Text and numbers that roll into their new value on reels, digit by digit from the right; other characters fade. Read as plain text by assistive tech.
Text morph: A short label that becomes its next state letter by letter: shared letters glide into place, new ones arrive, old ones leave.
Text reveal: A headline whose words rise into place once, the first time it scrolls into view; never repeats.
Text shimmer: Ongoing work said in words (“Thinking…”) with a calm band of light passing across them; stops when inactive.
Timeline: What happened, newest first and grouped by day: people with avatars, systems with toned icons, relative times with the exact time on hover, details in…
Video player: A video player on the native <video> element: title bar with an external link and close, centre play with ±10 s, scrub, time, volume, speed, captions…

Data & tables

Rows and columns: sort, filter, select, compare.

Data grid: Virtualised grid for thousands of rows: multi-sort, search and value filters, resizable and pinnable columns, range selection, inline edit, footer…
Diff table: Proposed edits to a table before they happen: new rows green, removals struck through, changed cells old → new; each change can be left out and Apply…
Filter toolbar: The filters on a list kept in view: chips that remove themselves, Add filter with fields and their values, Clear all, and room for search or view controls.
Import mapping: Map the columns of a file to the fields of one record type, see what every value becomes, then run the import and get an outcome for each row…
Table: A plain, styled HTML table for small static data: header, body, footer, caption, numeric cells, three densities and a sticky header.

Charts & data-vis

Line, bar, area, pie, radar, sankey, heatmaps, treemaps.

Activity heatmap: 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…
Area chart: 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…
Bar chart: Amounts by category as bars: columns or rows, grouped, stacked or as shares, reference lines, five looks (rounded, cells, trace, isometric, monospace), a…
Composed chart: 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.
Gauge: 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…
Line chart: Values over time as lines: curves, point markers, dashed series for forecasts, reference lines for limits and targets, an optional zero baseline and a…
Pie chart: 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…
Radar chart: 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…
Radial chart: 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…
Ridgeline: Distributions per group as overlapping density ridges (response time by region, order size by plan): an overlap control, median and p95 readouts per row…
Sankey chart: 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…
Slope chart: 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 (▲ ▼)…
Sparkline: 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.
Streamgraph: 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…
Treemap: 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…
Waffle chart: 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…

Trading

Order books, candles, depth, tickers, positions and order entry.

Depth chart: Cumulative bid and ask depth as stepped areas around the mid, with hover readout.
Funding countdown: Perpetual funding rate with who pays, and a live countdown ring to the next funding.
Market heatmap: Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.
Order book: Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking.
Order ticket: Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.
Positions table: Open positions with live unrealised PnL, liquidation warnings and close actions.
Price chart: Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks.
Price ticker: Symbol, last price with a directional flash, 24h change and stats.
Ticker tape: A continuously scrolling row of symbols with price, change and mini trend; pauses on hover and focus.
Trades tape: Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
Watchlist: A selectable, sortable list of markets with mini trends, prices, changes and stars.

Dashboard

KPIs, metric tiles, trackers and app shells.

App shell: The frame for every app screen: collapsible sidebar with grouped navigation, top bar and page.
Bar list: Ranked horizontal bars with label inside and value at the end — top pages, sources, customers.
Category bar: One bar split into labelled ranges with an optional marker that names its range.
Insight cards: 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…
Metric card: A KPI: label, a value that rolls to each new number, the change with arrow, sign and tone, a trend line and context; unmeasured values are hatched, never…
Tracker: A row of status blocks for uptime, job runs or daily checks, with tooltips and a legend.

AI & agents

Chat, reasoning, streaming, tool calls, approvals.

Approval card: 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…
Attachment: A file tile: preview or typed glyph with the type named, name, size, upload progress, error with retry, and a keyboard-reachable remove.
Chat thread: 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…
Citations: 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…
Context cards: 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…
Conversation: 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…
Flowchart: 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…
Image generation: 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 —…
Message: 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…
Plan: 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…
Prompt bar: 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…
Reasoning: 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…
Recommendation card: 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…
Response: 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…
Selection actions: 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…
Task rows: 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…
Tool call: 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…

Voice & audio

Orbs, waveforms, players and speech input.

Audio player: 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…
Bar visualizer: 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…
Conversation bar: 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…
Live waveform: 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…
Matrix: 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…
Microphone selector: 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…
Orb: 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…
Scrub bar: 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: 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…
Transcript viewer: 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…
Voice button: 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…
Voice picker: 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…
Waveform: 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…

Motion & effects

Light, goo, halftone and sound.

Glow: 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.
Halftone Dots: 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.
Light band: A slow 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…
Liquid gooey: Liquid surfaces that merge like goo when they touch — split plus-menus, gooey switches, file chips.
Sound: Interface sounds named by interaction class (tap, select, toggle, open/close, tick, success, error) through one provider; off by default.

Blocks

Whole screens composed from the parts above.

AI agent workspace: 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…
Analytics dashboard: 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…
Auth page: 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…
Changelog feed: 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…
CRM pipeline: 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…
Empty states: 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…
Page header: 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…
Plan comparison: 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…
Settings: Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation…
Sign in: 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: The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…
Step form: The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
Trading terminal: A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account…
Voice agent: 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…