# Typewriter (/docs/components/typewriter-upload)



<ComponentPreview name="typewriter-upload" />

## Installation [#installation]

<Tabs items="[&#x22;Command&#x22;, &#x22;Manual&#x22;]">
  <Tab value="Command">
    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @uploadcn/typewriter-upload
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @uploadcn/typewriter-upload
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @uploadcn/typewriter-upload
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @uploadcn/typewriter-upload
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="Manual">
    Install [Upload](/docs/components/upload) and `motion`, then copy:

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install motion
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add motion
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add motion
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add motion
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ComponentSource name="typewriter-upload" />
  </Tab>
</Tabs>

## Usage [#usage]

```tsx
import { TypewriterUpload } from "@/components/typewriter-upload"
```

```tsx
<TypewriterUpload title="Manuscript" />
```

Names are typed a character at a time, but screen readers get the full name at once from a visually hidden copy. The page grows a line per file, and the keys press while uploads run. With reduced motion, text appears immediately and the keys stay still.

It uploads through your [adapter](/docs/storage) like every other component, so it works with S3, R2, Cloudinary, local disk or your own API.

## Props [#props]

<TypeTable
  type="{
  adapter: {
    type: &#x22;UploadAdapter&#x22;,
    description:
      &#x22;Where files go. Defaults to the UploadConfigProvider adapter.&#x22;,
  },
  uploader: {
    type: &#x22;Uploader&#x22;,
    description: &#x22;An uploader from `useUploader`, instead of options.&#x22;,
  },
  accept: {
    type: &#x22;string | string[]&#x22;,
    default: '[&#x22;.pdf&#x22;, &#x22;.doc&#x22;, &#x22;.docx&#x22;, &#x22;.txt&#x22;, &#x22;.md&#x22;, &#x22;.rtf&#x22;, &#x22;.odt&#x22;]',
  },
  maxSize: { type: &#x22;number&#x22;, description: &#x22;Bytes.&#x22; },
  maxFiles: { type: &#x22;number&#x22; },
  onSuccess: { type: &#x22;(item) => void&#x22; },
  title: {
    type: &#x22;string&#x22;,
    default: '&#x22;Submission&#x22;',
    description: &#x22;Heading typed at the top of the page.&#x22;,
  },
  className: { type: &#x22;string&#x22; },
}"
/>