# Featured

A dashboard block with stat cards, an area chart, and a data table with tabs and pagination.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode src="registry/mint/b-featured.tsx">
      <MintFeaturedBlock />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode src="registry/berries/b-featured.tsx">
      <BerriesFeaturedBlock />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode src="registry/citrine/b-featured.tsx">
      <CitrineFeaturedBlock />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode src="registry/cinnamon/b-featured.tsx">
      <CinnamonFeaturedBlock />
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## Custom stats [#custom-stats]

Pass your own metrics to the stats row:

```tsx
<FeaturedBlock
  stats={[
    {
      label: "Monthly Revenue",
      trend: "+8.2%",
      trendUp: true,
      value: "$42,500",
      subtitle: "Up from last month",
      description: "Based on completed transactions",
    },
    // ...
  ]}
/>
```

## Custom chart data [#custom-chart-data]

```tsx
<FeaturedBlock
  chartTitle="Page Views"
  chartDescription="Last 90 days"
  chartData={[
    { date: "Jan 1", visitors: 1200 },
    { date: "Jan 8", visitors: 2400 },
    // ...
  ]}
  chartRanges={["Last 90 days", "Last 30 days", "Last 7 days"]}
/>
```

## Custom table data [#custom-table-data]

```tsx
<FeaturedBlock
  tableTabs={[
    { label: "All" },
    { label: "Active", count: 5 },
    { label: "Archived" },
  ]}
  tableRows={[
    {
      id: "1",
      header: "Introduction",
      sectionType: "Narrative",
      status: "done",
      target: 10,
      limit: 8,
      reviewer: "Alice Johnson",
    },
  ]}
  totalRows={42}
/>
```

## Props [#props]

| Prop                 | Type                   | Default                         | Description                    |
| -------------------- | ---------------------- | ------------------------------- | ------------------------------ |
| `stats`              | `FeaturedStat[]`       | See defaults                    | Four stat cards at the top     |
| `chartTitle`         | `string`               | `"Total Visitors"`              | Chart card heading             |
| `chartDescription`   | `string`               | `"Total for the last 3 months"` | Chart card subheading          |
| `chartData`          | `FeaturedChartPoint[]` | Sample data                     | Area chart data points         |
| `chartRanges`        | `string[]`             | `["Last 3 months", ...]`        | Time range tabs                |
| `tableTabs`          | `FeaturedTableTab[]`   | See defaults                    | Table section tabs             |
| `tableRows`          | `FeaturedTableRow[]`   | See defaults                    | Table row data                 |
| `totalRows`          | `number`               | `68`                            | Total row count for pagination |
| `rowsPerPageOptions` | `number[]`             | `[10, 20, 50]`                  | Rows per page options          |

## Specs [#specs]

```md
# Mint — Featured Block Specs

## Component
- name: b-featured
- file: registry/mint/b-featured.tsx
- installs to: components/ui/b-featured.tsx
- npm dependencies: recharts, lucide-react
- registry dependencies: card, chart, tabs, button, e-data-table

## What is it
A full-width dashboard block composed of three stacked sections: a row of
stat cards, an area chart with time-range tabs, and a paginated data table
with filterable tabs. Use it as the primary view of a dashboard or analytics
page. All three sections accept data via props so the block can be dropped in
with any domain — athletes, users, orders, documents.

## Visual identity
Clean and data-forward, now carried in Mint's fresh green palette. Each
section is a Card with a soft, glassy border (60% opacity) and generously
rounded corners. Stat cards use a two-row layout: the metric value at large
type, trend badge (green/red) top-right, subtitle and description below. The
chart uses a single area series with a soft green gradient fill and a
hairline stroke. The table uses minimal row dividers with no background fill
— emphasis is on the data, not the chrome.

## Structure
- StatCards row: 4 cards, 1 col → 2 col (sm) → 4 col (xl)
- ChartSection: full-width Card with Tabs for time range, ResponsiveContainer
  wrapping recharts AreaChart
- TableSection: full-width Card with Tabs for status filters, DataTable with
  column header sort, filter input, row selection, and pagination

## Design tokens
--background: oklch(1 0 0)               — page background behind the block
--card: oklch(1 0 0)                     — card surface
--card-foreground: oklch(0.145 0 0)      — card text
--border: oklch(0.88 0.04 155 / 60%)      — card borders, table row dividers
--foreground: oklch(0.145 0 0)           — stat values, headings
--muted: oklch(0.96 0.02 155)            — tab list background, hover rows
--muted-foreground: oklch(0.52 0.06 155) — stat labels, chart axis labels
--primary: oklch(0.5 0.14 155)           — active tab indicator, buttons
--primary-foreground: oklch(1 0 0)       — text on primary backgrounds
--ring: oklch(0.5 0.14 155)              — focus ring on interactive elements
--radius: 1.25rem                        — card and badge corner radius

## Dark theme
--background: oklch(0.145 0 0)
--card: oklch(0.205 0 0)
--card-foreground: oklch(0.985 0 0)
--border: oklch(0.32 0.05 155 / 40%)
--foreground: oklch(0.985 0 0)
--muted: oklch(0.2 0.03 155)
--muted-foreground: oklch(0.6 0.06 155)

## shadcn config (components.json)
- style: new-york
- rsc: false (uses "use client" — state for tabs, chart range, table filters)
- tsx: true
- baseColor: neutral
- cssVariables: true
- iconLibrary: lucide
- aliases:
  - components → @/components
  - ui → @/components/ui
  - utils → @/lib/utils
  - lib → @/lib
  - hooks → @/hooks

## Stat card anatomy
Each stat in FeaturedStat renders:
- label: text-sm text-muted-foreground (top-left)
- trend: text-xs font-medium, TrendingUp (emerald) or TrendingDown (red) icon
- value: text-2xl font-bold leading-none
- subtitle: text-sm font-medium with repeat icon
- description: text-xs text-muted-foreground

## Chart section
Built with recharts AreaChart inside ResponsiveContainer (height 220):
- Single Area series, type="monotone", gradient fill (5% → 2% opacity)
- CartesianGrid vertical={false} for horizontal-only grid lines
- XAxis: tickLine=false, axisLine=false for a clean baseline
- Tooltip: white card with border, 8px radius

## Table section
Uses the e-data-table element with tabs for status filters:
- Default columns: header, sectionType, status (badge), target, limit, reviewer
- Status badge colours: done (emerald), in-process (blue), pending (yellow), cancelled (red)
- Filter input filters across all string columns
- Pagination via DataTable's built-in rowsPerPage

## Conventions
- Pass all four sections as props — do not import sub-components separately
- chartData points must have { date: string, visitors: number } shape
- tableRows must satisfy FeaturedTableRow (id, header, sectionType, status,
  target, limit, reviewer)
- Use totalRows to reflect the full dataset size when rows are paginated server-side
- The block is "use client" — wrap in a Suspense boundary if lazy loading
```

## Installation [#installation]

<CommandBox componentName="b-featured" className="mt-2" />