[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fjitter\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":48,"showcases":216,"links":217,"dates":254},"\u002Fexamples\u002Fapps\u002Fjitter\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Jitter UI components examples - Nicelydone","Browse Jitter UI component design examples. Preview individual interface elements and explore related component categories. Motion design made simple","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd273cc94-4f1c-48f1-a354-654e4ccd7fec.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},"Jitter design examples","\u002Fexamples\u002Fapps\u002Fjitter",{"label":23,"to":4},"Jitter UI components 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},"Jitter","jitter","Motion design made simple","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fjitter-0f3edfea.png","https:\u002F\u002Fjitter.video","jittervideo",[36,40,44],{"id":37,"title":38,"slug":39},8,"Design","design",{"id":41,"title":42,"slug":43},100,"Video","video",{"id":45,"title":46,"slug":47},23,"Collaboration","collaboration",[49,64,79,91,106,121,136,150,162,174,189,204],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"dce7af77-477c-4704-9e1d-b0bfc62d38a6","Hero Section with Header","A hero section featuring a top navigation header with a logo, links, and a sign-in button. The main body displays a large headline 'Motion design made simple' styled to look like it's selected in a design tool, complete with a bounding box and floating toolbars. A primary call-to-action button is centered below the headline.",3024,1586,"Hero Section with Header from Jitter","component",[58],{"id":59,"title":60,"slug":61},197,"Hero section","hero-section",{"slug":30,"title":29,"logo":32,"categories":63},[],{"uuid":65,"title":66,"description":67,"canonical_path":4,"image":68,"width":69,"height":70,"image_alt":71,"kind":56,"categories":72,"app":77},"7088dffd-d605-420a-b265-1f598de9c639","Team context menu","A context menu opened from a team list item in a sidebar, showing options to create files, folders, invite members, and access settings. The 'New folder' option includes an 'UPGRADE' badge.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F04480ff9-7db5-4d8d-be40-79dfb6041035.png",1026,510,"Team context menu from Jitter",[73],{"id":74,"title":75,"slug":76},255,"Upgrade your plan","upgrade-your-plan",{"slug":30,"title":29,"logo":32,"categories":78},[],{"uuid":80,"title":81,"description":82,"canonical_path":4,"image":83,"width":84,"height":85,"image_alt":86,"kind":56,"categories":87,"app":89},"0875eb68-f533-46aa-827b-2e3faa9ac125","Upgrade tooltip","A dark-themed tooltip pointing to a locked 'New folder' action, prompting the user to upgrade their team to unlock unlimited folders.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F133fb5b9-6d23-4034-adc3-66c465b78dc5.png",754,798,"Upgrade tooltip from Jitter",[88],{"id":74,"title":75,"slug":76},{"slug":30,"title":29,"logo":32,"categories":90},[],{"uuid":92,"title":93,"description":94,"canonical_path":4,"image":95,"width":96,"height":97,"image_alt":98,"kind":56,"categories":99,"app":104},"8ac8e736-c8a2-4474-af0d-5024d65455b4","Empty state message","An empty state message indicating that the file list is empty, providing links to create a new file, import from Figma, or start from a template.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcf57d3b7-4ef3-4290-b276-ebcf8264d513.png",1732,982,"Empty state message from Jitter",[100],{"id":101,"title":102,"slug":103},302,"Empty state","emptystate",{"slug":30,"title":29,"logo":32,"categories":105},[],{"uuid":107,"title":108,"description":109,"canonical_path":4,"image":110,"width":111,"height":112,"image_alt":113,"kind":56,"categories":114,"app":119},"cecd8834-c6d4-40bf-ab14-dc8a0f1c2f39","Export Dropdown Menu","A dropdown menu showing various export options for a design project, including Video, GIF, and Lottie formats with different resolutions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F37698def-54d9-438a-bcdc-8d1afdeb43c0.png",542,992,"Export Dropdown Menu from Jitter",[115],{"id":116,"title":117,"slug":118},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":4,"image":125,"width":126,"height":127,"image_alt":128,"kind":56,"categories":129,"app":134},"a089803c-3694-4c8c-90af-0b0e08e5eb40","Copy link field","A read-only input field displaying a truncated URL with a copy icon button on the right.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd6ff100f-c132-466b-a511-d310f99c725f.png",528,192,"Copy link field from Jitter",[130],{"id":131,"title":132,"slug":133},241,"Click to copy","click-to-copy",{"slug":30,"title":29,"logo":32,"categories":135},[],{"uuid":137,"title":138,"description":139,"canonical_path":4,"image":140,"width":141,"height":141,"image_alt":142,"kind":56,"categories":143,"app":148},"7ecedffb-671e-42bc-b104-d13f84ee5349","Global collaboration illustration","An illustration showing a wireframe globe with two avatar icons placed on it, representing global collaboration or sharing.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5103d22e-800f-4093-9ed4-96715b26a896.png",304,"Global collaboration illustration from Jitter",[144],{"id":145,"title":146,"slug":147},278,"Illustration","illustration",{"slug":30,"title":29,"logo":32,"categories":149},[],{"uuid":151,"title":152,"description":153,"canonical_path":4,"image":154,"width":155,"height":156,"image_alt":157,"kind":56,"categories":158,"app":160},"c2ae10a6-0c31-4e30-a1ae-4a8843ec4488","Share file popover","A popover menu for sharing a file, featuring an illustration, file title, a read-only input with a shareable link, and a prominent 'Copy link' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F91740807-8c71-47c4-8f62-81df88329d82.png",649,931,"Share file popover from Jitter",[159],{"id":116,"title":117,"slug":118},{"slug":30,"title":29,"logo":32,"categories":161},[],{"uuid":163,"title":164,"description":165,"canonical_path":4,"image":166,"width":167,"height":168,"image_alt":169,"kind":56,"categories":170,"app":172},"d3fe17c6-ec9e-425c-9a29-a17eef85b5cd","Jitter UI component","A context menu with editing options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F11678226-e1ae-485f-b18d-5280ec519f2e.png",620,806,"UI component from Jitter",[171],{"id":116,"title":117,"slug":118},{"slug":30,"title":29,"logo":32,"categories":173},[],{"uuid":175,"title":176,"description":177,"canonical_path":4,"image":178,"width":179,"height":180,"image_alt":181,"kind":56,"categories":182,"app":187},"8131a94c-e13a-489a-a184-17f33793918f","Color picker and property inspector","A split view showing a dark-themed color picker on the left and a light-themed property inspector on the right. The color picker includes a gradient area, hue and opacity sliders, an eyedropper tool, and hex\u002Fopacity inputs. The inspector panel controls Fill, Stroke, and Shadow properties with checkboxes, hex inputs, and dropdowns.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F11936c6a-140e-4dff-bf1a-db5195be2f80.png",1265,981,"Color picker and property inspector from Jitter",[183],{"id":184,"title":185,"slug":186},183,"Color picker","color-picker",{"slug":30,"title":29,"logo":32,"categories":188},[],{"uuid":190,"title":191,"description":192,"canonical_path":4,"image":193,"width":194,"height":195,"image_alt":196,"kind":56,"categories":197,"app":202},"70339e22-aa68-40db-86eb-7f6f9decac4a","Easing curve panel","A panel displaying an animation easing curve with a slider to adjust its smoothness.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdc691371-2a30-488b-9dc2-b7bd4454294b.png",475,673,"Easing curve panel from Jitter",[198],{"id":199,"title":200,"slug":201},223,"Slider","slider",{"slug":30,"title":29,"logo":32,"categories":203},[],{"uuid":205,"title":206,"description":207,"canonical_path":4,"image":208,"width":209,"height":210,"image_alt":211,"kind":56,"categories":212,"app":214},"ef9fbc65-d4c5-4045-8994-ea19ae54baf9","Animation property menu","A dropdown menu displaying animation property options categorized into Transform, Style, and Other.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8943d8ce-5416-4a94-a4d4-916b1ea837de.png",554,1142,"Animation property menu from Jitter",[213],{"id":116,"title":117,"slug":118},{"slug":30,"title":29,"logo":32,"categories":215},[],[],[218,221,224,227,230,233,236,238,242,246,250],{"label":219,"to":220},"Jitter product screens","\u002Fexamples\u002Fapps\u002Fjitter\u002Fscreens",{"label":222,"to":223},"Jitter marketing pages","\u002Fexamples\u002Fapps\u002Fjitter\u002Fmarketing",{"label":225,"to":226},"Jitter user flows","\u002Fexamples\u002Fapps\u002Fjitter\u002Fflows",{"label":228,"to":229},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":231,"to":232},"Video app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fvideo",{"label":234,"to":235},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":237,"to":18},"All SaaS app examples",{"label":239,"to":240,"description":241},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":243,"to":244,"description":245},"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":247,"to":248,"description":249},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":251,"to":252,"description":253},"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":255,"updated_at":256},"2024-03-18T13:52:08.000Z","2026-09-26T00:10:35.000Z"]