Deal card
PROWho, worth, what and when; it speaks up only when needed.
Every shadcn style · one file
v3.0 · Updated Oct 21Live preview
pnpm dlx shadcn@latest add @notchset-pro/deal-cardInstallation
pnpm dlx shadcn@latest add @notchset-pro/deal-cardNeeds your registry key. Every components.json style gets the same files.
Works with React 18.3 or 19 on Tailwind CSS v4, in any shadcn project. What's tested
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { Clock, Hourglass } from "lucide-react";
import { DealCard } from "@/components/ui/notchset/blocks/deal-card";
import { Avatar } from "@/components/ui/notchset/avatar";
import { CompanyMark } from "@/components/ui/notchset/company-mark";
/* the companies' own marks, 24×24 paths as the CRM seed draws them */
const GLYPH: Record<string, string> = {
airtable: "M11.992 1.966c-.434 0-.87.086-1.28.257L1.779 5.917c-.503.208-.49.908.012 1.116l8.982 3.558a3.266 3.266 0 0 0 2.454 0l8.982-3.558c.503-.196.503-.908.012-1.116l-8.957-3.694a3.255 3.255 0 0 0-1.272-.257zM23.4 8.056a.589.589 0 0 0-.222.045l-10.012 3.877a.612.612 0 0 0-.38.564v8.896a.6.6 0 0 0 .821.552L23.62 18.1a.583.583 0 0 0 .38-.551V8.653a.6.6 0 0 0-.6-.596zM.676 8.095a.644.644 0 0 0-.48.19C.086 8.396 0 8.53 0 8.69v8.355c0 .442.515.737.908.54l6.27-3.006.307-.147 2.969-1.436c.466-.22.43-.908-.061-1.092L.883 8.138a.57.57 0 0 0-.207-.044z",
stripe: "M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z",
revolut: "M20.9133 6.9566C20.9133 3.1208 17.7898 0 13.9503 0H2.424v3.8605h10.9782c1.7376 0 3.177 1.3651 3.2087 3.043.016.84-.2994 1.633-.8878 2.2324-.5886.5998-1.375.9303-2.2144.9303H9.2322a.2756.2756 0 0 0-.2755.2752v3.431c0 .0585.018.1142.052.1612L16.2646 24h5.3114l-7.2727-10.094c3.6625-.1838 6.61-3.2612 6.61-6.9494zM6.8943 5.9229H2.424V24h4.4704z",
};
export default function DealCardDemo() {
const [picked, setPicked] = React.useState<string | null>(null);
return (
<div className="flex w-[280px] flex-col gap-2">
<DealCard
id="d1"
mark={<CompanyMark name="Airtable" color="#18bfff" glyph={GLYPH.airtable} />}
company="Airtable"
value="$48k"
title="Platform rollout · 120 seats"
when="Closes Nov 7"
near
owner={<Avatar name="Ana Ruiz" size={20} />}
age={{ text: "4 d", title: "4 days in Proposal, usually 9" }}
selected={picked === "d1"}
onOpen={() => setPicked("d1")}
/>
<DealCard
id="d2"
mark={<CompanyMark name="Stripe" color="#635bff" glyph={GLYPH.stripe} />}
company="Stripe"
value="$152k"
title="Expansion · EU region"
when="Closes Dec 12"
flag={{ tone: "warn", icon: <Hourglass />, text: "Stuck 14 days", hint: "Security review usually takes 11 days" }}
owner={<Avatar name="Marcus Bell" size={20} />}
selected={picked === "d2"}
onOpen={() => setPicked("d2")}
/>
<DealCard
id="d3"
mark={<CompanyMark name="Revolut" color="#191c1f" glyph={GLYPH.revolut} />}
company="Revolut"
value="$97.5k"
title="Pilot to annual"
when="Closes Nov 14"
flag={{ tone: "bad", icon: <Clock />, text: "Next step is late" }}
owner={<Avatar name="Lena Ortiz" size={20} />}
selected={picked === "d3"}
onOpen={() => setPicked("d3")}
/>
</div>
);
}This example also uses Avatar, Company mark, lucide-react. This command installs them with it, so the example pastes as it is:
pnpm dlx shadcn@latest add @notchset-pro/deal-card @notchset/avatar @notchset/company-markSource
components/ui/notchset/blocks/deal-card.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Props
id–stringRequired.
mark–React.ReactNodeRequired.
company–stringRequired.
value–stringRequired.
title–stringRequired.
flag–{ tone: "bad" | "warn"; icon: React.ReactNode; text: string; hint?: string | undefined }The one exception worth a line.
Show all 14 propsShow fewer
when–stringRequired.
near–booleanowner–React.ReactNodeRequired.
age–{ text: string; title: string }Days in its stage, short ("4 d"), with the long form for its title ("4 days in Proposal, usually 9").
aside–React.ReactNodeA quiet mark beside the name (gone quiet), shown when there is no flag.
selected–booleandimmed–booleanonOpen–() => voidRequired.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Where agents read it
- Guide for this component: https://notchset.dev/md/deal-card.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Changelog
v3.0.0 · 2026-10-21breaking
The days-in-stage hairline is gone (no progress prop): a stuck deal says so in its one line of words; to keep a meter, place a Meter under the card. A lens's dimmed card recedes its chrome, never its words (data-dimmed).
v2.0.0 · 2026-10-13
Released with the Notchset system.
Used in
The same file, at work in a finished app. Open it live and find it on its pages.
Part of a kit
Pipeline and deals. A board of deals by stage, each deal's next step, and the totals that move as you work.
3 free · 6 ProSee the Pipeline and deals kit
Part of
Included with Pro
Pro is in early access.
