Card

The card from the Notra dashboard, with an eyebrow title, a hint, a readout, an action slot and an empty state.

Every chart and list on the Notra GEO pages sits in this card. The dualtone variants put the title on a grey shell and the content on a lifted white body, the same frame as the Table.

"use client";

import { Button } from "@/components/ui/button";

import { InstrumentGrid } from "../components/instrument-grid";
import {
  InstrumentEmpty,
  InstrumentModule,
} from "../components/instrument-module";

const ENGINES = [
  { name: "ChatGPT", rate: "64%" },
  { name: "Claude", rate: "58%" },
  { name: "Gemini", rate: "41%" },
  { name: "Perplexity", rate: "37%" },
] as const;

export default function CardDemo() {
  return (
    <InstrumentGrid className="w-full max-w-3xl md:grid-cols-2">
      <InstrumentModule
        action={
          <Button size="sm" variant="outline">
            View all
          </Button>
        }
        eyebrow="Mention rate"
        hint="Share of answers that mention your brand, per engine."
        readout="Last 7 days"
        variant="table"
      >
        <ul className="divide-y">
          {ENGINES.map((engine) => (
            <li
              className="flex items-center justify-between py-2.5 text-sm"
              key={engine.name}
            >
              <span className="font-medium">{engine.name}</span>
              <span className="text-muted-foreground tabular-nums">
                {engine.rate}
              </span>
            </li>
          ))}
        </ul>
      </InstrumentModule>
      <InstrumentModule eyebrow="Conversations" variant="table">
        <InstrumentEmpty busy message="Collecting answers" />
      </InstrumentModule>
    </InstrumentGrid>
  );
}

Installation

$ bunx --bun shadcn@latest add @notra/card

This installs the card into components/card/ and pulls in Tooltip, Shimmer and shadcn’s Card and Spinner.

Usage

import { InstrumentModule } from "@/components/card/components/instrument-module";

<InstrumentModule eyebrow="Mention rate" readout="Last 7 days" variant="table">
  {children}
</InstrumentModule>;

Prop	Default	Description
`eyebrow`		Title of the card.
`hint`		Adds an info icon with a tooltip next to the title.
`description`		Line under the title.
`readout`		Small muted text on the right of the header.
`action`		Button or menu on the right of the header.
`variant`	`"flat"`	`"flat"`, `"panel"`, `"table"` or `"table-compact"`.
`bareBody`	`false`	Drops the shell and body chrome around the content.

InstrumentSection takes the same props and renders the header above the content without a card. InstrumentEmpty fills a card with a message, an optional action and a faded preview; set busy to show a spinner. InstrumentGrid lays cards out in a grid.

Wrap your app in CardLabelsProvider to translate the hint’s label.