@get-asset/sdk

SnapshotCard

Headless compound for a quick revenue vs. expense snapshot with net profit and period-over-period change. Includes proportional bar parts so you can render comparisons without a chart library. Period defaults to the AssetProvider's year/month — pass a month to show that month vs. the previous month, omit it to show the full year vs. the previous year.

Anatomy

Import the primitive and compose the parts you need.

<SnapshotCard.Root year={2026}>
  <SnapshotCard.Success>
    <SnapshotCard.Period />
    <SnapshotCard.NetProfit />
    <SnapshotCard.Tone>
      <SnapshotCard.Change />
    </SnapshotCard.Tone>
    <SnapshotCard.Revenue />
    <SnapshotCard.RevenueBar />
    <SnapshotCard.Expense />
    <SnapshotCard.ExpenseBar />
  </SnapshotCard.Success>
</SnapshotCard.Root>

Required scopes

The access token used by AssetProvider must include this scope for this primitive to fetch data successfully:

report:read

API reference

Root props

Prop	Type	Default	Description
`year`	`number`	—	Fiscal year. Falls back to the AssetProvider's year.
`month`	`number \| null`	—	Month (1-12). When set the card shows that month vs. the previous month; null explicitly forces a whole-year range. Falls back to the AssetProvider's month (default: no month).
`revenue`	`number`	—	Override fetched revenue.
`expense`	`number`	—	Override fetched expense. Provide as a positive number.
`previousNetProfit`	`number`	—	Override prior-period net profit (drives the % change badge).
`scale`	`number`	—	Override the +/- bound for the bar chart scale.
`state`	`"loading" \| "error" \| "empty"`	—	Force a specific state for testing.
`locked`	`boolean`	—	Gate the report for an unentitled viewer. Activates the Locked state and skips the API fetch. See /docs/sdk/locked-upsell.
`upsell`	`{ title?, description?, ctaLabel?, onUpgrade? }`	—	Locked-state copy + upgrade handler; merged field-by-field over the card's default copy, then the generic fallback.
`children`required	`ReactNode`	—	Compound parts.

Parts

Container

Always rendered. Provides data and context to its children.

Part	Description
`SnapshotCard.Root`	Fetches revenue/expense totals and provides context.

Success

Renders when data is available.

Part	Description
`SnapshotCard.Success`	State wrapper. Compose the snapshot UI inside.
`SnapshotCard.Period` `asChild?`	Renders the resolved period — defaults to MMM YYYY or YYYY. Pass format(year, month) to override.
`SnapshotCard.NetProfit` `asChild?`	Renders revenue − expense.
`SnapshotCard.Revenue` `asChild?`	Renders the revenue value.
`SnapshotCard.Expense` `asChild?`	Renders the expense value.
`SnapshotCard.Change` `asChild?`	Percent change vs. previousNetProfit.
`SnapshotCard.Tone` `asChild?`	Adds data-tone to its child based on the sign of the change.
`SnapshotCard.RevenueBar` `style?, className?`	Proportional bar sized by revenue / scale. Renders a filled track.
`SnapshotCard.ExpenseBar` `style?, className?`	Proportional bar sized by expense / scale.

Loading

Renders while the fetch is in flight.

Part	Description
`SnapshotCard.Loading`	State wrapper. Render any skeleton or placeholder UI inside.

Empty

Renders when the period has zero revenue and expense.

Part	Description
`SnapshotCard.Empty`	State wrapper. Render an empty-state message inside.

Error

Renders on fetch error.

Part	Description
`SnapshotCard.Error`	State wrapper. Compose the error UI inside.
`SnapshotCard.ErrorMessage` `asChild?`	Renders the error message string.
`SnapshotCard.Retry` `asChild?`	Button that re-runs the fetch.

Locked

Renders when `locked` is set — the viewer isn't entitled to the report. Mutually exclusive with the other states, and no data is fetched. See the Locked / upsell guide for composing the teaser + upgrade UI.

Part	Description
`SnapshotCard.Locked`	State wrapper. Compose the upgrade / upsell UI inside — see LockedUpsell.

Unlocked

Renders whenever the card is NOT locked — the inverse of Locked.

Part	Description
`SnapshotCard.Unlocked`	State wrapper. Renders children whenever the card isn't locked.

Hooks

Part	Description
`useSnapshotCard()`	Hook returning the full context, including locked.