akd-io · akd-io · Apr 18, 2026 · Apr 18, 2026 · Apr 18, 2026 · Apr 18, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,13 +14,13 @@ jobs:
 
     steps:
       - name: "Checkout repo"
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: "Set up pnpm"
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v5
 
       - name: "Set up latest Node LTS"
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: "lts/*"
           cache: pnpm

diff --git a/.github/workflows/cli-e2e.yml b/.github/workflows/cli-e2e.yml
@@ -13,13 +13,13 @@ jobs:
 
     steps:
       - name: "Checkout repo"
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: "Set up pnpm"
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v5
 
       - name: "Set up latest Node LTS"
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: "lts/*"
           cache: pnpm
@@ -56,13 +56,13 @@ jobs:
 
     steps:
       - name: "Checkout repo"
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: "Set up pnpm"
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v5
 
       - name: "Set up latest Node LTS"
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: "lts/*"
           cache: pnpm

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -20,13 +20,13 @@ jobs:
 
     steps:
       - name: "Checkout repo"
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: "Set up pnpm"
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v5
 
       - name: "Set up latest Node LTS"
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: "lts/*"
           registry-url: "https://registry.npmjs.org"

diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@
 # next.js
 **/.next/
 **/out/
+**/next-env.d.ts
 
 # production
 **/build

diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -29,7 +29,7 @@ export default function RootLayout({
   return (
     <html lang="en" {...mantineHtmlProps}>
       <head>
-        <ColorSchemeScript defaultColorScheme="light" />
+        <ColorSchemeScript forceColorScheme="light" />
         <link
           href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Mono&display=swap"
           rel="stylesheet"

diff --git a/apps/website/app/providers.tsx b/apps/website/app/providers.tsx
@@ -5,7 +5,7 @@ import { theme } from "../theme"
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <MantineProvider theme={theme} defaultColorScheme="light">
+    <MantineProvider theme={theme} forceColorScheme="light">
       {children}
     </MantineProvider>
   )

diff --git a/apps/website/components/Anchor.tsx b/apps/website/components/Anchor.tsx
@@ -1,20 +1,10 @@
 "use client"
 
-import { Anchor as MantineAnchor } from "@mantine/core"
-import { ReactNode } from "react"
+import { Anchor as MantineAnchor, polymorphic } from "@mantine/core"
+import type { AnchorProps as MantineAnchorProps } from "@mantine/core"
 
-type AnchorProps = {
-  href?: string
-  target?: string
-  children?: ReactNode
-  c?: string
-  fw?: string | number
-}
-
-export const Anchor = ({
-  c = "#319bff",
-  fw = "bold",
-  ...props
-}: AnchorProps) => {
-  return <MantineAnchor c={c} fw={fw} {...props} />
-}
+export const Anchor = polymorphic<"a", MantineAnchorProps>(
+  (props: MantineAnchorProps) => {
+    return <MantineAnchor c="#319bff" fw="bold" {...props} />
+  },
+)
diff --git a/apps/website/components/Checkbox.tsx b/apps/website/components/Checkbox.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { Checkbox as MantineCheckbox, CheckboxProps } from "@mantine/core"
-import { FC } from "react"
+import { Checkbox as MantineCheckbox } from "@mantine/core"
+import type { CheckboxProps } from "@mantine/core"
 
-export const Checkbox: FC<CheckboxProps> = (props) => {
+export const Checkbox = (props: CheckboxProps) => {
   return <MantineCheckbox size="md" color="violet" {...props} />
 }
diff --git a/apps/website/components/Radio.tsx b/apps/website/components/Radio.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { Radio as MantineRadio, RadioProps } from "@mantine/core"
-import { FC } from "react"
+import { Radio as MantineRadio } from "@mantine/core"
+import type { RadioProps } from "@mantine/core"
 
-export const Radio: FC<RadioProps> = (props) => {
+export const Radio = (props: RadioProps) => {
   return <MantineRadio size="md" color="violet" {...props} />
 }
diff --git a/apps/website/components/Section.tsx b/apps/website/components/Section.tsx
@@ -1,20 +1,20 @@
-import { Box, Flex, FlexProps } from "@mantine/core"
-import { FC, ReactNode } from "react"
+import { Flex, polymorphic } from "@mantine/core"
+import type { FlexProps } from "@mantine/core"
 
-type SectionProps = Omit<FlexProps, "component"> & {
+type SectionProps = FlexProps & {
   innerProps?: FlexProps
-  children?: ReactNode
-  as?: "section" | "header" | "footer"
 }
-export const Section: FC<SectionProps> = ({
-  innerProps,
-  children,
-  as: Element = "section",
-  ...props
-}) => {
-  return (
-    <Box component={Element}>
-      <Flex direction="column" w="100%" px="30px" align="center" {...props}>
+export const Section = polymorphic<"section", SectionProps>(
+  ({ innerProps, children, ...props }: SectionProps) => {
+    return (
+      <Flex
+        component="section"
+        direction="column"
+        w="100%"
+        px="30px"
+        align="center"
+        {...props}
+      >
         <Flex
           direction="column"
           w="100%"
@@ -25,6 +25,6 @@ export const Section: FC<SectionProps> = ({
           {children}
         </Flex>
       </Flex>
-    </Box>
-  )
-}
+    )
+  },
+)
diff --git a/apps/website/components/SocialIcons.tsx b/apps/website/components/SocialIcons.tsx
@@ -1,8 +1,8 @@
-import { Flex, FlexProps } from "@mantine/core"
-import { FC } from "react"
+import { Flex } from "@mantine/core"
+import type { FlexProps } from "@mantine/core"
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa"
 
-export const SocialIcons: FC<FlexProps> = (props) => {
+export const SocialIcons = (props: FlexProps) => {
   return (
     <Flex
       justify={{ base: "left", sm: "center" }}
@@ -13,15 +13,21 @@ export const SocialIcons: FC<FlexProps> = (props) => {
       <a
         aria-label="GitHub Repository of Create Next Stack"
         href="https://github.com/akd-io/create-next-stack"
+        style={{ color: "inherit" }}
       >
         <FaGithub size="24px" />
       </a>
-      <a aria-label="Community Discord" href="https://discord.gg/7Ns5WwGjjZ">
+      <a
+        aria-label="Community Discord"
+        href="https://discord.gg/7Ns5WwGjjZ"
+        style={{ color: "inherit" }}
+      >
         <FaDiscord size="24px" />
       </a>
       <a
         aria-label="Twitter profile of the creator of Create Next Stack"
         href="https://twitter.com/akd_io"
+        style={{ color: "inherit" }}
       >
         <FaTwitter size="24px" />
       </a>

diff --git a/apps/website/globals.d.ts b/apps/website/globals.d.ts
@@ -0,0 +1 @@
+declare module "*.css"
diff --git a/apps/website/next-env.d.ts b/apps/website/next-env.d.ts
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -9,21 +9,24 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@mantine/core": "^8.0.0",
-    "@mantine/hooks": "^8.0.0",
+    "@mantine/core": "^9.0.0",
+    "@mantine/hooks": "^9.0.0",
     "next": "^16.0.0",
     "next-plausible": "^3.12.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.0",
-    "react-icons": "^5.4.0"
+    "react-icons": "^5.4.0",
+    "validate-npm-package-name": "^7.0.2"
   },
   "devDependencies": {
     "@types/node": "^25.0.0",
     "@types/react": "^19.0.0",
+    "@types/validate-npm-package-name": "^4.0.2",
     "eslint": "^9.0.0",
     "eslint-config-next": "^16.0.0",
     "eslint-config-prettier": "^10.0.0",

diff --git a/apps/website/templates/LandingPage/LandingPageTemplate.tsx b/apps/website/templates/LandingPage/LandingPageTemplate.tsx
@@ -1,15 +1,15 @@
 "use client"
 
 import { Box, Flex } from "@mantine/core"
-import { FC, ReactNode } from "react"
+import type { PropsWithChildren } from "react"
 import { Section } from "../../components/Section"
 import { Description } from "./components/Description"
 import { Footer } from "./components/Footer"
 import { HeaderSection } from "./components/Header"
 import { Newsletter } from "./components/NewsletterSection"
 import { TechnologiesForm } from "./components/TechnologiesForm"
 
-const Card: FC<{ children?: ReactNode }> = ({ children }) => (
+const Card = ({ children }: PropsWithChildren) => (
   <Box
     w="100%"
     style={{

diff --git a/apps/website/templates/LandingPage/components/CommandModal.tsx b/apps/website/templates/LandingPage/components/CommandModal.tsx
@@ -1,19 +1,17 @@
-"use client"
-
 import { Button, Code, Flex, Modal, Text } from "@mantine/core"
-import { FC, useState } from "react"
+import { useState } from "react"
 import { FiCheck } from "react-icons/fi"
 
 type CommandModalProps = {
   opened: boolean
   command: string
   onClose: () => void
 }
-export const CommandModal: FC<CommandModalProps> = ({
+export const CommandModal = ({
   command,
   opened,
   onClose,
-}) => {
+}: CommandModalProps) => {
   const [hasCopied, setHasCopied] = useState(false)
   const [copyFailed, setCopyFailed] = useState(false)
 

diff --git a/apps/website/templates/LandingPage/components/Footer.tsx b/apps/website/templates/LandingPage/components/Footer.tsx
@@ -7,7 +7,7 @@ import { SocialIcons } from "../../../components/SocialIcons"
 export const Footer: React.FC = () => {
   return (
     <Section
-      as="footer"
+      component="footer"
       innerProps={{
         gap: "24px",
       }}

diff --git a/apps/website/templates/LandingPage/components/Header.tsx b/apps/website/templates/LandingPage/components/Header.tsx
@@ -4,7 +4,7 @@ import { SocialIcons } from "../../../components/SocialIcons"
 
 export const HeaderSection = () => {
   return (
-    <Section as="header">
+    <Section component="header">
       <Flex
         direction="column"
         align={{ base: "flex-start", sm: "center" }}
@@ -21,7 +21,6 @@ export const HeaderSection = () => {
             fw={800}
             ta={{ base: "left", sm: "center" }}
             variant="gradient"
-            gradient={{ from: "#6838F1", to: "#DC51F2", deg: 135 }}
             lh={1.2}
           >
             Create Next Stack
@@ -31,7 +30,6 @@ export const HeaderSection = () => {
             fw="bold"
             ta={{ base: "left", sm: "center" }}
             variant="gradient"
-            gradient={{ from: "#6838F1", to: "#DC51F2", deg: 135 }}
           >
             The ultimate starter kit for Next.js
           </Text>

diff --git a/apps/website/templates/LandingPage/components/InfoIconTooltip.tsx b/apps/website/templates/LandingPage/components/InfoIconTooltip.tsx
@@ -1,23 +1,40 @@
 "use client"
 
 import { Flex, Tooltip } from "@mantine/core"
-import { FC } from "react"
+import { useRef, useState } from "react"
+import type { ReactNode } from "react"
 import { FiInfo } from "react-icons/fi"
 
 type WithInfoIconAndTooltipProps = {
   tooltip: string
-  children: React.ReactNode
+  children: ReactNode
 }
-export const WithInfoIconAndTooltip: FC<WithInfoIconAndTooltipProps> = ({
+export const WithInfoIconAndTooltip = ({
   tooltip,
   children,
-}) => {
+}: WithInfoIconAndTooltipProps) => {
+  const iconRef = useRef<HTMLSpanElement>(null)
+  const [opened, setOpened] = useState(false)
   return (
-    <Tooltip position="top" label={tooltip} withArrow>
-      <Flex display="inline-flex" direction="row" gap="6px" align="center">
-        {children}
+    <Flex
+      display="inline-flex"
+      direction="row"
+      gap="6px"
+      align="center"
+      onMouseEnter={() => setOpened(true)}
+      onMouseLeave={() => setOpened(false)}
+    >
+      {children}
+      <span ref={iconRef} style={{ display: "inline-flex" }}>
         <FiInfo size="16px" />
-      </Flex>
-    </Tooltip>
+      </span>
+      <Tooltip
+        target={iconRef}
+        label={tooltip}
+        opened={opened}
+        position="top"
+        withArrow
+      />
+    </Flex>
   )
 }