[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fcode-block":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":341,"links":342,"dates":391},"\u002Fexamples\u002Fcomponents\u002Fcode-block","collection","components",true,{"example_count":9,"app_count":10},121,78,{"id":12,"title":13,"description":14},187,"Code block","Explore how interfaces display code separately from surrounding text. Look at syntax formatting, language labels, and supporting controls that frame a snippet for reading or reuse.",{"title":16,"description":17,"og_image":18},"Code block UI examples - Nicelydone","Code block UI design examples from SaaS apps. Explore how interfaces display code separately from surrounding text. Look at syntax formatting, language…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffbb87f2f-4759-4007-9313-72ccae129bbe.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Code block UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Code block UI design examples from SaaS apps. Explore how interfaces display code separately from surrounding text. Look at syntax formatting, language labels, and supporting controls that frame a…",[32],{"title":33,"description":14,"links":34},"About Code block",[],[36],"121 UI components",[38,72,102,125,144,167,191,217,240,267,297,320],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"a30ccd7f-49c6-4f39-93b3-d20c5e0a6392","Steel UI component","A section detailing a quick build setup process, featuring a command-line interface (CLI) code snippet for installation.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents",2413,865,"UI component from Steel","component",[48],{"id":12,"title":13,"slug":49},"code-block",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[56,60,64,68],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},37,"Developer APIs","developer-apis",{"id":69,"title":70,"slug":71},45,"Open Source","open-source",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"0c14f46c-f725-4ad4-b01e-d01e8437ab4d","Axiom UI component","An interface for building and editing data queries to generate charts and results tables.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff1c07c4c-6b20-4d44-9a56-7cad326189ee.png",2717,764,"UI component from Axiom",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[89,93,97,101],{"id":90,"title":91,"slug":92},46,"Analytics","analytics",{"id":94,"title":95,"slug":96},57,"Big data","big-data",{"id":98,"title":99,"slug":100},16,"Monitoring","monitoring",{"id":57,"title":58,"slug":59},{"uuid":103,"title":104,"description":105,"canonical_path":106,"image":107,"width":108,"height":109,"image_alt":110,"kind":46,"categories":111,"app":113},"edf946e3-82d8-4691-b23a-f63497f803e0","Code Snippet","Displays example Python API call as visual demo","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8032fbe1-20c5-4f6e-8014-ef186f3e2d5e.jpg",981,411,"Code Snippet from Exa",[112],{"id":12,"title":13,"slug":49},{"slug":114,"title":115,"logo":116,"baseline":117,"categories":118},"exa","Exa","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F011e446a-087b-451e-b27d-63d67d92a42f.png","Real-time AI search engine with structured web search API and deep research tools",[119,123,124],{"id":120,"title":121,"slug":122},55,"Search engine","search-engine",{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"uuid":126,"title":127,"description":128,"canonical_path":129,"image":130,"width":131,"height":132,"image_alt":133,"kind":46,"categories":134,"app":136},"aca2b8f8-d441-4d7b-a967-a85c09affac6","Elevenlabs UI component","A developer quickstart guide with a code example for an API integration.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faa9b11e2-3643-4e2c-babf-8005ad196563.png",2560,1017,"UI component from Elevenlabs",[135],{"id":12,"title":13,"slug":49},{"slug":137,"title":138,"logo":139,"baseline":140,"categories":141},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[142,143],{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"uuid":145,"title":146,"description":147,"canonical_path":148,"image":149,"width":150,"height":151,"image_alt":152,"kind":46,"categories":153,"app":155},"12b8dcbb-b257-4b6e-9501-1e70713e4549","Liveblocks UI component","A code editor interface displaying a file explorer, code content with syntax highlighting, and a blank preview pane.","\u002Fexamples\u002Fapps\u002Fliveblocks\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F51ffeb4d-9522-4d83-b4ad-0746eaf67fb2.png",3221,1971,"UI component from Liveblocks",[154],{"id":12,"title":13,"slug":49},{"slug":156,"title":157,"logo":158,"baseline":159,"categories":160},"liveblocks","Liveblocks","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F081e178d-2cab-4e0b-93f8-061e021783fa.png","Build amazing real‑time collaborative products",[161,162,166],{"id":57,"title":58,"slug":59},{"id":163,"title":164,"slug":165},23,"Collaboration","collaboration",{"id":65,"title":66,"slug":67},{"uuid":168,"title":169,"description":170,"canonical_path":171,"image":172,"width":173,"height":174,"image_alt":175,"kind":46,"categories":176,"app":178},"6776e970-cd76-4fe6-a159-77b941c946c4","Llamaindex UI component","A quick start interface for API key management and code snippet display, featuring language selection and copy functionality.","\u002Fexamples\u002Fapps\u002Fllamaindex\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd02e9f13-4b45-4405-b8c6-143c55b92f41.png",2106,803,"UI component from Llamaindex",[177],{"id":12,"title":13,"slug":49},{"slug":179,"title":180,"logo":181,"baseline":182,"categories":183},"llamaindex","Llamaindex","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F1e225662-6b6d-476d-a9ed-68b03c620ee1.png",null,[184,185,186,187],{"id":69,"title":70,"slug":71},{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},{"id":188,"title":189,"slug":190},105,"Workflow Automation","workflow-automation",{"uuid":192,"title":193,"description":194,"canonical_path":195,"image":196,"width":197,"height":198,"image_alt":199,"kind":46,"categories":200,"app":202},"785d4b69-05f8-4de9-b56f-bec24cf45698","Kinescope UI component","A modal dialog for generating and copying embed code, offering options for responsiveness, fixed dimensions, and popover embedding.","\u002Fexamples\u002Fapps\u002Fkinescope\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F011174fc-eb0c-4fc6-b363-6a1b68fc49e2.png",1351,1371,"UI component from Kinescope",[201],{"id":12,"title":13,"slug":49},{"slug":203,"title":204,"logo":205,"baseline":206,"categories":207},"kinescope","Kinescope","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F7f0420a9-24bf-46c4-89d3-9b58d519e10a.png","Videoinfrastructure made for every story",[208,209,213],{"id":65,"title":66,"slug":67},{"id":210,"title":211,"slug":212},70,"Video streaming","video-streaming",{"id":214,"title":215,"slug":216},100,"Video","video",{"uuid":218,"title":219,"description":220,"canonical_path":221,"image":222,"width":223,"height":224,"image_alt":225,"kind":46,"categories":226,"app":228},"3ebc987d-3de4-4270-b455-5277b34d5941","Documentation.AI UI component","A user interface component for managing and editing code requests, featuring a code editor, language selector, and action buttons.","\u002Fexamples\u002Fapps\u002Fdocumentationai\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3010a43a-d189-4f7a-9bc1-2b0d4a99a478.png",1536,476,"UI component from Documentation.AI",[227],{"id":12,"title":13,"slug":49},{"slug":229,"title":230,"logo":231,"baseline":232,"categories":233},"documentationai","Documentation.AI","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F765c5eca-9754-4c48-be93-ec4d07f943f7.png","AI Documentation & Knowledge",[234,238,239],{"id":235,"title":236,"slug":237},22,"Knowledge Management","knowledge-management",{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},{"uuid":241,"title":242,"description":243,"canonical_path":244,"image":245,"width":246,"height":247,"image_alt":248,"kind":46,"categories":249,"app":251},"f05445cd-d6ee-4c07-8351-73331fa443ee","Gumloop UI component","A card displaying code examples for API integration with language tabs and a copy functionality.","\u002Fexamples\u002Fapps\u002Fgumloop\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F999c9a2b-7527-4883-b0d6-5c730106012c.png",1948,977,"UI component from Gumloop",[250],{"id":12,"title":13,"slug":49},{"slug":252,"title":253,"logo":254,"baseline":255,"categories":256},"gumloop","Gumloop","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbb3b7d8d-2866-4949-a601-d6f8deba3b8f.png","The AI automation platform built for everyone",[257,261,262,266],{"id":258,"title":259,"slug":260},30,"Productivity","productivity",{"id":61,"title":62,"slug":63},{"id":263,"title":264,"slug":265},96,"No code","no-code",{"id":188,"title":189,"slug":190},{"uuid":268,"title":269,"description":270,"canonical_path":271,"image":272,"width":273,"height":274,"image_alt":275,"kind":46,"categories":276,"app":278},"17f68b7e-81c2-4223-be5f-cee080208e64","Typeform UI component","A user interface displaying a code snippet with a copy button and a numbered instruction.","\u002Fexamples\u002Fapps\u002Ftypeform\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2c5d0347-682f-40de-a255-3d83a654115d.png",766,452,"UI component from Typeform",[277],{"id":12,"title":13,"slug":49},{"slug":279,"title":280,"logo":281,"baseline":282,"categories":283},"typeform","Typeform","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftypeform-20f4caed.png","Free & beautifully human online forms",[284,288,292,293],{"id":285,"title":286,"slug":287},69,"Surveys","surveys",{"id":289,"title":290,"slug":291},25,"Marketing","marketing",{"id":263,"title":264,"slug":265},{"id":294,"title":295,"slug":296},104,"User Research","user-research",{"uuid":298,"title":299,"description":300,"canonical_path":301,"image":302,"width":303,"height":304,"image_alt":305,"kind":46,"categories":306,"app":308},"54aff50e-1269-449d-bfe0-edf345ff7717","Livekit UI component","A code editor displaying a JSON file for SIP trunk configuration.","\u002Fexamples\u002Fapps\u002Flivekit\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd06f01e8-c641-4692-9c6a-772ac5d2ab2c.png",1085,563,"UI component from Livekit",[307],{"id":12,"title":13,"slug":49},{"slug":309,"title":310,"logo":311,"baseline":312,"categories":313},"livekit","Livekit","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fe61f12ad-e18b-4b1e-91fb-39d0e1ce98ce.png","Build voice, video, and physical AI",[314,315,316,317,318,319],{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"id":69,"title":70,"slug":71},{"id":57,"title":58,"slug":59},{"id":210,"title":211,"slug":212},{"id":214,"title":215,"slug":216},{"uuid":321,"title":322,"description":323,"canonical_path":324,"image":325,"width":326,"height":327,"image_alt":328,"kind":46,"categories":329,"app":331},"dfa6a03f-a87c-4a10-8b68-805a12794fa0","Firecrawl UI component","The UI shows code snippets for scraping a web page using different languages.","\u002Fexamples\u002Fapps\u002Ffirecrawl\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fefde7ede-2eee-4f8e-acb3-9f6f197cb3df.png",1360,1061,"UI component from Firecrawl",[330],{"id":12,"title":13,"slug":49},{"slug":332,"title":333,"logo":334,"baseline":335,"categories":336},"firecrawl","Firecrawl","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffirecrawl-5r4fbfp0.png","Turn websites into LLM-ready data",[337,338,339,340],{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"id":69,"title":70,"slug":71},{"id":57,"title":58,"slug":59},[],[343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388],{"label":344,"to":345},"Code Editor","\u002Fexamples\u002Fscreens\u002Fcode-editor",{"label":347,"to":348},"Add & Create","\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":350,"to":351},"Dashboard","\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":353,"to":354},"AI Assistant","\u002Fexamples\u002Fscreens\u002Fai-assistant",{"label":356,"to":357},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":359,"to":360},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":362,"to":363},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":365,"to":366},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":368,"to":369},"Liveblocks design examples","\u002Fexamples\u002Fapps\u002Fliveblocks",{"label":371,"to":372},"Llamaindex design examples","\u002Fexamples\u002Fapps\u002Fllamaindex",{"label":374,"to":375},"Kinescope design examples","\u002Fexamples\u002Fapps\u002Fkinescope",{"label":377,"to":378},"Documentation.AI design examples","\u002Fexamples\u002Fapps\u002Fdocumentationai",{"label":380,"to":381},"Gumloop design examples","\u002Fexamples\u002Fapps\u002Fgumloop",{"label":383,"to":384},"Typeform design examples","\u002Fexamples\u002Fapps\u002Ftypeform",{"label":386,"to":387},"Livekit design examples","\u002Fexamples\u002Fapps\u002Flivekit",{"label":389,"to":390},"Firecrawl design examples","\u002Fexamples\u002Fapps\u002Ffirecrawl",{"published_at":392,"updated_at":393},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]