[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ffable-app":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":34,"examples":46,"showcases":47,"links":302,"dates":334},"\u002Fexamples\u002Fapps\u002Ffable-app","detail","apps",true,{"title":9,"description":10,"og_image":11},"Fable design examples - Nicelydone","Explore Fable UI design examples. The web-based motion design platform","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5cafdc12-555a-4b56-be1b-9bdbbf3a6abd.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Fable design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Fable",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Ffable-app\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Ffable-app\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"twitter_username":40,"categories":41},"Fable","fable-app","The web-based motion design platform","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffable-8p03a958.png","https:\u002F\u002Fwww.fable.app","fable_motion",[42],{"id":43,"title":44,"slug":45},8,"Design","design",[],[48,299],{"family":49,"examples":50},"screens",[51,80,107,120,137,154,173,194,214,228,242,287],{"uuid":52,"title":53,"description":54,"canonical_path":29,"image":11,"width":55,"height":56,"image_alt":57,"kind":58,"patterns":59,"component_categories":69,"app":78},"5cafdc12-555a-4b56-be1b-9bdbbf3a6abd","Sign in to your Fable motion design account","Sign-in screen where the user authenticates with Google or via email and password.",3024,1738,"Sign in to your Fable motion design account from Fable","screen",[60],{"id":61,"label":62,"slug":63,"rank":64,"group":65},4,"Sign In","sign-in",0,{"id":66,"label":67,"slug":68},1,"Access & Account","access-and-account",[70,74],{"id":71,"title":72,"slug":73},175,"Button","button",{"id":75,"title":76,"slug":77},174,"Card","card",{"slug":36,"title":35,"logo":38,"categories":79},[],{"uuid":81,"title":53,"description":82,"canonical_path":29,"image":83,"width":55,"height":56,"image_alt":57,"kind":58,"patterns":84,"component_categories":98,"app":105},"48b1e7c5-5284-47df-b792-1162f8c8d43f","Authentication screen where the user requests a password reset link by entering their email address in a modal overlaying the main sign-in view.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F48b1e7c5-5284-47df-b792-1162f8c8d43f.png",[85,90],{"id":86,"label":87,"slug":88,"rank":64,"group":89},2,"Forgot Password","forgot-password",{"id":66,"label":67,"slug":68},{"id":91,"label":92,"slug":93,"rank":66,"group":94},114,"Confirmation","confirmation",{"id":95,"label":96,"slug":97},12,"States & Feedback","states-and-feedback",[99,103,104],{"id":100,"title":101,"slug":102},284,"Modal","modal",{"id":71,"title":72,"slug":73},{"id":75,"title":76,"slug":77},{"slug":36,"title":35,"logo":38,"categories":106},[],{"uuid":108,"title":53,"description":109,"canonical_path":29,"image":110,"width":55,"height":56,"image_alt":57,"kind":58,"patterns":111,"component_categories":114,"app":118},"e79c295a-e398-4aad-9bdb-ab8a5eeab22a","Password recovery modal where the user submits their email address to receive a reset link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe79c295a-e398-4aad-9bdb-ab8a5eeab22a.png",[112],{"id":86,"label":87,"slug":88,"rank":64,"group":113},{"id":66,"label":67,"slug":68},[115,116,117],{"id":100,"title":101,"slug":102},{"id":71,"title":72,"slug":73},{"id":75,"title":76,"slug":77},{"slug":36,"title":35,"logo":38,"categories":119},[],{"uuid":121,"title":122,"description":123,"canonical_path":29,"image":124,"width":55,"height":56,"image_alt":125,"kind":58,"patterns":126,"component_categories":132,"app":135},"d245e695-a44d-40e3-a945-1ae2293a8e3c","Sign up for Fable motion design - create your free account","Signup screen where the user creates an account using Google or an email and password.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd245e695-a44d-40e3-a945-1ae2293a8e3c.png","Sign up for Fable motion design - create your free account from Fable",[127],{"id":128,"label":129,"slug":130,"rank":64,"group":131},5,"Sign Up","sign-up",{"id":66,"label":67,"slug":68},[133,134],{"id":71,"title":72,"slug":73},{"id":75,"title":76,"slug":77},{"slug":36,"title":35,"logo":38,"categories":136},[],{"uuid":138,"title":122,"description":139,"canonical_path":29,"image":140,"width":55,"height":56,"image_alt":125,"kind":58,"patterns":141,"component_categories":149,"app":152},"f1a4d8b3-b521-40ff-874f-bb89f28be565","Signup screen where the user is creating an account with their email and password, currently showing an active loading state after submission.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff1a4d8b3-b521-40ff-874f-bb89f28be565.png",[142,144],{"id":128,"label":129,"slug":130,"rank":64,"group":143},{"id":66,"label":67,"slug":68},{"id":145,"label":146,"slug":147,"rank":66,"group":148},120,"Loading","loading",{"id":95,"label":96,"slug":97},[150,151],{"id":71,"title":72,"slug":73},{"id":75,"title":76,"slug":77},{"slug":36,"title":35,"logo":38,"categories":153},[],{"uuid":155,"title":122,"description":156,"canonical_path":29,"image":157,"width":55,"height":56,"image_alt":125,"kind":58,"patterns":158,"component_categories":168,"app":171},"9e42c711-5e0e-4d72-94ce-4de9438c6b93","Verification screen where the user is instructed to check their inbox to confirm their email address, with an option to resend the link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9e42c711-5e0e-4d72-94ce-4de9438c6b93.png",[159,164],{"id":160,"label":161,"slug":162,"rank":64,"group":163},6,"Verification","verification",{"id":66,"label":67,"slug":68},{"id":66,"label":165,"slug":166,"rank":66,"group":167},"Account Setup","account-setup",{"id":66,"label":67,"slug":68},[169,170],{"id":71,"title":72,"slug":73},{"id":75,"title":76,"slug":77},{"slug":36,"title":35,"logo":38,"categories":172},[],{"uuid":174,"title":35,"description":175,"canonical_path":29,"image":176,"width":55,"height":56,"image_alt":177,"kind":58,"patterns":178,"component_categories":189,"app":192},"e3b892be-dd4b-4057-8e3e-2a6457c4a0d4","Onboarding step where the user provides their full name and selects their role to complete account setup.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe3b892be-dd4b-4057-8e3e-2a6457c4a0d4.png","Fable from Fable",[179,181],{"id":66,"label":165,"slug":166,"rank":64,"group":180},{"id":66,"label":67,"slug":68},{"id":182,"label":183,"slug":184,"rank":66,"group":185},3,"Profile","profile",{"id":186,"label":187,"slug":188},11,"Social & Collaboration","social-and-collaboration",[190,191],{"id":71,"title":72,"slug":73},{"id":75,"title":76,"slug":77},{"slug":36,"title":35,"logo":38,"categories":193},[],{"uuid":195,"title":35,"description":196,"canonical_path":29,"image":197,"width":55,"height":56,"image_alt":177,"kind":58,"patterns":198,"component_categories":210,"app":212},"30c4d010-691a-4e93-9f6d-4a104b51cb24","Onboarding step where the user selects their professional role from a dropdown list including options like Motion Designer, Animator, and UX\u002FUI\u002FProduct Designer.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F30c4d010-691a-4e93-9f6d-4a104b51cb24.png",[199,201,203],{"id":66,"label":165,"slug":166,"rank":64,"group":200},{"id":66,"label":67,"slug":68},{"id":182,"label":183,"slug":184,"rank":66,"group":202},{"id":186,"label":187,"slug":188},{"id":204,"label":205,"slug":206,"rank":86,"group":207},23,"Select","select",{"id":86,"label":208,"slug":209},"Actions","actions",[211],{"id":75,"title":76,"slug":77},{"slug":36,"title":35,"logo":38,"categories":213},[],{"uuid":215,"title":35,"description":216,"canonical_path":29,"image":217,"width":55,"height":56,"image_alt":177,"kind":58,"patterns":218,"component_categories":223,"app":226},"fae20371-2789-42b8-af30-cb8928c73905","Onboarding step where the user provides their name and selects their professional role before getting started.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ffae20371-2789-42b8-af30-cb8928c73905.png",[219,221],{"id":66,"label":165,"slug":166,"rank":64,"group":220},{"id":66,"label":67,"slug":68},{"id":182,"label":183,"slug":184,"rank":66,"group":222},{"id":186,"label":187,"slug":188},[224,225],{"id":71,"title":72,"slug":73},{"id":75,"title":76,"slug":77},{"slug":36,"title":35,"logo":38,"categories":227},[],{"uuid":229,"title":35,"description":230,"canonical_path":29,"image":231,"width":55,"height":56,"image_alt":177,"kind":58,"patterns":232,"component_categories":235,"app":240},"139ef15c-3581-4fc2-a9d3-bfb730c616ed","App interface where the sidebar is currently loading content while the main workspace remains blank.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F139ef15c-3581-4fc2-a9d3-bfb730c616ed.png",[233],{"id":145,"label":146,"slug":147,"rank":64,"group":234},{"id":95,"label":96,"slug":97},[236],{"id":237,"title":238,"slug":239},169,"Avatar","avatar",{"slug":36,"title":35,"logo":38,"categories":241},[],{"uuid":243,"title":244,"description":245,"canonical_path":29,"image":246,"width":55,"height":56,"image_alt":247,"kind":58,"patterns":248,"component_categories":273,"app":285},"0e0f654c-24d9-4193-b54c-fd1197fcaa9c","My projects - Fable","Dashboard empty state where the user is prompted to start their journey by choosing a starter file like a loading wheel or scissors, or by creating a blank project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F0e0f654c-24d9-4193-b54c-fd1197fcaa9c.png","My projects - Fable from Fable",[249,254,259,266],{"id":250,"label":251,"slug":252,"rank":64,"group":253},115,"Empty State","empty-state",{"id":95,"label":96,"slug":97},{"id":255,"label":256,"slug":257,"rank":66,"group":258},7,"Add & Create","add-and-create",{"id":86,"label":208,"slug":209},{"id":260,"label":261,"slug":262,"rank":86,"group":263},86,"Templates","templates",{"id":43,"label":264,"slug":265},"Pages & Content","pages-and-content",{"id":267,"label":268,"slug":269,"rank":182,"group":270},41,"Dashboard","dashboard",{"id":61,"label":271,"slug":272},"Data & Analysis","data-and-analysis",[274,278,282,283,284],{"id":275,"title":276,"slug":277},240,"Horizontal navigation","horizontal-navigation",{"id":279,"title":280,"slug":281},233,"Tabs","tabs",{"id":237,"title":238,"slug":239},{"id":71,"title":72,"slug":73},{"id":75,"title":76,"slug":77},{"slug":36,"title":35,"logo":38,"categories":286},[],{"uuid":288,"title":289,"description":290,"canonical_path":29,"image":291,"width":55,"height":56,"image_alt":292,"kind":58,"patterns":293,"component_categories":296,"app":297},"57860d77-60f5-4bf1-be2a-58a9b8a1ec56","Untitled - Fable","Full-screen loading state displaying an animated logo while the application workspace initializes.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F57860d77-60f5-4bf1-be2a-58a9b8a1ec56.png","Untitled - Fable from Fable",[294],{"id":145,"label":146,"slug":147,"rank":64,"group":295},{"id":95,"label":96,"slug":97},[],{"slug":36,"title":35,"logo":38,"categories":298},[],{"family":300,"examples":301},"pages",[],[303,305,307,310,313,316,318,322,326,330],{"label":304,"to":29},"Fable product screens",{"label":306,"to":32},"Fable marketing pages",{"label":308,"to":309},"Fable user flows","\u002Fexamples\u002Fapps\u002Ffable-app\u002Fflows",{"label":311,"to":312},"Fable UI components","\u002Fexamples\u002Fapps\u002Ffable-app\u002Fcomponents",{"label":314,"to":315},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":317,"to":18},"All SaaS app examples",{"label":319,"to":320,"description":321},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":323,"to":324,"description":325},"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":327,"to":328,"description":329},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":331,"to":332,"description":333},"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":335,"updated_at":336},"2022-09-14T12:06:46.000Z","2026-09-13T13:02:39.000Z"]