# Hourglass (/docs/components/hourglass-upload)



<ComponentPreview name="hourglass-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/hourglass-upload
        ```
      </CodeBlockTab>

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

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

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @uploadcn/hourglass-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="hourglass-upload" />
  </Tab>
</Tabs>

## Usage [#usage]

```tsx
import { HourglassUpload } from "@/components/hourglass-upload"
```

```tsx
<HourglassUpload />
```

Both bulbs are clipped rectangles moved by one spring, so the sand in the top and bottom always adds up. The headline shows the estimated time left, updated live. With reduced motion the sand moves without the falling stream.

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; },
  maxSize: { type: &#x22;number&#x22;, description: &#x22;Bytes.&#x22; },
  maxFiles: { type: &#x22;number&#x22; },
  onSuccess: { type: &#x22;(item) => void&#x22; },
  className: { type: &#x22;string&#x22; },
}"
/>