[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fgrok":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":40,"examples":50,"showcases":51,"links":353,"dates":383},"\u002Fexamples\u002Fapps\u002Fgrok","detail","apps",true,{"title":9,"description":10,"og_image":11},"Grok design examples - Nicelydone","Explore Grok UI design examples.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fee97c483-12b3-40ef-9af8-b5d0bb4263da.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Grok design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":39},"SaaS app examples",[24],{"title":25,"links":26},"Explore Grok",[27,30,33,36],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fgrok\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Fgrok\u002Fflows",{"label":34,"to":35},"UI components","\u002Fexamples\u002Fapps\u002Fgrok\u002Fcomponents",{"label":37,"to":38},"marketing pages","\u002Fexamples\u002Fapps\u002Fgrok\u002Fmarketing",[],{"title":41,"slug":42,"logo":43,"url":44,"categories":45},"Grok","grok","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgrok-hpyfsu57.png","https:\u002F\u002Fgrok.com",[46],{"id":47,"title":48,"slug":49},80,"Artificial Intelligence","artificial-intelligence",[],[52,344,347,350],{"family":53,"examples":54},"screens",[55,96,133,153,177,201,219,237,255,285,307,327],{"uuid":56,"title":41,"description":57,"canonical_path":29,"image":11,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":62,"component_categories":81,"app":94},"ee97c483-12b3-40ef-9af8-b5d0bb4263da","AI chat interface where the user can select the Grok 3 model, toggle DeepSearch or Think modes, and start a conversation or choose from suggested prompts like Research and Create images.",3024,1714,"Grok from Grok","screen",[63,72],{"id":64,"label":65,"slug":66,"rank":67,"group":68},77,"Welcome","welcome",0,{"id":69,"label":70,"slug":71},7,"Onboarding & Education","onboarding-and-education",{"id":73,"label":74,"slug":75,"rank":76,"group":77},27,"AI Assistant","ai-assistant",1,{"id":78,"label":79,"slug":80},3,"AI","ai",[82,86,90],{"id":83,"title":84,"slug":85},214,"Popover","popover",{"id":87,"title":88,"slug":89},240,"Horizontal navigation","horizontal-navigation",{"id":91,"title":92,"slug":93},175,"Button","button",{"slug":42,"title":41,"logo":43,"categories":95},[],{"uuid":97,"title":41,"description":98,"canonical_path":29,"image":99,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":100,"component_categories":127,"app":131},"b8dec706-af0a-4099-8ead-3de6443f9054","AI chat start screen where the user can enter a prompt, select a model, or choose from suggested topics before signing in.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb8dec706-af0a-4099-8ead-3de6443f9054.png",[101,106,113,119],{"id":102,"label":103,"slug":104,"rank":67,"group":105},28,"AI Chat","ai-chat",{"id":78,"label":79,"slug":80},{"id":107,"label":108,"slug":109,"rank":76,"group":110},5,"Sign Up","sign-up",{"id":76,"label":111,"slug":112},"Access & Account","access-and-account",{"id":114,"label":115,"slug":116,"rank":117,"group":118},36,"Model Selection","model-selection",2,{"id":78,"label":79,"slug":80},{"id":120,"label":121,"slug":122,"rank":78,"group":123},115,"Empty State","empty-state",{"id":124,"label":125,"slug":126},12,"States & Feedback","states-and-feedback",[128,129,130],{"id":83,"title":84,"slug":85},{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":132},[],{"uuid":134,"title":41,"description":135,"canonical_path":29,"image":136,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":137,"component_categories":148,"app":151},"65d3d961-70e6-42f6-b066-5a335341c086","Search overlay where the user can execute actions like signing in, featuring an empty state prompt to authenticate to view history.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F65d3d961-70e6-42f6-b066-5a335341c086.png",[138,146],{"id":139,"label":140,"slug":141,"rank":67,"group":142},63,"Command Palette","command-palette",{"id":143,"label":144,"slug":145},6,"Navigation & Commands","navigation-and-commands",{"id":107,"label":108,"slug":109,"rank":76,"group":147},{"id":76,"label":111,"slug":112},[149,150],{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":152},[],{"uuid":154,"title":41,"description":155,"canonical_path":29,"image":156,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":157,"component_categories":172,"app":175},"b928322b-b029-4b11-8cf7-5df5bb29a84b","AI chat interface where the user can enter a prompt, select between Grok 3 and Grok 2 models, and toggle web search capabilities.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb928322b-b029-4b11-8cf7-5df5bb29a84b.png",[158,160,162,164,166],{"id":102,"label":103,"slug":104,"rank":67,"group":159},{"id":78,"label":79,"slug":80},{"id":114,"label":115,"slug":116,"rank":76,"group":161},{"id":78,"label":79,"slug":80},{"id":73,"label":74,"slug":75,"rank":117,"group":163},{"id":78,"label":79,"slug":80},{"id":120,"label":121,"slug":122,"rank":78,"group":165},{"id":124,"label":125,"slug":126},{"id":167,"label":168,"slug":169,"rank":170,"group":171},32,"AI Search","ai-search",4,{"id":78,"label":79,"slug":80},[173,174],{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":176},[],{"uuid":178,"title":41,"description":179,"canonical_path":29,"image":180,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":181,"component_categories":196,"app":199},"65ac3fe7-12a0-403c-bf5f-75ee47d87c84","AI chat start screen where the user can enter a prompt, select a model like Grok 3 or DeepSearch, or choose from suggested starter actions like research or image creation.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F65ac3fe7-12a0-403c-bf5f-75ee47d87c84.png",[182,184,186,194],{"id":102,"label":103,"slug":104,"rank":67,"group":183},{"id":78,"label":79,"slug":80},{"id":114,"label":115,"slug":116,"rank":76,"group":185},{"id":78,"label":79,"slug":80},{"id":187,"label":188,"slug":189,"rank":117,"group":190},81,"Home","home",{"id":191,"label":192,"slug":193},8,"Pages & Content","pages-and-content",{"id":107,"label":108,"slug":109,"rank":78,"group":195},{"id":76,"label":111,"slug":112},[197,198],{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":200},[],{"uuid":202,"title":41,"description":203,"canonical_path":29,"image":204,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":205,"component_categories":214,"app":217},"e8fec4d4-1e5a-44c3-adcb-b6f6bea6e459","AI chat start screen where the user can select search depth, toggle reasoning, choose a model version, and enter a prompt or pick from suggested actions.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe8fec4d4-1e5a-44c3-adcb-b6f6bea6e459.png",[206,208,210,212],{"id":102,"label":103,"slug":104,"rank":67,"group":207},{"id":78,"label":79,"slug":80},{"id":73,"label":74,"slug":75,"rank":76,"group":209},{"id":78,"label":79,"slug":80},{"id":114,"label":115,"slug":116,"rank":117,"group":211},{"id":78,"label":79,"slug":80},{"id":64,"label":65,"slug":66,"rank":78,"group":213},{"id":69,"label":70,"slug":71},[215,216],{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":218},[],{"uuid":220,"title":41,"description":221,"canonical_path":29,"image":222,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":223,"component_categories":232,"app":235},"41881f1f-323d-43ef-8243-4c863c655924","AI chat interface where the user has begun typing a prompt and is presented with autocomplete drawing suggestions, alongside controls for DeepSearch, Think mode, and model selection.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F41881f1f-323d-43ef-8243-4c863c655924.png",[224,226,228,230],{"id":102,"label":103,"slug":104,"rank":67,"group":225},{"id":78,"label":79,"slug":80},{"id":107,"label":108,"slug":109,"rank":76,"group":227},{"id":76,"label":111,"slug":112},{"id":114,"label":115,"slug":116,"rank":117,"group":229},{"id":78,"label":79,"slug":80},{"id":73,"label":74,"slug":75,"rank":78,"group":231},{"id":78,"label":79,"slug":80},[233,234],{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":236},[],{"uuid":238,"title":41,"description":239,"canonical_path":29,"image":240,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":241,"component_categories":250,"app":253},"20931679-6ab5-4d91-823d-e7e34ab6c44c","AI chat start screen where the user can enter a prompt, toggle search and reasoning features, select a model, or choose from suggested drawing prompts.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F20931679-6ab5-4d91-823d-e7e34ab6c44c.png",[242,244,246,248],{"id":102,"label":103,"slug":104,"rank":67,"group":243},{"id":78,"label":79,"slug":80},{"id":114,"label":115,"slug":116,"rank":76,"group":245},{"id":78,"label":79,"slug":80},{"id":107,"label":108,"slug":109,"rank":117,"group":247},{"id":76,"label":111,"slug":112},{"id":120,"label":121,"slug":122,"rank":78,"group":249},{"id":124,"label":125,"slug":126},[251,252],{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":254},[],{"uuid":256,"title":257,"description":258,"canonical_path":29,"image":259,"width":58,"height":59,"image_alt":260,"kind":61,"patterns":261,"component_categories":276,"app":283},"93146e4c-6161-4fca-b6ae-ffe4600e849e","New conversation - Grok","AI chat interface where an unauthenticated user has submitted a prompt to draw astronauts on the moon and is waiting for the generation to complete.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F93146e4c-6161-4fca-b6ae-ffe4600e849e.png","New conversation - Grok from Grok",[262,264,269,271],{"id":102,"label":103,"slug":104,"rank":67,"group":263},{"id":78,"label":79,"slug":80},{"id":265,"label":266,"slug":267,"rank":76,"group":268},120,"Loading","loading",{"id":124,"label":125,"slug":126},{"id":107,"label":108,"slug":109,"rank":117,"group":270},{"id":76,"label":111,"slug":112},{"id":272,"label":273,"slug":274,"rank":78,"group":275},30,"AI Generation","ai-generation",{"id":78,"label":79,"slug":80},[277,281,282],{"id":278,"title":279,"slug":280},174,"Card","card",{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":284},[],{"uuid":286,"title":257,"description":287,"canonical_path":29,"image":288,"width":58,"height":59,"image_alt":260,"kind":61,"patterns":289,"component_categories":299,"app":305},"8fa310ef-c063-4f14-a301-a93ecc578b79","Verification screen where the user must confirm they are 18 or older to access the AI assistant, or choose to sign in.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8fa310ef-c063-4f14-a301-a93ecc578b79.png",[290,294],{"id":143,"label":291,"slug":292,"rank":67,"group":293},"Verification","verification",{"id":76,"label":111,"slug":112},{"id":295,"label":296,"slug":297,"rank":76,"group":298},114,"Confirmation","confirmation",{"id":124,"label":125,"slug":126},[300,304],{"id":301,"title":302,"slug":303},284,"Modal","modal",{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":306},[],{"uuid":308,"title":257,"description":309,"canonical_path":29,"image":310,"width":58,"height":59,"image_alt":260,"kind":61,"patterns":311,"component_categories":318,"app":325},"04a6c01a-cf33-43a3-82bf-4b122aa7867c","AI chat interface where the user has prompted the assistant to draw astronauts on the moon, currently displaying skeleton placeholders while the images generate.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F04a6c01a-cf33-43a3-82bf-4b122aa7867c.png",[312,314,316],{"id":102,"label":103,"slug":104,"rank":67,"group":313},{"id":78,"label":79,"slug":80},{"id":272,"label":273,"slug":274,"rank":76,"group":315},{"id":78,"label":79,"slug":80},{"id":265,"label":266,"slug":267,"rank":117,"group":317},{"id":124,"label":125,"slug":126},[319,323,324],{"id":320,"title":321,"slug":322},226,"Skeleton","skeleton",{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":326},[],{"uuid":328,"title":257,"description":329,"canonical_path":29,"image":330,"width":58,"height":59,"image_alt":260,"kind":61,"patterns":331,"component_categories":338,"app":342},"8caeb7c5-dda5-4d45-83f7-3fae35c6cf3d","AI chat interface where the user has prompted for an image of astronauts on the moon, displaying loading skeletons while the images generate.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8caeb7c5-dda5-4d45-83f7-3fae35c6cf3d.png",[332,334,336],{"id":102,"label":103,"slug":104,"rank":67,"group":333},{"id":78,"label":79,"slug":80},{"id":265,"label":266,"slug":267,"rank":76,"group":335},{"id":124,"label":125,"slug":126},{"id":272,"label":273,"slug":274,"rank":117,"group":337},{"id":78,"label":79,"slug":80},[339,340,341],{"id":320,"title":321,"slug":322},{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"slug":42,"title":41,"logo":43,"categories":343},[],{"family":345,"examples":346},"flows",[],{"family":348,"examples":349},"components",[],{"family":351,"examples":352},"pages",[],[354,356,358,360,362,365,367,371,375,379],{"label":355,"to":29},"Grok product screens",{"label":357,"to":38},"Grok marketing pages",{"label":359,"to":32},"Grok user flows",{"label":361,"to":35},"Grok UI components",{"label":363,"to":364},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":366,"to":18},"All SaaS app examples",{"label":368,"to":369,"description":370},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":372,"to":373,"description":374},"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":376,"to":377,"description":378},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":380,"to":381,"description":382},"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":384,"updated_at":385},"2025-04-13T12:38:50.000Z","2026-09-13T13:02:39.000Z"]