diff --git a/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx b/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
new file mode 100644
index 00000000000..500eca730a8
--- /dev/null
+++ b/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
@@ -0,0 +1,25 @@
+import {Button, Card, Container, Flex} from '@sanity/ui'
+import React from 'react'
+import {UploadPlaceholder} from '../common/UploadPlaceholder'
+
+export default function UploadPlaceholderStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={3}>
+      <Container width={1}>
+        <Card>
+          <UploadPlaceholder
+            accept="image/*"
+            acceptedFiles={[{name: 'foo.jpg', type: 'image/jpeg'}]}
+            browse={<Button text="Browse btn" mode="ghost" />}
+            directUploads
+            hoveringFiles={[{name: 'foo.jpg', type: 'image/jpeg'}]}
+            onUpload={() => null}
+            readOnly={false}
+            rejectedFilesCount={0}
+            type="image"
+          />
+        </Card>
+      </Container>
+    </Flex>
+  )
+}
diff --git a/packages/sanity/src/core/form/inputs/files/__workshop__/index.ts b/packages/sanity/src/core/form/inputs/files/__workshop__/index.ts
new file mode 100644
index 00000000000..7d3caf837e6
--- /dev/null
+++ b/packages/sanity/src/core/form/inputs/files/__workshop__/index.ts
@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'sanity/form/files',
+  title: 'Files',
+  stories: [
+    {
+      name: 'upload-placeholder',
+      title: 'UploadPlaceholder',
+      component: lazy(() => import('./UploadPlaceholderStory')),
+    },
+  ],
+})