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-cn-xs">
        <p>This card has a custom description component</p>
        <Button>Action Button</Button>
      </div>
    )
  }
])

Example with Actions

This example shows how to add interactive elements like close buttons to your draggable cards:

Grip Position Outside

The draggable card supports placing the grip handle outside the card container using gripPosition="outside". This creates a cleaner card appearance with the drag handle positioned to the left of the card.

Sticky Headers

Use the sticky and header props on DraggableCardList for the common pattern of a pinned header above a draggable list inside a scrollable drawer. These props wrap the list in a StickyListSection internally.

Contained Mode (inside form wrappers)

Use contained when the DraggableCardList is nested inside form input wrappers or other intermediate elements, but the drawer body is still the scroll container. Set --cn-sticky-container-padding on an ancestor to control how far the header bleeds horizontally.

Tip

The sticky headers bleed to the drawer edges using --cn-sticky-container-padding, even though the lists are nested inside ControlGroup and Layout.Vertical wrappers.

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
header	false		ReactNode
sticky	false		boolean
contained	false		boolean
listGap	false		'xs' | 'sm' | 'md'

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;
}