Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sheet with Action Buttons in Footer
Sheet component with SheetFooter containing multiple action buttons including Save Draft and Create Task for flexible user workflows built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes users need options—save progress or complete action. This React Sheet provides task creation form with SheetFooter containing Save Draft (outline variant) and Create Task (primary) buttons from shadcn/ui. Built with Radix UI Dialog primitives, the dual-action footer supports flexible workflows. Perfect for task creation, article drafting, form filling, data entry, or any interface requiring both commit and save-for-later options without forcing immediate completion.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Sheet with Sections
Complete header, content, footer structure
Create Item Sheet
Creation form with cancel and create
Profile Edit Sheet
Edit form with save button
Dialog
Modal dialog component
Button
Standard button component
Card
Card with footer actions
Questions you might have
React Sheet with Scrollable Content
Sheet component with flex-1 and overflow-y-auto for vertical scrolling of long item lists within fixed sheet dimensions built with shadcn/ui
React Sheet with Sticky Header and Footer
Sheet component with sticky SheetHeader and SheetFooter using Separator visual dividers and flex-1 overflow-y-auto scrollable middle section built with shadcn/ui