[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Ftags\u002Ffile-upload-modal":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":33,"showcases":518,"links":519,"dates":580},"\u002Fexamples\u002Ftags\u002Ffile-upload-modal","collection","screens",true,{"example_count":9,"app_count":10},1185,191,{"id":12,"title":13,"description":14},22224,"File upload modal","",{"title":16,"description":17,"og_image":18},"File upload modal screen examples - Nicelydone","File upload modal screen design examples from SaaS apps. Browse examples from Riverside, Extend, Dock.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9bf53e6a-f847-4491-ae62-666376fcd23e.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"tags","\u002Fexamples\u002Ftags",{"label":27,"to":4},"File upload modal screen examples",{"title":27,"eyebrow":29,"description":17,"sections":30,"body":31},"Tag category",[],[32],"1185 screens",[34,91,135,178,225,257,298,341,369,399,446,491],{"uuid":35,"title":36,"description":37,"canonical_path":38,"image":18,"width":39,"height":40,"image_alt":41,"published_at":42,"kind":43,"patterns":44,"component_categories":68,"app":81},"9bf53e6a-f847-4491-ae62-666376fcd23e","Riverside Studio","Home dashboard where the user is uploading a video file via a modal to generate AI magic clips, with creation shortcuts and analytics visible in the background.","\u002Fexamples\u002Fapps\u002Friverside\u002Fscreens",3024,1758,"Riverside Studio from Riverside","2026-08-24T09:31:05.000Z","screen",[45,54,60],{"id":46,"label":47,"slug":48,"rank":49,"group":50},7,"Add & Create","add-and-create",0,{"id":51,"label":52,"slug":53},2,"Actions","actions",{"id":55,"label":56,"slug":57,"rank":58,"group":59},25,"Upload & Download","upload-and-download",1,{"id":51,"label":52,"slug":53},{"id":61,"label":62,"slug":63,"rank":51,"group":64},30,"AI Generation","ai-generation",{"id":65,"label":66,"slug":67},3,"AI","ai",[69,73,77],{"id":70,"title":71,"slug":72},174,"Card","card",{"id":74,"title":75,"slug":76},175,"Button","button",{"id":78,"title":79,"slug":80},284,"Modal","modal",{"slug":82,"title":83,"logo":84,"baseline":85,"categories":86},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[87],{"id":88,"title":89,"slug":90},100,"Video","video",{"uuid":92,"title":93,"description":94,"canonical_path":95,"image":96,"width":39,"height":40,"image_alt":97,"published_at":98,"kind":43,"patterns":99,"component_categories":110,"app":114},"7fa05e90-4c84-4596-b564-2ae9a1279399","extend","Creation modal where the user attempts to import a new workflow from a JSON file but encounters a schema validation error.","\u002Fexamples\u002Fapps\u002Fextend\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7fa05e90-4c84-4596-b564-2ae9a1279399.png","extend from Extend","2026-08-17T12:39:21.000Z",[100,108],{"id":101,"label":102,"slug":103,"rank":49,"group":104},116,"Error","error",{"id":105,"label":106,"slug":107},12,"States & Feedback","states-and-feedback",{"id":55,"label":56,"slug":57,"rank":58,"group":109},{"id":51,"label":52,"slug":53},[111,112,113],{"id":70,"title":71,"slug":72},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":93,"title":115,"logo":116,"baseline":117,"categories":118},"Extend","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15f6030e-2d0f-4381-9480-44902ed125e2.png","Document processing infrastructure for AI agents",[119,123,127,131],{"id":120,"title":121,"slug":122},77,"Machine learning","machine-learning",{"id":124,"title":125,"slug":126},80,"Artificial Intelligence","artificial-intelligence",{"id":128,"title":129,"slug":130},37,"Developer APIs","developer-apis",{"id":132,"title":133,"slug":134},48,"Developer Tools","developer-tools",{"uuid":136,"title":137,"description":138,"canonical_path":139,"image":140,"width":39,"height":40,"image_alt":141,"published_at":142,"kind":43,"patterns":143,"component_categories":153,"app":164},"7440ebec-795c-4666-a0df-aa5596f3cd57","Library · Dock","Create page where the user uploads a new image asset, names it, and assigns tags like onboarding or case studies via a searchable combobox.","\u002Fexamples\u002Fapps\u002Fdock\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7440ebec-795c-4666-a0df-aa5596f3cd57.png","Library · Dock from Dock","2026-07-13T15:30:47.000Z",[144,146,148],{"id":46,"label":47,"slug":48,"rank":49,"group":145},{"id":51,"label":52,"slug":53},{"id":55,"label":56,"slug":57,"rank":58,"group":147},{"id":51,"label":52,"slug":53},{"id":149,"label":150,"slug":151,"rank":51,"group":152},13,"Filter & Sort","filter-and-sort",{"id":51,"label":52,"slug":53},[154,158,162,163],{"id":155,"title":156,"slug":157},240,"Horizontal navigation","horizontal-navigation",{"id":159,"title":160,"slug":161},233,"Tabs","tabs",{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":165,"title":166,"logo":167,"baseline":168,"categories":169},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[170,174],{"id":171,"title":172,"slug":173},23,"Collaboration","collaboration",{"id":175,"title":176,"slug":177},29,"Task Management","task-management",{"uuid":179,"title":180,"description":181,"canonical_path":182,"image":183,"width":39,"height":40,"image_alt":184,"published_at":185,"kind":43,"patterns":186,"component_categories":199,"app":208},"f696eccd-08f2-44a3-bc25-289b8609c806","Bloom by Medusa","AI chat interface where the user is building an ecommerce store and has opened a modal to import a product list via CSV.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff696eccd-08f2-44a3-bc25-289b8609c806.png","Bloom by Medusa from Bloom","2026-07-13T10:49:54.000Z",[187,192,197],{"id":188,"label":189,"slug":190,"rank":49,"group":191},15,"Import & Export","import-and-export",{"id":51,"label":52,"slug":53},{"id":193,"label":194,"slug":195,"rank":58,"group":196},27,"AI Assistant","ai-assistant",{"id":65,"label":66,"slug":67},{"id":55,"label":56,"slug":57,"rank":51,"group":198},{"id":51,"label":52,"slug":53},[200,204,205,206,207],{"id":201,"title":202,"slug":203},277,"Button group","button-group",{"id":70,"title":71,"slug":72},{"id":159,"title":160,"slug":161},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":209,"title":210,"logo":211,"baseline":212,"categories":213},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[214,215,218,221],{"id":124,"title":125,"slug":126},{"id":65,"title":216,"slug":217},"Shopping","shopping",{"id":46,"title":219,"slug":220},"Web Development","web-development",{"id":222,"title":223,"slug":224},96,"No code","no-code",{"uuid":226,"title":227,"description":228,"canonical_path":229,"image":230,"width":39,"height":40,"image_alt":231,"published_at":232,"kind":43,"patterns":233,"component_categories":241,"app":245},"6eada57c-bcfe-4dac-b653-f73c0ae13887","Message - Appwrite","Detail page where the user uploads a local file or selects from a storage bucket to attach to a message.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6eada57c-bcfe-4dac-b653-f73c0ae13887.png","Message - Appwrite from Appwrite","2026-07-07T08:00:53.000Z",[234,236],{"id":55,"label":56,"slug":57,"rank":49,"group":235},{"id":51,"label":52,"slug":53},{"id":237,"label":238,"slug":239,"rank":58,"group":240},115,"Empty State","empty-state",{"id":105,"label":106,"slug":107},[242,243,244],{"id":155,"title":156,"slug":157},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":246,"title":247,"logo":248,"baseline":249,"categories":250},"appwrite","Appwrite","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faba3119b-0179-4fbd-b6d0-2bb3a0bfda07.png","Open-source backend platform for building and scaling apps with Auth, Database, Storage, Functions, Realtime, Messaging, and Sites.",[251,252,253],{"id":132,"title":133,"slug":134},{"id":128,"title":129,"slug":130},{"id":254,"title":255,"slug":256},45,"Open Source","open-source",{"uuid":258,"title":259,"description":260,"canonical_path":261,"image":262,"width":39,"height":40,"image_alt":263,"published_at":264,"kind":43,"patterns":265,"component_categories":278,"app":287},"1c5bce7a-f072-4919-bef1-955eec5c4ee2","FLORA - Untitled","Design editor where the user searches, filters, and uploads media assets via a large library modal.","\u002Fexamples\u002Fapps\u002Fflora\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1c5bce7a-f072-4919-bef1-955eec5c4ee2.png","FLORA - Untitled from Flora","2026-05-26T09:34:20.000Z",[266,268,270],{"id":55,"label":56,"slug":57,"rank":49,"group":267},{"id":51,"label":52,"slug":53},{"id":149,"label":150,"slug":151,"rank":58,"group":269},{"id":51,"label":52,"slug":53},{"id":271,"label":272,"slug":273,"rank":51,"group":274},79,"Browse","browse",{"id":275,"label":276,"slug":277},8,"Pages & Content","pages-and-content",[279,283,284,285,286],{"id":280,"title":281,"slug":282},260,"Badge","badge",{"id":159,"title":160,"slug":161},{"id":70,"title":71,"slug":72},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":288,"title":289,"logo":290,"baseline":291,"categories":292},"flora","Flora","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F5c3c6f99-7e88-4853-9e21-6fd175f2aa62.png","Your creative environement",[293,294,297],{"id":124,"title":125,"slug":126},{"id":275,"title":295,"slug":296},"Design","design",{"id":171,"title":172,"slug":173},{"uuid":299,"title":300,"description":301,"canonical_path":302,"image":303,"width":39,"height":304,"image_alt":305,"published_at":306,"kind":43,"patterns":307,"component_categories":324,"app":333},"34265edc-4c6f-4f1b-afda-d79d9e6301ec","Speech to text | ElevenLabs","Modal overlay where the user configures a new transcription task by providing a YouTube URL, selecting the language, and toggling options for audio events and subtitles.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F34265edc-4c6f-4f1b-afda-d79d9e6301ec.png",1714,"Speech to text | ElevenLabs from Elevenlabs","2026-05-11T13:29:11.000Z",[308,310,314,322],{"id":55,"label":56,"slug":57,"rank":49,"group":309},{"id":51,"label":52,"slug":53},{"id":175,"label":311,"slug":312,"rank":58,"group":313},"AI Editing","ai-editing",{"id":65,"label":66,"slug":67},{"id":315,"label":316,"slug":317,"rank":51,"group":318},58,"Media Editor","media-editor",{"id":319,"label":320,"slug":321},5,"Media & Tools","media-and-tools",{"id":61,"label":62,"slug":63,"rank":65,"group":323},{"id":65,"label":66,"slug":67},[325,329,330,331,332],{"id":326,"title":327,"slug":328},169,"Avatar","avatar",{"id":159,"title":160,"slug":161},{"id":70,"title":71,"slug":72},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":334,"title":335,"logo":336,"baseline":337,"categories":338},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[339,340],{"id":124,"title":125,"slug":126},{"id":128,"title":129,"slug":130},{"uuid":342,"title":343,"description":344,"canonical_path":345,"image":346,"width":39,"height":40,"image_alt":347,"published_at":348,"kind":43,"patterns":349,"component_categories":354,"app":359},"6f456745-4ec4-4f49-b476-8fc986d0e68b","Documents | Aboard","Detail page where the user is uploading a new personal document via a modal form, specifying its title and category.","\u002Fexamples\u002Fapps\u002Faboard\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6f456745-4ec4-4f49-b476-8fc986d0e68b.png","Documents | Aboard from Aboard","2026-05-05T10:32:35.000Z",[350,352],{"id":46,"label":47,"slug":48,"rank":49,"group":351},{"id":51,"label":52,"slug":53},{"id":55,"label":56,"slug":57,"rank":58,"group":353},{"id":51,"label":52,"slug":53},[355,356,357,358],{"id":280,"title":281,"slug":282},{"id":159,"title":160,"slug":161},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":360,"title":361,"logo":362,"baseline":363,"categories":364},"aboard","Aboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fea3ae2e7-7419-4926-acae-b179668f6172.png","Bring joy to your workplace with Aboard",[365],{"id":366,"title":367,"slug":368},10,"Human resources","human-resources",{"uuid":370,"title":371,"description":372,"canonical_path":373,"image":374,"width":39,"height":40,"image_alt":375,"published_at":376,"kind":43,"patterns":377,"component_categories":380,"app":384},"02416628-bdfc-4b4c-a557-2c9b58f2ca2c","Product Demos · nicelydone3","Creation wizard step where the user manages uploaded media files for a product demo before proceeding to the next step.","\u002Fexamples\u002Fapps\u002Fnavattic\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F02416628-bdfc-4b4c-a557-2c9b58f2ca2c.png","Product Demos · nicelydone3 from Navattic","2026-05-05T10:32:31.000Z",[378],{"id":55,"label":56,"slug":57,"rank":49,"group":379},{"id":51,"label":52,"slug":53},[381,382,383],{"id":155,"title":156,"slug":157},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":385,"title":386,"logo":387,"baseline":388,"categories":389},"navattic","Navattic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd26bd2f9-ee1e-4acc-9d41-1890fbd1b5c4.png","Make buying easier with demos",[390,393,394,395],{"id":55,"title":391,"slug":392},"Marketing","marketing",{"id":124,"title":125,"slug":126},{"id":222,"title":223,"slug":224},{"id":396,"title":397,"slug":398},103,"Demo Automation","demo-automation",{"uuid":400,"title":401,"description":402,"canonical_path":403,"image":404,"width":405,"height":406,"image_alt":407,"published_at":408,"kind":43,"patterns":409,"component_categories":428,"app":432},"8b0d97ed-70f0-465e-81fe-064a13eaa630","Tags | Mailchimp","Modal where the user can bulk tag contacts by selecting or creating a tag and uploading a file of email addresses.","\u002Fexamples\u002Fapps\u002Fmailchimp\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8b0d97ed-70f0-465e-81fe-064a13eaa630.png",2880,1670,"Tags | Mailchimp from Mailchimp","2026-04-29T12:25:29.000Z",[410,417,419,423],{"id":411,"label":412,"slug":413,"rank":49,"group":414},126,"Bulk Actions","bulk-actions",{"id":149,"label":415,"slug":416},"Workflow & Automation","workflow-and-automation",{"id":55,"label":56,"slug":57,"rank":58,"group":418},{"id":51,"label":52,"slug":53},{"id":171,"label":420,"slug":421,"rank":51,"group":422},"Select","select",{"id":51,"label":52,"slug":53},{"id":424,"label":425,"slug":426,"rank":65,"group":427},114,"Confirmation","confirmation",{"id":105,"label":106,"slug":107},[429,430,431],{"id":280,"title":281,"slug":282},{"id":155,"title":156,"slug":157},{"id":78,"title":79,"slug":80},{"slug":433,"title":434,"logo":435,"baseline":436,"categories":437},"mailchimp","Mailchimp","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmailchimp-bd8e0c89.png","All-in-one marketing platform for small business",[438,439,442],{"id":55,"title":391,"slug":392},{"id":193,"title":440,"slug":441},"Email Newsletters","email-newsletters",{"id":443,"title":444,"slug":445},68,"SMS","sms",{"uuid":447,"title":448,"description":449,"canonical_path":450,"image":451,"width":39,"height":452,"image_alt":453,"published_at":454,"kind":43,"patterns":455,"component_categories":471,"app":474},"61f467e9-00b3-4ec8-8063-82acec63b3bd","Media Library | Bird","Media library where the user is uploading a new asset via a drag-and-drop modal.","\u002Fexamples\u002Fapps\u002Fbird\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F61f467e9-00b3-4ec8-8063-82acec63b3bd.png",1780,"Media Library | Bird from Bird","2026-03-30T13:53:59.000Z",[456,458,463,467],{"id":55,"label":56,"slug":57,"rank":49,"group":457},{"id":51,"label":52,"slug":53},{"id":459,"label":460,"slug":461,"rank":58,"group":462},82,"Media Detail","media-detail",{"id":275,"label":276,"slug":277},{"id":366,"label":464,"slug":465,"rank":51,"group":466},"Drag & Drop","drag-and-drop",{"id":51,"label":52,"slug":53},{"id":124,"label":468,"slug":469,"rank":65,"group":470},"Files","files",{"id":275,"label":276,"slug":277},[472,473],{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":475,"title":476,"logo":477,"baseline":478,"categories":479},"bird","Bird","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F438a1831-3604-472d-a383-2892bbd37a63.png","Unified CRM for Marketing, Service & Payments",[480,481,482,486,487],{"id":55,"title":391,"slug":392},{"id":128,"title":129,"slug":130},{"id":483,"title":484,"slug":485},53,"CRM","crm",{"id":443,"title":444,"slug":445},{"id":488,"title":489,"slug":490},92,"Email","email",{"uuid":492,"title":493,"description":494,"canonical_path":495,"image":496,"width":39,"height":452,"image_alt":497,"published_at":498,"kind":43,"patterns":499,"component_categories":506,"app":509},"48e7efcc-78a3-45dd-86ca-ddcd567139be","Test 01 \u002F Guest Project - Morphic Studio","List view where the user opens a modal to create a new custom model by naming it and uploading reference images.","\u002Fexamples\u002Fapps\u002Fmorphic\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F48e7efcc-78a3-45dd-86ca-ddcd567139be.png","Test 01 \u002F Guest Project - Morphic Studio from Morphic","2026-03-16T20:52:14.000Z",[500,502,504],{"id":55,"label":56,"slug":57,"rank":49,"group":501},{"id":51,"label":52,"slug":53},{"id":61,"label":62,"slug":63,"rank":58,"group":503},{"id":65,"label":66,"slug":67},{"id":424,"label":425,"slug":426,"rank":51,"group":505},{"id":105,"label":106,"slug":107},[507,508],{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":510,"title":511,"logo":512,"baseline":513,"categories":514},"morphic","Morphic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F17b1263a-8707-435d-8214-460280911e23.png","A new era of storytelling",[515,516,517],{"id":88,"title":89,"slug":90},{"id":275,"title":295,"slug":296},{"id":124,"title":125,"slug":126},[],[520,522,524,526,528,530,532,534,536,538,540,542,544,547,550,553,556,559,562,565,568,571,574,577],{"label":56,"to":521,"count":105},"\u002Fexamples\u002Fscreens\u002Fupload-and-download",{"label":47,"to":523,"count":65},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":62,"to":525,"count":65},"\u002Fexamples\u002Fscreens\u002Fai-generation",{"label":425,"to":527,"count":51},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":150,"to":529,"count":51},"\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":194,"to":531,"count":58},"\u002Fexamples\u002Fscreens\u002Fai-assistant",{"label":311,"to":533,"count":58},"\u002Fexamples\u002Fscreens\u002Fai-editing",{"label":272,"to":535,"count":58},"\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":412,"to":537,"count":58},"\u002Fexamples\u002Fscreens\u002Fbulk-actions",{"label":464,"to":539,"count":58},"\u002Fexamples\u002Fscreens\u002Fdrag-and-drop",{"label":238,"to":541,"count":58},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":102,"to":543,"count":58},"\u002Fexamples\u002Fscreens\u002Ferror",{"label":545,"to":546},"Riverside design examples","\u002Fexamples\u002Fapps\u002Friverside",{"label":548,"to":549},"Extend design examples","\u002Fexamples\u002Fapps\u002Fextend",{"label":551,"to":552},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":554,"to":555},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":557,"to":558},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"label":560,"to":561},"Flora design examples","\u002Fexamples\u002Fapps\u002Fflora",{"label":563,"to":564},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":566,"to":567},"Aboard design examples","\u002Fexamples\u002Fapps\u002Faboard",{"label":569,"to":570},"Navattic design examples","\u002Fexamples\u002Fapps\u002Fnavattic",{"label":572,"to":573},"Mailchimp design examples","\u002Fexamples\u002Fapps\u002Fmailchimp",{"label":575,"to":576},"Bird design examples","\u002Fexamples\u002Fapps\u002Fbird",{"label":578,"to":579},"Morphic design examples","\u002Fexamples\u002Fapps\u002Fmorphic",{"published_at":581,"updated_at":582},"2024-12-15T12:33:12.000Z","2026-09-21T18:35:11.426Z"]