afiqzudinhadi/ecommerce-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add shadcn integration for remix

Browse source
This commit is contained in:
afiqzudinhadi 2025-06-19 22:45:11 +08:00
parent c011186c37
commit 99627e396d
12 changed files with 19401 additions and 18283 deletions
Download patch file Download diff file Expand all files Collapse all files

48
apps/remix-template/app/root.tsx
View file

@ -1,32 +1,36 @@
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import { Analytics } from "@vercel/analytics/react";
import "./styles.css";
import "@repo/ui/src/styles/globals.css";
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
<Analytics />
</body>
</html>
);
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
<Analytics />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
return <Outlet />;
}

40
apps/remix-template/app/routes/shadcn.tsx Normal file
View file

@ -0,0 +1,40 @@
import { Button } from "@repo/ui/components/button";
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@repo/ui/components/card";
import { Link } from "@repo/ui/link";
export default function Index() {
return (
<main className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
<Card className="w-full max-w-md shadow-lg">
<CardHeader>
<CardTitle className="text-3xl font-bold text-center">
Welcome to the Remix Homepage
</CardTitle>
</CardHeader>
<CardContent className="flex flex-col items-center gap-6">
<p className="text-gray-600 text-center">
This homepage uses{" "}
<span className="font-semibold">shadcn/ui</span>{" "}
components from{" "}
<span className="font-mono">@repo/ui</span>.
</p>
<div className="flex gap-4">
<Button asChild>
<Link href="https://remix.run/">Learn Remix</Link>
</Button>
<Button variant="outline" asChild>
<Link href="https://ui.shadcn.com/">
Explore shadcn/ui
</Link>
</Button>
</div>
</CardContent>
</Card>
</main>
);
}