[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftola\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":218,"links":219,"dates":253},"\u002Fexamples\u002Fapps\u002Ftola\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Tola UI components examples - Nicelydone","Browse Tola UI component design examples. Preview individual interface elements and explore related component categories. Pay bills, get paid and manage…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc49be879-7612-4285-8f30-f61d9d5d1e13.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},"Tola design examples","\u002Fexamples\u002Fapps\u002Ftola",{"label":23,"to":4},"Tola UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Tola UI component design examples. Preview individual interface elements and explore related component categories. Pay bills, get paid and manage cash flow",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Tola","tola","Pay bills, get paid and manage cash flow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftola-17715058.png","https:\u002F\u002Fwww.tolahq.com","tolahq",[37,41],{"id":38,"title":39,"slug":40},56,"Accounting","accounting",{"id":42,"title":43,"slug":44},36,"Finance","finance",[46,61,76,91,106,120,135,150,161,176,191,203],{"uuid":47,"title":48,"description":49,"canonical_path":4,"image":11,"width":50,"height":51,"image_alt":52,"kind":53,"categories":54,"app":59},"33b48091-21d0-4484-bdff-dec9411efd36","Copyable email field","A read-only field displaying an email address with a copy icon, accompanied by helper text below.",1290,491,"Copyable email field from Tola","component",[55],{"id":56,"title":57,"slug":58},241,"Click to copy","click-to-copy",{"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},"fc631af9-8990-4536-a454-1f4fc32e2838","Delete confirmation dialog","A small confirmation dialog asking the user to confirm the deletion of a policy, with Cancel and OK buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff6707dea-7193-4372-9e2d-afce5081b5aa.png",946,414,"Delete confirmation dialog from Tola",[70],{"id":71,"title":72,"slug":73},247,"Notification Toast","notification-element",{"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},"83b25747-1a24-49cc-b9e3-572e9c518234","Approval policy form","A form section containing a select input for choosing an approver and a primary button to add the policy.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F210483b0-6c0b-416c-b338-b90f882dc38a.png",1350,469,"Approval policy form from Tola",[85],{"id":86,"title":87,"slug":88},252,"Input tag","input-tag",{"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},"7f32cf3e-847c-46f7-b916-c036ff8adc25","Approver selection dropdown","An open dropdown menu for selecting an approver. The input field shows a selected user as a pill, and the open menu below lists available options with a checkmark indicating the current selection.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3c3e108c-2b63-41dd-b0ee-13b2ec04632a.png",1379,587,"Approver selection dropdown from Tola",[100],{"id":101,"title":102,"slug":103},195,"Input multi-select","input-multi-select",{"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":118},"6d0fd5ae-7c7a-4ef2-85e6-6c1f498734a4","Color picker","A color picker component allowing users to select a brand color. It features a saturation\u002Flightness area, a hue slider, and a hex code input field.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe9bd9d9a-ca35-4de0-ac73-ceba3b760ba7.png",1267,860,"Color picker from Tola",[115],{"id":116,"title":108,"slug":117},183,"color-picker",{"slug":31,"title":30,"logo":33,"categories":119},[],{"uuid":121,"title":122,"description":123,"canonical_path":4,"image":124,"width":125,"height":126,"image_alt":127,"kind":53,"categories":128,"app":133},"aa1236f3-9fd7-4f12-958e-2817e0e14e8a","Payment details request form","A form section allowing users to choose between requesting payment details via email or entering them manually. It includes a selected card for 'Request details', an email input field, and a toggle to add a personal message.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4ac7082f-22a8-4204-8b2a-e852d33ecc1e.png",1392,916,"Payment details request form from Tola",[129],{"id":130,"title":131,"slug":132},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":134},[],{"uuid":136,"title":137,"description":138,"canonical_path":4,"image":139,"width":140,"height":141,"image_alt":142,"kind":53,"categories":143,"app":148},"0291a154-1272-47b1-b0da-313b1d121caa","Email payment link toggle","A toggle switch component within a bordered card, featuring an icon, a primary label, and a secondary description text. The toggle is currently in the active (on) state.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9944c7d9-04b3-4250-9c14-1c45e83b7d6f.png",1512,418,"Email payment link toggle from Tola",[144],{"id":145,"title":146,"slug":147},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":149},[],{"uuid":151,"title":152,"description":153,"canonical_path":4,"image":154,"width":140,"height":155,"image_alt":156,"kind":53,"categories":157,"app":159},"c65c5063-acb5-4c08-ad98-a8fdb1462511","Reminder toggle card","A card containing a toggle switch to enable automatic invoice reminders, along with a status message and a link to set them up.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd2b88fc7-4d88-4c5e-a7ae-c2517b7a9398.png",474,"Reminder toggle card from Tola",[158],{"id":145,"title":146,"slug":147},{"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":174},"fae527c9-fb2a-493a-af08-1a3c53ad7899","Color picker row","A horizontal row of color swatches allowing the user to select a brand color. The first swatch is currently selected, indicated by a black border.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbfc01bac-059e-4e49-8a6a-90bf629f6f6f.png",1516,397,"Color picker row from Tola",[170],{"id":171,"title":172,"slug":173},256,"Theme settings","theme-settings",{"slug":31,"title":30,"logo":33,"categories":175},[],{"uuid":177,"title":178,"description":179,"canonical_path":4,"image":180,"width":181,"height":182,"image_alt":183,"kind":53,"categories":184,"app":189},"ddf0c790-b414-4bdf-97e4-6769fcd561a4","Duplicate Bill Alert","An alert card notifying the user of a potential duplicate bill, including the creator's name and timestamp.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F59202ca9-7aca-44d4-b7cb-d0cedcb364b4.png",1408,544,"Duplicate Bill Alert from Tola",[185],{"id":186,"title":187,"slug":188},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":190},[],{"uuid":192,"title":193,"description":194,"canonical_path":4,"image":195,"width":196,"height":197,"image_alt":198,"kind":53,"categories":199,"app":201},"959363dc-9a93-4dc7-b1bb-e0a7253d3fc2","Success toast notification","A success toast notification confirming that a bill has been duplicated, with a brief explanatory message and a close button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb5bf81bd-21b2-4cf4-ba11-2e9dc263505e.png",950,420,"Success toast notification from Tola",[200],{"id":71,"title":72,"slug":73},{"slug":31,"title":30,"logo":33,"categories":202},[],{"uuid":204,"title":205,"description":206,"canonical_path":4,"image":207,"width":208,"height":209,"image_alt":210,"kind":53,"categories":211,"app":216},"98263a42-6e77-4d62-9bad-a712359c5848","Payment list item","A table row or list item showing a payment entry with missing information. It includes an icon, vendor name, invoice number, date, a status badge indicating missing payment info, and the amount.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Feea9155e-81eb-451d-87e9-96fe32b4afbd.png",2505,687,"Payment list item from Tola",[212],{"id":213,"title":214,"slug":215},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":217},[],[],[220,223,226,229,232,235,237,241,245,249],{"label":221,"to":222},"Tola product screens","\u002Fexamples\u002Fapps\u002Ftola\u002Fscreens",{"label":224,"to":225},"Tola marketing pages","\u002Fexamples\u002Fapps\u002Ftola\u002Fmarketing",{"label":227,"to":228},"Tola user flows","\u002Fexamples\u002Fapps\u002Ftola\u002Fflows",{"label":230,"to":231},"Accounting app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Faccounting",{"label":233,"to":234},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":236,"to":18},"All SaaS app examples",{"label":238,"to":239,"description":240},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":242,"to":243,"description":244},"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":246,"to":247,"description":248},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":250,"to":251,"description":252},"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":254,"updated_at":255},"2024-03-18T12:57:54.000Z","2026-09-22T12:10:13.000Z"]