Board

PRO

Records in columns by stage: drag to move, fold a stage.

Every shadcn style · one file

v2.1 · Updated Oct 21

Installation

pnpm dlx shadcn@latest add @notchset-pro/board

Needs 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 { CircleCheck, CircleX } from "lucide-react";
import { Board } from "@/components/ui/notchset/blocks/board";
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",
  webflow: "m24 4.515-7.658 14.97H9.149l3.205-6.204h-.144C9.566 16.713 5.621 18.973 0 19.485v-6.118s3.596-.213 5.71-2.435H0V4.515h6.417v5.278l.144-.001 2.622-5.277h4.854v5.244h.144l2.72-5.244H24Z",
  posthog: "M9.854 14.5 5 9.647.854 5.5A.5.5 0 0 0 0 5.854V8.44a.5.5 0 0 0 .146.353L5 13.647l.147.146L9.854 18.5l.146.147v-.049c.065.03.134.049.207.049h2.586a.5.5 0 0 0 .353-.854L9.854 14.5zm0-5-4-4a.487.487 0 0 0-.409-.144.515.515 0 0 0-.356.21.493.493 0 0 0-.089.288V8.44a.5.5 0 0 0 .147.353l9 9a.5.5 0 0 0 .853-.354v-2.585a.5.5 0 0 0-.146-.354l-5-5zm1-4a.5.5 0 0 0-.854.354V8.44a.5.5 0 0 0 .147.353l4 4a.5.5 0 0 0 .853-.354V9.854a.5.5 0 0 0-.146-.354l-4-4zm12.647 11.515a3.863 3.863 0 0 1-2.232-1.1l-4.708-4.707a.5.5 0 0 0-.854.354v6.585a.5.5 0 0 0 .5.5H23.5a.5.5 0 0 0 .5-.5v-.6c0-.276-.225-.497-.499-.532zm-5.394.032a.8.8 0 1 1 0-1.6.8.8 0 0 1 0 1.6zM.854 15.5a.5.5 0 0 0-.854.354v2.293a.5.5 0 0 0 .5.5h2.293c.222 0 .39-.135.462-.309a.493.493 0 0 0-.109-.545L.854 15.501zM5 14.647.854 10.5a.5.5 0 0 0-.854.353v2.586a.5.5 0 0 0 .146.353L4.854 18.5l.146.147h2.793a.5.5 0 0 0 .353-.854L5 14.647z",
};

const STAGE = { Discovery: "#8f9bb3", Evaluation: "#38a6d6", Proposal: "#9b87f5", "Security review": "#e3a33b" } as const;
type Stage = keyof typeof STAGE;
type Deal = { id: string; name: string; color: string; title: string; stage: Stage; value: number; close: string; owner: string; outcome?: "won" | "lost" };
const DEALS: Deal[] = [
  { id: "d1", name: "Airtable", color: "#18bfff", title: "Platform rollout · 120 seats", stage: "Proposal", value: 48000, close: "Nov 7", owner: "Ana Ruiz" },
  { id: "d2", name: "Stripe", color: "#635bff", title: "Expansion · EU region", stage: "Security review", value: 152000, close: "Dec 12", owner: "Marcus Bell" },
  { id: "d3", name: "Revolut", color: "#191c1f", title: "Pilot to annual", stage: "Proposal", value: 97500, close: "Nov 14", owner: "Lena Ortiz" },
  { id: "d4", name: "Webflow", color: "#146ef5", title: "Enterprise · 2-year", stage: "Evaluation", value: 214500, close: "Jan 30", owner: "Ana Ruiz" },
  { id: "d5", name: "PostHog", color: "#1d1f27", title: "Team plan", stage: "Discovery", value: 31000, close: "Feb 6", owner: "Kevin Ito" },
];
const money = (n: number) => `$${Math.round(n / 1000)}k`;

export default function BoardDemo() {
  const [deals, setDeals] = React.useState(DEALS);
  const [folded, setFolded] = React.useState<string[]>([]);
  /* a deal dropped on Won or Lost leaves the open columns (their counts and sums), and the line below says where it went */
  const closed = deals.filter((d) => d.outcome);
  return (
    // on a phone the board shows one stage and takes its own height (board.tsx), so the demo does too
    <div className="flex h-[460px] w-full flex-col gap-2 max-[600px]:h-auto">
      <Board
        className="min-h-0 flex-1"
        /* on a phone: one stage at a time, a strip of stages and a "Jump to a stage" sheet */
        phone="tabs"
        noun={["deal", "deals"]}
        columns={(Object.keys(STAGE) as Stage[]).map((s) => {
          const ds = deals.filter((d) => d.stage === s && !d.outcome);
          return {
            key: s,
            label: s,
            color: STAGE[s],
            count: ds.length,
            sum: money(ds.reduce((a, d) => a + d.value, 0)),
            folded: folded.includes(s),
            cards: ds.map((d) => (
              <DealCard key={d.id} id={d.id} mark={<CompanyMark name={d.name} color={d.color} glyph={GLYPH[d.name.toLowerCase()]} />} company={d.name} value={money(d.value)} title={d.title} when={`Closes ${d.close}`} owner={<Avatar name={d.owner} size={20} />} onOpen={() => {}} />
            )),
          };
        })}
        onFold={(k) => setFolded(folded.includes(k) ? folded.filter((x) => x !== k) : [...folded, k])}
        onMove={(id, to) => {
          if (to === "won" || to === "lost") setDeals(deals.map((d) => (d.id === id ? { ...d, outcome: to } : d)));
          else if (to in STAGE) setDeals(deals.map((d) => (d.id === id ? { ...d, stage: to as Stage } : d)));
          else return false;
          return true;
        }}
        onOpen={() => {}}
        ends={[
          { key: "won", label: "Won", icon: <CircleCheck />, tone: "ok" },
          { key: "lost", label: "Lost", icon: <CircleX />, tone: "bad" },
        ]}
      />
      <p aria-live="polite" className="m-0 min-h-5 px-[var(--ns-gutter)] text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">
        {closed.map((d) => `${d.name} ${d.outcome === "won" ? "won" : "lost"} · ${money(d.value)}`).join("  ·  ")}
      </p>
    </div>
  );
}

This example also uses Avatar, Company mark, Deal card. This command installs them with it, so the example pastes as it is:

pnpm dlx shadcn@latest add @notchset-pro/board @notchset/avatar @notchset/company-mark @notchset-pro/deal-card

Anatomy

Built fromBottom sheet Rolling number Tabs

Source

components/ui/notchset/blocks/board.tsx

This component is included with Pro.

Try the live preview above. Get Pro to install the source.

Get early access to All-Access

Props

columns–
BoardColumn[]
Required.
onFold–
(key: string) => void
Required.
onMove–
(cardId: string, to: string) => boolean | void
A card was dropped on a column or an end zone it isn't already in. Return false when the move was refused (offline, a rule): the card springs back with one ruby pulse; the app says why in one line.
onOpen–
(cardId: string) => void
Required.
ends[]
EndZone[]
phone"stack"
"stack" | "tabs"
How a phone (under 600px) shows it: every stage stacked open ("stack"), or one stage at a time with a strip of stages and a "Jump to a stage" sheet ("tabs").

Show all 9 props

stage–
string
The stage a phone shows in "tabs" (controlled); the first when unset.
onStageChange–
(key: string) => void
noun–
[string, string]
What a card is, singular and plural, for the phone header ("4 deals · $182k").