https://shadcn-loaders.vercel.app/

1
2<!DOCTYPE html>
3<html lang="en" class="scroll-smooth">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    
8    <!-- Favicon / Logo -->
9    <link rel="icon" type="image/x-icon" href="/favicon.ico">
10    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
11    <link rel="apple-touch-icon" href="/shadcnloaders.png">
12
13    <!-- Apply saved theme before first paint to avoid a light-mode flash -->
14    

14<script>
15      (function () {
16        try {
17          if (localStorage.getItem('theme') === 'dark') {
18            document.documentElement.classList.add('dark');
19          }
20        } catch (e) {}
21      })();
22    </script>

22
23
24    <!-- Primary Meta Tags -->
25    <title>Shadcn Loaders - 42 React Spinners & Loaders</title>
26    <meta name="title" content="Shadcn Loaders - 42 React Spinners & Loaders">
27    <meta name="description" content="42 pure-CSS React loaders and spinners. Zero dependencies, sub-1KB each, fully customizable with Tailwind CSS. One CLI command per component.">
28    <meta name="keywords" content="shadcn loader, shadcn ui spinners, react loaders, tailwind css spinners, react loading components, aceternity ui loaders, shadcn component library">
29    <meta name="author" content="Shadcn Loaders Team">
30    <link rel="canonical" href="https://shadcnloaders.com/" />
31
32    <!-- Open Graph / Facebook -->
33    <meta property="og:type" content="website">
34    <meta property="og:url" content="https://shadcnloaders.com/">
35    <meta property="og:title" content="Shadcn Loaders - 42 React Spinners">
36    <meta property="og:description" content="42 pure-CSS React loaders. Zero dependencies, sub-1KB each, fully customizable with Tailwind CSS.">
37    <meta property="og:image" content="https://shadcnloaders.com/image.png">
38
39    <!-- Twitter -->
40    <meta property="twitter:card" content="summary_large_image">
41    <meta property="twitter:url" content="https://shadcnloaders.com/">
42    <meta property="twitter:title" content="Shadcn Loaders - 42 React Spinners">
43    <meta property="twitter:description" content="42 pure-CSS React loaders. Zero dependencies, sub-1KB each, fully customizable with Tailwind CSS.">
44    <meta property="twitter:image" content="https://shadcnloaders.com/image.png">
45
46    <!-- Structured Data (JSON-LD) -->
47    

47<script type="application/ld+json">
48    {
49      "@context": "https://schema.org",
50      "@type": "SoftwareApplication",
51      "name": "Shadcn Loaders Library",
52      "operatingSystem": "Web",
53      "applicationCategory": "DeveloperApplication",
54      "offers": {
55        "@type": "Offer",
56        "price": "0",
57        "priceCurrency": "USD"
58      },
59      "description": "42 pure-CSS React loaders and spinners. Zero dependencies, sub-1KB each, Tailwind CSS customizable."
60    }
61    </script>

61
62
63
64    

64<script type="importmap">
65{
66  "imports": {
67    "react/": "https://esm.sh/react@^19.2.3/",
68    "react": "https://esm.sh/react@^19.2.3",
69    "react-dom/": "https://esm.sh/react-dom@^19.2.3/"
70  }
71}
72</script>

72
73  

73<script type="module" crossorigin src="/assets/index-CC4yI_Pe.js"></script>

73
74  <link rel="stylesheet" crossorigin href="/assets/index-C8bFVDWD.css">
75</head>
76<body class="bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-50 antialiased selection:bg-zinc-200 selection:text-black dark:selection:bg-zinc-800 dark:selection:text-white transition-colors duration-300">
77    <div id="root"></div>
78</body>
79</html>