[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fskiff\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":45,"showcases":213,"links":214,"dates":248},"\u002Fexamples\u002Fapps\u002Fskiff\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Skiff UI components examples - Nicelydone","Browse Skiff UI component design examples. Preview individual interface elements and explore related component categories. Skiff is the privacy-first…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6483862a-1e34-44e8-b329-e0a34dea906a.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},"Skiff design examples","\u002Fexamples\u002Fapps\u002Fskiff",{"label":23,"to":4},"Skiff UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Skiff UI component design examples. Preview individual interface elements and explore related component categories. Skiff is the privacy-first workspace for free thinkers",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Skiff","skiff","Skiff is the privacy-first workspace for free thinkers","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fskiff-20fc29d6.png","https:\u002F\u002Fskiff.com","skiffprivacy",[37,41],{"id":38,"title":39,"slug":40},92,"Email","email",{"id":42,"title":43,"slug":44},30,"Productivity","productivity",[46,61,76,91,106,121,134,148,161,173,186,198],{"uuid":47,"title":48,"description":49,"canonical_path":4,"image":11,"width":50,"height":51,"image_alt":52,"kind":53,"categories":54,"app":59},"21eef81a-5b9a-4940-8a55-510d2124cc3c","Navigation menu with dropdown","A floating top navigation bar with an open dropdown menu showing product options.",1386,681,"Navigation menu with dropdown from Skiff","component",[55],{"id":56,"title":57,"slug":58},290,"Flyout menu","flyout-menu",{"slug":31,"title":30,"logo":33,"categories":60},[],{"uuid":62,"title":63,"description":64,"canonical_path":4,"image":65,"width":66,"height":67,"image_alt":68,"kind":53,"categories":69,"app":74},"c72ca138-64bd-4ec3-9846-5860b909dd8b","Feature Bento Grid","A bento grid layout showcasing different product features. Each card highlights a specific app (Mail, Pages, Calendar, Drive) with a title, description, and a visual preview of the interface.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fea237ed2-285b-45bc-aa81-0ec9ebc820f8.png",2776,4176,"Feature Bento Grid from Skiff",[70],{"id":71,"title":72,"slug":73},298,"Bento box","bento-grid",{"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":53,"categories":84,"app":89},"759cc579-bbf4-4efa-b624-63f7ae681fd3","Website Footer","A standard website footer containing a logo, social media links, copyright information, and several columns of navigation links categorized by topic.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F759cc579-bbf4-4efa-b624-63f7ae681fd3.png",3112,667,"Website Footer from Skiff",[85],{"id":86,"title":87,"slug":88},202,"Footer","footer",{"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":53,"categories":99,"app":104},"c8ebb146-cb75-4156-88d8-4d806341be43","Domain Registration Banner","A wide, colorful banner prompting the user to register a new personalized domain, featuring a title, subtitle, and a primary call-to-action button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc8ebb146-cb75-4156-88d8-4d806341be43.png",2060,566,"Domain Registration Banner from Skiff",[100],{"id":101,"title":102,"slug":103},278,"Illustration","illustration",{"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":53,"categories":114,"app":119},"27202cdf-de4b-47f7-bdff-081f74d93087","Time range picker","A horizontal time range input showing a start time and an end time, separated by an arrow icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F27202cdf-de4b-47f7-bdff-081f74d93087.png",590,192,"Time range picker from Skiff",[115],{"id":116,"title":117,"slug":118},199,"Input date","input-date",{"slug":31,"title":30,"logo":33,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":4,"image":125,"image_alt":126,"kind":53,"categories":127,"app":132},"35164bf0-0c07-467b-b7e1-e109d2aaf842","Upload status toast","A dark-themed toast notification showing the successful upload of a file to Skiff Drive.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F35164bf0-0c07-467b-b7e1-e109d2aaf842.png","Upload status toast from Skiff",[128],{"id":129,"title":130,"slug":131},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":133},[],{"uuid":135,"title":136,"description":137,"canonical_path":4,"image":138,"width":139,"height":140,"image_alt":141,"kind":53,"categories":142,"app":146},"8d9a2423-9ecf-49ca-b135-80041df2551d","Code block","A syntax-highlighted code block displaying a Javascript fetch request.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8d9a2423-9ecf-49ca-b135-80041df2551d.png",1740,800,"Code block from Skiff",[143],{"id":144,"title":136,"slug":145},187,"code-block",{"slug":31,"title":30,"logo":33,"categories":147},[],{"uuid":149,"title":150,"description":151,"canonical_path":4,"image":152,"image_alt":153,"kind":53,"categories":154,"app":159},"e05eac26-f40d-42e7-9b67-6589171c6a03","Text formatting toolbar with color picker","A floating text formatting toolbar with an open color picker popover. The toolbar includes options for text style, color, alignment, and basic formatting. The color picker offers a grid of preset colors for both text and highlight.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe05eac26-f40d-42e7-9b67-6589171c6a03.png","Text formatting toolbar with color picker from Skiff",[155],{"id":156,"title":157,"slug":158},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":160},[],{"uuid":162,"title":163,"description":164,"canonical_path":4,"image":165,"width":166,"height":167,"image_alt":168,"kind":53,"categories":169,"app":171},"9cc1f326-1210-41ce-9e06-33bd90915005","Icon and Color Picker","A floating popover containing a search bar, a grid of selectable icons, and a row of color swatches to customize the selected icon. A 'Remove icon' button is also present.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9cc1f326-1210-41ce-9e06-33bd90915005.png",956,1114,"Icon and Color Picker from Skiff",[170],{"id":156,"title":157,"slug":158},{"slug":31,"title":30,"logo":33,"categories":172},[],{"uuid":174,"title":175,"description":176,"canonical_path":4,"image":177,"image_alt":178,"kind":53,"categories":179,"app":184},"73977f67-fa6d-496a-9f43-5b6fc1189ca4","Skiff UI component","A contextual menu with actions","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F73977f67-fa6d-496a-9f43-5b6fc1189ca4.png","UI component from Skiff",[180],{"id":181,"title":182,"slug":183},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":185},[],{"uuid":187,"title":188,"description":189,"canonical_path":4,"image":190,"width":191,"height":192,"image_alt":193,"kind":53,"categories":194,"app":196},"9e0e3e42-6bcb-49de-96d4-8664a5268eac","Nested export menu","A document editor's more options menu, showing a nested submenu for export formats.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9e0e3e42-6bcb-49de-96d4-8664a5268eac.png",862,780,"Nested export menu from Skiff",[195],{"id":181,"title":182,"slug":183},{"slug":31,"title":30,"logo":33,"categories":197},[],{"uuid":199,"title":200,"description":201,"canonical_path":4,"image":202,"width":203,"height":204,"image_alt":205,"kind":53,"categories":206,"app":211},"29c46035-b4f8-458b-b739-e960e615859c","Version history panel","A side panel displaying document version history, grouped by date. It includes an active selection, a restore button, and an upgrade prompt for full history access.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F29c46035-b4f8-458b-b739-e960e615859c.png",865,978,"Version history panel from Skiff",[207],{"id":208,"title":209,"slug":210},249,"Timeline & history","timeline-history",{"slug":31,"title":30,"logo":33,"categories":212},[],[],[215,218,221,224,227,230,232,236,240,244],{"label":216,"to":217},"Skiff product screens","\u002Fexamples\u002Fapps\u002Fskiff\u002Fscreens",{"label":219,"to":220},"Skiff marketing pages","\u002Fexamples\u002Fapps\u002Fskiff\u002Fmarketing",{"label":222,"to":223},"Skiff user flows","\u002Fexamples\u002Fapps\u002Fskiff\u002Fflows",{"label":225,"to":226},"Email app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Femail",{"label":228,"to":229},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"label":231,"to":18},"All SaaS app examples",{"label":233,"to":234,"description":235},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":237,"to":238,"description":239},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":241,"to":242,"description":243},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":245,"to":246,"description":247},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":249,"updated_at":250},"2023-02-21T08:52:58.000Z","2026-09-26T12:10:16.000Z"]