A
Airy

Kanban Card

Cards

Composable kanban card with status indicator, title, description, detail rows, and tag pills. Pair with the kanban-board block for full drag-and-drop kanban boards.

Preview

Status Variants

Cards support neutral, info, warning, success, and destructive status indicators.

123 Main Street

$1,200,000 Refinance

Acme Capital
MultifamilyNew York, NY

456 Oak Avenue

$3,500,000 Acquisition

Skyline Partners
OfficeChicago, IL

789 Pine Boulevard

$850,000 Bridge Loan

Harbor Group
RetailMiami, FL

321 Elm Drive

$2,100,000 Construction

IndustrialDallas, TX

555 Cedar Lane

$4,750,000 Permanent

Summit Realty
HotelSan Francisco, CA

With Action Slot

Use KanbanCardAction for right-aligned actions like a lock icon or menu trigger.

View-only Deal

$2,000,000 Refinance

Read-Only Corp
OfficeBoston, MA

Minimal

All sub-components are optional. Use only what you need.

Simple Task

Board Integration

Combine with the kanban-board block for drag-and-drop. The board provides columns, drop zones, and a KanbanBoardDraggableCard wrapper. Try dragging cards between columns below.

Under Review
2

  1. 123 Main Street

    $1.2M Refinance

    Acme Capital
    MultifamilyNew York, NY

  2. 456 Oak Avenue

    $3.5M Acquisition

    Skyline Partners
    OfficeChicago, IL
Active
1

  1. 789 Pine Blvd

    $850K Bridge Loan

    Harbor Group
    RetailMiami, FL
Closing
1

  1. 321 Elm Drive

    $2.1M Construction

    IndustrialDallas, TX
Closed
1

  1. 555 Cedar Lane

    $4.75M Permanent

    Summit Realty
    HotelSan Francisco, CA
import {
  KanbanBoard,
  KanbanBoardDroppableColumn,
  KanbanBoardColumnHeader,
  KanbanBoardColumnBody,
  KanbanBoardDraggableCard,
} from "@/components/blocks/kanban-board"

<KanbanBoard>
  <KanbanBoardDroppableColumn droppable={{ id: "todo" }}>
    <KanbanBoardColumnHeader>To Do</KanbanBoardColumnHeader>
    <KanbanBoardColumnBody>
      <KanbanBoardDraggableCard draggable={{ id: "card-1" }}>
        {(draggable) => (
          <KanbanCard>
            <KanbanCardHeader>
              <KanbanCardStatus variant="neutral" />
              <KanbanCardTitle>Task 1</KanbanCardTitle>
            </KanbanCardHeader>
          </KanbanCard>
        )}
      </KanbanBoardDraggableCard>
    </KanbanBoardColumnBody>
  </KanbanBoardDroppableColumn>
</KanbanBoard>

Install

Install the card block. For drag-and-drop boards, also install the board primitives.

npx shadcn@latest add @airy/kanban-card
npx shadcn@latest add @airy/kanban-board

Usage

Import the card sub-components:

import {
  KanbanCard,
  KanbanCardHeader,
  KanbanCardStatus,
  KanbanCardTitle,
  KanbanCardAction,
  KanbanCardDescription,
  KanbanCardDetail,
  KanbanCardTags,
  KanbanCardTag,
} from "@/components/blocks/cards/kanban-card"

Compose the card from its parts:

<KanbanCard>
  <KanbanCardHeader>
    <KanbanCardStatus variant="info" />
    <KanbanCardTitle>123 Main Street</KanbanCardTitle>
  </KanbanCardHeader>
  <KanbanCardDescription>$1.2M Refinance</KanbanCardDescription>
  <KanbanCardDetail icon={Store}>Acme Capital</KanbanCardDetail>
  <KanbanCardTags>
    <KanbanCardTag icon={Building2}>Multifamily</KanbanCardTag>
    <KanbanCardTag icon={MapPin}>New York, NY</KanbanCardTag>
  </KanbanCardTags>
</KanbanCard>