---
title: "Chart table card"
description: "A revenue card that switches between a line chart and a table of the same numbers, with a period Select and each series' total."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/chart-table-card
---

# Chart table card

A revenue card that switches between a line chart and a table of the same numbers, with a period Select and each series' total.

Chart | Table switches between a line chart of this period against the one before (dashed) and a table with a row per day, newest first, and the change. The card keeps its height in both views. The period Select picks the last 7, 30 or 90 days, the last by the week. The legend above carries each series' total, and hovering the chart shows a day's two figures. The chart describes itself to screen readers in one sentence, and the table is the full accessible view. A period with no sales says so in both.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/chart-table-card
```

## Dependencies
- npm: lucide-react@^1.33.0, recharts@^3.8.0
- edbn: edbn-base, card, chart, scroll-area, select, skeleton, table, toggle-group

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More dashboards blocks

All 5, with install commands: https://ui.edbn.me/docs/blocks/dashboards · https://ui.edbn.me/docs/blocks/dashboards.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt