From e30035cec5b30dc97b231003ebf0e6ecbc5ff3b1 Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Wed, 30 Apr 2025 11:37:29 +0100
Subject: [PATCH] feat(templates): add Vite Shadcn starter template

Introduce a new starter template for Vite with shadcn/ui integration. The template includes React, TypeScript, and Tailwind, and is added to the STARTER_TEMPLATES list. Additionally, update the styling in StarterTemplates component to better accommodate the new template and add the shadcn.svg icon.
---
 app/components/chat/StarterTemplates.tsx |  2 +-
 app/utils/constants.ts                   |  8 ++++++++
 icons/shadcn.svg                         | 21 +++++++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 icons/shadcn.svg

diff --git a/app/components/chat/StarterTemplates.tsx b/app/components/chat/StarterTemplates.tsx
index 0f46a603..20b666e3 100644
--- a/app/components/chat/StarterTemplates.tsx
+++ b/app/components/chat/StarterTemplates.tsx
@@ -25,7 +25,7 @@ const StarterTemplates: React.FC = () => {
     <div className="flex flex-col items-center gap-4">
       <span className="text-sm text-gray-500">or start a blank app with your favorite stack</span>
       <div className="flex justify-center">
-        <div className="flex w-70 flex-wrap items-center justify-center gap-4">
+        <div className="flex flex-wrap justify-center items-center gap-4 max-w-sm">
           {STARTER_TEMPLATES.map((template) => (
             <FrameworkLink key={template.name} template={template} />
           ))}
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 4d955d75..df610404 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -49,6 +49,14 @@ export const STARTER_TEMPLATES: Template[] = [
     tags: ['nextjs', 'react', 'typescript', 'shadcn', 'tailwind'],
     icon: 'i-bolt:nextjs',
   },
+  {
+    name: 'Vite Shadcn',
+    label: 'Vite with shadcn/ui',
+    description: 'Vite starter fullstack template integrated with shadcn/ui components and styling system',
+    githubRepo: 'xKevIsDev/vite-shadcn',
+    tags: ['vite', 'react', 'typescript', 'shadcn', 'tailwind'],
+    icon: 'i-bolt:shadcn',
+  },
   {
     name: 'Qwik Typescript',
     label: 'Qwik TypeScript',
diff --git a/icons/shadcn.svg b/icons/shadcn.svg
new file mode 100644
index 00000000..be836c9e
--- /dev/null
+++ b/icons/shadcn.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
+  <!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192)  -->
+  <defs>
+    <style>
+      .st0, .st1 {
+        fill: none;
+      }
+
+      .st1 {
+        stroke: #7B7B7B; /* Changed from #000 to #7B7B7B */
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 32px;
+      }
+    </style>
+  </defs>
+  <rect class="st0" width="256" height="256"/>
+  <line class="st1" x1="208" y1="128" x2="128" y2="208"/>
+  <line class="st1" x1="192" y1="40" x2="40" y2="192"/>
+</svg>
\ No newline at end of file