Signature Pad

1import { SignaturePad } from "@/components/ui/signature-pad";
2
3<SignaturePad />

1"use client";
2
3import {
4  SignaturePad as ArkSignaturePad,
5  useSignaturePadContext,
6} from "@ark-ui/react/signature-pad";
7import { RotateCcw } from "lucide-react";
8import type React from "react";
9import { cn } from "@/lib/utils";
10import { Button } from "@/registry/react/components/button";
11
12export const useSignaturePad = useSignaturePadContext;
13
14export const SignaturePad = (
15  props: React.ComponentProps<typeof ArkSignaturePad.Root>
16) => {
17  const { className, ...rest } = props;
18
19  return (
20    <ArkSignaturePad.Root
21      className={cn(
22        "h-40 min-h-40 w-full",
23        "flex flex-col gap-1.5",
24        "data-disabled:opacity-64 data-disabled:grayscale",
25        className
26      )}
27      data-slot="signature-pad"
28      {...rest}