[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcausal\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":44,"showcases":215,"links":216,"dates":232},"\u002Fexamples\u002Fapps\u002Fcausal\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Causal UI components examples - Nicelydone","Browse Causal UI component design examples. Preview individual interface elements and explore related component categories. The business planning platform","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd4894513-03bb-4024-a04f-d81db95d5013.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},"Causal design examples","\u002Fexamples\u002Fapps\u002Fcausal",{"label":23,"to":4},"Causal 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":34,"categories":35},"Causal","causal","The business planning platform","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcausal-b9013c30.png","https:\u002F\u002Fwww.causal.app","CausalHQ",[36,40],{"id":37,"title":38,"slug":39},36,"Finance","finance",{"id":41,"title":42,"slug":43},46,"Analytics","analytics",[45,60,75,89,101,116,128,141,156,171,186,200],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"8e09d580-9662-4f1f-b9bb-5b7ad3c09851","Model count badge","A pill-shaped badge displaying an icon and a count of models.",293,176,"Model count badge from Causal","component",[54],{"id":55,"title":56,"slug":57},260,"Badge","badge",{"slug":30,"title":29,"logo":32,"categories":59},[],{"uuid":61,"title":62,"description":63,"canonical_path":4,"image":64,"width":65,"height":66,"image_alt":67,"kind":52,"categories":68,"app":73},"39458761-9f56-41bb-b268-c3ffdef6b70a","Informational banner","A simple informational banner with a light blue background and dark blue text, indicating a trial period for a data integration.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F300a6b26-eb5c-4bff-9fcb-6e971cc37609.png",1456,325,"Informational banner from Causal",[69],{"id":70,"title":71,"slug":72},244,"Message","message",{"slug":30,"title":29,"logo":32,"categories":74},[],{"uuid":76,"title":77,"description":78,"canonical_path":4,"image":79,"width":65,"height":80,"image_alt":81,"kind":52,"categories":82,"app":87},"936df5ce-f65e-47a4-b299-6d6e24dac21a","Data source configuration stepper","A vertical stepper for configuring a Google Sheets data connection. It shows three steps: choosing a connection, selecting a file, and selecting a worksheet. The second step displays an error message indicating insufficient permission.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff3c12484-2e84-4f74-88df-ee3370e1364a.png",1034,"Data source configuration stepper from Causal",[83],{"id":84,"title":85,"slug":86},227,"Stepper","stepper",{"slug":30,"title":29,"logo":32,"categories":88},[],{"uuid":90,"title":91,"description":92,"canonical_path":4,"image":93,"width":94,"height":95,"image_alt":96,"kind":52,"categories":97,"app":99},"160ad7f4-1f95-4b05-9b9f-b4c9d5899d22","Warning badge","A pill-shaped badge displaying a warning icon and a count of warnings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3f2ef213-8720-4e18-a01c-5ebbd822c0e2.png",353,188,"Warning badge from Causal",[98],{"id":55,"title":56,"slug":57},{"slug":30,"title":29,"logo":32,"categories":100},[],{"uuid":102,"title":103,"description":104,"canonical_path":4,"image":105,"width":106,"height":107,"image_alt":108,"kind":52,"categories":109,"app":114},"f8f2a0d4-4a0b-41f0-9558-a8b2dfe4705e","Combobox with dropdown list","A combobox input field that allows typing to create a new category, with an open dropdown list showing existing categories grouped under 'OTHER'. Each list item displays the category name and the number of items it contains.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd5ad5478-7294-4b45-8e49-9910ceec3d76.png",871,622,"Combobox with dropdown list from Causal",[110],{"id":111,"title":112,"slug":113},204,"Input select","input-select",{"slug":30,"title":29,"logo":32,"categories":115},[],{"uuid":117,"title":118,"description":119,"canonical_path":4,"image":120,"width":121,"height":122,"image_alt":123,"kind":52,"categories":124,"app":126},"e36295fa-7a44-45ce-b0ad-6a7b89911f44","Horizontal Stepper","A horizontal stepper showing four stages of a data import process. The first step is completed, the second is active, and the remaining two are upcoming.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7044c9bb-f6f3-48f1-af3a-f47aaa13e8ed.png",1227,334,"Horizontal Stepper from Causal",[125],{"id":84,"title":85,"slug":86},{"slug":30,"title":29,"logo":32,"categories":127},[],{"uuid":129,"title":130,"description":131,"canonical_path":4,"image":132,"width":65,"height":133,"image_alt":134,"kind":52,"categories":135,"app":139},"78cc6f6e-3bb3-43db-89f9-794f5d859609","Drag and drop file upload","A file upload area with a dashed border, an upload icon, and text instructing the user to drag and drop or browse for a file. It specifies the accepted file format (.csv) and maximum file size (1 GB).","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff3614049-21fb-4469-a067-eab5ac7eed14.png",1159,"Drag and drop file upload from Causal",[136],{"id":95,"title":137,"slug":138},"File upload input","file-upload-input",{"slug":30,"title":29,"logo":32,"categories":140},[],{"uuid":142,"title":143,"description":144,"canonical_path":4,"image":145,"width":146,"height":147,"image_alt":148,"kind":52,"categories":149,"app":154},"a5a24e73-03de-468c-a3be-dc5f9782a77b","Data Table Skeleton","A data table displaying a loading skeleton state. The row headers are visible, but the cell contents are replaced with rounded rectangular placeholders.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F74c29cb8-4cd6-4b52-85e7-02951c79428c.png",3022,291,"Data Table Skeleton from Causal",[150],{"id":151,"title":152,"slug":153},226,"Skeleton","skeleton",{"slug":30,"title":29,"logo":32,"categories":155},[],{"uuid":157,"title":158,"description":159,"canonical_path":4,"image":160,"width":161,"height":162,"image_alt":163,"kind":52,"categories":164,"app":169},"4cfcbf2a-120c-46f7-8c0f-3f88db2bb446","Sparkline chart","A small, simple line chart with a gradient fill below the line, showing an upward trend with a single data point highlighted.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2c645310-3226-45fd-a383-fbb75fb497b8.png",396,180,"Sparkline chart from Causal",[165],{"id":166,"title":167,"slug":168},186,"Charts","charts",{"slug":30,"title":29,"logo":32,"categories":170},[],{"uuid":172,"title":173,"description":174,"canonical_path":4,"image":175,"width":176,"height":177,"image_alt":178,"kind":52,"categories":179,"app":184},"205220d1-0083-4865-8b7e-ab54c9f39ff5","Version history list","A list displaying the version history of a document or model, showing timestamps and descriptions for each entry.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffaa31084-188e-4135-89a8-42f4e7c0b0b0.png",1419,632,"Version history list from Causal",[180],{"id":181,"title":182,"slug":183},249,"Timeline & history","timeline-history",{"slug":30,"title":29,"logo":32,"categories":185},[],{"uuid":187,"title":188,"description":189,"canonical_path":4,"image":190,"width":191,"height":181,"image_alt":192,"kind":52,"categories":193,"app":198},"b80fdf27-f9b2-4f86-889b-1c33685be1b8","Tooltip with Keyboard Shortcut","A dark tooltip displaying the label 'Categories' along with its corresponding keyboard shortcut. It points downwards to a blue line, below which are dashed, pill-shaped buttons with icons and plus signs.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F509687cf-f785-4f24-b8e4-665f2a175371.png",395,"Tooltip with Keyboard Shortcut from Causal",[194],{"id":195,"title":196,"slug":197},254,"Tooltip","tooltip-element",{"slug":30,"title":29,"logo":32,"categories":199},[],{"uuid":201,"title":202,"description":203,"canonical_path":4,"image":204,"width":205,"height":206,"image_alt":207,"kind":52,"categories":208,"app":213},"57363569-d169-4e00-b062-c4a476b9111e","Nested context menu","A dark-themed context menu with a nested submenu open. The main menu contains various actions and settings for a financial model variable, with the 'Unit' item hovered to reveal a submenu for selecting data types like Number, Date, Currency, Percent, and Boolean.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe198d909-6972-4d14-8492-bf50d6acb3fd.png",1010,1304,"Nested context menu from Causal",[209],{"id":210,"title":211,"slug":212},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":214},[],[],[217,220,223,226,229],{"label":218,"to":219},"Causal product screens","\u002Fexamples\u002Fapps\u002Fcausal\u002Fscreens",{"label":221,"to":222},"Causal marketing pages","\u002Fexamples\u002Fapps\u002Fcausal\u002Fmarketing",{"label":224,"to":225},"Causal user flows","\u002Fexamples\u002Fapps\u002Fcausal\u002Fflows",{"label":227,"to":228},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":230,"to":231},"Analytics app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fanalytics",{"published_at":233,"updated_at":234},"2023-04-03T09:45:31.000Z","2026-09-13T13:02:39.000Z"]