Insight Cards

Paged agent insights with scrub-ready live charts.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { InsightCards, Entity, Mono } from "@aile.sh/elia";

const ChurnChart = () => <div className="min-h-[278px] rounded-card bg-surface p-3 shadow-hairline" />;
const ExpansionChart = () => <div className="min-h-[278px] rounded-card bg-surface p-3 shadow-hairline" />;

export function Example() {
  return (
    <InsightCards
      pages={[
        {
          key: "churn",
          prose: (
            <>
              Churn in <Entity name="Enterprise" tone="bg-orange" /> rose{" "}
              <Mono tone="red">+1.8%</Mono> this quarter.
            </>
          ),
          content: <ChurnChart />, // any ReactNode — your own card
          pill: "Which accounts are at risk?",
        },
        {
          key: "expansion",
          prose: (
            <>
              Expansion revenue is up <Mono tone="green">+$41,200</Mono> month over month.
            </>
          ),
          content: <ExpansionChart />,
        },
      ]}
      onPageChange={(index) => console.log("page", index)}
      onPillClick={(key) => console.log("ask about", key)}
    />
  );
}

— elia design system · MIT · primitives · https://github.com/aile-sh/elia