chore: fix shadcn imports again

apps/vite-template/src/app/index.tsx

@@ -1,27 +1,44 @@
-import "./styles.css";
+import "@repo/ui/styles/styles.css";
+import "@repo/ui/styles/global.css";
 import { CounterButton } from "@repo/ui/counter-button";
 import { Link } from "@repo/ui/link";
 
+import { Button } from "@repo/ui/components/button";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@repo/ui/components/card";
+
 function App() {
-  return (
-    <div className="container">
-      <h1 className="title">
-        Admin <br />
-        <span>Kitchen Sink</span>
-      </h1>
-      <CounterButton />
-      <p className="description">
-        Built With{" "}
-        <Link href="https://turborepo.com" newTab>
-          Turborepo
-        </Link>
-        {" & "}
-        <Link href="https://vitejs.dev/" newTab>
-          Vite
-        </Link>
-      </p>
-    </div>
-  );
+	return (
+		<div className="container">
+			<h1 className="title">
+				Admin <br />
+				<span>Kitchen Sink</span>
+			</h1>
+			<CounterButton />
+			<Card className="my-6">
+				<CardHeader>
+					<CardTitle>shadcn/ui Card Example</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Button>shadcn/ui Button</Button>
+				</CardContent>
+			</Card>
+			<p className="description">
+				Built With{" "}
+				<Link href="https://turborepo.com" newTab>
+					Turborepo
+				</Link>
+				{" & "}
+				<Link href="https://vitejs.dev/" newTab>
+					Vite
+				</Link>
+			</p>
+		</div>
+	);
 }
 
 export default App;

apps/vite-template/src/app/styles.css

@@ -1,40 +0,0 @@
-.container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0 16px;
-  text-align: center;
-}
-
-.title {
-  font-size: 3rem;
-  font-weight: 700;
-  margin: 0;
-}
-
-.title span {
-  display: inline-block;
-  background-image: linear-gradient(to right, #3b82f6, #ef4444);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-.description {
-  color: #9ca3af;
-  font-weight: 500;
-}
-
-.description a {
-  color: #3b82f6;
-  text-decoration: none;
-}
-
-.description a:hover {
-  text-decoration: underline;
-}