[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fbytescale\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":216,"links":217,"dates":233},"\u002Fexamples\u002Fapps\u002Fbytescale\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Bytescale UI components examples - Nicelydone","Browse Bytescale UI component design examples. Preview individual interface elements and explore related component categories. Simple file storage & file…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcd4d3488-cc88-4bed-8912-0fb54a3f39eb.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},"Bytescale design examples","\u002Fexamples\u002Fapps\u002Fbytescale",{"label":23,"to":4},"Bytescale UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Bytescale UI component design examples. Preview individual interface elements and explore related component categories. Simple file storage & file processing apis for developers",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Bytescale","bytescale","Simple file storage & file processing apis for developers","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbytescale-70575edd.png","https:\u002F\u002Fwww.bytescale.com","BytescaleHQ",[37,41],{"id":38,"title":39,"slug":40},37,"Developer APIs","developer-apis",{"id":42,"title":43,"slug":44},48,"Developer Tools","developer-tools",[46,61,76,91,103,114,126,141,156,171,186,201],{"uuid":47,"title":48,"description":49,"canonical_path":4,"image":11,"width":50,"height":51,"image_alt":52,"kind":53,"categories":54,"app":59},"0eb53c6b-9367-42dd-ab54-a9424f1da1b4","Usage progress bar","A progress bar showing storage usage against a limit, with a legend below.",1935,398,"Usage progress bar from Bytescale","component",[55],{"id":56,"title":57,"slug":58},213,"Progress indicator","progress-indicator",{"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},"9f9fed3e-06be-4079-b003-36e1386c9708","File upload list","A list of files showing their upload status. Some files are fully uploaded with metadata, some are actively uploading with progress bars, and one is queued.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F80d79fb5-10e8-442b-a1c5-bd265c476bfb.png",1704,1682,"File upload list from Bytescale",[70],{"id":71,"title":72,"slug":73},188,"File upload input","file-upload-input",{"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},"a8175960-9953-44f2-aa72-8f71dcc72dce","Bandwidth usage chart","A bar chart displaying daily bandwidth usage, with a toggle for daily or monthly views. It shows uploads and downloads over a period of time, along with the current plan limit.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd0989668-eff0-4e2f-9ff0-c79175b2d343.png",2654,1106,"Bandwidth usage chart from Bytescale",[85],{"id":86,"title":87,"slug":88},186,"Charts","charts",{"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":101},"6f4e75d0-49ab-4565-ad9e-2d81e16d27b1","KPI Card with Sparkline","A metric card displaying total space used, featuring a large numeric value, a trend indicator badge, a time period label, and a simple blue sparkline chart.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F63f6321b-d641-4ad0-9fd6-c601c11000c1.png",693,442,"KPI Card with Sparkline from Bytescale",[100],{"id":86,"title":87,"slug":88},{"slug":31,"title":30,"logo":33,"categories":102},[],{"uuid":104,"title":105,"description":106,"canonical_path":4,"image":107,"width":108,"height":51,"image_alt":109,"kind":53,"categories":110,"app":112},"80bf17c8-ee30-42eb-a53f-b59d19f28851","Storage usage progress bar","A horizontal progress bar showing storage usage against a limit, with a legend below.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7307e836-a439-43ce-ab7d-32cc5bc64bab.png",2460,"Storage usage progress bar from Bytescale",[111],{"id":86,"title":87,"slug":88},{"slug":31,"title":30,"logo":33,"categories":113},[],{"uuid":115,"title":116,"description":117,"canonical_path":4,"image":118,"width":119,"height":120,"image_alt":121,"kind":53,"categories":122,"app":124},"342f5b34-e02a-4b15-a1ee-998423ca2021","Available Seats Card","A card component displaying the current usage of available seats with a progress bar and a call to action to upgrade.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc8cb7bdb-f2fe-4772-8a25-4986fb9bdece.png",697,599,"Available Seats Card from Bytescale",[123],{"id":56,"title":57,"slug":58},{"slug":31,"title":30,"logo":33,"categories":125},[],{"uuid":127,"title":128,"description":129,"canonical_path":4,"image":130,"width":131,"height":132,"image_alt":133,"kind":53,"categories":134,"app":139},"a478e649-f4a0-4c48-8379-883c66c70e21","Subdomains radio group","A radio button group for selecting subdomain matching behavior, with one option selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F75eb6ba8-ceab-4da8-982b-20489d4e2eb1.png",854,224,"Subdomains radio group from Bytescale",[135],{"id":136,"title":137,"slug":138},216,"Radio button","radio-button",{"slug":31,"title":30,"logo":33,"categories":140},[],{"uuid":142,"title":143,"description":144,"canonical_path":4,"image":145,"width":146,"height":147,"image_alt":148,"kind":53,"categories":149,"app":154},"3b994619-1157-46a1-909a-5ec691861310","Settings toggle with description","A toggle switch accompanied by a title, a detailed explanatory description, and an icon, used to enable or disable a specific security setting.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F85878029-4a33-46e4-9da7-577f98209d79.png",771,431,"Settings toggle with description from Bytescale",[150],{"id":151,"title":152,"slug":153},236,"Toggle\u002FSwitch","toggle-switch",{"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":53,"categories":164,"app":169},"75496451-781f-4881-a0ef-c39d452b88aa","API Key Type Selector","A form section for selecting the API key type, featuring a selected radio button for 'Public' with a description, and a disabled checkbox for 'Require JWT' with an 'Upgrade' badge.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1a64ea0c-004d-47ce-9bd5-9119f3efd91f.png",1159,566,"API Key Type Selector from Bytescale",[165],{"id":166,"title":167,"slug":168},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":170},[],{"uuid":172,"title":173,"description":174,"canonical_path":4,"image":175,"width":176,"height":177,"image_alt":178,"kind":53,"categories":179,"app":184},"11a58092-e90b-4f3f-8e66-e2f8c6aabb62","Path Permissions Table","A table for configuring API key permissions based on file paths. It includes columns for different actions like download, upload, overwrite, delete, etc., with checkboxes to enable or disable them for specific path patterns.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd73f1a69-960b-4940-b6c5-2722f30a0985.png",2652,1278,"Path Permissions Table from Bytescale",[180],{"id":181,"title":182,"slug":183},248,"Table","table-2",{"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":199},"9b5a1664-0241-456d-9bfb-85f60755d139","Attribution block","A block showing who last updated an item, featuring a generic avatar, user name, and a timestamp.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F12820c3e-cbde-4c2f-b1b0-3ba953b19570.png",798,277,"Attribution block from Bytescale",[195],{"id":196,"title":197,"slug":198},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":200},[],{"uuid":202,"title":203,"description":204,"canonical_path":4,"image":205,"width":206,"height":207,"image_alt":208,"kind":53,"categories":209,"app":214},"fa1caa29-7fbf-49a5-ae99-168b3a7e8d9c","Horizontal Stepper","A horizontal stepper showing three stages of a process. The first step is active, indicated by a blue circle and text, while the remaining steps are inactive with gray circles and dark text. Steps are connected by thin horizontal lines.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Feb2d62d6-17a8-4a5d-ae69-917a52e44f3c.png",2399,331,"Horizontal Stepper from Bytescale",[210],{"id":211,"title":212,"slug":213},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":215},[],[],[218,221,224,227,230],{"label":219,"to":220},"Bytescale product screens","\u002Fexamples\u002Fapps\u002Fbytescale\u002Fscreens",{"label":222,"to":223},"Bytescale marketing pages","\u002Fexamples\u002Fapps\u002Fbytescale\u002Fmarketing",{"label":225,"to":226},"Bytescale user flows","\u002Fexamples\u002Fapps\u002Fbytescale\u002Fflows",{"label":228,"to":229},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":231,"to":232},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"published_at":234,"updated_at":235},"2024-01-29T13:38:29.000Z","2026-09-19T00:05:40.000Z"]