[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fbonsai\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":53,"showcases":227,"links":228,"dates":247},"\u002Fexamples\u002Fapps\u002Fbonsai\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Bonsai UI components examples - Nicelydone","Browse Bonsai UI component design examples. Preview individual interface elements and explore related component categories. One platform to streamline your…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe1493b3a-6ef2-4178-870f-7b323e840226.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},"Bonsai design examples","\u002Fexamples\u002Fapps\u002Fbonsai",{"label":23,"to":4},"Bonsai UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Bonsai UI component design examples. Preview individual interface elements and explore related component categories. One platform to streamline your entire business",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Bonsai","bonsai","One platform to streamline your entire business","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbonsai-07a1ca35.png","https:\u002F\u002Fhellobonsai.com","bonsaiinc",[37,41,45,49],{"id":38,"title":39,"slug":40},56,"Accounting","accounting",{"id":42,"title":43,"slug":44},36,"Finance","finance",{"id":46,"title":47,"slug":48},29,"Task Management","task-management",{"id":50,"title":51,"slug":52},53,"CRM","crm",[54,69,84,99,111,126,141,156,171,186,201,216],{"uuid":55,"title":56,"description":57,"canonical_path":4,"image":11,"width":58,"height":59,"image_alt":60,"kind":61,"categories":62,"app":67},"83bf70cf-3abf-4e09-b170-97b13b888606","Bonsai UI component","A modal for brand color and white label settings.",1102,1055,"UI component from Bonsai","component",[63],{"id":64,"title":65,"slug":66},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":68},[],{"uuid":70,"title":71,"description":72,"canonical_path":4,"image":73,"width":74,"height":75,"image_alt":76,"kind":61,"categories":77,"app":82},"61541820-c288-4daa-8066-1bbd69342d0b","Two-factor Authentication Settings Card","A settings card for configuring two-factor authentication. It includes a toggle group to enable or disable the feature, and a radio group to select between email or SMS verification methods.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F227e5be5-cc8c-4d29-877f-c2b2934a7930.png",2044,908,"Two-factor Authentication Settings Card from Bonsai",[78],{"id":79,"title":80,"slug":81},179,"Checkbox & radio","checkbox-radio",{"slug":31,"title":30,"logo":33,"categories":83},[],{"uuid":85,"title":86,"description":87,"canonical_path":4,"image":88,"width":89,"height":90,"image_alt":91,"kind":61,"categories":92,"app":97},"ec08cd86-b902-4533-bf06-8438cec83607","KPI Donut Charts","A pair of donut charts displaying key performance indicators for time tracking. The left chart shows total hours split by billable and non-billable, while the right chart shows total billable amount split by billed and unbilled.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd2f52f21-83f4-4cbc-866f-7aac6934b042.png",1825,416,"KPI Donut Charts from Bonsai",[93],{"id":94,"title":95,"slug":96},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":98},[],{"uuid":100,"title":101,"description":102,"canonical_path":4,"image":103,"width":104,"height":105,"image_alt":106,"kind":61,"categories":107,"app":109},"4501eceb-c52b-4daf-bc39-57d17dae0c8c","Time Tracked Chart","A bar chart displaying time tracked over a week, with a single green bar for April 2nd. It includes a date range selector and summary metrics below the chart.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F04b3f3c9-35ce-46cc-b64b-bec17cffa2a7.png",1765,1114,"Time Tracked Chart from Bonsai",[108],{"id":94,"title":95,"slug":96},{"slug":31,"title":30,"logo":33,"categories":110},[],{"uuid":112,"title":113,"description":114,"canonical_path":4,"image":115,"width":116,"height":117,"image_alt":118,"kind":61,"categories":119,"app":124},"228ee045-8f6f-484e-81af-02d6ba2afc94","Activity Timeline","A vertical timeline displaying a chronological list of recent activities, such as contract signings, project creations, and invoice payments. Each entry includes a descriptive sentence with bolded keywords and a timestamp, connected by a dotted line with circular nodes.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbacba057-daf9-45a5-8c2f-aec4acb22c4c.png",825,1395,"Activity Timeline from Bonsai",[120],{"id":121,"title":122,"slug":123},249,"Timeline & history","timeline-history",{"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":61,"categories":134,"app":139},"a4127186-6cf9-41a6-9759-babe00bedcce","OTP Verification Form","A security code verification form prompting the user to enter a 6-digit code sent to their email. It includes instructional text, a central key icon, six individual input boxes for the code, a countdown timer for resending the code, and a progress indicator at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1773a9d6-b9a8-4883-8133-3c399d5a8c2b.png",1836,1249,"OTP Verification Form from Bonsai",[135],{"id":136,"title":137,"slug":138},288,"Input code","input-code",{"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":61,"categories":149,"app":154},"6e57192a-e5a3-4c9e-824f-a1fd785771ee","Project Header with Tabs","A page header displaying a project title with an edit icon, client information, an 'Add Tag' button, and a horizontal tab navigation menu.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2d6580c8-615d-415e-8eb6-c04680cc0640.png",1079,409,"Project Header with Tabs from Bonsai",[150],{"id":151,"title":152,"slug":153},233,"Tabs","tabs",{"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":61,"categories":164,"app":169},"dc1d07e4-686b-41e6-af99-2c5ef8d0c1d1","Date Picker Overlay","A date picker overlay triggered by an input field, allowing the user to select a due date from a calendar view.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffe24c47a-b59b-4048-b608-5380a19c72b6.png",1019,1011,"Date Picker Overlay from Bonsai",[165],{"id":166,"title":167,"slug":168},184,"Datepicker","datepicker",{"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":61,"categories":179,"app":184},"f79a8a13-eb17-406d-ad29-0ffae16790a8","Error Toast","An error toast notification informing the user that an invoice must be issued in the future to enable auto-sending. It features a red border, a red error icon, and a close button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffcbd9013-84c4-4238-84e5-8e12773fa824.png",890,235,"Error Toast from Bonsai",[180],{"id":181,"title":182,"slug":183},247,"Notification Toast","notification-element",{"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":61,"categories":194,"app":199},"f71f5c71-5166-4338-a566-9e4ab1cc8400","Invoice Settings Sidebar","A sidebar panel containing accordion sections for Overview, Setup, and Payments, allowing users to configure invoice details like status, display options, and payment methods.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5c1b7ebf-2569-4395-bea6-f1d350c8e25d.png",702,1574,"Invoice Settings Sidebar from Bonsai",[195],{"id":196,"title":197,"slug":198},246,"Toolbox","toolbox",{"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":61,"categories":209,"app":214},"44cb5354-a2f2-49a7-9a9d-b3f56ed90515","Split button","A green split button with a primary 'Send Now' action and a secondary calendar icon action.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4927d2f9-9955-4caa-ab9f-d7c1c65d6a4e.png",431,208,"Split button from Bonsai",[210],{"id":211,"title":212,"slug":213},175,"Button","button",{"slug":31,"title":30,"logo":33,"categories":215},[],{"uuid":217,"title":218,"description":219,"canonical_path":4,"image":220,"width":221,"height":105,"image_alt":222,"kind":61,"categories":223,"app":225},"a22f2ebf-c925-4db9-a4d0-460acb176c00","Profit & Loss Line Chart","A line chart displaying profit and loss over a 6-month period, with dropdowns for currency and time range, and a summary KPI row below.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa588e252-d60f-4bce-aada-266a00385c45.png",1764,"Profit & Loss Line Chart from Bonsai",[224],{"id":94,"title":95,"slug":96},{"slug":31,"title":30,"logo":33,"categories":226},[],[],[229,232,235,238,241,244],{"label":230,"to":231},"Bonsai product screens","\u002Fexamples\u002Fapps\u002Fbonsai\u002Fscreens",{"label":233,"to":234},"Bonsai marketing pages","\u002Fexamples\u002Fapps\u002Fbonsai\u002Fmarketing",{"label":236,"to":237},"Bonsai user flows","\u002Fexamples\u002Fapps\u002Fbonsai\u002Fflows",{"label":239,"to":240},"Accounting app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Faccounting",{"label":242,"to":243},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":245,"to":246},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"published_at":248,"updated_at":249},"2024-04-02T12:01:46.000Z","2026-09-23T00:10:23.000Z"]