[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftome\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":40,"showcases":211,"links":212,"dates":225},"\u002Fexamples\u002Fapps\u002Ftome\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Tome UI components examples - Nicelydone","Browse Tome UI component design examples. Preview individual interface elements and explore related component categories. The storytelling tool for work","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1e491431-4e78-4752-ae62-c3c07277782e.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},"Tome design examples","\u002Fexamples\u002Fapps\u002Ftome",{"label":23,"to":4},"Tome 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},"Tome","tome","The storytelling tool for work","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftome-3d8125c5.png","https:\u002F\u002Ftome.app","magicaltome",[36],{"id":37,"title":38,"slug":39},85,"Presentation software","presentation-software",[41,56,71,86,101,115,130,142,154,169,181,196],{"uuid":42,"title":43,"description":44,"canonical_path":4,"image":11,"width":45,"height":46,"image_alt":47,"kind":48,"categories":49,"app":54},"4807ff44-729b-496a-8c9f-f46d47dcba5e","Navigation Dropdown Menu","A dark-themed dropdown menu originating from a top navigation bar. The 'Use Cases' item is active, revealing a list of specific use cases like Sales, Marketing, and Product.",655,589,"Navigation Dropdown Menu from Tome","component",[50],{"id":51,"title":52,"slug":53},290,"Flyout menu","flyout-menu",{"slug":30,"title":29,"logo":32,"categories":55},[],{"uuid":57,"title":58,"description":59,"canonical_path":4,"image":60,"width":61,"height":62,"image_alt":63,"kind":48,"categories":64,"app":69},"fff3b583-94e9-480d-9101-9af3b7b79718","Dark Theme Hero Section","A dark-themed hero section featuring a bold headline, a descriptive subheadline, and two call-to-action buttons on the left. On the right, a large, angled product screenshot showcases the presentation platform's interface.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F81c822ac-e811-4265-a2a5-7ab670213a21.png",2992,1890,"Dark Theme Hero Section from Tome",[65],{"id":66,"title":67,"slug":68},197,"Hero section","hero-section",{"slug":30,"title":29,"logo":32,"categories":70},[],{"uuid":72,"title":73,"description":74,"canonical_path":4,"image":75,"width":76,"height":77,"image_alt":78,"kind":48,"categories":79,"app":84},"820a9368-dab3-41d9-9ec3-3ee807501087","Theme selector dropdown","An open dropdown menu for selecting a default brand theme. The list displays various theme options, each with a small preview thumbnail showing title and body text colors, alongside the theme name. The currently selected theme has a checkmark next to it.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2af3a745-c1cd-49f7-8d03-579b20919535.png",1596,1160,"Theme selector dropdown from Tome",[80],{"id":81,"title":82,"slug":83},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":85},[],{"uuid":87,"title":88,"description":89,"canonical_path":4,"image":90,"width":91,"height":92,"image_alt":93,"kind":48,"categories":94,"app":99},"d74e0745-43f1-4e3d-ba70-ad7dbd43bcd1","Member invitation input","An input field for inviting members, showing an email address entered as a tag, a role selector dropdown, and an Invite button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6195d1a7-2457-461f-9322-8cef6d96f9fc.png",1558,363,"Member invitation input from Tome",[95],{"id":96,"title":97,"slug":98},252,"Input tag","input-tag",{"slug":30,"title":29,"logo":32,"categories":100},[],{"uuid":102,"title":103,"description":104,"canonical_path":4,"image":105,"width":91,"height":106,"image_alt":107,"kind":48,"categories":108,"app":113},"a2a3c7ce-72c9-47c8-8d42-e3f9e692ed93","Upgrade prompt list","A list of features that are locked behind a Pro subscription. Each item shows a title, description, a 'PRO' badge, and an 'Upgrade' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F494b35c0-b822-4737-9932-1c1311900e57.png",795,"Upgrade prompt list from Tome",[109],{"id":110,"title":111,"slug":112},255,"Upgrade your plan","upgrade-your-plan",{"slug":30,"title":29,"logo":32,"categories":114},[],{"uuid":116,"title":117,"description":118,"canonical_path":4,"image":119,"width":120,"height":121,"image_alt":122,"kind":48,"categories":123,"app":128},"edcffa79-00c6-4fac-b95d-bc61e2c48034","Empty state message","A simple text-only empty state message indicating the user hasn't been added to any items yet.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F49315be1-d687-434a-8afb-3205dd1316ee.png",932,324,"Empty state message from Tome",[124],{"id":125,"title":126,"slug":127},302,"Empty state","emptystate",{"slug":30,"title":29,"logo":32,"categories":129},[],{"uuid":131,"title":132,"description":133,"canonical_path":4,"image":134,"width":135,"height":136,"image_alt":137,"kind":48,"categories":138,"app":140},"0b665b64-4444-40dd-a377-0bae1a8c3251","Upgrade banner and topbar","A dark-themed top navigation area featuring a prominent red banner alerting the user that their workspace has exceeded the free plan's creation limit, alongside a call-to-action button to upgrade. Below the banner is a header with a user profile dropdown, a notification bell, a section title, and action buttons for creating new documents.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5920bbcd-2ed7-46c0-8399-a95d000803f1.png",3024,186,"Upgrade banner and topbar from Tome",[139],{"id":110,"title":111,"slug":112},{"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":48,"categories":150,"app":152},"75fc916b-bc04-475a-ad10-4b73f509f96a","Empty slide state","An empty slide state in a presentation editor offering three primary actions to populate the slide: Generate (with AI), Upload, or Search. The actions are presented as large, square, semi-transparent buttons centered within a bordered slide area.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F53fe9f92-be1a-4fb1-a853-7328541ae60b.png",896,1438,"Empty slide state from Tome",[151],{"id":125,"title":126,"slug":127},{"slug":30,"title":29,"logo":32,"categories":153},[],{"uuid":155,"title":156,"description":157,"canonical_path":4,"image":158,"width":159,"height":160,"image_alt":161,"kind":48,"categories":162,"app":167},"d8c1fa94-d98e-4149-84e1-fcd7ffc56db2","Layout picker grid","A grid of selectable layout templates for a presentation slide, displayed in a dark-themed popover.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Feefdf991-4abb-435c-b6c0-7e4193457424.png",780,969,"Layout picker grid from Tome",[163],{"id":164,"title":165,"slug":166},283,"Grid list","grid-list",{"slug":30,"title":29,"logo":32,"categories":168},[],{"uuid":170,"title":171,"description":172,"canonical_path":4,"image":173,"width":174,"height":175,"image_alt":176,"kind":48,"categories":177,"app":179},"a3c61438-8418-4e51-adbe-d9930a76b003","AI command palette","A dark-themed command palette with a text input field at the bottom and a list of suggested actions above. The user has typed 'add page' into the input field, filtering the list to show related actions like 'Create presentation about...', 'Add page', and 'Create page about...'. Some actions are marked with a 'PRO' badge.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F17539902-b3ff-40ea-b2a5-3e778f5ecdc7.png",1674,756,"AI command palette from Tome",[178],{"id":110,"title":111,"slug":112},{"slug":30,"title":29,"logo":32,"categories":180},[],{"uuid":182,"title":183,"description":184,"canonical_path":4,"image":185,"width":186,"height":187,"image_alt":188,"kind":48,"categories":189,"app":194},"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.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcc62aad4-71da-4130-890b-f8c21034756b.png",976,424,"AI generation progress toast from Tome",[190],{"id":191,"title":192,"slug":193},226,"Skeleton","skeleton",{"slug":30,"title":29,"logo":32,"categories":195},[],{"uuid":197,"title":198,"description":199,"canonical_path":4,"image":200,"width":201,"height":202,"image_alt":203,"kind":48,"categories":204,"app":209},"136525a2-e3d0-4a13-8adb-c099d1080882","Document card with context menu","A document preview card showing a presentation title and metadata, with an open context menu overlay displaying file actions like Open, Duplicate, and Delete.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa3d05aea-1b53-4ba7-a8ba-5f97c813e119.png",926,776,"Document card with context menu from Tome",[205],{"id":206,"title":207,"slug":208},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":210},[],[],[213,216,219,222],{"label":214,"to":215},"Tome product screens","\u002Fexamples\u002Fapps\u002Ftome\u002Fscreens",{"label":217,"to":218},"Tome marketing pages","\u002Fexamples\u002Fapps\u002Ftome\u002Fmarketing",{"label":220,"to":221},"Tome user flows","\u002Fexamples\u002Fapps\u002Ftome\u002Fflows",{"label":223,"to":224},"Presentation software app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpresentation-software",{"published_at":226,"updated_at":227},"2022-10-10T10:04:22.000Z","2026-09-26T12:10:07.000Z"]