# Blocks

Whole screens composed from the parts above. 14 live React parts in [Beamline](https://beamline.io/), each in nine looks.

- [AI agent workspace](https://beamline.io/components/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 changes, sources and files; it renders the run you give it and calls back for every decision.
- [Analytics dashboard](https://beamline.io/components/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 and the activity feed, with loading placeholders and a failed state with retry.
- [Auth page](https://beamline.io/components/auth): 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 cards switching in place with focus following, and legal links.
- [Changelog feed](https://beamline.io/components/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 visit marked as new, and a copyable link to each.
- [CRM pipeline](https://beamline.io/components/crm): 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 side sheet with stage stepper, fields and notes. Every change goes to your onDealsChange.
- [Empty states](https://beamline.io/components/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 copyable error id, no permission with a request for access, and offline with reconnecting.
- [Page header](https://beamline.io/components/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 menu when the width runs out, and tabs underneath; on long pages it can condense into a compact bar pinned to the top as you scroll.
- [Plan comparison](https://beamline.io/components/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 view while the features scroll, differences only, and included, not included and not specified told apart.
- [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation, persistence, error recovery and focus return. Existing members, billing, notifications and API sections remain available.
- [Sign in](https://beamline.io/components/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 state; every step runs on your handlers.
- [Sign up form](https://beamline.io/components/signup-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 request's progress and errors, an emailed-code check and a finished state.
- [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the step's title and your fields, one accent Continue; a side panel with the steps and the answers so far (each with Edit); an automatic review step, sending and done.
- [Trading terminal](https://beamline.io/components/trading-terminal): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account figures, positions and open orders. The terminal renders and calls the account; it never fills an order itself.
- [Voice agent](https://beamline.io/components/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 a workspace with an empty state, the live transcript and the conversation bar. One adapter connects any provider.

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.

Other categories: [Actions](https://beamline.io/components/actions) · [Form controls](https://beamline.io/components/forms) · [Overlays](https://beamline.io/components/overlays) · [Navigation](https://beamline.io/components/navigation) · [Layout](https://beamline.io/components/layout) · [Feedback](https://beamline.io/components/feedback) · [Content & display](https://beamline.io/components/display) · [Data & tables](https://beamline.io/components/data) · [Charts & data-vis](https://beamline.io/components/charts) · [Trading](https://beamline.io/components/trading) · [Dashboard](https://beamline.io/components/dashboard) · [AI & agents](https://beamline.io/components/ai) · [Voice & audio](https://beamline.io/components/voice) · [Motion & effects](https://beamline.io/components/effects)
