PageSourceSearch

https://madewithsvelte.com/ui-component

html madewithsvelte.com collected 2026-09-25 21:29:48 UTC 131,646 bytes, 1,642 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>UI Component - Made with Svelte</title><meta name="description" content="A collection of web projects made with Svelte – Websites, Components, Frameworks, Apps and more!"><link rel="canonical" href="https://madewithsvelte.com/ui-component"><meta property="og:title" content="UI Component - Made with Svelte"><meta property="og:description" content="A collection of web projects made with Svelte – Websites, Components, Frameworks, Apps and more!"><meta property="og:url" content="https://madewithsvelte.com/ui-component"><meta property="og:image" content="https://madewithsvelte.com/storage/nova-elements/JF2zAzN0x04BzBCVKlnURxWKOAzX7nS44GIsUlfW.jpeg"><meta property="og:image:height" content="630"><meta property="og:image:width" content="1200"><meta name="twitter:title" content="UI Component - Made with Svelte"><meta name="twitter:description" content="A collection of web projects made with Svelte – Websites, Components, Frameworks, Apps and more!">
7<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"UI Component - Made with Svelte","description":"A collection of web projects made with Svelte – Websites, Components, Frameworks, Apps and more!"}</script>
7
8    <meta name="twitter:card" content="summary_large_image">
9
10    
11    <link href="/css/app-madewithsvelte.css?id=7de1b37e7ee70690d1bb" rel="stylesheet" type="text/css">
12
13
14    <!-- Fathom - beautiful, simple website analytics -->
15        
15<script src="https://cdn.usefathom.com/script.js" data-site="DQFOORMB" defer></script>
15
16        <!-- / Fathom -->
17    
18
19
20
21    <link rel="apple-touch-icon" sizes="57x57" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/apple-icon-57x57.png">
22<link rel="apple-touch-icon" sizes="60x60" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/apple-icon-60x60.png">
23<link rel="apple-touch-icon" sizes="72x72" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/apple-icon-72x72.png">
24<link rel="apple-touch-icon" sizes="76x76" href="/https://madewithsvelte.com/mandant/madewithsvelte/favicon/apple-icon-76x76.png">
25<link rel="apple-touch-icon" sizes="114x114" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/apple-icon-114x114.png">
26<link rel="apple-touch-icon" sizes="120x120" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/apple-icon-120x120.png">
27<link rel="apple-touch-icon" sizes="144x144" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/apple-icon-144x144.png">
28<link rel="apple-touch-icon" sizes="152x152" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/apple-icon-152x152.png">
29<link rel="apple-touch-icon" sizes="180x180" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/apple-icon-180x180.png">
30<link rel="icon" type="image/png" sizes="192x192" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/android-icon-192x192.png">
31<link rel="icon" type="image/png" sizes="32x32" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/favicon-32x32.png">
32<link rel="icon" type="image/png" sizes="96x96" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/favicon-96x96.png">
33<link rel="icon" type="image/png" sizes="16x16" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/favicon-16x16.png">
34<link rel="manifest" href="https://madewithsvelte.com/mandant/madewithsvelte/favicon/manifest.json">
35<meta name="msapplication-TileColor" content="#ffffff">
36<meta name="msapplication-TileImage" content="https://madewithsvelte.com/mandant/madewithsvelte/favicon/ms-icon-144x144.png">
37<meta name="theme-color" content="#ffffff">    
38            
38<script type="application/ld+json">{"@context":"https://schema.org","@type":"ItemList","itemListElement":[{"@type":"ListItem","url":"https://madewithsvelte.com/hurtigrutens-svelte-table","position":1},{"@type":"ListItem","url":"https://madewithsvelte.com/lottie-player","position":2},{"@type":"ListItem","url":"https://madewithsvelte.com/svelte-highlight","position":3},{"@type":"ListItem","url":"https://madewithsvelte.com/shadcn-svelte-extras","position":4},{"@type":"ListItem","url":"https://madewithsvelte.com/svar-gantt-for-svelte","position":5},{"@type":"ListItem","url":"https://madewithsvelte.com/topform","position":6},{"@type":"ListItem","url":"https://madewithsvelte.com/svar-datagrid-for-svelte","position":7},{"@type":"ListItem","url":"https://madewithsvelte.com/select-kit","position":8},{"@type":"ListItem","url":"https://madewithsvelte.com/agnosticui-svelte","position":9},{"@type":"ListItem","url":"https://madewithsvelte.com/sveltekit-superforms","position":10},{"@type":"ListItem","url":"https://madewithsvelte.com/svelte-easy-crop","position":11},{"@type":"ListItem","url":"https://madewithsvelte.com/svelte-typeform-embed","position":12},{"@type":"ListItem","url":"https://madewithsvelte.com/svelte-dodge","position":13},{"@type":"ListItem","url":"https://madewithsvelte.com/svelte-transcription-player","position":14},{"@type":"ListItem","url":"https://madewithsvelte.com/svelte-progressbar","position":15},{"@type":"ListItem","url":"https://madewithsvelte.com/svelte-origami","position":16}]}</script>
38
39        <link rel="alternate" type="application/atom+xml" href="https://madewithsvelte.com/rss-feed" title="MadeWith RSS Feed">
40
41    
42    
42<script>
43        window.$page = {"copy":"Svelte","product":"Svelte","color":"#ff4000","pricing":{"queue_time":"6-8 weeks","amount_feature_days":14,"skip_queue":19,"publish_date":9,"feature_days":19},"turnstile_site_key":"0x4AAAAAAEBsx4GPF0-AfRD1"};
44    </script>
44
45
46    
47
48    <link rel="preload" as="font" href="https://madewithsvelte.com/fonts/dosis-v7-latin-ext_latin-regular.woff2" type="font/woff2" crossorigin="anonymous">
49    <link rel="preload" as="font" href="https://madewithsvelte.com/fonts/dosis-v7-latin-ext_latin-600.woff2" type="font/woff2" crossorigin="anonymous">
50    <link rel="preload" as="font" href="https://madewithsvelte.com/fonts/dosis-v7-latin-ext_latin-700.woff2" type="font/woff2" crossorigin="anonymous">
51
52</head>
53
54
55<body data-mandant="madewithsvelte"
56      class="body--site   body--madewithsvelte     body--has-meta ">
57<div id="app">
58                
59
60            <nav class="navbar__wrap  navbar__wrap--has-meta " id="js-header">
61
62            <ul class="navbar-meta">
63            <li class="navbar-meta__link navbar-meta__link--collection  is-active "><a
64                        href="https://madewithsvelte.com">
65                    <svg class="svg-inline u__va--middle" width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
66    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
67    <title>navbar-meta--collection</title>
68    <desc>Created with Sketch.</desc>
69    <defs></defs>
70    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
71        <g id="Blog-Overview" transform="translate(-30.000000, -10.000000)" fill="#FFFFFF" fill-rule="nonzero">
72            <g id="Group-19">
73                <g id="Group-20" transform="translate(30.000000, 10.000000)">
74                    <g id="navbar-meta--collection">
75                        <path d="M6.25,0 L2.27288889,0 C1.02288889,0 0,1.02288889 0,2.27288889 L0,6.25 C0,7.5 1.02288889,8.52288889 2.27288889,8.52288889 L6.25,8.52288889 C7.5,8.52288889 8.52288889,7.5 8.52288889,6.25 L8.52288889,2.27288889 C8.52288889,1.02288889 7.5,0 6.25,0 Z" id="Shape"></path>
76                        <path d="M17.7268889,0 L13.75,0 C12.5,0 11.4768889,1.02288889 11.4768889,2.27288889 L11.4768889,6.25 C11.4768889,7.5 12.5,8.52288889 13.75,8.52288889 L17.7268889,8.52288889 C18.9768889,8.52288889 20,7.5 20,6.25 L20,2.27288889 C20,1.02288889 18.9768889,0 17.7268889,0 Z" id="Shape"></path>
77                        <path d="M6.25,11.4768889 L2.27288889,11.4768889 C1.02288889,11.4768889 0,12.5 0,13.75 L0,17.7268889 C0,18.9768889 1.02288889,20 2.27288889,20 L6.25,20 C7.5,20 8.52288889,18.9768889 8.52288889,17.7268889 L8.52288889,13.75 C8.52288889,12.5 7.5,11.4768889 6.25,11.4768889 Z" id="Shape"></path>
78                        <path d="M17.7268889,11.4768889 L13.75,11.4768889 C12.5,11.4768889 11.4768889,12.5 11.4768889,13.75 L11.4768889,17.7268889 C11.4768889,18.9768889 12.5,20 13.75,20 L17.7268889,20 C18.9768889,20 20,18.9768889 20,17.7268889 L20,13.75 C20,12.5 18.9768889,11.4768889 17.7268889,11.4768889 Z" id="Shape"></path>
79                    </g>
80                </g>
81            </g>
82        </g>
83    </g>
84</svg> Collection</a></li>
85                                </ul>
86    
87    <div class="navbar">
88
89        <div class="pull-left">
90                            <a @click.stop.prevent="showCategories = !(showCategories);" href="#"
91                   class="navbar__categories icon-icon-category">Categories</a>
92            
93        </div>
94        <div class="pull-right">
95            <a href="/submit" class="navbar__submit hidden-xs">Submit a project</a>
96
97            <mwc-search-button>
98                <a class="navbar__twitter" href="#">
99                    <i class="far fa-fw fa-search"></i>
100                </a>
101            </mwc-search-button>
102
103                                        <a data-toggle="tooltip" title="Follow Us On X" target="_blank" rel="external"
104                   href="https://x.com/madewithsvelte"
105                   class="navbar__twitter">
106                    <i class="fab fa-fw fa-x-twitter"></i>
107                </a>
108                                        <a data-toggle="tooltip" title="Follow Us On Bluesky" target="_blank" rel="external"
109                   href="https://bsky.app/profile/madewithsvelte.com"
110                   class="navbar__twitter">
111                    <i class="fab fa-fw fa-bluesky"></i>
112                </a>
113                        
114        </div>
115        <a class="navbar__logo" href="https://madewithsvelte.com">
116                            <img src="https://madewithsvelte.com/mandant/madewithsvelte/images/logo.png" width="194px" alt="MadeWithSvelte.com"/>
117                    </a>
118    </div>
119</nav>
120
121    
122
123    <div class="site-content">
124        <div class="content container " >
125            
126    
127    <div class="row">
128        <div class="col-xs-12 text-center">
129                                        <h1 class="u__h1">#UI Component<br><small><span class="color-grounded">made with</span> <span class="color-color">Svelte</span></small></h1>
130                        
131                    </div>
132    </div>
133
134    <div id="js-slider" class="slider__container ">
135            <div class="slider">
136                <div class="slider__container-inner">
137                    <div class="slider__card">
138                        <div class="slider__inner">
139                            <div class="slider__left">
140                                <div id="js-slider__image" class="slider__image"
141                                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/32934/svelteplot.jpg'"
142                                     style="background-size:cover;-webkit-background-size:cover;"></div>
143                            </div>
144                            <div class="slider__right">
145                                <ul class="slider__list">
146                                                                        
147                                    
148                                                                            <li class="slider__entry  is-active " data-uri="https://madewithsvelte.com/svelteplot" data-image="https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/32934/svelteplot.jpg" data-bgmode="cover">
149    <span class="slider__entry-title">SveltePlot</span>
150    <span class="slider__entry-teaser">Plotting Framework</span>
151    <div class="slider__entry-meta">
152        <div class="pull-left">
153                            <a href="/ui-component">#UI Component</a>
154                                            <a href="/charts">#Charts</a>
155                                    </div>
156        <div class="pull-right">
157            <div class="slider__entry-views">
158
159                                    <svg class="svg-inline icon-eye-dark u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
160    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
161    <title>icon-eye-dark</title>
162    <desc>Created with Sketch.</desc>
163    <defs></defs>
164    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
165        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
166            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
167                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.5
1675933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
168                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
169            </g>
170        </g>
171    </g>
172</svg>                    <svg class="svg-inline icon-eye-dark-inactive u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
173    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
174    <title>Icon Views</title>
175    <desc>Created with Sketch.</desc>
176    <defs></defs>
177    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.400000006">
178        <g id="Startseite" transform="translate(-1109.000000, -712.000000)" fill-rule="nonzero" fill="#435B71">
179            <g id="Content-Copy-3" transform="translate(90.000000, 292.000000)">
180                <g id="Image">
181                    <g id="Group-2" transform="translate(780.000000, 338.000000)">
182                        <g id="Icon-Views" transform="translate(239.000000, 82.000000)">
183                            <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
184                            <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
185                        </g>
186                    </g>
187                </g>
188            </g>
189        </g>
190    </g>
191</svg>                    <span class="u__va--middle">1.604</span>
192                
193            </div>
194        </div>
195    </div>
196</li>
197                                                                                                                    <li class="slider__entry " data-uri="https://madewithsvelte.com/shadcn-svelte" data-image="https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/34435/shadcn-svelte-3.jpg" data-bgmode="cover">
198    <span class="slider__entry-title">shadcn-svelte</span>
199    <span class="slider__entry-teaser">UI Component Library</span>
200    <div class="slider__entry-meta">
201        <div class="pull-left">
202                            <a href="/ui-component">#UI Component</a>
203                                            <a href="/ui-library">#UI library</a>
204                                    </div>
205        <div class="pull-right">
206            <div class="slider__entry-views">
207
208                                    <svg class="svg-inline icon-eye-dark u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
209    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
210    <title>icon-eye-dark</title>
211    <desc>Created with Sketch.</desc>
212    <defs></defs>
213    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
214        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
215            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
216                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.5
2165933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
217                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
218            </g>
219        </g>
220    </g>
221</svg>                    <svg class="svg-inline icon-eye-dark-inactive u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
222    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
223    <title>Icon Views</title>
224    <desc>Created with Sketch.</desc>
225    <defs></defs>
226    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.400000006">
227        <g id="Startseite" transform="translate(-1109.000000, -712.000000)" fill-rule="nonzero" fill="#435B71">
228            <g id="Content-Copy-3" transform="translate(90.000000, 292.000000)">
229                <g id="Image">
230                    <g id="Group-2" transform="translate(780.000000, 338.000000)">
231                        <g id="Icon-Views" transform="translate(239.000000, 82.000000)">
232                            <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
233                            <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
234                        </g>
235                    </g>
236                </g>
237            </g>
238        </g>
239    </g>
240</svg>                    <span class="u__va--middle">20.102</span>
241                
242            </div>
243        </div>
244    </div>
245</li>
246                                                                                                                    <li class="slider__entry " data-uri="https://madewithsvelte.com/flowbite-svelte" data-image="https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/30850/flowbite-svelte-2.jpg" data-bgmode="cover">
247    <span class="slider__entry-title">Flowbite Svelte</span>
248    <span class="slider__entry-teaser">UI Component Library</span>
249    <div class="slider__entry-meta">
250        <div class="pull-left">
251                            <a href="/ui-component">#UI Component</a>
252                                            <a href="/ui-library">#UI library</a>
253                                    </div>
254        <div class="pull-right">
255            <div class="slider__entry-views">
256
257                                    <svg class="svg-inline icon-eye-dark u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
258    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
259    <title>icon-eye-dark</title>
260    <desc>Created with Sketch.</desc>
261    <defs></defs>
262    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
263        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
264            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
265                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.5
2655933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
266                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
267            </g>
268        </g>
269    </g>
270</svg>                    <svg class="svg-inline icon-eye-dark-inactive u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
271    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
272    <title>Icon Views</title>
273    <desc>Created with Sketch.</desc>
274    <defs></defs>
275    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.400000006">
276        <g id="Startseite" transform="translate(-1109.000000, -712.000000)" fill-rule="nonzero" fill="#435B71">
277            <g id="Content-Copy-3" transform="translate(90.000000, 292.000000)">
278                <g id="Image">
279                    <g id="Group-2" transform="translate(780.000000, 338.000000)">
280                        <g id="Icon-Views" transform="translate(239.000000, 82.000000)">
281                            <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
282                            <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
283                        </g>
284                    </g>
285                </g>
286            </g>
287        </g>
288    </g>
289</svg>                    <span class="u__va--middle">29.219</span>
290                
291            </div>
292        </div>
293    </div>
294</li>
295                                                                                                            </ul>
296                            </div>
297                        </div>
298                    </div>
299                </div>
300            </div>
301        </div>
302        
303
304<div class="brick__container">
305
306    
307                        <div  class="brick ">
308    <div class="brick__inner">
309        <div data-detail="https://madewithsvelte.com/hurtigrutens-svelte-table" class="brick__image">
310
311
312            
313                <div class="brick__image-inner "
314                     id="js-image-3847"
315                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/29171/hrg-svelte-table.jpg'"
316                    style=" ">
317
318                </div>
319
320            
321
322        </div>
323
324        <div class="brick__caption">
325                        <div class="brick__caption-upper">
326                <a  href="https://madewithsvelte.com/hurtigrutens-svelte-table" class="brick__title">
327                    Hurtigruten&#039;s Svelte Table
328                </a>
329                <span class="brick__tagline">
330                Datatable Component
331            </span>
332            </div>
333            <div class="brick__caption-lower">
334                <div class="pull-left">
335                    
336                                            <a href="/ui-component">#UI Component</a>
337                                                                    <a href="/datatable">#Datatable</a>
338                                                            </div>
339                <div class="pull-right">
340            <div class="brick__views">
341            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
342    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
343    <title>icon-eye-dark</title>
344    <desc>Created with Sketch.</desc>
345    <defs></defs>
346    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
347        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
348            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
349                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
350                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
351            </g>
352        </g>
353    </g>
354</svg>            <span class="u__va--middle">2.534</span>
355        </div>
356        </div>
357            </div>
358        </div>
359
360            </div>
361</div>
362                                <div  class="brick ">
363    <div class="brick__inner">
364        <div data-detail="https://madewithsvelte.com/lottie-player" class="brick__image">
365
366
367                            <video
368                        muted
369                        autoplay
370                        playsinline
371                        loop
372                        class="brick__video">
373                    <source src="https://madewithvuejs.com/storage/31528/svelte-lottie-k.mp4" type="video/mp4">
374                </video>
375            
376
377        </div>
378
379        <div class="brick__caption">
380                        <div class="brick__caption-upper">
381                <a  href="https://madewithsvelte.com/lottie-player" class="brick__title">
382                    Lottie Player
383                </a>
384                <span class="brick__tagline">
385                Lottie Player Component
386            </span>
387            </div>
388            <div class="brick__caption-lower">
389                <div class="pull-left">
390                    
391                                            <a href="/ui-component">#UI Component</a>
392                                                            </div>
393                <div class="pull-right">
394            <div class="brick__views">
395            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
396    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
397    <title>icon-eye-dark</title>
398    <desc>Created with Sketch.</desc>
399    <defs></defs>
400    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
401        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
402            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
403                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.5
4035933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
404                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
405            </g>
406        </g>
407    </g>
408</svg>            <span class="u__va--middle">3.852</span>
409        </div>
410        </div>
411            </div>
412        </div>
413
414            </div>
415</div>
416                                <div class="brick brick--sponsored">
417    <div class="brick__inner">
418        <div data-detail="https://madewithsvelte.com/mwbrick-goto/wjmormcezanw8s6h-amelp5uzzwlco3i8-adpjgyrvbii0iggh-5wtbpvazlh8mjdda" class="brick__image">
419
420
421            <div class="brick__image-inner "
422                 id="js-image-272"
423                 style="background-image: url('https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/29605/sentry-svelte.jpg');">
424
425            </div>
426
427
428        </div>
429
430        <div class="brick__caption">
431            <div class="brick__caption-upper">
432                <a target="_blank" href="https://madewithsvelte.com/mwbrick-goto/wjmormcezanw8s6h-amelp5uzzwlco3i8-adpjgyrvbii0iggh-5wtbpvazlh8mjdda" class="brick__title">
433                    Sentry for Svelte
434                </a>
435                <span class="brick__tagline">
436                Svelte Error &amp; Performance Monitoring
437            </span>
438            </div>
439            <div class="brick__caption-lower">
440                <div class="pull-left">
441                                            🧡 Sponsored by Friends
442                                    </div>
443                <div class="pull-right">
444                    <i class="fas fa-external-link-square-alt"></i>
445                </div>
446            </div>
447        </div>
448
449    </div>
450</div>
451                                <div class="carbon-ad--index brick-ad js-same-height">
452                <div class="brick-ad__inner-center">
453                    <div class="brick-ad__inner">
454                        <mw-brick         vertical="true"  type="carbon" :ads='[{"id":354,"mandant":"madewithsvelte","title":"Sentry Carbon - Performance","tagline":"See what\u0027s slow, faster: Monitor the performance of your Svelte apps!","text_color":null,"button_text":"Try Sentry for Svelte","button_color":null,"button_background_color":null,"background_color":null,"background_color_snippet":null,"label_ad":null,"link":"https:\/\/sentry.io\/for\/svelte\/?ref=madewithsvelte.com","detail_styling":"normal","show_topbanner":0,"show_topbanner_blog":0,"show_topbanner_detail":0,"show_blog":0,"show_sidebars":0,"show_detail":0,"feature_category":0,"feature_category_firstpage":0,"feature_startpage_slider":0,"feature_startpage":0,"show_sponsor_logo":0,"show_sponsor_brick":0,"show_carbon":1,"show_bottombanner":0,"show_ad_brick":0,"weight":null,"active":1,"from":null,"to":null,"created_at":"2024-02-22T08:07:38.000000Z","updated_at":"2024-02-22T08:07:38.000000Z","campaign_id":125,"goto_url":"https:\/\/madewithsvelte.com\/mwbrick-goto\/97sc3wr2bx01r4v9-ua5r8czlkzdhz2qf-ybkqyhjualqbw1ko-skoj0vn92xhrygup","public_url":"https:\/\/madewithsvelte.com\/mwbrick-examples\/97sc3wr2bx01r4v9-ua5r8czlkzdhz2qf-ybkqyhjualqbw1ko-skoj0vn92xhrygup","product":"https:\/\/madewithnetworkfra.fra1.digitaloceanspaces.com\/spatie-space-production\/30809\/sentry-carbon-performance.jpg","brand":"","css_top_banner":".mwblock__background--top-banner {\nbackground: ;\n\n}\n","impression_url":"https:\/\/madewithsvelte.com\/mwbrick-impression\/97sc3wr2bx01r4v9-ua5r8czlkzdhz2qf-ybkqyhjualqbw1ko-skoj0vn92xhrygup","posts":[]},{"id":505,"mandant":"madewithsvelte","title":"Carbon - Syntax 971","tagline":"Stackoverflow and Firefox are Dead? - Syntax.fm podcast #971","text_color":null,"button_text":"Listen now","button_color":null,"button_background_color":null,"background_color":null,"background_color_snippet":null,"label_ad":null,"link":"https:\/\/syntax.fm\/show\/971\/","detail_styling":"normal","show_to
454pbanner":0,"show_topbanner_blog":0,"show_topbanner_detail":0,"show_blog":0,"show_sidebars":0,"show_detail":0,"feature_category":0,"feature_category_firstpage":0,"feature_startpage_slider":0,"feature_startpage":0,"show_sponsor_logo":0,"show_sponsor_brick":0,"show_carbon":1,"show_bottombanner":0,"show_ad_brick":0,"weight":null,"active":1,"from":null,"to":null,"created_at":"2026-02-23T09:51:59.000000Z","updated_at":"2026-02-23T09:51:59.000000Z","campaign_id":125,"goto_url":"https:\/\/madewithsvelte.com\/mwbrick-goto\/etjayrbwoakkrhcq-kao6jnum5qjqkjqb-pj036fg2840lugti-xotjje876awqea5l","public_url":"https:\/\/madewithsvelte.com\/mwbrick-examples\/etjayrbwoakkrhcq-kao6jnum5qjqkjqb-pj036fg2840lugti-xotjje876awqea5l","product":"https:\/\/madewithnetworkfra.fra1.digitaloceanspaces.com\/spatie-space-production\/33738\/sentry-carbon-syntax-2-%281%29.jpg","brand":"","css_top_banner":".mwblock__background--top-banner {\nbackground: ;\n\n}\n","impression_url":"https:\/\/madewithsvelte.com\/mwbrick-impression\/etjayrbwoakkrhcq-kao6jnum5qjqkjqb-pj036fg2840lugti-xotjje876awqea5l","posts":[]},{"id":506,"mandant":"madewithsvelte","title":"Carbon - Syntax 955","tagline":"SvelteKit has solved data loading - Syntax.fm podcast #955","text_color":null,"button_text":"Listen now","button_color":null,"button_background_color":null,"background_color":null,"background_color_snippet":null,"label_ad":null,"link":"https:\/\/syntax.fm\/show\/955\/","detail_styling":"normal","show_topbanner":0,"show_topbanner_blog":0,"show_topbanner_detail":0,"show_blog":0,"show_sidebars":0,"show_detail":0,"feature_category":0,"feature_category_firstpage":0,"feature_startpage_slider":0,"feature_startpage":0,"show_sponsor_logo":0,"show_sponsor_brick":0,"show_carbon":1,"show_bottombanner":0,"show_ad_brick":0,"weight":null,"active":1,"from":null,"to":null,"created_at":"2026-02-23T09:52:51.000000Z","updated_at":"2026-02-23T09:52:51.000000Z","campaign_id":125,"goto_url":"https:\/\/madewithsvelte.com\/mwbrick-goto\/twqdx2gdear1m8zq-udelclikvqylec6w-uzuuilfacekjnhvf-hohltunf2xkqr2vs","public_url":"https:\/\/madewithsvelte.com\/mwbrick-examples\/twqdx2gdear1m8zq-udelclikvqylec6w-uzuuilfacekjnhvf-hohltunf2xkqr2vs","product":"https:\/\/madewithnetworkfra.fra1.digitaloceanspaces.com\/spatie-space-production\/33739\/sentry-carbon-syntax-%281%29.jpg","brand":"","css_top_banner":".mwblock__background--top-banner {\nbackground: ;\n\n}\n","impression_url":"https:\/\/madewithsvelte.com\/mwbrick-impression\/twqdx2gdear1m8zq-udelclikvqylec6w-uzuuilfacekjnhvf-hohltunf2xkqr2vs","posts":[]},{"id":507,"mandant":"madewithsvelte","title":"Carbon - Frontend Debugging Workshop","tagline":"Debug Frontend Issues Faster: Free Workshop Hands-On with Vite, React, Neon and Drizzle","text_color":null,"button_text":"Learn more","button_color":null,"button_background_color":null,"background_color":null,"background_color_snippet":null,"label_ad":null,"link":"https:\/\/sentry.io\/resources\/fixing-your-frontend-workshop\/?utm_source=madewithsvelte\u0026utm_medium=paid-community\u0026utm_campaign=frontend-fy27q1-frontend\u0026utm_content=static-ad-workshop-learnmore","detail_styling":"normal","show_topbanner":0,"show_topbanner_blog":0,"show_topbanner_detail":0,"show_blog":0,"show_sidebars":0,"show_detail":0,"feature_category":0,"feature_category_firstpage":0,"feature_startpage_slider":0,"feature_startpage":0,"show_sponsor_logo":0,"show_sponsor_brick":0,"show_carbon":1,"show_bottombanner":0,"show_ad_brick":0,"weight":null,"active":1,"from":null,"to":null,"created_at":"2026-02-23T09:54:09.000000Z","updated_at":"2026-02-23T09:54:09.000000Z","campaign_id":125,"goto_url":"https:\/\/madewithsvelte.com\/mwbrick-goto\/k5lwltsz0q7jdyap-knbogdazkehkllut-gutmsgqlvenybub6-vc3hqysjjifj0qm8","public_url":"https:\/\/madewithsvelte.com\/mwbrick-examples\/k5lwltsz0q7jdyap-knbogdazkehkllut-gutmsgqlvenybub6-vc3hqysjjifj0qm8","product":"https:\/\/madewithnetworkfra.fra1.digitaloceanspaces.com\/spatie-space-production\/33740\/sentry-carbon-resource-%281%29.jpg","brand":"","css_top_banner":".mwblock__background--top-banner {\nbackground: ;\n\n}\n","impression_url":"https:\/\/madewithsvelte.com\/mwbrick-impression\/k5lwltsz0q7jdyap-knbogdazkehkllut-gutmsgqlvenybub6-vc3hqysjjifj0qm8","posts":[]},{"id":508,"mandant":"madewithsvelte","title":"Carbon - Seer v2","tagline":"Ship fixes faster with AI-powered debugging and code reviews that open automatic PRs.","text_color":null,"button_text":"Explore Sentry\u0027s Seer for Svelte","button_color":null,"button_background_color":null,"background_color":null,"background_color_snippet":null,"label_ad":null,"link":"https:\/\/sentry.io\/product\/seer\/?utm_source=madewithsvelte\u0026utm_medium=paid-community\u0026utm_campaign=seer-fy27q1-seerlaunch\u0026utm_content=static-ad-product-learnmore","detail_styling":"normal","show_to
454pbanner":0,"show_topbanner_blog":0,"show_topbanner_detail":0,"show_blog":0,"show_sidebars":0,"show_detail":0,"feature_category":0,"feature_category_firstpage":0,"feature_startpage_slider":0,"feature_startpage":0,"show_sponsor_logo":0,"show_sponsor_brick":0,"show_carbon":1,"show_bottombanner":0,"show_ad_brick":0,"weight":null,"active":1,"from":null,"to":null,"created_at":"2026-02-23T09:55:06.000000Z","updated_at":"2026-02-23T09:55:06.000000Z","campaign_id":125,"goto_url":"https:\/\/madewithsvelte.com\/mwbrick-goto\/g2ulhldrbdovmnaw-5216bgjncwarrxaw-eek7hznd8htg5idn-stveoznwnlpb7xol","public_url":"https:\/\/madewithsvelte.com\/mwbrick-examples\/g2ulhldrbdovmnaw-5216bgjncwarrxaw-eek7hznd8htg5idn-stveoznwnlpb7xol","product":"https:\/\/madewithnetworkfra.fra1.digitaloceanspaces.com\/spatie-space-production\/33741\/sentry-carbon-seer-%281%29.jpg","brand":"","css_top_banner":".mwblock__background--top-banner {\nbackground: ;\n\n}\n","impression_url":"https:\/\/madewithsvelte.com\/mwbrick-impression\/g2ulhldrbdovmnaw-5216bgjncwarrxaw-eek7hznd8htg5idn-stveoznwnlpb7xol","posts":[]},{"id":509,"mandant":"madewithsvelte","title":"Carbon - Error Monitoring v2","tagline":"Catch Svelte issues early using automated alerts and connected logs for faster fixes.","text_color":null,"button_text":"Try Sentry for Svelte","button_color":null,"button_background_color":null,"background_color":null,"background_color_snippet":null,"label_ad":null,"link":"https:\/\/sentry.io\/for\/svelte\/?ref=madewithsvelte.com","detail_styling":"normal","show_topbanner":0,"show_topbanner_blog":0,"show_topbanner_detail":0,"show_blog":0,"show_sidebars":0,"show_detail":0,"feature_category":0,"feature_category_firstpage":0,"feature_startpage_slider":0,"feature_startpage":0,"show_sponsor_logo":0,"show_sponsor_brick":0,"show_carbon":1,"show_bottombanner":0,"show_ad_brick":0,"weight":null,"active":1,"from":null,"to":null,"created_at":"2026-02-23T10:41:16.000000Z","updated_at":"2026-02-23T10:41:29.000000Z","campaign_id":125,"goto_url":"https:\/\/madewithsvelte.com\/mwbrick-goto\/mq87n8omh9g522fv-tmnahvcv6dgqfd7w-hux1nxip5bqqxzhd-v7l2mmwpxkyuouwr","public_url":"https:\/\/madewithsvelte.com\/mwbrick-examples\/mq87n8omh9g522fv-tmnahvcv6dgqfd7w-hux1nxip5bqqxzhd-v7l2mmwpxkyuouwr","product":"https:\/\/madewithnetworkfra.fra1.digitaloceanspaces.com\/spatie-space-production\/33742\/sentry-carbon-errormonitoring-%281%29.jpg","brand":"","css_top_banner":".mwblock__background--top-banner {\nbackground: ;\n\n}\n","impression_url":"https:\/\/madewithsvelte.com\/mwbrick-impression\/mq87n8omh9g522fv-tmnahvcv6dgqfd7w-hux1nxip5bqqxzhd-v7l2mmwpxkyuouwr","posts":[]},{"id":510,"mandant":"madewithsvelte","title":"Sentry Carbon - Session Replay v2","tagline":"Understand every user issue faster by seeing exactly what they see with session replay.","text_color":null,"button_text":"Try Sentry for Svelte","button_color":null,"button_background_color":null,"background_color":null,"background_color_snippet":null,"label_ad":null,"link":"https:\/\/sentry.io\/product\/session-replay\/?utm_source=madewithsvelte\u0026utm_medium=paid-community\u0026utm_campaign=replay-fy27q1-sessionreplaygeneral\u0026utm_content=static-ad-smallcarbonslot-trysentry","detail_styling":"normal","show_topbanner":0,"show_topbanner_blog":0,"show_topbanner_detail":0,"show_blog":0,"show_sidebars":0,"show_detail":0,"feature_category":0,"feature_category_firstpage":0,"feature_startpage_slider":0,"feature_startpage":0,"show_sponsor_logo":0,"show_sponsor_brick":0,"show_carbon":1,"show_bottombanner":0,"show_ad_brick":0,"weight":null,"active":1,"from":null,"to":null,"created_at":"2026-02-23T10:42:36.000000Z","updated_at":"2026-02-23T10:42:58.000000Z","campaign_id":125,"goto_url":"https:\/\/madewithsvelte.com\/mwbrick-goto\/8nisemqmyp3cfayx-gesld1w5hf0mkf9j-q8c06a4bjyycrd2o-ctwelv9mgz7mnidu","public_url":"https:\/\/madewithsvelte.com\/mwbrick-examples\/8nisemqmyp3cfayx-gesld1w5hf0mkf9j-q8c06a4bjyycrd2o-ctwelv9mgz7mnidu","product":"https:\/\/madewithnetworkfra.fra1.digitaloceanspaces.com\/spatie-space-production\/33743\/sentry-carbon-sessionreplay-%282%29.jpg","brand":"","css_top_banner":".mwblock__background--top-banner {\nbackground: ;\n\n}\n","impression_url":"https:\/\/madewithsvelte.com\/mwbrick-impression\/8nisemqmyp3cfayx-gesld1w5hf0mkf9j-q8c06a4bjyycrd2o-ctwelv9mgz7mnidu","posts":[]},{"id":511,"mandant":"madewithsvelte","title":"Carbon - Seer General v2","tagline":"Debug faster at every stage of development with Seer, Sentry\u0027s AI agent","text_color":null,"button_text":"Try Sentry for free","button_color":null,"button_background_color":null,"background_color":null,"background_color_snippet":null,"label_ad":null,"link":"https:\/\/sentry.io\/product\/seer\/?utm_source=madewithgeneral\u0026utm_medium=paid-community\u0026utm_campaign=seer-fy27q1-seerlaunch\u0026utm_content=static-ad-product-trysentry","detail_styling":"normal","show_to
454pbanner":0,"show_topbanner_blog":0,"show_topbanner_detail":0,"show_blog":0,"show_sidebars":0,"show_detail":0,"feature_category":0,"feature_category_firstpage":0,"feature_startpage_slider":0,"feature_startpage":0,"show_sponsor_logo":0,"show_sponsor_brick":0,"show_carbon":1,"show_bottombanner":0,"show_ad_brick":0,"weight":null,"active":1,"from":null,"to":null,"created_at":"2026-02-23T10:45:55.000000Z","updated_at":"2026-02-23T10:45:55.000000Z","campaign_id":125,"goto_url":"https:\/\/madewithsvelte.com\/mwbrick-goto\/u4w8plny1oqrtnyy-2bnfqnxhgajc8yl6-cuvturg47mvgodsc-t3a11j4bdljhxjel","public_url":"https:\/\/madewithsvelte.com\/mwbrick-examples\/u4w8plny1oqrtnyy-2bnfqnxhgajc8yl6-cuvturg47mvgodsc-t3a11j4bdljhxjel","product":"https:\/\/madewithnetworkfra.fra1.digitaloceanspaces.com\/spatie-space-production\/33744\/sentry-carbon-seer-%281%29.jpg","brand":"","css_top_banner":".mwblock__background--top-banner {\nbackground: ;\n\n}\n","impression_url":"https:\/\/madewithsvelte.com\/mwbrick-impression\/u4w8plny1oqrtnyy-2bnfqnxhgajc8yl6-cuvturg47mvgodsc-t3a11j4bdljhxjel","posts":[]},{"id":512,"mandant":"madewithsvelte","title":"Carbon - AI Monitoring v2","tagline":"Get alerted when your AI agents fail in production","text_color":null,"button_text":"Try Sentry for AI","button_color":null,"button_background_color":null,"background_color":null,"background_color_snippet":null,"label_ad":null,"link":"https:\/\/sentry.io\/lp\/ai-monitoring\/?utm_source=madewithgeneral\u0026utm_medium=paid-community\u0026utm_campaign=ai-fy27q1-agentmonitoring\u0026utm_content=static-ad-product-learnmore","detail_styling":"normal","show_topbanner":0,"show_topbanner_blog":0,"show_topbanner_detail":0,"show_blog":0,"show_sidebars":0,"show_detail":0,"feature_category":0,"feature_category_firstpage":0,"feature_startpage_slider":0,"feature_startpage":0,"show_sponsor_logo":0,"show_sponsor_brick":0,"show_carbon":1,"show_bottombanner":0,"show_ad_brick":0,"weight":null,"active":1,"from":null,"to":null,"created_at":"2026-02-23T10:46:50.000000Z","updated_at":"2026-02-23T10:46:59.000000Z","campaign_id":125,"goto_url":"https:\/\/madewithsvelte.com\/mwbrick-goto\/wukf7yjqg0q8qgwf-cyqicm0ihh4r4610-juefoyaxoy4rczzu-reaax4fngpdcmf3g","public_url":"https:\/\/madewithsvelte.com\/mwbrick-examples\/wukf7yjqg0q8qgwf-cyqicm0ihh4r4610-juefoyaxoy4rczzu-reaax4fngpdcmf3g","product":"https:\/\/madewithnetworkfra.fra1.digitaloceanspaces.com\/spatie-space-production\/33745\/sentry-carbon-ai-observability-%281%29.jpg","brand":"","css_top_banner":".mwblock__background--top-banner {\nbackground: ;\n\n}\n","impression_url":"https:\/\/madewithsvelte.com\/mwbrick-impression\/wukf7yjqg0q8qgwf-cyqicm0ihh4r4610-juefoyaxoy4rczzu-reaax4fngpdcmf3g","posts":[]}]'></mw-brick>
455
456                    </div>
457                </div>
458            </div>
459                                <div  class="brick ">
460    <div class="brick__inner">
461        <div data-detail="https://madewithsvelte.com/svelte-highlight" class="brick__image">
462
463
464            
465                <div class="brick__image-inner "
466                     id="js-image-2983"
467                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/27713/svelte-highlight.jpg'"
468                    style=" ">
469
470                </div>
471
472            
473
474        </div>
475
476        <div class="brick__caption">
477                        <div class="brick__caption-upper">
478                <a  href="https://madewithsvelte.com/svelte-highlight" class="brick__title">
479                    Svelte Highlight
480                </a>
481                <span class="brick__tagline">
482                Syntax Highlighting
483            </span>
484            </div>
485            <div class="brick__caption-lower">
486                <div class="pull-left">
487                    
488                                            <a href="/ui-component">#UI Component</a>
489                                                            </div>
490                <div class="pull-right">
491            <div class="brick__views">
492            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
493    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
494    <title>icon-eye-dark</title>
495    <desc>Created with Sketch.</desc>
496    <defs></defs>
497    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
498        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
499            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
500                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.5
5005933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
501                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
502            </g>
503        </g>
504    </g>
505</svg>            <span class="u__va--middle">3.330</span>
506        </div>
507        </div>
508            </div>
509        </div>
510
511            </div>
512</div>
513                                <div  class="brick ">
514    <div class="brick__inner">
515        <div data-detail="https://madewithsvelte.com/shadcn-svelte-extras" class="brick__image">
516
517
518            
519                <div class="brick__image-inner "
520                     id="js-image-5705"
521                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/32912/shadcn-svelte-extras.jpg'"
522                    style=" ">
523
524                </div>
525
526            
527
528        </div>
529
530        <div class="brick__caption">
531                        <div class="brick__caption-upper">
532                <a  href="https://madewithsvelte.com/shadcn-svelte-extras" class="brick__title">
533                    shadcn-svelte-extras
534                </a>
535                <span class="brick__tagline">
536                Additional Shadcn UI Components
537            </span>
538            </div>
539            <div class="brick__caption-lower">
540                <div class="pull-left">
541                    
542                                            <a href="/ui-component">#UI Component</a>
543                                                                    <a href="/ui-library">#UI library</a>
544                                                            </div>
545                <div class="pull-right">
546            <div class="brick__views">
547            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
548    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
549    <title>icon-eye-dark</title>
550    <desc>Created with Sketch.</desc>
551    <defs></defs>
552    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
553        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
554            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
555                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
556                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 
55611.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
557            </g>
558        </g>
559    </g>
560</svg>            <span class="u__va--middle">1.942</span>
561        </div>
562        </div>
563            </div>
564        </div>
565
566            </div>
567</div>
568                                <div  class="brick ">
569    <div class="brick__inner">
570        <div data-detail="https://madewithsvelte.com/svar-gantt-for-svelte" class="brick__image">
571
572
573            
574                <div class="brick__image-inner "
575                     id="js-image-5285"
576                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/32421/svar-gantt-svelte-2.jpg'"
577                    style=" ">
578
579                </div>
580
581            
582
583        </div>
584
585        <div class="brick__caption">
586                        <div class="brick__caption-upper">
587                <a  href="https://madewithsvelte.com/svar-gantt-for-svelte" class="brick__title">
588                    SVAR Gantt for Svelte
589                </a>
590                <span class="brick__tagline">
591                Gantt Chart Component
592            </span>
593            </div>
594            <div class="brick__caption-lower">
595                <div class="pull-left">
596                    
597                                            <a href="/ui-component">#UI Component</a>
598                                                                    <a href="/charts">#Charts</a>
599                                                            </div>
600                <div class="pull-right">
601            <div class="brick__views">
602            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
603    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
604    <title>icon-eye-dark</title>
605    <desc>Created with Sketch.</desc>
606    <defs></defs>
607    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
608        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
609            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
610                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
611                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
612            </g>
613        </g>
614    </g>
615</svg>
615            <span class="u__va--middle">1.007</span>
616        </div>
617        </div>
618            </div>
619        </div>
620
621            </div>
622</div>
623                                <div  class="brick ">
624    <div class="brick__inner">
625        <div data-detail="https://madewithsvelte.com/topform" class="brick__image">
626
627
628            
629                <div class="brick__image-inner "
630                     id="js-image-4321"
631                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/29952/topform.jpg'"
632                    style=" ">
633
634                </div>
635
636            
637
638        </div>
639
640        <div class="brick__caption">
641                        <div class="brick__caption-upper">
642                <a  href="https://madewithsvelte.com/topform" class="brick__title">
643                    TOPFORM
644                </a>
645                <span class="brick__tagline">
646                SvelteKit Form Generator
647            </span>
648            </div>
649            <div class="brick__caption-lower">
650                <div class="pull-left">
651                    
652                                            <a href="/ui-component">#UI Component</a>
653                                                                    <a href="/form">#Form</a>
654                                                            </div>
655                <div class="pull-right">
656            <div class="brick__views">
657            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
658    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
659    <title>icon-eye-dark</title>
660    <desc>Created with Sketch.</desc>
661    <defs></defs>
662    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
663        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
664            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
665                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
666                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
667            </g>
668        </g>
669    </g>
670</svg>            <span class="u__va--middle">1.845</span>
671        </div>
672        </div>
673            </div>
674        </div>
675
676            </div>
677</div>
678                                <div  class="brick ">
679    <div class="brick__inner">
680        <div data-detail="https://madewithsvelte.com/svar-datagrid-for-svelte" class="brick__image">
681
682
683            
684                <div class="brick__image-inner "
685                     id="js-image-5207"
686                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/32425/svar-grid-svelte.jpg'"
687                    style=" ">
688
689                </div>
690
691            
692
693        </div>
694
695        <div class="brick__caption">
696                        <div class="brick__caption-upper">
697                <a  href="https://madewithsvelte.com/svar-datagrid-for-svelte" class="brick__title">
698                    SVAR DataGrid for Svelte
699                </a>
700                <span class="brick__tagline">
701                Data Grid Component
702            </span>
703            </div>
704            <div class="brick__caption-lower">
705                <div class="pull-left">
706                    
707                                            <a href="/ui-component">#UI Component</a>
708                                                                    <a href="/datatable">#Datatable</a>
709                                                            </div>
710                <div class="pull-right">
711            <div class="brick__views">
712            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
713    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
714    <title>icon-eye-dark</title>
715    <desc>Created with Sketch.</desc>
716    <defs></defs>
717    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
718        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
719            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
720                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
721                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
722            </g>
723        </g>
724    </g>
725</svg>            <span class="u__va--middle">1.513</span>
726        </div>
727        </div>
728            </div>
729        </div>
730
731            </div>
732</div>
733                                <div  class="brick ">
734    <div class="brick__inner">
735        <div data-detail="https://madewithsvelte.com/select-kit" class="brick__image">
736
737
738            
739                <div class="brick__image-inner "
740                     id="js-image-5332"
741                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/32241/select-kit.jpg'"
742                    style=" ">
743
744                </div>
745
746            
747
748        </div>
749
750        <div class="brick__caption">
751                        <div class="brick__caption-upper">
752                <a  href="https://madewithsvelte.com/select-kit" class="brick__title">
753                    Select Kit
754                </a>
755                <span class="brick__tagline">
756                Combobox Components
757            </span>
758            </div>
759            <div class="brick__caption-lower">
760                <div class="pull-left">
761                    
762                                            <a href="/ui-component">#UI Component</a>
763                                                                    <a href="/form">#Form</a>
764                                                            </div>
765                <div class="pull-right">
766            <div class="brick__views">
767            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
768    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
769    <title>icon-eye-dark</title>
770    <desc>Created with Sketch.</desc>
771    <defs></defs>
772    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
773        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
774            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
775                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.5
7755933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
776                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
777            </g>
778        </g>
779    </g>
780</svg>            <span class="u__va--middle">703</span>
781        </div>
782        </div>
783            </div>
784        </div>
785
786            </div>
787</div>
788                                <div  class="brick ">
789    <div class="brick__inner">
790        <div data-detail="https://madewithsvelte.com/agnosticui-svelte" class="brick__image">
791
792
793            
794                <div class="brick__image-inner "
795                     id="js-image-3579"
796                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/28741/agnosticui-svelte.jpg'"
797                    style=" ">
798
799                </div>
800
801            
802
803        </div>
804
805        <div class="brick__caption">
806                        <div class="brick__caption-upper">
807                <a  href="https://madewithsvelte.com/agnosticui-svelte" class="brick__title">
808                    AgnosticUI Svelte
809                </a>
810                <span class="brick__tagline">
811                Library of UI Component Primitives
812            </span>
813            </div>
814            <div class="brick__caption-lower">
815                <div class="pull-left">
816                    
817                                            <a href="/ui-component">#UI Component</a>
818                                                                    <a href="/ui-library">#UI library</a>
819                                                            </div>
820                <div class="pull-right">
821            <div class="brick__views">
822            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
823    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
824    <title>icon-eye-dark</title>
825    <desc>Created with Sketch.</desc>
826    <defs></defs>
827    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
828        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
829            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
830                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
831                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 
83111.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
832            </g>
833        </g>
834    </g>
835</svg>            <span class="u__va--middle">8.852</span>
836        </div>
837        </div>
838            </div>
839        </div>
840
841            </div>
842</div>
843                                <div  class="brick ">
844    <div class="brick__inner">
845        <div data-detail="https://madewithsvelte.com/sveltekit-superforms" class="brick__image">
846
847
848            
849                <div class="brick__image-inner "
850                     id="js-image-4203"
851                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/29865/sveltekit-superforms-2.jpg'"
852                    style=" ">
853
854                </div>
855
856            
857
858        </div>
859
860        <div class="brick__caption">
861                        <div class="brick__caption-upper">
862                <a  href="https://madewithsvelte.com/sveltekit-superforms" class="brick__title">
863                    Superforms for SvelteKit
864                </a>
865                <span class="brick__tagline">
866                SvelteKit Form Library
867            </span>
868            </div>
869            <div class="brick__caption-lower">
870                <div class="pull-left">
871                    
872                                            <a href="/ui-component">#UI Component</a>
873                                                                    <a href="/utility">#Utility</a>
874                                                                    <a href="/form">#Form</a>
875                                                            </div>
876                <div class="pull-right">
877            <div class="brick__views">
878            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
879    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
880    <title>icon-eye-dark</title>
881    <desc>Created with Sketch.</desc>
882    <defs></defs>
883    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
884        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
885            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
886                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
887                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
888            </g>
889        </g>
890    </g>
891</svg>
891            <span class="u__va--middle">2.905</span>
892        </div>
893        </div>
894            </div>
895        </div>
896
897            </div>
898</div>
899                                <div  class="brick ">
900    <div class="brick__inner">
901        <div data-detail="https://madewithsvelte.com/svelte-easy-crop" class="brick__image">
902
903
904                            <video
905                        muted
906                        autoplay
907                        playsinline
908                        loop
909                        class="brick__video">
910                    <source src="https://madewithvuejs.com/storage/32546/svelte-easy-crop-k.mp4" type="video/mp4">
911                </video>
912            
913
914        </div>
915
916        <div class="brick__caption">
917                        <div class="brick__caption-upper">
918                <a  href="https://madewithsvelte.com/svelte-easy-crop" class="brick__title">
919                    Svelte Easy Crop
920                </a>
921                <span class="brick__tagline">
922                Image Cropping Component
923            </span>
924            </div>
925            <div class="brick__caption-lower">
926                <div class="pull-left">
927                    
928                                            <a href="/ui-component">#UI Component</a>
929                                                            </div>
930                <div class="pull-right">
931            <div class="brick__views">
932            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
933    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
934    <title>icon-eye-dark</title>
935    <desc>Created with Sketch.</desc>
936    <defs></defs>
937    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
938        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
939            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
940                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
941                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
942            </g>
943        </g>
944    </g>
945</svg>            <span class="u__va--middle">4.574</span>
946        </div>
947        </div>
948            </div>
949        </div>
950
951            </div>
952</div>
953                                <div  class="brick ">
954    <div class="brick__inner">
955        <div data-detail="https://madewithsvelte.com/svelte-typeform-embed" class="brick__image">
956
957
958            
959                <div class="brick__image-inner "
960                     id="js-image-2693"
961                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/21277/svelte-typeform-embed.jpg'"
962                    style=" ">
963
964                </div>
965
966            
967
968        </div>
969
970        <div class="brick__caption">
971                        <div class="brick__caption-upper">
972                <a  href="https://madewithsvelte.com/svelte-typeform-embed" class="brick__title">
973                    Svelte Typeform Embed
974                </a>
975                <span class="brick__tagline">
976                Wrapper for Typeform Embeds
977            </span>
978            </div>
979            <div class="brick__caption-lower">
980                <div class="pull-left">
981                    
982                                            <a href="/ui-component">#UI Component</a>
983                                                            </div>
984                <div class="pull-right">
985            <div class="brick__views">
986            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
987    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
988    <title>icon-eye-dark</title>
989    <desc>Created with Sketch.</desc>
990    <defs></defs>
991    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
992        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
993            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
994                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
995                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
996            </g>
997        </g>
998    </g>
999</svg>            <span class="u__va--middle">1.744</span>
1000        </div>
1001        </div>
1002            </div>
1003        </div>
1004
1005            </div>
1006</div>
1007                                <div  class="brick ">
1008    <div class="brick__inner">
1009        <div data-detail="https://madewithsvelte.com/svelte-dodge" class="brick__image">
1010
1011
1012                            <video
1013                        muted
1014                        autoplay
1015                        playsinline
1016                        loop
1017                        class="brick__video">
1018                    <source src="https://madewithvuejs.com/storage/31926/svelte-dodge-k.mp4" type="video/mp4">
1019                </video>
1020            
1021
1022        </div>
1023
1024        <div class="brick__caption">
1025                        <div class="brick__caption-upper">
1026                <a  href="https://madewithsvelte.com/svelte-dodge" class="brick__title">
1027                    svelte-dodge
1028                </a>
1029                <span class="brick__tagline">
1030                Make Components dodge the Pointer
1031            </span>
1032            </div>
1033            <div class="brick__caption-lower">
1034                <div class="pull-left">
1035                    
1036                                            <a href="/ui-component">#UI Component</a>
1037                                                            </div>
1038                <div class="pull-right">
1039            <div class="brick__views">
1040            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1041    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
1042    <title>icon-eye-dark</title>
1043    <desc>Created with Sketch.</desc>
1044    <defs></defs>
1045    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1046        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
1047            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
1048                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.5
10485933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
1049                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
1050            </g>
1051        </g>
1052    </g>
1053</svg>            <span class="u__va--middle">543</span>
1054        </div>
1055        </div>
1056            </div>
1057        </div>
1058
1059            </div>
1060</div>
1061                                <div  class="brick ">
1062    <div class="brick__inner">
1063        <div data-detail="https://madewithsvelte.com/svelte-transcription-player" class="brick__image">
1064
1065
1066            
1067                <div class="brick__image-inner "
1068                     id="js-image-2616"
1069                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/19079/svelte-transcription-player.jpg'"
1070                    style=" ">
1071
1072                </div>
1073
1074            
1075
1076        </div>
1077
1078        <div class="brick__caption">
1079                        <div class="brick__caption-upper">
1080                <a  href="https://madewithsvelte.com/svelte-transcription-player" class="brick__title">
1081                    Svelte Transcription Player
1082                </a>
1083                <span class="brick__tagline">
1084                Audio &amp; Transcription Player Component
1085            </span>
1086            </div>
1087            <div class="brick__caption-lower">
1088                <div class="pull-left">
1089                    
1090                                            <a href="/ui-component">#UI Component</a>
1091                                                            </div>
1092                <div class="pull-right">
1093            <div class="brick__views">
1094            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1095    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
1096    <title>icon-eye-dark</title>
1097    <desc>Created with Sketch.</desc>
1098    <defs></defs>
1099    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1100        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
1101            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
1102                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
1103                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 
110311.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
1104            </g>
1105        </g>
1106    </g>
1107</svg>            <span class="u__va--middle">2.711</span>
1108        </div>
1109        </div>
1110            </div>
1111        </div>
1112
1113            </div>
1114</div>
1115                                <div  class="brick ">
1116    <div class="brick__inner">
1117        <div data-detail="https://madewithsvelte.com/svelte-progressbar" class="brick__image">
1118
1119
1120            
1121                <div class="brick__image-inner "
1122                     id="js-image-2221"
1123                     v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/13025/svelte-progressbar.jpg'"
1124                    style=" ">
1125
1126                </div>
1127
1128            
1129
1130        </div>
1131
1132        <div class="brick__caption">
1133                        <div class="brick__caption-upper">
1134                <a  href="https://madewithsvelte.com/svelte-progressbar" class="brick__title">
1135                    Svelte Progressbar
1136                </a>
1137                <span class="brick__tagline">
1138                SVG Progressbar Component
1139            </span>
1140            </div>
1141            <div class="brick__caption-lower">
1142                <div class="pull-left">
1143                    
1144                                            <a href="/ui-component">#UI Component</a>
1145                                                            </div>
1146                <div class="pull-right">
1147            <div class="brick__views">
1148            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1149    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
1150    <title>icon-eye-dark</title>
1151    <desc>Created with Sketch.</desc>
1152    <defs></defs>
1153    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1154        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
1155            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
1156                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
1157                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
1158            </g>
1159        </g>
1160    </g>
1161</svg>            <span class="u__va--middle">10.378</span>
1162        </div>
1163        </div>
1164            </div>
1165        </div>
1166
1167            </div>
1168</div>
1169                                <div  class="brick ">
1170    <div class="brick__inner">
1171        <div data-detail="https://madewithsvelte.com/svelte-origami" class="brick__image">
1172
1173
1174                            <video
1175                        muted
1176                        autoplay
1177                        playsinline
1178                        loop
1179                        class="brick__video">
1180                    <source src="https://madewithvuejs.com/storage/32473/svelte-origami-k.mp4" type="video/mp4">
1181                </video>
1182            
1183
1184        </div>
1185
1186        <div class="brick__caption">
1187                        <div class="brick__caption-upper">
1188                <a  href="https://madewithsvelte.com/svelte-origami" class="brick__title">
1189                    Svelte Origami
1190                </a>
1191                <span class="brick__tagline">
1192                Collection of 3D Animations
1193            </span>
1194            </div>
1195            <div class="brick__caption-lower">
1196                <div class="pull-left">
1197                    
1198                                            <a href="/ui-component">#UI Component</a>
1199                                                            </div>
1200                <div class="pull-right">
1201            <div class="brick__views">
1202            <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1203    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
1204    <title>icon-eye-dark</title>
1205    <desc>Created with Sketch.</desc>
1206    <defs></defs>
1207    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1208        <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
1209            <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
1210                <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
1211                <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
1212            </g>
1213        </g>
1214    </g>
1215</svg>            <span class="u__va--middle">918</span>
1216        </div>
1217        </div>
1218            </div>
1219        </div>
1220
1221            </div>
1222</div>
1223            
1224</div>
1225
1226
1227            <div class="row">
1228            <div class="col-xs-12 text-center">
1229                <ul class="pagination">
1230        
1231                    <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
1232        
1233        
1234                    
1235            
1236            
1237                                                                        <li class="page-item active"><span class="page-link">1</span></li>
1238                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=2">2</a></li>
1239                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=3">3</a></li>
1240                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=4">4</a></li>
1241                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=5">5</a></li>
1242                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=6">6</a></li>
1243                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=7">7</a></li>
1244                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=8">8</a></li>
1245                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=9">9</a></li>
1246                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=10">10</a></li>
1247                                                                    
1248                            <li class="page-item disabled"><span class="page-link">...</span></li>
1249            
1250            
1251                                
1252            
1253            
1254                                                                        <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=16">16</a></li>
1255                                                                                <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=17">17</a></li>
1256                                                        
1257        
1258                    <li class="page-item"><a class="page-link" href="https://madewithsvelte.com/ui-component?page=2" rel="next">&raquo;</a></li>
1259            </ul>
1260
1261            </div>
1262        </div>
1263    
1264
1265        </div>
1266            </div>
1267    <div class="sponsors sponsors--white ">
1268        <div class="container">
1269
1270            
1271                            <div class="sponsors__title">
1272                                            COMMUNITY PARTNERS
1273                                    </div>
1274                <div class="sponsors__wrap">
1275                
1276                    
1277
1278                    <a class="sponsors__entry" rel="sponsored" target="_blank"
1279                       href="https://madewithsvelte.com/mwbrick-goto/hhmcpbaygxb9k0hd-dnw5hbwurjua2nwq-yghygjnewbpw094x-gdkpfcs43aj3ov8o">
1280                        <span class="sponsors__img">
1281                            <span><img loading="lazy" src="https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/33756/sentry-dark-%282%29.png" alt=""/></span>
1282                        </span>
1283                        <span class="sponsors__tagline">
1284                            Resolve Svelte performance bottlenecks and errors faster with actionable insights from Sentry
1285                            <span class="sponsors__tagline-link">Learn more</span>
1286                        </span>
1287                    </a>
1288                
1289                    
1290
1291                    <a class="sponsors__entry" rel="sponsored" target="_blank"
1292                       href="https://madewithsvelte.com/mwbrick-goto/yi7bt3lbmceggbru-atntevqxuyqv7wwv-um3pfry8qo0euydi-kwxdyzjcdbmvkidy">
1293                        <span class="sponsors__img">
1294                            <span><img loading="lazy" src="https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/29285/placid.png" alt=""/></span>
1295                        </span>
1296                        <span class="sponsors__tagline">
1297                            Placid is a creative automation API &amp; toolkit that helps you to generate consistent visuals at scale
1298                            <span class="sponsors__tagline-link">Learn more</span>
1299                        </span>
1300                    </a>
1301                                </div>
1302                    </div>
1303    </div>
1304
1305<footer class="footer">
1306    <div class="footer__inner">
1307        <div class="container">
1308            <div class="row">
1309                <div class="col-xs-12">
1310                    <h2 class="footer__title">
1311                        <svg class="svg-inline svg-inline
1312                        icon-sparkles-left" width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1313    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
1314    <title>icon-sparkles-left</title>
1315    <desc>Created with Sketch.</desc>
1316    <defs></defs>
1317    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1318        <g id="Detailseite-+-Creator" transform="translate(-236.000000, -2155.000000)" fill-rule="nonzero">
1319            <g id="Footer" transform="translate(0.000000, 2103.000000)">
1320                <g id="Title" transform="translate(236.000000, 52.000000)">
1321                    <g id="icon-sparkles-left">
1322                        <path d="M20.625,0 C20.625,15.8334375 12.0684375,30 0,30 C12.0684375,30 20.625,44.1665625 20.625,60 C20.625,44.1665625 29.1815625,30 41.25,30 C29.1815625,30 20.625,15.8334375 20.625,0 Z" id="Shape" fill="#FFE54D"></path>
1323                        <path d="M49.6875,0 C49.6875,7.9171875 45.4096875,15 39.375,15 C45.4096875,15 49.6875,22.08375 49.6875,30 C49.6875,22.08375 53.9653125,15 60,15 C53.9653125,15 49.6875,7.9171875 49.6875,0 Z" id="Shape" fill="#6ADBC6"></path>
1324                        <path d="M45,30 C45,37.9171875 40.7221875,45 34.6875,45 C40.7221875,45 45,52.08375 45,60 C45,52.08375 49.2778125,45 55.3125,45 C49.2778125,45 45,37.9171875 45,30 Z" id="Shape" fill="#FF73C0"></path>
1325                    </g>
1326                </g>
1327            </g>
1328        </g>
1329    </g>
1330</svg> A collection of projects made with Svelte
1331                        <svg class="svg-inline svg-inline icon-sparkles-right" width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1332    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
1333    <title>icon-sparkles-right</title>
1334    <desc>Created with Sketch.</desc>
1335    <defs></defs>
1336    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1337        <g id="Detailseite-+-Creator" transform="translate(-1007.000000, -2155.000000)" fill-rule="nonzero">
1338            <g id="Footer" transform="translate(0.000000, 2103.000000)">
1339                <g id="Title" transform="translate(236.000000, 52.000000)">
1340                    <g id="icon-sparkles-right" transform="translate(801.000000, 30.000000) scale(-1, 1) translate(-801.000000, -30.000000) translate(771.000000, 0.000000)">
1341                        <path d="M20.625,0 C20.625,15.8334375 12.0684375,30 0,30 C12.0684375,30 20.625,44.1665625 20.625,60 C20.625,44.1665625 29.1815625,30 41.25,30 C29.1815625,30 20.625,15.8334375 20.625,0 Z" id="Shape" fill="#FFE54D"></path>
1342                        <path d="M49.6875,0 C49.6875,7.9171875 45.4096875,15 39.375,15 C45.4096875,15 49.6875,22.08375 49.6875,30 C49.6875,22.08375 53.9653125,15 60,15 C53.9653125,15 49.6875,7.9171875 49.6875,0 Z" id="Shape" fill="#6ADBC6"></path>
1343                        <path d="M45,30 C45,37.9171875 40.7221875,45 34.6875,45 C40.7221875,45 45,52.08375 45,60 C45,52.08375 49.2778125,45 5
13435.3125,45 C49.2778125,45 45,37.9171875 45,30 Z" id="Shape" fill="#FF73C0"></path>
1344                    </g>
1345                </g>
1346            </g>
1347        </g>
1348    </g>
1349</svg>                    </h2>
1350                </div>
1351            </div>
1352            <div class="row" id="newsletter-cta">
1353                <div class="col-xs-12 footer__newsletter">
1354                    <!-- Begin MailChimp Signup Form -->
1355<div id="mc_embed_signup">
1356    <form action="https://madewithsvelte.com/newsletter/subscribe"
1357          method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form"
1358          class="validate js-newsletter" novalidate>
1359        <div id="mc_embed_signup_scroll" class="newsletter-wrap">
1360            <h3 class="footer__title--newsletter">Subscribe to our Newsletter</h3>
1361            <div class="newsletter-wrap-inner">
1362            <div class="form-group">
1363
1364                <div class="mc-field-group ">
1365                    <label for="mce-EMAIL">Email Address </label>
1366                    <input type="email" value="" placeholder="[email protected]" name="EMAIL" class="form-control required email"
1367                           id="mce-EMAIL">
1368                </div>
1369                <div id="mce-responses" class="clear">
1370                    <div class="response js-newsletter-error" id="mce-error-response" style="display:none"></div>
1371                    <div class="response js-newsletter-success" id="mce-success-response" style="display:none"></div>
1372                </div>
1373
1374                
1375                <input type="hidden" name="form_token" class="js-newsletter-token" value="">
1376
1377                <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
1378                <div style="position: absolute; left: -5000px;" aria-hidden="true">
1379                    
1380                    <input type="text" name="website" tabindex="-1" autocomplete="off" value="">
1381
1382                    
1383                                            <input type="text" name="b_c7c1912bd58997935a2b3a33b_2d29f8cba6" tabindex="-1" autocomplete="off" value="">
1384                                    </div>
1385            </div>
1386            <div class="clear"><input type="submit" value="Subscribe" name="subscribe"
1387                                      id="mc-embedded-subscribe" class="btn btn-primary"></div>
1388            </div>
1389        </div>
1390    </form>
1391
1392    
1393    <noscript>
1394        <form action="https://nifty.us6.list-manage.com/subscribe/post?u=c7c1912bd58997935a2b3a33b&amp;id=2d29f8cba6" method="post"
1395              id="mc-embedded-subscribe-form-noscript" name="mc-embedded-subscribe-form-noscript"
1396              class="validate" target="_blank" novalidate>
1397            <div class="newsletter-wrap">
1398                <div class="newsletter-wrap-inner">
1399                    <div class="form-group">
1400                        <div class="mc-field-group">
1401                            <label for="mce-EMAIL-noscript">Email Address </label>
1402                            <input type="email" value="" placeholder="[email protected]"
1403                                   name="EMAIL" class="form-control required email" id="mce-EMAIL-noscript">
1404                        </div>
1405                        <div style="position: absolute; left: -5000px;" aria-hidden="true">
1406                                                            <input type="text" name="b_c7c1912bd58997935a2b3a33b_2d29f8cba6" tabindex="-1" value="">
1407                                                    </div>
1408                    </div>
1409                    <div class="clear"><input type="submit" value="Subscribe" name="subscribe"
1410                                              class="btn btn-primary"></div>
1411                </div>
1412            </div>
1413        </form>
1414    </noscript>
1415</div>
1416
1417<!--End mc_embed_signup-->
1418                </div>
1419            </div>
1420
1421
1422                            <div class="mw-network">
1423                    <div class="container">
1424                        <div class="row">
1425                            <div class="col-xs-12">
1426                                <div class="mw-network__item"><a href="https://madewithvuejs.com" target="_blank"><img
1427                                            class="img-responsive"
1428                                            src="https://madewithsvelte.com/images/powered-madewithvuejs--white.png?1"
1429                                            alt="Image of MadeWithVueJs.com"/></a></div>
1430                                <div class="mw-network__item"><a href="https://madewithreactjs.com" target="_blank"><img
1431                                            class="img-responsive"
1432                                            src="https://madewithsvelte.com/images/powered-madewithreactjs--white.png?1"
1433                                            alt="Image of MadeWithReactJs.com"/></a></div>
1434                                <div class="mw-network__item"><a href="https://madewithlaravel.com" target="_blank"><img
1435                                            class="img-responsive"
1436                                            src="https://madewithsvelte.com/images/powered-madewithlaravel--white.png?1"
1437                                            alt="Image of MadeWithLaravel.com"/></a></div>
1438                                <div class="mw-network__item"><a href="https://madewithsvelte.com" target="_blank"><img
1439                                            class="img-responsive"
1440                                            src="https://madewithsvelte.com/images/powered-madewithsvelte--white.png?1"
1441                                            alt="Image of MadeWithSvelte.com"/></a></div>
1442                            </div>
1443
1444                        </div>
1445                    </div>
1446                </div>
1447            
1448
1449            <div class="row">
1450                <div class="col-xs-12">
1451                    <div class="footer__copy">
1452                        
1453                                                    <a href="/submit">Submit project</a>
1454                            &bull;
1455                        
1456                                                    <a rel="nofollow" href="https://madewithsvelte.com/update-request">Request project update</a>
1457                            &bull;
1458                        
1459                        <a href="/privacy">Privacy</a>
1460
1461                        &bull;
1462                        <a href="/imprint">Imprint</a>
1463                    </div>
1464                </div>
1465            </div>
1466        </div>
1467
1468    </div>
1469</footer>
1470            <categories v-model="showCategories" inline-template>
1471            <div v-bind:class="{'categories--is-active':show}">
1472                <div @click.stop.prevent="toggle(false)" class="categories__backdrop"></div>
1473                <div class="categories__wrap">
1474                    <button @click.stop.prevent="toggle(false)" id="js-categories__close"
1475                            class="categories__close">
1476                        <svg class="svg-inline icon-close" width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1477    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
1478    <title>icon-close-madewithvuejs</title>
1479    <desc>Created with Sketch.</desc>
1480    <defs></defs>
1481    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1482        <g id="Icons" transform="translate(-426.000000, -13.000000)" fill-rule="nonzero" fill="#40BB84">
1483            <path d="M426.39576,37.6042403 C426.924096,38.1319199 427.780003,38.1319199 428.308339,37.6042403 L438.516282,27.3962977 L448.724224,37.6042403 C449.257419,38.1010759 450.088308,38.0864158 450.603644,37.5710801 C451.11898,37.0557445 451.13364,36.224855 450.636804,35.6916607 L440.428861,25.4837181 L450.636804,15.2757756 C451.13364,14.7425813 451.11898,13.9116918 450.603644,13.3963561 C450.088308,12.8810204 449.257419,12.8663603 448.724224,13.3631959 L438.516282,23.5711385 L428.308339,13.3631959 C427.775145,12.8663603 426.944256,12.8810204 426.42892,13.3963561 C425.913584,13.9116918 425.898924,14.7425813 426.39576,15.2757756 L436.603702,25.4837181 L426.39576,35.6916607 C425.86808,36.2199974 425.86808,37.0759036 426.39576,37.6042403 Z" id="icon-close-madewithvuejs"></path>
1484        </g>
1485    </g>
1486</svg>                    </button>
1487                    <div class="categories__wrap-inner">
1488                        <ul class="categories__menu">
1489
1490                                                                                                <li style="display: none;"
1491                                        class="animated tag--302 categories__menu-item   ">
1492                                        <a class="categories__menu-link"
1493                                           href="/boilerplate">#Boilerplate </a>
1494                                    </li>
1495                                                                                                                                <li style="display: none;"
1496                                        class="animated tag--307 categories__menu-item   ">
1497                                        <a class="categories__menu-link"
1498                                           href="/book">#Book </a>
1499                                    </li>
1500                                                                                                                                <li style="display: none;"
1501                                        class="animated tag--303 categories__menu-item   ">
1502                                        <a class="categories__menu-link"
1503                                           href="/browser-extension">#Browser Extension </a>
1504                                    </li>
1505                                                                                                                                <li style="display: none;"
1506                                        class="animated tag--306 categories__menu-item   ">
1507                                        <a class="categories__menu-link"
1508                                           href="/dev-tool">#Dev tool </a>
1509                                    </li>
1510                                                                                                                                <li style="display: none;"
1511                                        class="animated tag--300 categories__menu-item   ">
1512                                        <a class="categories__menu-link"
1513                                           href="/form">#Form </a>
1514                                    </li>
1515                                                                                                                                <li style="display: none;"
1516                                        class="animated tag--295 categories__menu-item   ">
1517                                        <a class="categories__menu-link"
1518                                           href="/framework">#Framework </a>
1519                                    </li>
1520                                                                                                                                <li style="display: none;"
1521                                        class="animated tag--308 categories__menu-item   ">
1522                                        <a class="categories__menu-link"
1523                                           href="/game">#Game </a>
1524                                    </li>
1525                                                                                                                                <li style="display: none;"
1526                                        class="animated tag--299 categories__menu-item   ">
1527                                        <a class="categories__menu-link"
1528                                           href="/testing">#Testing </a>
1529                                    </li>
1530                                                                                                                                <li style="display: none;"
1531                                        class="animated tag--296 categories__menu-item   active  ">
1532                                        <a class="categories__menu-link"
1533                                           href="/ui-component">#UI Component </a>
1534                                    </li>
1535                                                                                                                                <li style="display: none;"
1536                                        class="animated tag--304 categories__menu-item   ">
1537                                        <a class="categories__menu-link"
1538                                           href="/ui-library">#UI library </a>
1539                                    </li>
1540                                                                                                                                <li style="display: none;"
1541                                        class="animated tag--298 categories__menu-item   ">
1542                                        <a class="categories__menu-link"
1543                                           href="/utility">#Utility </a>
1544                                    </li>
1545                                                                                                                                <li style="display: none;"
1546                                        class="animated tag--305 categories__menu-item   ">
1547                                        <a class="categories__menu-link"
1548                                           href="/web-app">#Web app </a>
1549                                    </li>
1550                                                                                                                                <li style="display: none;"
1551                                        class="animated tag--301 categories__menu-item   ">
1552                                        <a class="categories__menu-link"
1553                                           href="/website">#Website </a>
1554                                    </li>
1555                                                            
1556                            <li style="display: none;margin-bottom: 35px;"
1557                                class="animated categories__menu-item ">
1558                                <svg class="svg-inline" width="32px" height="6px" viewBox="0 0 32 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1559    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
1560    <title>icon-divider</title>
1561    <desc>Created with Sketch.</desc>
1562    <defs></defs>
1563    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1564        <g id="Startseite-Menu" transform="translate(-191.000000, -763.000000)" fill="#435B71">
1565            <g id="Menu-Overlay">
1566                <g id="icon-divider" transform="translate(191.000000, 763.000000)">
1567                    <circle id="Oval-4" cx="16" cy="3" r="3"></circle>
1568                    <circle id="Oval-4" cx="29" cy="3" r="3"></circle>
1569                    <circle id="Oval-4" cx="3" cy="3" r="3"></circle>
1570                </g>
1571            </g>
1572        </g>
1573    </g>
1574</svg>                            </li>
1575                            <li style="display: none;"
1576                                class="animated categories__menu-item   ">
1577                                <a class="categories__menu-all" href="/">View all Projects</a>
1578                            </li>
1579                        </ul>
1580                    </div>
1581                </div>
1582            </div>
1583        </categories>
1584    
1585
1586    <button data-spy="affix" data-offset-top="300" class="button-up visible-xs" id="js-scroll-up"><i
1587                class="far fa-caret-up"></i></button>
1588
1589    
1590        
1591        <newsletter-form
1592                title="Join 1k+ devs discovering the latest projects made with Svelte"
1593                social-proof="We&#039;ll send a monthly recap to your inbox 📩"
1594                subscribe-url="https://madewithsvelte.com/newsletter/subscribe"
1595                success-message="Thanks for signing up! Please check your inbox and confirm your address."
1596                error-message="That didn’t work. Please check your address and try again."
1597                retry-label="Try again"
1598        ></newsletter-form>
1599
1600    
1601    <mwc-search placeholder="Search as you type..." search-error="No Projects found"></mwc-search>
1602
1603
1604
1605</div>
1606
1607
1608<script type="text/javascript">
1609    window.statstowrite = [{"type":"tag","action":"view","id":296},{"type":"sponsor_brick","action":"impression","id":"wjmormcezanw8s6h-amelp5uzzwlco3i8-adpjgyrvbii0iggh-5wtbpvazlh8mjdda"},{"type":"sponsor_logo","action":"impression","id":"hhmcpbaygxb9k0hd-dnw5hbwurjua2nwq-yghygjnewbpw094x-gdkpfcs43aj3ov8o"},{"type":"sponsor_logo","action":"impression","id":"yi7bt3lbmceggbru-atntevqxuyqv7wwv-um3pfry8qo0euydi-kwxdyzjcdbmvkidy"}];
1610</script>
1610
1611
1612<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1612
1612
1613<script src="/js/app.js?id=21e6cc3494fdcd7971c9"></script>
1613
1614
1615
1616<script>
1617    window.FontAwesomeConfig = {
1618        searchPseudoElements: true
1619    }
1620</script>
1620
1621
1622
1623
1624    
1624<script>
1625        (function(d, h, m){
1626            var js, fjs = d.getElementsByTagName(h)[0];
1627            if (d.getElementById(m)){return;}
1628            js = d.createElement(h); js.id = m;
1629            js.onload = function(){
1630                window.makerWidgetComInit({
1631                    position: "left",
1632                    widget: "r9uqyc6u0hyqxsbw-0tyc1jcafgzz68zc-m4go6a6ahubralb1"
1633                })};
1634            js.src = "https://makerwidget.com/js/embed.js";
1635            js.rel = "preconnect";
1636            fjs.parentNode.insertBefore(js, fjs)
1637        }(document, "script", "dhm"))
1638    </script>
1638
1639
1640
1641</body>
1642</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.