# Beamline > Beamline is a React component system made for AI coding agents: 190 components and screens (forms, settings, tables, charts, dashboards, AI agent workspaces, voice and trading) that Claude Code, Codex, Cursor or any MCP client install into your app's repo through Beamline's hosted MCP server. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Beamline is not a site builder or a hosted widget: the parts land in your own repo, and the code is yours to change. Your agent connects once to the MCP server (https://mcp.beamline.io/mcp), signs you in with Google, GitHub or an e-mail code, reads what each part is for, installs only what a screen needs, and audits the result. React 19; Next.js (App Router) and Vite are tested on every release; Tailwind is optional. Every page below also answers in markdown: add `.md` to its address, or send `Accept: text/markdown`. ## 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 - [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) ## Component library ### Actions - [Button](https://beamline.io/components/button.md): 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](https://beamline.io/components/confirm-morph.md): 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](https://beamline.io/components/copy-button.md): 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](https://beamline.io/components/hold-to-confirm.md): 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](https://beamline.io/components/split-button.md): 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](https://beamline.io/components/swipe-actions.md): 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](https://beamline.io/components/theme-switch.md): 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 - [Allocation editor](https://beamline.io/components/allocation-editor.md): 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](https://beamline.io/components/billing-toggle.md): Monthly or yearly: a segmented control whose yearly note turns into what the choice saves. - [Calendar](https://beamline.io/components/calendar.md): 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](https://beamline.io/components/checkbox.md): A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in. - [Chip group](https://beamline.io/components/chip-group.md): 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](https://beamline.io/components/color-palette.md): 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](https://beamline.io/components/color-picker.md): 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](https://beamline.io/components/combobox.md): One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group… - [Date picker](https://beamline.io/components/date-picker.md): 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](https://beamline.io/components/date-range-picker.md): 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](https://beamline.io/components/file-dropzone.md): 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](https://beamline.io/components/form.md): 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](https://beamline.io/components/inline-edit.md): 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](https://beamline.io/components/input.md): A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments. - [Input Dissolve](https://beamline.io/components/input-dissolve.md): 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](https://beamline.io/components/label.md): The text label tied to a form control, with a required marker that screen readers announce. - [Mention input](https://beamline.io/components/mention-input.md): 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](https://beamline.io/components/multi-select.md): 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](https://beamline.io/components/number-field.md): 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](https://beamline.io/components/otp-input.md): 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](https://beamline.io/components/password-field.md): A password field with a reveal control, and a strength meter when a password is being created. - [Phone input](https://beamline.io/components/phone-input.md): 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](https://beamline.io/components/radio-cards.md): One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice. - [Radio group](https://beamline.io/components/radio-group.md): One choice from a short visible set, each option with an optional description, vertical or in a row. - [Rich text editor](https://beamline.io/components/rich-text-editor.md): 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](https://beamline.io/components/search-field.md): The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam. - [Segmented control](https://beamline.io/components/segmented-control.md): 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](https://beamline.io/components/select.md): One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details. - [Shortcut recorder](https://beamline.io/components/shortcut-recorder.md): 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](https://beamline.io/components/signature-pad.md): 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](https://beamline.io/components/slider.md): 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](https://beamline.io/components/switch.md): 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](https://beamline.io/components/tag-input.md): 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](https://beamline.io/components/textarea.md): Multi-line plain text that grows with what is typed up to a limit, with an optional character count. - [Time picker](https://beamline.io/components/time-picker.md): 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](https://beamline.io/components/toggle-group.md): Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed. ### Overlays - [Alert Dialog](https://beamline.io/components/alert-dialog.md): 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](https://beamline.io/components/bottom-sheet.md): 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](https://beamline.io/components/command-menu.md): 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](https://beamline.io/components/context-menu.md): 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](https://beamline.io/components/dialog.md): 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](https://beamline.io/components/dropdown-menu.md): 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](https://beamline.io/components/hover-card.md): A preview of a person, link or record on hover or keyboard focus, without leaving the page; HoverCardProfile is the standard person preview. - [Popover](https://beamline.io/components/popover.md): A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close. - [Sheet](https://beamline.io/components/sheet.md): 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](https://beamline.io/components/toast.md): 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](https://beamline.io/components/tooltip.md): 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 - [Breadcrumb](https://beamline.io/components/breadcrumb.md): 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](https://beamline.io/components/menubar.md): 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](https://beamline.io/components/navigation-menu.md): A site or docs header whose sections open into one panel that resizes and slides between them; NavigationMenuCard is the standard link row. - [Pagination](https://beamline.io/components/pagination.md): 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](https://beamline.io/components/sidebar.md): 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](https://beamline.io/components/stepper.md): 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](https://beamline.io/components/tabs.md): 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](https://beamline.io/components/tree-view.md): Nested folders and records with the full tree keyboard model (arrows, Home/End, *, type to jump), depth guides, counts and animated opening. - [User menu](https://beamline.io/components/user-menu.md): 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 - [Accordion](https://beamline.io/components/accordion.md): 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](https://beamline.io/components/aspect-ratio.md): Holds media, video and embeds at a fixed width-to-height ratio while the layout resizes. - [Bezel](https://beamline.io/components/bezel.md): 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](https://beamline.io/components/card.md): 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](https://beamline.io/components/carousel.md): 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](https://beamline.io/components/collapsible.md): One region that opens and closes in place from its trigger, its height animating to the content. - [Direction](https://beamline.io/components/direction.md): 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](https://beamline.io/components/expandable-card.md): A dense card that grows in place when asked: the frame resizes and the clamped preview opens into the full text. - [Resizable panels](https://beamline.io/components/resizable-panels.md): Panes that trade space across draggable dividers; each divider is a focusable separator with arrow keys, limits, folding for collapsible panes and… - [Scroll area](https://beamline.io/components/scroll-area.md): 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](https://beamline.io/components/separator.md): A hairline between groups, horizontal or vertical; hidden from screen readers unless it carries meaning. - [UI root](https://beamline.io/components/ui-root.md): 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 - [Alert](https://beamline.io/components/alert.md): 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](https://beamline.io/components/announcement-bar.md): 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](https://beamline.io/components/empty-state.md): 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](https://beamline.io/components/notification-center.md): 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](https://beamline.io/components/progress.md): How much of a known task is done, or a moving bar when the length is unknown, with an optional label and value. - [Skeleton](https://beamline.io/components/skeleton.md): Holds the shape of content while it loads, then crossfades into it, so nothing jumps. - [Spinner](https://beamline.io/components/spinner.md): A ring that spins while work runs and closes into a drawn check or cross when it ends. - [Usage meter](https://beamline.io/components/usage-meter.md): 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 - [Advertisement](https://beamline.io/components/advertisement.md): A sponsor or promo slot that turns through its ads on a hairline that fills; hovering or focusing holds the current ad. - [Avatar](https://beamline.io/components/avatar.md): 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](https://beamline.io/components/avatar-group.md): A team in a small space: overlapping faces that name themselves on hover or focus, and “+N” naming the rest. - [Badge](https://beamline.io/components/badge.md): A short status, category or count label: six tones, an icon or a status dot, two sizes. - [Code block](https://beamline.io/components/code-block.md): Code to read and copy: highlighted in the system's colours, numbered, marked lines, long files folded behind “Show all”. - [Comment thread](https://beamline.io/components/comment-thread.md): A discussion attached to something: replies, reactions, @mentions, editing and deleting your own, resolve that folds the thread. - [File diff](https://beamline.io/components/file-diff.md): 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](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. - [Item](https://beamline.io/components/item.md): The generic list row: media, title, description, meta and trailing actions; becomes a link or button when interactive. - [Kbd](https://beamline.io/components/kbd.md): Keyboard keys as keycaps; `mod` resolves to ⌘ or Ctrl per platform, symbols are spoken as words. - [Lightbox](https://beamline.io/components/lightbox.md): 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](https://beamline.io/components/logo-carousel.md): 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](https://beamline.io/components/marker.md): 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](https://beamline.io/components/qr-code.md): 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](https://beamline.io/components/slot-text.md): 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](https://beamline.io/components/text-morph.md): A short label that becomes its next state letter by letter: shared letters glide into place, new ones arrive, old ones leave. - [Text reveal](https://beamline.io/components/text-reveal.md): A headline whose words rise into place once, the first time it scrolls into view; never repeats. - [Text shimmer](https://beamline.io/components/text-shimmer.md): Ongoing work said in words (“Thinking…”) with a calm band of light passing across them; stops when inactive. - [Timeline](https://beamline.io/components/timeline.md): 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](https://beamline.io/components/video.md): A video player on the native