# Shadcnblocks and Beamline for React product screens

2026-10-11

**Beamline code lives in your repo; your app never depends on Beamline servers at runtime.** Build your own style
from any look with public tokens, fonts, radii, density and motion. Both Beamline and Shadcnblocks offer assembled UI
you can bring into a project; choose by the screens and behaviour your product needs.

Part of [Beamline UI: React UI components and complete screens for apps built with coding agents](https://beamline.io/). [The code is copied into your repo; your app never depends on our servers](https://beamline.io/docs/install). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize). [200+ components and 50+ complete screens](https://beamline.io/components/). [$49 launch price; one payment; your whole team, no seats. 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). [React 19, TypeScript, Tailwind v4, Radix](https://beamline.io/docs/install). [Free MIT sample, commercial use included](https://github.com/dprvda/beamline). [Made by Danylo Pravda in Kyiv, Ukraine](https://beamline.io/about).

## What is free, and what each paid collection adds

Basic inputs, switches and dialogs are free in [shadcn/ui](https://beamline.io/compare/shadcn-ui-alternatives), and
[Mantine](https://beamline.io/compare/mantine-alternatives) is another free option. Shadcnblocks itself has
[free blocks](https://www.shadcnblocks.com/blocks/free); its site says Basic-tier blocks require a login.

[Shadcnblocks](https://www.shadcnblocks.com/) sells larger collections of components and blocks. Its higher plans add
templates, a Figma kit and an admin kit; its site also offers CLI and MCP installation. It is a useful option when
you want a broad selection of shadcn/ui-based sections and templates to assemble into a site or app. Check which
plan includes the particular template and team rights you need. Having an MCP install path alone does not distinguish
Beamline from it.

## What Beamline's launch price buys

The **$49 launch price** buys **50+ complete screens and their shared parts**, with an agent workflow for the
collection. The value is the coordinated app UI and its behaviour:

| Screen or part | Behaviour to evaluate |
|---|---|
| [Settings](https://beamline.io/components/settings) | A validated draft stays in place through a failed save; the person can retry. Settings is also in the free sample. |
| [Data grid](https://beamline.io/components/data-grid) | Sorting, filtering, selection, keyboard navigation and inline editing. The grid is an individual part, outside the complete-screen count. |
| [Trading terminal](https://beamline.io/components/trading-terminal) | Book, chart, order ticket and positions work together on your market feed and account handlers. |
| [Agent workspace](https://beamline.io/components/agent-workspace) | Threads, streamed run content, plans, approvals and artifacts work together around your agent's actions. |

The workflow is **mapping → install → audit**: map every field and pattern to a suitable part, install the required
parts locally, then audit the implementation. The free sample includes the same workflow; the purchase opens the
complete collection. Beamline supplies the interface; you connect your backend, persistence, permissions, trading
execution and agent runtime ([integration guide](https://beamline.io/docs/data-integration)).

One payment covers your **whole team**, employees and contractors included, with no seats. **Lifetime updates**
means new versions of the complete system for as long as we publish it. Separate add-on packs may be sold separately
and are not updates; received versions remain licensed if publication ends. See the [pricing terms](https://beamline.io/pricing#lifetime-updates)
and [licence](https://beamline.io/docs/licence).

## Compare one real screen

Start with the free [Settings screen](https://beamline.io/components/settings). Connect your real save handler, edit a field, make the
save fail and retry the retained draft. Then compare how much of that screen you would build from the other kit's
parts. For a trading or agent product, open the linked complete screens above and check their documented inputs and
handlers against your app. The library demos are demonstrations, not a supplied backend or provider service.

Choose Shadcnblocks when its sections, templates or admin kit fit the screens you need. Choose Beamline when the
coordinated product screens and mapping/install/audit workflow fit your work. Beamline's code and custom style files
stay in your repo ([Install](https://beamline.io/docs/install), [Customise](https://beamline.io/docs/customize)); paid packs cannot be redistributed on their
own. [Untitled UI](https://beamline.io/compare/untitled-ui-alternatives) is another free-base and paid-collection comparison.

## Sources

Read on 11 October 2026:

- Shadcnblocks: [collection, plan contents and install tools](https://www.shadcnblocks.com/),
  [free blocks](https://www.shadcnblocks.com/blocks/free).
- shadcn/ui: [component documentation](https://ui.shadcn.com/docs/components).
- Beamline: the catalog and linked screen/part specs above, [agent workflow](https://beamline.io/guides/coding-agent-component-system),
  [pricing](https://beamline.io/pricing), [licence](https://beamline.io/docs/licence) and [known limitations](https://beamline.io/docs/limitations).