[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Feraser\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":49,"showcases":210,"links":211,"dates":230},"\u002Fexamples\u002Fapps\u002Feraser\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Eraser UI components examples - Nicelydone","Browse Eraser UI component design examples. Preview individual interface elements and explore related component categories. Documents & diagrams for…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff78ca957-5441-44ed-8553-f60a9db5f779.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},"Eraser design examples","\u002Fexamples\u002Fapps\u002Feraser",{"label":23,"to":4},"Eraser UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Eraser UI component design examples. Preview individual interface elements and explore related component categories. Documents & diagrams for engineering teams",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Eraser","eraser","Documents & diagrams for engineering teams","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Feraser-5d273b5d.png","https:\u002F\u002Fwww.eraser.io","eraserlabs",[37,41,45],{"id":38,"title":39,"slug":40},23,"Collaboration","collaboration",{"id":42,"title":43,"slug":44},48,"Developer Tools","developer-tools",{"id":46,"title":47,"slug":48},8,"Design","design",[50,65,76,91,106,121,133,145,156,168,180,195],{"uuid":51,"title":52,"description":53,"canonical_path":4,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"categories":58,"app":63},"697b9664-79c7-4441-94d5-299026ec60c4","Workspace Switcher Dropdown","A dropdown menu for switching workspaces, managing team settings, and user account actions. It features a highlighted active team, a list of actions with icons, and a user profile section at the bottom.",590,717,"Workspace Switcher Dropdown from Eraser","component",[59],{"id":60,"title":61,"slug":62},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":64},[],{"uuid":66,"title":67,"description":68,"canonical_path":4,"image":69,"width":54,"height":70,"image_alt":71,"kind":57,"categories":72,"app":74},"f2cb209c-e009-4d76-bd94-4d136ae39c50","Help menu","A popover menu containing links to support resources, feedback, and documentation, triggered by a floating help button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb93adfb5-f92d-4a23-9945-67cf4c557879.png",729,"Help menu from Eraser",[73],{"id":60,"title":61,"slug":62},{"slug":31,"title":30,"logo":33,"categories":75},[],{"uuid":77,"title":78,"description":79,"canonical_path":4,"image":80,"width":81,"height":82,"image_alt":83,"kind":57,"categories":84,"app":89},"993bb527-d972-4aef-9fe1-f433f7a7b3f0","Usage limit warning","A progress bar indicating a reached usage limit, accompanied by text stating the limit and a link to upgrade the plan.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F713b0976-d94e-4a82-99a5-4fb7e28d54f3.png",588,254,"Usage limit warning from Eraser",[85],{"id":86,"title":87,"slug":88},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":90},[],{"uuid":92,"title":93,"description":94,"canonical_path":4,"image":95,"width":96,"height":97,"image_alt":98,"kind":57,"categories":99,"app":104},"7c447418-0655-4e03-83d9-34fe67b3cce6","File list table","A table displaying a list of files with columns for name, location, created date, edited date, comments count, and author. It includes a top toolbar with tabs for filtering, a search input, an avatar group, and an invite button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc39920f5-b725-4681-977e-720c8c4e3b7f.png",2657,890,"File list table from Eraser",[100],{"id":101,"title":102,"slug":103},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":105},[],{"uuid":107,"title":108,"description":109,"canonical_path":4,"image":110,"width":111,"height":112,"image_alt":113,"kind":57,"categories":114,"app":119},"ec2eb314-3f1b-4ede-97a4-cbbdc347fb64","Onboarding Coachmark","A dark-themed coachmark tooltip pointing to a formatting toolbar. It includes an illustration of the toolbar, a title, a description, progress dots, and a 'Finish' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F22886eae-ce3b-4ed1-b721-4964e6dcc71e.png",1108,929,"Onboarding Coachmark from Eraser",[115],{"id":116,"title":117,"slug":118},181,"Coachmark","coachmark",{"slug":31,"title":30,"logo":33,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":4,"image":125,"width":126,"height":127,"image_alt":128,"kind":57,"categories":129,"app":131},"2953493d-f67a-48e0-985e-fafdcc9ca8c6","Onboarding Popover","A dark-themed onboarding popover attached to a toolbar button, featuring an illustration, title, description, progress dots, and a 'Next' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb03af462-3a99-45a3-bd2e-754354fd3713.png",1123,1134,"Onboarding Popover from Eraser",[130],{"id":116,"title":117,"slug":118},{"slug":31,"title":30,"logo":33,"categories":132},[],{"uuid":134,"title":135,"description":136,"canonical_path":4,"image":137,"width":138,"height":139,"image_alt":140,"kind":57,"categories":141,"app":143},"93295279-e131-43fd-9abf-1997edfd8836","Icon picker and coachmark","A floating icon picker panel with a search bar, category folders, and a grid of icons. A dark-themed coachmark tooltip points to the picker, explaining its features with a 'Next' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F193642b4-2279-4a3d-8375-a94d1b4eb270.png",1568,1652,"Icon picker and coachmark from Eraser",[142],{"id":116,"title":117,"slug":118},{"slug":31,"title":30,"logo":33,"categories":144},[],{"uuid":146,"title":147,"description":148,"canonical_path":4,"image":149,"width":138,"height":150,"image_alt":151,"kind":57,"categories":152,"app":154},"8e62ae9f-309d-407a-9c7b-ec46d3b415ca","Insert Menu and Onboarding Tour Card","A split view showing a vertical toolbar on the left, an open 'insert item' menu with search and categorized options in the center, and a dark-themed onboarding tour card on the right.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8afd3b02-9bcd-407f-b4e8-489aab7e42fe.png",1152,"Insert Menu and Onboarding Tour Card from Eraser",[153],{"id":116,"title":117,"slug":118},{"slug":31,"title":30,"logo":33,"categories":155},[],{"uuid":157,"title":158,"description":159,"canonical_path":4,"image":160,"width":161,"height":162,"image_alt":163,"kind":57,"categories":164,"app":166},"77619e63-5727-4673-8a0c-6396f8ceb6f7","Onboarding Tooltip","A dark-themed onboarding tooltip pointing to a segmented control. It includes an image of the control, a title, a description, a progress indicator, and a 'Next' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2105a1bc-b5a0-42a7-b608-dc9832dfbd86.png",782,866,"Onboarding Tooltip from Eraser",[165],{"id":116,"title":117,"slug":118},{"slug":31,"title":30,"logo":33,"categories":167},[],{"uuid":169,"title":170,"description":171,"canonical_path":4,"image":172,"width":173,"height":174,"image_alt":175,"kind":57,"categories":176,"app":178},"7aff1d1a-527a-451b-84ef-dacba2c4db30","Eraser UI component","A modal menu with actions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3b0b338a-9236-4442-81a1-98c95ca738fc.png",725,702,"UI component from Eraser",[177],{"id":60,"title":61,"slug":62},{"slug":31,"title":30,"logo":33,"categories":179},[],{"uuid":181,"title":182,"description":183,"canonical_path":4,"image":184,"width":185,"height":186,"image_alt":187,"kind":57,"categories":188,"app":193},"b1c4caa7-2730-46ca-ba82-6fd3b8180173","Nested Appearance Menu","A dropdown menu with a nested submenu for selecting the appearance mode. The primary menu lists file and workspace actions, while the active 'Appearance' item opens a secondary menu to choose between Light, Dark, and Auto modes.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2086f411-8ad0-4f90-b43c-9915fb74b60e.png",1550,1379,"Nested Appearance Menu from Eraser",[189],{"id":190,"title":191,"slug":192},256,"Theme settings","theme-settings",{"slug":31,"title":30,"logo":33,"categories":194},[],{"uuid":196,"title":197,"description":198,"canonical_path":4,"image":199,"width":200,"height":201,"image_alt":202,"kind":57,"categories":203,"app":208},"7f7b1e74-ee2a-4c0b-a97c-49b84d368049","Page Header","A horizontal page header containing a title, an options menu icon, a search input, an avatar group, and an invite button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F22f9fc11-c812-47b8-9437-44ae57ae5c89.png",2469,316,"Page Header from Eraser",[204],{"id":205,"title":206,"slug":207},240,"Horizontal navigation","horizontal-navigation",{"slug":31,"title":30,"logo":33,"categories":209},[],[],[212,215,218,221,224,227],{"label":213,"to":214},"Eraser product screens","\u002Fexamples\u002Fapps\u002Feraser\u002Fscreens",{"label":216,"to":217},"Eraser marketing pages","\u002Fexamples\u002Fapps\u002Feraser\u002Fmarketing",{"label":219,"to":220},"Eraser user flows","\u002Fexamples\u002Fapps\u002Feraser\u002Fflows",{"label":222,"to":223},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":225,"to":226},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":228,"to":229},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"published_at":231,"updated_at":232},"2024-03-18T08:38:22.000Z","2026-09-22T00:10:37.000Z"]