[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fcharts":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":324,"links":325,"dates":373},"\u002Fexamples\u002Fcomponents\u002Fcharts","collection","components",true,{"example_count":9,"app_count":10},417,122,{"id":12,"title":13,"description":14},186,"Charts","See how interfaces present data in a compact visual component. Explore how chart labels, legends, and supporting values make a graph readable within a page or dashboard.",{"title":16,"description":17,"og_image":18},"Charts UI examples - Nicelydone","Charts UI design examples from SaaS apps. See how interfaces present data in a compact visual component. Explore how chart labels, legends, and supporting…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9d326123-0be6-411e-a15e-e3b114a37e91.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Charts UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Charts UI design examples from SaaS apps. See how interfaces present data in a compact visual component. Explore how chart labels, legends, and supporting values make a graph readable within a page…",[32],{"title":33,"description":14,"links":34},"About Charts",[],[36],"417 UI components",[38,72,98,128,152,176,201,219,242,262,281,301],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"434e1755-2ba4-4302-9175-c2f0be09f086","Inference UI component","A card displaying a success rate area chart with 0 total errors over a period.","\u002Fexamples\u002Fapps\u002Finference\u002Fcomponents",1479,851,"UI component from Inference","component",[48],{"id":12,"title":13,"slug":49},"charts",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"inference","Inference","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F65e2bbca-c37f-44d3-a945-dbb7846ba077.png","Build and monitor self-improving agents.",[56,60,64,68],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},16,"Monitoring","monitoring",{"id":65,"title":66,"slug":67},37,"Developer APIs","developer-apis",{"id":69,"title":70,"slug":71},80,"Artificial Intelligence","artificial-intelligence",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"48651445-53be-4c30-a0c6-61e1b4c78e47","Origin Financial UI component","A financial dashboard displaying net worth projection over time with an interactive graph and key financial metrics.","\u002Fexamples\u002Fapps\u002Fuseorigin\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F71b162bd-bfbc-4bed-ab81-6dc0b3a96e84.png",2785,1706,"UI component from Origin Financial",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"useorigin","Origin Financial","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15075243-f5d2-4573-9045-2e4c07c4ce88.png","All-in-one financial platform for budgeting, investing, and AI-powered planning",[89,93,97],{"id":90,"title":91,"slug":92},36,"Finance","finance",{"id":94,"title":95,"slug":96},56,"Accounting","accounting",{"id":69,"title":70,"slug":71},{"uuid":99,"title":100,"description":101,"canonical_path":102,"image":103,"width":104,"height":105,"image_alt":106,"kind":46,"categories":107,"app":109},"ff5c6703-874e-4699-b8df-291a39d4cd37","Zaro UI component","A bar chart displaying credit usage over time with a tooltip showing details for a specific time point.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0e30c062-04a0-4d3b-9bf0-4f583a067046.png",2510,903,"UI component from Zaro",[108],{"id":12,"title":13,"slug":49},{"slug":110,"title":111,"logo":112,"baseline":113,"categories":114},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[115,119,120,124],{"id":116,"title":117,"slug":118},23,"Collaboration","collaboration",{"id":69,"title":70,"slug":71},{"id":121,"title":122,"slug":123},22,"Knowledge Management","knowledge-management",{"id":125,"title":126,"slug":127},46,"Analytics","analytics",{"uuid":129,"title":130,"description":131,"canonical_path":132,"image":133,"width":134,"height":135,"image_alt":136,"kind":46,"categories":137,"app":139},"5742f94a-720d-41c4-ba55-d76b3340faf2","Axiom UI component","A line chart displaying time-series data with a header showing results and comparison options.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F55f3af60-da64-4967-a3b4-ddbfddf6bbdd.png",2717,636,"UI component from Axiom",[138],{"id":12,"title":13,"slug":49},{"slug":140,"title":141,"logo":142,"baseline":143,"categories":144},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[145,146,150,151],{"id":125,"title":126,"slug":127},{"id":147,"title":148,"slug":149},57,"Big data","big-data",{"id":61,"title":62,"slug":63},{"id":57,"title":58,"slug":59},{"uuid":153,"title":154,"description":155,"canonical_path":156,"image":157,"width":158,"height":159,"image_alt":160,"kind":46,"categories":161,"app":163},"efaa89b3-8ee2-4d0e-a58f-46ec57dc0ccb","Extend UI component","A benchmark dashboard displaying performance metrics and comparative analysis of document parsing models with filtering options.","\u002Fexamples\u002Fapps\u002Fextend\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd1d0fd09-e073-4353-8344-0c1948acf08a.png",2530,1501,"UI component from Extend",[162],{"id":12,"title":13,"slug":49},{"slug":164,"title":165,"logo":166,"baseline":167,"categories":168},"extend","Extend","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15f6030e-2d0f-4381-9480-44902ed125e2.png","Document processing infrastructure for AI agents",[169,173,174,175],{"id":170,"title":171,"slug":172},77,"Machine learning","machine-learning",{"id":69,"title":70,"slug":71},{"id":65,"title":66,"slug":67},{"id":57,"title":58,"slug":59},{"uuid":177,"title":178,"canonical_path":179,"image":180,"width":181,"height":182,"image_alt":183,"kind":46,"categories":184,"app":186},"67b201a8-4220-497d-96f6-85a911b47a03","Voiceflow UI component","\u002Fexamples\u002Fapps\u002Fvoiceflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F72459671-afb7-4398-ac63-9a05533db3b4.png",853,430,"UI component from Voiceflow",[185],{"id":12,"title":13,"slug":49},{"slug":187,"title":188,"logo":189,"baseline":190,"categories":191},"voiceflow","Voiceflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvoiceflow-ba430e40.png","Build amazing conversational assistants",[192,193,197],{"id":69,"title":70,"slug":71},{"id":194,"title":195,"slug":196},47,"Customer Service","customer-service",{"id":198,"title":199,"slug":200},96,"No code","no-code",{"uuid":202,"title":203,"description":204,"canonical_path":205,"image":206,"width":207,"height":208,"image_alt":209,"kind":46,"categories":210,"app":212},"bb15249c-46b5-4b01-9941-7a21fa60d989","Monthly spending card","Displays current monthly budget status with remaining amount and visual progress line","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3a4dd59d-4de8-4e48-9509-193219d14e8b.png",1445,921,"Monthly spending card from Copilot",[211],{"id":12,"title":13,"slug":49},{"slug":213,"title":214,"logo":215,"baseline":216,"categories":217},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[218],{"id":90,"title":91,"slug":92},{"uuid":220,"title":221,"description":222,"canonical_path":223,"image":224,"width":225,"height":226,"image_alt":227,"kind":46,"categories":228,"app":230},"6570bc47-9dc6-44f5-958f-52abdf59314a","Usage Metric Card","Card showing Exa Agent ACUs total (1,479) for a single-day range with a centered blue bar on a minimal y-axis scale.","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa20bb759-162e-4656-922c-4d596d064b2e.png",1384,1004,"Usage Metric Card from Exa",[229],{"id":12,"title":13,"slug":49},{"slug":231,"title":232,"logo":233,"baseline":234,"categories":235},"exa","Exa","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F011e446a-087b-451e-b27d-63d67d92a42f.png","Real-time AI search engine with structured web search API and deep research tools",[236,240,241],{"id":237,"title":238,"slug":239},55,"Search engine","search-engine",{"id":69,"title":70,"slug":71},{"id":65,"title":66,"slug":67},{"uuid":243,"title":244,"description":245,"canonical_path":246,"image":247,"width":248,"height":249,"image_alt":250,"kind":46,"categories":251,"app":253},"e90cb538-444c-400c-863a-2cdbab76ac23","Time series analytics chart","Displays browser time and proxy data trends over time with toggleable series and interactive tooltip","\u002Fexamples\u002Fapps\u002Fbrowserbase\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb4d21dd3-847a-4d90-abe8-d6e974394b73.png",2580,991,"Time series analytics chart from Browserbase",[252],{"id":12,"title":13,"slug":49},{"slug":254,"title":255,"logo":256,"baseline":257,"categories":258},"browserbase","Browserbase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F3a57506b-6fe4-4f0c-85bc-b70ea12d0216.png","Give your agents access to the whole web.",[259,260,261],{"id":57,"title":58,"slug":59},{"id":69,"title":70,"slug":71},{"id":65,"title":66,"slug":67},{"uuid":263,"title":264,"description":265,"canonical_path":266,"image":267,"width":268,"height":269,"image_alt":270,"kind":46,"categories":271,"app":273},"07604dc8-8fdd-410f-863d-f3cee2c3ad4d","Elevenlabs UI component","A dashboard card displaying total requests with a line chart and a filterable table of response codes.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F00cd37e6-75f0-4c10-9d3d-7e00e40433c0.png",2560,1515,"UI component from Elevenlabs",[272],{"id":12,"title":13,"slug":49},{"slug":274,"title":275,"logo":276,"baseline":277,"categories":278},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[279,280],{"id":69,"title":70,"slug":71},{"id":65,"title":66,"slug":67},{"uuid":282,"title":283,"canonical_path":284,"image":285,"width":286,"height":287,"image_alt":288,"kind":46,"categories":289,"app":291},"df317d9c-bcf6-4723-9377-1348ff3873b0","Aboard UI component","\u002Fexamples\u002Fapps\u002Faboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fffa88477-6979-48cb-8f45-67e29fd0011a.png",2332,1278,"UI component from Aboard",[290],{"id":12,"title":13,"slug":49},{"slug":292,"title":293,"logo":294,"baseline":295,"categories":296},"aboard","Aboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fea3ae2e7-7419-4926-acae-b179668f6172.png","Bring joy to your workplace with Aboard",[297],{"id":298,"title":299,"slug":300},10,"Human resources","human-resources",{"uuid":302,"title":303,"description":304,"canonical_path":305,"image":306,"width":307,"height":308,"image_alt":309,"kind":46,"categories":310,"app":312},"523e650d-c672-477d-9717-e4c9d22a5cc2","Mocha UI component","A web analytics dashboard displaying real-time visitor and pageview data with a line chart.","\u002Fexamples\u002Fapps\u002Fmocha\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3b588a7c-302d-44b7-bdc8-f421ab6802ae.png",2730,1181,"UI component from Mocha",[311],{"id":12,"title":13,"slug":49},{"slug":313,"title":314,"logo":315,"baseline":316,"categories":317},"mocha","Mocha","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd9d4dea4-3f03-4b97-b9a1-d776442fd100.png","Create beautiful websites with words, not code",[318,322,323],{"id":319,"title":320,"slug":321},7,"Web Development","web-development",{"id":69,"title":70,"slug":71},{"id":198,"title":199,"slug":200},[],[326,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370],{"label":13,"to":327},"\u002Fexamples\u002Fscreens\u002Fcharts",{"label":329,"to":330},"Dashboard","\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":332,"to":333},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":335,"to":336},"Usage","\u002Fexamples\u002Fscreens\u002Fusage",{"label":338,"to":339},"Inference design examples","\u002Fexamples\u002Fapps\u002Finference",{"label":341,"to":342},"Origin Financial design examples","\u002Fexamples\u002Fapps\u002Fuseorigin",{"label":344,"to":345},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":347,"to":348},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":350,"to":351},"Extend design examples","\u002Fexamples\u002Fapps\u002Fextend",{"label":353,"to":354},"Voiceflow design examples","\u002Fexamples\u002Fapps\u002Fvoiceflow",{"label":356,"to":357},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":359,"to":360},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":362,"to":363},"Browserbase design examples","\u002Fexamples\u002Fapps\u002Fbrowserbase",{"label":365,"to":366},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":368,"to":369},"Aboard design examples","\u002Fexamples\u002Fapps\u002Faboard",{"label":371,"to":372},"Mocha design examples","\u002Fexamples\u002Fapps\u002Fmocha",{"published_at":374,"updated_at":375},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]