drag-handle

Grip indicator for drag-and-drop reordering.

Source Code

View the full component source code below.

import * as React from "react"
import { GripVertical } from "@/lib/icons"

import { cn } from "@/lib/utils"

function DragHandle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="drag-handle" data-portal="https://design.nyuchi.com/components/drag-handle"
      aria-hidden="true"
      className={cn(
        "flex cursor-grab items-center justify-center text-muted-foreground transition-colors hover:text-foreground active:cursor-grabbing",
        className
      )}
      {...props}
    >
      <GripVertical className="size-4" />
    </div>
  )
}

export { DragHandle }

Installation

npx shadcn@latest add https://mzizi.dev/api/v1/ui/drag-handle

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/drag-handle

Source

components/ui/drag-handle.tsx