[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Frunway\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":53,"showcases":228,"links":229,"dates":266},"\u002Fexamples\u002Fapps\u002Frunway\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Runway UI components examples - Nicelydone","Browse Runway UI component design examples. Preview individual interface elements and explore related component categories. Advancing creativity with…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe2fab6de-091a-4a3a-99e0-473287e011a4.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},"Runway design examples","\u002Fexamples\u002Fapps\u002Frunway",{"label":23,"to":4},"Runway UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Runway UI component design examples. Preview individual interface elements and explore related component categories. Advancing creativity with artificial intelligence",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Runway","runway","Advancing creativity with artificial intelligence","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frunway-2c9f863e.png","https:\u002F\u002Frunwayml.com","runwayml",[37,41,45,49],{"id":38,"title":39,"slug":40},80,"Artificial Intelligence","artificial-intelligence",{"id":42,"title":43,"slug":44},77,"Machine learning","machine-learning",{"id":46,"title":47,"slug":48},8,"Design","design",{"id":50,"title":51,"slug":52},100,"Video","video",[54,69,84,96,111,126,141,156,171,186,201,216],{"uuid":55,"title":56,"description":57,"canonical_path":4,"image":11,"width":58,"height":59,"image_alt":60,"kind":61,"categories":62,"app":67},"aaa79068-1762-4ef2-97d2-34e1251e9995","Project Card","A card displaying a project thumbnail, title, author, and a more options menu icon.",610,483,"Project Card from Runway","component",[63],{"id":64,"title":65,"slug":66},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":68},[],{"uuid":70,"title":71,"description":72,"canonical_path":4,"image":73,"width":74,"height":75,"image_alt":76,"kind":61,"categories":77,"app":82},"51963e31-bac4-42e6-b0eb-70de8b1be039","Assets table","A data table displaying a list of media assets with columns for name, type, media, duration, creator, and creation date. It includes a header with sorting and filtering options, and a floating action button for chat.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7267a959-37eb-4e16-bded-c98a6606732d.png",2631,815,"Assets table from Runway",[78],{"id":79,"title":80,"slug":81},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":83},[],{"uuid":85,"title":86,"description":87,"canonical_path":4,"image":88,"width":89,"height":90,"image_alt":91,"kind":61,"categories":92,"app":94},"6a4256d1-ee89-4089-830d-f837352220d9","Folder card","A card representing a folder, featuring a thumbnail image, folder name, and item count.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff67e4674-825a-4b3b-815c-a50efe4ff767.png",578,417,"Folder card from Runway",[93],{"id":64,"title":65,"slug":66},{"slug":31,"title":30,"logo":33,"categories":95},[],{"uuid":97,"title":98,"description":99,"canonical_path":4,"image":100,"width":101,"height":102,"image_alt":103,"kind":61,"categories":104,"app":109},"6e0bf195-b896-4061-816a-7c4f15dd1b59","Drag and drop file upload","A large drag-and-drop file upload area with a dashed border, a cloud upload icon, and text prompting the user to drag and drop an image or click to upload.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0fff717b-4f52-40ec-9fa3-e7ee6406edbf.png",2046,847,"Drag and drop file upload from Runway",[105],{"id":106,"title":107,"slug":108},188,"File upload input","file-upload-input",{"slug":31,"title":30,"logo":33,"categories":110},[],{"uuid":112,"title":113,"description":114,"canonical_path":4,"image":115,"width":116,"height":117,"image_alt":118,"kind":61,"categories":119,"app":124},"68d4c33e-0f9c-4091-af03-f3133c4748c0","Video Editor Properties Panel","A dark-themed properties panel for a video editor, featuring collapsible sections for Transform, Crop, Magic Tools, Effects and Filters, Motion effects, and Export Clip. It includes various input controls like number fields, sliders, dropdowns, and toggle buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcee47bf6-258a-4d1f-b4db-1d10c25dc9d5.png",580,1737,"Video Editor Properties Panel from Runway",[120],{"id":121,"title":122,"slug":123},246,"Toolbox","toolbox",{"slug":31,"title":30,"logo":33,"categories":125},[],{"uuid":127,"title":128,"description":129,"canonical_path":4,"image":130,"width":131,"height":132,"image_alt":133,"kind":61,"categories":134,"app":139},"daa1d9a2-9aca-448f-97d8-cbd81fe3a2c2","Runway UI component","A modal menu with a list of options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F932f4334-4a41-4ef6-bcd9-0257fe776c79.png",543,698,"UI component from Runway",[135],{"id":136,"title":137,"slug":138},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":140},[],{"uuid":142,"title":143,"description":144,"canonical_path":4,"image":145,"width":146,"height":147,"image_alt":148,"kind":61,"categories":149,"app":154},"0a250acd-0e76-4d01-b6cd-028005858a6f","Format selector with paywalled options","A segmented control or toggle group for selecting an export format. The first option (MP4) is selected, while the other two (ProRes, PNG) are disabled and marked with 'UPGRADE' badges, indicating they require a paid plan.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe561139e-ec01-4b09-9052-0127c669e653.png",592,226,"Format selector with paywalled options from Runway",[150],{"id":151,"title":152,"slug":153},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":155},[],{"uuid":157,"title":158,"description":159,"canonical_path":4,"image":160,"width":161,"height":162,"image_alt":163,"kind":61,"categories":164,"app":169},"2d6fa1e2-1392-4ad1-a7c1-4a9e47930d7d","Background Color Picker","A color picker component allowing users to select a background color from a predefined palette or add a custom color.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5d459383-b0e8-40da-ac72-24d56ab82838.png",568,230,"Background Color Picker from Runway",[165],{"id":166,"title":167,"slug":168},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":170},[],{"uuid":172,"title":173,"description":174,"canonical_path":4,"image":175,"width":176,"height":177,"image_alt":178,"kind":61,"categories":179,"app":184},"a7883532-bf01-40f3-b883-a9f38d5a9316","Editor Topbar","A dark-themed top navigation bar for a video editor, featuring a back button, project title with a beta badge, a central toolbar with editing tools and zoom controls, and primary actions for sharing, exporting, and completing the task on the right.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe79ca767-bde6-47ff-8b57-3eb04fb02249.png",3200,320,"Editor Topbar from Runway",[180],{"id":181,"title":182,"slug":183},240,"Horizontal navigation","horizontal-navigation",{"slug":31,"title":30,"logo":33,"categories":185},[],{"uuid":187,"title":188,"description":189,"canonical_path":4,"image":190,"width":191,"height":192,"image_alt":193,"kind":61,"categories":194,"app":199},"3e3116eb-a48b-43ce-afee-97bb1b9abbc0","Brush Size Slider","A slider control with a numeric input field to adjust brush size.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fce5411a7-eef5-4b77-8b38-b6e8d25f084c.png",653,176,"Brush Size Slider from Runway",[195],{"id":196,"title":197,"slug":198},223,"Slider","slider",{"slug":31,"title":30,"logo":33,"categories":200},[],{"uuid":202,"title":203,"description":204,"canonical_path":4,"image":205,"width":206,"height":207,"image_alt":208,"kind":61,"categories":209,"app":214},"e6573ff9-6f34-44b2-b78c-92e7291008bd","Feedback checkbox list","A list of checkbox options for providing feedback on AI video generation quality.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F05399460-f003-45a3-8a11-e3b779665014.png",776,972,"Feedback checkbox list from Runway",[210],{"id":211,"title":212,"slug":213},179,"Checkbox & radio","checkbox-radio",{"slug":31,"title":30,"logo":33,"categories":215},[],{"uuid":217,"title":218,"description":219,"canonical_path":4,"image":220,"width":221,"height":222,"image_alt":223,"kind":61,"categories":224,"app":226},"7fdc2da9-0277-48e1-b997-386f8c7afa42","Upgrade Prompt Card","A dark-themed card displaying the user's current plan status, project usage progress, and a prominent call-to-action to upgrade.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb90d54c0-adce-479c-88de-bfaeb09cdbc3.png",584,434,"Upgrade Prompt Card from Runway",[225],{"id":151,"title":152,"slug":153},{"slug":31,"title":30,"logo":33,"categories":227},[],[],[230,233,236,239,242,245,248,250,254,258,262],{"label":231,"to":232},"Runway product screens","\u002Fexamples\u002Fapps\u002Frunway\u002Fscreens",{"label":234,"to":235},"Runway marketing pages","\u002Fexamples\u002Fapps\u002Frunway\u002Fmarketing",{"label":237,"to":238},"Runway user flows","\u002Fexamples\u002Fapps\u002Frunway\u002Fflows",{"label":240,"to":241},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":243,"to":244},"Machine learning app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmachine-learning",{"label":246,"to":247},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":249,"to":18},"All SaaS app examples",{"label":251,"to":252,"description":253},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":255,"to":256,"description":257},"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":259,"to":260,"description":261},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":263,"to":264,"description":265},"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":267,"updated_at":268},"2023-08-15T06:35:43.000Z","2026-09-16T12:10:15.000Z"]