Styled

@get-asset/react

A batteries-included styled layer on top of @get-asset/sdk. Import a single component per card, drop it in, and it renders with the default theme.

What's included

• An Asset-prefixed component for every primitive — the financial cards (AssetRevenueCard, AssetExpensesCard, AssetSnapshotCard, AssetCashflowCard, AssetProfitLossCard, AssetOperatingExpensesCard) plus the reports, tables, and flows (e.g. AssetTransactions, AssetDocuments, AssetTasks, AssetAccountsList).
• Building-block primitives: Card, Badge, Button, Skeleton, Spinner, Divider, ErrorState, LoadingMessage, and a Typography family (Heading, Amount, Value, Muted).
• Two stylesheets — theme.css (CSS custom properties) and styles.css (class-based rules) — that you import once.

Theming

Every value is expressed as a CSS custom property. Override them at any scope — :root, a data-theme attribute, or a single card — and every piece of the styled layer picks up the change. Two themes ship with the docs site: the default light theme and Slate, a dark teal-accented theme that demonstrates how far you can push things with just CSS variables. Toggle below to re-skin the whole styled layer — no components are replaced, only the values behind --asset-background, --asset-primary, --asset-chart-*, and friends.

Default theme

A clean light theme with a purple primary (#7c3aed). Chart palette uses a green accent for revenue and a lavender gradient for expense breakdowns.

Slate theme

A dark theme built on a cool slate surface (#0f172a) with a teal primary (#14b8a6). Demonstrates the full range — surfaces, foregrounds, semantic states, and chart palette all swap.

[data-asset-theme="slate"] {
  --asset-background: #0f172a;
  --asset-surface:    #1e293b;
  --asset-card:       #1e293b;

  --asset-foreground:       #f1f5f9;
  --asset-muted-foreground: #94a3b8;

  --asset-primary:            #14b8a6;
  --asset-primary-foreground: #0f172a;

  --asset-chart-revenue: #14b8a6;
  --asset-chart-expense: #f472b6;
  /* … */
}

Applying a theme

Scope the override however you like — the whole document, a route segment, or a single card.

/* Site-wide */
:root {
  --asset-primary: teal;
}

/* One subtree */
<section data-asset-theme="slate">
  <AssetRevenueCard />
</section>

See CSS Variables for the full catalog of tokens you can override.