[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ffable-app\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":40,"showcases":289,"links":290,"dates":345},"\u002Fexamples\u002Fapps\u002Ffable-app\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Fable product screens examples - Nicelydone","Browse Fable screen design examples. Preview the interface screenshots and explore related UI patterns. The web-based motion design platform","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5cafdc12-555a-4b56-be1b-9bdbbf3a6abd.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},"Fable design examples","\u002Fexamples\u002Fapps\u002Ffable-app",{"label":23,"to":4},"Fable product screens examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"twitter_username":34,"categories":35},"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",[36],{"id":37,"title":38,"slug":39},8,"Design","design",[41,70,97,110,127,144,163,184,204,218,232,277],{"uuid":42,"title":43,"description":44,"canonical_path":4,"image":11,"width":45,"height":46,"image_alt":47,"kind":48,"patterns":49,"component_categories":59,"app":68},"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",[50],{"id":51,"label":52,"slug":53,"rank":54,"group":55},4,"Sign In","sign-in",0,{"id":56,"label":57,"slug":58},1,"Access & Account","access-and-account",[60,64],{"id":61,"title":62,"slug":63},175,"Button","button",{"id":65,"title":66,"slug":67},174,"Card","card",{"slug":30,"title":29,"logo":32,"categories":69},[],{"uuid":71,"title":43,"description":72,"canonical_path":4,"image":73,"width":45,"height":46,"image_alt":47,"kind":48,"patterns":74,"component_categories":88,"app":95},"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",[75,80],{"id":76,"label":77,"slug":78,"rank":54,"group":79},2,"Forgot Password","forgot-password",{"id":56,"label":57,"slug":58},{"id":81,"label":82,"slug":83,"rank":56,"group":84},114,"Confirmation","confirmation",{"id":85,"label":86,"slug":87},12,"States & Feedback","states-and-feedback",[89,93,94],{"id":90,"title":91,"slug":92},284,"Modal","modal",{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"slug":30,"title":29,"logo":32,"categories":96},[],{"uuid":98,"title":43,"description":99,"canonical_path":4,"image":100,"width":45,"height":46,"image_alt":47,"kind":48,"patterns":101,"component_categories":104,"app":108},"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",[102],{"id":76,"label":77,"slug":78,"rank":54,"group":103},{"id":56,"label":57,"slug":58},[105,106,107],{"id":90,"title":91,"slug":92},{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"slug":30,"title":29,"logo":32,"categories":109},[],{"uuid":111,"title":112,"description":113,"canonical_path":4,"image":114,"width":45,"height":46,"image_alt":115,"kind":48,"patterns":116,"component_categories":122,"app":125},"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",[117],{"id":118,"label":119,"slug":120,"rank":54,"group":121},5,"Sign Up","sign-up",{"id":56,"label":57,"slug":58},[123,124],{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"slug":30,"title":29,"logo":32,"categories":126},[],{"uuid":128,"title":112,"description":129,"canonical_path":4,"image":130,"width":45,"height":46,"image_alt":115,"kind":48,"patterns":131,"component_categories":139,"app":142},"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",[132,134],{"id":118,"label":119,"slug":120,"rank":54,"group":133},{"id":56,"label":57,"slug":58},{"id":135,"label":136,"slug":137,"rank":56,"group":138},120,"Loading","loading",{"id":85,"label":86,"slug":87},[140,141],{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"slug":30,"title":29,"logo":32,"categories":143},[],{"uuid":145,"title":112,"description":146,"canonical_path":4,"image":147,"width":45,"height":46,"image_alt":115,"kind":48,"patterns":148,"component_categories":158,"app":161},"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",[149,154],{"id":150,"label":151,"slug":152,"rank":54,"group":153},6,"Verification","verification",{"id":56,"label":57,"slug":58},{"id":56,"label":155,"slug":156,"rank":56,"group":157},"Account Setup","account-setup",{"id":56,"label":57,"slug":58},[159,160],{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"slug":30,"title":29,"logo":32,"categories":162},[],{"uuid":164,"title":29,"description":165,"canonical_path":4,"image":166,"width":45,"height":46,"image_alt":167,"kind":48,"patterns":168,"component_categories":179,"app":182},"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",[169,171],{"id":56,"label":155,"slug":156,"rank":54,"group":170},{"id":56,"label":57,"slug":58},{"id":172,"label":173,"slug":174,"rank":56,"group":175},3,"Profile","profile",{"id":176,"label":177,"slug":178},11,"Social & Collaboration","social-and-collaboration",[180,181],{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"slug":30,"title":29,"logo":32,"categories":183},[],{"uuid":185,"title":29,"description":186,"canonical_path":4,"image":187,"width":45,"height":46,"image_alt":167,"kind":48,"patterns":188,"component_categories":200,"app":202},"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",[189,191,193],{"id":56,"label":155,"slug":156,"rank":54,"group":190},{"id":56,"label":57,"slug":58},{"id":172,"label":173,"slug":174,"rank":56,"group":192},{"id":176,"label":177,"slug":178},{"id":194,"label":195,"slug":196,"rank":76,"group":197},23,"Select","select",{"id":76,"label":198,"slug":199},"Actions","actions",[201],{"id":65,"title":66,"slug":67},{"slug":30,"title":29,"logo":32,"categories":203},[],{"uuid":205,"title":29,"description":206,"canonical_path":4,"image":207,"width":45,"height":46,"image_alt":167,"kind":48,"patterns":208,"component_categories":213,"app":216},"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",[209,211],{"id":56,"label":155,"slug":156,"rank":54,"group":210},{"id":56,"label":57,"slug":58},{"id":172,"label":173,"slug":174,"rank":56,"group":212},{"id":176,"label":177,"slug":178},[214,215],{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"slug":30,"title":29,"logo":32,"categories":217},[],{"uuid":219,"title":29,"description":220,"canonical_path":4,"image":221,"width":45,"height":46,"image_alt":167,"kind":48,"patterns":222,"component_categories":225,"app":230},"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",[223],{"id":135,"label":136,"slug":137,"rank":54,"group":224},{"id":85,"label":86,"slug":87},[226],{"id":227,"title":228,"slug":229},169,"Avatar","avatar",{"slug":30,"title":29,"logo":32,"categories":231},[],{"uuid":233,"title":234,"description":235,"canonical_path":4,"image":236,"width":45,"height":46,"image_alt":237,"kind":48,"patterns":238,"component_categories":263,"app":275},"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",[239,244,249,256],{"id":240,"label":241,"slug":242,"rank":54,"group":243},115,"Empty State","empty-state",{"id":85,"label":86,"slug":87},{"id":245,"label":246,"slug":247,"rank":56,"group":248},7,"Add & Create","add-and-create",{"id":76,"label":198,"slug":199},{"id":250,"label":251,"slug":252,"rank":76,"group":253},86,"Templates","templates",{"id":37,"label":254,"slug":255},"Pages & Content","pages-and-content",{"id":257,"label":258,"slug":259,"rank":172,"group":260},41,"Dashboard","dashboard",{"id":51,"label":261,"slug":262},"Data & Analysis","data-and-analysis",[264,268,272,273,274],{"id":265,"title":266,"slug":267},240,"Horizontal navigation","horizontal-navigation",{"id":269,"title":270,"slug":271},233,"Tabs","tabs",{"id":227,"title":228,"slug":229},{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"slug":30,"title":29,"logo":32,"categories":276},[],{"uuid":278,"title":279,"description":280,"canonical_path":4,"image":281,"width":45,"height":46,"image_alt":282,"kind":48,"patterns":283,"component_categories":286,"app":287},"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",[284],{"id":135,"label":136,"slug":137,"rank":54,"group":285},{"id":85,"label":86,"slug":87},[],{"slug":30,"title":29,"logo":32,"categories":288},[],[],[291,293,295,297,299,301,303,305,307,309,311,313,315,318,321,324,327,329,333,337,341],{"label":155,"to":292},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":136,"to":294},"\u002Fexamples\u002Fscreens\u002Floading",{"label":173,"to":296},"\u002Fexamples\u002Fscreens\u002Fprofile",{"label":77,"to":298},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":119,"to":300},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":246,"to":302},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":82,"to":304},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":258,"to":306},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":241,"to":308},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":195,"to":310},"\u002Fexamples\u002Fscreens\u002Fselect",{"label":52,"to":312},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":251,"to":314},"\u002Fexamples\u002Fscreens\u002Ftemplates",{"label":316,"to":317},"Fable marketing pages","\u002Fexamples\u002Fapps\u002Ffable-app\u002Fmarketing",{"label":319,"to":320},"Fable user flows","\u002Fexamples\u002Fapps\u002Ffable-app\u002Fflows",{"label":322,"to":323},"Fable UI components","\u002Fexamples\u002Fapps\u002Ffable-app\u002Fcomponents",{"label":325,"to":326},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":328,"to":18},"All SaaS app examples",{"label":330,"to":331,"description":332},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":334,"to":335,"description":336},"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":338,"to":339,"description":340},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":342,"to":343,"description":344},"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":346,"updated_at":347},"2022-09-14T12:06:46.000Z","2026-09-13T13:02:39.000Z"]