PageSourceSearch

https://retroui-svelte.netlify.app/docs

html retroui-svelte.netlify.app collected 2026-10-03 11:20:35 UTC 53,422 bytes, 104 lines download raw bytes

1<!doctype html>
2<html lang="en">
3	<head>
4		<meta charset="utf-8" />
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=6d49fad2-010d-4bc1-a65d-167b0faf188e
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8		<link rel="icon" href="./favicon.ico" />
9		<meta name="viewport" content="width=device-width, initial-scale=1" />
10		<link href="./_app/immutable/entry/start.Bhzkf1w_.js" rel="modulepreload">
11		<link href="./_app/immutable/chunks/ViDYVyGk.js" rel="modulepreload">
12		<link href="./_app/immutable/chunks/B232ALK4.js" rel="modulepreload">
13		<link href="./_app/immutable/entry/app.DXsuJ8Ij.js" rel="modulepreload">
14		<link href="./_app/immutable/chunks/Dp1pzeXC.js" rel="modulepreload">
15		<link href="./_app/immutable/chunks/BXhwi9sJ.js" rel="modulepreload">
16		<link href="./_app/immutable/chunks/BXaGBBoa.js" rel="modulepreload">
17		<link href="./_app/immutable/nodes/0.BWHbsSJp.js" rel="modulepreload">
18		<link href="./_app/immutable/chunks/BpIDZO9t.js" rel="modulepreload">
19		<link href="./_app/immutable/chunks/PGtNHcse.js" rel="modulepreload">
20		<link href="./_app/immutable/chunks/DxAsu0tI.js" rel="modulepreload">
21		<link href="./_app/immutable/chunks/porqwz5r.js" rel="modulepreload">
22		<link href="./_app/immutable/chunks/BM8A1LG4.js" rel="modulepreload">
23		<link href="./_app/immutable/chunks/oTKp1ypB.js" rel="modulepreload">
24		<link href="./_app/immutable/chunks/Cw9hRD3K.js" rel="modulepreload">
25		<link href="./_app/immutable/chunks/CtF8lmCD.js" rel="modulepreload">
26		<link href="./_app/immutable/chunks/B1clm_GN.js" rel="modulepreload">
27		<link href="./_app/immutable/nodes/2.CGqGKZQJ.js" rel="modulepreload">
28		<link href="./_app/immutable/chunks/DM4fnqED.js" rel="modulepreload">
29		<link href="./_app/immutable/chunks/DOXG6GBn.js" rel="modulepreload">
30		<link href="./_app/immutable/chunks/5OKMvTsk.js" rel="modulepreload">
31		<link href="./_app/immutable/chunks/C8JsYuk_.js" rel="modulepreload">
32		<link href="./_app/immutable/chunks/4LbDbJ0q.js" rel="modulepreload">
33		<link href="./_app/immutable/chunks/UdpOrlnz.js" rel="modulepreload">
34		<link href="./_app/immutable/chunks/B2dYlsSe.js" rel="modulepreload">
35		<link href="./_app/immutable/chunks/CEcLVhbI.js" rel="modulepreload">
36		<link href="./_app/immutable/chunks/nzQeAhpo.js" rel="modulepreload">
37		<link href="./_app/immutable/chunks/C5QqlZAP.js" rel="modulepreload">
38		<link href="./_app/immutable/chunks/Bup5LBQz.js" rel="modulepreload">
39		<link href="./_app/immutable/nodes/6.BRGyiTQd.js" rel="modulepreload">
40		<link href="./_app/immutable/chunks/-hbEgS52.js" rel="modulepreload">
41		<link href="./_app/immutable/chunks/Wt0pEBLc.js" rel="modulepreload">
42		<!--1et7q0p--><!--[-1--><!--]--> <!---->
42<script>(function setInitialMode({ defaultMode = "system", themeColors: themeColors2, darkClassNames: darkClassNames2 = ["dark"], lightClassNames: lightClassNames2 = [], defaultTheme = "", modeStorageKey: modeStorageKey2 = "mode-watcher-mode", themeStorageKey: themeStorageKey2 = "mode-watcher-theme" }) {
43  const rootEl = document.documentElement;
44  const mode = localStorage.getItem(modeStorageKey2) ?? defaultMode;
45  const theme = localStorage.getItem(themeStorageKey2) ?? defaultTheme;
46  const light = mode === "light" || mode === "system" && window.matchMedia("(prefers-color-scheme: light)").matches;
47  if (light) {
48    if (darkClassNames2.length)
49      rootEl.classList.remove(...darkClassNames2.filter(Boolean));
50    if (lightClassNames2.length)
51      rootEl.classList.add(...lightClassNames2.filter(Boolean));
52  } else {
53    if (lightClassNames2.length)
54      rootEl.classList.remove(...lightClassNames2.filter(Boolean));
55    if (darkClassNames2.length)
56      rootEl.classList.add(...darkClassNames2.filter(Boolean));
57  }
58  rootEl.style.colorScheme = light ? "light" : "dark";
59  if (themeColors2) {
60    const themeMetaEl = document.querySelector('meta[name="theme-color"]');
61    if (themeMetaEl) {
62      themeMetaEl.setAttribute("content", mode === "light" ? themeColors2.light : themeColors2.dark);
63    }
64  }
65  if (theme) {
66    rootEl.setAttribute("data-theme", theme);
67    localStorage.setItem(themeStorageKey2, theme);
68  }
69  localStorage.setItem(modeStorageKey2, mode);
70})({"defaultMode":"dark","darkClassNames":["dark"],"lightClassNames":[],"defaultTheme":"","modeStorageKey":"mode-watcher-mode","themeStorageKey":"mode-watcher-theme"});</script>
70<!----><!----><!--1s9dyo0--><meta name="description" content="What exactly is RetroUI Svelte?"/> <!--[0--><meta name="keywords" content="svelte,ui,components,retro,retroui,tailwindcss,shadcn-svelte,retroui-svelte"/><!--]--> <meta name="author" content="Mhamad6000"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:site" content="https://retroui-svelte.netlify.app"/> <meta name="twitter:title" content="Introduction - Retroui-Svelte"/> <meta name="twitter:description" content="What exactly is RetroUI Svelte?"/> <!--[0--><meta name="twitter:image" content="/og.png"/> <meta name="twitter:image:alt" content="Introduction"/><!--]--> <meta name="twitter:creator" content="Mhamad6000"/> <meta property="og:title" content="Introduction - Retroui-Svelte"/> <meta property="og:type" content="website"/> <meta property="og:url" content="https://retroui-svelte.netlify.app/docs"/> <!--[0--><meta property="og:image" content="/og.png"/> <meta property="og:image:alt" content="Introduction"/> <meta property="og:image:width" content="1200"/> <meta property="og:image:height" content="630"/><!--]--> <meta property="og:description" content="What exactly is RetroUI Svelte?"/> <meta property="og:site_name" content="Retroui-Svelte"/> <meta property="og:locale" content="en_US"/><!----><title>Introduction - Retroui-Svelte</title>
71		<link href="./_app/immutable/assets/0.Bj6jrr_T.css" rel="stylesheet">
72		<link href="./_app/immutable/assets/pm-command.DpHa0LAF.css" rel="stylesheet">
73		<link href="./_app/immutable/assets/scroll-area.bHHIbcsu.css" rel="stylesheet">
74		<link href="./_app/immutable/assets/table-row.CV-KWLNP.css" rel="stylesheet">
75	</head>
76	<body data-sveltekit-preload-data="hover" class="relative">
77		<div style="display: contents"><!--[--><!--[0--><!--[--><!--[-1--><!--]--><!----> <section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false" class="svelte-yd8r4v"><!--[-1--><!--]--></section><!----> <!--[0--><!--[--><div class="flex flex-col h-screen"><div class="bg-background border-border sticky top-0 z-50 flex h-14 w-full items-center justify-between border-b px-4"><div class="flex items-center gap-4"><a href="/" class="flex items-center gap-2"><svg class="h-8 w-8 fill-primary" id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400"><g id="svgg"><path id="path0" d="M171.296 12.630 C 123.016 16.615,79.575 38.850,49.439 75.000 C -19.476 157.669,0.059 280.762,91.150 337.824 C 93.902 339.548,97.811 342.408,99.836 344.180 C 176.333 411.083,294.627 398.630,355.914 317.222 C 418.813 233.675,395.475 113.671,305.926 60.181 C 304.602 59.390,302.102 57.481,300.370 55.938 C 265.981 25.304,216.970 8.860,171.296 12.630 M197.407 31.309 C 312.247 41.298,378.278 167.035,321.006 266.667 C 263.964 365.900,124.014 373.246,56.437 280.556 C 15.296 224.126,17.240 143.013,61.002 90.016 C 61.079 89.922,88.968 117.672,122.977 151.681 L 184.813 213.516 196.296 202.037 L 207.780 190.558 145.893 128.670 L 84.006 66.782 85.984 65.126 C 109.201 45.693,140.087 33.798,174.630 30.986 C 178.957 30.634,191.726 30.815,197.407 31.309 M348.841 120.926 C 403.418 201.246,374.452 311.814,287.424 355.366 C 249.404 374.392,202.896 377.716,164.074 364.182 C 161.546 363.300,159.448 362.196,161.296 362.719 C 167.249 364.404,191.907 364.638,204.630 363.129 C 305.145 351.211,374.908 257.534,357.559 157.778 C 355.156 143.962,351.473 131.956,344.664 115.741 L 344.042 114.259 344.806 115.185 C 345.226 115.694,347.042 
77118.278,348.841 120.926 " stroke="none" fill="#14141c" fill-rule="evenodd"></path><path id="path1" d="M346.268 119.074 C 398.046 240.489,301.165 375.189,170.185 363.892 C 160.873 363.088,160.857 363.144,169.665 365.708 C 235.301 384.814,304.729 361.273,345.430 306.111 C 384.978 252.512,386.641 177.899,349.529 122.222 C 345.098 115.574,344.550 115.045,346.268 119.074 " stroke="none" fill="inherit" fill-rule="evenodd"></path><path id="path2" d="M169.300 31.697 C 143.741 34.231,120.140 42.430,98.766 56.200 C 94.780 58.768,85.635 65.467,84.924 66.339 C 84.552 66.797,94.601 77.009,146.128 128.536 C 180.035 162.442,207.778 190.350,207.778 190.553 C 207.778 190.756,202.653 196.048,196.390 202.314 L 185.003 213.706 123.143 151.847 L 61.283 89.988 57.905 94.531 C -4.739 178.774,31.853 300.569,130.535 336.276 C 233.090 373.384,341.464 297.357,341.480 188.293 C 341.494 95.603,261.208 22.583,169.300 31.697 " stroke="none" fill="#fcfcfc" fill-rule="evenodd"></path><path id="path3" d="M176.764 31.007 C 177.327 31.092,178.161 31.089,178.616 31.001 C 179.072 30.914,178.611 30.844,177.593 30.847 C 176.574 30.849,176.201 30.921,176.764 31.007 M190.278 31.002 C 190.736 31.090,191.486 31.090,191.944 31.002 C 192.403 30.914,192.028 30.842,191.111 30.842 C 190.194 30.842,189.819 30.914,190.278 31.002 M359.345 170.741 C 359.345 171.454,359.421 171.745,359.515 171.389 C 359.608 171.032,359.608 170.449,359.515 170.093 C 359.421 169.736,359.345 170.028,359.345 170.741 M359.723 175.370 C 359.727 176.185,359.803 176.475,359.892 176.014 C 359.980 175.553,359.977 174.887,359.884 174.533 C 359.791 174.179,359.719 174.556,359.723 175.370 M360.134 182.593 C 360.134 184.528,360.196 185.319,360.272 184.352 C 360.349 183.384,360.349 181.801,360.272 180.833 C 360.196 179.866,360.134 180.657,360.134 182.593 M26.760 180.926 C 26.764 181.741,26.840 182.030,26.929 181.570 C 27.017 181.109,27.014 180.442,26.921 180.088 C 26.828 179.734,26.756 180.111,26.760 180.926 M341.582 182.222 C 341.582 183.139,341.655 183.514,341.743 183.056 C 341.831 182.597,341.831 181.847,341.743 181.389 C 341.655 180.931,341.582 181.306,341.582 182.222 M360.135 193.889 C 360.136 195.926,360.198 196.712,360.273 195.636 C 360.349 194.559,360.348 192.893,360.272 191.932 C 360.196 190.971,360.134 191.852,360.135 193.889 M341.575 194.630 C 341.579 195.444,341.655 195.734,341.743 195.273 C 341.832 194.813,341.829 194.146,341.736 193.792 C 341.643 193.438,341.571 193.815,341.575 194.630 M26.768 195.556 C 26.768 196.472,26.840 196.847,26.928 196.389 C 27.016 195.931,27.016 195.181,26.928 194.722 C 26.840 194.264,26.768 194.639,26.768 195.556 M376.019 200.926 C 376.023 201.741,376.099 202.030,376.188 201.570 C 376.276 201.109,376.273 200.442,376.180 200.088 C 376.088 199.734,376.015 200.111,376.019 200.926 M359.716 201.111 C 359.716 201.824,359.792 202.116,359.885 201.759 C 359.978 201.403,359.978 200.819,359.885 200.463 C 359.792 200.106,359.716 200.398,359.716 201.111 M376.426 211.481 C 376.426 213.213,376.490 213.921,376.567 213.056 C 376.645 212.190,376.645 210.773,376.567 209.907 C 376.490 209.042,376.426 209.750,376.426 211.481 M376.019 221.667 C 376.023 222.481,376.099 222.771,376.188 222.310 C 376.276 221.850,376.273 221.183,376.180 220.829 C 376.088 220.475,376.015 220.852,376.019 221.667 M375.271 230.000 C 375.271 230.713,375.347 231.005,375.440 230.648 C 375.534 230.292,375.534 229.708,375.440 229.352 C 375.347 228.995,375.271 229.287,375.271 230.000 M339.815 270.370 C 339.299 271.389,338.960 272.222,339.062 272.222 C 339.163 272.222,339.669 271.389,340.185 270.370 C 340.701 269.352,341.040 268.519,340.938 268.519 C 340.837 268.519,340.331 269.352,339.815 270.370 M360.446 280.945 C 359.590 282.672,358.897 284.208,358.908 284.357 C 358.918 284.507,359.678 283.154,360.598 281.350 C 361.517 279.547,362.209 278.012,362.136 277.938 C 362.063 277.865,361.302 279.218,360.446 280.945 M317.940 302.685 L 316.852 303.889 318.056 302.801 C 318.718 302.203,319.259 301.661,319.259 301.597 C 319.259 301.311,318.954 301.563,317.940 302.685 M308.513 312.870 L 303.519 317.963 308.611 312.968 C 313.342 308.328,313.872 307.778,313.606 307.778 C 313.552 307.778,311.261 310.069,308.513 312.870 M334.983 318.981 L 333.519 320.556 335.093 319.092 C 336.556 317.730,336.837 317.407,336.557 317.407 C 336.496 317.407,335.788 318.116,334.983 318.981 M329.065 325.278 L 326.111 328.333 329.167 325.379 C 332.005 322.635,332.391 322.222,332.121 322.222 C 332.065 322.222,330.690 323.597,329.065 325.278 M322.760 331.204 L 321.296 332.778 322.870 331.314 C 324.334 329.952,324.615 329.630,324.334 329.630 C 324.274 329.630,323.566 330.338,322.760 331.204 M176.574 345.817 C 177.032 345.905,177.782 345.905,178.241 345.817 C 178.699 345.729,178.324 345.656,177.407 345.656 C 176.491 345.656,176.116 345.729,176.574 345.817 M190.098 345.821 C 190.661 345.906,191.494 345.904,191.950 345.816 C 192.405 345.728,191.944 345.659,190.926 345.661 C 189.907 345.664,189.535 345.736,190.098 345.821 M162.407 363.333 C 162.137 363.771,162.499 363.771,163.519 363.333 C 164.233 363.026,164.230 363.014,163.448 362.989 C 163.001 362.975,162.533 363.130,162.407 363.333 M166.019 363.589 C 166.375 363.682,166.958 363.682,167.315 363.589 C 167.671 363.495,167.380 363.419,166.667 363.419 C 165.954 363.419,165.662 363.495,166.019 363.589 M170.652 363.966 C 171.113 364.054,171.780 364.051,172.134 363.958 C 172.488 363.865,172.111 363.793,171.296 363.797 C 170.481 363.801,170.192 363.877,170.652 363.966 M196.759 363.959 C 197.116 364.052,197.699 364.052,198.056 363.959 C 198.412 363.866,198.120 363.790,197.407 363.790 C 196.694 363.790,196.403 363.866,196.759 363.959 M176.389 364.346 C 177.356 364.423,178.940 364.423,179.907 364.346 C 180.875 364.270,180.083 364.208,178.148 364.208 C 176.213 364.208,175.421 364.270,176.389 364.346 M188.611 364.346 C 189.579 364.423,191.162 364.423,192.130 364.346 C 193.097 364.270,192.306 364.208,190.370 364.208 C 188.435 364.208,187.644 364.270,188.611 364.346 M196.019 371.366 C 196.375 371.460,196.958 371.460,197.315 371.366 C 197.671 371.273,197.380 371.197,196.667 371.197 C 195.954 371.197,195.
77662 371.273,196.019 371.366 M204.172 372.118 C 204.735 372.203,205.568 372.200,206.024 372.113 C 206.479 372.025,206.019 371.955,205.000 371.958 C 203.981 371.961,203.609 372.032,204.172 372.118 M224.722 372.113 C 225.181 372.202,225.931 372.202,226.389 372.113 C 226.847 372.025,226.472 371.953,225.556 371.953 C 224.639 371.953,224.264 372.025,224.722 372.113 M213.796 372.492 C 214.560 372.572,215.810 372.572,216.574 372.492 C 217.338 372.412,216.713 372.347,215.185 372.347 C 213.657 372.347,213.032 372.412,213.796 372.492 " stroke="none" fill="#8c741c" fill-rule="evenodd"></path><path id="path4" d="M181.759 31.016 C 183.236 31.086,185.653 31.086,187.130 31.016 C 188.606 30.945,187.398 30.888,184.444 30.888 C 181.491 30.888,180.282 30.945,181.759 31.016 M172.315 31.366 C 172.671 31.460,173.255 31.460,173.611 31.366 C 173.968 31.273,173.676 31.197,172.963 31.197 C 172.250 31.197,171.958 31.273,172.315 31.366 M198.981 31.737 C 199.338 31.830,199.921 31.830,200.278 31.737 C 200.634 31.644,200.343 31.567,199.630 31.567 C 198.917 31.567,198.625 31.644,198.981 31.737 M84.891 66.030 L 84.097 66.875 146.030 128.715 L 207.963 190.556 146.199 128.698 L 84.435 66.841 85.263 66.013 C 85.718 65.558,85.999 65.185,85.888 65.185 C 85.776 65.185,85.327 65.565,84.891 66.030 M295.370 77.037 C 297.808 79.481,299.887 81.481,299.988 81.481 C 300.090 81.481,298.179 79.481,295.741 77.037 C 293.303 74.593,291.225 72.593,291.123 72.593 C 291.021 72.593,292.932 74.593,295.370 77.037 M301.111 83.079 C 301.111 83.143,301.653 83.684,302.315 84.283 L 303.519 85.370 302.431 84.167 C 301.417 83.045,301.111 82.793,301.111 83.079 M27.123 176.667 C 27.123 177.380,27.199 177.671,27.292 177.315 C 27.386 176.958,27.386 176.375,27.292 176.019 C 27.199 175.662,27.123 175.954,27.123 176.667 M26.817 188.148 C 26.817 191.509,26.874 192.884,26.942 191.204 C 27.011 189.523,27.011 186.773,26.942 185.093 C 26.874 183.412,26.817 184.787,26.817 188.148 M341.627 188.519 C 341.627 191.269,341.685 192.394,341.756 191.019 C 341.827 189.644,341.827 187.394,341.756 186.019 C 341.685 184.644,341.627 185.769,341.627 188.519 M196.109 202.315 L 184.630 213.889 196.204 202.410 C 202.569 196.096,207.778 190.888,207.778 190.836 C 207.778 190.574,206.777 191.559,196.109 202.315 M341.197 199.630 C 341.197 200.343,341.273 200.634,341.366 200.278 C 341.460 199.921,341.460 199.338,341.366 198.981 C 341.273 198.625,341.197 198.917,341.197 199.630 M70.370 297.222 C 71.683 298.546,72.840 299.630,72.942 299.630 C 73.043 299.630,72.053 298.546,70.741 297.222 C 69.428 295.898,68.271 294.815,68.170 294.815 C 68.068 294.815,69.058 295.898,70.370 297.222 M295.370 299.630 C 292.932 302.074,291.021 304.074,291.123 304.074 C 291.225 304.074,293.303 302.074,295.741 299.630 C 298.179 297.185,300.090 295.185,299.988 295.185 C 299.887 295.185,297.808 297.185,295.370 299.630 M75.556 302.407 C 76.868 303.731,78.025 304.815,78.127 304.815 C 78.229 304.815,77.238 303.731,75.926 302.407 C 74.614 301.083,73.457 300.000,73.355 300.000 C 73.253 300.000,74.243 301.083,75.556 302.407 M288.310 306.389 L 287.222 307.593 288.426 306.505 C 289.088 305.906,289.630 305.365,289.630 305.301 C 289.630 305.015,289.324 305.267,288.310 306.389 M168.241 345.070 C 168.597 345.163,169.181 345.163,169.537 345.070 C 169.894 344.977,169.602 344.901,168.889 344.901 C 168.176 344.901,167.884 344.977,168.241 345.070 M181.389 345.831 C 182.866 345.901,185.282 345.901,186.759 345.831 C 188.236 345.760,187.028 345.703,184.074 345.703 C 181.120 345.703,179.912 345.760,181.389 345.831 " stroke="none" fill="#979797" fill-rule="evenodd"></path></g></svg> <span class="text-xl font-medium">Retroui Svelte</span></a> <nav class="hidden lg:flex items-center gap-0"><!--[--><a href="/docs" class="inline-block p-3 hover:underline">Docs</a><a href="/docs/components" class="inline-block p-3 hover:underline">Components</a><a href="/templates" class="inline-block p-3 hover:underline">Templates</a><a href="/themes" class="inline-block p-3 hover:underline">Themes</a><!--]--></nav></div> <div class="flex items-center gap-4"><div class="hidden md:block"><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 outline-hidden cursor-pointer duration-200 font-medium justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-border transition hover:translate-y-1 h-9 px-4 py-2 has-[>svg]:px-3 flex gap-2 items-center" href="https://github.com/Mhamad6000/retroui-svelte" target="_blank"><svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 
7710.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="currentColor"></path></svg> <span>Github</span><!----></a><!--]--><!----></div> <!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-border transition hover:translate-y-1 size-8 md:hidden" href="https://github.com/Mhamad6000/retroui-svelte" target="_blank"><svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="currentColor"></path></svg> <span class="sr-only">Github</span><!----></a><!--]--><!----> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-border transition hover:translate-y-1 size-8" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-sun scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"><!--[--><!----><circle cx="12" cy="12" r="4"><!----></circle><!----><!----><path d="M12 2v2"><!----></path><!----><!----><path d="M12 20v2"><!----></path><!----><!----><path d="m4.93 4.93 1.41 1.41"><!----></path><!----><!----><path d="m17.66 17.66 1.41 1.41"><!----></path><!----><!----><path d="M2 12h2"><!----></path><!----><!----><path d="M20 12h2"><!----></path><!----><!----><path d="m6.34 17.66-1.41 1.41"><!----></path><!----><!----><path d="m19.07 4.93-1.41 1.41"><!----></path><!----><!--]--><!----><!----></svg><!----> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-moon absolute scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"><!--[--><!----><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"><!----></path><!----><!--]--><!----><!----></svg><!----> <span class="sr-only">Toggle theme</span><!----></button><!--]--><!----> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-border transition hover:translate-y-1 size-8 lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-menu"><!--[--><!----><path d="M4 12h16"><!----></path><!----><!----><path d="M4 18h16"><!----></path><!----><!----><path d="M4 6h16"><!----></path><!----><!--]--><!----><!----></svg><!----> <span class="sr-only">Toggle Sidebar</span><!----></button><!--]--><!----></div></div> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!----><!--]--><!----><!----> <div class="flex flex-1 overflow-hidden"><aside class="hidden lg:block w-64 border-r border-border bg-background h-full overflow-auto"><div class="p-6"><!--[0--><div class="mb-8"><h4 class="mb-3 text-sm font-medium text-muted-foreground uppercase tracking-wide">Quick Links</h4> <nav class="space-y-1"><!--[--><!--[-1--><a href="/docs" data-state="active" class="flex items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-book-open h-4 w-4"><!--[--><!----><path d="M12 7v14"><!----></path><!----><!----><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"><!----></path><!----><!--]--><!----><!----></svg><!--]--> Introduction <!--[-1--><!--]--></a>
77<!--]--><!--[-1--><a href="/docs/getting-started" class="flex items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-rocket h-4 w-4"><!--[--><!----><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"><!----></path><!----><!----><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"><!----></path><!----><!----><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"><!----></path><!----><!----><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"><!----></path><!----><!--]--><!----><!----></svg><!--]--> Getting Started <!--[-1--><!--]--></a><!--]--><!--[-1--><a href="https://github.com/Mhamad6000/retroui-svelte/releases" class="flex items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium" target="_blank"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-tag h-4 w-4"><!--[--><!----><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"><!----></path><!----><!----><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"><!----></circle><!----><!--]--><!----><!----></svg><!--]--> Releases <!--[0--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-external-link ml-auto h-3 w-3"><!--[--><!----><path d="M15 3h6v6"><!----></path><!----><!----><path d="M10 14 21 3"><!----></path><!----><!----><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"><!----></path><!----><!--]--><!----><!----></svg><!--]--></a><!--]--><!--]--></nav></div><!--]--> <!--[0--><!--[--><div class="mb-8"><!--[0--><h4 class="mb-3 text-sm font-medium text-muted-foreground uppercase tracking-wide">Components</h4><!--]--> <nav class="space-y-1"><!--[--><!--[0--><!--[-1--><a href="/docs/components" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Components</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/accordion" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Accordion</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/alert-dialog" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Alert Dialog</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/alert" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Alert</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a>
77<!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/avatar" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Avatar</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/badge" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Badge</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/breadcrumb" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Breadcrumb</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/button" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Button</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/calendar" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Calendar</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/card" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Card</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/checkbox" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Checkbox</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/collapsible" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Collapsible</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/command" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Command</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/context-menu" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Context Menu</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a>
77<!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/date-picker" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Date Picker</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/dialog" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Dialog</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/dropdown-menu" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Dropdown Menu</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/hover-card" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Hover Card</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/input" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Input</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/label" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Label</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/loader" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Loader</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/menubar" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Menubar</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/navigation-menu" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Navigation Menu</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/pagination" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Pagination</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a>
77<!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/popover" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Popover</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/progress" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Progress</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/radio-group" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Radio Group</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/range-calendar" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Range Calendar</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/select" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Select</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/separator" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Separator</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/sheet" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Sheet</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/slider" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Slider</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/sonner" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Sonner</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/switch" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Switch</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a>
77<!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/table" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Table</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/tabs" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Tabs</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/text" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Text</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/textarea" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Textarea</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/toggle-group" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Toggle Group</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/toggle" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Toggle</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--[0--><!--[-1--><a href="/docs/components/tooltip" class="flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-muted-foreground dark:hover:text-wh data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:font-medium"><span>Tooltip</span> <div class="flex items-center gap-1"><!--[-1--><!--]--> <!--[-1--><!--]--></div></a><!--]--><!--]--><!--]--></nav></div><!--]--><!--]--> <!--[-1--><!--]--></div></aside><!----> <div class="relative gap-4 flex-row-reverse overflow-auto flex w-full flex-1 px-4 py-8 lg:px-8" id="content"><!--[--><!----> <div class="sticky top-0 self-start hidden xl:block"><!--[0--><!--[0--><div class="w-[250px] rounded-md border p-4 max-w-[250px] space-y-2 text-sm"><div class="text-muted-foreground -ml-px flex items-center gap-1.5"><p class="text-muted-foreground text-sm">On this page</p></div> <div class="relative mt-4" data-desktop-toc=""><div class="bg-foreground absolute -left-[0.5px] top-0 h-5 w-0.5 rounded-full" style="transition: top 0.25s; top:0px;"></div> <!--[0--><ul class="m-0 list-none border-border/50 border-l"><!--[--><li class="mt-0"><a href="#prerequisites" class="hover:text-foreground ml-5 inline-block pb-2 no-underline transition-colors text-muted-foreground">Prerequisites</a> <!--[-1--><!--]--></li><li class="mt-0"><a href="#features" class="hover:text-foreground ml-5 inline-block pb-2 no-underline transition-colors text-muted-foreground">Features</a> <!--[-1--><!--]--></li><li class="mt-0"><a href="#design-philosophy" class="hover:text-foreground ml-5 inline-block pb-2 no-underline transition-colors text-muted-foreground">Design Philosophy</a> <!--[-1--><!--]--></li><li class="mt-0"><a href="#community" class="hover:text-foreground ml-5 inline-block no-underline transition-colors text-muted-foreground pb-0">Community</a> <!--[-1--><!--]--></li>
77<!--]--></ul><!--]--><!----></div></div><!--]--><!--]--><!----></div> <div class="mx-auto"><main class="mx-auto w-full min-w-0 max-w-[640px] pb-12 2xl:max-w-[760px]" id="main-content"><header class="mb-8 border-b pb-6"><h1 class="text-4xl font-head lg:text-5xl font-bold tracking-tight text-foreground mb-2">Introduction</h1> <!--[0--><p class="text-lg text-muted-foreground leading-relaxed">What exactly is RetroUI Svelte?</p><!--]--> <!--[-1--><!--]--></header><!----> <!--[--><!----><p class="font-sans text-base"><!---->RetroUI Svelte is a comprehensive UI component library that brings the beautiful design system of <!--[1--><a href="https://www.retroui.dev" target="_blank" rel="noopener noreferrer" class="underline underline-offset-4 hover:decoration-primary"><!---->RetroUI<!----></a><!--]--><!----> to the Svelte ecosystem. This is an <strong>unofficial port</strong> created by <!--[1--><a href="https://github.com/Mhamad6000" target="_blank" rel="noopener noreferrer" class="underline underline-offset-4 hover:decoration-primary"><!---->Mhamad6000<!----></a><!--]--><!---->,
78Built on top of the <!--[1--><a href="https://www.shadcn-svelte.com/" target="_blank" rel="noopener noreferrer" class="underline underline-offset-4 hover:decoration-primary"><!---->shadcn-svelte<!----></a><!--]--><!----> registry system, RetroUI Svelte provides a seamless development experience with pre-built components that follow modern design principles and attention to detail.<!----><!----><!----></p><!----><!----> <br/> <br/> <!----><h2 class="font-head text-3xl lg:text-4xl font-semibold border-b pb-1 mb-6" id="prerequisites"><!---->Prerequisites<!----><!----><!----></h2><!----><!----> <!----><p class="font-sans text-base"><strong>Important</strong>: Before using RetroUI Svelte, you must have <!--[1--><a href="https://www.shadcn-svelte.com/" target="_blank" rel="noopener noreferrer" class="underline underline-offset-4 hover:decoration-primary"><!---->shadcn-svelte<!----></a><!--]--><!----> installed and configured in your project. RetroUI Svelte components are built using the shadcn-svelte registry system.<!----><!----><!----></p><!----><!----> <br/> <br/> <!----><h2 class="font-head text-3xl lg:text-4xl font-semibold border-b pb-1 mb-6" id="features"><!---->Features<!----><!----><!----></h2><!----><!----> <ul><!----><li class="font-sans text-base mb-2"><strong>🎨 16 Beautiful Themes</strong>. Choose from a curated collection of themes including Green, Orange, Yellow, Teal, Purple, Gold, Coral, Cyan, Blue, Red, Pink, Indigo, Lime, Rose, Sky, and Slate<!----><!----><!----></li><!----><!----> <!----><li class="font-sans text-base mb-2"><strong>🌓 Light &amp; Dark Mode</strong>. All themes support both light and dark modes with smooth transitions<!----><!----><!----></li><!----><!----> <!----><li class="font-sans text-base mb-2"><strong>📐 Radius Options</strong>. Switch corner style with a single <!----><code>--radius</code><!----> variable — ships with <!----><code>rounded</code><!----> and <!----><code>box</code><!----> options that work with any theme<!----><!----><!----></li><!----><!----> <!----><li class="font-sans text-base mb-2"><strong>🔧 Highly Customizable</strong>. Extensive customization options through props, CSS variables, and theme overrides<!----><!----><!----></li><!----><!----> <!----><li class="font-sans text-base mb-2"><strong>📚 Rich Documentation</strong>. Detailed documentation with examples and usage guides<!----><!----><!----></li><!----><!----> <!----><li class="font-sans text-base mb-2"><strong>🔄 Unofficial Port</strong>. Community-driven port from the original RetroUI library created by <!--[1--><a href="https://github.com/Mhamad6000" target="_blank" rel="noopener noreferrer" class="underline underline-offset-4 hover:decoration-primary"><!---->Mhamad6000<!----></a><!--]--><!----><!----><!----><!----></li><!----><!----></ul> <br/> <br/> <!----><h2 class="font-head text-3xl lg:text-4xl font-semibold border-b pb-1 mb-6" id="design-philosophy"><!---->Design Philosophy<!----><!----><!----></h2><!----><!----> <!----><p class="font-sans text-base"><!---->RetroUI Svelte follows the same design philosophy as the original <!--[1--><a href="https://www.retroui.dev" target="_blank" rel="noopener noreferrer" class="underline underline-offset-4 hover:
78decoration-primary"><!---->RetroUI<!----></a><!--]--><!---->, brought to Svelte by <!--[1--><a href="https://github.com/Mhamad6000" target="_blank" rel="noopener noreferrer" class="underline underline-offset-4 hover:decoration-primary"><!---->Mhamad6000<!----></a><!--]--><!---->:<!----><!----><!----></p><!----><!----> <ul><!----><li class="font-sans text-base mb-2"><strong>Consistency</strong> - All components share the same design language<!----><!----><!----></li><!----><!----> <!----><li class="font-sans text-base mb-2"><strong>Flexibility</strong> - Easy to customize and adapt to different use cases<!----><!----><!----></li><!----><!----></ul> <br/> <br/> <!----><h2 class="font-head text-3xl lg:text-4xl font-semibold border-b pb-1 mb-6" id="community"><!---->Community<!----><!----><!----></h2><!----><!----> <!----><p class="font-sans text-base"><!---->RetroUI Svelte is an open-source project. We welcome contributions, bug reports, and feature requests through our GitHub repository. Join our community to share your experiences and help improve the library for everyone.<!----><!----><!----></p><!----><!----><!----><!--]--></main></div><!--]--><!----><!----></div></div></div><!--]--><!--]--><!----><!--]--><!--]--> <!--[-1--><!--]--><!--]-->
79			
80			
80<script>
81				{
82					
83					__sveltekit_1gqoto2 = {
84						base: new URL(".", location).pathname.slice(0, -1)
85					};
86
87					const element = document.currentScript.parentElement;
88
89					Promise.all([
90						import("./_app/immutable/entry/start.Bhzkf1w_.js"),
91						import("./_app/immutable/entry/app.DXsuJ8Ij.js")
92					]).then(([kit, app]) => {
93						kit.start(app, element, {
94							node_ids: [0, 2, 6],
95							data: [null,null,null],
96							form: null,
97							error: null
98						});
99					});
100				}
101			</script>
101
102		</div>
103	</body>
104</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.