[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fdevrev\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":48,"showcases":221,"links":222,"dates":259},"\u002Fexamples\u002Fapps\u002Fdevrev\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"DevRev UI components examples - Nicelydone","Browse DevRev UI component design examples. Preview individual interface elements and explore related component categories. Bridging the gap between…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8fe4dbc2-e8e4-4942-950a-58699473cd9b.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},"DevRev design examples","\u002Fexamples\u002Fapps\u002Fdevrev",{"label":23,"to":4},"DevRev UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse DevRev UI component design examples. Preview individual interface elements and explore related component categories. Bridging the gap between developers (Dev) and end-users (Rev) across the globe",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"DevRev","devrev","Bridging the gap between developers (Dev) and end-users (Rev) across the globe","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdevrev-1d51a192.png","https:\u002F\u002Fdevrev.ai",[36,40,44],{"id":37,"title":38,"slug":39},47,"Customer Service","customer-service",{"id":41,"title":42,"slug":43},53,"CRM","crm",{"id":45,"title":46,"slug":47},80,"Artificial Intelligence","artificial-intelligence",[49,64,75,86,101,116,131,146,161,176,191,206],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"c7af83f1-1cce-4cb0-8fe5-1f43696aefce","Feature grid","A bento-style feature grid showcasing product capabilities with UI mockups, titles, and descriptions.",3024,4675,"Feature grid from DevRev","component",[58],{"id":59,"title":60,"slug":61},298,"Bento box","bento-grid",{"slug":31,"title":30,"logo":33,"categories":63},[],{"uuid":65,"title":66,"description":67,"canonical_path":4,"image":68,"width":53,"height":69,"image_alt":70,"kind":56,"categories":71,"app":73},"9bd676cb-cf31-4a87-9fe9-b7c705da081a","AI Copilot Feature Grid","A dark-themed feature grid showcasing AI capabilities for customer support. It includes a title section and a 2x2 grid of cards, each illustrating a specific AI feature with a title, description, and a mock UI snippet.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F21034d5c-5fa6-4a6f-b8d5-0077313f352c.png",3715,"AI Copilot Feature Grid from DevRev",[72],{"id":59,"title":60,"slug":61},{"slug":31,"title":30,"logo":33,"categories":74},[],{"uuid":76,"title":77,"description":78,"canonical_path":4,"image":79,"width":53,"height":80,"image_alt":81,"kind":56,"categories":82,"app":84},"070c53e8-ebbd-475c-91e9-e10da254a439","Bento grid feature section","A feature section displaying product capabilities using a bento grid layout. It includes an eyebrow, a main headline, and three distinct feature cards. Each card contains a title, a brief description, and a stylized UI mockup illustrating the feature.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F009562d1-0ecf-41ed-a179-fc6085ab6ae7.png",3323,"Bento grid feature section from DevRev",[83],{"id":59,"title":60,"slug":61},{"slug":31,"title":30,"logo":33,"categories":85},[],{"uuid":87,"title":88,"description":89,"canonical_path":4,"image":90,"width":91,"height":92,"image_alt":93,"kind":56,"categories":94,"app":99},"4f5b267f-dba3-4352-92e5-ccf1a46f6881","Color picker popover","A color picker popover displaying a grid of preset color swatches and an input field for a custom hex code.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe8ca93ca-c41a-4793-b37d-5a1a30c8c6ab.png",829,523,"Color picker popover from DevRev",[95],{"id":96,"title":97,"slug":98},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":100},[],{"uuid":102,"title":103,"description":104,"canonical_path":4,"image":105,"width":106,"height":107,"image_alt":108,"kind":56,"categories":109,"app":114},"ba03054b-5052-4639-8c34-5af71c2c9e61","File upload dropzone","A drag-and-drop file upload area with an icon, primary action text, and secondary helper text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa887a178-42be-4b73-a625-9b96f10f43d9.png",394,193,"File upload dropzone from DevRev",[110],{"id":111,"title":112,"slug":113},188,"File upload input","file-upload-input",{"slug":31,"title":30,"logo":33,"categories":115},[],{"uuid":117,"title":118,"description":119,"canonical_path":4,"image":120,"width":121,"height":122,"image_alt":123,"kind":56,"categories":124,"app":129},"491e35a7-8e0a-4364-9dec-83d222f2a5f8","Copyable text field","A read-only text field displaying a truncated string, likely a token or key, with a prominent 'Copy' button inline.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe48e42ae-83a1-4d50-93b7-5333e6d51962.png",1308,360,"Copyable text field from DevRev",[125],{"id":126,"title":127,"slug":128},241,"Click to copy","click-to-copy",{"slug":31,"title":30,"logo":33,"categories":130},[],{"uuid":132,"title":133,"description":134,"canonical_path":4,"image":135,"width":136,"height":137,"image_alt":138,"kind":56,"categories":139,"app":144},"e7568fcc-9b84-46df-8bb0-7b43390871f6","Segmented control with counts","A segmented control with three options: Conversations, Users, and Tickets. Each option includes a count of 0. The 'Users' option is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F40e0a39d-37eb-47fd-aebb-7a7b5203aa11.png",634,192,"Segmented control with counts from DevRev",[140],{"id":141,"title":142,"slug":143},218,"Segmented control","segmented-control",{"slug":31,"title":30,"logo":33,"categories":145},[],{"uuid":147,"title":148,"description":149,"canonical_path":4,"image":150,"width":151,"height":152,"image_alt":153,"kind":56,"categories":154,"app":159},"e2f5ffc1-ae58-4c8b-a0be-2b7b0170613f","Dismissible info banner","A full-width, dismissible banner providing contextual information about a specific stage or view.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F18ada208-c471-4a9f-a6d6-91844608252a.png",2621,333,"Dismissible info banner from DevRev",[155],{"id":156,"title":157,"slug":158},167,"Alert","alert",{"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":56,"categories":169,"app":174},"839950f5-d11c-4823-bbdc-82ffbb74bba7","Date Range Filter with Calendar Popover","A filter toolbar showing a dropdown menu for date selection, with a nested calendar popover open for a custom date range.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff292cf43-0469-4828-b056-dc8b52e855a5.png",1389,1380,"Date Range Filter with Calendar Popover from DevRev",[170],{"id":171,"title":172,"slug":173},199,"Input date","input-date",{"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":56,"categories":184,"app":189},"7cd06542-91e7-4dd4-ae9b-074fc1e66263","Status Badge","A pill-shaped badge displaying a status or category, featuring a colored dot indicator alongside text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd8917389-b2dc-41e6-a22f-382e03722690.png",362,176,"Status Badge from DevRev",[185],{"id":186,"title":187,"slug":188},260,"Badge","badge",{"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":56,"categories":199,"app":204},"2144fbd0-533f-4b22-b0ab-49bb707fdaa6","DevRev UI component","This is a filter bar with multiple dropdowns and a clear button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2ecf1bcd-ebcb-47ab-ba3c-51b9726c2bea.png",2533,316,"UI component from DevRev",[200],{"id":201,"title":202,"slug":203},225,"Sorting & filtering","sorting-filtering",{"slug":31,"title":30,"logo":33,"categories":205},[],{"uuid":207,"title":208,"description":209,"canonical_path":4,"image":210,"width":211,"height":212,"image_alt":213,"kind":56,"categories":214,"app":219},"ed8ff4e2-ca6d-45ed-b525-481f95c531c3","Rich text composer","A rich text input field with formatting controls and a send button, used for drafting messages or replies.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fea987158-9c3e-4d1a-aa91-d2d164a3ee6d.png",1037,348,"Rich text composer from DevRev",[215],{"id":216,"title":217,"slug":218},221,"Rich text editor","rich-text-editor",{"slug":31,"title":30,"logo":33,"categories":220},[],[],[223,226,229,232,235,238,241,243,247,251,255],{"label":224,"to":225},"DevRev product screens","\u002Fexamples\u002Fapps\u002Fdevrev\u002Fscreens",{"label":227,"to":228},"DevRev marketing pages","\u002Fexamples\u002Fapps\u002Fdevrev\u002Fmarketing",{"label":230,"to":231},"DevRev user flows","\u002Fexamples\u002Fapps\u002Fdevrev\u002Fflows",{"label":233,"to":234},"Customer Service app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcustomer-service",{"label":236,"to":237},"CRM app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcrm",{"label":239,"to":240},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":242,"to":18},"All SaaS app examples",{"label":244,"to":245,"description":246},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":248,"to":249,"description":250},"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":252,"to":253,"description":254},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":256,"to":257,"description":258},"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":260,"updated_at":261},"2023-05-03T13:31:13.000Z","2026-09-13T13:02:39.000Z"]