ToolRowBase
The single-line row most tool cards are built on: a 12px icon, a label that shimmers while isAnimating (shimmerLabel) and settles to completeLabel, a muted truncated detail, and optional trailingContent such as elapsed time. With expandable the row becomes a button with a chevron and reveals children in a Collapse; it works uncontrolled (defaultOpen) or controlled (expanded with onToggleExpand). Other Mantine Box props pass through to the root, so you can add data-* attributes and style props. Use it to build a custom tool renderer that sits in the same visual rhythm as the built-in cards. ContextEventRow, HookActivity, ActionRow and GenericToolRow are built on it. The detail truncates, so the row fits any width.
Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-reactExamples
Running and expandable
API reference
Prop
Type
Required
icon
React.ReactNode
No
Icon rendered before the label, 12x12 box
shimmerLabel
string
No
Label shown with shimmer while `isAnimating` is true
completeLabel
string
Yes
Label shown when the tool has completed
isAnimating
boolean
Yes
detail
string
No
Muted, truncated text after the label
trailingContent
React.ReactNode
No
Content rendered at the end of the row, for example elapsed time
expandable
boolean
No
Whether the row can be expanded to reveal `children`
expanded
boolean
No
Controlled expanded state
defaultOpen
boolean
No
Initial expanded state in uncontrolled mode
onToggleExpand
() => void
No
children
React.ReactNode
No