Merge pull request #11 from axzilla/templui

Rebranding: goilerplate > templUI
2025-02-21 00:32:58 +00:00 · 2024-12-11 15:17:54 +07:00 · 2024-12-11 15:17:54 +07:00 · dbcdbee707
commit dbcdbee707
parent ff82a53f3d 4cc0c28298
156 changed files with 891 additions and 479 deletions
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -1,17 +1,17 @@
-# Contributing to Goilerplate
+# Contributing to TemplUI

-First off, thank you for considering contributing to Goilerplate! We're excited to have you join our community.
+First off, thank you for considering contributing to TemplUI! We're excited to have you join our community.

 ## Our Vision and Your Contributions

-Goilerplate is an open-source project that aims to provide value to the Go community. We want to be transparent about our long-term vision:
+TemplUI is an open-source project that aims to provide value to the Go community. We want to be transparent about our long-term vision:

-1. We may explore opportunities to monetize aspects of Goilerplate or offer premium services related to it in the future.
+1. We may explore opportunities to monetize aspects of TemplUI or offer premium services related to it in the future.
 2. All contributions to this repository are subject to the MIT License, which allows for commercial use.
-3. By contributing to Goilerplate, you agree that your contributions may be used in both open-source and potential future commercial aspects of the project.
+3. By contributing to TemplUI, you agree that your contributions may be used in both open-source and potential future commercial aspects of the project.
 4. We value every contribution and will always strive to maintain a strong, open-source core that benefits the entire community.

-We believe this approach allows us to sustainably develop and maintain Goilerplate while keeping it open and accessible to all. If you have any questions or concerns about this, please reach out to us before contributing.
+We believe this approach allows us to sustainably develop and maintain TemplUI while keeping it open and accessible to all. If you have any questions or concerns about this, please reach out to us before contributing.

 ## How Can I Contribute?

@ -25,7 +25,7 @@ We believe this approach allows us to sustainably develop and maintain Goilerpla

 - Use a clear and descriptive title for the issue to identify the suggestion.
 - Provide a step-by-step description of the suggested enhancement in as many details as possible.
- Explain why this enhancement would be useful to most Goilerplate users.
+- Explain why this enhancement would be useful to most TemplUI users.

 ### Pull Requests

@ -60,6 +60,6 @@ This section lists the labels we use to help us track and manage issues and pull

 ## Recognition

-We're committed to giving proper credit and recognition to all contributors. Your contributions, whether they're improvements to documentation, bug fixes, or new features, are invaluable to the growth and success of Goilerplate.
+We're committed to giving proper credit and recognition to all contributors. Your contributions, whether they're improvements to documentation, bug fixes, or new features, are invaluable to the growth and success of TemplUI.

-Thank you for contributing to Goilerplate and helping make it a great tool for the Go community!
+Thank you for contributing to TemplUI and helping make it a great tool for the Go community!
--- a/README.md
+++ b/README.md
@ -1,12 +1,12 @@
-# Goilerplate
+# TemplUI

 Modern UI Components for Go & Templ

-<img src="./assets/img/gopher.svg" alt="Goilerplate Logo" width="200"/>
+<img src="./assets/img/readme.png" />

 ## About

-Goilerplate is a growing library of modern UI components designed specifically for Go and Templ. It leverages Alpine.js for enhanced interactivity and Tailwind CSS for effortless styling. Whether you're building a small website or a large web application, Goilerplate provides the tools you need to create sleek, responsive interfaces with ease.
+TemplUI is a growing library of modern UI components designed specifically for Go and Templ. It leverages Alpine.js for enhanced interactivity and Tailwind CSS for effortless styling. Whether you're building a small website or a large web application, TemplUI provides the tools you need to create sleek, responsive interfaces with ease.

 ## Features

@ -20,23 +20,23 @@ Goilerplate is a growing library of modern UI components designed specifically f

 ## Quick Start

-Visit our [documentation](https://goilerplate.com/docs/how-to-use) for detailed installation and usage instructions.
+Visit our [documentation](https://templui.io/docs/how-to-use) for detailed installation and usage instructions.

-For a ready-to-go setup, check out our [Quickstart Template](https://github.com/axzilla/goilerplate-quickstart).
+For a ready-to-go setup, check out our [Quickstart Template](https://github.com/axzilla/templui-quickstart).

 ## Components

-Explore our growing list of components in the [components documentation](https://goilerplate.com/docs/components).
+Explore our growing list of components in the [components documentation](https://templui.io/docs/components).

 ## Inspiration

-Goilerplate draws inspiration from several popular UI libraries and frameworks:
+TemplUI draws inspiration from several popular UI libraries and frameworks:

 - [shadcn/ui](https://ui.shadcn.com/)
 - [Pines UI](https://devdojo.com/pines)
 - [daisyUI](https://daisyui.com/)

-We're exploring whether to make Goilerplate a strict port of shadcn/ui or to create a unique blend of various inspirations. The project is still evolving, and community feedback will play a crucial role in shaping its direction.
+We're exploring whether to make TemplUI a strict port of shadcn/ui or to create a unique blend of various inspirations. The project is still evolving, and community feedback will play a crucial role in shaping its direction.

 ## Current Status

@ -51,11 +51,11 @@ We welcome contributions from the community! Whether it's adding new components,

 ## License

-Goilerplate is open-source software licensed under the [MIT license](LICENSE).
+TemplUI is open-source software licensed under the [MIT license](LICENSE).

 ## Support

-For support, questions, or discussions, please [open an issue](https://github.com/axzilla/goilerplate/issues) on our GitHub repository or [visit our community (GitHub Discussions)](https://github.com/axzilla/goilerplate/discussions).
+For support, questions, or discussions, please [open an issue](https://github.com/axzilla/templui/issues) on our GitHub repository or [visit our community (GitHub Discussions)](https://github.com/axzilla/templui/discussions).

 ---

--- a/assets/css/input.css
+++ b/assets/css/input.css
@ -14,37 +14,37 @@
    --card-foreground: 240 10% 3.9%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 355.7 100% 97.3%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
-    --ring: 346.8 77.2% 49.8%;
+    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }
  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 95%;
-    --muted: 0 0% 15%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 95%;
-    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 95%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 355.7 100% 97.3%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
-    --accent: 12 6.5% 15.1%;
+    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-    --ring: 346.8 77.2% 49.8%;
+    --destructive-foreground: 0 0% 98%;
+    --ring: 240 4.9% 83.9%;
    --radius: 0.5rem;
  }
 }
--- a/assets/css/output.css
+++ b/assets/css/output.css
@ -565,38 +565,38 @@ video {
  --card-foreground: 240 10% 3.9%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
-  --primary: 346.8 77.2% 49.8%;
-  --primary-foreground: 355.7 100% 97.3%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
-  --ring: 346.8 77.2% 49.8%;
+  --ring: 240 5.9% 10%;
  --radius: 0.5rem;
 }

 .dark {
-  --background: 20 14.3% 4.1%;
-  --foreground: 0 0% 95%;
-  --muted: 0 0% 15%;
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
-  --popover: 0 0% 9%;
-  --popover-foreground: 0 0% 95%;
-  --card: 24 9.8% 10%;
-  --card-foreground: 0 0% 95%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
-  --primary: 346.8 77.2% 49.8%;
-  --primary-foreground: 355.7 100% 97.3%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
-  --accent: 12 6.5% 15.1%;
+  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 85.7% 97.3%;
-  --ring: 346.8 77.2% 49.8%;
+  --destructive-foreground: 0 0% 98%;
+  --ring: 240 4.9% 83.9%;
  --radius: 0.5rem;
 }

@ -703,10 +703,6 @@ body {
  right: 0.75rem;
 }

-.right-4 {
-  right: 1rem;
-}
-
 .top-0 {
  top: 0px;
 }
@ -870,10 +866,6 @@ body {
  height: 0.5rem;
 }

-.h-24 {
-  height: 6rem;
-}
-
 .h-4 {
  height: 1rem;
 }
@ -946,8 +938,8 @@ body {
  width: 66.666667%;
 }

-.w-24 {
-  width: 6rem;
+.w-28 {
+  width: 7rem;
 }

 .w-3\/4 {
@ -1040,11 +1032,6 @@ body {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }

-.-translate-x-1\/4 {
-  --tw-translate-x: -25%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1075,11 +1062,6 @@ body {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }

-.translate-y-1\/3 {
-  --tw-translate-y: 33.333333%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1388,6 +1370,10 @@ body {
  border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
 }

+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-\[--theme-primary\] {
  background-color: var(--theme-primary);
 }
@ -1474,25 +1460,6 @@ body {
  --tw-bg-opacity: 0.5;
 }

-.bg-gradient-to-br {
-  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
-}
-
-.from-gray-100 {
-  --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.to-white {
-  --tw-gradient-to: #fff var(--tw-gradient-to-position);
-}
-
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
 .object-cover {
  -o-object-fit: cover;
     object-fit: cover;
@ -1519,6 +1486,11 @@ body {
  padding-right: 0.5rem;
 }

+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
 .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
@ -1539,6 +1511,11 @@ body {
  padding-right: 2rem;
 }

+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
@ -1729,11 +1706,6 @@ body {
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }

-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
-}
-
 .text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
@ -2155,6 +2127,10 @@ body {
  opacity: 1;
 }

+.hover\:opacity-70:hover {
+  opacity: 0.7;
+}
+
 .hover\:opacity-80:hover {
  opacity: 0.8;
 }
@ -2281,36 +2257,11 @@ body {
  opacity: 0.5;
 }

-.dark\:from-gray-900:is(.dark *) {
-  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.dark\:to-black:is(.dark *) {
-  --tw-gradient-to: #000 var(--tw-gradient-to-position);
-}
-
 .dark\:text-gray-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
 }

-.dark\:text-gray-300:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
-}
-
-.dark\:text-gray-400:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
-}
-
-.dark\:text-white:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
-
 .dark\:hover\:bg-gray-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
@ -2326,10 +2277,6 @@ body {
    margin-bottom: 2.5rem;
  }

-  .sm\:mb-4 {
-    margin-bottom: 1rem;
-  }
-
  .sm\:mb-8 {
    margin-bottom: 2rem;
  }
@ -2342,14 +2289,6 @@ body {
    height: 50%;
  }

-  .sm\:h-32 {
-    height: 8rem;
-  }
-
-  .sm\:w-32 {
-    width: 8rem;
-  }
-
  .sm\:max-w-\[70\%\] {
    max-width: 70%;
  }
@ -2371,16 +2310,6 @@ body {
    padding-bottom: 1rem;
  }

-  .sm\:text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
-  .sm\:text-5xl {
-    font-size: 3rem;
-    line-height: 1;
-  }
-
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
@ -2392,10 +2321,6 @@ body {
    display: flex;
  }

-  .md\:h-40 {
-    height: 10rem;
-  }
-
  .md\:h-6 {
    height: 1.5rem;
  }
@ -2404,8 +2329,8 @@ body {
    width: 50%;
  }

-  .md\:w-40 {
-    width: 10rem;
+  .md\:w-auto {
+    width: auto;
  }

  .md\:flex-row {
@ -2418,6 +2343,11 @@ body {
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
@ -2441,16 +2371,6 @@ body {
    padding-left: 2rem;
    padding-right: 2rem;
  }
-
-  .lg\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
-  .lg\:text-6xl {
-    font-size: 3.75rem;
-    line-height: 1;
-  }
 }

 .\[\&\:\:-moz-range-thumb\]\:h-4::-moz-range-thumb {
--- a/assets/img/favicon.svg
+++ b/assets/img/favicon.svg
@ -0,0 +1,93 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="390" zoomAndPan="magnify"
+    viewBox="0 0 292.5 654.749986" height="873" preserveAspectRatio="xMidYMid meet" version="1.0">
+    <defs>
+        <clipPath id="b827bfb6f4">
+            <path d="M 1 3 L 291 3 L 291 653 L 1 653 Z M 1 3 " clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="ba34367ddc">
+            <path
+                d="M 4.796875 653.679688 L -0.00390625 4.558594 L 286.75 2.4375 L 291.550781 651.5625 Z M 4.796875 653.679688 "
+                clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="1103dd93c8">
+            <path
+                d="M 4.796875 653.679688 L -0.00390625 4.558594 L 286.75 2.4375 L 291.550781 651.5625 Z M 4.796875 653.679688 "
+                clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="cfa730a46f">
+            <path d="M 31 35 L 258 35 L 258 262 L 31 262 Z M 31 35 " clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="243bc50572">
+            <path
+                d="M 4.796875 653.679688 L -0.00390625 4.558594 L 286.75 2.4375 L 291.550781 651.5625 Z M 4.796875 653.679688 "
+                clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="7c301f3711">
+            <path
+                d="M 4.796875 653.679688 L -0.00390625 4.558594 L 286.75 2.4375 L 291.550781 651.5625 Z M 4.796875 653.679688 "
+                clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="8d8a9f881c">
+            <path d="M 1 1 L 291 1 L 291 651 L 1 651 Z M 1 1 " clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="22427aa6a0">
+            <path
+                d="M 4.796875 651.5625 L -0.00390625 2.4375 L 286.75 0.316406 L 291.550781 649.441406 Z M 4.796875 651.5625 "
+                clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="8918a72a83">
+            <path
+                d="M 4.796875 651.5625 L -0.00390625 2.4375 L 286.75 0.316406 L 291.550781 649.441406 Z M 4.796875 651.5625 "
+                clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="242ae7acd3">
+            <path d="M 31 33 L 258 33 L 258 260 L 31 260 Z M 31 33 " clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="dbf0d4c44e">
+            <path
+                d="M 4.796875 651.5625 L -0.00390625 2.4375 L 286.75 0.316406 L 291.550781 649.441406 Z M 4.796875 651.5625 "
+                clip-rule="nonzero" />
+        </clipPath>
+        <clipPath id="3534d90e2e">
+            <path
+                d="M 4.796875 651.5625 L -0.00390625 2.4375 L 286.75 0.316406 L 291.550781 649.441406 Z M 4.796875 651.5625 "
+                clip-rule="nonzero" />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#b827bfb6f4)">
+        <g clip-path="url(#ba34367ddc)">
+            <g clip-path="url(#1103dd93c8)">
+                <path fill="#000000"
+                    d="M 143.359375 3.617188 C 222.429688 3.03125 287 66.652344 287.582031 145.71875 L 290.265625 508.398438 C 290.847656 587.464844 227.226562 652.035156 148.160156 652.621094 C 69.09375 653.207031 4.523438 589.582031 3.9375 510.515625 L 1.257812 147.835938 C 0.671875 68.769531 64.292969 4.199219 143.359375 3.617188 Z M 143.359375 3.617188 "
+                    fill-opacity="1" fill-rule="nonzero" />
+            </g>
+        </g>
+    </g>
+    <g clip-path="url(#cfa730a46f)">
+        <g clip-path="url(#243bc50572)">
+            <g clip-path="url(#7c301f3711)">
+                <path fill="#f4f4f4"
+                    d="M 143.597656 35.429688 C 206.148438 34.96875 257.230469 85.300781 257.691406 147.847656 C 258.152344 210.402344 207.820312 261.480469 145.269531 261.945312 C 82.722656 262.40625 31.636719 212.074219 31.175781 149.523438 C 30.714844 86.972656 81.046875 35.890625 143.597656 35.429688 Z M 143.597656 35.429688 "
+                    fill-opacity="1" fill-rule="nonzero" />
+            </g>
+        </g>
+    </g>
+    <g clip-path="url(#8d8a9f881c)">
+        <g clip-path="url(#22427aa6a0)">
+            <g clip-path="url(#8918a72a83)">
+                <path fill="#000000"
+                    d="M 143.359375 1.496094 C 222.429688 0.910156 287 64.53125 287.582031 143.597656 L 290.265625 506.277344 C 290.847656 585.347656 227.226562 649.917969 148.160156 650.5 C 69.09375 651.085938 4.523438 587.464844 3.9375 508.394531 L 1.257812 145.714844 C 0.671875 66.648438 64.292969 2.078125 143.359375 1.496094 Z M 143.359375 1.496094 "
+                    fill-opacity="1" fill-rule="nonzero" />
+            </g>
+        </g>
+    </g>
+    <g clip-path="url(#242ae7acd3)">
+        <g clip-path="url(#dbf0d4c44e)">
+            <g clip-path="url(#3534d90e2e)">
+                <path fill="#f4f4f4"
+                    d="M 143.597656 33.308594 C 206.148438 32.847656 257.230469 83.179688 257.691406 145.730469 C 258.152344 208.28125 207.820312 259.363281 145.269531 259.824219 C 82.722656 260.285156 31.636719 209.957031 31.175781 147.402344 C 30.714844 84.855469 81.046875 33.773438 143.597656 33.308594 Z M 143.597656 33.308594 "
+                    fill-opacity="1" fill-rule="nonzero" />
+            </g>
+        </g>
+    </g>
+</svg>
--- a/assets/img/readme.png
+++ b/assets/img/readme.png
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@ -3,13 +3,12 @@ package main
 import (
 	"fmt"
 	"net/http"
-	// "path/filepath"

 	"github.com/a-h/templ"
-	"github.com/axzilla/goilerplate/assets"
-	"github.com/axzilla/goilerplate/internals/config"
-	"github.com/axzilla/goilerplate/internals/middleware"
-	"github.com/axzilla/goilerplate/internals/ui/pages"
+	"github.com/axzilla/templui/assets"
+	"github.com/axzilla/templui/internals/config"
+	"github.com/axzilla/templui/internals/middleware"
+	"github.com/axzilla/templui/internals/ui/pages"
 )

 func main() {
@ -29,6 +28,7 @@ func main() {
 	mux.Handle("GET /docs/components/accordion", templ.Handler(pages.Accordion()))
 	mux.Handle("GET /docs/components/alert", templ.Handler(pages.Alert()))
 	mux.Handle("GET /docs/components/avatar", templ.Handler(pages.Avatar()))
+	mux.Handle("GET /docs/components/badge", templ.Handler(pages.Badge()))
 	mux.Handle("GET /docs/components/button", templ.Handler(pages.Button()))
 	mux.Handle("GET /docs/components/card", templ.Handler(pages.Card()))
 	mux.Handle("GET /docs/components/checkbox", templ.Handler(pages.Checkbox()))
@ -54,28 +54,7 @@ func main() {
 func SetupAssetsRoutes(mux *http.ServeMux) {
 	var isDevelopment = config.AppConfig.GoEnv != "production"

-	// mimeTypes := map[string]string{
-	// 	".css":   "text/css; charset=utf-8",
-	// 	".js":    "application/javascript; charset=utf-8",
-	// 	".svg":   "image/svg+xml",
-	// 	".html":  "text/html; charset=utf-8",
-	// 	".jpg":   "image/jpeg",
-	// 	".jpeg":  "image/jpeg",
-	// 	".png":   "image/png",
-	// 	".gif":   "image/gif",
-	// 	".woff":  "font/woff",
-	// 	".woff2": "font/woff2",
-	// 	".ttf":   "font/ttf",
-	// 	".ico":   "image/x-icon",
-	// }
-
 	assetHandler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		// ext := filepath.Ext(r.URL.Path)
-
-		// if mimeType, ok := mimeTypes[ext]; ok {
-		// 	w.Header().Set("Content-Type", mimeType)
-		// }
-
 		if isDevelopment {
 			w.Header().Set("Cache-Control", "no-store")
 		}
--- a/go.mod
+++ b/go.mod
@ -1,4 +1,4 @@
-module github.com/axzilla/goilerplate
+module github.com/axzilla/templui

 go 1.23.3

--- a/internals/middleware/preview.go
+++ b/internals/middleware/preview.go
@ -5,7 +5,7 @@ import (
 	"net/http"
 	"strings"

-	"github.com/axzilla/goilerplate/internals/config"
+	"github.com/axzilla/templui/internals/config"
 )

 func WithPreviewCheck(next http.Handler) http.Handler {
--- a/internals/shared/menudata.go
+++ b/internals/shared/menudata.go
@ -45,6 +45,10 @@ var Sections = []Section{
 				Text: "Avatar",
 				Href: "/docs/components/avatar",
 			},
+			{
+				Text: "Badge",
+				Href: "/docs/components/badge",
+			},
 			{
 				Text: "Button",
 				Href: "/docs/components/button",
--- a/internals/ui/icons/templui.templ
+++ b/internals/ui/icons/templui.templ
@ -0,0 +1,161 @@
+package wrappedicons
+
+templ TemplUI(class string) {
+	<svg
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		width="537"
+		zoomAndPan="magnify"
+		viewBox="0 0 402.75 150.749998"
+		height="201"
+		preserveAspectRatio="xMidYMid meet"
+		version="1.0"
+		class={ class }
+	>
+		<defs>
+			<g></g>
+			<clipPath id="c16ff7f062">
+				<path d="M 0.207031 29 L 42 29 L 42 121 L 0.207031 121 Z M 0.207031 29 " clip-rule="nonzero"></path>
+			</clipPath>
+			<clipPath id="95a383287f">
+				<path
+					d="M 0.878906 120.75 L 0.203125 29.40625 L 40.636719 29.105469 L 41.3125 120.453125 Z M 0.878906 120.75 "
+					clip-rule="nonzero"
+				></path>
+			</clipPath>
+			<clipPath id="7d87ccfcfe">
+				<path
+					d="M 0.878906 120.75 L 0.203125 29.40625 L 40.636719 29.105469 L 41.3125 120.453125 Z M 0.878906 120.75 "
+					clip-rule="nonzero"
+				></path>
+			</clipPath>
+			<clipPath id="d259c1161d">
+				<path d="M 4 33 L 37 33 L 37 66 L 4 66 Z M 4 33 " clip-rule="nonzero"></path>
+			</clipPath>
+			<clipPath id="e24491796d">
+				<path
+					d="M 0.878906 120.75 L 0.203125 29.40625 L 40.636719 29.105469 L 41.3125 120.453125 Z M 0.878906 120.75 "
+					clip-rule="nonzero"
+				></path>
+			</clipPath>
+			<clipPath id="ac43b7a41f">
+				<path
+					d="M 0.878906 120.75 L 0.203125 29.40625 L 40.636719 29.105469 L 41.3125 120.453125 Z M 0.878906 120.75 "
+					clip-rule="nonzero"
+				></path>
+			</clipPath>
+			<clipPath id="08e289190a">
+				<path
+					d="M 341.128906 60.855469 L 401.777344 60.855469 L 401.777344 108.027344 L 341.128906 108.027344 Z M 341.128906 60.855469 "
+					clip-rule="nonzero"
+				></path>
+			</clipPath>
+			<clipPath id="2651da1633">
+				<path
+					d="M 352.359375 60.855469 L 390.488281 60.855469 C 396.691406 60.855469 401.71875 65.886719 401.71875 72.085938 L 401.71875 96.910156 C 401.71875 103.113281 396.691406 108.140625 390.488281 108.140625 L 352.359375 108.140625 C 346.15625 108.140625 341.128906 103.113281 341.128906 96.910156 L 341.128906 72.085938 C 341.128906 65.886719 346.15625 60.855469 352.359375 60.855469 Z M 352.359375 60.855469 "
+					clip-rule="nonzero"
+				></path>
+			</clipPath>
+		</defs>
+		<g clip-path="url(#c16ff7f062)">
+			<g clip-path="url(#95a383287f)">
+				<g clip-path="url(#7d87ccfcfe)">
+					<path
+						fill="currentColor"
+						d="M 20.355469 29.386719 C 31.46875 29.300781 40.542969 38.246094 40.625 49.359375 L 41.003906 100.332031 C 41.085938 111.445312 32.144531 120.519531 21.03125 120.601562 C 9.917969 120.683594 0.84375 111.742188 0.761719 100.628906 L 0.382812 49.65625 C 0.300781 38.542969 9.242188 29.46875 20.355469 29.386719 Z M 20.355469 29.386719 "
+						fill-rule="nonzero"
+					></path>
+				</g>
+			</g>
+		</g>
+		<g clip-path="url(#d259c1161d)">
+			<g clip-path="url(#e24491796d)">
+				<g clip-path="url(#ac43b7a41f)">
+					<path
+						fill="currentColor"
+						class="text-primary-foreground"
+						d="M 20.390625 33.855469 C 29.179688 33.792969 36.359375 40.867188 36.425781 49.65625 C 36.488281 58.449219 29.414062 65.628906 20.625 65.691406 C 11.832031 65.757812 4.652344 58.683594 4.589844 49.890625 C 4.523438 41.101562 11.597656 33.921875 20.390625 33.855469 Z M 20.390625 33.855469 "
+						fill-rule="nonzero"
+					></path>
+				</g>
+			</g>
+		</g>
+		<g clip-path="url(#08e289190a)">
+			<g clip-path="url(#2651da1633)">
+				<path
+					stroke-linecap="butt"
+					transform="matrix(0.748758, 0, 0, 0.748758, 341.128444, 60.8572)"
+					fill="none"
+					stroke-linejoin="miter"
+					d="M 14.999408 -0.00231217 L 65.922259 -0.00231217 C 74.206808 -0.00231217 80.92105 6.717146 80.92105 14.996479 L 80.92105 48.150327 C 80.92105 56.434877 74.206808 63.149118 65.922259 63.149118 L 14.999408 63.149118 C 6.714859 63.149118 0.00061754 56.434877 0.00061754 48.150327 L 0.00061754 14.996479 C 0.00061754 6.717146 6.714859 -0.00231217 14.999408 -0.00231217 Z M 14.999408 -0.00231217 "
+					stroke="currentColor"
+					stroke-width="16"
+					stroke-opacity="1"
+					stroke-miterlimit="4"
+				></path>
+			</g>
+		</g>
+		<g fill="currentColor">
+			<g transform="translate(354.914085, 95.022556)">
+				<g>
+					<path
+						d="M 11.328125 0.453125 C 9.753906 0.453125 8.394531 0.234375 7.25 -0.203125 C 6.113281 -0.648438 5.175781 -1.265625 4.4375 -2.046875 C 3.695312 -2.835938 3.148438 -3.773438 2.796875 -4.859375 C 2.441406 -5.941406 2.265625 -7.140625 2.265625 -8.453125 L 2.265625 -22.375 L 7.296875 -22.375 L 7.296875 -8.875 C 7.296875 -7.96875 7.394531 -7.195312 7.59375 -6.5625 C 7.800781 -5.925781 8.082031 -5.410156 8.4375 -5.015625 C 8.789062 -4.617188 9.21875 -4.332031 9.71875 -4.15625 C 10.226562 -3.988281 10.785156 -3.90625 11.390625 -3.90625 C 12.617188 -3.90625 13.613281 -4.28125 14.375 -5.03125 C 15.144531 -5.789062 15.53125 -7.070312 15.53125 -8.875 L 15.53125 -22.375 L 20.5625 -22.375 L 20.5625 -8.453125 C 20.5625 -7.140625 20.378906 -5.9375 20.015625 -4.84375 C 19.648438 -3.75 19.085938 -2.804688 18.328125 -2.015625 C 17.578125 -1.234375 16.617188 -0.625 15.453125 -0.1875 C 14.296875 0.238281 12.921875 0.453125 11.328125 0.453125 Z M 11.328125 0.453125 "
+					></path>
+				</g>
+			</g>
+		</g>
+		<g fill="currentColor">
+			<g transform="translate(377.734765, 95.022556)">
+				<g>
+					<path d="M 2.578125 -22.375 L 7.625 -22.375 L 7.625 0 L 2.578125 0 Z M 2.578125 -22.375 "></path>
+				</g>
+			</g>
+		</g>
+		<g fill="currentColor">
+			<g transform="translate(61.990003, 108.314399)">
+				<g>
+					<path
+						d="M 5.96875 -60.34375 L 19.65625 -62.546875 L 19.65625 -48.3125 L 36.09375 -48.3125 L 36.09375 -36.921875 L 19.65625 -36.921875 L 19.65625 -19.9375 C 19.65625 -17.050781 20.160156 -14.75 21.171875 -13.03125 C 22.179688 -11.320312 24.21875 -10.46875 27.28125 -10.46875 C 28.75 -10.46875 30.265625 -10.601562 31.828125 -10.875 C 33.390625 -11.15625 34.8125 -11.539062 36.09375 -12.03125 L 38.015625 -1.375 C 36.367188 -0.707031 34.535156 -0.128906 32.515625 0.359375 C 30.492188 0.859375 28.015625 1.109375 25.078125 1.109375 C 21.335938 1.109375 18.242188 0.601562 15.796875 -0.40625 C 13.347656 -1.414062 11.390625 -2.820312 9.921875 -4.625 C 8.453125 -6.4375 7.425781 -8.628906 6.84375 -11.203125 C 6.257812 -13.773438 5.96875 -16.625 5.96875 -19.75 Z M 5.96875 -60.34375 "
+					></path>
+				</g>
+			</g>
+		</g>
+		<g fill="currentColor">
+			<g transform="translate(102.766936, 108.314399)">
+				<g>
+					<path
+						d="M 4.140625 -23.78125 C 4.140625 -28.070312 4.796875 -31.820312 6.109375 -35.03125 C 7.421875 -38.25 9.148438 -40.929688 11.296875 -43.078125 C 13.441406 -45.222656 15.90625 -46.84375 18.6875 -47.9375 C 21.476562 -49.039062 24.34375 -49.59375 27.28125 -49.59375 C 34.132812 -49.59375 39.550781 -47.492188 43.53125 -43.296875 C 47.507812 -39.109375 49.5 -32.941406 49.5 -24.796875 C 49.5 -24.003906 49.46875 -23.128906 49.40625 -22.171875 C 49.34375 -21.222656 49.285156 -20.382812 49.234375 -19.65625 L 18.1875 -19.65625 C 18.488281 -16.84375 19.800781 -14.609375 22.125 -12.953125 C 24.457031 -11.296875 27.582031 -10.46875 31.5 -10.46875 C 34.007812 -10.46875 36.472656 -10.695312 38.890625 -11.15625 C 41.316406 -11.613281 43.289062 -12.179688 44.8125 -12.859375 L 46.65625 -1.75 C 45.914062 -1.375 44.929688 -1.003906 43.703125 -0.640625 C 42.484375 -0.273438 41.125 0.0390625 39.625 0.3125 C 38.125 0.59375 36.515625 0.820312 34.796875 1 C 33.085938 1.1875 31.378906 1.28125 29.671875 1.28125 C 25.316406 1.28125 21.53125 0.640625 18.3125 -0.640625 C 15.101562 -1.929688 12.441406 -3.691406 10.328125 -5.921875 C 8.210938 -8.160156 6.648438 -10.804688 5.640625 -13.859375 C 4.640625 -16.921875 4.140625 -20.226562 4.140625 -23.78125 Z M 36.28125 -29.015625 C 36.21875 -30.179688 36.015625 -31.316406 35.671875 -32.421875 C 35.335938 -33.523438 34.816406 -34.503906 34.109375 -35.359375 C 33.410156 -36.210938 32.523438 -36.914062 31.453125 -37.46875 C 30.378906 -38.019531 29.050781 -38.296875 27.46875 -38.296875 C 25.9375 -38.296875 24.617188 -38.035156 23.515625 -37.515625 C 22.410156 -36.992188 21.488281 -36.304688 20.75 -35.453125 C 20.019531 -34.597656 19.453125 -33.601562 19.046875 -32.46875 C 18.648438 -31.332031 18.363281 -30.179688 18.1875 -29.015625 Z M 36.28125 -29.015625 "
+					></path>
+				</g>
+			</g>
+		</g>
+		<g fill="currentColor">
+			<g transform="translate(156.401463, 108.314399)">
+				<g>
+					<path
+						d="M 32.96875 -25.625 C 32.96875 -30.03125 32.398438 -33.148438 31.265625 -34.984375 C 30.140625 -36.828125 28.195312 -37.75 25.4375 -37.75 C 24.582031 -37.75 23.695312 -37.703125 22.78125 -37.609375 C 21.863281 -37.515625 20.972656 -37.40625 20.109375 -37.28125 L 20.109375 0 L 6.421875 0 L 6.421875 -46.65625 C 7.585938 -46.957031 8.953125 -47.273438 10.515625 -47.609375 C 12.078125 -47.953125 13.726562 -48.257812 15.46875 -48.53125 C 17.21875 -48.8125 19.007812 -49.023438 20.84375 -49.171875 C 22.6875 -49.328125 24.492188 -49.40625 26.265625 -49.40625 C 29.753906 -49.40625 32.582031 -48.960938 34.75 -48.078125 C 36.925781 -47.191406 38.722656 -46.132812 40.140625 -44.90625 C 42.097656 -46.320312 44.347656 -47.425781 46.890625 -48.21875 C 49.429688 -49.007812 51.769531 -49.40625 53.90625 -49.40625 C 57.769531 -49.40625 60.941406 -48.867188 63.421875 -47.796875 C 65.898438 -46.734375 67.875 -45.21875 69.34375 -43.25 C 70.8125 -41.289062 71.820312 -38.960938 72.375 -36.265625 C 72.925781 -33.578125 73.203125 -30.582031 73.203125 -27.28125 L 73.203125 0 L 59.515625 0 L 59.515625 -25.625 C 59.515625 -30.03125 58.945312 -33.148438 57.8125 -34.984375 C 56.675781 -36.828125 54.734375 -37.75 51.984375 -37.75 C 51.242188 -37.75 50.21875 -37.5625 48.90625 -37.1875 C 47.59375 -36.820312 46.503906 -36.363281 45.640625 -35.8125 C 46.078125 -34.40625 46.351562 -32.921875 46.46875 -31.359375 C 46.59375 -29.796875 46.65625 -28.128906 46.65625 -26.359375 L 46.65625 0 L 32.96875 0 Z M 32.96875 -25.625 "
+					></path>
+				</g>
+			</g>
+		</g>
+		<g fill="currentColor">
+			<g transform="translate(235.567497, 108.314399)">
+				<g>
+					<path
+						d="M 37.375 -23.78125 C 37.375 -28.007812 36.425781 -31.394531 34.53125 -33.9375 C 32.632812 -36.476562 29.816406 -37.75 26.078125 -37.75 C 24.859375 -37.75 23.726562 -37.703125 22.6875 -37.609375 C 21.644531 -37.515625 20.785156 -37.40625 20.109375 -37.28125 L 20.109375 -12.578125 C 20.972656 -12.023438 22.09375 -11.566406 23.46875 -11.203125 C 24.84375 -10.835938 26.234375 -10.65625 27.640625 -10.65625 C 34.128906 -10.65625 37.375 -15.03125 37.375 -23.78125 Z M 51.34375 -24.15625 C 51.34375 -20.414062 50.878906 -17.015625 49.953125 -13.953125 C 49.035156 -10.898438 47.691406 -8.269531 45.921875 -6.0625 C 44.148438 -3.851562 41.945312 -2.132812 39.3125 -0.90625 C 36.675781 0.3125 33.644531 0.921875 30.21875 0.921875 C 28.320312 0.921875 26.546875 0.734375 24.890625 0.359375 C 23.234375 -0.00390625 21.640625 -0.519531 20.109375 -1.1875 L 20.109375 16.984375 L 6.421875 16.984375 L 6.421875 -46.65625 C 7.648438 -47.019531 9.0625 -47.367188 10.65625 -47.703125 C 12.25 -48.046875 13.914062 -48.335938 15.65625 -48.578125 C 17.40625 -48.828125 19.179688 -49.023438 20.984375 -49.171875 C 22.796875 -49.328125 24.523438 -49.40625 26.171875 -49.40625 C 30.148438 -49.40625 33.703125 -48.804688 36.828125 -47.609375 C 39.953125 -46.421875 42.582031 -44.738281 44.71875 -42.5625 C 46.863281 -40.394531 48.503906 -37.75 49.640625 -34.625 C 50.773438 -31.5 51.34375 -28.007812 51.34375 -24.15625 Z M 51.34375 -24.15625 "
+					></path>
+				</g>
+			</g>
+		</g>
+		<g fill="currentColor">
+			<g transform="translate(291.038821, 108.314399)">
+				<g>
+					<path
+						d="M 25.71875 0.921875 C 21.738281 0.859375 18.507812 0.429688 16.03125 -0.359375 C 13.550781 -1.160156 11.585938 -2.28125 10.140625 -3.71875 C 8.703125 -5.15625 7.722656 -6.898438 7.203125 -8.953125 C 6.679688 -11.003906 6.421875 -13.316406 6.421875 -15.890625 L 6.421875 -69.0625 L 20.109375 -71.265625 L 20.109375 -18.640625 C 20.109375 -17.421875 20.203125 -16.320312 20.390625 -15.34375 C 20.578125 -14.363281 20.925781 -13.535156 21.4375 -12.859375 C 21.957031 -12.179688 22.707031 -11.628906 23.6875 -11.203125 C 24.675781 -10.773438 25.992188 -10.5 27.640625 -10.375 Z M 25.71875 0.921875 "
+					></path>
+				</g>
+			</g>
+		</g>
+	</svg>
+}
--- a/internals/ui/layouts/base.templ
+++ b/internals/ui/layouts/base.templ
@ -1,15 +1,15 @@
 package layouts

 import (
-	"github.com/axzilla/goilerplate/internals/config"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
+	"github.com/axzilla/templui/internals/config"
+	"github.com/axzilla/templui/internals/ui/modules"
 )

 templ BaseLayout() {
 	<!DOCTYPE html>
 	<html lang="en" class="h-full">
 		<head>
-			<title>Goilerplate - Modern UI Components for Go & Templ</title>
+			<title>TemplUI - Modern UI Components for Go & Templ</title>
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<style>
@ -21,10 +21,10 @@ templ BaseLayout() {
      </script>
 			if config.AppConfig.GoEnv == "production" {
 				<!-- Plausible Analytics -->
-				<script defer data-domain="goilerplate.com" src="https://plausible.axeladrian.com/js/script.js"></script>
+				<script defer data-domain="templui.io" src="https://plausible.axeladrian.com/js/script.js"></script>
 			}
 			<!-- Favicon -->
-			<link rel="icon" href="/assets/img/gopher.svg" type="image/x-icon"/>
+			<link rel="icon" href="/assets/img/favicon.svg" type="image/x-icon"/>
 			<!-- Tailwind CSS (local) -->
 			<link href="/assets/css/output.css" rel="stylesheet"/>
 			<!-- Alpine.js -->
--- a/internals/ui/layouts/docs.templ
+++ b/internals/ui/layouts/docs.templ
@ -1,6 +1,6 @@
 package layouts

-import "github.com/axzilla/goilerplate/internals/ui/modules"
+import "github.com/axzilla/templui/internals/ui/modules"

 templ DocsLayout() {
 	@BaseLayout() {
--- a/internals/ui/modules/example_wrapper.templ
+++ b/internals/ui/modules/example_wrapper.templ
@ -1,8 +1,8 @@
 package modules

 import (
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
-	"github.com/axzilla/goilerplate/pkg/components"
+	"github.com/axzilla/templui/internals/ui/showcase"
+	"github.com/axzilla/templui/pkg/components"
 )

 type showcaseWrapperProps struct {
--- a/internals/ui/modules/footer.templ
+++ b/internals/ui/modules/footer.templ
@ -9,7 +9,7 @@ templ Footer() {
 	<footer class="py-4 text-center text-sm text-muted-foreground border-t">
 		<div class="container">
 			<p class="mb-4 font-semibold">
-				{ fmt.Sprintf("© %d goilerplate.", time.Now().Year()) } Stupid code not excluded.
+				{ fmt.Sprintf("© %d templui.", time.Now().Year()) } Stupid code not excluded.
 			</p>
 		</div>
 	</footer>
--- a/internals/ui/modules/navbar.templ
+++ b/internals/ui/modules/navbar.templ
@ -1,10 +1,10 @@
 package modules

 import (
-	"github.com/axzilla/goilerplate/internals/shared"
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
-	"github.com/axzilla/goilerplate/internals/ui/icons"
+	"github.com/axzilla/templui/internals/shared"
+	wrappedicons "github.com/axzilla/templui/internals/ui/icons"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ Navbar() {
@ -12,9 +12,8 @@ templ Navbar() {
 		<div class="container mx-auto px-4 flex justify-between items-center">
 			<div class="flex items-center">
 				@NavbarMobileMenu()
-				<a href="/" class="font-extrabold flex items-center">
-					<img src="/assets/img/gopher.svg" alt="logo" class="w-10 mr-2"/>
-					<span>goilerplate</span>
+				<a href="/">
+					@wrappedicons.TemplUI("w-28 h-auto")
 				</a>
 			</div>
 			<div class="hidden md:flex gap-4 items-center">
@ -26,7 +25,7 @@ templ Navbar() {
 					Size:     components.ButtonSizeIcon,
 					IconLeft: wrappedicons.GitHub(24),
 					Variant:  "ghost",
-					Href:     "https://github.com/axzilla/goilerplate",
+					Href:     "https://github.com/axzilla/templui",
 					Target:   "_blank",
 				})
 				@components.Button(components.ButtonProps{
--- a/internals/ui/modules/preview_indicator.templ
+++ b/internals/ui/modules/preview_indicator.templ
@ -1,6 +1,6 @@
 package modules 

-import "github.com/axzilla/goilerplate/pkg/icons"
+import "github.com/axzilla/templui/pkg/icons"

 templ PreviewIndicator() {
 	<div
@ -24,7 +24,7 @@ templ PreviewIndicator() {
 					:class="expanded ? 'ml-3 max-w-[200px] opacity-100' : 'max-w-0 opacity-0'"
 				>
 					<div class="border-l pl-3 whitespace-nowrap">
-						<a href="https://goilerplate.com" class="text-sm hover:underline flex items-center gap-1">
+						<a href="https://templui.io" class="text-sm hover:underline flex items-center gap-1">
 							Production Site
 							@icons.ArrowRight(icons.IconProps{Size: "14"})
 						</a>
--- a/internals/ui/modules/sidebar.templ
+++ b/internals/ui/modules/sidebar.templ
@ -1,6 +1,6 @@
 package modules

-import "github.com/axzilla/goilerplate/internals/shared"
+import "github.com/axzilla/templui/internals/shared"

 templ Sidebar() {
 	<aside class="h-full">
--- a/internals/ui/modules/sidebar_right.templ
+++ b/internals/ui/modules/sidebar_right.templ
@ -1,6 +1,6 @@
 package modules

-import "github.com/axzilla/goilerplate/pkg/icons"
+import "github.com/axzilla/templui/pkg/icons"

 type SidebarRightLItem struct {
 	ImageSrc string
--- a/internals/ui/modules/themeswitcher.templ
+++ b/internals/ui/modules/themeswitcher.templ
@ -1,8 +1,8 @@
 package modules

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ ThemeSwitcher() {
--- a/internals/ui/pages/accordion.templ
+++ b/internals/ui/pages/accordion.templ
@ -2,9 +2,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Accordion() {
--- a/internals/ui/pages/alert.templ
+++ b/internals/ui/pages/alert.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Alert() {
--- a/internals/ui/pages/avatar.templ
+++ b/internals/ui/pages/avatar.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Avatar() {
--- a/internals/ui/pages/badge.templ
+++ b/internals/ui/pages/badge.templ
@ -0,0 +1,29 @@
+package pages
+
+import (
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
+)
+
+templ Badge() {
+	@layouts.DocsLayout() {
+		@modules.PageWrapper(modules.PageWrapperProps{
+			Name:        "Badge",
+			Description: templ.Raw("Badge component is used to display a small amount of information in a visual style."),
+		}) {
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Variants",
+				ShowcaseFile:      showcase.BadgeVariants(),
+				PreviewCodeFile:   "badge_variants.templ",
+				ComponentCodeFile: "badge.templ",
+			})
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Icons",
+				ShowcaseFile:      showcase.BadgeIcons(),
+				PreviewCodeFile:   "badge_icons.templ",
+				ComponentCodeFile: "badge.templ",
+			})
+		}
+	}
+}
--- a/internals/ui/pages/button.templ
+++ b/internals/ui/pages/button.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Button() {
@ -24,18 +24,6 @@ templ Button() {
 				PreviewCodeFile:   "button_sizes.templ",
 				ComponentCodeFile: "button.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "Full Width",
-				ShowcaseFile:      showcase.ButtonFullwidth(),
-				PreviewCodeFile:   "button_fullwidth.templ",
-				ComponentCodeFile: "button.templ",
-			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "With Click",
-				ShowcaseFile:      showcase.ButtonWithClick(),
-				PreviewCodeFile:   "button_with_click.templ",
-				ComponentCodeFile: "button.templ",
-			})
 			@modules.ExampleWrapper(modules.ExampleWrapperProps{
 				SectionName:       "Disabled",
 				ShowcaseFile:      showcase.ButtonDisabled(),
--- a/internals/ui/pages/card.templ
+++ b/internals/ui/pages/card.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Card() {
--- a/internals/ui/pages/checkbox.templ
+++ b/internals/ui/pages/checkbox.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Checkbox() {
--- a/internals/ui/pages/datepicker.templ
+++ b/internals/ui/pages/datepicker.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Datepicker() {
--- a/internals/ui/pages/dropdown_menu.templ
+++ b/internals/ui/pages/dropdown_menu.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ DropdownMenu() {
--- a/internals/ui/pages/form.templ
+++ b/internals/ui/pages/form.templ
@ -1,10 +1,10 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
-	"github.com/axzilla/goilerplate/pkg/components"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
+	"github.com/axzilla/templui/pkg/components"
 )

 templ Form() {
--- a/internals/ui/pages/how_to_use.templ
+++ b/internals/ui/pages/how_to_use.templ
@ -1,8 +1,8 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
 )

 var installGo = `go version`
@ -176,11 +176,11 @@ var inputCss = `@tailwind base;
  }
 }`

-var installGoilerplate = `go get github.com/axzilla/goilerplate`
+var installTemplUI = `go get github.com/axzilla/templui`

-var goPath = `"${GOPATH}/pkg/mod/github.com/axzilla/goilerplate@*/**/*.{go,templ}"`
+var goPath = `"${GOPATH}/pkg/mod/github.com/axzilla/templui@*/**/*.{go,templ}"`

-var usingComponents = `import "github.com/axzilla/goilerplate/pkg/components"
+var usingComponents = `import "github.com/axzilla/templui/pkg/components"

@components.Button(components.ButtonProps{Text: "Click me"})`

@ -189,11 +189,11 @@ templ HowToUse() {
 		<div>
 			<div class="mb-16">
 				<h1 class="text-3xl font-bold mb-2">How To Use</h1>
-				<p class="mb-4 text-muted-foreground">Learn how to integrate Goilerplate into your projects.</p>
+				<p class="mb-4 text-muted-foreground">Learn how to integrate TemplUI into your projects.</p>
 			</div>
 			<section class="mb-12">
 				<h2 class="text-2xl font-semibold mb-4 text-primary">Requirements</h2>
-				<p class="mb-4">Before using Goilerplate, ensure you have these tools installed:</p>
+				<p class="mb-4">Before using TemplUI, ensure you have these tools installed:</p>
 				<div class="space-y-6">
 					<div>
 						<h3 class="text-xl font-semibold mb-2">1. Go (1.20 or later)</h3>
@ -226,7 +226,7 @@ templ HowToUse() {
 			</section>
 			<section class="mb-12">
 				<h2 class="text-2xl font-semibold mb-4 text-primary">Base Configuration</h2>
-				<p class="mb-4">Goilerplate provides pre-configured styles and themes. You'll need these files in your project:</p>
+				<p class="mb-4">TemplUI provides pre-configured styles and themes. You'll need these files in your project:</p>
 				<div class="space-y-6">
 					<div>
 						<h3 class="text-xl font-semibold mb-2">1. Tailwind Configuration</h3>
@ -302,27 +302,27 @@ templ HowToUse() {
 			</section>
 			<section class="mb-12">
 				<h2 class="text-2xl font-semibold mb-4 text-primary">Installation Options</h2>
-				<p class="mb-4">After installing the requirements, you have three ways to use Goilerplate:</p>
+				<p class="mb-4">After installing the requirements, you have three ways to use TemplUI:</p>
 				<div class="space-y-8">
 					<div>
 						<h3 class="text-xl font-semibold mb-2">1. Quickstart Template (Recommended for new projects)</h3>
 						<p class="mb-4">
-							For a ready-to-go setup, check out our <a href="https://github.com/axzilla/goilerplate-quickstart" class="text-primary underline">Goilerplate Quickstart</a> template. 
-							It includes all requirements and configurations, using Goilerplate as a package library by default but can be easily modified to use copied components or a mix of both approaches.
+							For a ready-to-go setup, check out our <a href="https://github.com/axzilla/templui-quickstart" class="text-primary underline">TemplUI Quickstart</a> template. 
+							It includes all requirements and configurations, using TemplUI as a package library by default but can be easily modified to use copied components or a mix of both approaches.
 						</p>
 					</div>
 					<div>
 						<h3 class="text-xl font-semibold mb-2">2. Package Installation</h3>
-						<p class="mb-4">Install Goilerplate as a Go package:</p>
+						<p class="mb-4">Install TemplUI as a Go package:</p>
 						<div class="mb-4">
-							@modules.CodeSnippet(installGoilerplate, "markdown")
+							@modules.CodeSnippet(installTemplUI, "markdown")
 						</div>
 						// @components.Card(components.CardProps{}) {
 						// @components.CardHeader() {
 						<h4 class="font-semibold mb-2">*Required: Additional Tailwind Configuration</h4>
 						// }
 						// @components.CardContent() {
-						<p class="mb-2">When using Goilerplate as a package, add this to your tailwind.config.json content array:</p>
+						<p class="mb-2">When using TemplUI as a package, add this to your tailwind.config.json content array:</p>
 						<div class="mb-4">
 							@modules.CodeSnippet(goPath, "markdown")
 						</div>
@ -375,11 +375,11 @@ templ HowToUse() {
 			<section>
 				<h2 class="text-2xl font-semibold mb-4 text-primary">Next Steps</h2>
 				<div class="space-y-4">
-					<p>Now that you have Goilerplate set up, try:</p>
+					<p>Now that you have TemplUI set up, try:</p>
 					<ul class="list-disc pl-6 space-y-2">
 						<li>Build your first page using our <a href="/docs/components" class="text-primary underline">component library</a></li>
 						<li>Customize the look with our <a href="/docs/themes" class="text-primary underline">theming system</a></li>
-						<li>Share your feedback in our <a href="https://github.com/axzilla/goilerplate/discussions" class="text-primary underline">community discussions</a></li>
+						<li>Share your feedback in our <a href="https://github.com/axzilla/templui/discussions" class="text-primary underline">community discussions</a></li>
 					</ul>
 				</div>
 			</section>
--- a/internals/ui/pages/icon.templ
+++ b/internals/ui/pages/icon.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Icon() {
--- a/internals/ui/pages/input.templ
+++ b/internals/ui/pages/input.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Input() {
--- a/internals/ui/pages/introduction.templ
+++ b/internals/ui/pages/introduction.templ
@ -1,12 +1,12 @@
 package pages

-import "github.com/axzilla/goilerplate/internals/ui/layouts"
+import "github.com/axzilla/templui/internals/ui/layouts"

 templ Introduction() {
 	@layouts.DocsLayout() {
 		<div>
 			<div class="mb-16">
-				<h1 class="text-3xl font-bold mb-2">🎉 Goilerplate</h1>
+				<h1 class="text-3xl font-bold mb-2">🎉 TemplUI</h1>
 				<p class="mb-4 text-muted-foreground">Modern UI Components for Go & Templ.</p>
 			</div>
 			<section class="mb-12">
@ -15,7 +15,7 @@ templ Introduction() {
 					Build sleek, interactive web applications with Go and Templ. Seamlessly integrate Alpine.js for enhanced client-side functionality and style effortlessly with Tailwind CSS. Where server-side simplicity meets client-side dynamism.
 				</p>
 				<p class="mb-4">
-					Goilerplate is a wild experiment in bringing the joy of modern UI components to the Go ecosystem. It's like a box of LEGO, but for web dev. And yes, we might have had too much coffee while coding this.
+					TemplUI is a wild experiment in bringing the joy of modern UI components to the Go ecosystem. It's like a box of LEGO, but for web dev. And yes, we might have had too much coffee while coding this.
 				</p>
 				<p class="mb-4">
 					We've taken Go, sprinkled some Templ magic, added a dash of Alpine.js, topped it with Tailwind CSS, and voilà! You've got yourself a UI toolkit that'll make JavaScript developers question their life choices.
@ -26,7 +26,7 @@ templ Introduction() {
 				<p class="mb-4">
 					We're constantly evolving. Check out our 
 					<a
-						href="https://github.com/axzilla/goilerplate/releases"
+						href="https://github.com/axzilla/templui/releases"
 						class="text-primary underline underline-offset-4 hover:text-primary/80"
 						target="_blank"
 					>
@ -35,7 +35,7 @@ templ Introduction() {
 				</p>
 			</section>
 			<section class="mb-12">
-				<h2 class="text-2xl font-semibold mb-4 text-primary">Why Goilerplate?</h2>
+				<h2 class="text-2xl font-semibold mb-4 text-primary">Why TemplUI?</h2>
 				<p class="mb-4">
 					Inspired by
 					<a href="https://ui.shadcn.com/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">
@ -47,7 +47,7 @@ templ Introduction() {
 					<a href="https://daisyui.com/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">
 						daisyUI
 					</a>,
-					Goilerplate brings the philosophy of accessible, customizable components to the Go ecosystem. We've taken the best ideas and adapted them for Go, Templ, Alpine.js, and Tailwind CSS enthusiasts.
+					TemplUI brings the philosophy of accessible, customizable components to the Go ecosystem. We've taken the best ideas and adapted them for Go, Templ, Alpine.js, and Tailwind CSS enthusiasts.
 				</p>
 				<p class="mb-4">
 					Our components are designed with accessibility in mind, ensuring your web applications are usable by everyone. And just like our inspirations, every component is fully customizable - tweak them, break them, remake them. It's your playground!
@ -56,7 +56,7 @@ templ Introduction() {
 			<section class="mb-12">
 				<h2 class="text-2xl font-semibold mb-4 text-primary">Where are we headed?</h2>
 				<p class="mb-4">
-					Honestly? We're not entirely sure yet! We're exploring whether to make Goilerplate a strict port of shadcn/ui or to create a unique blend of various inspirations. This journey is as much about discovery as it is about development.
+					Honestly? We're not entirely sure yet! We're exploring whether to make TemplUI a strict port of shadcn/ui or to create a unique blend of various inspirations. This journey is as much about discovery as it is about development.
 				</p>
 				<p class="mb-4">
 					What we do know is this: We're committed to providing a flexible, powerful toolkit for Go developers who want to create beautiful, interactive web applications without sacrificing the benefits of server-side rendering.
--- a/internals/ui/pages/label.templ
+++ b/internals/ui/pages/label.templ
@ -1,10 +1,10 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
-	"github.com/axzilla/goilerplate/pkg/components"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
+	"github.com/axzilla/templui/pkg/components"
 )

 templ Label() {
--- a/internals/ui/pages/landing.templ
+++ b/internals/ui/pages/landing.templ
@ -1,38 +1,64 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/pkg/components"
+	wrappedicons "github.com/axzilla/templui/internals/ui/icons"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ Landing() {
 	@layouts.BaseLayout() {
-		<header class="relative flex items-center justify-center w-full min-h-screen bg-gradient-to-br from-gray-100 to-white dark:from-gray-900 dark:to-black text-gray-900 dark:text-white overflow-hidden">
-			<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
-				<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-2 sm:mb-4">
-					<span class="block">Goilerplate</span>
-				</h1>
-				<p class="text-xl sm:text-2xl lg:text-3xl font-semibold text-gray-600 dark:text-gray-400 mb-4 sm:mb-8">
-					Modern UI Components for Go & Templ
+		<div class="flex-shrink-0">
+			@modules.Navbar()
+		</div>
+		<header class="flex flex-col items-center justify-center w-full calc(100vh - 65px) h-full">
+			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
+				<p class="tracking-tight text-4xl md:text-5xl font-extrabold mb-4 sm:mb-8">
+					Modern UI Components
+					<br/>
+					for
+					<span>
+						Go & Templ
+					</span>
 				</p>
-				<p class="max-w-3xl mx-auto text-base sm:text-lg text-gray-700 dark:text-gray-300 mb-6 sm:mb-10">
-					Craft powerful, responsive web applications with Go and Templ. 
-					Enhance interactivity with Alpine.js and style effortlessly with Tailwind CSS. 
-					Goilerplate bridges the gap between backend robustness and frontend dynamism.
+				<p class="max-w-3xl mx-auto text-base sm:text-lg mb-6 sm:mb-10">
+					Build type-safe, responsive web applications with 
+					<a href="https://go.dev" class="hover:opacity-70 font-bold hover:underline">
+						Go
+					</a>
+					and 
+					<a href="https://templ.guide" class="hover:opacity-70 font-bold hover:underline">
+						Templ
+					</a>
+					. Enhance interactivity with 
+					<a href="https://alpinejs.dev" class="hover:opacity-70 font-bold hover:underline">
+						Alpine.js
+					</a>
+					and style with 
+					<a href="https://tailwindcss.com" class="hover:opacity-70 font-bold hover:underline">Tailwind CSS</a>. 
+					Bringing together backend robustness with frontend flexibility.
 				</p>
-				@components.Button(components.ButtonProps{
-					Text: "Explore Components",
-					Href: "/docs/components",
-					Size: "lg",
-				})
-			</div>
-			<div class="absolute bottom-0 left-0 w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40">
-				<img src="/assets/img/gopher.svg" alt="Gopher" class="absolute bottom-0 left-0 w-full h-full object-contain transform translate-y-1/3 -translate-x-1/4"/>
+				<div class="flex gap-2 justify-center flex-wrap">
+					@components.Button(components.ButtonProps{
+						Text:      "Explore Components",
+						Href:      "/docs/components",
+						Size:      "lg",
+						IconRight: icons.ArrowRight(icons.IconProps{Size: "16"}),
+						Class:     "w-full md:w-auto",
+					})
+					@components.Button(components.ButtonProps{
+						Text:     "View on GitHub",
+						Href:     "https://github.com/axzilla/templui",
+						Target:   "_blank",
+						Size:     "lg",
+						Variant:  "secondary",
+						IconLeft: wrappedicons.GitHub(24),
+						Class:    "w-full md:w-auto",
+					})
+				</div>
 			</div>
 		</header>
-		<div class="fixed bottom-4 right-4 z-50">
-			@modules.ThemeSwitcher()
-		</div>
 	}
 }
--- a/internals/ui/pages/modal.templ
+++ b/internals/ui/pages/modal.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Modal() {
--- a/internals/ui/pages/radio.templ
+++ b/internals/ui/pages/radio.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Radio() {
--- a/internals/ui/pages/select.templ
+++ b/internals/ui/pages/select.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Select() {
--- a/internals/ui/pages/sheet.templ
+++ b/internals/ui/pages/sheet.templ
@ -1,9 +1,9 @@
 package pages 

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Sheet() {
--- a/internals/ui/pages/slider.templ
+++ b/internals/ui/pages/slider.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Slider() {
--- a/internals/ui/pages/tabs.templ
+++ b/internals/ui/pages/tabs.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Tabs() {
--- a/internals/ui/pages/textarea.templ
+++ b/internals/ui/pages/textarea.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Textarea() {
--- a/internals/ui/pages/themes.templ
+++ b/internals/ui/pages/themes.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ Themes() {
--- a/internals/ui/pages/toggle.templ
+++ b/internals/ui/pages/toggle.templ
@ -1,9 +1,9 @@
 package pages

 import (
-	"github.com/axzilla/goilerplate/internals/ui/layouts"
-	"github.com/axzilla/goilerplate/internals/ui/modules"
-	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
 )

 templ Toggle() {
--- a/internals/ui/showcase/accordion.templ
+++ b/internals/ui/showcase/accordion.templ
@ -1,7 +1,7 @@

 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ Accordion() {
 	@components.Accordion(components.AccordionProps{
--- a/internals/ui/showcase/alert_default.templ
+++ b/internals/ui/showcase/alert_default.templ
@ -1,8 +1,8 @@
 package showcase

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ AlertDefault() {
--- a/internals/ui/showcase/alert_destructive.templ
+++ b/internals/ui/showcase/alert_destructive.templ
@ -1,8 +1,8 @@
 package showcase

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ AlertDestructive() {
--- a/internals/ui/showcase/avatar_with_image.templ
+++ b/internals/ui/showcase/avatar_with_image.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ AvatarWithImage() {
 	@components.Avatar(components.AvatarProps{
--- a/internals/ui/showcase/avatar_with_placeholder.templ
+++ b/internals/ui/showcase/avatar_with_placeholder.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ AvatarWithPlaceholder() {
 	@components.Avatar(components.AvatarProps{
--- a/internals/ui/showcase/avatar_with_sizes.templ
+++ b/internals/ui/showcase/avatar_with_sizes.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ AvatarWithSizes() {
 	<div class="flex flex-wrap gap-2">
--- a/internals/ui/showcase/badge_icons.templ
+++ b/internals/ui/showcase/badge_icons.templ
@ -0,0 +1,19 @@
+package showcase
+
+import (
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
+)
+
+templ BadgeIcons() {
+	<div class="flex flex-wrap gap-2">
+		@components.Badge(components.BadgeProps{
+			Text:       "Icon Left",
+			IconBefore: icons.Rocket(icons.IconProps{Size: "14"}),
+		})
+		@components.Badge(components.BadgeProps{
+			Text:      "Icon Right",
+			IconAfter: icons.Rocket(icons.IconProps{Size: "14"}),
+		})
+	</div>
+}
--- a/internals/ui/showcase/badge_variants.templ
+++ b/internals/ui/showcase/badge_variants.templ
@ -0,0 +1,12 @@
+package showcase
+
+import "github.com/axzilla/templui/pkg/components"
+
+templ BadgeVariants() {
+	<div class="flex flex-wrap gap-2">
+		@components.Badge(components.BadgeProps{Text: "Default"})
+		@components.Badge(components.BadgeProps{Text: "Secondary", Variant: components.BadgeVariantSecondary})
+		@components.Badge(components.BadgeProps{Text: "Destructive", Variant: components.BadgeVariantDestructive})
+		@components.Badge(components.BadgeProps{Text: "Outline", Variant: components.BadgeVariantOutline})
+	</div>
+}
--- a/internals/ui/showcase/button_disabled.templ
+++ b/internals/ui/showcase/button_disabled.templ
@ -1,10 +1,9 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ ButtonDisabled() {
 	<div class="flex flex-wrap gap-2">
-		@components.Button(components.ButtonProps{Text: "Disabled using props", Disabled: true})
-		@components.Button(components.ButtonProps{Text: "Disabled using attributes", Attributes: templ.Attributes{"disabled": "true"}})
+		@components.Button(components.ButtonProps{Text: "Disabled", Disabled: true})
 	</div>
 }
--- a/internals/ui/showcase/button_fullwidth.templ
+++ b/internals/ui/showcase/button_fullwidth.templ
@ -1,10 +0,0 @@
-package showcase
-
-import "github.com/axzilla/goilerplate/pkg/components"
-
-templ ButtonFullwidth() {
-	<div class="flex w-full flex-wrap gap-2">
-		@components.Button(components.ButtonProps{Text: "Full Width using prop", FullWidth: true})
-		@components.Button(components.ButtonProps{Text: "Full Width using class", Class: "w-full"})
-	</div>
-}
--- a/internals/ui/showcase/button_icons.templ
+++ b/internals/ui/showcase/button_icons.templ
@ -1,8 +1,8 @@
 package showcase

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ ButtonIcons() {
--- a/internals/ui/showcase/button_sizes.templ
+++ b/internals/ui/showcase/button_sizes.templ
@ -1,8 +1,8 @@
 package showcase

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ ButtonSizes() {
--- a/internals/ui/showcase/button_variants.templ
+++ b/internals/ui/showcase/button_variants.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ ButtonVariants() {
 	<div class="flex flex-wrap gap-2">
--- a/internals/ui/showcase/button_with_click.templ
+++ b/internals/ui/showcase/button_with_click.templ
@ -1,10 +0,0 @@
-package showcase
-
-import "github.com/axzilla/goilerplate/pkg/components"
-
-templ ButtonWithClick() {
-	<div class="flex flex-wrap gap-2">
-		@components.Button(components.ButtonProps{Text: "With Alpine.js", Attributes: templ.Attributes{"@click": "alert('Hey Dude!')"}})
-		@components.Button(components.ButtonProps{Text: "With Vanilla JS", Attributes: templ.Attributes{"onclick": "alert('Hey Dude!')"}})
-	</div>
-}
--- a/internals/ui/showcase/card_default.templ
+++ b/internals/ui/showcase/card_default.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CardDefault() {
 	@components.Card(components.CardProps{Class: "max-w-sm"}) {
--- a/internals/ui/showcase/card_with_image_bottom.templ
+++ b/internals/ui/showcase/card_with_image_bottom.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CardWithImageBottom() {
 	@components.Card(components.CardProps{Class: "w-2/3"}) {
--- a/internals/ui/showcase/card_with_image_left.templ
+++ b/internals/ui/showcase/card_with_image_left.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CardWithImageLeft() {
 	@components.Card(components.CardProps{
--- a/internals/ui/showcase/card_with_image_right.templ
+++ b/internals/ui/showcase/card_with_image_right.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CardWithImageRight() {
 	@components.Card(components.CardProps{
--- a/internals/ui/showcase/card_with_image_top.templ
+++ b/internals/ui/showcase/card_with_image_top.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CardWithImageTop() {
 	@components.Card(components.CardProps{Class: "w-2/3"}) {
--- a/internals/ui/showcase/checkbox_checked.templ
+++ b/internals/ui/showcase/checkbox_checked.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CheckboxChecked() {
 	@components.Checkbox(components.CheckboxProps{
--- a/internals/ui/showcase/checkbox_custom_icon.templ
+++ b/internals/ui/showcase/checkbox_custom_icon.templ
@ -1,8 +1,8 @@
 package showcase

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ CheckboxCustomIcon() {
--- a/internals/ui/showcase/checkbox_default.templ
+++ b/internals/ui/showcase/checkbox_default.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CheckboxDefault() {
 	@components.Checkbox(components.CheckboxProps{})
--- a/internals/ui/showcase/checkbox_disabled.templ
+++ b/internals/ui/showcase/checkbox_disabled.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CheckboxDisabled() {
 	<div class="flex items-center gap-2">
--- a/internals/ui/showcase/checkbox_form.templ
+++ b/internals/ui/showcase/checkbox_form.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CheckboxForm() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/checkbox_with_label.templ
+++ b/internals/ui/showcase/checkbox_with_label.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ CheckboxWithLabel() {
 	<div class="flex items-center gap-2">
--- a/internals/ui/showcase/datepicker_custom_placeholder.templ
+++ b/internals/ui/showcase/datepicker_custom_placeholder.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ DatepickerCustomPlaceholder() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/datepicker_default.templ
+++ b/internals/ui/showcase/datepicker_default.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ DatepickerDefault() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/datepicker_disabled.templ
+++ b/internals/ui/showcase/datepicker_disabled.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ DatepickerDisabled() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/datepicker_form.templ
+++ b/internals/ui/showcase/datepicker_form.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ DatepickerForm() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/datepicker_formats.templ
+++ b/internals/ui/showcase/datepicker_formats.templ
@ -1,7 +1,7 @@
 package showcase

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
+	"github.com/axzilla/templui/pkg/components"
 	"time"
 )

--- a/internals/ui/showcase/datepicker_selected_date.templ
+++ b/internals/ui/showcase/datepicker_selected_date.templ
@ -2,7 +2,7 @@
 package showcase

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
+	"github.com/axzilla/templui/pkg/components"
 	"time"
 )

--- a/internals/ui/showcase/datepicker_with_label.templ
+++ b/internals/ui/showcase/datepicker_with_label.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ DatepickerWithLabel() {
 	<div class="w-full max-w-sm space-y-2">
--- a/internals/ui/showcase/dropdown_menu_advanced.templ
+++ b/internals/ui/showcase/dropdown_menu_advanced.templ
@ -1,8 +1,8 @@
 package showcase

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ DropdownMenuAdvanced() {
@ -25,7 +25,7 @@ templ DropdownMenuAdvanced() {
 				{Label: "Paste", Value: "paste", Attributes: templ.Attributes{"@click": "alert('Paste')"}},
 			}},
 			{Label: "View", Disabled: true},
-			{Label: "Help", Href: "https://github.com/axzilla/goilerplate", Target: "_blank"},
+			{Label: "Help", Href: "https://github.com/axzilla/templui", Target: "_blank"},
 		},
 	})
 }
--- a/internals/ui/showcase/dropdown_menu_default.templ
+++ b/internals/ui/showcase/dropdown_menu_default.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ DropdownMenuDefault() {
 	@components.DropdownMenu(components.DropdownMenuProps{
--- a/internals/ui/showcase/dropdown_menu_with_icons.templ
+++ b/internals/ui/showcase/dropdown_menu_with_icons.templ
@ -1,8 +1,8 @@
 package showcase

 import (
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/templui/pkg/components"
+	"github.com/axzilla/templui/pkg/icons"
 )

 templ DropdownMenuWithIcons() {
--- a/internals/ui/showcase/icon_colored.templ
+++ b/internals/ui/showcase/icon_colored.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/icons"
+import "github.com/axzilla/templui/pkg/icons"

 templ IconColored() {
 	<div class="flex flex-wrap gap-2">
--- a/internals/ui/showcase/icon_custom_classes.templ
+++ b/internals/ui/showcase/icon_custom_classes.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/icons"
+import "github.com/axzilla/templui/pkg/icons"

 templ IconCustomClasses() {
 	<div class="flex flex-wrap gap-2">
--- a/internals/ui/showcase/icon_default.templ
+++ b/internals/ui/showcase/icon_default.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/icons"
+import "github.com/axzilla/templui/pkg/icons"

 templ IconDefault() {
 	<div class="flex flex-wrap gap-2">
--- a/internals/ui/showcase/icon_filled.templ
+++ b/internals/ui/showcase/icon_filled.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/icons"
+import "github.com/axzilla/templui/pkg/icons"

 templ IconFilled() {
 	<div class="flex flex-wrap gap-2">
--- a/internals/ui/showcase/icon_sizes.templ
+++ b/internals/ui/showcase/icon_sizes.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/icons"
+import "github.com/axzilla/templui/pkg/icons"

 templ IconSizes() {
 	<div class="flex flex-wrap gap-2">
--- a/internals/ui/showcase/input_default.templ
+++ b/internals/ui/showcase/input_default.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ InputDefault() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/input_disabled.templ
+++ b/internals/ui/showcase/input_disabled.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ InputDisabled() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/input_file.templ
+++ b/internals/ui/showcase/input_file.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ InputFile() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/input_form.templ
+++ b/internals/ui/showcase/input_form.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ InputForm() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/input_with_label.templ
+++ b/internals/ui/showcase/input_with_label.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ InputWithLabel() {
 	<div class="w-full max-w-sm grid gap-2">
--- a/internals/ui/showcase/modal.templ
+++ b/internals/ui/showcase/modal.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ Modal() {
 	@components.ModalTrigger("default-modal") {
--- a/internals/ui/showcase/radio_checked.templ
+++ b/internals/ui/showcase/radio_checked.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ RadioChecked() {
 	@components.Radio(components.RadioProps{
--- a/internals/ui/showcase/radio_default.templ
+++ b/internals/ui/showcase/radio_default.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ RadioDefault() {
 	<div class="flex gap-2 items-center">
--- a/internals/ui/showcase/radio_disabled.templ
+++ b/internals/ui/showcase/radio_disabled.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ RadioDisabled() {
 	<div class="flex gap-2 items-center">
--- a/internals/ui/showcase/radio_form.templ
+++ b/internals/ui/showcase/radio_form.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ RadioForm() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/radio_with_label.templ
+++ b/internals/ui/showcase/radio_with_label.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ RadioWithLabel() {
 	<div class="flex gap-2 items-center">
--- a/internals/ui/showcase/select_default.templ
+++ b/internals/ui/showcase/select_default.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ SelectDefault() {
 	<div class="w-full  max-w-md">
--- a/internals/ui/showcase/select_disabled.templ
+++ b/internals/ui/showcase/select_disabled.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ SelectDisabled() {
 	<div class="space-y-2 w-full max-w-sm">
--- a/internals/ui/showcase/select_form.templ
+++ b/internals/ui/showcase/select_form.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ SelectForm() {
 	<div class="w-full max-w-sm">
--- a/internals/ui/showcase/select_selected_value.templ
+++ b/internals/ui/showcase/select_selected_value.templ
@ -1,6 +1,6 @@
 package showcase

-import "github.com/axzilla/goilerplate/pkg/components"
+import "github.com/axzilla/templui/pkg/components"

 templ SelectSelectedValue() {
 	<div class="w-full max-w-sm">
--- a/Show More
+++ b/Show More