https://metroui.org.ua/donate/

1<!DOCTYPE html><html lang="en" class="dark-side" data-astro-cid-sckkx6r4> <head><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><link rel="icon" type="image/ico" sizes="32x32" href="/logo-light.svg"><link rel="stylesheet" href="/metro.css"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="author" content="Serhii Pimenov"><meta name="author:site" content="https://pimenov.com.ua"><meta name="author:email" content="[email protected]"><meta name="title" content="Metro UI Components Library"><meta name="description" content="Impressive components library for creating an expressive reactive web sites from prototyping to production"><!-- Open Graph Tags (Facebook) --><meta property="og:type" content="website"><meta property="og:title" content="Metro UI Components Library"><meta property="og:url" content="https://metroui.org.ua"><meta property="og:description" content="Impressive components library for creating an expressive reactive web sites from prototyping to production"><meta property="og:image" content="/metroui-social-card.jpg"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:title" content="Metro UI Components Library"><meta property="twitter:url" content="https://metroui.org.ua"><meta property="twitter:description" content="Impressive components library for creating an expressive reactive web sites from prototyping to production"><meta property="twitter:image" content="/metroui-social-card.jpg"><!-- Google tag (gtag.js) -->

1<script async src="https://www.googletagmanager.com/gtag/js?id=

1G-N08RZ551GL

1"></script> 

1<script>
2    

2window.dataLayer = window.dataLayer || [];
3    function gtag(){dataLayer.push(arguments);}
4    gtag('js', new Date());
5
6    gtag('config', '

6G-N08RZ551GL

6');

7</script>

7<script data-goatcounter="https://metroui.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

7<title>Metro UI - Donate</title><style>body{font-family:Inter,sans-serif}.lib-part-box{border:1px dashed var(--border-color);border-radius:10px;padding:16px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;.lib-part-number{font-size:24px;font-weight:900;margin-bottom:8px;position:absolute;top:10px;right:15px}img{height:128px;aspect-ratio:1 / 1;object-fit:contain}.lib-part-name{margin-top:16px;font-size:18px;font-weight:600;text-align:center}}.pm-command{background-color:#000!important;border:1px dashed var(--border-color)}.pm-command code{font-size:20px;font-weight:500;padding:10px;color:var(--color-gray-white)}.scroll-target{scroll-snap-align:start;scroll-margin-top:80px}.appbar-logo[data-astro-cid-ovqm6cui]{width:32px;height:32px;object-fit:contain}.appbar-logo-text[data-astro-cid-ovqm6cui]{font-size:18px;font-weight:700;margin-left:8px}footer[data-astro-cid-sz7xmlte]{margin-top:auto;display:flex;flex-flow:column;justify-content:center;align-items:center;background-color:#000;color:#d2ffff;padding:20px 10px;width:100%}body{min-height:100vh}
8</style></head> <body class="cloak gradient gradient-crimson-depth" data-astro-cid-sckkx6r4> <nav data-role="appbar" data-expand-point="md" class="pt-2 pb-3" style="--appbar-background: hsla(0, 74%, 7%, 1); --appbar-item-background-hover: #a11212;" data-astro-cid-ovqm6cui> <a href="/" class="no-decor app-bar-item-static" data-astro-cid-ovqm6cui> <img class="appbar-logo" src="/logo.svg" alt="Metro UI Logo" data-astro-cid-ovqm6cui> <span class="appbar-logo-text fg-white" data-astro-cid-ovqm6cui>Metro UI</span> </a> <div class="app-bar-container ml-auto" data-astro-cid-ovqm6cui> <ul class="app-bar-menu" data-astro-cid-ovqm6cui> <li data-astro-cid-ovqm6cui><a href="/" target="_blank" data-astro-cid-ovqm6cui>Home</a></li> <li data-astro-cid-ovqm6cui> <a href="#" class="dropdown-toggle" data-astro-cid-ovqm6cui>On this page</a> <ul data-role="dropdown" class="d-menu" data-astro-cid-ovqm6cui> <li data-astro-cid-ovqm6cui><a href="#main" data-astro-cid-ovqm6cui>Main</a></li> <li data-astro-cid-ovqm6cui><a href="#struct" data-astro-cid-ovqm6cui>Structure</a></li> <li data-astro-cid-ovqm6cui><a href="#started" data-astro-cid-ovqm6cui>Start</a></li> <li data-astro-cid-ovqm6cui><a href="#components" data-astro-cid-ovqm6cui>Components</a></li> <li data-astro-cid-ovqm6cui><a href="#i18n" data-astro-cid-ovqm6cui>i18n</a></li> <li data-astro-cid-ovqm6cui><a href="#css" data-astro-cid-ovqm6cui>CSS</a></li> <li data-astro-cid-ovqm6cui><a href="#icons" data-astro-cid-ovqm6cui>Icons</a></li> </ul> </li> <li data-astro-cid-ovqm6cui><a href="https://panda.metroui.org.ua" target="_blank" data-astro-cid-ovqm6cui>Demo</a></li> <li data-astro-cid-ovqm6cui><a href="https://latte.org.ua" target="_blank" data-astro-cid-ovqm6cui>Latte</a></li> <li data-astro-cid-ovqm6cui><a href="https://v5.metroui.org.ua" target="_blank" data-astro-cid-ovqm6cui>Docs</a></li> <li data-astro-cid-ovqm6cui><a href="/donate" class="fg-orange" data-astro-cid-ovqm6cui>Donate</a></li> </ul> <a href="https://github.com/olton/metroui" class="button small flat bg-dark-red-hover" data-astro-cid-ovqm6cui><span class="mif-github" data-astro-cid-ovqm6cui></span></a> <a href="https://discord.gg/cxrhV7pGG8" class="button small flat bg-dark-red-hover" data-astro-cid-ovqm6cui><span class="mif-discord" data-astro-cid-ovqm6cui></span></a> </div> </nav>

8   <div class="container-fluid bg-pattern-grid-dot masked"> <div class="container"> <div class="hero bg-transparent d-flex flex-column flex-center pt-10 pb-10"> <div class="pos-relative gradient gradient-crimson-depth border border-radius-half p-4 gradient-border animated-border-red" style="width: 200px; height: 200px;"> <img src="/_astro/support.CA21wXBg_Z1YM0E1.svg" alt="Support Image" style=" filter: drop-shadow(0 0 0.75rem #ff4e4e);" loading="lazy" decoding="async" fetchpriority="auto" width="500" height="500"> </div> <div class="display3 text-center"> <span class="enlarge-2 text-weight-8">
9Support
10<span class="gradient-text gradient-radial-red">Metro UI</span> </span> </div> <div class="text-leader text-center mt-4 mb-10">
11If you like Metro UI and want to support its development,<br>you can do it:
12</div> </div> </div> </div> <div class="container"> <div class="row"> <div class="cell-md-6 order-2 order-1-md"> <div class="display3">Order<br>development</div> <div class="text-leader2">
13You can order the author to develop your site on Metro UI, or to develop a component library similar to Metro UI, but according to your
14                    needs.
15</div> <div class="text-leader2 mt-4">
16Or offer your own version of project assistance.
17</div> <div class="mt-4"> <a href="https://pimenov.com.ua" class="button alert pill-button"> <span class="icon mif-phone"></span> <span class="caption">Connect to author</span> </a> </div> </div> <div class="cell-md-6 d-flex flex-column flex-center order-1 order-2-md"> <img src="/_astro/approval.XiLWTHHb_Z1YM0E1.svg" alt="Approval Image" style="width: 80%" loading="lazy" decoding="async" fetchpriority="auto" width="500" height="500"> </div> </div> </div> <div class="cutter dash" style="--cutter-color: var(--border-color); --cutter-line-width: 1px"> <div class="content">
18Donate with SEPA bank transfer
19</div> </div> <div class="container mt-4"> <div class="text-center">
20The Author accepts donations via SEPA bank transfer. Please send payments to:
21</div> <div class="row gap-10 mt-4"> <div class="cell-md-6"> <div class="box bg-transparent"> <div class="box-title">USD</div> <div class="text-bold">Recipient:</div> <div>Serhii Pimenov</div> <hr class="mt-4 mb-4"> <div class="mt-2 text-bold">IBAN:</div> <div>UA183052990000026204645062053</div> <hr class="mt-4 mb-4"> <div class="mt-2 text-bold">BIC:</div> <div>PBANUA2X</div> <hr class="mt-4 mb-4"> <div class="mt-2 text-bold">Bank:</div> <div>JSC CB PRIVATBANK</div> </div> </div> <div class="cell-md-6"> <div class="box bg-transparent"> <div class="box-title">EUR</div> <div class="text-bold">Recipient:</div> <div>Serhii Pimenov</div> <hr class="mt-4 mb-4"> <div class="mt-2 text-bold">IBAN:</div> <div>UA523052990000026207744445114</div> <hr class="mt-4 mb-4"> <div class="mt-2 text-bold">BIC:</div> <div>PBANUA2X</div> <hr class="mt-4 mb-4"> <div class="mt-2 text-bold">Bank:</div> <div>JSC CB PRIVATBANK</div> </div> </div> </div> </div> <div class="cutter dash mt-10" style="--cutter-color: var(--border-color); --cutter-line-width: 1px"> <div class="content">
22Other ways to support Metro UI
23</div> </div> <div class="container mt-10 mb-10"> <div class="row"> <div class="cell-md-4"> <div class="box"> <div class="box-title text-center">Buy Premium Support</div> <div class="mt-2 d-flex flex-center mt-4"> <a href="https://korzh.com/metroui#licensing" class="button pill-button info"> <span class="mif-link"></span> Get Support
24</a> </div> </div> </div> <div class="cell-md-4"> <div class="box"> <div class="box-title text-center">Donate with PayPal</div> <div class="mt-2 d-flex flex-center mt-4"> <a href="https://www.paypal.com/donate/?hosted_button_id=4AM4GN5YT6EEA" class="button pill-button warning"> <span class="mif-cc-paypal"></span> PayPal
25</a> </div> </div> </div> <div class="cell-md-4"> <div class="box"> <div class="box-title text-center">Donate with Patreon</div> <div class="mt-2 d-flex flex-center mt-4"> <a href="https://patreon.com/metroui" class="button pill-button alert"> <img src="/_astro/patreon.BhonXNzP_Rjdgv.webp" style="height: 26px; width: 26px" alt="Patreon Image" loading="lazy" decoding="async" fetchpriority="auto" width="512" height="512">
26Patreon
27</a> </div> </div> </div> </div> </div>  <footer data-astro-cid-sz7xmlte> <div class="container" data-astro-cid-sz7xmlte> <div class="d-flex flex-center" data-astro-cid-sz7xmlte> <span class="h3" data-astro-cid-sz7xmlte> <span class="fg-blue" data-astro-cid-sz7xmlte>Made in </span><span class="fg-yellow" data-astro-cid-sz7xmlte>Ukraine</span> </span> </div> <div class="d-flex flex-center mt-5" data-astro-cid-sz7xmlte> <span class="mr-1" data-astro-cid-sz7xmlte>Copyright 2012-2025 by</span> <a href="https://pimenov.com.ua/" data-astro-cid-sz7xmlte>Serhii Pimenov</a> </div> <div class="d-flex flex-center" data-astro-cid-sz7xmlte> <span class="mr-1" data-astro-cid-sz7xmlte>Illustrations by</span> <a href="https://www.manypixels.co/" data-astro-cid-sz7xmlte>

27ManyPixels</a> </div> <div class="d-flex flex-center" data-astro-cid-sz7xmlte> <span class="mr-1" data-astro-cid-sz7xmlte>Built with</span> <a href="https://metroui.org.ua/" data-astro-cid-sz7xmlte>Metro UI</a> <span class="mr-1" data-astro-cid-sz7xmlte>,</span> <span class="mr-1" data-astro-cid-sz7xmlte>Powered by</span> <a href="https://astro.dev/" data-astro-cid-sz7xmlte>Astro</a> </div> <div class="d-flex flex-center mt-10" data-astro-cid-sz7xmlte> <ul class="inline-list d-flex flex-justify-center reduce-1 mt-0" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte><a href="https://mirohost.net/" class="fg-cyan no-decor" data-astro-cid-sz7xmlte>Hosting by Mirohost</a></li> <li data-astro-cid-sz7xmlte>•</li> <li data-astro-cid-sz7xmlte><a href="https://www.keycdn.com/" class="fg-cyan no-decor" data-astro-cid-sz7xmlte>CDN by KeyCDN</a></li> <li data-astro-cid-sz7xmlte>•</li> <li data-astro-cid-sz7xmlte><a href="https://www.jetbrains.com/webstorm" class="fg-cyan no-decor" data-astro-cid-sz7xmlte>IDE by JetBrains</a></li> </ul> </div> <div class="text-center mt-10 reduce-4" data-astro-cid-sz7xmlte>
28Metro UI Codebase licensed under <a class="fg-white" href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE" data-astro-cid-sz7xmlte>MIT</a>,
29            Docs licensed by <a class="fg-white" href="https://creativecommons.org/licenses/by/3.0/" data-astro-cid-sz7xmlte>CC BY 3.0</a>.
30</div> </div> </footer>  

30<script src="/metro.js"></script>

30 </body></html>