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>
);
}

20
apps/remix-template/components.json Normal file
View file

@ -0,0 +1,20 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "../../packages/ui/src/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"iconLibrary": "lucide",
"aliases": {
"components": "@/components",
"hooks": "@/hooks",
"lib": "@/lib",
"utils": "@repo/ui/lib/utils",
"ui": "@repo/ui/components"
}
}

1
apps/remix-template/postcss.config.mjs Normal file
View file

@ -0,0 +1 @@
export { default } from "@repo/ui/postcss.config";

44
apps/remix-template/tsconfig.json
View file

@ -1,25 +1,25 @@
{
"include": ["**/*.ts", "**/*.tsx"],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["@vercel/remix", "vite/client"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2022",
"strict": true,
"allowJs": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"~/*": ["./app/*"]
},
"include": ["**/*.ts", "**/*.tsx"],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["@vercel/remix", "vite/client"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2022",
"strict": true,
"allowJs": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"~/*": ["./app/*"]
},
// Vite takes care of building everything, not tsc.
"noEmit": true
}
// Vite takes care of building everything, not tsc.
"noEmit": true
}
}