Loading…

App Stack

beta

A pile of app icons that fans out on hover and opens into a multi-select picker whose icons fly to their tiles.

Forms
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

The CLI installs button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add app-stack

npm packages installed: class-variance-authority, motion.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { AppStack } from "@/components/ui/app-stack";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Failing

API

Generated from the component's own types, so a prop cannot appear here without existing.

<AppStack>

Prop	Type	Default
`apps` (required)	`AppStackItem[]`	—
`completeLabel`	`string`	`"Download complete"`
`defaultExpanded`	`boolean`	`false`
`defaultSelected`	`string[]`	`[]`
`downloadingLabel`	`string`	`"Downloading…"`
`downloadLabel`	`string`	`"Download selected"`
`expanded`	`boolean`	—
`failedLabel`	`string`	`"Download failed"`
`onDownload` Called with the selected ids. Return a promise to show progress until it settles.	`(selected: string[]) => void \| Promise<unknown>`	—
`onExpandedChange`	`(expanded: boolean) => void`	—
`onSelectedChange`	`(selected: string[]) => void`	—
`resetAfter` Milliseconds the completed state shows before resetting.	`number`	`1000`
`selected` Controlled selection, by app id.	`string[]`	—
`title` The picker's heading, e.g. "Starter Mac".	`string`	`"Apps"`
`triggerLabel` Accessible name of the collapsed stack. Defaults to "Choose from {title}".	`string`	—

Plus every attribute of <div> except children.

Accessibility

The collapsed stack is a button (aria-expanded="false", named "Choose from {title}" or triggerLabel); opening moves focus to the picker's header button (aria-expanded="true"), which closes it and returns focus. Each app is a toggle button (aria-pressed) named by the app; icons and check marks are decorative. The download button is disabled until something is selected. Progress, completion and failure are announced through a polite status region, and the stack is aria-disabled while busy. Under reduced motion the icons move without animating (MotionConfig) and the fan, float and shine stop.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

apps

AppStackItem[]

—

completeLabel

string

"Download complete"

defaultExpanded

boolean

false

defaultSelected

string[]

[]

downloadingLabel

string

"Downloading…"

downloadLabel

string

"Download selected"

expanded

boolean

—

failedLabel

string

"Download failed"

onDownload

Called with the selected ids. Return a promise to show progress until it settles.

(selected: string[]) => void | Promise<unknown>

—

onExpandedChange

(expanded: boolean) => void

—

onSelectedChange

(selected: string[]) => void

—

resetAfter

Milliseconds the completed state shows before resetting.

number

1000

selected

Controlled selection, by app id.

string[]

—

title

The picker's heading, e.g. "Starter Mac".

string

"Apps"

triggerLabel

Accessible name of the collapsed stack. Defaults to "Choose from {title}".

string

—