[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fpaper\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":47,"showcases":191,"links":192,"dates":211},"\u002Fexamples\u002Fapps\u002Fpaper\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Paper UI components examples - Nicelydone","Browse Paper UI component design examples. Preview individual interface elements and explore related component categories. Design, share, ship","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fff1fd277-afdc-4434-ba71-34b2e6c717d0.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},"Paper design examples","\u002Fexamples\u002Fapps\u002Fpaper",{"label":23,"to":4},"Paper 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},"Paper","paper","Design, share, ship","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6406196d-df59-4e20-b60a-7d067ada271c.png","http:\u002F\u002Fpaper.design",[35,39,43],{"id":36,"title":37,"slug":38},7,"Web Development","web-development",{"id":40,"title":41,"slug":42},8,"Design","design",{"id":44,"title":45,"slug":46},23,"Collaboration","collaboration",[48,63,76,89,99,109,119,129,142,155,165,178],{"uuid":49,"title":50,"description":51,"canonical_path":4,"image":11,"width":52,"height":53,"image_alt":54,"kind":55,"categories":56,"app":61},"cc73120a-32a8-4e88-9fa0-1b417b5eec9e","Paper UI component","A user profile dropdown menu displaying the signed-in user's name, email, and a log out option.",449,342,"UI component from Paper","component",[57],{"id":58,"title":59,"slug":60},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":62},[],{"uuid":64,"title":50,"description":65,"canonical_path":4,"image":66,"width":67,"height":68,"image_alt":54,"kind":55,"categories":69,"app":74},"1c250af3-33ca-4ad8-a679-fcc0a0a46588","A modal presenting a \"Paper Pro\" subscription plan, detailing its monthly price, a yearly billing option with a discount, and a comprehensive list of included features, culminating in a call-to-action button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6ff4019a-11bb-47e9-87bf-fc1ed1b99c19.png",832,1120,[70],{"id":71,"title":72,"slug":73},284,"Modal","modal",{"slug":30,"title":29,"logo":32,"categories":75},[],{"uuid":77,"title":50,"description":78,"canonical_path":4,"image":79,"width":80,"height":81,"image_alt":54,"kind":55,"categories":82,"app":87},"a8ca16a2-b0e7-4ebe-829f-a70665660782","A card displaying a video thumbnail and description about syncing designs with code.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcab19fd4-7ff4-4306-88a1-84d298fbec4b.png",907,739,[83],{"id":84,"title":85,"slug":86},174,"Card","card",{"slug":30,"title":29,"logo":32,"categories":88},[],{"uuid":90,"title":50,"description":91,"canonical_path":4,"image":92,"width":93,"height":94,"image_alt":54,"kind":55,"categories":95,"app":97},"39896217-a032-4b6f-8e61-3f601d6cbdf1","A file card with a contextual menu displaying actions like open, rename, and archive.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3b30a604-1214-43e2-a050-17fa93b09d5a.png",683,805,[96],{"id":58,"title":59,"slug":60},{"slug":30,"title":29,"logo":32,"categories":98},[],{"uuid":100,"title":50,"description":101,"canonical_path":4,"image":102,"width":103,"height":104,"image_alt":54,"kind":55,"categories":105,"app":107},"f6ee07bb-816d-4036-a1eb-bb365d01ae4f","A modal dialog box for adjusting 'nudge amount' with two input fields, one of which is focused.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fea93e8ff-3ba0-4fc6-b5fc-dd06ed265fcf.png",673,333,[106],{"id":71,"title":72,"slug":73},{"slug":30,"title":29,"logo":32,"categories":108},[],{"uuid":110,"title":50,"description":111,"canonical_path":4,"image":112,"width":113,"height":114,"image_alt":54,"kind":55,"categories":115,"app":117},"95f0fae1-e75d-4263-a08a-46f21c6be49c","A context menu displaying various actions related to element manipulation, styling, and layout, with associated keyboard shortcuts.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc1269ade-44d0-41a5-adcb-4c53cac17235.png",628,1362,[116],{"id":58,"title":59,"slug":60},{"slug":30,"title":29,"logo":32,"categories":118},[],{"uuid":120,"title":50,"description":121,"canonical_path":4,"image":122,"width":123,"height":124,"image_alt":54,"kind":55,"categories":125,"app":127},"e069c07e-c188-4f29-afbb-0e0c79600ef5","A context menu displaying options for image manipulation and UI visibility control.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Feb8972b5-54e7-4a68-a138-8e693e604064.png",495,397,[126],{"id":58,"title":59,"slug":60},{"slug":30,"title":29,"logo":32,"categories":128},[],{"uuid":130,"title":50,"description":131,"canonical_path":4,"image":132,"width":133,"height":134,"image_alt":54,"kind":55,"categories":135,"app":140},"c84aff69-8950-4002-af70-7967ee2e28e6","A user interface for text-to-image generation featuring a text input field, a style selection dropdown, and a button to create an image.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8ec58a9d-23a9-4d62-8e75-f26d18ff04a8.png",1289,267,[136],{"id":137,"title":138,"slug":139},294,"Artificial intelligence","ai",{"slug":30,"title":29,"logo":32,"categories":141},[],{"uuid":143,"title":50,"description":144,"canonical_path":4,"image":145,"width":146,"height":147,"image_alt":54,"kind":55,"categories":148,"app":153},"560e9cc1-14ce-4363-abda-0555d3fc7216","A segmented control with two options, 'Contain' and 'Cover', under a 'Fit' label.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F22f7ed3f-117d-4faf-b66b-68152641996b.png",640,209,[149],{"id":150,"title":151,"slug":152},218,"Segmented control","segmented-control",{"slug":30,"title":29,"logo":32,"categories":154},[],{"uuid":156,"title":50,"description":157,"canonical_path":4,"image":158,"width":159,"height":160,"image_alt":54,"kind":55,"categories":161,"app":163},"43b381e4-cbc5-4a2d-a24d-ce105ef2a0fc","A modal window presenting various visual shaders, including image filters, logo animations, and effects, organized into distinct categories with visual previews.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0a981ea0-bbea-42e0-bd81-676be89fbe93.png",1610,1690,[162],{"id":71,"title":72,"slug":73},{"slug":30,"title":29,"logo":32,"categories":164},[],{"uuid":166,"title":50,"description":167,"canonical_path":4,"image":168,"width":169,"height":170,"image_alt":54,"kind":55,"categories":171,"app":176},"6b01a926-bb70-4cd5-bcf8-b8b9e60ed358","A color picker modal displaying a color spectrum, hue and opacity sliders, numerical input fields for various color models, and a dropdown for selecting color format.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7eeb00e7-0363-47e9-8d8e-57fc1a758501.png",1663,650,[172],{"id":173,"title":174,"slug":175},183,"Color picker","color-picker",{"slug":30,"title":29,"logo":32,"categories":177},[],{"uuid":179,"title":50,"description":180,"canonical_path":4,"image":181,"width":182,"height":183,"image_alt":54,"kind":55,"categories":184,"app":189},"7358f387-a532-4eaa-99ba-73d2a4afff20","A user interface component for adjusting a radius value using a slider and a numerical input field.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F71f06495-6f2c-4100-9ba6-d06bea865d88.png",579,201,[185],{"id":186,"title":187,"slug":188},223,"Slider","slider",{"slug":30,"title":29,"logo":32,"categories":190},[],[],[193,196,199,202,205,208],{"label":194,"to":195},"Paper product screens","\u002Fexamples\u002Fapps\u002Fpaper\u002Fscreens",{"label":197,"to":198},"Paper marketing pages","\u002Fexamples\u002Fapps\u002Fpaper\u002Fmarketing",{"label":200,"to":201},"Paper user flows","\u002Fexamples\u002Fapps\u002Fpaper\u002Fflows",{"label":203,"to":204},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":206,"to":207},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":209,"to":210},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"published_at":212,"updated_at":213},"2026-03-22T19:53:54.000Z","2026-09-13T13:02:39.000Z"]