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
| Prop | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| apps? | AppData[] | Array of apps to display in the stack. Object shape:
| ||||||||||||
| title? | string | Title for the stack. | ||||||||||||
| selectedApps? | number[] | Controlled selected app IDs. | ||||||||||||
| onChange? | (selected: number[]) => void | Callback fired when the selected apps change. | ||||||||||||
| onDownload? | (selected: number[]) => void | Callback fired when the download is triggered. | ||||||||||||
| isExpanded? | boolean | Controlled expanded state. | ||||||||||||
| onExpandChange? | (expanded: boolean) => void | Callback fired when expanded/collapsed. | ||||||||||||
| className? | string | Optional additional class names for the root container. |