Design System

Interactive Organisms

Self-contained UI sections from @stackmates/ui-interactive/organisms

Demo data from @stackmates/ui-fixtures

DataTable

Full-featured data table with TanStack Table. Supports sorting, pagination, row selection, and bulk actions.

TaskStatusPriorityDue Date
Follow up on Acme proposalnot startedhigh1/21/2026
Prepare demo for TechStartin progressurgent1/22/2026
Schedule intro call with Global Venturesnot startedmedium1/25/2026
Rows per page
Page 1 of 2

DataTableProps

PropTypeDefaultDescription
data*TData[]—Array of row data
columns*ColumnDef<TData>[]—TanStack Table column definitions
getRowId(row: TData) => string—Row ID accessor
enableSortingbooleanfalseEnable column sorting
enablePaginationbooleanfalseEnable pagination controls
enableRowSelectionbooleanfalseEnable row selection checkboxes
import { DataTable, createColumnHelper } from '@stackmates/ui-interactive/organisms';
import { MOCK_TASKS } from '@stackmates/ui-fixtures';

const columns = [
  columnHelper.accessor('title', { header: 'Task' }),
  columnHelper.accessor('status', { header: 'Status' }),
];

<DataTable
  data={tasks}
  columns={columns}
  getRowId={(row) => row.id}
  enableSorting
  enablePagination
  enableRowSelection
/>

CRUDTable

DataTable with built-in CRUD actions (view, edit, delete) and confirmation dialogs.

NameEmailCompanyStatusActions
Sarah Chensarah.chen@acme.comAcme CorpActive
Marcus Johnsonmarcus@techstart.ioTechStartActive
Elena Rodriguezelena@globalventures.comGlobal VenturesActive
Rows per page
Page 1 of 2

CRUDTableProps (extends DataTableProps)

PropTypeDefaultDescription
entityNamestring—Entity name for UI labels
onView(row: TData) => void—View action handler
onEdit(row: TData) => void—Edit action handler
onDelete(row: TData) => Promise<void>—Delete action handler
onCreateNew() => void—Create new handler
onBulkDelete(rows: TData[]) => Promise<void>—Bulk delete handler
import { CRUDTable } from '@stackmates/ui-interactive/organisms';
import { MOCK_CONTACTS } from '@stackmates/ui-fixtures';

<CRUDTable
  data={contacts}
  columns={columns}
  getRowId={(row) => row.id}
  entityName="contact"
  onView={handleView}
  onEdit={handleEdit}
  onDelete={handleDelete}
  onBulkDelete={handleBulkDelete}
  onCreateNew={handleCreate}
/>

MessageThread

Scrollable message list with auto-scroll and loading states. Composes MessageRow + TypingIndicator.

Analyze our sales pipeline.

OR
Orchestrator

I'll analyze using the optimal-stopping algorithm and SPCL scoring.

Run the sales-rfp workflow for Acme.

MessageThreadProps

PropTypeDefaultDescription
messages*MessageRowData[]—Array of messages to display
isLoadingbooleanfalseShow typing indicator
classNamestring—Additional CSS classes
import { MessageThread } from '@stackmates/ui-interactive/organisms';

<MessageThread messages={messages} isLoading={false} />

ConversationPanel

Full conversation area: header + message thread + composer. Manages local input state internally.

Orchestrator

Analyze our sales pipeline.

OR
Orchestrator

I'll analyze using the optimal-stopping algorithm and SPCL scoring.

Run the sales-rfp workflow for Acme.

ConversationPanelProps

PropTypeDefaultDescription
messages*MessageRowData[]—Array of messages
onSend*(content: string) => void—Send message handler
isLoadingbooleanfalseLoading state
headerTitlestring—Header title text
classNamestring—Additional CSS classes
import { ConversationPanel } from '@stackmates/ui-interactive/organisms';

<ConversationPanel
  messages={messages}
  onSend={handleSend}
  headerTitle="Agent Name"
  isLoading={false}
/>

StageTimeline

Vertical timeline of workflow stages with connecting dots and cost summary. Composes StageCard + CostDisplay.

Research & Discovery
Knowledge Architect
8.5s92%completed
Needs Analysis
Navigator
12.3s87%completed
Proposal Generation
Orchestrator
running
Quality Review
Knowledge Architect
pending
Total Cost
$0.12579,600in / 16,500out

StageTimelineProps

PropTypeDefaultDescription
stages*StageCardData[]—Array of workflow stages
totalCostUsdnumber—Total cost for summary
totalTokens{ input: number; output: number }—Total token counts
classNamestring—Additional CSS classes
import { StageTimeline } from '@stackmates/ui-interactive/organisms';

<StageTimeline
  stages={stages}
  totalCostUsd={0.1257}
  totalTokens={{ input: 9600, output: 16500 }}
/>

Atomic Design Level: Organism

Organisms are self-contained UI sections:

  • Self-contained UI sections with complete functionality
  • Composed of multiple molecules (ColumnHeader, TablePagination, RowActions, MessageRow, StageCard)
  • Have internal state management (sorting, selection, pagination, auto-scroll)
  • Can function independently within a page