# Lead detail

> CRM lead with deal stage, AI lead score, activity timeline, notes and next steps.

Block · Pro · https://lodeui.com/blocks/lead-detail

## When to use

- CRM record pages.

## When not to use

- Lists of leads: use CRM contacts.

## Installation

```bash
npx shadcn@latest add @lode/lead-detail
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { LeadDetail } from "@/components/blocks/lead-detail";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <LeadDetail />
    </main>
  );
}
```

Built from: Badge, Gauge, Select, Tabs

## API reference

### LeadDetail

A CRM lead with contact and company, deal stage and value, an AI lead score, an activity timeline with notes and next steps. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through stage, tabs, note and tasks |
| Enter | Add a note |
| ← / → | Switch tabs |

## Accessibility

- The score is a labelled meter; tasks are toggle buttons; winning a deal is announced.

## Motion

- Notes slide into the timeline; tasks pop when done; tabs cross-fade.

## Responsive behavior

- The profile column moves above the activity below 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Explain the score with factors, as in the list under the gauge.

## Related

- [CRM contacts](https://lodeui.com/blocks/crm-contacts) — Contacts on the data table with filters, expandable details, bulk email, tag and delete.
- [CRM pipeline](https://lodeui.com/blocks/crm-pipeline) — Drag deals across stages; open, weighted forecast and won totals update live.
- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.