ComponentsApp Download Stack

App Download Stack

Inspired by Family.co and the example by Jenson Wong, this component presents a stack of apps, allowing users to open the stack, select the apps they want, and download them.

Code

1

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/app-download-stack.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/app-download-stack-demo.json"

How to use

Demo.tsx

"use client"

import React, { useState } from "react"

import AppDownloadStack, {
  AppData,
} from "@/components/smoothui/ui/AppDownloadStack"

const demoApps: AppData[] = [
  {
    id: 1,
    name: "GitHub",
    icon: "https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/9c9721583ecba33e59ebcebdca2248fd_Mmr12FRh5V.png",
  },
  {
    id: 2,
    name: "Canary",
    icon: "https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/b47f43e02f04563447fa90d4ff6c8943_9KzW5GTggQ.png",
  },
  {
    id: 3,
    name: "Figma",
    icon: "https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/f0b9cdefa67b57eeb080278c2f6984cc_sCqUJBg6Qq.png",
  },
  {
    id: 4,
    name: "Arc",
    icon: "https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/178c7b02003c933e6b5afe98bbee595b_low_res_Arc_Browser.png",
  },
]

const AppDownloadStackDemo = () => {
  const [selected, setSelected] = useState<number[]>([])
  const [expanded, setExpanded] = useState(false)

  return (
    <AppDownloadStack
      apps={demoApps}
      title="Starter Mac"
      selectedApps={selected}
      onChange={setSelected}
      isExpanded={expanded}
      onExpandChange={setExpanded}
      onDownload={(selected) => alert(`Download apps: ${selected.join(", ")}`)}
    />
  )
}

export default AppDownloadStackDemo

Props

PropTypeDefault
apps?
AppData[]
-
title?
string
-
selectedApps?
number[]
-
onChange?
(selected: number[]) => void
-
onDownload?
(selected: number[]) => void
-
isExpanded?
boolean
-
onExpandChange?
(expanded: boolean) => void
-
className?
string
-