boldkit/index.html at main · ANIBIT14/boldkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8FRLPTZX87"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-8FRLPTZX87');
    </script>

    <!-- Primary Meta Tags -->
    <title>BoldKit — Neubrutalism UI for React &amp; Vue 3</title>
    <meta name="title" content="BoldKit — Neubrutalism UI for React &amp; Vue 3" />
    <meta name="description" content="Free neubrutalism component library for React and Vue 3 with 55+ UI components, 15 section blocks, 7 templates, 54 animated SVG shapes, and 14 chart types. Built on shadcn/ui with thick borders, hard shadows, and bold colors. Install via shadcn CLI or shadcn-vue. Open source, accessible, TypeScript." />
    <meta name="author" content="Aniruddha Agarwal" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://boldkit.dev/" />

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="https://ik.imagekit.io/fincalfy/304a4c07-8de1-41af-813e-e7556234b973.png" />
    <link rel="apple-touch-icon" href="https://ik.imagekit.io/fincalfy/304a4c07-8de1-41af-813e-e7556234b973.png" />
    <link rel="manifest" href="/manifest.json" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://boldkit.dev/" />
    <meta property="og:title" content="BoldKit - Neubrutalism UI Components for React & Vue 3" />
    <meta property="og:description" content="Free neubrutalism component library for React and Vue 3 with 55+ components, 15 section blocks, 7 templates, 54 animated SVG shapes, and 14 chart types. Thick borders, hard shadows, bold colors. Built on shadcn/ui. Install via CLI." />
    <meta property="og:image" content="https://ik.imagekit.io/fincalfy/Screenshot%202026-03-21%20at%209.48.00%E2%80%AFPM.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="BoldKit - Neubrutalism Component Library for React and Vue 3" />
    <meta property="og:site_name" content="BoldKit" />
    <meta property="og:locale" content="en_US" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://boldkit.dev/" />
    <meta name="twitter:title" content="BoldKit - Neubrutalism UI Components for React & Vue 3" />
    <meta name="twitter:description" content="Free neubrutalism component library for React and Vue 3 with 55+ components, 15 section blocks, 7 templates, 54 animated SVG shapes, and 14 chart types. Thick borders, hard shadows, bold colors. Built on shadcn/ui." />
    <meta name="twitter:image" content="https://ik.imagekit.io/fincalfy/Screenshot%202026-03-21%20at%209.48.00%E2%80%AFPM.png" />
    <meta name="twitter:creator" content="@boldkitdev" />

    <!-- Theme Color -->
    <meta name="theme-color" content="#f87171" />
    <meta name="msapplication-TileColor" content="#f87171" />

    <!-- Structured Data (JSON-LD) - Software Application -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "BoldKit",
      "alternateName": "BoldKit UI",
      "description": "A free, open-source neubrutalism component library for React and Vue 3 with 55+ UI components, 15 section blocks, 7 full-page templates, 54 animated SVG shapes, and 14 chart types. Built on shadcn/ui featuring thick borders, hard shadows, and bold colors.",
      "url": "https://boldkit.dev",
      "applicationCategory": "DeveloperApplication",
      "applicationSubCategory": "UI Component Library",
      "operatingSystem": "Cross-platform",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD",
        "availability": "https://schema.org/InStock"
      },
      "author": {
        "@type": "Person",
        "name": "Aniruddha Agarwal",
        "email": "aniruddha@boldkit.dev",
        "url": "https://www.linkedin.com/in/aniruddhaagarwal/"
      },
      "license": "https://opensource.org/licenses/MIT",
      "programmingLanguage": ["TypeScript", "JavaScript", "React", "Vue", "JSX", "TSX", "SFC"],
      "softwareVersion": "3.0.4",
      "downloadUrl": "https://github.com/ANIBIT14/boldkit",
      "installUrl": "https://boldkit.dev/docs/installation",
      "screenshot": "https://ik.imagekit.io/fincalfy/Screenshot%202026-03-21%20at%209.48.00%E2%80%AFPM.png",
      "featureList": [
        "55+ UI Components",
        "15 Section Blocks",
        "7 Full-Page Templates",
        "54 Animated SVG Shapes",
        "14 Chart Types",
        "React Support",
        "Vue 3 Support",
        "Neubrutalism Design",
        "shadcn/ui Compatible",
        "shadcn-vue Compatible",
        "Tailwind CSS v4",
        "TypeScript Support",
        "Dark Mode",
        "Accessible via Radix UI & Reka UI",
        "shadcn CLI Install"
      ],
      "keywords": "neubrutalism, neubrutalism ui, brutalist design, React components, Vue 3 components, shadcn, shadcn-vue, Tailwind CSS, TypeScript, UI library, section blocks, marketing blocks, application blocks"
    }
    </script>

    <!-- Structured Data (JSON-LD) - WebSite for Search -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "BoldKit",
      "url": "https://boldkit.dev",
      "description": "Neubrutalism component library for React and Vue 3",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://boldkit.dev/components/{search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>

    <!-- Organization Schema -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "BoldKit",
      "url": "https://boldkit.dev",
      "logo": "https://ik.imagekit.io/fincalfy/304a4c07-8de1-41af-813e-e7556234b973.png",
      "sameAs": [
        "https://github.com/ANIBIT14/boldkit",
        "https://www.linkedin.com/in/aniruddhaagarwal/"
      ],
      "contactPoint": {
        "@type": "ContactPoint",
        "email": "aniruddha@boldkit.dev",
        "contactType": "customer support"
      }
    }
    </script>

    <!-- Google Fonts: Bebas Neue + DM Mono + Outfit -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />

    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://ik.imagekit.io" />
    <link rel="dns-prefetch" href="https://ik.imagekit.io" />
    <link rel="preconnect" href="https://www.googletagmanager.com" />
    <link rel="preconnect" href="https://www.google-analytics.com" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <noscript>
      <div style="font-family:sans-serif;max-width:800px;margin:40px auto;padding:20px;line-height:1.6">
        <h1>BoldKit — Neubrutalism UI Component Library for React &amp; Vue 3</h1>
        <p>BoldKit is a free, open-source neubrutalism (also called neobrutalism) component library with 55+ UI components, 14 chart types, 54 SVG shapes, 15 section blocks, and 7 full-page templates. Built on shadcn/ui with thick borders, hard shadows, and bold colors. Compatible with React 19, Vue 3, and Nuxt.</p>
        <h2>Key Features</h2>
        <ul>
          <li>55+ accessible UI components built on Radix UI (React) and Reka UI (Vue)</li>
          <li>14 chart types powered by Recharts (React) and ECharts (Vue)</li>
          <li>54 decorative SVG shapes with an interactive Shape Builder</li>
          <li>15 section blocks: hero, features, testimonials, CTA, stats, team, FAQ, footer, contact, logo cloud, auth forms, settings, onboarding, error pages, invoice</li>
          <li>7 full-page templates: landing page, portfolio, dashboard, pricing, blog, product, docs</li>
          <li>Math Curve components: animated loaders, progress bars, and backgrounds</li>
          <li>Install via shadcn CLI (React) or shadcn-vue CLI (Vue/Nuxt)</li>
          <li>MIT licensed, TypeScript, Tailwind CSS v4, dark mode</li>
        </ul>
        <p>Visit <a href="https://boldkit.dev">boldkit.dev</a> with JavaScript enabled to browse all components.</p>
      </div>
    </noscript>
  </body>
</html>