diff --git a/components/docs/interactive-examples.tsx b/components/docs/interactive-examples.tsx
deleted file mode 100644
index 1c787de..0000000
--- a/components/docs/interactive-examples.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { AlertDialogProvider, useAlert } from "@/registry/radix-nova/alert-provider";
-import { Button } from "@/registry/radix-nova/button";
-import { ConfirmDialogProvider, useConfirm } from "@/registry/radix-nova/confirm-provider";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/registry/radix-nova/dialog";
-import { LoadingButton } from "@/registry/radix-nova/loading-button";
-
-const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-function AlertExampleContent() {
-	const alert = useAlert();
-	const [status, setStatus] = useState("No alert shown yet.");
-
-	const openAlert = async () => {
-		await alert({
-			title: "Heads up",
-			description: "This is an interactive alert demo.",
-			buttonLabel: "Understood",
-		});
-		setStatus("Alert dismissed.");
-	};
-
-	return (
-		<div className="space-y-2">
-			<Button type="button" onClick={() => void openAlert()}>
-				Open Alert
-			</Button>
-			<p className="text-xs text-muted-foreground">{status}</p>
-		</div>
-	);
-}
-
-function ConfirmExampleContent() {
-	const confirm = useConfirm();
-	const [status, setStatus] = useState("No decision yet.");
-
-	const openConfirm = async () => {
-		const isConfirmed = await confirm({
-			title: "Delete item?",
-			description: "This action cannot be undone.",
-			confirmButtonText: "Delete",
-			cancelButtonText: "Cancel",
-			variant: "destructive",
-			requireConfirmationInput: {
-				confirmTerm: "DELETE",
-				hint: "Type DELETE to enable the button.",
-			},
-		});
-		setStatus(isConfirmed ? "Confirmed." : "Cancelled.");
-	};
-
-	return (
-		<div className="space-y-2">
-			<Button type="button" variant="destructive" onClick={() => void openConfirm()}>
-				Open Confirm
-			</Button>
-			<p className="text-xs text-muted-foreground">{status}</p>
-		</div>
-	);
-}
-
-export function AlertDialogInteractiveExample() {
-	return (
-		<AlertDialogProvider>
-			<AlertExampleContent />
-		</AlertDialogProvider>
-	);
-}
-
-export function ButtonInteractiveExample() {
-	return (
-		<div className="flex flex-wrap gap-3">
-			<Button>Default</Button>
-			<Button variant="outline">Outline</Button>
-			<Button size="sm">Small</Button>
-		</div>
-	);
-}
-
-export function ConfirmDialogInteractiveExample() {
-	return (
-		<ConfirmDialogProvider>
-			<ConfirmExampleContent />
-		</ConfirmDialogProvider>
-	);
-}
-
-export function DialogInteractiveExample() {
-	return (
-		<Dialog>
-			<DialogTrigger asChild>
-				<Button type="button">Open Dialog</Button>
-			</DialogTrigger>
-			<DialogContent closeLabel="Close dialog">
-				<DialogHeader>
-					<DialogTitle>Profile updated</DialogTitle>
-					<DialogDescription>
-						This example uses custom close labels and the footer close button.
-					</DialogDescription>
-				</DialogHeader>
-				<DialogFooter showCloseButton closeLabel="Dismiss" />
-			</DialogContent>
-		</Dialog>
-	);
-}
-
-export function LoadingButtonInteractiveExample() {
-	const [isLoading, setIsLoading] = useState(false);
-	const [count, setCount] = useState(0);
-
-	const triggerLoading = async () => {
-		setIsLoading(true);
-		await wait(1200);
-		setIsLoading(false);
-		setCount((prev) => prev + 1);
-	};
-
-	return (
-		<div className="space-y-2">
-			<LoadingButton type="button" isLoading={isLoading} onClick={() => void triggerLoading()}>
-				{isLoading ? "Submitting..." : "Submit"}
-			</LoadingButton>
-			<p className="text-xs text-muted-foreground">Completed: {count}</p>
-		</div>
-	);
-}
diff --git a/components/docs/interactive-examples/alert-dialog.tsx b/components/docs/interactive-examples/alert-dialog.tsx
new file mode 100644
index 0000000..374aedb
--- /dev/null
+++ b/components/docs/interactive-examples/alert-dialog.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { useState } from "react"
+import { AlertDialogProvider, useAlert } from "@/registry/radix-nova/alert-provider"
+import { Button } from "@/registry/radix-nova/button"
+
+function AlertExampleContent() {
+  const alert = useAlert()
+  const [status, setStatus] = useState("No alert shown yet.")
+
+  const openAlert = async () => {
+    await alert({
+      title: "Heads up",
+      description: "This is an interactive alert demo.",
+      buttonLabel: "Understood",
+    })
+    setStatus("Alert dismissed.")
+  }
+
+  return (
+    <div className="space-y-2">
+      <Button type="button" onClick={() => void openAlert()}>
+        Open Alert
+      </Button>
+      <p className="text-xs text-muted-foreground">{status}</p>
+    </div>
+  )
+}
+
+export function AlertDialogInteractiveExample() {
+  return (
+    <AlertDialogProvider>
+      <AlertExampleContent />
+    </AlertDialogProvider>
+  )
+}
diff --git a/components/docs/interactive-examples/button.tsx b/components/docs/interactive-examples/button.tsx
new file mode 100644
index 0000000..cb67dfc
--- /dev/null
+++ b/components/docs/interactive-examples/button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "@/registry/radix-nova/button"
+
+export function ButtonInteractiveExample() {
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Button>Default</Button>
+      <Button variant="outline">Outline</Button>
+      <Button size="sm">Small</Button>
+    </div>
+  )
+}
diff --git a/components/docs/interactive-examples/confirm-dialog.tsx b/components/docs/interactive-examples/confirm-dialog.tsx
new file mode 100644
index 0000000..d50e2e7
--- /dev/null
+++ b/components/docs/interactive-examples/confirm-dialog.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/registry/radix-nova/button"
+import { ConfirmDialogProvider, useConfirm } from "@/registry/radix-nova/confirm-provider"
+
+function ConfirmExampleContent() {
+  const confirm = useConfirm()
+  const [status, setStatus] = useState("No decision yet.")
+
+  const openConfirm = async () => {
+    const isConfirmed = await confirm({
+      title: "Delete item?",
+      description: "This action cannot be undone.",
+      confirmButtonText: "Delete",
+      cancelButtonText: "Cancel",
+      variant: "destructive",
+      requireConfirmationInput: {
+        confirmTerm: "DELETE",
+        hint: "Type DELETE to enable the button.",
+      },
+    })
+    setStatus(isConfirmed ? "Confirmed." : "Cancelled.")
+  }
+
+  return (
+    <div className="space-y-2">
+      <Button type="button" variant="destructive" onClick={() => void openConfirm()}>
+        Open Confirm
+      </Button>
+      <p className="text-xs text-muted-foreground">{status}</p>
+    </div>
+  )
+}
+
+export function ConfirmDialogInteractiveExample() {
+  return (
+    <ConfirmDialogProvider>
+      <ConfirmExampleContent />
+    </ConfirmDialogProvider>
+  )
+}
diff --git a/components/docs/interactive-examples/dialog.tsx b/components/docs/interactive-examples/dialog.tsx
new file mode 100644
index 0000000..3552cd4
--- /dev/null
+++ b/components/docs/interactive-examples/dialog.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@/registry/radix-nova/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/radix-nova/dialog"
+
+export function DialogInteractiveExample() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent closeLabel="Close dialog">
+        <DialogHeader>
+          <DialogTitle>Profile updated</DialogTitle>
+          <DialogDescription>
+            This example uses custom close labels and the footer close button.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter showCloseButton closeLabel="Dismiss" />
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/docs/interactive-examples/filepicker-dropzone.tsx b/components/docs/interactive-examples/filepicker-dropzone.tsx
new file mode 100644
index 0000000..546a40e
--- /dev/null
+++ b/components/docs/interactive-examples/filepicker-dropzone.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useState } from "react"
+import { FilepickerDropzone } from "@/registry/radix-nova/filepicker-dropzone"
+
+export function FilepickerDropzoneInteractiveExample() {
+  const [files, setFiles] = useState<string[]>([])
+
+  return (
+    <div className="space-y-2">
+      <FilepickerDropzone
+        id="docs-filepicker-dropzone"
+        label="Upload files"
+        description="PDF, PNG, and JPG up to 1MB each."
+        accept={{
+          "application/pdf": [".pdf"],
+          "image/png": [".png"],
+          "image/jpeg": [".jpg", ".jpeg"],
+        }}
+        multiple
+        maxSize={1 * 1024 * 1024}
+        onChange={(selectedFiles) => {
+          setFiles(selectedFiles.map((file) => file.name))
+        }}
+      />
+      <p className="text-xs text-muted-foreground">
+        {files.length > 0 ? `${files.length} file(s): ${files.join(", ")}` : "No files selected yet."}
+      </p>
+    </div>
+  )
+}
diff --git a/components/docs/interactive-examples/index.ts b/components/docs/interactive-examples/index.ts
new file mode 100644
index 0000000..a1e873e
--- /dev/null
+++ b/components/docs/interactive-examples/index.ts
@@ -0,0 +1,6 @@
+export { AlertDialogInteractiveExample } from "./alert-dialog"
+export { ButtonInteractiveExample } from "./button"
+export { ConfirmDialogInteractiveExample } from "./confirm-dialog"
+export { DialogInteractiveExample } from "./dialog"
+export { FilepickerDropzoneInteractiveExample } from "./filepicker-dropzone"
+export { LoadingButtonInteractiveExample } from "./loading-button"
diff --git a/components/docs/interactive-examples/loading-button.tsx b/components/docs/interactive-examples/loading-button.tsx
new file mode 100644
index 0000000..9586608
--- /dev/null
+++ b/components/docs/interactive-examples/loading-button.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import { useState } from "react"
+import { LoadingButton } from "@/registry/radix-nova/loading-button"
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+export function LoadingButtonInteractiveExample() {
+  const [isLoading, setIsLoading] = useState(false)
+  const [count, setCount] = useState(0)
+
+  const triggerLoading = async () => {
+    setIsLoading(true)
+    await wait(1200)
+    setIsLoading(false)
+    setCount((prev) => prev + 1)
+  }
+
+  return (
+    <div className="space-y-2">
+      <LoadingButton type="button" isLoading={isLoading} onClick={() => void triggerLoading()}>
+        {isLoading ? "Submitting..." : "Submit"}
+      </LoadingButton>
+      <p className="text-xs text-muted-foreground">Completed: {count}</p>
+    </div>
+  )
+}
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
new file mode 100644
index 0000000..52a4492
--- /dev/null
+++ b/components/ui/field.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
+  variants: {
+    orientation: {
+      vertical:
+        "flex-col *:w-full [&>.sr-only]:w-auto",
+      horizontal:
+        "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      responsive:
+        "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..b83c5eb
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/content/docs/components/filepicker-dropzone.mdx b/content/docs/components/filepicker-dropzone.mdx
new file mode 100644
index 0000000..87c503b
--- /dev/null
+++ b/content/docs/components/filepicker-dropzone.mdx
@@ -0,0 +1,153 @@
+---
+title: Filepicker Dropzone
+description: A shadcn-styled dropzone file picker with translatable labels and practical upload options.
+---
+
+import { FilepickerDropzoneInteractiveExample } from "@/components/docs/interactive-examples";
+
+## Install
+
+```bash
+npx shadcn@latest add @c-ui/filepicker-dropzone
+```
+
+Direct URL install:
+
+```bash
+npx shadcn@latest add https://coneno.github.io/c-ui/r/radix-nova/filepicker-dropzone.json
+```
+
+## Live Example
+
+<div className="not-prose">
+	<FilepickerDropzoneInteractiveExample />
+</div>
+
+## Usage
+
+```tsx
+import { FilepickerDropzone } from "@/components/c-ui/filepicker-dropzone"
+
+export function UploadArea() {
+	return (
+		<FilepickerDropzone
+			id="invoice-upload"
+			label="Upload invoice"
+			description="PDF up to 10MB."
+			accept={{ "application/pdf": [".pdf"] }}
+			maxSize={10 * 1024 * 1024}
+			onChange={(files) => {
+				console.log(files)
+			}}
+		/>
+	)
+}
+```
+
+## React Hook Form
+
+```tsx
+"use client"
+
+import { Controller, useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+
+import { FilepickerDropzone } from "@/components/c-ui/filepicker-dropzone"
+import { Button } from "@/components/ui/button"
+
+const formSchema = z.object({
+	attachments: z
+		.array(z.instanceof(File))
+		.min(1, "Please upload at least one file.")
+		.max(3, "You can upload up to 3 files."),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+export function UploadForm() {
+	const form = useForm<FormValues>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			attachments: [],
+		},
+	})
+
+	const onSubmit = (values: FormValues) => {
+		console.log(values.attachments)
+	}
+
+	return (
+		<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+			<Controller
+				control={form.control}
+				name="attachments"
+				render={({ field, fieldState }) => (
+					<FilepickerDropzone
+						id="form-rhf-attachments"
+						name={field.name}
+						multiple
+						maxFiles={3}
+						maxSize={5 * 1024 * 1024}
+						accept={{
+							"application/pdf": [".pdf"],
+							"image/png": [".png"],
+							"image/jpeg": [".jpg", ".jpeg"],
+						}}
+						label="Attachments"
+						description="Upload up to 3 files. PDF, PNG, JPG. Max 5MB each."
+						error={fieldState.error?.message}
+						onChange={(files) => {
+							field.onChange([...files])
+							form.clearErrors("attachments")
+						}}
+						onDropRejected={() => {
+							if (!fieldState.error) {
+								form.setError("attachments", {
+									type: "manual",
+									message: "Some files were rejected. Check type, size, and count limits.",
+								})
+							}
+						}}
+					/>
+				)}
+			/>
+
+			<div className="flex gap-2">
+				<Button type="button" variant="outline" onClick={() => form.reset()}>
+					Reset
+				</Button>
+				<Button type="submit">Submit</Button>
+			</div>
+		</form>
+	)
+}
+```
+
+## Configuration
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `id` | `string` | required | Input id and label binding |
+| `name` | `string` | `undefined` | Native input name |
+| `label` | `ReactNode` | `undefined` | Optional field label |
+| `description` | `ReactNode` | `undefined` | Helper text below label |
+| `error` | `ReactNode` | `undefined` | Optional error message below the dropzone |
+| `accept` | `Accept` | `undefined` | Accepted MIME types/extensions |
+| `multiple` | `boolean` | `false` | Allow selecting multiple files |
+| `disabled` | `boolean` | `false` | Disable picking and drag/drop |
+| `required` | `boolean` | `false` | Mark input as required |
+| `maxFiles` | `number` | `undefined` | Maximum accepted files |
+| `maxSize` | `number` | `undefined` | Max file size in bytes |
+| `minSize` | `number` | `undefined` | Min file size in bytes |
+| `labels` | `Partial<FilepickerDropzoneLabels>` | defaults provided | Override all user-facing copy for i18n, including `selectedCount` template (`{{count}}` or `{count}`) and rejection messages (`rejectInvalidType`, `rejectTooLarge`, `rejectTooSmall`, `rejectTooMany`) |
+| `dropzoneClassName` | `string` | `undefined` | Extend dropzone container styles |
+| `labelClassName` | `string` | `undefined` | Extend field label styles |
+| `contentClassName` | `string` | `undefined` | Extend field content layout styles |
+| `descriptionClassName` | `string` | `undefined` | Extend description styles |
+| `errorClassName` | `string` | `undefined` | Extend error styles |
+| `icon` | `ReactNode` | upload icon | Replace default icon |
+| `onChange` | `(files) => void` | `undefined` | Called when accepted files change |
+| `onDropRejected` | `(rejections) => void` | `undefined` | Called when dropped files are rejected |
+
+All additional native `<div>` props are forwarded to the wrapper element.
diff --git a/package.json b/package.json
index f9ca16f..1da1948 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
 		"radix-ui": "^1.4.3",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
+		"react-dropzone": "^15.0.0",
 		"tailwind-merge": "^3.5.0"
 	}
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9db1fd9..b1bb46a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       react-dom:
         specifier: ^19.2.4
         version: 19.2.4(react@19.2.4)
+      react-dropzone:
+        specifier: ^15.0.0
+        version: 15.0.0(react@19.2.4)
       tailwind-merge:
         specifier: ^3.5.0
         version: 3.5.0
@@ -1978,6 +1981,10 @@ packages:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
 
+  attr-accept@2.2.5:
+    resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
+    engines: {node: '>=4'}
+
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -2616,6 +2623,10 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
+  file-selector@2.1.2:
+    resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
+    engines: {node: '>= 12'}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -3932,6 +3943,12 @@ packages:
     peerDependencies:
       react: ^19.2.4
 
+  react-dropzone@15.0.0:
+    resolution: {integrity: sha512-lGjYV/EoqEjEWPnmiSvH4v5IoIAwQM2W4Z1C0Q/Pw2xD0eVzKPS359BQTUMum+1fa0kH2nrKjuavmTPOGhpLPg==}
+    engines: {node: '>= 10.13'}
+    peerDependencies:
+      react: '>= 16.8 || 18.0.0'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -6518,6 +6535,8 @@ snapshots:
 
   async-function@1.0.0: {}
 
+  attr-accept@2.2.5: {}
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.1.0
@@ -7334,6 +7353,10 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
+  file-selector@2.1.2:
+    dependencies:
+      tslib: 2.8.1
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -8974,6 +8997,13 @@ snapshots:
       react: 19.2.4
       scheduler: 0.27.0
 
+  react-dropzone@15.0.0(react@19.2.4):
+    dependencies:
+      attr-accept: 2.2.5
+      file-selector: 2.1.2
+      prop-types: 15.8.1
+      react: 19.2.4
+
   react-is@16.13.1: {}
 
   react-medium-image-zoom@5.4.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
diff --git a/registry.json b/registry.json
index b57b179..edf4ea6 100644
--- a/registry.json
+++ b/registry.json
@@ -95,6 +95,27 @@
 				}
 			],
 			"style": "radix-nova"
+		},
+		{
+			"name": "filepicker-dropzone",
+			"type": "registry:component",
+			"title": "Filepicker Dropzone",
+			"description": "A shadcn-styled file picker dropzone with translatable labels.",
+			"registryDependencies": [
+				"@shadcn/field"
+			],
+			"dependencies": [
+				"react-dropzone",
+				"lucide-react"
+			],
+			"files": [
+				{
+					"path": "registry/radix-nova/filepicker-dropzone.tsx",
+					"type": "registry:component",
+					"target": "components/c-ui/filepicker-dropzone.tsx"
+				}
+			],
+			"style": "radix-nova"
 		}
 	]
-}
\ No newline at end of file
+}
diff --git a/registry/radix-nova/filepicker-dropzone.tsx b/registry/radix-nova/filepicker-dropzone.tsx
new file mode 100644
index 0000000..d2ab151
--- /dev/null
+++ b/registry/radix-nova/filepicker-dropzone.tsx
@@ -0,0 +1,285 @@
+"use client"
+
+import { FileUpIcon } from "lucide-react"
+import {
+  useDropzone,
+  type Accept,
+  type FileRejection,
+  type FileWithPath,
+} from "react-dropzone"
+
+import { cn } from "@/lib/utils"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "@/components/ui/field"
+import { useCallback, useEffect, useEffectEvent, useMemo } from "react"
+
+export interface FilepickerDropzoneLabels {
+  upload: string
+  drag: string
+  active: string
+  reject: string
+  rejectInvalidType: string
+  rejectTooLarge: string
+  rejectTooSmall: string
+  rejectTooMany: string
+  selectedCount: string
+}
+
+export interface FilepickerDropzoneProps
+  extends Omit<React.ComponentProps<typeof Field>, "children" | "onChange"> {
+  id: string
+  name?: string
+  label?: React.ReactNode
+  description?: React.ReactNode
+  error?: React.ReactNode
+  accept?: Accept
+  multiple?: boolean
+  disabled?: boolean
+  required?: boolean
+  maxFiles?: number
+  maxSize?: number
+  minSize?: number
+  icon?: React.ReactNode
+  labelClassName?: string
+  contentClassName?: string
+  descriptionClassName?: string
+  errorClassName?: string
+  dropzoneClassName?: string
+  labels?: Partial<FilepickerDropzoneLabels>
+  onChange?: (files: readonly FileWithPath[]) => void
+  onDropRejected?: (fileRejections: FileRejection[]) => void
+}
+
+const defaultLabels: FilepickerDropzoneLabels = {
+  upload: "Click to pick file",
+  drag: "or drag and drop",
+  active: "Drop files here",
+  reject: "Some files are not allowed",
+  rejectInvalidType: "One or more files have an invalid type.",
+  rejectTooLarge: "One or more files exceed the maximum size.",
+  rejectTooSmall: "One or more files are below the minimum size.",
+  rejectTooMany: "Too many files selected.",
+  selectedCount: "{{count}} files selected",
+}
+
+function interpolateCount(template: string, count: number) {
+  return template.replace(/\{\{\s*count\s*\}\}|\{count\}/g, String(count))
+}
+
+function FilepickerDropzone({
+  id,
+  name,
+  label,
+  description,
+  error,
+  accept,
+  multiple = false,
+  disabled = false,
+  required = false,
+  maxFiles,
+  maxSize,
+  minSize,
+  icon,
+  className,
+  labelClassName,
+  contentClassName,
+  descriptionClassName,
+  errorClassName,
+  dropzoneClassName,
+  labels,
+  onChange,
+  onDropRejected,
+  ...props
+}: FilepickerDropzoneProps) {
+  const mergedLabels = { ...defaultLabels, ...labels }
+  const descriptionId = description ? `${id}-description` : undefined
+
+  const onAcceptedFilesChange = useEffectEvent(
+    (files: readonly FileWithPath[]) => {
+      onChange?.(files)
+    }
+  )
+
+  const onRejectedFiles = useCallback(
+    (rejections: FileRejection[]) => {
+      onDropRejected?.(rejections)
+    },
+    [onDropRejected]
+  )
+
+  const {
+    acceptedFiles,
+    fileRejections,
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragReject,
+    isFocused,
+  } = useDropzone({
+    accept,
+    multiple,
+    disabled,
+    maxFiles,
+    maxSize,
+    minSize,
+    onDropRejected: onRejectedFiles,
+  })
+
+  const rejectionMessages = useMemo(() => {
+    if (fileRejections.length === 0) {
+      return []
+    }
+
+    const codes = new Set(
+      fileRejections.flatMap((rejection) =>
+        rejection.errors.map((dropzoneError) => dropzoneError.code)
+      )
+    )
+
+    const messages: string[] = []
+
+    if (codes.has("file-invalid-type")) {
+      messages.push(mergedLabels.rejectInvalidType)
+    }
+
+    if (codes.has("file-too-large")) {
+      messages.push(mergedLabels.rejectTooLarge)
+    }
+
+    if (codes.has("file-too-small")) {
+      messages.push(mergedLabels.rejectTooSmall)
+    }
+
+    if (codes.has("too-many-files")) {
+      messages.push(mergedLabels.rejectTooMany)
+    }
+
+    if (messages.length === 0) {
+      messages.push(mergedLabels.reject)
+    }
+
+    return messages
+  }, [
+    fileRejections,
+    mergedLabels.reject,
+    mergedLabels.rejectInvalidType,
+    mergedLabels.rejectTooLarge,
+    mergedLabels.rejectTooSmall,
+    mergedLabels.rejectTooMany,
+  ])
+
+  const hasError = Boolean(error) || rejectionMessages.length > 0
+  const errorId = hasError ? `${id}-error` : undefined
+  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || undefined
+
+  useEffect(() => {
+    onAcceptedFilesChange(acceptedFiles)
+  }, [acceptedFiles])
+
+  const selectedCountLabel = interpolateCount(
+    mergedLabels.selectedCount,
+    acceptedFiles.length
+  )
+
+  return (
+    <Field
+      data-component="filepicker-dropzone"
+      data-disabled={disabled ? true : undefined}
+      data-invalid={hasError ? true : undefined}
+      className={cn(className)}
+      {...props}
+    >
+      {label && (
+        <FieldLabel htmlFor={id} className={labelClassName}>
+          {label}
+        </FieldLabel>
+      )}
+
+      <FieldContent className={contentClassName}>
+        {description && (
+          <FieldDescription id={descriptionId} className={descriptionClassName}>
+            {description}
+          </FieldDescription>
+        )}
+
+        <div
+          {...getRootProps({
+            className: cn(
+              "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative rounded-lg border border-dashed bg-transparent p-4 transition-colors outline-none focus-visible:ring-3 aria-invalid:ring-3",
+              disabled
+                ? "bg-input/50 dark:bg-input/80 pointer-events-none cursor-not-allowed opacity-50"
+                : "cursor-pointer hover:bg-muted/30",
+              isDragActive && "border-primary bg-primary/5",
+              isDragReject && "border-destructive/60 bg-destructive/5",
+              isFocused && "border-ring ring-ring/50 ring-3",
+              dropzoneClassName
+            ),
+            "aria-invalid": hasError ? true : undefined,
+          })}
+        >
+          <input
+            {...getInputProps({
+              id,
+              name,
+              required,
+              "aria-describedby": describedBy,
+              "aria-invalid": hasError ? true : undefined,
+            })}
+          />
+          <div className="flex min-h-14 flex-col items-center justify-center gap-2 text-center">
+            <span
+              className={cn(
+                "text-muted-foreground",
+                isDragActive && "text-primary",
+                isDragReject && "text-destructive"
+              )}
+              aria-hidden="true"
+            >
+              {icon ?? <FileUpIcon className="size-6" />}
+            </span>
+            <p className="text-sm">
+              {isDragReject && (
+                <span className="text-destructive font-medium">
+                  {mergedLabels.reject}
+                </span>
+              )}
+              {!isDragReject && isDragActive && (
+                <span className="text-primary font-medium">{mergedLabels.active}</span>
+              )}
+              {!isDragReject && !isDragActive && acceptedFiles.length > 0 && (
+                <span className="font-medium">{selectedCountLabel}</span>
+              )}
+              {!isDragReject && !isDragActive && acceptedFiles.length === 0 && (
+                <>
+                  <span className="text-foreground font-medium">
+                    {mergedLabels.upload}
+                  </span>{" "}
+                  <span className="text-muted-foreground">{mergedLabels.drag}</span>
+                </>
+              )}
+            </p>
+          </div>
+        </div>
+
+        {error ? (
+          <FieldError id={errorId} className={errorClassName}>
+            {error}
+          </FieldError>
+        ) : rejectionMessages.length > 0 ? (
+          <FieldError
+            id={errorId}
+            className={errorClassName}
+            errors={rejectionMessages.map((message) => ({ message }))}
+          />
+        ) : null}
+      </FieldContent>
+    </Field>
+  )
+}
+
+export { FilepickerDropzone }