Draggable Card

The Draggable Card component provides a powerful way to display and interact with cards, featuring drag and drop functionality. Built using dnd-kit, it offers a comprehensive solution for complex drag and drop interactions.

Tip

Try dragging the cards to reorder them. The component handles all the drag and drop interactions for you.

Usage

import { DraggableCard, DraggableCardList, CardData } from '@harnessio/ui/components'

// Define your cards
const [cards, setCards] = useState<CardData[]>([
  {
    id: '1',
    title: 'First Card',
    description: 'This is the first card description',
    disabled: false // Optional: disable dragging for this card
  },
  {
    id: '2',
    title: 'Second Card',
    description: 'This is the second card description'
  }
])

// Use the DraggableCardList to render and manage the cards
return (
  <DraggableCardList
    cards={cards}
    setCards={setCards}
  />
)

Advanced Example

You can customize the card titles and descriptions with React components:

const [cards, setCards] = useState<CardData[]>([
  {
    id: '1',
    title: (
      <div className="flex items-center justify-between w-full">
        <span>Card with Custom Title</span>
        <IconV2 name="settings" size="sm" />
      </div>
    ),
    description: (
      <div className="space-y-2">
        <p>This card has a custom description component</p>
        <Button>Action Button</Button>
      </div>
    )
  }
])

Anatomy

The draggable card system consists of two main components:

// Individual card component
<DraggableCard
  id="unique-id"
  title="Card Title"
  description="Card Description"
  disabled={false}
/>

// List component that manages multiple cards
<DraggableCardList
  cards={cardsArray}
  setCards={setCardsFunction}
/>

API Reference

DraggableCard

The individual card component that can be dragged and reordered.

Prop	Required	Default	Type
id	true		string
title	true		string | ReactNode
description	false		string | ReactNode
disabled	false		boolean

DraggableCardList

A container component that manages a list of draggable cards.

Prop	Required	Default	Type
cards	true		CardData[]
setCards	true		(newCards: CardData[]) => void

CardData Interface

The interface for the card data objects used by the DraggableCardList component.

interface CardData {
  id: string;
  title: string | React.ReactNode;
  description?: string | React.ReactNode;
  disabled?: boolean;
}