shadcn.io is an independent project built on shadcn/ui
Quick Actions drops from the top. Six outline buttons sit in three columns: New File, Upload, Download, Share, Settings, and More, each an icon over a label.
Use it for common actions at the top of a phone screen. If one action is the primary one, a Button in the page is clearer. In Svelte, Ark UI does not perform the action.
Installation
Anatomy
Usage
<Drawer swipeDirection="up"><DrawerTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline"><ZapIcon aria-hidden="true" data-icon="inline-start" />Quick Actions</Button>{/snippet}</DrawerTrigger><DrawerContent showBar={false}><DrawerHeader><DrawerTitle>Quick Actions</DrawerTitle><DrawerDescription>Perform common actions quickly from here</DrawerDescription></DrawerHeader><div class="p-4"><div class="mx-auto grid max-w-2xl grid-cols-3 gap-4"><Button class="h-20 flex-col gap-2" variant="outline"><PlusIcon aria-hidden="true" class="size-6" /><span class="text-xs">New File</span></Button><Button class="h-20 flex-col gap-2" variant="outline"><UploadIcon aria-hidden="true" class="size-6" /><span class="text-xs">Upload</span></Button><Button class="h-20 flex-col gap-2" variant="outline"><DownloadIcon aria-hidden="true" class="size-6" /><span class="text-xs">Download</span></Button><Button class="h-20 flex-col gap-2" variant="outline"><Share2Icon aria-hidden="true" class="size-6" /><span class="text-xs">Share</span></Button><Button class="h-20 flex-col gap-2" variant="outline"><SettingsIcon aria-hidden="true" class="size-6" /><span class="text-xs">Settings</span></Button><Button class="h-20 flex-col gap-2" variant="outline"><PlusIcon aria-hidden="true" class="size-6" /><span class="text-xs">More</span></Button></div></div></DrawerContent></Drawer>FAQ
How is the grid laid out?
A grid grid-cols-3 gap-4, capped at max-w-2xl and centered with mx-auto. Each button is h-20 flex-col, so the icon sits over the label.
What do screen readers hear for each action?
The label, such as New File or Upload. The icons are aria-hidden.
Do the actions do anything?
Not yet: they're outline Buttons with no handler. Run each action from its button, and close the drawer once it starts:
Pass open to Drawer and read details.open in onOpenChange.
Why do New File and More share an icon?
Both use the plus icon in this demo. Give More its own icon, such as an ellipsis, so the two don't look alike.
API Reference
Drawer
Sets swipeDirection="up" and showBar={false}. The rest is on the Drawer page.
Button
Sets props and variant="outline". The rest is on the Button page.
