Skip to content
Twentyfirst UIPro

Insight Card

Life · InsightCard

View as Markdown

Something the assistant noticed: what, where it comes from, why it is shown and what to do.

  • sources are chips like the ones under chat answers; why folds away behind "Why am I seeing this?".
  • onAccept (with acceptLabel), onSnooze and onDismiss add the actions.
  • tone sets the accent: info, success, warning or highlight.
Money · 2 h agoYour electricity bill went up 18 %
At your usage, switching to a fixed tariff would save about €140 a year.
1Bank account · Nov debit2Tariff letter (PDF)
Sleep · this weekYou slept 40 minutes longer on walk days
On the five days with a morning walk you fell asleep earlier and woke up less often.
1Watch · sleep2Habits

Props

InsightCard

PropTypeNotes
surface?Surface`"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`.
titlestringRequired
children?ReactNode
icon?IconName
tone?"info" | "success" | "warning" | "highlight"
meta?ReactNodeAbove the title: area and time ("Money · 2 h ago").
sources?Source[]Where the insight comes from, as chips (like chat sources).
why?ReactNodeWhy the assistant shows it; folded away behind "Why am I seeing this?".
onAccept?() => void
acceptLabel?string
onSnooze?() => void
onDismiss?() => void
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.