[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fgithub\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":203,"links":204,"dates":223},"\u002Fexamples\u002Fapps\u002Fgithub\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Github UI components examples - Nicelydone","Browse Github UI component design examples. Preview individual interface elements and explore related component categories. Where the world builds software","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0edbfcc1-efe8-4096-b070-55a24ee9edf8.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},"Github design examples","\u002Fexamples\u002Fapps\u002Fgithub",{"label":23,"to":4},"Github 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":29,"categories":34},"Github","github","Where the world builds software ","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgithub-b84e2242.png","http:\u002F\u002Fwww.github.com",[35,39,43],{"id":36,"title":37,"slug":38},48,"Developer Tools","developer-tools",{"id":40,"title":41,"slug":42},23,"Collaboration","collaboration",{"id":44,"title":45,"slug":46},45,"Open Source","open-source",[48,63,78,93,108,118,133,142,157,169,181,192],{"uuid":49,"title":50,"description":51,"canonical_path":4,"image":11,"width":52,"height":53,"image_alt":54,"kind":55,"categories":56,"app":61},"6e1a1989-62b0-474b-b8ab-82efff65dd7d","Global Header with Trial Banner","A global application header featuring a top bar with search and user actions, a secondary navigation bar with tabs, and a blue trial status banner at the bottom.",3018,278,"Global Header with Trial Banner from Github","component",[57],{"id":58,"title":59,"slug":60},240,"Horizontal navigation","horizontal-navigation",{"slug":30,"title":29,"logo":32,"categories":62},[],{"uuid":64,"title":65,"description":66,"canonical_path":4,"image":67,"width":68,"height":69,"image_alt":70,"kind":55,"categories":71,"app":76},"e5aaa7b4-06fa-4330-bd80-ef8c0e7441fb","Settings Sidebar Navigation","A comprehensive vertical sidebar navigation menu for organization settings, featuring collapsible sections, nested items, and an active state indicator.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F17cc018f-f205-4ad4-8b12-9808ffb141e1.png",731,3074,"Settings Sidebar Navigation from Github",[72],{"id":73,"title":74,"slug":75},209,"Vertical navigation","vertical-navigation",{"slug":30,"title":29,"logo":32,"categories":77},[],{"uuid":79,"title":80,"description":81,"canonical_path":4,"image":82,"width":83,"height":84,"image_alt":85,"kind":55,"categories":86,"app":91},"e9e1fccf-d5ae-470a-b98b-81615322028b","Horizontal Stepper","A horizontal stepper component indicating progress through a three-step process, with the first step currently active.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb1bd4217-11f5-4a3c-a28b-7c3608f76bd0.png",1030,414,"Horizontal Stepper from Github",[87],{"id":88,"title":89,"slug":90},227,"Stepper","stepper",{"slug":30,"title":29,"logo":32,"categories":92},[],{"uuid":94,"title":95,"description":96,"canonical_path":4,"image":97,"width":98,"height":99,"image_alt":100,"kind":55,"categories":101,"app":106},"8d2c0ce0-48b3-44ff-a362-48d52d0f427e","Settings toggle card","A card containing a setting title, a descriptive paragraph, and a toggle switch to enable or disable the setting.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F94e45f5a-83f9-40f5-8150-ed9695cd3d3c.png",880,428,"Settings toggle card from Github",[102],{"id":103,"title":104,"slug":105},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":107},[],{"uuid":109,"title":110,"description":111,"canonical_path":4,"image":112,"width":98,"height":99,"image_alt":113,"kind":55,"categories":114,"app":116},"4c1d70a4-ec64-4c7b-aa2a-e62152a50ecb","Settings card with toggle","A card containing a setting title, a descriptive paragraph explaining the setting's behavior, and a toggle switch currently in the 'On' state.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fddc3b802-f768-4635-a109-92f7de8f5b07.png","Settings card with toggle from Github",[115],{"id":103,"title":104,"slug":105},{"slug":30,"title":29,"logo":32,"categories":117},[],{"uuid":119,"title":120,"description":121,"canonical_path":4,"image":122,"width":123,"height":124,"image_alt":125,"kind":55,"categories":126,"app":131},"c103d593-bc3c-409b-97a4-1505dad39270","Theme preferences section","A settings section for configuring the application's visual theme. It includes a dropdown to sync with the system theme and two cards for selecting specific day and night themes, complete with visual previews and color swatches.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1a1237dd-e3e2-4fa5-8382-2f26d88e6fad.png",1791,1513,"Theme preferences section from Github",[127],{"id":128,"title":129,"slug":130},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":132},[],{"uuid":134,"title":120,"description":135,"canonical_path":4,"image":136,"width":137,"height":137,"image_alt":125,"kind":55,"categories":138,"app":140},"b9efcb81-98ed-453c-ab70-7ba873f40b90","A settings section for selecting a UI theme. It includes a dropdown for theme mode (single or sync with system) and a grid of selectable theme cards with visual previews and radio buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd7c9754e-8121-4c34-95fb-a90107ded968.png",1792,[139],{"id":128,"title":129,"slug":130},{"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":55,"categories":150,"app":155},"cbda7724-df7e-48f3-a362-f4d543d07cb9","Code frequency chart","A mirrored area chart showing code additions and deletions over time. Additions are plotted above the zero line in green, and deletions are plotted below the zero line in red.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F23cbae11-4a1e-4272-858f-70947634128c.png",2046,1329,"Code frequency chart from Github",[151],{"id":152,"title":153,"slug":154},186,"Charts","charts",{"slug":30,"title":29,"logo":32,"categories":156},[],{"uuid":158,"title":159,"description":160,"canonical_path":4,"image":161,"width":162,"height":163,"image_alt":164,"kind":55,"categories":165,"app":167},"83b54ab6-8ece-4807-87fc-3300348e86dd","Commit Activity Charts","A stacked view of two charts showing commit activity over time. The top chart is a bar chart displaying weekly commit volume over a year, with the most recent week highlighted in red. The bottom chart is a line chart showing the daily distribution of commits for a selected week, with data points marked and labeled.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8d30a9f0-5336-499d-be79-c4536a8c4629.png",2023,1206,"Commit Activity Charts from Github",[166],{"id":152,"title":153,"slug":154},{"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":55,"categories":177,"app":179},"a9bfe631-194c-4dc7-ab0f-844416944701","Community Standards Checklist","A checklist displaying the completion status of recommended community standards for a repository. It includes a progress bar at the top and a list of items with checkmarks or bullet points indicating their status.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F603d61a5-85ee-4beb-8f28-10a9a39bdf36.png",2048,1289,"Community Standards Checklist from Github",[178],{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":180},[],{"uuid":182,"title":183,"description":184,"canonical_path":4,"image":185,"width":174,"height":186,"image_alt":187,"kind":55,"categories":188,"app":190},"de529ee1-b746-4a8d-89f8-fafeda72b6b3","Contributors Graph Dashboard","A dashboard displaying a main area chart of overall repository contributions over time, followed by a grid of individual contributor cards. Each card shows the contributor's rank, avatar, name, commit stats (additions and deletions), and a personal sparkline-style area chart of their activity.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6ceab7e1-b102-49af-aa67-0eb750e99280.png",3762,"Contributors Graph Dashboard from Github",[189],{"id":152,"title":153,"slug":154},{"slug":30,"title":29,"logo":32,"categories":191},[],{"uuid":193,"title":194,"description":195,"canonical_path":4,"image":196,"width":174,"height":197,"image_alt":198,"kind":55,"categories":199,"app":201},"5ce15c0e-a5bc-4cd4-9825-2d2f4d1e4e66","Activity Overview Dashboard","A dashboard section displaying a summary of repository activity over a selected period. It includes a date range header with a period selector, an overview card with progress bars and KPI tiles for pull requests and issues, and a section below with a text summary of commits and a bar chart showing commits by author.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8dfec3bd-2c1a-4520-b57b-21adc1142fb6.png",1156,"Activity Overview Dashboard from Github",[200],{"id":152,"title":153,"slug":154},{"slug":30,"title":29,"logo":32,"categories":202},[],[],[205,208,211,214,217,220],{"label":206,"to":207},"Github product screens","\u002Fexamples\u002Fapps\u002Fgithub\u002Fscreens",{"label":209,"to":210},"Github marketing pages","\u002Fexamples\u002Fapps\u002Fgithub\u002Fmarketing",{"label":212,"to":213},"Github user flows","\u002Fexamples\u002Fapps\u002Fgithub\u002Fflows",{"label":215,"to":216},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":218,"to":219},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":221,"to":222},"Open Source app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fopen-source",{"published_at":224,"updated_at":225},"2021-08-22T19:50:15.000Z","2026-09-27T00:10:29.000Z"]