[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fopenai\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":47,"showcases":217,"links":218,"dates":255},"\u002Fexamples\u002Fapps\u002Fopenai\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"OpenAI UI components examples - Nicelydone","Browse OpenAI UI component design examples. Preview individual interface elements and explore related component categories. AI research and deployment company","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd6f100c6-a572-4609-adbf-80513d78531f.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},"OpenAI design examples","\u002Fexamples\u002Fapps\u002Fopenai",{"label":23,"to":4},"OpenAI 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":30,"categories":34},"OpenAI","openai","AI research and deployment company","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fopenai-3e372b56.png","https:\u002F\u002Fopenai.com",[35,39,43],{"id":36,"title":37,"slug":38},80,"Artificial Intelligence","artificial-intelligence",{"id":40,"title":41,"slug":42},77,"Machine learning","machine-learning",{"id":44,"title":45,"slug":46},37,"Developer APIs","developer-apis",[48,63,78,93,108,120,135,146,161,173,188,202],{"uuid":49,"title":50,"description":51,"canonical_path":4,"image":11,"width":52,"height":53,"image_alt":54,"kind":55,"categories":56,"app":61},"3a82bd56-b6fe-4374-b686-ce9b78be5b36","Token limit error tooltip","A tooltip displaying an error message about exceeding the maximum token limit for a model request. It shows the current prompt tokens, the maximum response tokens, a red error message, and a link to learn more about pricing.",710,502,"Token limit error tooltip from OpenAI","component",[57],{"id":58,"title":59,"slug":60},254,"Tooltip","tooltip-element",{"slug":30,"title":29,"logo":32,"categories":62},[],{"uuid":64,"title":65,"description":66,"canonical_path":4,"image":67,"width":68,"height":69,"image_alt":70,"kind":55,"categories":71,"app":76},"69530a22-c7ba-43db-959b-95fb9b93c9ac","Warning Alert","A full-width warning alert banner displaying a message about a model prediction error.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F98002df0-b785-42e7-bbe3-1c91077fc702.png",2417,291,"Warning Alert from OpenAI",[72],{"id":73,"title":74,"slug":75},244,"Message","message",{"slug":30,"title":29,"logo":32,"categories":77},[],{"uuid":79,"title":80,"description":81,"canonical_path":4,"image":82,"width":83,"height":84,"image_alt":85,"kind":55,"categories":86,"app":91},"e95088b2-628c-44a9-acd9-387be079adcf","User profile row","A row displaying a user's avatar, name, email address, and a badge indicating it is the current user.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F69649834-efb3-402e-a577-466bf2210010.png",538,194,"User profile row from OpenAI",[87],{"id":88,"title":89,"slug":90},169,"Avatar","avatar",{"slug":30,"title":29,"logo":32,"categories":92},[],{"uuid":94,"title":95,"description":96,"canonical_path":4,"image":97,"width":98,"height":99,"image_alt":100,"kind":55,"categories":101,"app":106},"0f99373e-23fe-466f-8545-f644aca6cb0b","Cumulative Usage Area Chart","An area chart displaying cumulative daily usage in USD over a month. The y-axis shows dollar amounts in small increments, and the x-axis shows dates in April. A sharp spike is visible at the end of the timeline.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fff896ab0-1471-4ff3-910b-a8ec30572459.png",1726,756,"Cumulative Usage Area Chart from OpenAI",[102],{"id":103,"title":104,"slug":105},186,"Charts","charts",{"slug":30,"title":29,"logo":32,"categories":107},[],{"uuid":109,"title":110,"description":111,"canonical_path":4,"image":112,"width":113,"height":114,"image_alt":115,"kind":55,"categories":116,"app":118},"90323954-14fe-40aa-af48-b5724b0fa1e7","Free trial usage tracker","A section displaying free trial usage with a progress bar and a table detailing grant information.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F872ef688-c35b-4969-a482-722bc47c64cc.png",1775,510,"Free trial usage tracker from OpenAI",[117],{"id":103,"title":104,"slug":105},{"slug":30,"title":29,"logo":32,"categories":119},[],{"uuid":121,"title":122,"description":123,"canonical_path":4,"image":124,"width":125,"height":126,"image_alt":127,"kind":55,"categories":128,"app":133},"d36916fb-4eec-40cb-9ada-e5f3ad87ea98","Segmented Control","A two-option segmented control used to toggle between daily and cumulative data views.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5c07e5a2-715c-4a71-bc5b-f66886d94182.png",487,192,"Segmented Control from OpenAI",[129],{"id":130,"title":131,"slug":132},218,"Segmented control","segmented-control",{"slug":30,"title":29,"logo":32,"categories":134},[],{"uuid":136,"title":137,"description":138,"canonical_path":4,"image":139,"width":140,"height":99,"image_alt":141,"kind":55,"categories":142,"app":144},"1164dc2e-3ef7-41c8-860e-c0fa9f2e812e","Daily Usage Bar Chart","A bar chart displaying daily usage in USD over a month, with a single data point visible on April 23rd.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F79852db0-4763-44e8-9bf8-5152273de96d.png",1730,"Daily Usage Bar Chart from OpenAI",[143],{"id":103,"title":104,"slug":105},{"slug":30,"title":29,"logo":32,"categories":145},[],{"uuid":147,"title":148,"description":149,"canonical_path":4,"image":150,"width":151,"height":152,"image_alt":153,"kind":55,"categories":154,"app":159},"331388c3-aab4-4c60-bb20-e7910ebf0511","History Timeline","A vertical timeline displaying a 30-day history of prompt edits or generations. It features a header with a close button, a date grouping, and individual timeline items showing the time and a snippet of the content. The currently selected item is highlighted.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F19342064-f060-427c-bd70-b1353c0ff0a7.png",680,951,"History Timeline from OpenAI",[155],{"id":156,"title":157,"slug":158},249,"Timeline & history","timeline-history",{"slug":30,"title":29,"logo":32,"categories":160},[],{"uuid":162,"title":163,"description":164,"canonical_path":4,"image":165,"width":166,"height":167,"image_alt":168,"kind":55,"categories":169,"app":171},"02a0221a-9ce0-4acf-8f50-4f8d64547980","Tooltip with keyboard shortcut","A dark tooltip displaying the action 'Submit' alongside its corresponding keyboard shortcut (Command + Enter).","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2f8d98d7-f696-44dd-a2e3-0a20e8a4da22.png",284,107,"Tooltip with keyboard shortcut from OpenAI",[170],{"id":58,"title":59,"slug":60},{"slug":30,"title":29,"logo":32,"categories":172},[],{"uuid":174,"title":175,"description":176,"canonical_path":4,"image":177,"width":178,"height":179,"image_alt":180,"kind":55,"categories":181,"app":186},"586f67d5-9018-4e72-b64a-79e9b7ef7aee","Preset Combobox","An open combobox displaying a list of preset examples for text generation.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F82e1a5bb-7114-4510-9b9c-ebc2fb57522e.png",655,725,"Preset Combobox from OpenAI",[182],{"id":183,"title":184,"slug":185},204,"Input select","input-select",{"slug":30,"title":29,"logo":32,"categories":187},[],{"uuid":189,"title":190,"description":191,"canonical_path":4,"image":192,"width":193,"height":126,"image_alt":194,"kind":55,"categories":195,"app":200},"c08acb4d-46ec-48ab-99c7-53b520dcc632","Delete confirmation buttons","A button group containing a secondary Cancel button and a primary destructive Delete button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fba6dde20-7b97-489e-be7d-3040e822f092.png",414,"Delete confirmation buttons from OpenAI",[196],{"id":197,"title":198,"slug":199},277,"Button group","button-group",{"slug":30,"title":29,"logo":32,"categories":201},[],{"uuid":203,"title":204,"description":205,"canonical_path":4,"image":206,"width":207,"height":208,"image_alt":209,"kind":55,"categories":210,"app":215},"4509fd7f-18a5-4927-8778-c61d2df30395","Content warning toggle","A toggle switch with a label and descriptive text to enable content warnings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5cf4eddf-c007-44d0-ac40-d308b9d21103.png",1040,237,"Content warning toggle from OpenAI",[211],{"id":212,"title":213,"slug":214},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":216},[],[],[219,222,225,228,231,234,237,239,243,247,251],{"label":220,"to":221},"OpenAI product screens","\u002Fexamples\u002Fapps\u002Fopenai\u002Fscreens",{"label":223,"to":224},"OpenAI marketing pages","\u002Fexamples\u002Fapps\u002Fopenai\u002Fmarketing",{"label":226,"to":227},"OpenAI user flows","\u002Fexamples\u002Fapps\u002Fopenai\u002Fflows",{"label":229,"to":230},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":232,"to":233},"Machine learning app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmachine-learning",{"label":235,"to":236},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":238,"to":18},"All SaaS app examples",{"label":240,"to":241,"description":242},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":244,"to":245,"description":246},"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":248,"to":249,"description":250},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":252,"to":253,"description":254},"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":256,"updated_at":257},"2023-05-03T13:23:09.000Z","2026-09-13T13:02:39.000Z"]