[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmotion\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":53,"showcases":205,"links":206,"dates":243},"\u002Fexamples\u002Fapps\u002Fmotion\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Motion UI components examples - Nicelydone","Browse Motion UI component design examples. Preview individual interface elements and explore related component categories. Use AI to plan your work,…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4278795a-961f-44ff-aa2d-0be94be83996.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Motion design examples","\u002Fexamples\u002Fapps\u002Fmotion",{"label":23,"to":4},"Motion UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Motion UI component design examples. Preview individual interface elements and explore related component categories. Use AI to plan your work, automatically",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Motion","motion","Use AI to plan your work, automatically","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmotion-6fac92db.png","https:\u002F\u002Fwww.usemotion.com","usemotion",[37,41,45,49],{"id":38,"title":39,"slug":40},80,"Artificial Intelligence","artificial-intelligence",{"id":42,"title":43,"slug":44},29,"Task Management","task-management",{"id":46,"title":47,"slug":48},30,"Productivity","productivity",{"id":50,"title":51,"slug":52},101,"Calendar","calendar",[54,69,82,95,108,121,134,144,156,166,179,192],{"uuid":55,"title":56,"description":57,"canonical_path":4,"image":11,"width":58,"height":59,"image_alt":60,"kind":61,"categories":62,"app":67},"657084ef-57cc-41c8-95c0-2b7a303bb87d","Motion UI component","The screenshot shows a dropdown menu with options for settings, downloading apps, theme selection, and logging out.",539,571,"UI component from Motion","component",[63],{"id":64,"title":65,"slug":66},256,"Theme settings","theme-settings",{"slug":31,"title":30,"logo":33,"categories":68},[],{"uuid":70,"title":56,"description":71,"canonical_path":4,"image":72,"width":73,"height":74,"image_alt":60,"kind":61,"categories":75,"app":80},"3a72e7e3-5c2a-4f49-8112-ec9e4ab420ba","A task management interface.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1c4ade7c-728e-4de6-ba19-5f8112722bcd.png",708,626,[76],{"id":77,"title":78,"slug":79},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":81},[],{"uuid":83,"title":56,"description":84,"canonical_path":4,"image":85,"width":86,"height":87,"image_alt":60,"kind":61,"categories":88,"app":93},"055d1c01-ef63-4aa3-a77f-395f7aa3bfa2","The modal allows users to create a project workflow with AI by describing their project and uploading relevant documents.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faa4af801-cfee-4799-a300-fc11f46f139f.png",1974,1284,[89],{"id":90,"title":91,"slug":92},294,"Artificial intelligence","ai",{"slug":31,"title":30,"logo":33,"categories":94},[],{"uuid":96,"title":56,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":60,"kind":61,"categories":101,"app":106},"6e0f3acb-375a-43d7-afff-e70cefdbb25f","A settings screen with various options organized into sections.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc141e593-798b-45eb-bd7e-4a2be5481680.png",441,1777,[102],{"id":103,"title":104,"slug":105},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":107},[],{"uuid":109,"title":56,"description":110,"canonical_path":4,"image":111,"width":112,"height":113,"image_alt":60,"kind":61,"categories":114,"app":119},"48c5b636-4606-4e71-be35-cf1c269c1cea","The screenshot shows a modal with radio buttons to select calendar settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2e1142ec-d98e-4b6e-a196-143d8bbe89b6.png",1799,490,[115],{"id":116,"title":117,"slug":118},179,"Checkbox & radio","checkbox-radio",{"slug":31,"title":30,"logo":33,"categories":120},[],{"uuid":122,"title":56,"description":123,"canonical_path":4,"image":124,"width":125,"height":126,"image_alt":60,"kind":61,"categories":127,"app":132},"7714b991-d288-4f70-b124-32e65f0399d0","A weekly calendar view showing scheduled tasks.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F64b591b0-5c3d-4469-99b3-113050aa6ef8.png",2525,528,[128],{"id":129,"title":130,"slug":131},249,"Timeline & history","timeline-history",{"slug":31,"title":30,"logo":33,"categories":133},[],{"uuid":135,"title":56,"description":136,"canonical_path":4,"image":137,"width":138,"height":139,"image_alt":60,"kind":61,"categories":140,"app":142},"5849c2e1-7f89-4a6b-aeb3-fcdeeba86874","The screenshot shows a timeline view with tasks scheduled across different dates.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fef9ccbfb-747f-4d4b-babd-0cacc2fc9302.png",2528,1299,[141],{"id":129,"title":130,"slug":131},{"slug":31,"title":30,"logo":33,"categories":143},[],{"uuid":145,"title":56,"description":146,"canonical_path":4,"image":147,"width":125,"height":148,"image_alt":60,"kind":61,"categories":149,"app":154},"11b5d481-afd8-437b-a39f-8a0cde7bfca1","The screenshot displays a project management interface with a table layout, showing tasks, deadlines, and status.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1201c934-2eab-4bb3-8ae2-6be933cdb717.png",331,[150],{"id":151,"title":152,"slug":153},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":155},[],{"uuid":157,"title":56,"description":158,"canonical_path":4,"image":159,"width":160,"height":161,"image_alt":60,"kind":61,"categories":162,"app":164},"901dd5c9-e23f-4b0b-8f5b-d285e9e37ee2","The screenshot displays a user interface for managing and organizing projects, featuring options for grouping, sorting, filtering, and viewing projects in different layouts.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2589e28f-2dcc-4ae4-805e-1043228a90e9.png",2537,188,[163],{"id":151,"title":152,"slug":153},{"slug":31,"title":30,"logo":33,"categories":165},[],{"uuid":167,"title":56,"description":168,"canonical_path":4,"image":169,"width":170,"height":171,"image_alt":60,"kind":61,"categories":172,"app":177},"b4478c6f-f771-4745-ac44-2991b4b80733","A modal showing how to add teammates to a meeting.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb76078b6-fd10-4df5-b3a0-aa5b93f23a13.png",632,292,[173],{"id":174,"title":175,"slug":176},252,"Input tag","input-tag",{"slug":31,"title":30,"logo":33,"categories":178},[],{"uuid":180,"title":56,"description":181,"canonical_path":4,"image":182,"width":183,"height":184,"image_alt":60,"kind":61,"categories":185,"app":190},"89e97266-d8ce-43e7-9854-753c8dd1e5d3","The screenshot displays a color selection modal.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7ad58ac9-0720-49c4-88cd-c93c6e2efde0.png",502,342,[186],{"id":187,"title":188,"slug":189},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":191},[],{"uuid":193,"title":56,"description":194,"canonical_path":4,"image":195,"width":196,"height":197,"image_alt":60,"kind":61,"categories":198,"app":203},"7171bebc-3f68-4b00-b4c1-09a168cd362b","The screenshot shows a modal for setting up a custom event recurrence.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc82b2391-6261-45a8-9003-3c7ab39fbcc6.png",1218,765,[199],{"id":200,"title":201,"slug":202},184,"Datepicker","datepicker",{"slug":31,"title":30,"logo":33,"categories":204},[],[],[207,210,213,216,219,222,225,227,231,235,239],{"label":208,"to":209},"Motion product screens","\u002Fexamples\u002Fapps\u002Fmotion\u002Fscreens",{"label":211,"to":212},"Motion marketing pages","\u002Fexamples\u002Fapps\u002Fmotion\u002Fmarketing",{"label":214,"to":215},"Motion user flows","\u002Fexamples\u002Fapps\u002Fmotion\u002Fflows",{"label":217,"to":218},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":220,"to":221},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"label":223,"to":224},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"label":226,"to":18},"All SaaS app examples",{"label":228,"to":229,"description":230},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":232,"to":233,"description":234},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":236,"to":237,"description":238},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":240,"to":241,"description":242},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":244,"updated_at":245},"2025-02-07T17:43:32.000Z","2026-09-13T13:02:39.000Z"]