[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fskeleton":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":323,"links":324,"dates":373},"\u002Fexamples\u002Fcomponents\u002Fskeleton","collection","components",true,{"example_count":9,"app_count":10},21,18,{"id":12,"title":13,"description":14},226,"Skeleton","See how interfaces reserve space while content loads. Explore how placeholder shapes reflect the expected layout of text, images, and repeated items.",{"title":16,"description":17,"og_image":18},"Skeleton UI examples - Nicelydone","Skeleton UI design examples from SaaS apps. See how interfaces reserve space while content loads. Explore how placeholder shapes reflect the expected layout…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fda793ccb-f1d3-4d54-ac5c-ca15b1bf7503.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Skeleton UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Skeleton UI design examples from SaaS apps. See how interfaces reserve space while content loads. Explore how placeholder shapes reflect the expected layout of text, images, and repeated items.",[32],{"title":33,"description":14,"links":34},"About Skeleton",[],[36],"21 UI components",[38,64,97,119,144,166,183,216,245,263,282,301],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"1ec2c0d6-deda-47fc-87fc-3a9b09ee0d89","Elevenlabs UI component","A skeleton loading screen displaying a list of items with placeholder content.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents",2552,1295,"UI component from Elevenlabs","component",[48],{"id":12,"title":13,"slug":49},"skeleton",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[56,60],{"id":57,"title":58,"slug":59},80,"Artificial Intelligence","artificial-intelligence",{"id":61,"title":62,"slug":63},37,"Developer APIs","developer-apis",{"uuid":65,"title":66,"description":67,"canonical_path":68,"image":69,"width":70,"height":71,"image_alt":72,"kind":46,"categories":73,"app":75},"97498214-2539-41ac-b86f-880bcd3e152a","Craft UI component","The modal shows a progress indicator and a message indicating that documents are being created.","\u002Fexamples\u002Fapps\u002Fcraft\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0dcfb68e-f55b-47ad-b0a7-b31b76a5e528.png",551,449,"UI component from Craft",[74],{"id":12,"title":13,"slug":49},{"slug":76,"title":77,"logo":78,"baseline":79,"categories":80},"craft","Craft","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcraft-gw2w5ytx.png","Taking notes to the next level",[81,85,89,93],{"id":82,"title":83,"slug":84},30,"Productivity","productivity",{"id":86,"title":87,"slug":88},22,"Knowledge Management","knowledge-management",{"id":90,"title":91,"slug":92},29,"Task Management","task-management",{"id":94,"title":95,"slug":96},59,"Writing tools","writing-tools",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":46,"categories":106,"app":108},"6fd8ceaa-d95a-49ce-972a-eb9f44746356","Chronicle UI component","A loading screen with a progress indicator.","\u002Fexamples\u002Fapps\u002Fchronicle\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc2ba1407-605f-44bf-9487-23ee47f6275e.png",1600,1621,"UI component from Chronicle",[107],{"id":12,"title":13,"slug":49},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"chronicle","Chronicle","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fchronicle-p7klgqh3.png","Stunning presentations, made effortlessly",[114,118],{"id":115,"title":116,"slug":117},85,"Presentation software","presentation-software",{"id":57,"title":58,"slug":59},{"uuid":120,"title":121,"description":122,"canonical_path":123,"image":124,"width":125,"height":126,"image_alt":127,"kind":46,"categories":128,"app":130},"71e7b2f3-135a-4469-a892-23fead3b8d77","Record club UI component","The screenshot displays a user interface with a list of artists, categorized by type and sorted by popularity.","\u002Fexamples\u002Fapps\u002Frecord-club\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd1163162-bdc9-44d8-9f05-6702587bf97e.png",2640,1392,"UI component from Record club",[129],{"id":12,"title":13,"slug":49},{"slug":131,"title":132,"logo":133,"baseline":134,"categories":135},"record-club","Record club","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdc3f1497-07c4-42cf-974d-960c02cbeaa9.png","A new fun way to discover and share music with friends",[136,140],{"id":137,"title":138,"slug":139},20,"Music","music",{"id":141,"title":142,"slug":143},14,"Social","social",{"uuid":145,"title":146,"description":147,"canonical_path":148,"image":149,"width":150,"height":151,"image_alt":152,"kind":46,"categories":153,"app":155},"54594a43-9404-480b-95d5-9e2d7259d3d8","Sora UI component","Screenshot of a loading screen with a prompt for an AI generated image.","\u002Fexamples\u002Fapps\u002Fsora\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffc901a07-6e96-4ce7-9861-19b316b83890.png",1996,1500,"UI component from Sora",[154],{"id":12,"title":13,"slug":49},{"slug":156,"title":157,"logo":158,"baseline":159,"categories":160},"sora","Sora","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsora-2oq6gygg.png","Bring your imagination to life with text, image, or video",[161,162],{"id":57,"title":58,"slug":59},{"id":163,"title":164,"slug":165},100,"Video","video",{"uuid":167,"title":168,"description":169,"canonical_path":170,"image":171,"width":103,"height":172,"image_alt":173,"kind":46,"categories":174,"app":176},"f0d94c2d-f984-402d-ae1e-2baca0bd9a28","Grok UI component","Two image placeholders","\u002Fexamples\u002Fapps\u002Fgrok\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd8f004f4-07ef-4c76-888c-d76a3e1fce6f.png",748,"UI component from Grok",[175],{"id":12,"title":13,"slug":49},{"slug":177,"title":178,"logo":179,"baseline":180,"categories":181},"grok","Grok","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgrok-hpyfsu57.png",null,[182],{"id":57,"title":58,"slug":59},{"uuid":184,"title":185,"description":186,"canonical_path":187,"image":188,"width":189,"height":190,"image_alt":191,"kind":46,"categories":192,"app":194},"4cb99fa9-0cfd-4fe1-ab80-00986edfa506","Front UI component","A table of shared contacts with export functionality.","\u002Fexamples\u002Fapps\u002Ffront\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7b45a25e-3cce-4fce-bc80-01b30f8a85c9.png",2067,892,"UI component from Front",[193],{"id":12,"title":13,"slug":49},{"slug":195,"title":196,"logo":197,"baseline":198,"categories":199},"front","Front","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffront-f25c6b6e.png","Email redesigned for teams",[200,204,208,212],{"id":201,"title":202,"slug":203},23,"Collaboration","collaboration",{"id":205,"title":206,"slug":207},47,"Customer Service","customer-service",{"id":209,"title":210,"slug":211},82,"Communication","communication",{"id":213,"title":214,"slug":215},92,"Email","email",{"uuid":217,"title":218,"description":219,"canonical_path":220,"image":221,"width":222,"height":223,"image_alt":224,"kind":46,"categories":225,"app":227},"7c51fc3d-3e72-4e6d-be7d-549032b6e0ee","Vero UI component","A modal showing a data import process.","\u002Fexamples\u002Fapps\u002Fvero\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F25a61a85-d6ad-490c-a2b1-432cdd92d641.png",2580,1332,"UI component from Vero",[226],{"id":12,"title":13,"slug":49},{"slug":228,"title":229,"logo":230,"baseline":231,"categories":232},"vero","Vero","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvero-a2c5dffd.png","Make every customer communication count",[233,237,241],{"id":234,"title":235,"slug":236},25,"Marketing","marketing",{"id":238,"title":239,"slug":240},27,"Email Newsletters","email-newsletters",{"id":242,"title":243,"slug":244},68,"SMS","sms",{"uuid":246,"title":247,"description":248,"canonical_path":249,"image":250,"width":251,"height":252,"image_alt":253,"kind":46,"categories":254,"app":256},"7a8c6a08-e85f-414d-89f3-b90a5ced2f76","AI generation progress toast","A dark-themed toast notification displaying the progress of an AI presentation generation task. It includes a title, a truncated prompt snippet, and a circular progress indicator.","\u002Fexamples\u002Fapps\u002Ftome\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcc62aad4-71da-4130-890b-f8c21034756b.png",976,424,"AI generation progress toast from Tome",[255],{"id":12,"title":13,"slug":49},{"slug":257,"title":258,"logo":259,"baseline":260,"categories":261},"tome","Tome","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftome-3d8125c5.png","The storytelling tool for work",[262],{"id":115,"title":116,"slug":117},{"uuid":264,"title":265,"description":266,"canonical_path":267,"image":268,"width":269,"height":270,"image_alt":271,"kind":46,"categories":272,"app":274},"87f73043-9e27-42c7-a71a-4c2f84d4d916","Loading message card","A simple card displaying a loading spinner and a message indicating that text will appear shortly.","\u002Fexamples\u002Fapps\u002Flimitless\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8d01d52b-91a3-40de-b441-69fcc4ece4f6.png",887,249,"Loading message card from Limitless",[273],{"id":12,"title":13,"slug":49},{"slug":275,"title":276,"logo":277,"baseline":278,"categories":279},"limitless","Limitless","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Flimitless-dd6d80f5.png","Go beyond your mind’s limitations",[280,281],{"id":57,"title":58,"slug":59},{"id":82,"title":83,"slug":84},{"uuid":283,"title":284,"description":285,"canonical_path":286,"image":287,"width":288,"height":289,"image_alt":290,"kind":46,"categories":291,"app":293},"a7f7ab83-9be8-420a-b926-b9aaddec2aca","Gemini UI component","A chat interface with a question and a progress bar.","\u002Fexamples\u002Fapps\u002Fgemini\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa593f52f-197a-4a1a-b891-62033bbc94ca.png",1591,646,"UI component from Gemini",[292],{"id":12,"title":13,"slug":49},{"slug":294,"title":295,"logo":296,"baseline":297,"categories":298},"gemini","Gemini","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgemini-drsocrbw.png","Supercharge your creativity and productivity",[299,300],{"id":57,"title":58,"slug":59},{"id":82,"title":83,"slug":84},{"uuid":302,"title":303,"description":304,"canonical_path":305,"image":306,"width":307,"height":308,"image_alt":309,"kind":46,"categories":310,"app":312},"e213d8d3-c22d-4806-8532-dcb62e97a320","Image generation loading state","A loading state for an AI image generation canvas, showing a sketched rocket ship with a central loading spinner, and four smaller thumbnail placeholders below, each with its own loading spinner.","\u002Fexamples\u002Fapps\u002Fexactly\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F932ca97f-a720-4575-b252-0f3f29bea7f6.png",1686,1850,"Image generation loading state from Exactly",[311],{"id":12,"title":13,"slug":49},{"slug":313,"title":314,"logo":315,"baseline":316,"categories":317},"exactly","Exactly","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fexactly-8f7f0061.png","Create images in seconds with an AI that understands your style",[318,319],{"id":57,"title":58,"slug":59},{"id":320,"title":321,"slug":322},8,"Design","design",[],[325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370],{"label":326,"to":327},"Loading","\u002Fexamples\u002Fscreens\u002Floading",{"label":329,"to":330},"AI Generation","\u002Fexamples\u002Fscreens\u002Fai-generation",{"label":332,"to":333},"AI Chat","\u002Fexamples\u002Fscreens\u002Fai-chat",{"label":335,"to":336},"Browse","\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":338,"to":339},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":341,"to":342},"Craft design examples","\u002Fexamples\u002Fapps\u002Fcraft",{"label":344,"to":345},"Chronicle design examples","\u002Fexamples\u002Fapps\u002Fchronicle",{"label":347,"to":348},"Record club design examples","\u002Fexamples\u002Fapps\u002Frecord-club",{"label":350,"to":351},"Sora design examples","\u002Fexamples\u002Fapps\u002Fsora",{"label":353,"to":354},"Grok design examples","\u002Fexamples\u002Fapps\u002Fgrok",{"label":356,"to":357},"Front design examples","\u002Fexamples\u002Fapps\u002Ffront",{"label":359,"to":360},"Vero design examples","\u002Fexamples\u002Fapps\u002Fvero",{"label":362,"to":363},"Tome design examples","\u002Fexamples\u002Fapps\u002Ftome",{"label":365,"to":366},"Limitless design examples","\u002Fexamples\u002Fapps\u002Flimitless",{"label":368,"to":369},"Gemini design examples","\u002Fexamples\u002Fapps\u002Fgemini",{"label":371,"to":372},"Exactly design examples","\u002Fexamples\u002Fapps\u002Fexactly",{"published_at":374,"updated_at":375},"2022-08-21T20:07:35.000Z","2026-09-26T00:10:08.000Z"]