sveltekit-ui 1.0.3 → 1.0.4

package/README.md

@@ -7,8 +7,6 @@ You can use an existing sveltekit project and install this package in your proje
 
 or to start a new project with a starter template (recommended). In your terminal cd into a folder you want to put your project files in such as /projects/my-project-all to use as the parent folder for stuff related to your project (but replace "my-project" with your own project name)
 
-wait until july 1st for this part create-sveltekit-ui-site
-
 `npx create-sveltekit-ui-site my-project`
 
 ## Open Code Editor

package/dist/Components/YoutubeChannelButton/index.svelte

@@ -0,0 +1,82 @@
+<script>
+  let { url, size = 4 } = $props()
+</script>
+
+<a
+  href={url}
+  role="button"
+  tabindex="0"
+  class="button_container"
+  target="_blank"
+  data-show-count="false"
+  aria-label="share youtube channel"
+  style="min-height: {size}rem; border-radius: {size / 2.5}rem; padding: {size / 4}rem {size / 3}rem; 
+    font-size: {size / 1.8}rem;"
+>
+  <svg
+    width="100%"
+    height="{size / 1.5}rem"
+    viewBox="0 0 381 86"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  >
+    <g>
+      <path
+        d="M118.946,13.279C117.549,8.052 113.433,3.936 108.206,2.539C98.731,0 60.742,0 60.742,0C60.742,0 22.753,0 13.278,2.539C8.052,3.936 3.935,8.052 2.538,13.279C0,22.753 0,42.52 0,42.52C0,42.52 0,62.287 2.538,71.76C3.935,76.987 8.052,81.104 13.278,82.501C22.753,85.039 60.742,85.039 60.742,85.039C60.742,85.039 98.731,85.039 108.206,82.501C113.433,81.104 117.549,76.987 118.946,71.76C121.485,62.287 121.485,42.52 121.485,42.52C121.485,42.52 121.485,22.753 118.946,13.279Z"
+        style="fill:rgb(237,31,36);fill-rule:nonzero;"
+      />
+      <path d="M48.593,60.743L80.155,42.52L48.593,24.297L48.593,60.743Z" style="fill:white;fill-rule:nonzero;" />
+      <path
+        d="M189.801,69.023C190.466,67.287 190.8,64.449 190.8,60.51L190.8,43.916C190.8,40.094 190.466,37.3 189.801,35.533C189.135,33.767 187.962,32.883 186.283,32.883C184.661,32.883 183.516,33.767 182.851,35.533C182.185,37.3 181.852,40.094 181.852,43.916L181.852,60.51C181.852,64.449 182.17,67.287 182.808,69.023C183.444,70.761 184.602,71.629 186.283,71.629C187.962,71.629 189.135,70.761 189.801,69.023ZM176.336,77.364C173.931,75.744 172.222,73.223 171.21,69.805C170.196,66.389 169.69,61.842 169.69,56.166L169.69,48.434C169.69,42.7 170.268,38.095 171.427,34.621C172.585,31.146 174.394,28.612 176.857,27.019C179.318,25.427 182.547,24.63 186.544,24.63C190.482,24.63 193.638,25.441 196.013,27.063C198.387,28.684 200.125,31.219 201.226,34.664C202.325,38.111 202.876,42.7 202.876,48.434L202.876,56.166C202.876,61.842 202.34,66.404 201.269,69.849C200.197,73.296 198.459,75.815 196.056,77.407C193.652,79 190.395,79.796 186.283,79.796C182.054,79.796 178.738,78.985 176.336,77.364Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M362.376,33.878C361.769,34.632 361.362,35.862 361.16,37.57C360.956,39.279 360.857,41.871 360.857,45.346L360.857,49.169L369.63,49.169L369.63,45.346C369.63,41.929 369.514,39.337 369.283,37.57C369.051,35.804 368.632,34.56 368.024,33.835C367.415,33.111 366.474,32.749 365.2,32.749C363.925,32.749 362.984,33.126 362.376,33.878ZM360.857,56.293L360.857,58.986C360.857,62.404 360.956,64.966 361.16,66.674C361.362,68.383 361.781,69.629 362.42,70.411C363.057,71.192 364.04,71.584 365.374,71.584C367.168,71.584 368.4,70.888 369.066,69.498C369.731,68.108 370.093,65.792 370.151,62.548L380.49,63.156C380.548,63.621 380.577,64.257 380.577,65.067C380.577,69.991 379.231,73.669 376.537,76.101C373.845,78.533 370.035,79.75 365.113,79.75C359.206,79.75 355.064,77.897 352.69,74.189C350.314,70.484 349.127,64.75 349.127,56.988L349.127,47.691C349.127,39.699 350.358,33.865 352.82,30.186C355.281,26.508 359.495,24.669 365.461,24.669C369.572,24.669 372.729,25.422 374.93,26.928C377.13,28.435 378.68,30.78 379.578,33.965C380.476,37.151 380.925,41.553 380.925,47.17L380.925,56.293L360.857,56.293Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M147.142,55.295L133.502,6.036L145.404,6.036L150.182,28.363C151.399,33.867 152.296,38.558 152.875,42.437L153.223,42.437C153.628,39.657 154.526,34.996 155.916,28.45L160.868,6.036L172.77,6.036L158.957,55.295L158.957,78.927L147.142,78.927L147.142,55.295Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M241.586,25.672L241.586,78.927L232.203,78.927L231.16,72.412L230.9,72.412C228.351,77.335 224.528,79.796 219.432,79.796C215.899,79.796 213.293,78.638 211.613,76.321C209.933,74.005 209.094,70.384 209.094,65.462L209.094,25.672L221.083,25.672L221.083,64.766C221.083,67.142 221.344,68.836 221.865,69.848C222.386,70.863 223.255,71.369 224.471,71.369C225.514,71.369 226.513,71.051 227.468,70.413C228.424,69.776 229.133,68.966 229.597,67.981L229.597,25.672L241.586,25.672Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M303.082,25.672L303.082,78.927L293.699,78.927L292.656,72.412L292.397,72.412C289.846,77.335 286.024,79.796 280.928,79.796C277.395,79.796 274.789,78.638 273.109,76.321C271.429,74.005 270.59,70.384 270.59,65.462L270.59,25.672L282.579,25.672L282.579,64.766C282.579,67.142 282.839,68.836 283.36,69.848C283.882,70.863 284.751,71.369 285.967,71.369C287.01,71.369 288.009,71.051 288.964,70.413C289.92,69.776 290.629,68.966 291.093,67.981L291.093,25.672L303.082,25.672Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M274.164,15.681L262.262,15.681L262.262,78.927L250.534,78.927L250.534,15.681L238.632,15.681L238.632,6.037L274.164,6.037L274.164,15.681Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M331.772,55.908C331.772,59.789 331.611,62.83 331.293,65.03C330.975,67.232 330.439,68.796 329.686,69.721C328.933,70.648 327.918,71.111 326.646,71.111C325.66,71.111 324.748,70.88 323.909,70.416C323.068,69.953 322.389,69.258 321.867,68.331L321.867,38.098C322.272,36.651 322.967,35.463 323.952,34.536C324.937,33.611 326.007,33.146 327.166,33.146C328.383,33.146 329.323,33.624 329.99,34.579C330.655,35.535 331.119,37.142 331.38,39.402C331.641,41.66 331.772,44.874 331.772,49.044L331.772,55.908ZM342.761,34.185C342.036,30.827 340.863,28.394 339.242,26.887C337.62,25.382 335.39,24.629 332.553,24.629C330.352,24.629 328.296,25.252 326.385,26.497C324.474,27.742 322.996,29.378 321.954,31.405L321.866,31.405L321.867,3.344L310.313,3.344L310.313,78.926L320.216,78.926L321.433,73.888L321.693,73.888C322.619,75.683 324.009,77.102 325.863,78.145C327.716,79.187 329.773,79.709 332.032,79.709C336.085,79.709 339.068,77.84 340.98,74.105C342.891,70.369 343.847,64.535 343.847,56.599L343.847,48.173C343.847,42.208 343.484,37.545 342.761,34.185Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+    </g>
+  </svg>
+</a>
+
+<style>
+  .button_container {
+    display: flex;
+    width: fit-content;
+    gap: 0.8rem;
+    align-items: center;
+    background-color: var(--g1-t);
+    color: var(--g24-t);
+    text-decoration: none;
+    font-weight: 600;
+    box-shadow: 0px 0.5rem 1rem var(--g15-t);
+    transition: all 0.3s ease 0s;
+  }
+  .button_container:hover {
+    background-color: var(--g4-t);
+    box-shadow: 0px 0.3rem 2rem var(--g15-t);
+    transform: translateY(-0.2rem);
+  }
+</style>

package/dist/client/docs/index.js

@@ -7495,6 +7495,23 @@ export const definitions = {
       },
     },
   },
+  youtube_channel_button: {
+    component_name: "YoutubeChannelButton",
+    is_not_builder: true,
+    description: "A button linking to a Youtube Channel with a customizable size and handle.",
+    properties: {
+      url: {
+        type: "string",
+        required: true,
+        description: "The url to link to.",
+      },
+      size: {
+        type: "number",
+        default: 4,
+        description: "The size of the button, which scales its height, font, and padding.",
+      },
+    },
+  },
   youtube_video: {
     component_name: "YouTubeVideo",
     builder_function_name: "create_youtube_video_manager",

package/dist/index.js

@@ -75,6 +75,10 @@ export { create_table_advanced_manager } from "./Components/TableAdvanced/index.
 export { default as Spacer } from "./Components/Spacer/index.svelte"
 export { default as TransparentBackground } from "./Components/TransparentBackground/index.svelte"
 export { default as XFollow } from "./Components/XFollow/index.svelte"
+export { default as XPost } from "./Components/XPost/index.svelte"
+export { create_x_post_manager } from "./Components/XPost/index.svelte.js"
+export { default as YoutubeChannelButton } from "./Components/YoutubeChannelButton/index.svelte"
+export { default as YoutubeVideo } from "./Components/YoutubeVideo/index.svelte"
 
 // export { default as ArrayDisplay } from "./Array/index.svelte"
 // export { create_array_manager } from "./Array/index.svelte.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -31,7 +31,7 @@
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@vercel/analytics": "^1.5.0",
     "typescript": "^5.8.3",
-    "vite": "^7.0.1"
+    "vite": "^6.3.5"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [

package/src/lib/Components/YoutubeChannelButton/index.svelte

@@ -0,0 +1,82 @@
+<script>
+  let { url, size = 4 } = $props()
+</script>
+
+<a
+  href={url}
+  role="button"
+  tabindex="0"
+  class="button_container"
+  target="_blank"
+  data-show-count="false"
+  aria-label="share youtube channel"
+  style="min-height: {size}rem; border-radius: {size / 2.5}rem; padding: {size / 4}rem {size / 3}rem; 
+    font-size: {size / 1.8}rem;"
+>
+  <svg
+    width="100%"
+    height="{size / 1.5}rem"
+    viewBox="0 0 381 86"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  >
+    <g>
+      <path
+        d="M118.946,13.279C117.549,8.052 113.433,3.936 108.206,2.539C98.731,0 60.742,0 60.742,0C60.742,0 22.753,0 13.278,2.539C8.052,3.936 3.935,8.052 2.538,13.279C0,22.753 0,42.52 0,42.52C0,42.52 0,62.287 2.538,71.76C3.935,76.987 8.052,81.104 13.278,82.501C22.753,85.039 60.742,85.039 60.742,85.039C60.742,85.039 98.731,85.039 108.206,82.501C113.433,81.104 117.549,76.987 118.946,71.76C121.485,62.287 121.485,42.52 121.485,42.52C121.485,42.52 121.485,22.753 118.946,13.279Z"
+        style="fill:rgb(237,31,36);fill-rule:nonzero;"
+      />
+      <path d="M48.593,60.743L80.155,42.52L48.593,24.297L48.593,60.743Z" style="fill:white;fill-rule:nonzero;" />
+      <path
+        d="M189.801,69.023C190.466,67.287 190.8,64.449 190.8,60.51L190.8,43.916C190.8,40.094 190.466,37.3 189.801,35.533C189.135,33.767 187.962,32.883 186.283,32.883C184.661,32.883 183.516,33.767 182.851,35.533C182.185,37.3 181.852,40.094 181.852,43.916L181.852,60.51C181.852,64.449 182.17,67.287 182.808,69.023C183.444,70.761 184.602,71.629 186.283,71.629C187.962,71.629 189.135,70.761 189.801,69.023ZM176.336,77.364C173.931,75.744 172.222,73.223 171.21,69.805C170.196,66.389 169.69,61.842 169.69,56.166L169.69,48.434C169.69,42.7 170.268,38.095 171.427,34.621C172.585,31.146 174.394,28.612 176.857,27.019C179.318,25.427 182.547,24.63 186.544,24.63C190.482,24.63 193.638,25.441 196.013,27.063C198.387,28.684 200.125,31.219 201.226,34.664C202.325,38.111 202.876,42.7 202.876,48.434L202.876,56.166C202.876,61.842 202.34,66.404 201.269,69.849C200.197,73.296 198.459,75.815 196.056,77.407C193.652,79 190.395,79.796 186.283,79.796C182.054,79.796 178.738,78.985 176.336,77.364Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M362.376,33.878C361.769,34.632 361.362,35.862 361.16,37.57C360.956,39.279 360.857,41.871 360.857,45.346L360.857,49.169L369.63,49.169L369.63,45.346C369.63,41.929 369.514,39.337 369.283,37.57C369.051,35.804 368.632,34.56 368.024,33.835C367.415,33.111 366.474,32.749 365.2,32.749C363.925,32.749 362.984,33.126 362.376,33.878ZM360.857,56.293L360.857,58.986C360.857,62.404 360.956,64.966 361.16,66.674C361.362,68.383 361.781,69.629 362.42,70.411C363.057,71.192 364.04,71.584 365.374,71.584C367.168,71.584 368.4,70.888 369.066,69.498C369.731,68.108 370.093,65.792 370.151,62.548L380.49,63.156C380.548,63.621 380.577,64.257 380.577,65.067C380.577,69.991 379.231,73.669 376.537,76.101C373.845,78.533 370.035,79.75 365.113,79.75C359.206,79.75 355.064,77.897 352.69,74.189C350.314,70.484 349.127,64.75 349.127,56.988L349.127,47.691C349.127,39.699 350.358,33.865 352.82,30.186C355.281,26.508 359.495,24.669 365.461,24.669C369.572,24.669 372.729,25.422 374.93,26.928C377.13,28.435 378.68,30.78 379.578,33.965C380.476,37.151 380.925,41.553 380.925,47.17L380.925,56.293L360.857,56.293Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M147.142,55.295L133.502,6.036L145.404,6.036L150.182,28.363C151.399,33.867 152.296,38.558 152.875,42.437L153.223,42.437C153.628,39.657 154.526,34.996 155.916,28.45L160.868,6.036L172.77,6.036L158.957,55.295L158.957,78.927L147.142,78.927L147.142,55.295Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M241.586,25.672L241.586,78.927L232.203,78.927L231.16,72.412L230.9,72.412C228.351,77.335 224.528,79.796 219.432,79.796C215.899,79.796 213.293,78.638 211.613,76.321C209.933,74.005 209.094,70.384 209.094,65.462L209.094,25.672L221.083,25.672L221.083,64.766C221.083,67.142 221.344,68.836 221.865,69.848C222.386,70.863 223.255,71.369 224.471,71.369C225.514,71.369 226.513,71.051 227.468,70.413C228.424,69.776 229.133,68.966 229.597,67.981L229.597,25.672L241.586,25.672Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M303.082,25.672L303.082,78.927L293.699,78.927L292.656,72.412L292.397,72.412C289.846,77.335 286.024,79.796 280.928,79.796C277.395,79.796 274.789,78.638 273.109,76.321C271.429,74.005 270.59,70.384 270.59,65.462L270.59,25.672L282.579,25.672L282.579,64.766C282.579,67.142 282.839,68.836 283.36,69.848C283.882,70.863 284.751,71.369 285.967,71.369C287.01,71.369 288.009,71.051 288.964,70.413C289.92,69.776 290.629,68.966 291.093,67.981L291.093,25.672L303.082,25.672Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M274.164,15.681L262.262,15.681L262.262,78.927L250.534,78.927L250.534,15.681L238.632,15.681L238.632,6.037L274.164,6.037L274.164,15.681Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M331.772,55.908C331.772,59.789 331.611,62.83 331.293,65.03C330.975,67.232 330.439,68.796 329.686,69.721C328.933,70.648 327.918,71.111 326.646,71.111C325.66,71.111 324.748,70.88 323.909,70.416C323.068,69.953 322.389,69.258 321.867,68.331L321.867,38.098C322.272,36.651 322.967,35.463 323.952,34.536C324.937,33.611 326.007,33.146 327.166,33.146C328.383,33.146 329.323,33.624 329.99,34.579C330.655,35.535 331.119,37.142 331.38,39.402C331.641,41.66 331.772,44.874 331.772,49.044L331.772,55.908ZM342.761,34.185C342.036,30.827 340.863,28.394 339.242,26.887C337.62,25.382 335.39,24.629 332.553,24.629C330.352,24.629 328.296,25.252 326.385,26.497C324.474,27.742 322.996,29.378 321.954,31.405L321.866,31.405L321.867,3.344L310.313,3.344L310.313,78.926L320.216,78.926L321.433,73.888L321.693,73.888C322.619,75.683 324.009,77.102 325.863,78.145C327.716,79.187 329.773,79.709 332.032,79.709C336.085,79.709 339.068,77.84 340.98,74.105C342.891,70.369 343.847,64.535 343.847,56.599L343.847,48.173C343.847,42.208 343.484,37.545 342.761,34.185Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+    </g>
+  </svg>
+</a>
+
+<style>
+  .button_container {
+    display: flex;
+    width: fit-content;
+    gap: 0.8rem;
+    align-items: center;
+    background-color: var(--g1-t);
+    color: var(--g24-t);
+    text-decoration: none;
+    font-weight: 600;
+    box-shadow: 0px 0.5rem 1rem var(--g15-t);
+    transition: all 0.3s ease 0s;
+  }
+  .button_container:hover {
+    background-color: var(--g4-t);
+    box-shadow: 0px 0.3rem 2rem var(--g15-t);
+    transform: translateY(-0.2rem);
+  }
+</style>

package/src/lib/client/docs/index.js

@@ -7495,6 +7495,23 @@ export const definitions = {
       },
     },
   },
+  youtube_channel_button: {
+    component_name: "YoutubeChannelButton",
+    is_not_builder: true,
+    description: "A button linking to a Youtube Channel with a customizable size and handle.",
+    properties: {
+      url: {
+        type: "string",
+        required: true,
+        description: "The url to link to.",
+      },
+      size: {
+        type: "number",
+        default: 4,
+        description: "The size of the button, which scales its height, font, and padding.",
+      },
+    },
+  },
   youtube_video: {
     component_name: "YouTubeVideo",
     builder_function_name: "create_youtube_video_manager",

package/src/lib/index.js

@@ -75,6 +75,10 @@ export { create_table_advanced_manager } from "./Components/TableAdvanced/index.
 export { default as Spacer } from "./Components/Spacer/index.svelte"
 export { default as TransparentBackground } from "./Components/TransparentBackground/index.svelte"
 export { default as XFollow } from "./Components/XFollow/index.svelte"
+export { default as XPost } from "./Components/XPost/index.svelte"
+export { create_x_post_manager } from "./Components/XPost/index.svelte.js"
+export { default as YoutubeChannelButton } from "./Components/YoutubeChannelButton/index.svelte"
+export { default as YoutubeVideo } from "./Components/YoutubeVideo/index.svelte"
 
 // export { default as ArrayDisplay } from "./Array/index.svelte"
 // export { create_array_manager } from "./Array/index.svelte.js"

package/src/routes/+layout.svelte

@@ -76,6 +76,7 @@
     { name: "TransparentBackground", key: "transparent_background" },
     { name: "XPost", key: "x_post" },
     { name: "XFollow", key: "x_follow" },
+    { name: "Youtube Follow Button", key: "youtube_channel_button" },
     { name: "Youtube Video", key: "youtube_video" },
     // { name: "Conditions Input TBD", key: "conditions_input" },
     // { name: "Text Array TBD", key: "text_array" },
@@ -101,6 +102,30 @@
   // })
 </script>
 
+<svelte:head>
+  <title>Sveltekit-UI</title>
+  <meta name="description" content="Svelte UI component library for coding websites." />
+  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+  <meta property="og:title" content="Sveltekit-UI" />
+  <meta property="og:description" content="Svelte UI component library for coding websites." />
+  <meta property="og:image" content="https://www.sveltekit-ui.com/thumbnail.webp" />
+  <meta property="og:url" content="https://www.sveltekit-ui.com" />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Contibase" />
+  <meta name="twitter:description" content="Svelte UI component library for coding websites" />
+  <meta name="twitter:image" content="https://www.sveltekit-ui.com/thumbnail.webp" />
+  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-17171374425"></script>
+  <script>
+    window.dataLayer = window.dataLayer || []
+    function gtag() {
+      dataLayer.push(arguments)
+    }
+    gtag("js", new Date())
+    gtag("config", "AW-17171374425")
+  </script>
+</svelte:head>
+
 <Layout manager={layout_manager}>
   {#snippet nav_bar_logo()}
     <div class="container" style="--color1: var(--primary-t);">

package/src/routes/+page.svelte

@@ -48,19 +48,52 @@ below are the docs for each component individually
       copy_to_clipboard(overview + JSON.stringify(docs_prepped))
     },
   })
+
+  let copy_npm_button_manager = create_button_manager({
+    type: "outlined",
+    is_uniform: true,
+    is_success_animation: true,
+    support_icon: "clipboard",
+    on_click: () => copy_to_clipboard("npm i sveltekit-ui"),
+  })
+  let copy_quick_start_button_manager = create_button_manager({
+    type: "outlined",
+    is_uniform: true,
+    is_success_animation: true,
+    support_icon: "clipboard",
+    on_click: () => copy_to_clipboard("npx create-sveltekit-ui-site my-project"),
+  })
 </script>
 
 <div class="container">
   <h1>Welcome to Sveltekit-UI</h1>
   <p>
-    Our components use svelte 5 runes. We have taken an approach where components are mostly built in javascript to
+    npm package at <a href="https://www.npmjs.com/package/sveltekit-ui" target="_blank" rel="noopener noreferrer"
+      >https://www.npmjs.com/package/sveltekit-ui</a
+    >
+  </p>
+  <div style="display: inline-flex; gap: .5rem;">
+    <code>npm i sveltekit-ui</code>
+    <Button manager={copy_npm_button_manager} />
+  </div>
+
+  <h4>Quick start project with starter template (recommended)</h4>
+  <div style="display: inline-flex; gap: .5rem;">
+    <code>npx create-sveltekit-ui-site my-project</code>
+    <Button manager={copy_quick_start_button_manager} />
+  </div>
+  <p>
+    Our components use svelte 5 Runes. We have taken an approach where components are mostly built in javascript to
     allow for control of your entire tree of components in one parent object that can then be passed down through all
-    HTML and CSS components
+    HTML and CSS components.
   </p>
   <p>
-    After a lot of work these components are in a state that we are happy to release to the public and encourage people
-    to use. You can also go to <a href="https://www.contibase.com/code_generate">www.contibase.com/code_generate</a> to help
-    you build with sveltekit-ui. Contibase is also a very compatable project to use along side Sveltekit-UI.
+    After a lot of work, these components are in a state that we are happy to release to the public and encourage people
+    to use as of July 2025. You can also go to
+    <a href="https://www.contibase.com/code_generator" target="_blank" rel="noopener noreferrer"
+      >www.contibase.com/code_generator</a
+    >
+    to help you build with sveltekit-ui. Contibase is also a very compatible project to use alongside sveltekit-ui.
   </p>
   <br />
   <Code manager={overview_sample_code_manager} />
@@ -81,4 +114,10 @@ below are the docs for each component individually
   p {
     margin-top: 2rem;
   }
+  code {
+    background-color: var(--shadow2-t);
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.5rem 0.2rem 0.5rem;
+    border: 1px solid var(--shadow4-t);
+  }
 </style>

package/src/routes/[component]/+page.svelte

@@ -47,6 +47,7 @@
   import TransparentBackgroundShowcase from "./Showcase/TransparentBackground/index.svelte"
   import XPostShowcase from "./Showcase/XPost/index.svelte"
   import XFollowShowcase from "./Showcase/XFollow/index.svelte"
+  import YoutubeChannelButtonShowcase from "./Showcase/YoutubeChannelButton/index.svelte"
   import YoutubeVideoShowcase from "./Showcase/YoutubeVideo/index.svelte"
   import { page } from "$app/state"
   // tbd
@@ -158,6 +159,8 @@
     <XPostShowcase />
   {:else if page?.params?.component == "x_follow"}
     <XFollowShowcase />
+  {:else if page?.params?.component == "youtube_channel_button"}
+    <YoutubeChannelButtonShowcase />
   {:else if page?.params?.component == "youtube_video"}
     <YoutubeVideoShowcase />
   {/if}

package/src/routes/[component]/Showcase/YoutubeChannelButton/index.svelte

@@ -0,0 +1,7 @@
+<script>
+  import YoutubeChannelButton from "$lib/Components/YoutubeChannelButton/index.svelte"
+</script>
+
+<div>
+  <YoutubeChannelButton url="https://www.youtube.com/@contibase" />
+</div>