data · Normal DOM + Twenty Remote DOM

LineItemCard

One row of a priced line — header / body / footer slots + optional delete.

The shell of a deal item, invoice line, subscription row, project task with cost — anywhere the panel shows a repeating priced row. Owns only the chrome: outer border, accent rail, dividers between adjacent slots, and the outside delete button. Caller fills the slots.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { LineItemCard } from '@8maverik8/twenty-design';

Examples

Catalog row (selector + params + totals)

Cloud Pro Plan
Pricing
Annual
Monthly
Quantity
Months
Unit Price$100.00/moLine Total$1,200.00
×
tsx
<LineItemCard
  onDelete={removeLine}
  header={<ProductSelector ... />}
  body={
    <>
      <SegmentedControl ... />
      <NumberInput label="Quantity" ... />
      <NumberInput label="Months" ... />
    </>
  }
  footer={<>Unit Price ... Line Total ...</>}
/>

Custom row (free-text name + accent rail)

Unit Price
Line Total$2,500.00
×
tsx
<LineItemCard
  accent="primary"
  onDelete={removeLine}
  header={<input ... />}
  body={<input type="number" ... />}
  footer={<>Line Total ${price}</>}
/>

Variants

accent
defaultdefaultNo coloured rail — neutral line.
primaryBlue rail — typical for "custom" rows.
successGreen rail — paid / approved lines.
warningOrange rail — needs attention.
dangerRed rail — overdue / refused.

Anatomy

Accent rail3px coloured left border to distinguish row kinds.
Header slotTop region. Typically the entity selector or free-text name input.
Body slotMiddle region. Parameter controls (qty, dates, switches).
Footer slotBottom region. Right-aligned by default — totals.
Delete buttonOutside the card border on the right. 28px wide, height-stretched.

Guidelines

✓
Keep the same set of slots filled across all rows in a list.Visual rhythm — alternating shapes look broken.
✕
Stuff multiple inputs in a single slot when they belong in different rows.The footer is for read-only totals; controls go in the body.