# Split anything A React component in [Beamline](https://beamline.io/)'s [Data & tables](https://beamline.io/components/data) category. Live demo: https://beamline.io/components/split-anything One splitter for money, quantities and time: a bar of the whole shows every target's part and what is not split yet; items are dragged onto targets (seats, people, boxes, payers, areas), and an item picked and given to several divides into fractions on the spot. Money divides in cents, units in whole units and minutes in minutes by largest remainder, so the parts always add up and the step that doesn't divide is placed and said; tax and tips follow each target's share; a settled target can't be re-cut. ## Use it for - One thing divided among several: a restaurant check by seat, an order into boxes, a stay or a payment between payers, a shift between areas. - The host owns the items, the targets and what a split means once done (checks, shipments, payroll); the part keeps every cent, unit or minute accounted for. ## Not for - Shares of a fixed whole edited as transfers (a budget by percent) → [allocation-editor](https://beamline.io/components/allocation-editor). - Many records matched to many → [match-board](https://beamline.io/components/match-board). ## Anatomy - header: the label; Not split or All split; the whole - bar of the whole: a segment per target in its hue with its name, the not-split remainder hatched with its amount - tray: Not split yet · N items, its item chips (or Everything is split.) - target: hue swatch, name and detail, Paid when settled, the rolling total; while sharing, Share with / Take back; its items (a shared one with its fraction); tax and tip lines - item chip: quantity, label, fraction when shared, its amount (or share) - the host's action, offered only when nothing is left ## States - rest - partly split - all split (action offered) - dragging (target under the pointer lit) - picking to share - shared item (fractions) - uneven shares (host weights, read as exact fractions, kept when a sharer joins or leaves) - settled target (locked) - money, quantity in whole units, time ## Keyboard - Tab reaches every item and, while sharing, every target's Share with button - Enter or Space on an item picks it (focus moves to the first target that can take it); Enter on a target's button adds or takes back that share; Enter on the picked item, Done or Escape puts it down with focus back on it - Each change is said once: "Bottle of Rioja shared by Ana, Ben and Cy: $15.34, $15.33 and $15.33" ## Motion An item that changes place flies there (the shared FLIP); a share grows out of the item's chip into each new sharer; the bar's segments resize on transforms; totals roll. The dragged chip follows the pointer on a transform. Nothing runs at rest; reduced motion places everything. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `label` (required) | `string` | — | What is split: "Table 12 · check 1042", "Order #5133". | | `items` (required) | `SplitItem[]` | — | | | `targets` (required) | `SplitTarget[]` | — | | | `value` | `SplitValue` | — | Controlled: each item's sharers; omit to use defaultValue. | | `defaultValue` | `SplitValue` | — | Initial selection when uncontrolled; omitted by default. | | `onValueChange` | `((value: SplitValue) => void)` | — | Reports the selected value after a change; no callback by default. | | `kind` | `"money" \| "quantity" \| "time"` | — | What the amounts are: money (default), a quantity of units, or time in minutes. | | `currency` | `string` | — | ISO code for money. Default USD. | | `unit` | `{ one?: string \| undefined; other: string; }` | — | The noun for a quantity, by plural category: `{ one: "bottle", other: "bottles" }`. | | `format` | `((amount: number) => string)` | — | Amounts in the host's own format; it wins over `kind`'s default. | | `extras` | `SplitExtra[]` | — | Tax, tip or fees on top of the items, each split by every target's share of them. | | `action` | `{ label: string; onAction: (result: SplitResult[]) => void \| Promise; }` | — | The host's action once everything is split: "Split into 3 checks". Offered only when nothing is left. | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `classNames` | `Partial>` | — | Classes for the named visual parts; no overrides by default. | | `style` | `CSSProperties` | — | Inline styles on the documented visual root; no overrides by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Button](https://beamline.io/components/button.md) - [Slot text](https://beamline.io/components/slot-text.md) - [Spinner](https://beamline.io/components/spinner.md) ## Used in - [Table service](https://beamline.io/components/table-service.md) ## Dependencies `lucide-react` ## Import ```tsx import { SplitAnything } from "@beamline/split-anything"; ``` ## Get it Split anything is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Data & tables - [Living table](https://beamline.io/components/living-table): A table that shows as much as fits on both axes: width decides which columns show (the rest ride in the name line, moving there rather than vanishing)… - [Availability layers](https://beamline.io/components/availability-layers): A week of bookable start times whose closed times explain themselves: every availability rule (hours, time off, bookings, buffers, rooms, lead time… - [Capacity terrain](https://beamline.io/components/capacity-terrain): A schedule that stands on a terrain of capacity: under each station's lane of jobs, every day's load rises to its capacity line and an overload is a… - [Domino move](https://beamline.io/components/domino-move): A room board where one move shows its chain: drag a booking (or pick it and aim it with the keys) onto a taken room and the bookings it would push appear… - [Match board](https://beamline.io/components/match-board): Month-end matching as one picture: bank lines and books entries side by side with threads between them — solid for matched, dashed with the host's reason… - [Approval route](https://beamline.io/components/approval-route): A policy you can read by trying it: an amount on a log scale with the thresholds as marks (the arrows stop just under, at and just over each), the… - [Proposal twin](https://beamline.io/components/proposal-twin): A proposal edited beside the client's exact page, the two linked both ways: a field in focus lights its twin on the page, scrolls it into view and joins… - [Quantity river](https://beamline.io/components/quantity-river): The life of one order line's quantity: at rest a bar of its real split ("5 delivered · 1 back in stock · 1 damaged · 5 cancelled"), unfolding into a… - [Stock horizon](https://beamline.io/components/stock-horizon): Projected stock per item over the coming weeks: a strip of weeks with the safety line, weeks under safety in warn and short in danger, every dip said in… - [Ageing queue](https://beamline.io/components/ageing-queue): Tickets that visibly age: each ticket's ring fills toward its own service target and steps from on time to late to very late, the words say when it is… - [Import lens](https://beamline.io/components/import-lens): A messy import made fixable by kind: rows stream through the checks once with live counts; problems gather into groups that say what is wrong in words… - [Duplicate guard](https://beamline.io/components/duplicate-guard): A new record that watches for the one that already exists: as you type, the likely duplicates slide in beside the form with the fields that match lit and… - [Scan flow](https://beamline.io/components/scan-flow): A pick list that takes scans: each scan flies from the scan field into its row and fills that row's quantity ring, and the prompt moves to the next bin… - [Pack planner](https://beamline.io/components/pack-planner): The packing bench: the order's items sit in box outlines drawn to scale, each box filling to its padding line, weighing against its limit and naming the… - [Provenance lens](https://beamline.io/components/provenance-lens): Hold Alt (or press Lens) over any number on the page and see what makes it: hairline threads draw from the number to the rows, cards and documents on… - [Record time machine](https://beamline.io/components/record-time-machine): The record itself, rewound in place: a slim track of every change (a tick per change in its person's colour, hollow for automation, named moments as… - [Tension timeline](https://beamline.io/components/tension-timeline): A plan where slack is something you see: every dependency is a string from one task's end to the next one's start, sagging with the days it has to spare… - [Replay bar](https://beamline.io/components/replay-bar): Rewind for anything live: pause a stream, scrub back to the moment you missed (markers for the ones that matter), step one update at a time, replay at a… - [Event calendar](https://beamline.io/components/event-calendar): A schedule of events by day, week or month: events that overlap sit side by side, drag one to another time or day or pull its bottom edge to change its… - [Kanban board](https://beamline.io/components/kanban-board): Work as cards in columns by stage: drag a card (or lift it with Space and walk it with the arrows) to another column or place, the cards around it make… - [Data grid](https://beamline.io/components/data-grid): Virtualised local or server-driven grid: stable row IDs, manual sort and filters, pages or infinite loading, retry without losing rows, inline editing… - [Pivot table](https://beamline.io/components/pivot-table): Records summed up by the fields people choose: rows grouped by one or more fields that fold open level by level, columns split by another, one or more… - [Query builder](https://beamline.io/components/query-builder): Conditions people build by hand to pick out records: each rule is a field, an operator that fits the field (contains, between, in the last N days, is any… - [Sort order](https://beamline.io/components/sort-order): Several sort keys in order. Each key says its rank in words ("Sort by Plan, A to Z", "then by Size, largest first") with its order named for the field's… - [Metric rules](https://beamline.io/components/metric-rules): Ordered rules that colour a dashboard number. Each rule has a name for what its colour means ("At risk", not just red) and a tone (good, watch, act… - [Log viewer](https://beamline.io/components/log-viewer): Log lines as they stream: it follows the newest line until you scroll up, then counts what arrived and brings you back in one click; filter by level with… - [JSON viewer](https://beamline.io/components/json-viewer): A JSON value as a tree you can read and walk: branches open and close (one level, or all at once), closed ones preview what they hold, every value reads… - [JSON diff viewer](https://beamline.io/components/json-diff-viewer): Two versions of a JSON value compared as one tree: added keys marked +, removed ones struck through with −, changed values read old → new, unchanged keys… - [Import mapping](https://beamline.io/components/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… - [Diff table](https://beamline.io/components/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](https://beamline.io/components/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. - [Table](https://beamline.io/components/table): A native HTML table for small datasets, composed with children or driven by records; shared server paging, sorting, filters, search, stable-ID selection… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).