fix: import Radix Themes component from direct import path to avoid u…

…nnecessary components bundled in client bundle

eslint.config.mjs

@@ -15,6 +15,9 @@ const compat = new FlatCompat({
   baseDirectory: import.meta.dirname,
 });
 
+const radixThemesRestrictedImportMessage =
+  'Please use `import { <Component> } from "@radix-ui/themes/components/<component>"`instead, to avoid unnecessary Radix dependencies being bundled to the client bundle, due to Next.js bundling behavior and Radix Themes now imports from `radix-ui` instead of `@radix-ui/<component>`.';
+
 const config = tseslint.config(
   eslint.configs.recommended,
   tseslint.configs.strictTypeChecked,
@@ -70,13 +73,28 @@ const config = tseslint.config(
         "warn",
         { fixStyle: "inline-type-imports" },
       ],
+      "@typescript-eslint/no-confusing-void-expression": [
+        "error",
+        { ignoreArrowShorthand: true },
+      ],
       "@typescript-eslint/no-misused-promises": [
         "error",
         { checksVoidReturn: { attributes: false } },
       ],
-      "@typescript-eslint/no-confusing-void-expression": [
+      "@typescript-eslint/no-restricted-imports": [
         "error",
-        { ignoreArrowShorthand: true },
+        {
+          paths: [
+            {
+              message: radixThemesRestrictedImportMessage,
+              name: "@radix-ui/themes",
+            },
+            {
+              message: radixThemesRestrictedImportMessage,
+              name: "@radix-ui/themes/components/index",
+            },
+          ],
+        },
       ],
       "@typescript-eslint/no-unused-vars": [
         "error",
@@ -86,8 +104,8 @@ const config = tseslint.config(
           caughtErrors: "all",
           caughtErrorsIgnorePattern: "^_",
           destructuredArrayIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
           ignoreRestSiblings: true,
+          varsIgnorePattern: "^_",
         },
       ],
       "@typescript-eslint/restrict-template-expressions": [
@@ -101,13 +119,14 @@ const config = tseslint.config(
           allowRegExp: false,
         },
       ],
-      "import/namespace": "off",
       "import/default": "off",
+      "import/namespace": "off",
       "import/no-named-as-default-member": "off",
       "import/no-unresolved": "off",
       "import/order": [
         "warn",
         {
+          alphabetize: { order: "asc" },
           groups: [
             "builtin",
             "external",
@@ -117,19 +136,18 @@ const config = tseslint.config(
             "index",
           ],
           "newlines-between": "always",
-          alphabetize: { order: "asc" },
         },
       ],
+      "react-compiler/react-compiler": "error",
       "react/jsx-sort-props": [
         "warn",
         {
           callbacksLast: true,
-          shorthandFirst: true,
           multiline: "last",
           reservedFirst: true,
+          shorthandFirst: true,
         },
       ],
-      "react-compiler/react-compiler": "error",
       "sort-imports": ["warn", { ignoreDeclarationSort: true }],
       "unicorn/prevent-abbreviations": "off",
     },

next.config.ts

@@ -80,7 +80,7 @@ const config = {
   experimental: {
     typedEnv: true,
     reactCompiler: true,
-    optimizePackageImports: ["@radix-ui/themes"],
+    optimizePackageImports: ["@radix-ui/themes", "radix-ui"],
   },
 } satisfies NextConfig;
 

src/app/%5Fparams/page.tsx

@@ -1,5 +1,9 @@
-import { Code, Container, Heading, Link, Section } from "@radix-ui/themes";
+import { Code } from "@radix-ui/themes/components/code";
+import { Container } from "@radix-ui/themes/components/container";
 import * as DataList from "@radix-ui/themes/components/data-list";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { Link } from "@radix-ui/themes/components/link";
+import { Section } from "@radix-ui/themes/components/section";
 import { type Metadata } from "next";
 import { type FC } from "react";
 

src/app/blog/[slug]/page.tsx

@@ -1,4 +1,6 @@
-import { Container, Flex, Section } from "@radix-ui/themes";
+import { Container } from "@radix-ui/themes/components/container";
+import { Flex } from "@radix-ui/themes/components/flex";
+import { Section } from "@radix-ui/themes/components/section";
 import { type Metadata, type ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 import { type FC } from "react";

src/app/blog/page.tsx

@@ -1,13 +1,11 @@
-import {
-  Box,
-  Card,
-  Container,
-  Flex,
-  Grid,
-  Heading,
-  Section,
-  Text,
-} from "@radix-ui/themes";
+import { Box } from "@radix-ui/themes/components/box";
+import { Card } from "@radix-ui/themes/components/card";
+import { Container } from "@radix-ui/themes/components/container";
+import { Flex } from "@radix-ui/themes/components/flex";
+import { Grid } from "@radix-ui/themes/components/grid";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { Section } from "@radix-ui/themes/components/section";
+import { Text } from "@radix-ui/themes/components/text";
 import { type Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";

src/app/education/page.tsx

@@ -7,17 +7,14 @@ import "@radix-ui/themes/tokens/colors/lime.css";
 import "@radix-ui/themes/tokens/colors/ruby.css";
 import "@radix-ui/themes/tokens/colors/violet.css";
 
-import {
-  Badge,
-  type BadgeProps,
-  Card,
-  Container,
-  Flex,
-  Grid,
-  Heading,
-  Section,
-  Text,
-} from "@radix-ui/themes";
+import { Badge, type BadgeProps } from "@radix-ui/themes/components/badge";
+import { Card } from "@radix-ui/themes/components/card";
+import { Container } from "@radix-ui/themes/components/container";
+import { Flex } from "@radix-ui/themes/components/flex";
+import { Grid } from "@radix-ui/themes/components/grid";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { Section } from "@radix-ui/themes/components/section";
+import { Text } from "@radix-ui/themes/components/text";
 import { type Metadata } from "next";
 import Image from "next/image";
 import { type BreadcrumbList, type Graph } from "schema-dts";

src/app/experience/page.tsx

@@ -1,12 +1,10 @@
-import {
-  Box,
-  Container,
-  Flex,
-  Heading,
-  Section,
-  Text,
-  Tooltip,
-} from "@radix-ui/themes";
+import { Box } from "@radix-ui/themes/components/box";
+import { Container } from "@radix-ui/themes/components/container";
+import { Flex } from "@radix-ui/themes/components/flex";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { Section } from "@radix-ui/themes/components/section";
+import { Text } from "@radix-ui/themes/components/text";
+import { Tooltip } from "@radix-ui/themes/components/tooltip";
 import { type Metadata } from "next";
 import Image from "next/image";
 import { type BreadcrumbList, type Graph } from "schema-dts";

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import "./globals.css";
 
-import { Theme } from "@radix-ui/themes";
+import { Theme } from "@radix-ui/themes/components/theme";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import clsx from "clsx";

src/app/not-found.tsx

@@ -1,13 +1,11 @@
-import {
-  Box,
-  Button,
-  Container,
-  Flex,
-  Heading,
-  Link,
-  Section,
-  Text,
-} from "@radix-ui/themes";
+import { Box } from "@radix-ui/themes/components/box";
+import { Button } from "@radix-ui/themes/components/button";
+import { Container } from "@radix-ui/themes/components/container";
+import { Flex } from "@radix-ui/themes/components/flex";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { Link } from "@radix-ui/themes/components/link";
+import { Section } from "@radix-ui/themes/components/section";
+import { Text } from "@radix-ui/themes/components/text";
 import NextLink from "next/link";
 import { type FC } from "react";
 

src/app/page.tsx

@@ -1,4 +1,6 @@
-import { Box, Container, Flex } from "@radix-ui/themes";
+import { Box } from "@radix-ui/themes/components/box";
+import { Container } from "@radix-ui/themes/components/container";
+import { Flex } from "@radix-ui/themes/components/flex";
 import { type FC } from "react";
 import { type BreadcrumbList, type Graph, type WebSite } from "schema-dts";
 

src/app/skills/page.tsx

@@ -1,13 +1,11 @@
-import {
-  Avatar,
-  Badge,
-  Box,
-  Card,
-  Container,
-  Flex,
-  Heading,
-  Section,
-} from "@radix-ui/themes";
+import { Avatar } from "@radix-ui/themes/components/avatar";
+import { Badge } from "@radix-ui/themes/components/badge";
+import { Box } from "@radix-ui/themes/components/box";
+import { Card } from "@radix-ui/themes/components/card";
+import { Container } from "@radix-ui/themes/components/container";
+import { Flex } from "@radix-ui/themes/components/flex";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { Section } from "@radix-ui/themes/components/section";
 import { type Metadata } from "next";
 import { type BreadcrumbList, type Graph } from "schema-dts";
 

src/components/blog-post/copy-code-button.tsx

@@ -1,6 +1,9 @@
 "use client";
 
-import { IconButton, type IconButtonProps } from "@radix-ui/themes";
+import {
+  IconButton,
+  type IconButtonProps,
+} from "@radix-ui/themes/components/icon-button";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import { type FC, useEffect, useRef, useState } from "react";
 

src/components/blog-post/copy-link-button.tsx

@@ -1,6 +1,9 @@
 "use client";
 
-import { IconButton, type IconButtonProps } from "@radix-ui/themes";
+import {
+  IconButton,
+  type IconButtonProps,
+} from "@radix-ui/themes/components/icon-button";
 import { IconCheck, IconLink } from "@tabler/icons-react";
 import { usePathname } from "next/navigation";
 import { type FC, useEffect, useRef, useState } from "react";

src/components/blog-post/main-content.tsx

@@ -2,23 +2,22 @@ import "@radix-ui/themes/tokens/colors/amber.css";
 import "@radix-ui/themes/tokens/colors/blue.css";
 import "@radix-ui/themes/tokens/colors/red.css";
 
+import { Box } from "@radix-ui/themes/components/box";
+import * as Callout from "@radix-ui/themes/components/callout";
+import { Card } from "@radix-ui/themes/components/card";
+import { Code } from "@radix-ui/themes/components/code";
+import { Em } from "@radix-ui/themes/components/em";
+import { Flex } from "@radix-ui/themes/components/flex";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { Inset } from "@radix-ui/themes/components/inset";
+import { Link } from "@radix-ui/themes/components/link";
+import { ScrollArea } from "@radix-ui/themes/components/scroll-area";
 import {
-  Box,
-  Card,
-  Code,
-  Em,
-  Flex,
-  Heading,
-  Inset,
-  Link,
-  ScrollArea,
   Section,
   type SectionProps,
-  Strong,
-  Text,
-} from "@radix-ui/themes";
-// compound component needs to be imported from individual entry point to avoid the entire @radix-ui/themes being bundled in the client bundle
-import * as Callout from "@radix-ui/themes/components/callout";
+} from "@radix-ui/themes/components/section";
+import { Strong } from "@radix-ui/themes/components/strong";
+import { Text } from "@radix-ui/themes/components/text";
 import {
   IconAlertTriangle,
   IconExclamationCircle,

src/components/blog-post/sidebar.tsx

@@ -1,12 +1,12 @@
+import { Card } from "@radix-ui/themes/components/card";
+import { Flex } from "@radix-ui/themes/components/flex";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { IconButton } from "@radix-ui/themes/components/icon-button";
 import {
-  Card,
-  Flex,
-  Heading,
-  IconButton,
   Section,
   type SectionProps,
-  Text,
-} from "@radix-ui/themes";
+} from "@radix-ui/themes/components/section";
+import { Text } from "@radix-ui/themes/components/text";
 import {
   IconBrandFacebook,
   IconBrandLinkedin,

src/components/breadcrumb.tsx

@@ -1,4 +1,6 @@
-import { Flex, type FlexProps, Link, Text } from "@radix-ui/themes";
+import { Flex, type FlexProps } from "@radix-ui/themes/components/flex";
+import { Link } from "@radix-ui/themes/components/link";
+import { Text } from "@radix-ui/themes/components/text";
 import { IconChevronRight } from "@tabler/icons-react";
 import NextLink from "next/link";
 import { type FC, Fragment } from "react";

src/components/footer.tsx

@@ -1,11 +1,11 @@
+import { Box } from "@radix-ui/themes/components/box";
+import { Flex } from "@radix-ui/themes/components/flex";
+import { IconButton } from "@radix-ui/themes/components/icon-button";
 import {
-  Box,
-  Flex,
-  IconButton,
   Section,
   type SectionProps,
-  Text,
-} from "@radix-ui/themes";
+} from "@radix-ui/themes/components/section";
+import { Text } from "@radix-ui/themes/components/text";
 import {
   IconBrandGithub,
   IconBrandLinkedin,

src/components/home/about.tsx

@@ -1,12 +1,9 @@
-import {
-  Box,
-  Button,
-  Flex,
-  type FlexProps,
-  Heading,
-  Section,
-  Text,
-} from "@radix-ui/themes";
+import { Box } from "@radix-ui/themes/components/box";
+import { Button } from "@radix-ui/themes/components/button";
+import { Flex, type FlexProps } from "@radix-ui/themes/components/flex";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { Section } from "@radix-ui/themes/components/section";
+import { Text } from "@radix-ui/themes/components/text";
 import Image from "next/image";
 import { type FC } from "react";
 

src/components/home/featured-blog-posts.tsx

@@ -1,12 +1,9 @@
-import {
-  Button,
-  Card,
-  Flex,
-  type FlexProps,
-  Heading,
-  Section,
-  Text,
-} from "@radix-ui/themes";
+import { Button } from "@radix-ui/themes/components/button";
+import { Card } from "@radix-ui/themes/components/card";
+import { Flex, type FlexProps } from "@radix-ui/themes/components/flex";
+import { Heading } from "@radix-ui/themes/components/heading";
+import { Section } from "@radix-ui/themes/components/section";
+import { Text } from "@radix-ui/themes/components/text";
 import { IconArrowRight } from "@tabler/icons-react";
 import Image from "next/image";
 import Link from "next/link";