[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fsynthesia\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":43,"showcases":215,"links":216,"dates":232},"\u002Fexamples\u002Fapps\u002Fsynthesia\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Synthesia UI components examples - Nicelydone","Browse Synthesia UI component design examples. Preview individual interface elements and explore related component categories. #1 AI video creation platform","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffac705cb-56ea-49e3-b00c-4202e330906d.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},"Synthesia design examples","\u002Fexamples\u002Fapps\u002Fsynthesia",{"label":23,"to":4},"Synthesia 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,"categories":34},"Synthesia","synthesia","#1 AI video creation platform","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsynthesia-4278cf0d.png","https:\u002F\u002Fwww.synthesia.io",[35,39],{"id":36,"title":37,"slug":38},80,"Artificial Intelligence","artificial-intelligence",{"id":40,"title":41,"slug":42},100,"Video","video",[44,59,68,82,97,112,127,142,157,172,186,200],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"categories":52,"app":57},"50cc9401-aad9-474a-b518-e07f7154ca1f","Public access toggle","A toggle switch control with a label and helper text, used to enable or disable public access.",819,189,"Public access toggle from Synthesia","component",[53],{"id":54,"title":55,"slug":56},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":58},[],{"uuid":60,"title":46,"description":61,"canonical_path":4,"image":62,"width":48,"height":63,"image_alt":50,"kind":51,"categories":64,"app":66},"836d4120-b230-4b1f-95bd-43f1dd968ab1","A toggle switch control with a title and descriptive text, used to enable or disable public access to a published video.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe004ff23-f1de-4a5d-8ae0-6ab047dfea49.png",194,[65],{"id":54,"title":55,"slug":56},{"slug":30,"title":29,"logo":32,"categories":67},[],{"uuid":69,"title":70,"description":71,"canonical_path":4,"image":72,"width":73,"height":74,"image_alt":75,"kind":51,"categories":76,"app":80},"f197f294-4f2e-460e-a550-336d157e4d3b","Video player","A video player component showing an AI avatar with playback controls, progress bar, closed captions, and branding.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa3636783-38e3-4b7a-ad5e-8bf9e610db98.png",2132,1313,"Video player from Synthesia",[77],{"id":78,"title":70,"slug":79},238,"video-player",{"slug":30,"title":29,"logo":32,"categories":81},[],{"uuid":83,"title":84,"description":85,"canonical_path":4,"image":86,"width":87,"height":88,"image_alt":89,"kind":51,"categories":90,"app":95},"e502ce68-ed88-4b1a-b2b3-5a34d2645a07","Video generation progress card","A card displaying a video thumbnail with a circular progress indicator overlaid, showing the video generation status.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc51a8e46-8c97-49ec-b6b2-67571b02f9c5.png",700,488,"Video generation progress card from Synthesia",[91],{"id":92,"title":93,"slug":94},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":96},[],{"uuid":98,"title":99,"description":100,"canonical_path":4,"image":101,"width":102,"height":103,"image_alt":104,"kind":51,"categories":105,"app":110},"1f6768a0-4b13-4432-9f2a-73f8e8bdf464","Sidebar navigation","A vertical sidebar navigation menu with a workspace switcher at the top, followed by categorized links for Home, Videos, and Assets.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4cfb4682-576e-44aa-ad50-ba5299707a26.png",473,1737,"Sidebar navigation from Synthesia",[106],{"id":107,"title":108,"slug":109},209,"Vertical navigation","vertical-navigation",{"slug":30,"title":29,"logo":32,"categories":111},[],{"uuid":113,"title":114,"description":115,"canonical_path":4,"image":116,"width":117,"height":118,"image_alt":119,"kind":51,"categories":120,"app":125},"b8e68dd0-7795-4e19-b8e3-4dc309a328fa","Editor Topbar","A top navigation and toolbar for a video editor. It includes a back button, editable video title, a central group of tool icons, undo\u002Fredo controls, and primary actions to play or generate the video.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4a9505cc-9e4e-4fbe-a335-1e90fe91c2e1.png",3021,154,"Editor Topbar from Synthesia",[121],{"id":122,"title":123,"slug":124},246,"Toolbox","toolbox",{"slug":30,"title":29,"logo":32,"categories":126},[],{"uuid":128,"title":129,"description":130,"canonical_path":4,"image":131,"width":132,"height":133,"image_alt":134,"kind":51,"categories":135,"app":140},"1219a9ff-5716-43c8-b12e-4f4fcc16bdf7","Onboarding Tooltip","A tooltip pointing downwards, providing onboarding instructions with a 'Next' button and a close icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F05dfdb49-818f-4f8f-be67-86d0979adc7a.png",707,452,"Onboarding Tooltip from Synthesia",[136],{"id":137,"title":138,"slug":139},254,"Tooltip","tooltip-element",{"slug":30,"title":29,"logo":32,"categories":141},[],{"uuid":143,"title":144,"description":145,"canonical_path":4,"image":146,"width":147,"height":148,"image_alt":149,"kind":51,"categories":150,"app":155},"e3bc1468-1ea5-4aac-a92f-b0ad50c74c5e","Attribution Select Input","A select input field with a label asking 'How did you hear about Synthesia' and a placeholder 'Select one ...'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb6b1a62f-c174-4699-a0ef-955347acba0e.png",1012,259,"Attribution Select Input from Synthesia",[151],{"id":152,"title":153,"slug":154},204,"Input select","input-select",{"slug":30,"title":29,"logo":32,"categories":156},[],{"uuid":158,"title":159,"description":160,"canonical_path":4,"image":161,"width":162,"height":163,"image_alt":164,"kind":51,"categories":165,"app":170},"f35dbdf0-6834-4dff-aa2c-8e9eaeb737e4","Billing cycle toggle","A segmented control allowing users to switch between Monthly and Yearly billing cycles, with a discount badge on the Yearly option.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4d64402b-19b2-43d6-bbb4-9db60b4fe68c.png",516,203,"Billing cycle toggle from Synthesia",[166],{"id":167,"title":168,"slug":169},218,"Segmented control","segmented-control",{"slug":30,"title":29,"logo":32,"categories":171},[],{"uuid":173,"title":174,"description":175,"canonical_path":4,"image":176,"width":147,"height":177,"image_alt":178,"kind":51,"categories":179,"app":184},"1e6ab78b-d77b-4b0b-9bf6-d1601f282053","Sign In Options","A sign-in section displaying a title and two social\u002FSSO login buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F406dcff0-5211-48aa-b828-9cd6d85a3f3f.png",404,"Sign In Options from Synthesia",[180],{"id":181,"title":182,"slug":183},289,"Social login button","social-login-button",{"slug":30,"title":29,"logo":32,"categories":185},[],{"uuid":187,"title":188,"description":189,"canonical_path":4,"image":190,"width":191,"height":192,"image_alt":193,"kind":51,"categories":194,"app":198},"23322e09-bc0c-485a-9b7e-677d82139ec9","FAQ Accordion","A list of frequently asked questions presented as an accordion. Each question is a collapsible row with an icon, the question text, and a chevron indicating it can be expanded.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6a49fbaf-503b-48e5-966c-3846ca6bf276.png",1546,2071,"FAQ Accordion from Synthesia",[195],{"id":49,"title":196,"slug":197},"FAQ","faq",{"slug":30,"title":29,"logo":32,"categories":199},[],{"uuid":201,"title":202,"description":203,"canonical_path":4,"image":204,"width":205,"height":206,"image_alt":207,"kind":51,"categories":208,"app":213},"3bd1507d-2523-4003-9889-c1e4fdfe1954","Resources dropdown menu","An open dropdown menu displaying a list of resources with icons, titles, and brief descriptions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5768a5cc-b87f-4c50-9fac-465bb8a6c4cf.png",745,1244,"Resources dropdown menu from Synthesia",[209],{"id":210,"title":211,"slug":212},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":214},[],[],[217,220,223,226,229],{"label":218,"to":219},"Synthesia product screens","\u002Fexamples\u002Fapps\u002Fsynthesia\u002Fscreens",{"label":221,"to":222},"Synthesia marketing pages","\u002Fexamples\u002Fapps\u002Fsynthesia\u002Fmarketing",{"label":224,"to":225},"Synthesia user flows","\u002Fexamples\u002Fapps\u002Fsynthesia\u002Fflows",{"label":227,"to":228},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":230,"to":231},"Video app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fvideo",{"published_at":233,"updated_at":234},"2023-06-12T17:07:58.000Z","2026-09-13T13:02:39.000Z"]