Cloud Sources

Vertical source picker with branded tiles, account hints, file counts for connected services, and a Connect pill for the rest.

Import from

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Upload9 } from "@/components/beste/piece/upload9";

<Upload9
  sources={[
    {
      "id": "drive",
      "name": "Google Drive",
      "description": "mira@beste.co",
      "icon": "drive",
      "src": "https://oud.pics/sm/l/google-drive.avif",
      "alt": "Google Drive",
      "connected": true,
      "fileCount": "1,248 files"
    },
    {
      "id": "figma",
      "name": "Figma",
      "description": "Beste Studio team",
      "icon": "figma",
      "src": "https://oud.pics/sm/l/figma.png",
      "alt": "Figma",
      "connected": true,
      "fileCount": "86 files"
    },
    {
      "id": "dropbox",
      "name": "Dropbox",
      "description": "Connect to browse",
      "icon": "dropbox",
      "src": "https://oud.pics/sm/l/dropbox.png",
      "alt": "Dropbox"
    },
    {
      "id": "device",
      "name": "This device",
      "description": "macOS · 248 GB free",
      "icon": "device",
      "src": "https://oud.pics/sm/l/apple.png",
      "alt": "This device",
      "connected": true
    }
  ]}
/>