[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fperplexity\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":49,"showcases":227,"links":228,"dates":247},"\u002Fexamples\u002Fapps\u002Fperplexity\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Perplexity UI components examples - Nicelydone","Browse Perplexity UI component design examples. Preview individual interface elements and explore related component categories. World's first conversational…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F115faac2-ff4c-4cf2-bf3b-0bcd5179572a.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},"Perplexity design examples","\u002Fexamples\u002Fapps\u002Fperplexity",{"label":23,"to":4},"Perplexity UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Perplexity UI component design examples. Preview individual interface elements and explore related component categories. World's first conversational answer engine and research companion",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Perplexity","perplexity","World's first conversational answer engine and research companion","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fperplexity-f963a769.png","https:\u002F\u002Fwww.perplexity.ai","perplexity_ai",[37,41,45],{"id":38,"title":39,"slug":40},80,"Artificial Intelligence","artificial-intelligence",{"id":42,"title":43,"slug":44},22,"Knowledge Management","knowledge-management",{"id":46,"title":47,"slug":48},55,"Search engine","search-engine",[50,65,80,95,110,125,140,155,170,185,200,215],{"uuid":51,"title":52,"description":53,"canonical_path":4,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"categories":58,"app":63},"4953ce1f-4d84-4635-95eb-4d844a9b2221","Credit purchase input","A numeric input field for purchasing API credits, featuring a dollar sign icon and a question prompt.",764,274,"Credit purchase input from Perplexity","component",[59],{"id":60,"title":61,"slug":62},198,"Input amount","input-amount",{"slug":31,"title":30,"logo":33,"categories":64},[],{"uuid":66,"title":67,"description":68,"canonical_path":4,"image":69,"width":70,"height":71,"image_alt":72,"kind":57,"categories":73,"app":78},"d4ce5096-a383-446f-a6de-239ce773e070","Settings Header with Tabs","A page header for a Settings section, featuring a large title on the left and a horizontal tab navigation menu on the right. The 'Account' tab is currently active, indicated by a dark underline and darker text color.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F223a5109-641f-4265-92f2-0df3bff90c67.png",1473,171,"Settings Header with Tabs from Perplexity",[74],{"id":75,"title":76,"slug":77},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":79},[],{"uuid":81,"title":82,"description":83,"canonical_path":4,"image":84,"width":85,"height":86,"image_alt":87,"kind":57,"categories":88,"app":93},"596e18b8-0e9c-4fea-be57-1585958a85ee","AI Agent Step Card","An expanded card displaying the sequential steps taken by an AI Copilot during a search query, including understanding the question, reading files, searching the web with specific queries, and finding sources.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbe654198-bae7-4586-9588-c86a25f56f7b.png",1605,709,"AI Agent Step Card from Perplexity",[89],{"id":90,"title":91,"slug":92},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":94},[],{"uuid":96,"title":97,"description":98,"canonical_path":4,"image":99,"width":100,"height":101,"image_alt":102,"kind":57,"categories":103,"app":108},"2aac9b12-6193-4e3c-8bed-2c221e1fa143","Collection breadcrumb","A simple breadcrumb navigation showing a 'Collection' link with a plus icon, followed by a slash separator and the current page title 'Nerd stuff'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa49679b1-65f2-4d3e-af14-0ae15f5e0b75.png",494,156,"Collection breadcrumb from Perplexity",[104],{"id":105,"title":106,"slug":107},177,"Breadcrumb","breadcrumb",{"slug":31,"title":30,"logo":33,"categories":109},[],{"uuid":111,"title":112,"description":113,"canonical_path":4,"image":114,"width":115,"height":116,"image_alt":117,"kind":57,"categories":118,"app":123},"2f9ec697-1e5a-4422-b0c4-c5a91e252e3d","Copilot Toggle with Tooltip","A toggle switch for Copilot mode, accompanied by a tooltip showing usage limits and a keyboard shortcut.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2cdb7f3c-407b-4708-a278-a3df81301e88.png",600,298,"Copilot Toggle with Tooltip from Perplexity",[119],{"id":120,"title":121,"slug":122},254,"Tooltip","tooltip-element",{"slug":31,"title":30,"logo":33,"categories":124},[],{"uuid":126,"title":127,"description":128,"canonical_path":4,"image":129,"width":130,"height":131,"image_alt":132,"kind":57,"categories":133,"app":138},"9eeed663-e555-40e5-a1fe-17f0faecf274","Copilot toggle switch","A toggle switch labeled 'Copilot' in an active state, indicated by the teal color of the switch handle and label text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff1f39b44-d2ce-4067-85c9-9cfbbb6fe8f2.png",312,176,"Copilot toggle switch from Perplexity",[134],{"id":135,"title":136,"slug":137},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":139},[],{"uuid":141,"title":142,"description":143,"canonical_path":4,"image":144,"width":145,"height":146,"image_alt":147,"kind":57,"categories":148,"app":153},"c621b546-a85a-4f37-b1ef-486b3a52cdcc","Sidebar navigation","A vertical sidebar navigation menu containing a logo, a 'New Thread' button with a keyboard shortcut, main navigation links, a nested list of recent threads under 'Library', a promotional upgrade section, user profile settings, and footer links for download and social media.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1402c5be-c04f-49da-b469-5d07a95aa2a0.png",441,1673,"Sidebar navigation from Perplexity",[149],{"id":150,"title":151,"slug":152},286,"Vertical list","vertical-list",{"slug":31,"title":30,"logo":33,"categories":154},[],{"uuid":156,"title":157,"description":158,"canonical_path":4,"image":159,"width":160,"height":161,"image_alt":162,"kind":57,"categories":163,"app":168},"a49021b0-511f-4c0c-9596-24cc4cff5190","App download prompt","A section prompting users to download the mobile app, featuring a title, description, app store badges, and a QR code.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa19ea7c0-3868-4a06-af9e-5e887599342e.png",1534,570,"App download prompt from Perplexity",[164],{"id":165,"title":166,"slug":167},285,"QR code","qr-code",{"slug":31,"title":30,"logo":33,"categories":169},[],{"uuid":171,"title":172,"description":173,"canonical_path":4,"image":174,"width":175,"height":176,"image_alt":177,"kind":57,"categories":178,"app":183},"1fa92911-ffa5-4ab7-b534-1b971016115a","Onboarding header","A header row for an onboarding flow containing a logo, title, step indicator, and a continue button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdd429086-5f10-4dfd-b72f-b24a31731f73.png",1532,336,"Onboarding header from Perplexity",[179],{"id":180,"title":181,"slug":182},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":184},[],{"uuid":186,"title":187,"description":188,"canonical_path":4,"image":189,"width":190,"height":191,"image_alt":192,"kind":57,"categories":193,"app":198},"1a4381c0-0378-4641-b837-49e64392de54","Perplexity UI component","A modal for sharing content with different access options and social media platforms.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F96ff7d13-be22-4c3d-87c9-28bb9f72d4b9.png",815,777,"UI component from Perplexity",[194],{"id":195,"title":196,"slug":197},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":199},[],{"uuid":201,"title":202,"description":203,"canonical_path":4,"image":204,"width":205,"height":206,"image_alt":207,"kind":57,"categories":208,"app":213},"e09ee36c-92b8-4d7e-adeb-53e2ecadf0fd","Add media actions","A vertical list of three dashed-border buttons for adding media to a query or response. Options include searching images, searching videos, and generating an image (marked as a Pro feature).","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3504a980-4f15-4da2-9818-176798df6291.png",755,412,"Add media actions from Perplexity",[209],{"id":210,"title":211,"slug":212},168,"Accordion","accordion",{"slug":31,"title":30,"logo":33,"categories":214},[],{"uuid":216,"title":217,"description":218,"canonical_path":4,"image":219,"width":220,"height":221,"image_alt":222,"kind":57,"categories":223,"app":225},"b2c4b036-93c1-40bb-8272-41e27d760764","Related Questions Accordion","A list of related follow-up questions presented as an accordion. Each item has a plus icon indicating it can be expanded.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7ccc2627-6ec5-4a9f-803a-290d9487d47a.png",1604,541,"Related Questions Accordion from Perplexity",[224],{"id":210,"title":211,"slug":212},{"slug":31,"title":30,"logo":33,"categories":226},[],[],[229,232,235,238,241,244],{"label":230,"to":231},"Perplexity product screens","\u002Fexamples\u002Fapps\u002Fperplexity\u002Fscreens",{"label":233,"to":234},"Perplexity marketing pages","\u002Fexamples\u002Fapps\u002Fperplexity\u002Fmarketing",{"label":236,"to":237},"Perplexity user flows","\u002Fexamples\u002Fapps\u002Fperplexity\u002Fflows",{"label":239,"to":240},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":242,"to":243},"Knowledge Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fknowledge-management",{"label":245,"to":246},"Search engine app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsearch-engine",{"published_at":248,"updated_at":249},"2024-01-22T10:48:29.000Z","2026-09-18T12:15:36.000Z"]