[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fstripe\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":209,"links":210,"dates":229},"\u002Fexamples\u002Fapps\u002Fstripe\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Stripe UI components examples - Nicelydone","Browse Stripe UI component design examples. Preview individual interface elements and explore related component categories. Payments infrastructure for the…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fec7d9909-a808-4d57-b50b-5d1e7a108ab2.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},"Stripe design examples","\u002Fexamples\u002Fapps\u002Fstripe",{"label":23,"to":4},"Stripe UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Stripe UI component design examples. Preview individual interface elements and explore related component categories. Payments infrastructure for the internet",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"categories":35},"Stripe","stripe","Payments infrastructure for the internet","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fstripe-ac594414.png","https:\u002F\u002Fstripe.com",[36,40,44],{"id":37,"title":38,"slug":39},36,"Finance","finance",{"id":41,"title":42,"slug":43},37,"Developer APIs","developer-apis",{"id":45,"title":46,"slug":47},39,"Payments","payments",[49,64,76,88,100,110,125,140,155,167,182,197],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"954f621a-41a6-452d-8a68-8ab238965af0","Mega Menu Dropdown","An open mega menu dropdown displaying a grid of resource links with icons, divided into a primary white section and a secondary light blue section.",1374,858,"Mega Menu Dropdown from Stripe","component",[58],{"id":59,"title":60,"slug":61},290,"Flyout menu","flyout-menu",{"slug":31,"title":30,"logo":33,"categories":63},[],{"uuid":65,"title":66,"description":67,"canonical_path":4,"image":68,"width":69,"height":70,"image_alt":71,"kind":56,"categories":72,"app":74},"14727d75-a17e-4e30-9b3c-1afd50e25bd5","Mega menu","A large dropdown menu containing categorized links and resources, triggered from a top navigation bar.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff6cdae4a-c267-496f-bdfe-e31fe70591a0.png",1406,1006,"Mega menu from Stripe",[73],{"id":59,"title":60,"slug":61},{"slug":31,"title":30,"logo":33,"categories":75},[],{"uuid":77,"title":78,"description":79,"canonical_path":4,"image":80,"width":81,"height":82,"image_alt":83,"kind":56,"categories":84,"app":86},"b9f68ef1-234a-4d15-b467-bbee750cf730","Mega menu dropdown","A large dropdown menu appearing from a top navigation bar, categorizing links by stage, use case, and integrations.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F57fc7250-7910-48c3-93cb-07f9027e765c.png",1432,1241,"Mega menu dropdown from Stripe",[85],{"id":59,"title":60,"slug":61},{"slug":31,"title":30,"logo":33,"categories":87},[],{"uuid":89,"title":90,"description":91,"canonical_path":4,"image":92,"width":93,"height":94,"image_alt":95,"kind":56,"categories":96,"app":98},"3ee708b2-3e28-4296-aa9d-89172f52257e","Mega Menu","A large dropdown menu displaying product categories on the left and specific products with icons and descriptions on the right.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe6a97311-2595-434f-86ff-093e415b3c8f.png",1864,1119,"Mega Menu from Stripe",[97],{"id":59,"title":60,"slug":61},{"slug":31,"title":30,"logo":33,"categories":99},[],{"uuid":101,"title":78,"description":102,"canonical_path":4,"image":103,"width":104,"height":105,"image_alt":83,"kind":56,"categories":106,"app":108},"20b9f15d-7452-4024-abac-38a6c39ab853","A large, multi-column dropdown menu displaying product categories and individual products with icons and descriptions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb7311b31-132a-4595-ab35-8462b127cae9.png",2044,1142,[107],{"id":59,"title":60,"slug":61},{"slug":31,"title":30,"logo":33,"categories":109},[],{"uuid":111,"title":112,"description":113,"canonical_path":4,"image":114,"width":115,"height":116,"image_alt":117,"kind":56,"categories":118,"app":123},"ac66a024-0dab-4c4c-9667-4fa551ba8c45","Stripe Homepage Hero","The hero section of the Stripe homepage featuring a large headline, a descriptive subheadline, primary and secondary call-to-action buttons, and a dynamic, colorful background. It also includes a mock UI of a payment form and a dashboard to illustrate the product's capabilities.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F670a73ec-3b64-490c-b9c3-a6541afff50d.png",3024,1641,"Stripe Homepage Hero from Stripe",[119],{"id":120,"title":121,"slug":122},197,"Hero section","hero-section",{"slug":31,"title":30,"logo":33,"categories":124},[],{"uuid":126,"title":127,"description":128,"canonical_path":4,"image":129,"width":130,"height":131,"image_alt":132,"kind":56,"categories":133,"app":138},"de33ca3c-7277-4aed-8f32-6e4398a351e4","Events Log Table","A comprehensive data table displaying a log of developer events, including event descriptions, IDs, and timestamps. It features a header with a title, tabs for navigation, a filter button, an informational banner, and pagination controls at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3f02f2bc-d0d2-498f-a837-569c96e91cba.png",2551,2102,"Events Log Table from Stripe",[134],{"id":135,"title":136,"slug":137},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":139},[],{"uuid":141,"title":142,"description":143,"canonical_path":4,"image":144,"width":145,"height":146,"image_alt":147,"kind":56,"categories":148,"app":153},"4e24c1ba-b9f8-4bb4-be2f-ec2d06312df1","API Requests Line Chart","A line chart displaying the number of successful and failed API requests over time. It includes a title, summary metrics for successful and failed requests, and a line graph with a date range on the x-axis.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0d0b9e89-63cc-4c90-b055-90cb1519c207.png",824,458,"API Requests Line Chart from Stripe",[149],{"id":150,"title":151,"slug":152},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":154},[],{"uuid":156,"title":157,"description":158,"canonical_path":4,"image":159,"width":160,"height":161,"image_alt":162,"kind":56,"categories":163,"app":165},"abaf28f0-f23d-4606-b86a-e75ab5710872","API error distribution chart","A line chart showing API error distribution over time, with KPI summaries for GET, POST, and DELETE requests above the chart.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F93f7aa75-fc50-4e45-ac95-9aa2d26e07f9.png",850,521,"API error distribution chart from Stripe",[164],{"id":150,"title":151,"slug":152},{"slug":31,"title":30,"logo":33,"categories":166},[],{"uuid":168,"title":169,"description":170,"canonical_path":4,"image":171,"width":172,"height":173,"image_alt":174,"kind":56,"categories":175,"app":180},"dd9bc9ff-d89c-47a4-a7fb-d8d012b6bb47","Integration status progress","A progress indicator showing a completed integration status. It includes a title, a success message, a step counter badge, a fully green progress bar with four segments, a descriptive text block, and a 'Done' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F08335a42-735a-4094-b740-87d057be403f.png",830,467,"Integration status progress from Stripe",[176],{"id":177,"title":178,"slug":179},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":181},[],{"uuid":183,"title":184,"description":185,"canonical_path":4,"image":186,"width":187,"height":188,"image_alt":189,"kind":56,"categories":190,"app":195},"49992545-9456-4128-a098-bcd5e5047f7b","Automation workflow builder","A visual workflow builder showing a sequence of automated actions for when a payment fails. It includes steps for retry policies, delays, and canceling subscriptions, connected by a vertical timeline.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F08abd262-e931-42cf-88e2-24846ec5416b.png",1607,1747,"Automation workflow builder from Stripe",[191],{"id":192,"title":193,"slug":194},217,"Query builder","query-builder",{"slug":31,"title":30,"logo":33,"categories":196},[],{"uuid":198,"title":199,"description":200,"canonical_path":4,"image":201,"width":202,"height":203,"image_alt":204,"kind":56,"categories":205,"app":207},"9872a2c4-a922-4a26-bfb3-2d622f4775f0","Recovery breakdown chart","A combination bar and line chart showing recovery breakdown over time. It features stacked bars for different recovery statuses and a line indicating the recovery rate, with a legend and an 'Explore' button at the top.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F62fbac4d-8080-4e2d-a470-4f6f71bd1233.png",1744,1007,"Recovery breakdown chart from Stripe",[206],{"id":150,"title":151,"slug":152},{"slug":31,"title":30,"logo":33,"categories":208},[],[],[211,214,217,220,223,226],{"label":212,"to":213},"Stripe product screens","\u002Fexamples\u002Fapps\u002Fstripe\u002Fscreens",{"label":215,"to":216},"Stripe marketing pages","\u002Fexamples\u002Fapps\u002Fstripe\u002Fmarketing",{"label":218,"to":219},"Stripe user flows","\u002Fexamples\u002Fapps\u002Fstripe\u002Fflows",{"label":221,"to":222},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":224,"to":225},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":227,"to":228},"Payments app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpayments",{"published_at":230,"updated_at":231},"2021-08-15T10:10:37.000Z","2026-09-26T12:10:09.000Z"]