[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Frayon\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":198,"links":199,"dates":218},"\u002Fexamples\u002Fapps\u002Frayon\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Rayon UI components examples - Nicelydone","Browse Rayon UI component design examples. Preview individual interface elements and explore related component categories. The fastest tool to create…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F07ceae81-77ef-4824-9191-275f117e838b.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},"Rayon design examples","\u002Fexamples\u002Fapps\u002Frayon",{"label":23,"to":4},"Rayon UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Rayon UI component design examples. Preview individual interface elements and explore related component categories. The fastest tool to create perfect architectural drawings",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Rayon","rayon","The fastest tool to create perfect architectural drawings","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frayon-633e8478.png","https:\u002F\u002Fwww.rayon.design\u002F","rayonapp",[37,41,45],{"id":38,"title":39,"slug":40},73,"Architecture","architecture",{"id":42,"title":43,"slug":44},8,"Design","design",{"id":46,"title":47,"slug":48},23,"Collaboration","collaboration",[50,65,78,91,104,117,127,140,153,166,179,189],{"uuid":51,"title":52,"description":53,"canonical_path":4,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"categories":58,"app":63},"be8ad95c-67ab-4e15-9ded-13547a07ad4b","Rayon UI component","A modal promoting a team upgrade.",1216,368,"UI component from Rayon","component",[59],{"id":60,"title":61,"slug":62},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":64},[],{"uuid":66,"title":52,"description":67,"canonical_path":4,"image":68,"width":69,"height":70,"image_alt":56,"kind":57,"categories":71,"app":76},"858141a7-4fb8-47bb-858f-ad8f602df00a","A modal for applying to a student plan with a toggle for monthly or yearly billing.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1442baca-eab0-4652-abac-974a31aa8b6e.png",1841,1179,[72],{"id":73,"title":74,"slug":75},303,"Pricing section","pricing-section",{"slug":31,"title":30,"logo":33,"categories":77},[],{"uuid":79,"title":52,"description":80,"canonical_path":4,"image":81,"width":82,"height":83,"image_alt":56,"kind":57,"categories":84,"app":89},"852b51d4-3c78-4d82-aea3-2097d0e59b1f","A success alert with a button and a close icon","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4136c695-d8dd-43d6-beaf-fc642241948e.png",724,109,[85],{"id":86,"title":87,"slug":88},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":90},[],{"uuid":92,"title":52,"description":93,"canonical_path":4,"image":94,"width":95,"height":96,"image_alt":56,"kind":57,"categories":97,"app":102},"fd350b12-0e8e-4cd2-84ae-5387aa76cb02","A modal menu with a list of actions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa35c7fbe-97c6-4f6a-a6b2-31c6a25b6243.png",512,699,[98],{"id":99,"title":100,"slug":101},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":103},[],{"uuid":105,"title":52,"description":106,"canonical_path":4,"image":107,"width":108,"height":109,"image_alt":56,"kind":57,"categories":110,"app":115},"40d53ef4-4ed4-4480-a1b8-bcdbd4d78b4d","A modal for managing access to a file or project.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F781f195c-ed6f-4ca1-9e44-fcd7de1be30e.png",1006,526,[111],{"id":112,"title":113,"slug":114},284,"Modal","modal",{"slug":31,"title":30,"logo":33,"categories":116},[],{"uuid":118,"title":52,"description":119,"canonical_path":4,"image":120,"width":121,"height":122,"image_alt":56,"kind":57,"categories":123,"app":125},"87569b31-eb38-4376-a6c9-59f3735d7deb","A table with a dropdown menu for column options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0a7e4bc9-7674-4ce4-9fbc-099d70c4393d.png",1008,603,[124],{"id":99,"title":100,"slug":101},{"slug":31,"title":30,"logo":33,"categories":126},[],{"uuid":128,"title":52,"description":129,"canonical_path":4,"image":130,"width":131,"height":132,"image_alt":56,"kind":57,"categories":133,"app":138},"810fa60a-aac5-4376-8f25-4b0aa8e00103","A table modal displaying object dimensions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcd3b1910-e35f-44cb-9818-a5392642f70c.png",1661,940,[134],{"id":135,"title":136,"slug":137},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":139},[],{"uuid":141,"title":52,"description":142,"canonical_path":4,"image":143,"width":144,"height":145,"image_alt":56,"kind":57,"categories":146,"app":151},"86ccc74c-ba7c-429d-979e-23283e7e73f3","A color picker modal with a grid of color swatches, a dropdown for color palettes, recent colors, and a hex input.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F84b6fb34-bf59-4290-b4aa-a6a747c68139.png",557,733,[147],{"id":148,"title":149,"slug":150},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":152},[],{"uuid":154,"title":52,"description":155,"canonical_path":4,"image":156,"width":157,"height":158,"image_alt":56,"kind":57,"categories":159,"app":164},"6d8265c9-22d0-4329-a1fb-653d61eafd7c","A modal with editing tools.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0416268b-50c5-4f3e-bbff-833bb5e59e2c.png",1412,504,[160],{"id":161,"title":162,"slug":163},246,"Toolbox","toolbox",{"slug":31,"title":30,"logo":33,"categories":165},[],{"uuid":167,"title":52,"description":168,"canonical_path":4,"image":169,"width":170,"height":171,"image_alt":56,"kind":57,"categories":172,"app":177},"38c664c2-4640-4c38-a8e7-0185ea897acf","A layer panel for a 3D modeling application.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2e2e48ae-d7ba-46a6-9c2a-1991c7d97748.png",608,1777,[173],{"id":174,"title":175,"slug":176},220,"Drawer","side-sheet-drawer",{"slug":31,"title":30,"logo":33,"categories":178},[],{"uuid":180,"title":52,"description":181,"canonical_path":4,"image":182,"width":183,"height":184,"image_alt":56,"kind":57,"categories":185,"app":187},"8bca66d7-11e6-449b-8e20-10361fb2b074","A modal for editing stroke properties and text properties.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdb0d3d30-3b98-453e-98ec-eca8b443ba79.png",1085,901,[186],{"id":148,"title":149,"slug":150},{"slug":31,"title":30,"logo":33,"categories":188},[],{"uuid":190,"title":52,"description":191,"canonical_path":4,"image":192,"width":109,"height":193,"image_alt":56,"kind":57,"categories":194,"app":196},"f5bcd1c6-941f-4b57-82b6-7b3a38554864","A panel for editing wall properties in a design tool.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F33ee5ad8-95c2-414b-8188-a7b43085f140.png",1770,[195],{"id":161,"title":162,"slug":163},{"slug":31,"title":30,"logo":33,"categories":197},[],[],[200,203,206,209,212,215],{"label":201,"to":202},"Rayon product screens","\u002Fexamples\u002Fapps\u002Frayon\u002Fscreens",{"label":204,"to":205},"Rayon marketing pages","\u002Fexamples\u002Fapps\u002Frayon\u002Fmarketing",{"label":207,"to":208},"Rayon user flows","\u002Fexamples\u002Fapps\u002Frayon\u002Fflows",{"label":210,"to":211},"Architecture app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Farchitecture",{"label":213,"to":214},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":216,"to":217},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"published_at":219,"updated_at":220},"2025-02-03T07:39:44.000Z","2026-09-13T13:02:39.000Z"]