CMS & media app UI for React
Making and publishing: drafts, media, schedules, translation and releases. 46 live React screens in working order, each in nine looks, installed by your coding agent.
Screens
- Content workbench: A site's content in one place: collections, the chosen collection's items in a grid where cells are chosen as a range (click, Shift-click), and an…
- Page editing: Editing a live page in place, for someone who may edit but not publish. Edit page outlines each editable piece with its name; a click edits it where it…
- Page inline edit: The website edited in place inside the admin. A page picker with the page's address and Edit in place. The website shown in its own paper and type; with…
- Writing canvas: Writing before structure, for a CMS team. A shared draft with where it sits, who's in it and the section each person is writing in (or that they're only…
- Versioned document: One CMS document edited in its draft or in a release's version. The switcher says what each version holds and where an edit goes; published reads only…
- Document history: A CMS document's history. Revisions as a timeline, newest first, each with what happened, who and when; the ones made inside a release are gathered under…
- Record versions: A published record with its versions. Main (published on success) and each version with how many fields differ from main (on info), who made it from what…
- Document finder: Finding documents in a CMS. Search by words in a title or text field; the filters read as a sentence of chips (type, what a field contains, as many as…
- Content releases: Content releases in a headless CMS: changes to many documents grouped to go live together. A preview bar layers chosen releases over what's live in the…
- Post release: One post on its way out. The preview shows it as the website, a phone, the email and a shared link, from one revision; the email's subject is set apart…
- Social media scheduler: 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…
- Post performance: How published posts did, with every figure's denominator said. The list keeps each post's website visitors, its email's open and click rates (each "x of…
- Newsletter desk: A publication's newsletters, each its own list with its own subscribers, settings and design. Active and Archived apart; a new one says how many existing…
- Audience segments: A messaging product's audience segments in one place: the directory with members (a count of people, or not known, never 0) kept apart from what uses…
- Publishing team: A social team's settings in three places. Tags: posts with their status (scheduled, draft, sent) and tags in their own series hue, the same hue in the…
- Asset library: A shared media library in a CMS. Folders hold files; collections only point at them, and adding to one says it never moves a file. The grid filters by…
- Media collection: A media collection that fills itself from metadata. Its rules read as one sentence of chips (is, is not, contains, before, after; choices picked from the…
- File detail: One file's details. The image with its focal point (where crops keep the subject), set by clicking the picture and said in words, or none said. Metadata…
- Metadata fields: An account's metadata fields for media. The library lists each field with its type, how many assets fill it and how many projects can use it, with New…
- Collection batch edit: A collection's records filtered and edited together. Saved filters beside nested rules (query-builder, up to three levels) over fields and dotted JSON…
- Schema fields: A collection's fields and their settings. The fields with key, type and flags (required, unique, hidden, translated). An existing field leads with its…
- Policy rules: One access policy's permissions. Admin access (said to skip every rule, on warning) and app access (without it its people can't sign in; rules still…
- Automation steps: An automation's trigger and its steps' options. The outline: what starts it, then each step by its key and kind, with how many unknown paths it holds…
- Automation runs: An automation's runs and running it by hand. The runs: when, how it ended (done on success, failed on danger, running on info), what started it and how…
- Review share: Sharing cuts for review. The page as reviewers will see it leads, large: its title (edited in place), how many items and when it ends, what's allowed…
- Guest review: A guest's review of shared translations, and the invitation that scopes it. The room shows the screen each key appears on with the shared keys numbered…
- Translation workbench: Translating a file segment by segment. Source and target sit side by side, segments grouped by their content unit; the source is read only (it changes by…
- Translation editor: Content in two languages side by side, and the interface strings. Content: the record and the language to translate into, how many fields are translated…
- Translation key: A translation key, defined and given context. General: the name (one already in the project refused, or a name per platform), the base text, the…
- Language preview: One document in two languages side by side. The panes scroll together; choosing a passage in either lights it in both and offers Find in editor; a…
- Localization overview: A localization project at a glance. Review progress per language says segments and words approved out of their totals (a word total still being counted…
- Captions: Captions for a video, by speaker and by style. Caption layers are bound to a speaker (or all speakers), each with its own style and place, top or bottom…
- Cut review: Reviewing a film cut. The picture is the still of the clip under the playhead, large, with the checks a reviewer needs folded into three tools above it…
- Shot list: A scene's shot list for a film or video shoot. Shots in order with done, number, description, size, movement, setup and time, and banner rows (a meal, a…
- Call sheet: A shoot day's call sheet. Composed from grids switched on or off: schedule (scenes, start, pages, cast), cast with call times edited in place and a call…
- Screenplay revisions: A screenplay under revision for a production. The script in screenplay form (scene headings, action, character, parenthetical, dialogue, transitions)…
- Transition sequence: An event's sequence of states for one object, as an inspector. The states play in order; each step between two states has its own duration and easing…
- Segment editor: One segment's translation with its checks and help. The source shows its tags and placeholders as numbered chips, and so does a preview of the…
- Rig editor: Rig a character: bones, a rotation constraint and a mesh. Bones are drawn joint by joint on the stage or added from the chosen joint, and can branch from…
- Project board: 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…
- Cycle planner: A team's work cycles: the schedule read as one sentence (every two weeks from Monday, no cooldown, three ahead) over a calendar of cycles on a week…
- Component source: Components and their instances in one artboard. Layers chosen together become a component after a review of what goes with them (their timeline keys and…
- Element index: A production's element index: every element (cast, props, wardrobe, vehicles, animals…) grouped by category, each with how many scenes it's in, the shoot…
- Layout inspector: Size and place one object in its parent. Width and height are Fixed (points or percent), Hug (its content; not without children) or Fill (its parent; not…
- Text styles: A text object's runs, styles and modifiers. Each run takes one of the text's own styles (they belong to this text only); hovering or focusing a style…
- Label designer: A label template made against the real label: drawn at true proportions in millimetres with its size beside it; the code says what it holds (a QR links…
The parts they're built from
- Label (free): in 46 of these screens
- Spinner (free): in 46 of these screens
- Select (free): in 45 of these screens
- Button (free): in 44 of these screens
- Avatar (free): in 43 of these screens
- Tooltip (free): in 38 of these screens
- Text morph (free): in 34 of these screens
- Segmented control (free): in 32 of these screens
- Input (free): in 29 of these screens
- Dropdown menu (free): in 24 of these screens
- Checkbox (free): in 22 of these screens
- Textarea (free): in 20 of these screens
- Switch (free): in 19 of these screens
- Bottom sheet (free): in 14 of these screens
- Popover (free): in 14 of these screens
- Badge (free): in 12 of these screens
- Number field (free): in 12 of these screens
- Alert (free): in 11 of these screens
- Tabs (free): in 11 of these screens
- Skeleton (free): in 10 of these screens
- Glow (free): in 9 of these screens
- Kbd (free): in 9 of these screens
- Search field (free): in 9 of these screens
- Empty state (free): in 8 of these screens
- Calendar (free): in 7 of these screens
- Chip group (free): in 7 of these screens
- Date picker (free): in 7 of these screens
- Multi-select (free): in 6 of these screens
- Alert Dialog (free): in 4 of these screens
- Combobox (free): in 4 of these screens
Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
Next: Construction. Other apps: AI workspace · Trading · SaaS admin · Clinic · Shop · Inventory · Construction · Events & bookings · Salon & fitness · Hotel & restaurant · HR & payroll · Manufacturing · Government & legal · Education · Research & design
Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.