Dialog Modal Drawer

Forms

About

Dialog Modal with Cool animation, can be used as Modal, Dialog or Drawer, support Variants

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dialog Modal Drawer to your project and fits it to your theme.

Code

How Dialog Modal Drawer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// TODO: Add code

"use client"

import * as React from "react"

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

function Label({ className, ...props }: React.ComponentProps<"label">) {
  return (
    <label
      data-slot="label"
      className={cn(
        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
        className
      )}
      {...props}
    />
  )
}

export default Label