diff --git a/.eslintignore b/.eslintignore
index b81f96e..5bb7865 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,6 +1,6 @@
 .next
 public
-esm
+**/esm
 dist
 .turbo
 .rollup.cache
diff --git a/README.md b/README.md
index 435d876..3d0f734 100644
--- a/README.md
+++ b/README.md
@@ -91,3 +91,4 @@ pnpm turbo compile:watch
 - [blitz](https://github.com/blitz-js/blitz/tree/main)
 - [Next-js-Boilerplate](https://github.com/ixartz/Next-js-Boilerplate/tree/main)
 - [create-t3-app](https://github.com/t3-oss/create-t3-app/blob/main/.github/workflows/ci.yml)
+- [nextjs-monorepo-example](https://github.com/belgattitude/nextjs-monorepo-example)
diff --git a/apps/large-file-upload/package.json b/apps/large-file-upload/package.json
index cbb5538..445570c 100644
--- a/apps/large-file-upload/package.json
+++ b/apps/large-file-upload/package.json
@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "@esbuild-plugins/tsconfig-paths": "^0.1.2",
+    "@npcs/log": "workspace:^",
     "@npcs/next-config": "workspace:^",
     "@npcs/playwright-config": "workspace:^",
     "@npcs/tailwind-config": "workspace:^",
+    "@npcs/ui": "workspace:^",
     "@npcs/upload": "workspace:*",
     "@prisma/client": "^5.16.2",
     "@radix-ui/react-icons": "^1.3.0",
@@ -65,7 +67,7 @@
     "@npcs/vitest-config": "workspace:^",
     "@testing-library/react": "^16.0.0",
     "@types/multistream": "^4.1.3",
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/spark-md5": "^3.0.4",
diff --git a/apps/large-file-upload/src/app/globals.css b/apps/large-file-upload/src/app/globals.css
index 66b78c9..1643bc5 100644
--- a/apps/large-file-upload/src/app/globals.css
+++ b/apps/large-file-upload/src/app/globals.css
@@ -1,3 +1,5 @@
+@import url("@npcs/upload/styles.css");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/apps/large-file-upload/src/app/page.tsx b/apps/large-file-upload/src/app/page.tsx
index c18f6f8..90725a7 100644
--- a/apps/large-file-upload/src/app/page.tsx
+++ b/apps/large-file-upload/src/app/page.tsx
@@ -4,7 +4,6 @@ import {
   startWebsocketServer,
   Upload,
 } from "@npcs/upload";
-import "@npcs/upload/styles.css";
 import path from "path";
 
 configuration.set({
diff --git a/apps/notes/package.json b/apps/notes/package.json
index 294985c..b44241a 100644
--- a/apps/notes/package.json
+++ b/apps/notes/package.json
@@ -23,11 +23,12 @@
     "@clerk/nextjs": "^5.2.6",
     "@clerk/themes": "^2.1.12",
     "@faker-js/faker": "^8.4.1",
+    "@npcs/log": "workspace:^",
     "@npcs/next-config": "workspace:^",
     "@npcs/playwright-config": "workspace:^",
-    "@npcs/shared": "workspace:^",
     "@npcs/tailwind-config": "workspace:^",
     "@npcs/theme": "workspace:^",
+    "@npcs/ui": "workspace:^",
     "@prisma/client": "^5.16.2",
     "ahooks": "^3.8.0",
     "class-variance-authority": "^0.7.0",
@@ -55,7 +56,7 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "dotenv": "^16.4.5",
diff --git a/apps/notes/src/app/(home)/page.tsx b/apps/notes/src/app/(home)/page.tsx
index 8f43c74..cc39466 100644
--- a/apps/notes/src/app/(home)/page.tsx
+++ b/apps/notes/src/app/(home)/page.tsx
@@ -7,7 +7,7 @@ import { ImageFirstNote } from "@libs/components/image/first-note";
 import { InfoButton } from "@libs/components/info";
 import { HeaderLayout } from "@libs/components/layout/header";
 import { prisma } from "@libs/prisma/client";
-import { IPageProps } from "@npcs/shared/react-helpers";
+import { IPageProps } from "@npcs/ui";
 import Link from "next/link";
 import React from "react";
 
diff --git a/apps/notes/src/app/add/page.tsx b/apps/notes/src/app/add/page.tsx
index 5f82514..defbb65 100644
--- a/apps/notes/src/app/add/page.tsx
+++ b/apps/notes/src/app/add/page.tsx
@@ -4,7 +4,7 @@ import { NoteEdit } from "@libs/components/edit/edit";
 import { ENoteEditMode } from "@libs/components/edit/types";
 import { INoteValidationInfer } from "@libs/components/edit/validation";
 import { prisma } from "@libs/prisma/client";
-import { IPageProps } from "@npcs/shared/react-helpers";
+import { IPageProps } from "@npcs/ui";
 import { redirect } from "next/navigation";
 import React from "react";
 
diff --git a/apps/notes/src/app/globals.css b/apps/notes/src/app/globals.css
index ae32046..c5fe2c8 100644
--- a/apps/notes/src/app/globals.css
+++ b/apps/notes/src/app/globals.css
@@ -1,4 +1,4 @@
-@import url("@npcs/shared/styles.css");
+@import url("@npcs/ui/styles.css");
 @import url("@npcs/theme/styles.css");
 @import url("@libs/theme/variables.css");
 
diff --git a/apps/notes/src/app/layout.tsx b/apps/notes/src/app/layout.tsx
index a014eb6..0dd7ec5 100644
--- a/apps/notes/src/app/layout.tsx
+++ b/apps/notes/src/app/layout.tsx
@@ -2,7 +2,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 import { dark } from "@clerk/themes";
 import { createUserIfNeeded } from "@libs/actions/user";
 import { SyncElementClass } from "@libs/theme";
-import { cn } from "@npcs/shared/jsx";
+import { cn } from "@npcs/ui";
 import type { Metadata } from "next";
 import { Nunito } from "next/font/google";
 import "./globals.css";
diff --git a/apps/notes/src/app/search/page.tsx b/apps/notes/src/app/search/page.tsx
index 11ab984..58a4ee5 100644
--- a/apps/notes/src/app/search/page.tsx
+++ b/apps/notes/src/app/search/page.tsx
@@ -4,7 +4,7 @@ import { InputSearch } from "@libs/components/input/search";
 import { HeaderLayout } from "@libs/components/layout/header";
 import { prisma } from "@libs/prisma/client";
 import { Back } from "@libs/router/back";
-import { IPageProps } from "@npcs/shared/react-helpers";
+import { IPageProps } from "@npcs/ui";
 import React from "react";
 
 export const dynamic = "force-dynamic";
diff --git a/apps/notes/src/app/view/[id]/page.tsx b/apps/notes/src/app/view/[id]/page.tsx
index 9e495ad..0a93782 100644
--- a/apps/notes/src/app/view/[id]/page.tsx
+++ b/apps/notes/src/app/view/[id]/page.tsx
@@ -2,7 +2,7 @@ import { NoteEdit } from "@libs/components/edit/edit";
 import { ENoteEditMode } from "@libs/components/edit/types";
 import { INoteValidationInfer } from "@libs/components/edit/validation";
 import { prisma } from "@libs/prisma/client";
-import { IPageProps } from "@npcs/shared/react-helpers";
+import { IPageProps } from "@npcs/ui";
 import { redirect } from "next/navigation";
 import React from "react";
 
diff --git a/apps/notes/src/libs/actions/user.ts b/apps/notes/src/libs/actions/user.ts
index 1af95ab..77a77e8 100644
--- a/apps/notes/src/libs/actions/user.ts
+++ b/apps/notes/src/libs/actions/user.ts
@@ -2,7 +2,7 @@
 
 import { currentUser } from "@clerk/nextjs/server";
 import { prisma } from "@libs/prisma/client";
-import { createLog } from "@npcs/shared/log";
+import { createLog } from "@npcs/log";
 
 const log = createLog("user actions");
 
diff --git a/apps/notes/src/libs/components/button/float.tsx b/apps/notes/src/libs/components/button/float.tsx
index c1d95f2..3d8ebbb 100644
--- a/apps/notes/src/libs/components/button/float.tsx
+++ b/apps/notes/src/libs/components/button/float.tsx
@@ -1,4 +1,4 @@
-import { mp } from "@npcs/shared/react-helpers";
+import { mp } from "@npcs/ui";
 import React from "react";
 
 export interface IFloatButtonProps extends React.ComponentProps<"div"> {
diff --git a/apps/notes/src/libs/components/button/icon.tsx b/apps/notes/src/libs/components/button/icon.tsx
index ad3bd3e..263996f 100644
--- a/apps/notes/src/libs/components/button/icon.tsx
+++ b/apps/notes/src/libs/components/button/icon.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn, mp } from "@npcs/shared/react-helpers";
+import { cn, mp } from "@npcs/ui";
 
 export interface IIconButtonProps extends React.ComponentProps<"button"> {
   children: React.ReactNode;
diff --git a/apps/notes/src/libs/components/card/index.tsx b/apps/notes/src/libs/components/card/index.tsx
index a5952c8..dfbf6ae 100644
--- a/apps/notes/src/libs/components/card/index.tsx
+++ b/apps/notes/src/libs/components/card/index.tsx
@@ -5,8 +5,10 @@ import {
   Carousel,
   CarouselContent,
   CarouselItem,
-} from "@npcs/shared/components/carousel.js";
-import { cn, IComponentBaseProps, mp } from "@npcs/shared/react-helpers";
+  cn,
+  IComponentBaseProps,
+  mp,
+} from "@npcs/ui";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import React from "react";
diff --git a/apps/notes/src/libs/components/edit/edit.tsx b/apps/notes/src/libs/components/edit/edit.tsx
index b5cd327..d5f06d9 100644
--- a/apps/notes/src/libs/components/edit/edit.tsx
+++ b/apps/notes/src/libs/components/edit/edit.tsx
@@ -12,9 +12,9 @@ import {
   FormControl,
   FormField,
   FormItem,
-} from "@npcs/shared/components";
-import { useForm } from "@npcs/shared/hooks/form";
-import { useRouter } from "@npcs/shared/router/hooks/index.js";
+  useForm,
+  useRouter,
+} from "@npcs/ui";
 import { useControllableValue, useRequest } from "ahooks";
 import React from "react";
 import { HeaderLayout } from "../layout/header";
diff --git a/apps/notes/src/libs/components/edit/save-button.tsx b/apps/notes/src/libs/components/edit/save-button.tsx
index 2239201..dbdeb1e 100644
--- a/apps/notes/src/libs/components/edit/save-button.tsx
+++ b/apps/notes/src/libs/components/edit/save-button.tsx
@@ -1,10 +1,6 @@
 import { ButtonIcon, IIconButtonProps } from "@libs/components/button/icon";
 import { IconSave } from "@libs/components/icon/save";
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-} from "@npcs/shared/components/dialog.js";
+import { Dialog, DialogContent, DialogTrigger } from "@npcs/ui";
 import { Button } from "../button/button";
 import { IconWarn } from "../icon/warn";
 
diff --git a/apps/notes/src/libs/components/image/__create__.tsx b/apps/notes/src/libs/components/image/__create__.tsx
index 8b4ec7c..c837b8e 100644
--- a/apps/notes/src/libs/components/image/__create__.tsx
+++ b/apps/notes/src/libs/components/image/__create__.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/alt-text */
 
-import { cn, mp } from "@npcs/shared/react-helpers";
+import { cn, mp } from "@npcs/ui";
 import Image, { ImageProps } from "next/image";
 import React from "react";
 
diff --git a/apps/notes/src/libs/components/info/index.tsx b/apps/notes/src/libs/components/info/index.tsx
index b00e53b..b29f8c8 100644
--- a/apps/notes/src/libs/components/info/index.tsx
+++ b/apps/notes/src/libs/components/info/index.tsx
@@ -1,8 +1,7 @@
 import { ButtonIcon } from "@libs/components/button/icon";
 import { IconInfo } from "@libs/components/icon/info";
 import { REPO } from "@libs/constants/repo";
-import { IComponentBaseProps } from "@npcs/shared/component-type";
-import { mp } from "@npcs/shared/react-helpers";
+import { IComponentBaseProps, mp } from "@npcs/ui";
 import Link from "next/link";
 import React from "react";
 
diff --git a/apps/notes/src/libs/components/input/content.tsx b/apps/notes/src/libs/components/input/content.tsx
index 9d78282..32988b6 100644
--- a/apps/notes/src/libs/components/input/content.tsx
+++ b/apps/notes/src/libs/components/input/content.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { mp } from "@npcs/shared/react-helpers";
+import { mp } from "@npcs/ui";
 import { useControllableValue } from "ahooks";
 import React, { ComponentProps } from "react";
 
diff --git a/apps/notes/src/libs/components/input/search.tsx b/apps/notes/src/libs/components/input/search.tsx
index 048234b..5806edd 100644
--- a/apps/notes/src/libs/components/input/search.tsx
+++ b/apps/notes/src/libs/components/input/search.tsx
@@ -1,9 +1,7 @@
 "use client";
 
 import { IconClose } from "@libs/components/icon/close";
-import { IComponentBaseProps } from "@npcs/shared/component-type";
-import { mp } from "@npcs/shared/jsx";
-import { useRouter } from "@npcs/shared/router/hooks/index.js";
+import { IComponentBaseProps, mp, useRouter } from "@npcs/ui";
 import { useControllableValue, useDebounceEffect } from "ahooks";
 import { omit } from "lodash-es";
 import React, { ComponentProps, useTransition } from "react";
diff --git a/apps/notes/src/libs/components/input/title.tsx b/apps/notes/src/libs/components/input/title.tsx
index ee6486f..5d75a6f 100644
--- a/apps/notes/src/libs/components/input/title.tsx
+++ b/apps/notes/src/libs/components/input/title.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { cn, mp } from "@npcs/shared/react-helpers";
+import { cn, mp } from "@npcs/ui";
 import { useControllableValue } from "ahooks";
 import React, { ComponentProps } from "react";
 
diff --git a/apps/notes/src/libs/components/layout/default.tsx b/apps/notes/src/libs/components/layout/default.tsx
index 1e979b5..01e03cf 100644
--- a/apps/notes/src/libs/components/layout/default.tsx
+++ b/apps/notes/src/libs/components/layout/default.tsx
@@ -1,4 +1,4 @@
-import { IComponentBaseProps, mp } from "@npcs/shared/react-helpers";
+import { IComponentBaseProps, mp } from "@npcs/ui";
 import React from "react";
 
 export interface IDefaultLayoutProps extends IComponentBaseProps {
diff --git a/apps/notes/src/libs/components/layout/header.tsx b/apps/notes/src/libs/components/layout/header.tsx
index 597d162..8ff0880 100644
--- a/apps/notes/src/libs/components/layout/header.tsx
+++ b/apps/notes/src/libs/components/layout/header.tsx
@@ -1,4 +1,4 @@
-import { cn, IComponentBaseProps, mp } from "@npcs/shared/react-helpers";
+import { cn, IComponentBaseProps, mp } from "@npcs/ui";
 import React from "react";
 
 export interface IHeaderLayoutProps extends IComponentBaseProps {
diff --git a/apps/notes/src/libs/components/layout/sidebar.tsx b/apps/notes/src/libs/components/layout/sidebar.tsx
index a0b4d28..2205270 100644
--- a/apps/notes/src/libs/components/layout/sidebar.tsx
+++ b/apps/notes/src/libs/components/layout/sidebar.tsx
@@ -1,4 +1,4 @@
-import { IComponentBaseProps, mp } from "@npcs/shared/react-helpers";
+import { IComponentBaseProps, mp } from "@npcs/ui";
 import React from "react";
 
 export interface ISidebarProps extends IComponentBaseProps {}
diff --git a/apps/notes/src/libs/router/back.tsx b/apps/notes/src/libs/router/back.tsx
index eca2f65..54e60ea 100644
--- a/apps/notes/src/libs/router/back.tsx
+++ b/apps/notes/src/libs/router/back.tsx
@@ -2,7 +2,7 @@
 
 import { ButtonIcon } from "@libs/components/button/icon";
 import { IconBack } from "@libs/components/icon/back";
-import { IComponentBaseProps, mp } from "@npcs/shared/react-helpers";
+import { IComponentBaseProps, mp } from "@npcs/ui";
 import { useRouter } from "next/navigation";
 import React from "react";
 
diff --git a/apps/notes/src/stories/utils.ts b/apps/notes/src/stories/utils.ts
index 74eba8a..95ec5f7 100644
--- a/apps/notes/src/stories/utils.ts
+++ b/apps/notes/src/stories/utils.ts
@@ -1,3 +1,3 @@
-import { createLog } from "@npcs/shared/log";
+import { createLog } from "@npcs/log";
 
 export const storyLog = createLog("story");
diff --git a/apps/stackoverflow/package.json b/apps/stackoverflow/package.json
index 727b2b9..fb49a88 100644
--- a/apps/stackoverflow/package.json
+++ b/apps/stackoverflow/package.json
@@ -23,11 +23,12 @@
     "@clerk/nextjs": "^5.2.6",
     "@faker-js/faker": "^8.4.1",
     "@hookform/resolvers": "^3.9.0",
+    "@npcs/log": "workspace:^",
     "@npcs/next-config": "workspace:^",
     "@npcs/playwright-config": "workspace:^",
-    "@npcs/shared": "workspace:^",
     "@npcs/storybook-config": "workspace:^",
     "@npcs/tailwind-config": "workspace:^",
+    "@npcs/ui": "workspace:^",
     "@prisma/client": "^5.16.2",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
@@ -85,7 +86,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "@testing-library/react": "^16.0.0",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/apps/stackoverflow/prisma/seed.ts b/apps/stackoverflow/prisma/seed.ts
index bef8354..5b9c34a 100644
--- a/apps/stackoverflow/prisma/seed.ts
+++ b/apps/stackoverflow/prisma/seed.ts
@@ -1,7 +1,7 @@
 import { mock } from "@/mock";
 import { prisma } from "@/prisma";
 import { IQuestion, IUser } from "@/shared";
-import { createLog } from "@npcs/shared/log";
+import { createLog } from "@npcs/log";
 import { random } from "lodash-es";
 import { createLogUpdate } from "log-update";
 import os from "node:os";
diff --git a/apps/stackoverflow/src/app/(root)/profile/[id]/page.tsx b/apps/stackoverflow/src/app/(root)/profile/[id]/page.tsx
index cb72a6a..8ac6880 100644
--- a/apps/stackoverflow/src/app/(root)/profile/[id]/page.tsx
+++ b/apps/stackoverflow/src/app/(root)/profile/[id]/page.tsx
@@ -6,7 +6,7 @@ import {
   ProfileStats,
   ProfileTopQuestionCard,
 } from "@/profile";
-import { ESearchParamKey } from "@/search-params";
+import { ESearchParamKey, ISearchParams } from "@/search-params";
 import {
   IPageProps,
   PagePagination,
@@ -17,10 +17,9 @@ import {
 } from "@/shared";
 import React from "react";
 
-const ProFileDetailPage: React.FC<IPageProps<{ id: string }>> = async ({
-  params: { id },
-  searchParams,
-}) => {
+const ProFileDetailPage: React.FC<
+  IPageProps<{ id: string }, ISearchParams>
+> = async ({ params: { id }, searchParams }) => {
   const profileUser = await prisma.user.findUniqueOrThrow({
     where: {
       id,
diff --git a/apps/stackoverflow/src/app/(root)/question/[id]/page.tsx b/apps/stackoverflow/src/app/(root)/question/[id]/page.tsx
index a14d379..bd7459a 100644
--- a/apps/stackoverflow/src/app/(root)/question/[id]/page.tsx
+++ b/apps/stackoverflow/src/app/(root)/question/[id]/page.tsx
@@ -9,6 +9,7 @@ import {
   QuestionMetrics,
   QuestionTitle,
 } from "@/question";
+import { ISearchParams } from "@/search-params";
 import {
   DownVote,
   EditAndDelete,
@@ -25,7 +26,8 @@ import { UserAvatar } from "@/user";
 import { NextPage } from "next";
 import { redirect } from "next/navigation";
 
-export interface IQuestionDetailPageProps extends IPageProps<{ id: string }> {}
+interface IQuestionDetailPageProps
+  extends IPageProps<{ id: string }, ISearchParams> {}
 
 const QuestionDetailPage: NextPage<IQuestionDetailPageProps> = async (
   props,
diff --git a/apps/stackoverflow/src/app/globals.css b/apps/stackoverflow/src/app/globals.css
index c2267ed..595477c 100644
--- a/apps/stackoverflow/src/app/globals.css
+++ b/apps/stackoverflow/src/app/globals.css
@@ -1,4 +1,4 @@
-@import url("@npcs/shared/styles.css");
+@import url("@npcs/ui/styles.css");
 @import url("@/theme/styles/index.css");
 
 @tailwind base;
diff --git a/apps/stackoverflow/src/libs/shared/components/filter.tsx b/apps/stackoverflow/src/libs/shared/components/filter.tsx
index e52efa6..d64373f 100644
--- a/apps/stackoverflow/src/libs/shared/components/filter.tsx
+++ b/apps/stackoverflow/src/libs/shared/components/filter.tsx
@@ -4,15 +4,15 @@ import { Prisma } from ".prisma/client";
 import { ESearchParamKey } from "@/search-params";
 import { useMemoizedFn } from "ahooks";
 import React from "react";
-import { useNextRouter } from "../hooks";
-import { IComponentBaseProps } from "../types";
 import {
   Button,
+  IComponentBaseProps,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
+  useRouter,
 } from "../ui";
 import { cn, getModelFilterOptions, getUrl, mp } from "../utils";
 
@@ -32,7 +32,7 @@ export interface IFilterOption {
 
 export const Filter: React.FC<IFilterProps> = (props) => {
   const { variant = "default" } = props;
-  const { searchParams, router } = useNextRouter();
+  const { searchParams, router } = useRouter();
 
   const filter = searchParams.get(ESearchParamKey.Filter) ?? undefined;
 
diff --git a/apps/stackoverflow/src/libs/shared/components/form.tsx b/apps/stackoverflow/src/libs/shared/components/form.tsx
index 80c2f42..b1dd80e 100644
--- a/apps/stackoverflow/src/libs/shared/components/form.tsx
+++ b/apps/stackoverflow/src/libs/shared/components/form.tsx
@@ -6,8 +6,7 @@ import { capitalize, lowerCase } from "lodash-es";
 import { ControllerRenderProps, FieldValues, Path } from "react-hook-form";
 import { z } from "zod";
 import { EFormTopic, EFormType } from "../constants";
-import { useForm } from "../hooks";
-import { IComponentBaseProps, ISafeAny } from "../types";
+import { ISafeAny } from "../types";
 import {
   Button,
   FormControl,
@@ -17,8 +16,10 @@ import {
   FormLabel,
   FormMessage,
   Form as FormUI,
+  IComponentBaseProps,
   Input,
   toast,
+  useForm,
 } from "../ui";
 import { cn, mp, removeNilKeys } from "../utils";
 
diff --git a/apps/stackoverflow/src/libs/shared/components/git-log.tsx b/apps/stackoverflow/src/libs/shared/components/git-log.tsx
index 72296c1..a28d8a3 100644
--- a/apps/stackoverflow/src/libs/shared/components/git-log.tsx
+++ b/apps/stackoverflow/src/libs/shared/components/git-log.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { IComponentBaseProps } from "../types";
+import { IComponentBaseProps } from "../ui";
 import { mp } from "../utils";
 
 export interface IGitLogProps extends IComponentBaseProps {}
diff --git a/apps/stackoverflow/src/libs/shared/components/linkable.test.tsx b/apps/stackoverflow/src/libs/shared/components/linkable.test.tsx
deleted file mode 100644
index 0a9acac..0000000
--- a/apps/stackoverflow/src/libs/shared/components/linkable.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { Linkable } from "./linkable";
-
-describe("CLinkable", () => {
-  describe("with href", () => {
-    test("base", () => {
-      render(<Linkable href="/home">Home</Linkable>);
-      expect(screen.getByText("Home").tagName).toBe("A");
-    });
-
-    test("className and style", () => {
-      const className = "text-red-500";
-      const style = { color: "red" };
-      render(
-        <Linkable className={className} href="/" style={style}>
-          Home
-        </Linkable>,
-      );
-
-      const el = screen.getByText("Home");
-      expect(el.className).toBe(className);
-      expect(el.style.color).toBe("red");
-    });
-  });
-
-  describe("without href", () => {
-    test("base", async () => {
-      render(<Linkable>Home</Linkable>);
-      expect(screen.getByText("Home").tagName).not.toBe("A");
-    });
-
-    test("className and style", () => {
-      const className = "text-red-500";
-      const style = { color: "red" };
-      render(
-        <Linkable className={className} style={style}>
-          <div>Home</div>
-        </Linkable>,
-      );
-
-      const el = screen.getByText("Home");
-      expect(el.className).toBe(className);
-      expect(el.style.color).toBe("red");
-    });
-  });
-});
diff --git a/apps/stackoverflow/src/libs/shared/components/linkable.tsx b/apps/stackoverflow/src/libs/shared/components/linkable.tsx
index 2acfdf0..8ab06ec 100644
--- a/apps/stackoverflow/src/libs/shared/components/linkable.tsx
+++ b/apps/stackoverflow/src/libs/shared/components/linkable.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import React from "react";
-import { IComponentBaseProps } from "../types";
+import { IComponentBaseProps } from "../ui";
 import { mp } from "../utils";
 
 export interface ILinkableProps extends IComponentBaseProps {
diff --git a/apps/stackoverflow/src/libs/shared/components/list.tsx b/apps/stackoverflow/src/libs/shared/components/list.tsx
index ae65243..4007ddc 100644
--- a/apps/stackoverflow/src/libs/shared/components/list.tsx
+++ b/apps/stackoverflow/src/libs/shared/components/list.tsx
@@ -1,5 +1,6 @@
+import { IComponentBaseProps } from "@npcs/ui";
 import React from "react";
-import { IComponentBaseProps, ISafeAny } from "../types";
+import { ISafeAny } from "../types";
 import { cn, mp } from "../utils";
 import { Filter, IFilterProps, IModelFilterProps, ModelFilter } from "./filter";
 import { PagePagination } from "./page-pagination";
diff --git a/apps/stackoverflow/src/libs/shared/components/metric.tsx b/apps/stackoverflow/src/libs/shared/components/metric.tsx
index 2d864e9..5a7c75e 100644
--- a/apps/stackoverflow/src/libs/shared/components/metric.tsx
+++ b/apps/stackoverflow/src/libs/shared/components/metric.tsx
@@ -2,7 +2,7 @@ import { isNumber } from "lodash-es";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
-import { IComponentBaseProps } from "../types";
+import { IComponentBaseProps } from "../ui";
 import { cn, formatNumber, mp } from "../utils";
 
 export interface IMetricProps extends IComponentBaseProps {
diff --git a/apps/stackoverflow/src/libs/shared/components/no-result.tsx b/apps/stackoverflow/src/libs/shared/components/no-result.tsx
index 19d7762..cda71c5 100644
--- a/apps/stackoverflow/src/libs/shared/components/no-result.tsx
+++ b/apps/stackoverflow/src/libs/shared/components/no-result.tsx
@@ -2,8 +2,7 @@ import { ImageDarkIllustration } from "@/shared/assets/images/dark-illustration"
 import { ImageLightIllustration } from "@/shared/assets/images/light-illustration";
 import Link from "next/link";
 import React from "react";
-import { IComponentBaseProps } from "../types";
-import { Button } from "../ui";
+import { Button, IComponentBaseProps } from "../ui";
 import { mp } from "../utils";
 
 export interface INoResultsProps extends IComponentBaseProps {
diff --git a/apps/stackoverflow/src/libs/shared/components/search-input.tsx b/apps/stackoverflow/src/libs/shared/components/search-input.tsx
index edcf4d8..288e867 100644
--- a/apps/stackoverflow/src/libs/shared/components/search-input.tsx
+++ b/apps/stackoverflow/src/libs/shared/components/search-input.tsx
@@ -4,7 +4,7 @@ import { ImageSearch } from "@/shared/assets/icons/search";
 import { useDebounceEffect, useMemoizedFn } from "ahooks";
 import { omit } from "lodash-es";
 import React, { useState } from "react";
-import { IComponentBaseProps, Input, InputProps, mp, useNextRouter } from "..";
+import { IComponentBaseProps, Input, InputProps, mp, useRouter } from "../ui";
 
 export interface ISearchInputSyncQueryProps
   extends IComponentBaseProps,
@@ -20,7 +20,7 @@ export const SearchInputSyncQuery: React.FC<ISearchInputSyncQueryProps> = (
   props,
 ) => {
   const { placeholder, searchParamKey = ESearchParamKey.Q } = props;
-  const { router, pathname, searchParams } = useNextRouter();
+  const { router, pathname, searchParams } = useRouter();
 
   const searchParamValue = searchParams?.get(searchParamKey) ?? "";
   const [value, setValue] = useState(searchParamValue);
diff --git a/apps/stackoverflow/src/libs/shared/hooks/form.ts b/apps/stackoverflow/src/libs/shared/hooks/form.ts
deleted file mode 100644
index edf6b0d..0000000
--- a/apps/stackoverflow/src/libs/shared/hooks/form.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { omit } from "lodash-es";
-import {
-  FieldValues,
-  UseFormProps,
-  UseFormReturn,
-  useForm as rcUseForm,
-} from "react-hook-form";
-import { z } from "zod";
-import { ISafeAny } from "../types";
-
-export const useForm = <
-  TContext = ISafeAny,
-  TTransformedValues extends FieldValues | undefined = undefined,
-  TSchema extends z.ZodType<ISafeAny> = z.ZodType<ISafeAny>,
-  TFieldValues extends FieldValues = z.infer<TSchema>,
->(
-  options: Omit<UseFormProps<TFieldValues, TContext>, "resolver"> & {
-    schema: TSchema;
-  },
-) => {
-  return rcUseForm({
-    resolver: zodResolver(options.schema),
-    ...omit(options, "schema"),
-  }) as UseFormReturn<TFieldValues, TContext, TTransformedValues>;
-};
diff --git a/apps/stackoverflow/src/libs/shared/hooks/index.ts b/apps/stackoverflow/src/libs/shared/hooks/index.ts
deleted file mode 100644
index 5a61ed6..0000000
--- a/apps/stackoverflow/src/libs/shared/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./form";
-export * from "./next-router";
diff --git a/apps/stackoverflow/src/libs/shared/hooks/next-router.ts b/apps/stackoverflow/src/libs/shared/hooks/next-router.ts
deleted file mode 100644
index b0cc8b3..0000000
--- a/apps/stackoverflow/src/libs/shared/hooks/next-router.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-"use client";
-import {
-  ReadonlyURLSearchParams,
-  usePathname,
-  useRouter,
-  useSearchParams,
-} from "next/navigation";
-
-export function useNextRouter() {
-  try {
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-
-    return {
-      router,
-      pathname,
-      searchParams,
-    };
-  } catch {
-    // only for storybook
-    return {
-      router: null,
-      pathname: "",
-      searchParams: new ReadonlyURLSearchParams(),
-    };
-  }
-}
diff --git a/apps/stackoverflow/src/libs/shared/index.ts b/apps/stackoverflow/src/libs/shared/index.ts
index 4abf581..ea734e8 100644
--- a/apps/stackoverflow/src/libs/shared/index.ts
+++ b/apps/stackoverflow/src/libs/shared/index.ts
@@ -1,6 +1,5 @@
 export * from "./components";
 export * from "./constants";
-export * from "./hooks";
 export * from "./types";
 export * from "./ui";
 export * from "./utils";
diff --git a/apps/stackoverflow/src/libs/shared/types/component.ts b/apps/stackoverflow/src/libs/shared/types/component.ts
index 17d9cc4..e09b15d 100644
--- a/apps/stackoverflow/src/libs/shared/types/component.ts
+++ b/apps/stackoverflow/src/libs/shared/types/component.ts
@@ -1,25 +1,6 @@
-import { ISearchParams } from "@/search-params";
-import React from "react";
 import { z } from "zod";
 import { IFormProps } from "../components";
 import { ISafeAny } from "./base";
 
-export interface IComponentBaseProps {
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export interface IControllableComponentProps<TValue> {
-  value?: TValue;
-  defaultValue?: TValue;
-  onChange?: (value: TValue) => void;
-  disabled?: boolean;
-}
-
-export interface IPageProps<TParams = {}, TSearchParams = {}> {
-  params: TParams;
-  searchParams: ISearchParams & TSearchParams;
-}
-
 export interface IFormComponentProps<TSchema extends z.ZodObject<ISafeAny>>
   extends Omit<IFormProps<TSchema>, "items" | "schema"> {}
diff --git a/apps/stackoverflow/src/libs/shared/ui/index.ts b/apps/stackoverflow/src/libs/shared/ui/index.ts
index 0dd94e3..7eeb5b7 100644
--- a/apps/stackoverflow/src/libs/shared/ui/index.ts
+++ b/apps/stackoverflow/src/libs/shared/ui/index.ts
@@ -1 +1 @@
-export * from "@npcs/shared/components";
+export * from "@npcs/ui";
diff --git a/apps/stackoverflow/src/libs/shared/utils/jsx.ts b/apps/stackoverflow/src/libs/shared/utils/jsx.ts
index 2420d28..7eeb5b7 100644
--- a/apps/stackoverflow/src/libs/shared/utils/jsx.ts
+++ b/apps/stackoverflow/src/libs/shared/utils/jsx.ts
@@ -1 +1 @@
-export * from "@npcs/shared/jsx";
+export * from "@npcs/ui";
diff --git a/apps/stackoverflow/src/stories/utils.ts b/apps/stackoverflow/src/stories/utils.ts
index 74eba8a..95ec5f7 100644
--- a/apps/stackoverflow/src/stories/utils.ts
+++ b/apps/stackoverflow/src/stories/utils.ts
@@ -1,3 +1,3 @@
-import { createLog } from "@npcs/shared/log";
+import { createLog } from "@npcs/log";
 
 export const storyLog = createLog("story");
diff --git a/apps/template/package.json b/apps/template/package.json
index d3efadb..fe87492 100644
--- a/apps/template/package.json
+++ b/apps/template/package.json
@@ -19,10 +19,11 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^5.2.6",
+    "@npcs/log": "workspace:^",
     "@npcs/next-config": "workspace:^",
     "@npcs/playwright-config": "workspace:^",
-    "@npcs/shared": "workspace:^",
     "@npcs/tailwind-config": "workspace:^",
+    "@npcs/ui": "workspace:^",
     "@prisma/client": "^5.16.2",
     "next": "14.2.4",
     "prisma": "^5.16.2",
@@ -41,7 +42,7 @@
     "@storybook/test": "8.2.4",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8.57.0",
diff --git a/apps/template/src/app/globals.css b/apps/template/src/app/globals.css
index b5c61c9..4281bfa 100644
--- a/apps/template/src/app/globals.css
+++ b/apps/template/src/app/globals.css
@@ -1,3 +1,4 @@
+@import url("@npcs/ui/styles.css");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/apps/template/src/app/layout.tsx b/apps/template/src/app/layout.tsx
index c5b7cc5..b89dfea 100644
--- a/apps/template/src/app/layout.tsx
+++ b/apps/template/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import { createUserIfNeeded } from "@/libs/actions/user";
 import { ClerkProvider, UserButton } from "@clerk/nextjs";
-import { cn } from "@npcs/shared/jsx";
+import { cn } from "@npcs/ui";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import Link from "next/link";
diff --git a/apps/template/src/libs/shared/components/welcome.tsx b/apps/template/src/libs/shared/components/welcome.tsx
index 6a42538..18d94f5 100644
--- a/apps/template/src/libs/shared/components/welcome.tsx
+++ b/apps/template/src/libs/shared/components/welcome.tsx
@@ -1,4 +1,4 @@
-import { IComponentBaseProps, mp } from "@npcs/shared/react-helpers";
+import { IComponentBaseProps, mp } from "@npcs/ui";
 import Image from "next/image";
 import React from "react";
 
diff --git a/configs/eslint/index.js b/configs/eslint/index.js
index b1bd3e7..17f8bcd 100644
--- a/configs/eslint/index.js
+++ b/configs/eslint/index.js
@@ -19,11 +19,13 @@ module.exports = defineConfig({
     ],
     "no-console": "error",
   },
-  overrides: [
-    // {
-    //   files: ["*.ts", "*.tsx"],
-    //   rules: {
-    //   }
-    // },
+  ignorePatterns: [
+    ".next",
+    "public",
+    "**/esm",
+    "dist",
+    ".turbo",
+    ".rollup.cache",
+    "node_modules",
   ],
 });
diff --git a/configs/eslint/package.json b/configs/eslint/package.json
index d91e905..4f9cfc9 100644
--- a/configs/eslint/package.json
+++ b/configs/eslint/package.json
@@ -6,7 +6,7 @@
     "clean": "npcs clean"
   },
   "dependencies": {
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
diff --git a/configs/next/package.json b/configs/next/package.json
index 95925eb..f59d20e 100644
--- a/configs/next/package.json
+++ b/configs/next/package.json
@@ -14,7 +14,8 @@
     "webpack": "^5.93.0"
   },
   "dependencies": {
-    "@npcs/shared": "workspace:^",
+    "@npcs/env": "workspace:^",
+    "@npcs/log": "workspace:^",
     "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.11.0",
     "dotenv": "^16.4.5",
diff --git a/configs/next/prepare.ts b/configs/next/prepare.ts
index 53a4135..bce0c4f 100644
--- a/configs/next/prepare.ts
+++ b/configs/next/prepare.ts
@@ -1,6 +1,6 @@
 // @ts-check
 
-import { createLog } from "@npcs/shared/log";
+import { createLog } from "@npcs/log";
 import dotenv from "dotenv";
 import exec from "exec-sh";
 import createJiti from "jiti";
@@ -46,11 +46,11 @@ function loadAndCheckEnv(isDev: boolean) {
 
   // check
   const { env: server } = jiti(
-    "@npcs/shared/env/server.js",
-  ) as typeof import("@npcs/shared/env/server.js");
+    "@npcs/env/server",
+  ) as typeof import("@npcs/env/server");
   const { env: client } = jiti(
-    "@npcs/shared/env/client.js",
-  ) as typeof import("@npcs/shared/env/client.js");
+    "@npcs/env/client",
+  ) as typeof import("@npcs/env/client");
 
   printEnv(server, "server");
   printEnv(client, "client");
diff --git a/configs/rollup/package.json b/configs/rollup/package.json
index ce2b7c3..9a77c77 100644
--- a/configs/rollup/package.json
+++ b/configs/rollup/package.json
@@ -20,7 +20,7 @@
     "rollup-plugin-typescript-paths": "^1.5.0"
   },
   "devDependencies": {
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "rimraf": "^6.0.1",
     "rollup": "^4.18.1"
   },
diff --git a/configs/rollup/rollup.config.mjs b/configs/rollup/rollup.config.mjs
index b036c8d..076abc8 100644
--- a/configs/rollup/rollup.config.mjs
+++ b/configs/rollup/rollup.config.mjs
@@ -11,7 +11,11 @@ import { typescriptPaths } from "rollup-plugin-typescript-paths";
 
 /** @type {import('rollup').RollupOptions} */
 export default {
-  input: fg.sync(["./src/**/*.{ts,tsx,css}", "!**/stories/**"]),
+  input: fg.sync([
+    "./src/**/*.{ts,tsx,css}",
+    "!**/*.stories.*",
+    "!**/*.test.*",
+  ]),
   output: [
     {
       format: "esm",
@@ -31,7 +35,7 @@ export default {
         incremental: false,
         jsx: "react-jsx",
       },
-      exclude: ["**/stories/**"],
+      exclude: ["**/*.stories.*", "**/*.test.*"],
     }),
     resolve(),
     typescriptPaths(),
diff --git a/configs/tailwind/package.json b/configs/tailwind/package.json
index da0a470..e80bc10 100644
--- a/configs/tailwind/package.json
+++ b/configs/tailwind/package.json
@@ -8,7 +8,7 @@
     ".": "./tailwind.config.js"
   },
   "devDependencies": {
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "rimraf": "^6.0.1",
     "tailwindcss": "^3.4.5",
     "typescript": "5.5.3"
diff --git a/configs/vitest/vitest.config.mjs b/configs/vitest/vitest.config.mjs
index 5fd8581..2ea994f 100644
--- a/configs/vitest/vitest.config.mjs
+++ b/configs/vitest/vitest.config.mjs
@@ -8,7 +8,7 @@ export default defineConfig({
   test: {
     environment: "jsdom",
     globals: true,
-    include: ["tests/**/*.ts?(x)"],
+    include: ["tests/**/*.ts?(x)", "src/**/*.test.*"],
     exclude: [
       ...configDefaults.exclude,
       "**/test-utils.ts",
diff --git a/libs/shared/.eslintrc.json b/libs/env/.eslintrc.json
similarity index 100%
rename from libs/shared/.eslintrc.json
rename to libs/env/.eslintrc.json
diff --git a/libs/env/package.json b/libs/env/package.json
new file mode 100644
index 0000000..babb608
--- /dev/null
+++ b/libs/env/package.json
@@ -0,0 +1,70 @@
+{
+  "name": "@npcs/env",
+  "version": "0.6.2",
+  "type": "module",
+  "scripts": {
+    "clean": "npcs clean",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "compile": "rollup -c",
+    "compile:watch": "rollup -c --watch",
+    "test": "vitest --run",
+    "test:watch": "vitest watch",
+    "test:changed": "vitest run --changed"
+  },
+  "exports": {
+    "./server": "./esm/server.js",
+    "./client": "./esm/client.js"
+  },
+  "dependencies": {
+    "@t3-oss/env-nextjs": "^0.11.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@npcs/eslint-config": "workspace:*",
+    "@npcs/rollup-config": "workspace:*",
+    "@npcs/tailwind-config": "workspace:*",
+    "@npcs/typescript-config": "workspace:*",
+    "@npcs/vitest-config": "workspace:^",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "8.2.4",
+    "@storybook/addon-interactions": "8.2.4",
+    "@storybook/addon-links": "8.2.4",
+    "@storybook/addon-onboarding": "8.2.4",
+    "@storybook/blocks": "8.2.4",
+    "@storybook/nextjs": "8.2.4",
+    "@storybook/react": "8.2.4",
+    "@storybook/test": "8.2.4",
+    "@types/async": "^3.2.24",
+    "@types/lodash-es": "^4.17.12",
+    "@types/multistream": "^4.1.3",
+    "@types/node": "*",
+    "@types/numeral": "^2.0.5",
+    "@types/react": "^18.3.3",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.5",
+    "@types/spark-md5": "^3.0.4",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "fast-glob": "^3.3.2",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.18.1",
+    "storybook": "8.2.4",
+    "tailwindcss": "^3.4.5",
+    "tslib": "^2.6.3",
+    "tsup": "^8.1.0",
+    "typescript": "5.5.3",
+    "vite-plugin-tsconfig-paths": "^1.4.1",
+    "vitest": "^2.0.4"
+  },
+  "files": [
+    "./esm"
+  ],
+  "repository": {
+    "url": "https://github.com/xiaosen7/npcs"
+  }
+}
diff --git a/libs/shared/rollup.config.mjs b/libs/env/rollup.config.mjs
similarity index 100%
rename from libs/shared/rollup.config.mjs
rename to libs/env/rollup.config.mjs
diff --git a/libs/shared/src/env/client.ts b/libs/env/src/client.ts
similarity index 100%
rename from libs/shared/src/env/client.ts
rename to libs/env/src/client.ts
diff --git a/libs/env/src/example.test.ts b/libs/env/src/example.test.ts
new file mode 100644
index 0000000..e0b2fdb
--- /dev/null
+++ b/libs/env/src/example.test.ts
@@ -0,0 +1,5 @@
+describe.skip("example", () => {
+  test.skip("example", () => {
+    expect(1).toBe(1);
+  });
+});
diff --git a/libs/shared/src/env/server.ts b/libs/env/src/server.ts
similarity index 100%
rename from libs/shared/src/env/server.ts
rename to libs/env/src/server.ts
diff --git a/libs/shared/src/env/utils.ts b/libs/env/src/utils.ts
similarity index 100%
rename from libs/shared/src/env/utils.ts
rename to libs/env/src/utils.ts
diff --git a/libs/env/tsconfig.json b/libs/env/tsconfig.json
new file mode 100644
index 0000000..df8ad50
--- /dev/null
+++ b/libs/env/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@npcs/typescript-config",
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./**/*"],
+  "exclude": ["./node_modules", "./esm", "./.rollup.cache"]
+}
diff --git a/libs/shared/vitest.config.mts b/libs/env/vitest.config.mts
similarity index 100%
rename from libs/shared/vitest.config.mts
rename to libs/env/vitest.config.mts
diff --git a/libs/log/.eslintrc.json b/libs/log/.eslintrc.json
new file mode 100644
index 0000000..4c33734
--- /dev/null
+++ b/libs/log/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["@npcs/eslint-config"]
+}
diff --git a/libs/log/package.json b/libs/log/package.json
new file mode 100644
index 0000000..f41e77a
--- /dev/null
+++ b/libs/log/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@npcs/log",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "clean": "npcs clean",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "compile": "rollup -c",
+    "compile:watch": "rollup -c --watch",
+    "test": "vitest --run",
+    "test:watch": "vitest watch",
+    "test:changed": "vitest run --changed"
+  },
+  "exports": {
+    ".": "./esm/index.js"
+  },
+  "dependencies": {
+    "consola": "^3.2.3"
+  },
+  "devDependencies": {
+    "@npcs/eslint-config": "workspace:*",
+    "@npcs/rollup-config": "workspace:*",
+    "@npcs/typescript-config": "workspace:*",
+    "@npcs/vitest-config": "workspace:*",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "rollup": "^4.18.1",
+    "typescript": "5.5.3",
+    "vitest": "^2.0.4"
+  },
+  "files": [
+    "./esm"
+  ],
+  "repository": {
+    "url": "https://github.com/xiaosen7/npcs"
+  }
+}
diff --git a/libs/log/rollup.config.mjs b/libs/log/rollup.config.mjs
new file mode 100644
index 0000000..05caa54
--- /dev/null
+++ b/libs/log/rollup.config.mjs
@@ -0,0 +1 @@
+export { default } from "@npcs/rollup-config";
diff --git a/libs/shared/tests/log.test.tsx b/libs/log/src/index.test.ts
similarity index 92%
rename from libs/shared/tests/log.test.tsx
rename to libs/log/src/index.test.ts
index e782c60..6c9bbc4 100644
--- a/libs/shared/tests/log.test.tsx
+++ b/libs/log/src/index.test.ts
@@ -1,5 +1,5 @@
-import { createLog } from "@/log";
 import consola from "consola";
+import { createLog } from ".";
 
 describe(createLog.name, () => {
   beforeAll(() => {
diff --git a/libs/shared/src/log/index.ts b/libs/log/src/index.ts
similarity index 100%
rename from libs/shared/src/log/index.ts
rename to libs/log/src/index.ts
diff --git a/libs/shared/tsconfig.json b/libs/log/tsconfig.json
similarity index 100%
rename from libs/shared/tsconfig.json
rename to libs/log/tsconfig.json
diff --git a/libs/log/vitest.config.mts b/libs/log/vitest.config.mts
new file mode 100644
index 0000000..4687ef1
--- /dev/null
+++ b/libs/log/vitest.config.mts
@@ -0,0 +1,3 @@
+import config from "@npcs/vitest-config";
+
+export default config;
diff --git a/libs/shared/.storybook/main.ts b/libs/shared/.storybook/main.ts
deleted file mode 100644
index 6bdf60e..0000000
--- a/libs/shared/.storybook/main.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { StorybookConfig } from "@storybook/nextjs";
-
-import sharedConfig from "@npcs/storybook-config";
-
-const config: StorybookConfig = {
-  ...sharedConfig,
-};
-
-export default config;
diff --git a/libs/shared/.storybook/preview.tsx b/libs/shared/.storybook/preview.tsx
deleted file mode 100644
index 9106a49..0000000
--- a/libs/shared/.storybook/preview.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import "@/styles.css";
-import type { Preview } from "@storybook/react";
-import { useEffect } from "react";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-  decorators: [
-    (Story, context) => {
-      // enable background change to theme change
-      const {
-        globals: { backgrounds },
-      } = context;
-      const themeValue = backgrounds?.value === "#333333" ? "dark" : "light";
-
-      useEffect(() => {
-        if (themeValue === "dark") {
-          document.documentElement.classList.add("dark");
-        } else {
-          document.documentElement.classList.remove("dark");
-        }
-      }, [themeValue]);
-
-      return <Story />;
-    },
-  ],
-};
-
-export default preview;
diff --git a/libs/shared/CHANGELOG.md b/libs/shared/CHANGELOG.md
deleted file mode 100644
index 2f6388d..0000000
--- a/libs/shared/CHANGELOG.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.6.2](https://github.com/xiaosen7/npcs/compare/v0.6.1...v0.6.2) (2024-07-27)
-
-**Note:** Version bump only for package @npcs/shared
-
-
-
-
-
-## [0.6.1](https://github.com/xiaosen7/npcs/compare/v0.6.0...v0.6.1) (2024-07-27)
-
-**Note:** Version bump only for package @npcs/shared
-
-
-
-
-
-# [0.6.0](https://github.com/xiaosen7/next.js-practical-cases/compare/v0.5.0...v0.6.0) (2024-07-26)
-
-
-### Features
-
-* **@npcs/shared:** test publish ([02fae21](https://github.com/xiaosen7/next.js-practical-cases/commit/02fae2134586919846803b19306dd077948852a6))
-
-
-
-
-
-# [0.5.0](https://github.com/xiaosen7/next.js-practical-cases/compare/v0.4.1...v0.5.0) (2024-07-26)
-
-**Note:** Version bump only for package @npcs/shared
-
-
-
-
-
-## [0.4.1](https://github.com/xiaosen7/next.js-practical-cases/compare/v0.4.0...v0.4.1) (2024-07-26)
-
-**Note:** Version bump only for package @npcs/shared
-
-
-
-
-
-# [0.4.0](https://github.com/xiaosen7/next.js-practical-cases/compare/v0.3.1...v0.4.0) (2024-07-26)
-
-**Note:** Version bump only for package @npcs/shared
-
-
-
-
-
-# [0.3.0](https://github.com/xiaosen7/next.js-practical-cases/compare/v0.2.0...v0.3.0) (2024-07-26)
-
-**Note:** Version bump only for package @npcs/shared
-
-
-
-
-
-# [0.2.0](https://github.com/xiaosen7/next.js-practical-cases/compare/v0.1.0...v0.2.0) (2024-07-26)
-
-**Note:** Version bump only for package @npcs/shared
-
-
-
-
-
-# [0.1.0](https://github.com/xiaosen7/next.js-practical-cases/compare/v0.0.1...v0.1.0) (2024-07-26)
-
-**Note:** Version bump only for package @npcs/shared
diff --git a/libs/shared/src/hooks/next-router.ts b/libs/shared/src/hooks/next-router.ts
deleted file mode 100644
index b0cc8b3..0000000
--- a/libs/shared/src/hooks/next-router.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-"use client";
-import {
-  ReadonlyURLSearchParams,
-  usePathname,
-  useRouter,
-  useSearchParams,
-} from "next/navigation";
-
-export function useNextRouter() {
-  try {
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-
-    return {
-      router,
-      pathname,
-      searchParams,
-    };
-  } catch {
-    // only for storybook
-    return {
-      router: null,
-      pathname: "",
-      searchParams: new ReadonlyURLSearchParams(),
-    };
-  }
-}
diff --git a/libs/shared/src/react-helpers.ts b/libs/shared/src/react-helpers.ts
deleted file mode 100644
index 960a759..0000000
--- a/libs/shared/src/react-helpers.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./component-type";
-export * from "./jsx";
diff --git a/libs/theme/package.json b/libs/theme/package.json
index e5851cc..5462751 100644
--- a/libs/theme/package.json
+++ b/libs/theme/package.json
@@ -21,8 +21,9 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
-    "@npcs/shared": "workspace:^",
+    "@npcs/log": "workspace:^",
     "@npcs/storybook-config": "workspace:^",
+    "@npcs/ui": "workspace:^",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
@@ -84,7 +85,7 @@
     "@types/async": "^3.2.24",
     "@types/lodash-es": "^4.17.12",
     "@types/multistream": "^4.1.3",
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "@types/numeral": "^2.0.5",
     "@types/react": "^18.3.3",
     "@types/rollup-plugin-peer-deps-external": "^2.2.5",
diff --git a/libs/theme/src/example.test.ts b/libs/theme/src/example.test.ts
new file mode 100644
index 0000000..e0b2fdb
--- /dev/null
+++ b/libs/theme/src/example.test.ts
@@ -0,0 +1,5 @@
+describe.skip("example", () => {
+  test.skip("example", () => {
+    expect(1).toBe(1);
+  });
+});
diff --git a/libs/theme/src/index.tsx b/libs/theme/src/index.tsx
index 09f2e9d..9137007 100644
--- a/libs/theme/src/index.tsx
+++ b/libs/theme/src/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { mp } from "@npcs/shared/react-helpers";
+import { mp } from "@npcs/ui";
 import { useEffect, useRef, useTransition } from "react";
 import { useStore } from "zustand";
 import { IOptions, ISyncElementClass, IToggleTheme, IUseTheme } from "./shared";
diff --git a/libs/theme/src/shared.ts b/libs/theme/src/shared.ts
index 7368a1a..845c223 100644
--- a/libs/theme/src/shared.ts
+++ b/libs/theme/src/shared.ts
@@ -1,4 +1,4 @@
-import { IComponentBaseProps } from "@npcs/shared/component-type";
+import { IComponentBaseProps } from "@npcs/ui";
 
 export interface IOptions<TValue extends string> {
   defaultValue: TValue;
diff --git a/libs/ui/.eslintrc.json b/libs/ui/.eslintrc.json
new file mode 100644
index 0000000..4c33734
--- /dev/null
+++ b/libs/ui/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["@npcs/eslint-config"]
+}
diff --git a/libs/shared/components.json b/libs/ui/components.json
similarity index 91%
rename from libs/shared/components.json
rename to libs/ui/components.json
index f570c08..0ab79a2 100644
--- a/libs/shared/components.json
+++ b/libs/ui/components.json
@@ -13,6 +13,6 @@
   "aliases": {
     "components": "@/components",
     "ui": "@/components",
-    "utils": "@/react-helpers"
+    "utils": "@/utils"
   }
 }
diff --git a/libs/shared/package.json b/libs/ui/package.json
similarity index 87%
rename from libs/shared/package.json
rename to libs/ui/package.json
index f2be04b..7464e13 100644
--- a/libs/shared/package.json
+++ b/libs/ui/package.json
@@ -1,7 +1,11 @@
 {
-  "name": "@npcs/shared",
+  "name": "@npcs/ui",
   "version": "0.6.2",
   "type": "module",
+  "exports": {
+    ".": "./esm/index.js",
+    "./styles.css": "./esm/styles.css"
+  },
   "scripts": {
     "clean": "npcs clean",
     "typecheck": "tsc --noEmit",
@@ -14,20 +18,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
-  "exports": {
-    "./styles.css": "./esm/styles.css",
-    "./jsx": "./esm/jsx.js",
-    "./components": "./esm/components/index.js",
-    "./components/*": "./esm/components/*",
-    "./hooks/*": "./esm/hooks/*.js",
-    "./component-type": "./esm/component-type.js",
-    "./react-helpers": "./esm/react-helpers.js",
-    "./router/*": "./esm/router/*",
-    "./env/*": "./esm/env/*",
-    "./log": "./esm/log/index.js"
-  },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@npcs/log": "workspace:^",
     "@npcs/storybook-config": "workspace:^",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
@@ -90,7 +83,7 @@
     "@types/async": "^3.2.24",
     "@types/lodash-es": "^4.17.12",
     "@types/multistream": "^4.1.3",
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "@types/numeral": "^2.0.5",
     "@types/react": "^18.3.3",
     "@types/rollup-plugin-peer-deps-external": "^2.2.5",
diff --git a/libs/shared/postcss.config.mjs b/libs/ui/postcss.config.mjs
similarity index 100%
rename from libs/shared/postcss.config.mjs
rename to libs/ui/postcss.config.mjs
diff --git a/libs/ui/rollup.config.mjs b/libs/ui/rollup.config.mjs
new file mode 100644
index 0000000..44cc164
--- /dev/null
+++ b/libs/ui/rollup.config.mjs
@@ -0,0 +1,8 @@
+/* eslint-disable import/no-anonymous-default-export */
+
+import config from "@npcs/rollup-config";
+
+/** @type {import('rollup').RollupOptions} */
+export default {
+  ...config,
+};
diff --git a/libs/shared/src/stories/badge.stories.tsx b/libs/ui/src/components/badge.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/badge.stories.tsx
rename to libs/ui/src/components/badge.stories.tsx
diff --git a/libs/shared/src/components/badge.tsx b/libs/ui/src/components/badge.tsx
similarity index 96%
rename from libs/shared/src/components/badge.tsx
rename to libs/ui/src/components/badge.tsx
index 519a21a..a86ad3b 100644
--- a/libs/shared/src/components/badge.tsx
+++ b/libs/ui/src/components/badge.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/react-helpers";
+import { cn } from "@/utils/jsx";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
diff --git a/libs/shared/src/stories/button.stories.tsx b/libs/ui/src/components/button.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/button.stories.tsx
rename to libs/ui/src/components/button.stories.tsx
diff --git a/libs/shared/src/components/button.tsx b/libs/ui/src/components/button.tsx
similarity index 71%
rename from libs/shared/src/components/button.tsx
rename to libs/ui/src/components/button.tsx
index 6d1eb74..85a3881 100644
--- a/libs/shared/src/components/button.tsx
+++ b/libs/ui/src/components/button.tsx
@@ -2,10 +2,10 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -13,15 +13,15 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border-input bg-background hover:bg-accent hover:text-accent-foreground border",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         primary:
-          "paragraph-medium rounded-lg bg-primary-500 px-4 py-3 text-light-900 dark:text-light-900",
+          "paragraph-medium bg-primary-500 text-light-900 dark:text-light-900 rounded-lg px-4 py-3",
         "primary-gradient":
-          "paragraph-medium primary-gradient rounded-lg px-4 py-3 text-light-900 dark:text-light-900",
+          "paragraph-medium primary-gradient text-light-900 dark:text-light-900 rounded-lg px-4 py-3",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -34,7 +34,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -53,7 +53,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = "Button";
 
diff --git a/libs/shared/src/components/card.tsx b/libs/ui/src/components/card.tsx
similarity index 98%
rename from libs/shared/src/components/card.tsx
rename to libs/ui/src/components/card.tsx
index 6908b98..8ae0154 100644
--- a/libs/shared/src/components/card.tsx
+++ b/libs/ui/src/components/card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/react-helpers";
+import { cn } from "@/utils/jsx";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -78,9 +78,9 @@ CardFooter.displayName = "CardFooter";
 
 export {
   Card,
-  CardHeader,
+  CardContent,
+  CardDescription,
   CardFooter,
+  CardHeader,
   CardTitle,
-  CardDescription,
-  CardContent,
 };
diff --git a/libs/shared/src/stories/carousel.stories.tsx b/libs/ui/src/components/carousel.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/carousel.stories.tsx
rename to libs/ui/src/components/carousel.stories.tsx
diff --git a/libs/shared/src/components/carousel.tsx b/libs/ui/src/components/carousel.tsx
similarity index 99%
rename from libs/shared/src/components/carousel.tsx
rename to libs/ui/src/components/carousel.tsx
index 1a4200e..83699ae 100644
--- a/libs/shared/src/components/carousel.tsx
+++ b/libs/ui/src/components/carousel.tsx
@@ -7,7 +7,7 @@ import { ArrowLeft, ArrowRight } from "lucide-react";
 import * as React from "react";
 
 import { Button } from "@/components/button";
-import { cn } from "@/react-helpers";
+import { cn } from "@/utils/jsx";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
diff --git a/libs/shared/src/stories/dialog.stories.tsx b/libs/ui/src/components/dialog.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/dialog.stories.tsx
rename to libs/ui/src/components/dialog.stories.tsx
diff --git a/libs/shared/src/components/dialog.tsx b/libs/ui/src/components/dialog.tsx
similarity index 99%
rename from libs/shared/src/components/dialog.tsx
rename to libs/ui/src/components/dialog.tsx
index 975f0bd..f27e4f0 100644
--- a/libs/shared/src/components/dialog.tsx
+++ b/libs/ui/src/components/dialog.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/react-helpers";
+import { cn } from "@/utils/jsx";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -110,13 +110,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
   DialogClose,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription,
+  DialogTrigger,
 };
diff --git a/libs/shared/src/stories/form.stories.tsx b/libs/ui/src/components/form.stories.tsx
similarity index 98%
rename from libs/shared/src/stories/form.stories.tsx
rename to libs/ui/src/components/form.stories.tsx
index cd1f637..3d6630d 100644
--- a/libs/shared/src/stories/form.stories.tsx
+++ b/libs/ui/src/components/form.stories.tsx
@@ -11,6 +11,7 @@ import {
   FormMessage,
 } from "@/components/form";
 import { Input } from "@/components/input";
+import { storyLog } from "@/utils/log";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { capitalCase } from "change-case";
 import {
@@ -20,7 +21,6 @@ import {
   useForm,
 } from "react-hook-form";
 import { z } from "zod";
-import { storyLog } from "./utils";
 
 const formSchema = z.object({
   username: z.string().min(2, {
diff --git a/libs/shared/src/components/form.tsx b/libs/ui/src/components/form.tsx
similarity index 97%
rename from libs/shared/src/components/form.tsx
rename to libs/ui/src/components/form.tsx
index 5ad1d5c..43ec13d 100644
--- a/libs/shared/src/components/form.tsx
+++ b/libs/ui/src/components/form.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
@@ -22,7 +22,7 @@ type FormFieldContextValue<
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+  {} as FormFieldContextValue,
 );
 
 const FormField = <
@@ -66,7 +66,7 @@ type FormItemContextValue = {
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+  {} as FormItemContextValue,
 );
 
 const FormItem = React.forwardRef<
diff --git a/libs/shared/src/components/index.ts b/libs/ui/src/components/index.ts
similarity index 87%
rename from libs/shared/src/components/index.ts
rename to libs/ui/src/components/index.ts
index a73ce11..66a190d 100644
--- a/libs/shared/src/components/index.ts
+++ b/libs/ui/src/components/index.ts
@@ -1,5 +1,8 @@
 export * from "./badge";
 export * from "./button";
+export * from "./card";
+export * from "./carousel";
+export * from "./dialog";
 export * from "./form";
 export * from "./input";
 export * from "./label";
diff --git a/libs/shared/src/stories/input.stories.tsx b/libs/ui/src/components/input.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/input.stories.tsx
rename to libs/ui/src/components/input.stories.tsx
diff --git a/libs/shared/src/components/input.tsx b/libs/ui/src/components/input.tsx
similarity index 92%
rename from libs/shared/src/components/input.tsx
rename to libs/ui/src/components/input.tsx
index f149046..6989a9b 100644
--- a/libs/shared/src/components/input.tsx
+++ b/libs/ui/src/components/input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
 
@@ -11,13 +11,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         type={type}
         {...props}
       />
     );
-  }
+  },
 );
 Input.displayName = "Input";
 
diff --git a/libs/shared/src/stories/label.stories.tsx b/libs/ui/src/components/label.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/label.stories.tsx
rename to libs/ui/src/components/label.stories.tsx
diff --git a/libs/shared/src/components/label.tsx b/libs/ui/src/components/label.tsx
similarity index 90%
rename from libs/shared/src/components/label.tsx
rename to libs/ui/src/components/label.tsx
index a2ac53c..1bcf161 100644
--- a/libs/shared/src/components/label.tsx
+++ b/libs/ui/src/components/label.tsx
@@ -4,9 +4,9 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
diff --git a/libs/shared/src/stories/menubar.stories.tsx b/libs/ui/src/components/menubar.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/menubar.stories.tsx
rename to libs/ui/src/components/menubar.stories.tsx
diff --git a/libs/shared/src/components/menubar.tsx b/libs/ui/src/components/menubar.tsx
similarity index 97%
rename from libs/shared/src/components/menubar.tsx
rename to libs/ui/src/components/menubar.tsx
index 6b2b706..8303bc2 100644
--- a/libs/shared/src/components/menubar.tsx
+++ b/libs/ui/src/components/menubar.tsx
@@ -4,7 +4,7 @@ import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 
 const MenubarMenu = MenubarPrimitive.Menu as typeof MenubarPrimitive.Menu;
 
@@ -24,7 +24,7 @@ const Menubar = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
+      className,
     )}
     {...props}
   />
@@ -39,7 +39,7 @@ const MenubarTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -57,7 +57,7 @@ const MenubarSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
@@ -75,7 +75,7 @@ const MenubarSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -88,7 +88,7 @@ const MenubarContent = React.forwardRef<
 >(
   (
     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
+    ref,
   ) => (
     <MenubarPrimitive.Portal>
       <MenubarPrimitive.Content
@@ -97,13 +97,13 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         className={cn(
           "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
+          className,
         )}
         sideOffset={sideOffset}
         {...props}
       />
     </MenubarPrimitive.Portal>
-  )
+  ),
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
@@ -118,7 +118,7 @@ const MenubarItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -134,7 +134,7 @@ const MenubarCheckboxItem = React.forwardRef<
     checked={checked}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -156,7 +156,7 @@ const MenubarRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -181,7 +181,7 @@ const MenubarLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -208,7 +208,7 @@ const MenubarShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/libs/shared/src/stories/pagination.stories.tsx b/libs/ui/src/components/pagination.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/pagination.stories.tsx
rename to libs/ui/src/components/pagination.stories.tsx
diff --git a/libs/shared/src/components/pagination.tsx b/libs/ui/src/components/pagination.tsx
similarity index 97%
rename from libs/shared/src/components/pagination.tsx
rename to libs/ui/src/components/pagination.tsx
index 39d08d2..fc12da1 100644
--- a/libs/shared/src/components/pagination.tsx
+++ b/libs/ui/src/components/pagination.tsx
@@ -1,7 +1,7 @@
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 import Link from "next/link";
 import { ButtonProps, buttonVariants } from "./button";
 
@@ -57,7 +57,7 @@ const PaginationLink = ({
             variant: isActive ? "primary" : "ghost",
             size,
           }),
-          className
+          className,
         )}
         {...props}
       />
@@ -72,7 +72,7 @@ const PaginationLink = ({
           variant: isActive ? "primary" : "ghost",
           size,
         }),
-        className
+        className,
       )}
       {...props}
       href={href}
diff --git a/libs/shared/src/components/popover.tsx b/libs/ui/src/components/popover.tsx
similarity index 95%
rename from libs/shared/src/components/popover.tsx
rename to libs/ui/src/components/popover.tsx
index d5fe880..7ccd463 100644
--- a/libs/shared/src/components/popover.tsx
+++ b/libs/ui/src/components/popover.tsx
@@ -3,7 +3,7 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       className={cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       sideOffset={sideOffset}
       {...props}
diff --git a/libs/shared/src/components/progress.tsx b/libs/ui/src/components/progress.tsx
similarity index 93%
rename from libs/shared/src/components/progress.tsx
rename to libs/ui/src/components/progress.tsx
index c18d8ba..bf2c93d 100644
--- a/libs/shared/src/components/progress.tsx
+++ b/libs/ui/src/components/progress.tsx
@@ -3,7 +3,7 @@
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
@@ -12,7 +12,7 @@ const Progress = React.forwardRef<
     ref={ref}
     className={cn(
       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
+      className,
     )}
     {...props}
   >
diff --git a/libs/shared/src/stories/select.stories.tsx b/libs/ui/src/components/select.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/select.stories.tsx
rename to libs/ui/src/components/select.stories.tsx
diff --git a/libs/shared/src/components/select.tsx b/libs/ui/src/components/select.tsx
similarity index 97%
rename from libs/shared/src/components/select.tsx
rename to libs/ui/src/components/select.tsx
index fe4a5a6..b462221 100644
--- a/libs/shared/src/components/select.tsx
+++ b/libs/ui/src/components/select.tsx
@@ -4,7 +4,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 
 const Select = SelectPrimitive.Root;
 
@@ -20,7 +20,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -40,7 +40,7 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -57,7 +57,7 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -78,7 +78,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -88,7 +88,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
diff --git a/libs/shared/src/stories/sheet.stories.tsx b/libs/ui/src/components/sheet.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/sheet.stories.tsx
rename to libs/ui/src/components/sheet.stories.tsx
diff --git a/libs/shared/src/components/sheet.tsx b/libs/ui/src/components/sheet.tsx
similarity index 97%
rename from libs/shared/src/components/sheet.tsx
rename to libs/ui/src/components/sheet.tsx
index d4d5b7e..f4195a4 100644
--- a/libs/shared/src/components/sheet.tsx
+++ b/libs/ui/src/components/sheet.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 
 const Sheet = SheetPrimitive.Root;
 
@@ -22,7 +22,7 @@ const SheetOverlay = React.forwardRef<
   <SheetPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
@@ -46,7 +46,7 @@ const sheetVariants = cva(
     defaultVariants: {
       side: "right",
     },
-  }
+  },
 );
 
 interface SheetContentProps
@@ -81,7 +81,7 @@ const SheetHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -95,7 +95,7 @@ const SheetFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/libs/shared/src/stories/skeleton.stories.tsx b/libs/ui/src/components/skeleton.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/skeleton.stories.tsx
rename to libs/ui/src/components/skeleton.stories.tsx
diff --git a/libs/shared/src/components/skeleton.tsx b/libs/ui/src/components/skeleton.tsx
similarity index 87%
rename from libs/shared/src/components/skeleton.tsx
rename to libs/ui/src/components/skeleton.tsx
index 35a05ff..d2f68c2 100644
--- a/libs/shared/src/components/skeleton.tsx
+++ b/libs/ui/src/components/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 
 function Skeleton({
   className,
diff --git a/libs/shared/src/components/slider.tsx b/libs/ui/src/components/slider.tsx
similarity index 95%
rename from libs/shared/src/components/slider.tsx
rename to libs/ui/src/components/slider.tsx
index 5d8c094..80ba5ba 100644
--- a/libs/shared/src/components/slider.tsx
+++ b/libs/ui/src/components/slider.tsx
@@ -3,7 +3,7 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
@@ -12,7 +12,7 @@ const Slider = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full touch-none select-none items-center",
-      className
+      className,
     )}
     {...props}
   >
diff --git a/libs/shared/src/stories/tabs.stories.tsx b/libs/ui/src/components/tabs.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/tabs.stories.tsx
rename to libs/ui/src/components/tabs.stories.tsx
diff --git a/libs/shared/src/components/tabs.tsx b/libs/ui/src/components/tabs.tsx
similarity index 95%
rename from libs/shared/src/components/tabs.tsx
rename to libs/ui/src/components/tabs.tsx
index 8011c61..9d8f8e7 100644
--- a/libs/shared/src/components/tabs.tsx
+++ b/libs/ui/src/components/tabs.tsx
@@ -3,7 +3,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 
 const Tabs = TabsPrimitive.Root;
 
@@ -15,7 +15,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -30,7 +30,7 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
@@ -45,7 +45,7 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/libs/shared/src/stories/text-area.stories.tsx b/libs/ui/src/components/text-area.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/text-area.stories.tsx
rename to libs/ui/src/components/text-area.stories.tsx
diff --git a/libs/shared/src/components/textarea.tsx b/libs/ui/src/components/textarea.tsx
similarity index 92%
rename from libs/shared/src/components/textarea.tsx
rename to libs/ui/src/components/textarea.tsx
index 7b5452c..187e063 100644
--- a/libs/shared/src/components/textarea.tsx
+++ b/libs/ui/src/components/textarea.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -12,12 +12,12 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         ref={ref}
         className={cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 no-focus",
-          className
+          className,
         )}
         {...props}
       />
     );
-  }
+  },
 );
 Textarea.displayName = "Textarea";
 
diff --git a/libs/shared/src/components/toast.tsx b/libs/ui/src/components/toast.tsx
similarity index 98%
rename from libs/shared/src/components/toast.tsx
rename to libs/ui/src/components/toast.tsx
index d7171f4..9497e30 100644
--- a/libs/shared/src/components/toast.tsx
+++ b/libs/ui/src/components/toast.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 
 const ToastProvider = ToastPrimitives.Provider;
 
@@ -17,7 +17,7 @@ const ToastViewport = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
+      className,
     )}
     {...props}
   />
@@ -37,7 +37,7 @@ const toastVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 const Toast = React.forwardRef<
@@ -63,7 +63,7 @@ const ToastAction = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
+      className,
     )}
     {...props}
   />
@@ -78,7 +78,7 @@ const ToastClose = React.forwardRef<
     ref={ref}
     className={cn(
       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
+      className,
     )}
     toast-close=""
     {...props}
diff --git a/libs/shared/src/stories/toaster.stories.tsx b/libs/ui/src/components/toaster.stories.tsx
similarity index 100%
rename from libs/shared/src/stories/toaster.stories.tsx
rename to libs/ui/src/components/toaster.stories.tsx
diff --git a/libs/shared/src/components/toaster.tsx b/libs/ui/src/components/toaster.tsx
similarity index 100%
rename from libs/shared/src/components/toaster.tsx
rename to libs/ui/src/components/toaster.tsx
diff --git a/libs/shared/src/components/toggle-group.tsx b/libs/ui/src/components/toggle-group.tsx
similarity index 96%
rename from libs/shared/src/components/toggle-group.tsx
rename to libs/ui/src/components/toggle-group.tsx
index eae25c9..b0e9be9 100644
--- a/libs/shared/src/components/toggle-group.tsx
+++ b/libs/ui/src/components/toggle-group.tsx
@@ -4,7 +4,7 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 import { toggleVariants } from "./toggle";
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
@@ -46,7 +46,7 @@ const ToggleGroupItem = React.forwardRef<
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        className
+        className,
       )}
       {...props}
     >
diff --git a/libs/shared/src/components/toggle.tsx b/libs/ui/src/components/toggle.tsx
similarity index 97%
rename from libs/shared/src/components/toggle.tsx
rename to libs/ui/src/components/toggle.tsx
index cfe667e..c440b2e 100644
--- a/libs/shared/src/components/toggle.tsx
+++ b/libs/ui/src/components/toggle.tsx
@@ -4,7 +4,7 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/jsx";
+import { cn } from "@/utils/jsx";
 const toggleVariants = cva(
   "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
@@ -24,7 +24,7 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 const Toggle = React.forwardRef<
diff --git a/libs/shared/src/components/use-toast.ts b/libs/ui/src/components/use-toast.ts
similarity index 99%
rename from libs/shared/src/components/use-toast.ts
rename to libs/ui/src/components/use-toast.ts
index b1311c1..52416c6 100644
--- a/libs/shared/src/components/use-toast.ts
+++ b/libs/ui/src/components/use-toast.ts
@@ -83,7 +83,7 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
         ),
       };
 
@@ -108,7 +108,7 @@ export const reducer = (state: State, action: Action): State => {
                 ...t,
                 open: false,
               }
-            : t
+            : t,
         ),
       };
     }
diff --git a/libs/ui/src/example.test.ts b/libs/ui/src/example.test.ts
new file mode 100644
index 0000000..e0b2fdb
--- /dev/null
+++ b/libs/ui/src/example.test.ts
@@ -0,0 +1,5 @@
+describe.skip("example", () => {
+  test.skip("example", () => {
+    expect(1).toBe(1);
+  });
+});
diff --git a/libs/shared/src/hooks/form.ts b/libs/ui/src/hooks/form.ts
similarity index 100%
rename from libs/shared/src/hooks/form.ts
rename to libs/ui/src/hooks/form.ts
diff --git a/libs/ui/src/hooks/index.ts b/libs/ui/src/hooks/index.ts
new file mode 100644
index 0000000..b3e818e
--- /dev/null
+++ b/libs/ui/src/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from "./form";
+export * from "./router";
diff --git a/libs/shared/src/router/hooks/index.ts b/libs/ui/src/hooks/router.ts
similarity index 94%
rename from libs/shared/src/router/hooks/index.ts
rename to libs/ui/src/hooks/router.ts
index 403e549..ed423c3 100644
--- a/libs/shared/src/router/hooks/index.ts
+++ b/libs/ui/src/hooks/router.ts
@@ -8,7 +8,7 @@ import {
   usePathname,
   useSearchParams,
 } from "next/navigation";
-import { patchSearchParams } from "../search-params";
+import { patchSearchParams } from "../utils/patch-search-params";
 
 export function useRouter() {
   try {
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
new file mode 100644
index 0000000..057ddce
--- /dev/null
+++ b/libs/ui/src/index.ts
@@ -0,0 +1,4 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./types";
+export * from "./utils";
diff --git a/libs/shared/src/styles.css b/libs/ui/src/styles.css
similarity index 100%
rename from libs/shared/src/styles.css
rename to libs/ui/src/styles.css
diff --git a/libs/shared/src/component-type.ts b/libs/ui/src/types/component.ts
similarity index 100%
rename from libs/shared/src/component-type.ts
rename to libs/ui/src/types/component.ts
diff --git a/libs/ui/src/types/index.ts b/libs/ui/src/types/index.ts
new file mode 100644
index 0000000..bd395e5
--- /dev/null
+++ b/libs/ui/src/types/index.ts
@@ -0,0 +1 @@
+export * from "./component";
diff --git a/libs/ui/src/utils/index.ts b/libs/ui/src/utils/index.ts
new file mode 100644
index 0000000..2fc5825
--- /dev/null
+++ b/libs/ui/src/utils/index.ts
@@ -0,0 +1,3 @@
+export * from "./jsx";
+export * from "./log";
+export * from "./patch-search-params";
diff --git a/libs/shared/tests/jsx.test.tsx b/libs/ui/src/utils/jsx.test.tsx
similarity index 91%
rename from libs/shared/tests/jsx.test.tsx
rename to libs/ui/src/utils/jsx.test.tsx
index 86ea2e4..54fcd3a 100644
--- a/libs/shared/tests/jsx.test.tsx
+++ b/libs/ui/src/utils/jsx.test.tsx
@@ -1,4 +1,4 @@
-import { cn, mp } from "@/jsx";
+import { cn, mp } from "./jsx";
 
 describe("jsx", () => {
   describe("mp", () => {
@@ -14,8 +14,8 @@ describe("jsx", () => {
           <div
             className="m-4"
             style={{ background: "green", color: "green" }}
-          ></div>
-        ).props
+          ></div>,
+        ).props,
       ).toEqual({
         className: "m-4 p-4",
         style: {
diff --git a/libs/shared/src/jsx.ts b/libs/ui/src/utils/jsx.ts
similarity index 100%
rename from libs/shared/src/jsx.ts
rename to libs/ui/src/utils/jsx.ts
diff --git a/libs/shared/src/stories/utils.ts b/libs/ui/src/utils/log.ts
similarity index 53%
rename from libs/shared/src/stories/utils.ts
rename to libs/ui/src/utils/log.ts
index f99ac40..95ec5f7 100644
--- a/libs/shared/src/stories/utils.ts
+++ b/libs/ui/src/utils/log.ts
@@ -1,3 +1,3 @@
-import { createLog } from "@/log";
+import { createLog } from "@npcs/log";
 
 export const storyLog = createLog("story");
diff --git a/libs/shared/src/router/search-params.ts b/libs/ui/src/utils/patch-search-params.ts
similarity index 100%
rename from libs/shared/src/router/search-params.ts
rename to libs/ui/src/utils/patch-search-params.ts
diff --git a/libs/shared/tailwind.config.ts b/libs/ui/tailwind.config.ts
similarity index 100%
rename from libs/shared/tailwind.config.ts
rename to libs/ui/tailwind.config.ts
diff --git a/libs/ui/tsconfig.json b/libs/ui/tsconfig.json
new file mode 100644
index 0000000..6b8312c
--- /dev/null
+++ b/libs/ui/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@npcs/typescript-config",
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./.storybook/**/*", "./**/*"],
+  "exclude": ["./node_modules", "./esm", "./.rollup.cache"]
+}
diff --git a/libs/ui/vitest.config.mts b/libs/ui/vitest.config.mts
new file mode 100644
index 0000000..4687ef1
--- /dev/null
+++ b/libs/ui/vitest.config.mts
@@ -0,0 +1,3 @@
+import config from "@npcs/vitest-config";
+
+export default config;
diff --git a/libs/upload/package.json b/libs/upload/package.json
index 434f53c..a77d430 100644
--- a/libs/upload/package.json
+++ b/libs/upload/package.json
@@ -17,8 +17,9 @@
     ".": "./esm/index.js"
   },
   "dependencies": {
-    "@npcs/shared": "workspace:^",
+    "@npcs/log": "workspace:^",
     "@npcs/storybook-config": "workspace:^",
+    "@npcs/ui": "workspace:^",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
@@ -60,7 +61,7 @@
     "@types/async": "^3.2.24",
     "@types/lodash-es": "^4.17.12",
     "@types/multistream": "^4.1.3",
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "@types/numeral": "^2.0.5",
     "@types/react": "^18.3.3",
     "@types/rollup-plugin-peer-deps-external": "^2.2.5",
diff --git a/libs/upload/src/client/ui/jsx.ts b/libs/upload/src/client/ui/jsx.ts
index 3264733..d7875ab 100644
--- a/libs/upload/src/client/ui/jsx.ts
+++ b/libs/upload/src/client/ui/jsx.ts
@@ -1,4 +1,4 @@
-import { cn } from "@npcs/shared/jsx";
+import { cn } from "@npcs/ui";
 import React from "react";
 
 /**
diff --git a/libs/upload/src/client/ui/setting.tsx b/libs/upload/src/client/ui/setting.tsx
index 5384983..4968bff 100644
--- a/libs/upload/src/client/ui/setting.tsx
+++ b/libs/upload/src/client/ui/setting.tsx
@@ -1,10 +1,4 @@
-import {
-  Label,
-  Slider,
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@npcs/shared/components";
-import { cn } from "@npcs/shared/jsx";
+import { cn, Label, Slider, ToggleGroup, ToggleGroupItem } from "@npcs/ui";
 
 import { useControllableValue } from "ahooks";
 import { values } from "lodash-es";
diff --git a/libs/upload/src/client/ui/upload-client-side.tsx b/libs/upload/src/client/ui/upload-client-side.tsx
index deaa886..0275932 100644
--- a/libs/upload/src/client/ui/upload-client-side.tsx
+++ b/libs/upload/src/client/ui/upload-client-side.tsx
@@ -17,8 +17,7 @@ import { Observable } from "rxjs";
 import { IUploadClientActions, IWrapServerActions } from "../../shared/actions";
 import { IUploadSetting, UploadSetting } from "./setting";
 
-import { Badge, Input, Progress } from "@npcs/shared/components";
-import { cn } from "@npcs/shared/jsx";
+import { Badge, cn, Input, Progress } from "@npcs/ui";
 import { configuration } from "@shared/configuration";
 import { useIsClient } from "@shared/next";
 import { io } from "socket.io-client";
diff --git a/libs/upload/src/example.test.ts b/libs/upload/src/example.test.ts
new file mode 100644
index 0000000..e0b2fdb
--- /dev/null
+++ b/libs/upload/src/example.test.ts
@@ -0,0 +1,5 @@
+describe.skip("example", () => {
+  test.skip("example", () => {
+    expect(1).toBe(1);
+  });
+});
diff --git a/libs/upload/src/server/server.ts b/libs/upload/src/server/server.ts
index b7f2963..09050cc 100644
--- a/libs/upload/src/server/server.ts
+++ b/libs/upload/src/server/server.ts
@@ -1,4 +1,4 @@
-import { createLog } from "@npcs/shared/log";
+import { createLog } from "@npcs/log";
 import { createServer } from "node:http";
 import { Server } from "socket.io";
 import { IUploadClientActions } from "../shared/actions";
diff --git a/libs/upload/src/styles.css b/libs/upload/src/styles.css
index be36ab3..b95d9fb 100644
--- a/libs/upload/src/styles.css
+++ b/libs/upload/src/styles.css
@@ -1,4 +1,4 @@
-@import url("@npcs/shared/styles.css");
+@import url("@npcs/ui/styles.css");
 
 @tailwind base;
 @tailwind components;
diff --git a/package.json b/package.json
index 264edda..f68bc39 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,8 @@
   "resolutions": {
     "@typescript-eslint/typescript-estree": "7.16.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "@types/node": "^20.14.10"
   },
   "config": {
     "commitizen": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abdea87..ed1e4ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,7 @@ overrides:
   '@typescript-eslint/typescript-estree': 7.16.0
   react: 18.3.1
   react-dom: 18.3.1
+  '@types/node': ^20.14.10
 
 importers:
 
@@ -55,6 +56,9 @@ importers:
       '@esbuild-plugins/tsconfig-paths':
         specifier: ^0.1.2
         version: 0.1.2(esbuild@0.21.5)(typescript@5.5.3)
+      '@npcs/log':
+        specifier: workspace:^
+        version: link:../../libs/log
       '@npcs/next-config':
         specifier: workspace:^
         version: link:../../configs/next
@@ -64,6 +68,9 @@ importers:
       '@npcs/tailwind-config':
         specifier: workspace:^
         version: link:../../configs/tailwind
+      '@npcs/ui':
+        specifier: workspace:^
+        version: link:../../libs/ui
       '@npcs/upload':
         specifier: workspace:*
         version: link:../../libs/upload
@@ -260,21 +267,24 @@ importers:
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
+      '@npcs/log':
+        specifier: workspace:^
+        version: link:../../libs/log
       '@npcs/next-config':
         specifier: workspace:^
         version: link:../../configs/next
       '@npcs/playwright-config':
         specifier: workspace:^
         version: link:../../configs/playwright
-      '@npcs/shared':
-        specifier: workspace:^
-        version: link:../../libs/shared
       '@npcs/tailwind-config':
         specifier: workspace:^
         version: link:../../configs/tailwind
       '@npcs/theme':
         specifier: workspace:^
         version: link:../../libs/theme
+      '@npcs/ui':
+        specifier: workspace:^
+        version: link:../../libs/ui
       '@prisma/client':
         specifier: ^5.16.2
         version: 5.16.2(prisma@5.16.2)
@@ -399,21 +409,24 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.52.1(react@18.3.1))
+      '@npcs/log':
+        specifier: workspace:^
+        version: link:../../libs/log
       '@npcs/next-config':
         specifier: workspace:^
         version: link:../../configs/next
       '@npcs/playwright-config':
         specifier: workspace:^
         version: link:../../configs/playwright
-      '@npcs/shared':
-        specifier: workspace:^
-        version: link:../../libs/shared
       '@npcs/storybook-config':
         specifier: workspace:^
         version: link:../../configs/storybook
       '@npcs/tailwind-config':
         specifier: workspace:^
         version: link:../../configs/tailwind
+      '@npcs/ui':
+        specifier: workspace:^
+        version: link:../../libs/ui
       '@prisma/client':
         specifier: ^5.16.2
         version: 5.16.2(prisma@5.16.2)
@@ -649,18 +662,21 @@ importers:
       '@clerk/nextjs':
         specifier: ^5.2.6
         version: 5.2.6(next@14.2.4(@babel/core@7.24.9)(@playwright/test@1.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@npcs/log':
+        specifier: workspace:^
+        version: link:../../libs/log
       '@npcs/next-config':
         specifier: workspace:^
         version: link:../../configs/next
       '@npcs/playwright-config':
         specifier: workspace:^
         version: link:../../configs/playwright
-      '@npcs/shared':
-        specifier: workspace:^
-        version: link:../../libs/shared
       '@npcs/tailwind-config':
         specifier: workspace:^
         version: link:../../configs/tailwind
+      '@npcs/ui':
+        specifier: workspace:^
+        version: link:../../libs/ui
       '@prisma/client':
         specifier: ^5.16.2
         version: 5.16.2(prisma@5.16.2)
@@ -774,9 +790,12 @@ importers:
 
   configs/next:
     dependencies:
-      '@npcs/shared':
+      '@npcs/env':
         specifier: workspace:^
-        version: link:../../libs/shared
+        version: link:../../libs/env
+      '@npcs/log':
+        specifier: workspace:^
+        version: link:../../libs/log
       '@svgr/webpack':
         specifier: ^8.1.0
         version: 8.1.0(typescript@5.5.3)
@@ -955,14 +974,181 @@ importers:
         specifier: ^2.0.4
         version: 2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0)(terser@5.31.2)
 
-  libs/shared:
+  libs/env:
+    dependencies:
+      '@t3-oss/env-nextjs':
+        specifier: ^0.11.0
+        version: 0.11.0(typescript@5.5.3)(zod@3.23.8)
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
+    devDependencies:
+      '@chromatic-com/storybook':
+        specifier: ^1.6.1
+        version: 1.6.1(react@18.3.1)
+      '@npcs/eslint-config':
+        specifier: workspace:*
+        version: link:../../configs/eslint
+      '@npcs/rollup-config':
+        specifier: workspace:*
+        version: link:../../configs/rollup
+      '@npcs/tailwind-config':
+        specifier: workspace:*
+        version: link:../../configs/tailwind
+      '@npcs/typescript-config':
+        specifier: workspace:*
+        version: link:../../configs/typescript
+      '@npcs/vitest-config':
+        specifier: workspace:^
+        version: link:../../configs/vitest
+      '@rollup/plugin-commonjs':
+        specifier: ^26.0.1
+        version: 26.0.1(rollup@4.18.1)
+      '@rollup/plugin-node-resolve':
+        specifier: ^15.2.3
+        version: 15.2.3(rollup@4.18.1)
+      '@rollup/plugin-typescript':
+        specifier: ^11.1.6
+        version: 11.1.6(rollup@4.18.1)(tslib@2.6.3)(typescript@5.5.3)
+      '@storybook/addon-essentials':
+        specifier: 8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
+      '@storybook/addon-interactions':
+        specifier: 8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
+      '@storybook/addon-links':
+        specifier: 8.2.4
+        version: 8.2.4(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
+      '@storybook/addon-onboarding':
+        specifier: 8.2.4
+        version: 8.2.4(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
+      '@storybook/blocks':
+        specifier: 8.2.4
+        version: 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
+      '@storybook/nextjs':
+        specifier: 8.2.4
+        version: 8.2.4(@swc/core@1.7.0)(next@14.2.5(@babel/core@7.24.9)(@playwright/test@1.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(type-fest@4.21.0)(typescript@5.5.3)(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))(webpack-hot-middleware@2.26.1)(webpack@5.93.0(@swc/core@1.7.0))
+      '@storybook/react':
+        specifier: 8.2.4
+        version: 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
+      '@storybook/test':
+        specifier: 8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
+      '@types/async':
+        specifier: ^3.2.24
+        version: 3.2.24
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
+      '@types/multistream':
+        specifier: ^4.1.3
+        version: 4.1.3
+      '@types/node':
+        specifier: ^20.14.10
+        version: 20.14.11
+      '@types/numeral':
+        specifier: ^2.0.5
+        version: 2.0.5
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/rollup-plugin-peer-deps-external':
+        specifier: ^2.2.5
+        version: 2.2.5
+      '@types/spark-md5':
+        specifier: ^3.0.4
+        version: 3.0.4
+      '@types/uuid':
+        specifier: ^10.0.0
+        version: 10.0.0
+      '@vitejs/plugin-react':
+        specifier: ^4.3.1
+        version: 4.3.1(vite@5.3.3(@types/node@20.14.11)(terser@5.31.2))
+      eslint:
+        specifier: ^8.57.0
+        version: 8.57.0
+      eslint-plugin-storybook:
+        specifier: ^0.8.0
+        version: 0.8.0(eslint@8.57.0)(typescript@5.5.3)
+      fast-glob:
+        specifier: ^3.3.2
+        version: 3.3.2
+      rimraf:
+        specifier: ^6.0.1
+        version: 6.0.1
+      rollup:
+        specifier: ^4.18.1
+        version: 4.18.1
+      storybook:
+        specifier: 8.2.4
+        version: 8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3)
+      tailwindcss:
+        specifier: ^3.4.5
+        version: 3.4.5(ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.11)(typescript@5.5.3))
+      tslib:
+        specifier: ^2.6.3
+        version: 2.6.3
+      tsup:
+        specifier: ^8.1.0
+        version: 8.1.0(@swc/core@1.7.0)(postcss@8.4.39)(ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.11)(typescript@5.5.3))(typescript@5.5.3)
+      typescript:
+        specifier: 5.5.3
+        version: 5.5.3
+      vite-plugin-tsconfig-paths:
+        specifier: ^1.4.1
+        version: 1.4.1(typescript@5.5.3)(vite@5.3.3(@types/node@20.14.11)(terser@5.31.2))
+      vitest:
+        specifier: ^2.0.4
+        version: 2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0)(terser@5.31.2)
+
+  libs/log:
+    dependencies:
+      consola:
+        specifier: ^3.2.3
+        version: 3.2.3
+    devDependencies:
+      '@npcs/eslint-config':
+        specifier: workspace:*
+        version: link:../../configs/eslint
+      '@npcs/rollup-config':
+        specifier: workspace:*
+        version: link:../../configs/rollup
+      '@npcs/typescript-config':
+        specifier: workspace:*
+        version: link:../../configs/typescript
+      '@npcs/vitest-config':
+        specifier: workspace:*
+        version: link:../../configs/vitest
+      '@vitejs/plugin-react':
+        specifier: ^4.3.1
+        version: 4.3.1(vite@5.3.3(@types/node@20.14.11)(terser@5.31.2))
+      eslint:
+        specifier: ^8.57.0
+        version: 8.57.0
+      rollup:
+        specifier: ^4.18.1
+        version: 4.18.1
+      typescript:
+        specifier: 5.5.3
+        version: 5.5.3
+      vitest:
+        specifier: ^2.0.4
+        version: 2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0)(terser@5.31.2)
+
+  libs/theme:
     dependencies:
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.52.1(react@18.3.1))
+      '@npcs/log':
+        specifier: workspace:^
+        version: link:../log
       '@npcs/storybook-config':
         specifier: workspace:^
         version: link:../../configs/storybook
+      '@npcs/ui':
+        specifier: workspace:^
+        version: link:../ui
       '@radix-ui/react-dialog':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1002,9 +1188,6 @@ importers:
       '@radix-ui/react-toggle-group':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@t3-oss/env-nextjs':
-        specifier: ^0.11.0
-        version: 0.11.0(typescript@5.5.3)(zod@3.23.8)
       ahooks:
         specifier: ^3.8.0
         version: 3.8.0(react@18.3.1)
@@ -1020,12 +1203,6 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      consola:
-        specifier: ^3.2.3
-        version: 3.2.3
-      embla-carousel-react:
-        specifier: ^8.1.7
-        version: 8.1.7(react@18.3.1)
       filesize:
         specifier: ^10.1.4
         version: 10.1.4
@@ -1080,6 +1257,9 @@ importers:
       zod:
         specifier: ^3.23.8
         version: 3.23.8
+      zustand:
+        specifier: ^4.5.4
+        version: 4.5.4(@types/react@18.3.3)(react@18.3.1)
     devDependencies:
       '@chromatic-com/storybook':
         specifier: ^1.6.1
@@ -1132,6 +1312,12 @@ importers:
       '@storybook/test':
         specifier: 8.2.4
         version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
+      '@testing-library/jest-dom':
+        specifier: ^6.4.6
+        version: 6.4.6(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
+      '@testing-library/react':
+        specifier: ^16.0.0
+        version: 16.0.0(@testing-library/dom@10.1.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/async':
         specifier: ^3.2.24
         version: 3.2.24
@@ -1199,14 +1385,14 @@ importers:
         specifier: ^2.0.4
         version: 2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2)
 
-  libs/theme:
+  libs/ui:
     dependencies:
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.52.1(react@18.3.1))
-      '@npcs/shared':
+      '@npcs/log':
         specifier: workspace:^
-        version: link:../shared
+        version: link:../log
       '@npcs/storybook-config':
         specifier: workspace:^
         version: link:../../configs/storybook
@@ -1249,6 +1435,9 @@ importers:
       '@radix-ui/react-toggle-group':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@t3-oss/env-nextjs':
+        specifier: ^0.11.0
+        version: 0.11.0(typescript@5.5.3)(zod@3.23.8)
       ahooks:
         specifier: ^3.8.0
         version: 3.8.0(react@18.3.1)
@@ -1264,6 +1453,12 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      consola:
+        specifier: ^3.2.3
+        version: 3.2.3
+      embla-carousel-react:
+        specifier: ^8.1.7
+        version: 8.1.7(react@18.3.1)
       filesize:
         specifier: ^10.1.4
         version: 10.1.4
@@ -1318,9 +1513,6 @@ importers:
       zod:
         specifier: ^3.23.8
         version: 3.23.8
-      zustand:
-        specifier: ^4.5.4
-        version: 4.5.4(@types/react@18.3.3)(react@18.3.1)
     devDependencies:
       '@chromatic-com/storybook':
         specifier: ^1.6.1
@@ -1354,7 +1546,7 @@ importers:
         version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
       '@storybook/addon-interactions':
         specifier: 8.2.4
-        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
       '@storybook/addon-links':
         specifier: 8.2.4
         version: 8.2.4(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
@@ -1366,19 +1558,13 @@ importers:
         version: 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
       '@storybook/nextjs':
         specifier: 8.2.4
-        version: 8.2.4(@swc/core@1.7.0)(next@14.2.4(@babel/core@7.24.9)(@playwright/test@1.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(type-fest@4.21.0)(typescript@5.5.3)(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))(webpack-hot-middleware@2.26.1)(webpack@5.93.0(@swc/core@1.7.0))
+        version: 8.2.4(@swc/core@1.7.0)(next@14.2.4(@babel/core@7.24.9)(@playwright/test@1.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(type-fest@4.21.0)(typescript@5.5.3)(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))(webpack-hot-middleware@2.26.1)(webpack@5.93.0(@swc/core@1.7.0))
       '@storybook/react':
         specifier: 8.2.4
         version: 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
       '@storybook/test':
         specifier: 8.2.4
-        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
-      '@testing-library/jest-dom':
-        specifier: ^6.4.6
-        version: 6.4.6(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
-      '@testing-library/react':
-        specifier: ^16.0.0
-        version: 16.0.0(@testing-library/dom@10.1.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
       '@types/async':
         specifier: ^3.2.24
         version: 3.2.24
@@ -1390,7 +1576,7 @@ importers:
         version: 4.1.3
       '@types/node':
         specifier: ^20.14.10
-        version: 20.14.10
+        version: 20.14.11
       '@types/numeral':
         specifier: ^2.0.5
         version: 2.0.5
@@ -1408,7 +1594,7 @@ importers:
         version: 10.0.0
       '@vitejs/plugin-react':
         specifier: ^4.3.1
-        version: 4.3.1(vite@5.3.3(@types/node@20.14.10)(terser@5.31.2))
+        version: 4.3.1(vite@5.3.3(@types/node@20.14.11)(terser@5.31.2))
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
@@ -1429,31 +1615,34 @@ importers:
         version: 8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3)
       tailwindcss:
         specifier: ^3.4.5
-        version: 3.4.5(ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.10)(typescript@5.5.3))
+        version: 3.4.5(ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.11)(typescript@5.5.3))
       tslib:
         specifier: ^2.6.3
         version: 2.6.3
       tsup:
         specifier: ^8.1.0
-        version: 8.1.0(@swc/core@1.7.0)(postcss@8.4.39)(ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.10)(typescript@5.5.3))(typescript@5.5.3)
+        version: 8.1.0(@swc/core@1.7.0)(postcss@8.4.39)(ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.11)(typescript@5.5.3))(typescript@5.5.3)
       typescript:
         specifier: 5.5.3
         version: 5.5.3
       vite-plugin-tsconfig-paths:
         specifier: ^1.4.1
-        version: 1.4.1(typescript@5.5.3)(vite@5.3.3(@types/node@20.14.10)(terser@5.31.2))
+        version: 1.4.1(typescript@5.5.3)(vite@5.3.3(@types/node@20.14.11)(terser@5.31.2))
       vitest:
         specifier: ^2.0.4
-        version: 2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2)
+        version: 2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0)(terser@5.31.2)
 
   libs/upload:
     dependencies:
-      '@npcs/shared':
+      '@npcs/log':
         specifier: workspace:^
-        version: link:../shared
+        version: link:../log
       '@npcs/storybook-config':
         specifier: workspace:^
         version: link:../../configs/storybook
+      '@npcs/ui':
+        specifier: workspace:^
+        version: link:../ui
       '@radix-ui/react-icons':
         specifier: ^1.3.0
         version: 1.3.0(react@18.3.1)
@@ -1629,9 +1818,9 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.52.1(react@18.3.1))
-      '@npcs/shared':
+      '@npcs/log':
         specifier: workspace:^
-        version: link:../../libs/shared
+        version: link:../../libs/log
       '@npcs/storybook-config':
         specifier: workspace:^
         version: link:../../configs/storybook
@@ -5136,12 +5325,6 @@ packages:
   '@types/mute-stream@0.0.4':
     resolution: {integrity: sha512-CPM9nzrCPPJHQNA9keH9CVkVI+WR5kMa+7XEs5jcGQ0VoAGnLv242w8lIVgwAEfmE4oufJRaTc9PNLQl0ioAow==}
 
-  '@types/node@16.18.11':
-    resolution: {integrity: sha512-3oJbGBUWuS6ahSnEq1eN2XrCyf4YsWI8OyCvo7c64zQJNplk3mO84t53o8lfTk+2ji59g5ycfc6qQ3fdHliHuA==}
-
-  '@types/node@18.19.39':
-    resolution: {integrity: sha512-nPwTRDKUctxw3di5b4TfT3I0sWDiWoPQCZjXhvdkINntwr8lcoVCKsTgnXeRubKIlfnV+eN/HYk6Jb40tbcEAQ==}
-
   '@types/node@20.14.10':
     resolution: {integrity: sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==}
 
@@ -6439,7 +6622,7 @@ packages:
     resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
     engines: {node: '>=v16'}
     peerDependencies:
-      '@types/node': '*'
+      '@types/node': ^20.14.10
       cosmiconfig: '>=8.2'
       typescript: '>=4'
 
@@ -11624,7 +11807,7 @@ packages:
     peerDependencies:
       '@swc/core': '>=1.2.50'
       '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
+      '@types/node': ^20.14.10
       typescript: '>=2.7'
     peerDependenciesMeta:
       '@swc/core':
@@ -12067,7 +12250,7 @@ packages:
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
+      '@types/node': ^20.14.10
       less: '*'
       lightningcss: ^1.21.0
       sass: '*'
@@ -12096,7 +12279,7 @@ packages:
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@types/node': ^18.0.0 || >=20.0.0
+      '@types/node': ^20.14.10
       '@vitest/browser': 2.0.4
       '@vitest/ui': 2.0.4
       happy-dom: '*'
@@ -15588,7 +15771,7 @@ snapshots:
   '@storybook/builder-webpack5@8.2.4(@swc/core@1.7.0)(esbuild@0.21.5)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)':
     dependencies:
       '@storybook/core-webpack': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       browser-assert: 1.2.1
       case-sensitive-paths-webpack-plugin: 2.4.0
@@ -15628,7 +15811,7 @@ snapshots:
   '@storybook/builder-webpack5@8.2.4(@swc/core@1.7.0)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)':
     dependencies:
       '@storybook/core-webpack': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       browser-assert: 1.2.1
       case-sensitive-paths-webpack-plugin: 2.4.0
@@ -15668,7 +15851,7 @@ snapshots:
   '@storybook/builder-webpack5@8.2.4(@swc/core@1.7.0)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.4)':
     dependencies:
       '@storybook/core-webpack': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       browser-assert: 1.2.1
       case-sensitive-paths-webpack-plugin: 2.4.0
@@ -15731,7 +15914,7 @@ snapshots:
 
   '@storybook/core-webpack@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))':
     dependencies:
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       storybook: 8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3)
       ts-dedent: 2.2.0
 
@@ -15739,7 +15922,7 @@ snapshots:
     dependencies:
       '@storybook/csf': 0.1.11
       '@types/express': 4.17.21
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       browser-assert: 1.2.1
       esbuild: 0.21.5
       esbuild-register: 3.5.0(esbuild@0.21.5)
@@ -15804,7 +15987,7 @@ snapshots:
       '@storybook/preset-react-webpack': 8.2.4(@swc/core@1.7.0)(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
       '@storybook/react': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
       '@storybook/test': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       babel-loader: 9.1.3(@babel/core@7.24.9)(webpack@5.93.0(@swc/core@1.7.0)(esbuild@0.21.5))
       css-loader: 6.11.0(webpack@5.93.0(@swc/core@1.7.0)(esbuild@0.21.5))
@@ -15877,7 +16060,7 @@ snapshots:
       '@storybook/preset-react-webpack': 8.2.4(@swc/core@1.7.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
       '@storybook/react': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
       '@storybook/test': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       babel-loader: 9.1.3(@babel/core@7.24.9)(webpack@5.93.0(@swc/core@1.7.0))
       css-loader: 6.11.0(webpack@5.93.0(@swc/core@1.7.0))
@@ -15950,7 +16133,7 @@ snapshots:
       '@storybook/preset-react-webpack': 8.2.4(@swc/core@1.7.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
       '@storybook/react': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
       '@storybook/test': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       babel-loader: 9.1.3(@babel/core@7.24.9)(webpack@5.93.0(@swc/core@1.7.0))
       css-loader: 6.11.0(webpack@5.93.0(@swc/core@1.7.0))
@@ -16003,6 +16186,79 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
+  '@storybook/nextjs@8.2.4(@swc/core@1.7.0)(next@14.2.5(@babel/core@7.24.9)(@playwright/test@1.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(type-fest@4.21.0)(typescript@5.5.3)(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))(webpack-hot-middleware@2.26.1)(webpack@5.93.0(@swc/core@1.7.0))':
+    dependencies:
+      '@babel/core': 7.24.9
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.9)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.9)
+      '@babel/plugin-syntax-import-assertions': 7.24.7(@babel/core@7.24.9)
+      '@babel/plugin-transform-class-properties': 7.24.7(@babel/core@7.24.9)
+      '@babel/plugin-transform-export-namespace-from': 7.24.7(@babel/core@7.24.9)
+      '@babel/plugin-transform-numeric-separator': 7.24.7(@babel/core@7.24.9)
+      '@babel/plugin-transform-object-rest-spread': 7.24.7(@babel/core@7.24.9)
+      '@babel/plugin-transform-runtime': 7.24.7(@babel/core@7.24.9)
+      '@babel/preset-env': 7.24.8(@babel/core@7.24.9)
+      '@babel/preset-react': 7.24.7(@babel/core@7.24.9)
+      '@babel/preset-typescript': 7.24.7(@babel/core@7.24.9)
+      '@babel/runtime': 7.24.8
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.21.0)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(@swc/core@1.7.0))
+      '@storybook/builder-webpack5': 8.2.4(@swc/core@1.7.0)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
+      '@storybook/preset-react-webpack': 8.2.4(@swc/core@1.7.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
+      '@storybook/react': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
+      '@storybook/test': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.11)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
+      '@types/node': 20.14.11
+      '@types/semver': 7.5.8
+      babel-loader: 9.1.3(@babel/core@7.24.9)(webpack@5.93.0(@swc/core@1.7.0))
+      css-loader: 6.11.0(webpack@5.93.0(@swc/core@1.7.0))
+      find-up: 5.0.0
+      fs-extra: 11.2.0
+      image-size: 1.1.1
+      loader-utils: 3.3.1
+      next: 14.2.5(@babel/core@7.24.9)(@playwright/test@1.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      node-polyfill-webpack-plugin: 2.0.1(webpack@5.93.0(@swc/core@1.7.0))
+      pnp-webpack-plugin: 1.7.0(typescript@5.5.3)
+      postcss: 8.4.39
+      postcss-loader: 8.1.1(postcss@8.4.39)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.7.0))
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-refresh: 0.14.2
+      resolve-url-loader: 5.0.0
+      sass-loader: 12.6.0(webpack@5.93.0(@swc/core@1.7.0))
+      semver: 7.6.2
+      storybook: 8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3)
+      style-loader: 3.3.4(webpack@5.93.0(@swc/core@1.7.0))
+      styled-jsx: 5.1.1(@babel/core@7.24.9)(react@18.3.1)
+      ts-dedent: 2.2.0
+      tsconfig-paths: 4.2.0
+      tsconfig-paths-webpack-plugin: 4.1.0
+    optionalDependencies:
+      sharp: 0.33.4
+      typescript: 5.5.3
+      webpack: 5.93.0(@swc/core@1.7.0)
+    transitivePeerDependencies:
+      - '@jest/globals'
+      - '@rspack/core'
+      - '@swc/core'
+      - '@types/bun'
+      - '@types/jest'
+      - '@types/webpack'
+      - babel-plugin-macros
+      - esbuild
+      - fibers
+      - jest
+      - node-sass
+      - sass
+      - sass-embedded
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - uglify-js
+      - vitest
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+
   '@storybook/nextjs@8.2.4(@swc/core@1.7.0)(next@14.2.5(@babel/core@7.24.9)(@playwright/test@1.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(type-fest@4.21.0)(typescript@5.5.4)(webpack-hot-middleware@2.26.1)(webpack@5.93.0(@swc/core@1.7.0))':
     dependencies:
       '@babel/core': 7.24.9
@@ -16023,7 +16279,7 @@ snapshots:
       '@storybook/preset-react-webpack': 8.2.4(@swc/core@1.7.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.4)
       '@storybook/react': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.4)
       '@storybook/test': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(vitest@2.0.4(@edge-runtime/vm@3.2.0)(@types/node@20.14.10)(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.3))(terser@5.31.2))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       babel-loader: 9.1.3(@babel/core@7.24.9)(webpack@5.93.0(@swc/core@1.7.0))
       css-loader: 6.11.0(webpack@5.93.0(@swc/core@1.7.0))
@@ -16081,7 +16337,7 @@ snapshots:
       '@storybook/core-webpack': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
       '@storybook/react': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
       '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.7.0)(esbuild@0.21.5))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       find-up: 5.0.0
       fs-extra: 11.2.0
@@ -16108,7 +16364,7 @@ snapshots:
       '@storybook/core-webpack': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
       '@storybook/react': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.3)
       '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.7.0))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       find-up: 5.0.0
       fs-extra: 11.2.0
@@ -16135,7 +16391,7 @@ snapshots:
       '@storybook/core-webpack': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
       '@storybook/react': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))(typescript@5.5.4)
       '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.5.4)(webpack@5.93.0(@swc/core@1.7.0))
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       '@types/semver': 7.5.8
       find-up: 5.0.0
       fs-extra: 11.2.0
@@ -16219,7 +16475,7 @@ snapshots:
       '@storybook/theming': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
       '@types/escodegen': 0.0.6
       '@types/estree': 0.0.51
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       acorn: 7.4.1
       acorn-jsx: 5.3.2(acorn@7.4.1)
       acorn-walk: 7.2.0
@@ -16248,7 +16504,7 @@ snapshots:
       '@storybook/theming': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))(bufferutil@4.0.8)(utf-8-validate@6.0.3))
       '@types/escodegen': 0.0.6
       '@types/estree': 0.0.51
-      '@types/node': 18.19.39
+      '@types/node': 20.14.11
       acorn: 7.4.1
       acorn-jsx: 5.3.2(acorn@7.4.1)
       acorn-walk: 7.2.0
@@ -16790,12 +17046,6 @@ snapshots:
     dependencies:
       '@types/node': 20.14.11
 
-  '@types/node@16.18.11': {}
-
-  '@types/node@18.19.39':
-    dependencies:
-      undici-types: 5.26.5
-
   '@types/node@20.14.10':
     dependencies:
       undici-types: 5.26.5
@@ -17060,7 +17310,7 @@ snapshots:
       '@edge-runtime/node-utils': 2.3.0
       '@edge-runtime/primitives': 4.1.0
       '@edge-runtime/vm': 3.2.0
-      '@types/node': 16.18.11
+      '@types/node': 20.14.11
       '@vercel/build-utils': 8.3.2
       '@vercel/error-utils': 2.0.2
       '@vercel/nft': 0.27.2(encoding@0.1.13)
@@ -17074,7 +17324,7 @@ snapshots:
       node-fetch: 2.6.9(encoding@0.1.13)
       path-to-regexp: 6.2.1
       ts-morph: 12.0.0
-      ts-node: 10.9.1(@swc/core@1.7.0)(@types/node@16.18.11)(typescript@4.9.5)
+      ts-node: 10.9.1(@swc/core@1.7.0)(@types/node@20.14.11)(typescript@4.9.5)
       typescript: 4.9.5
       undici: 5.28.4
     transitivePeerDependencies:
@@ -19327,7 +19577,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.4(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -19357,7 +19607,7 @@ snapshots:
       enhanced-resolve: 5.17.0
       eslint: 8.57.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.14.0
@@ -19379,7 +19629,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -24774,46 +25024,46 @@ snapshots:
       '@swc/core': 1.7.0(@swc/helpers@0.5.5)
     optional: true
 
-  ts-node@10.9.1(@swc/core@1.7.0)(@types/node@16.18.11)(typescript@4.9.5):
+  ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.10)(typescript@5.5.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 16.18.11
+      '@types/node': 20.14.10
       acorn: 8.12.1
       acorn-walk: 8.3.3
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.9.5
+      typescript: 5.5.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     optionalDependencies:
       '@swc/core': 1.7.0(@swc/helpers@0.5.5)
+    optional: true
 
-  ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.10)(typescript@5.5.3):
+  ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.11)(typescript@4.9.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.14.10
+      '@types/node': 20.14.11
       acorn: 8.12.1
       acorn-walk: 8.3.3
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 5.5.3
+      typescript: 4.9.5
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     optionalDependencies:
       '@swc/core': 1.7.0(@swc/helpers@0.5.5)
-    optional: true
 
   ts-node@10.9.1(@swc/core@1.7.0)(@types/node@20.14.11)(typescript@5.5.3):
     dependencies:
diff --git a/tools/cli/bin/cli.mjs b/tools/cli/bin/cli.mjs
index 67f9bb7..e33b894 100755
--- a/tools/cli/bin/cli.mjs
+++ b/tools/cli/bin/cli.mjs
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 // @ts-check
-import { createLog } from "@npcs/shared/log";
+import { createLog } from "@npcs/log";
 import { Command as Commander } from "commander";
 import * as commands from "../esm/index.js";
 import { Command } from "../esm/index.js";
diff --git a/tools/cli/package.json b/tools/cli/package.json
index 0d59c04..51e755f 100644
--- a/tools/cli/package.json
+++ b/tools/cli/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
-    "@npcs/shared": "workspace:^",
+    "@npcs/log": "workspace:^",
     "@npcs/storybook-config": "workspace:^",
     "@pnpm/filter-workspace-packages": "^10.0.1",
     "@pnpm/find-workspace-dir": "^7.0.1",
@@ -87,7 +87,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/multistream": "^4.1.3",
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "@types/numeral": "^2.0.5",
     "@types/react": "^18.3.3",
     "@types/rollup-plugin-peer-deps-external": "^2.2.5",
diff --git a/tools/cli/src/command.ts b/tools/cli/src/command.ts
index a837f1a..3d37182 100644
--- a/tools/cli/src/command.ts
+++ b/tools/cli/src/command.ts
@@ -1,4 +1,4 @@
-import { createLog, ILog } from "@npcs/shared/log";
+import { createLog, ILog } from "@npcs/log";
 import { Command as _Command } from "commander";
 import { z } from "zod";
 
diff --git a/tools/cli/src/example.test.ts b/tools/cli/src/example.test.ts
new file mode 100644
index 0000000..e0b2fdb
--- /dev/null
+++ b/tools/cli/src/example.test.ts
@@ -0,0 +1,5 @@
+describe.skip("example", () => {
+  test.skip("example", () => {
+    expect(1).toBe(1);
+  });
+});
diff --git a/tools/cli/src/iw.ts b/tools/cli/src/iw.ts
new file mode 100644
index 0000000..cb925fe
--- /dev/null
+++ b/tools/cli/src/iw.ts
@@ -0,0 +1,58 @@
+import { findWorkspaceDir } from "@pnpm/find-workspace-dir";
+import { findWorkspacePackages } from "@pnpm/workspace.find-packages";
+import execSh from "exec-sh";
+import inquirer from "inquirer";
+import { z } from "zod";
+import { Command, IOptionsValidation } from "./command";
+
+const name = "iw";
+const description = "Install packages from workspace";
+const options = z.object({}) satisfies IOptionsValidation;
+
+export class CommandIw extends Command<typeof options> {
+  constructor() {
+    super(name, description, options);
+  }
+
+  async action() {
+    const workspace = await findWorkspaceDir(this.cwd);
+    if (!workspace) {
+      this.throwError("Not a workspace");
+    }
+    const apps = (
+      await findWorkspacePackages(workspace, {
+        patterns: ["./apps/*"],
+      })
+    ).filter((x) => x.rootDir !== workspace);
+
+    inquirer
+      .prompt([
+        {
+          type: "list",
+          name: "installTo",
+          message: "Select where packages you want to install into",
+          choices: apps.map((x) => x.manifest.name!),
+        } as any,
+        {
+          type: "list",
+          name: "packages",
+          message: "Select packages to install",
+          choices: apps.map((x) => x.manifest.name!),
+        } as any,
+      ])
+      .then(({ packageName }) => {
+        execSh(`turbo dev --filter=${packageName}`, {
+          cwd: workspace,
+        });
+      })
+      .catch((error) => {
+        if (error.isTtyError) {
+          this.throwError(
+            `Prompt couldn't be rendered in the current environment`,
+          );
+        } else {
+          this.throwError(error.message);
+        }
+      });
+  }
+}
diff --git a/tools/get-changed-packages/package.json b/tools/get-changed-packages/package.json
index cadd70b..3cf82f3 100644
--- a/tools/get-changed-packages/package.json
+++ b/tools/get-changed-packages/package.json
@@ -24,7 +24,7 @@
     "@npcs/tailwind-config": "workspace:*",
     "@npcs/typescript-config": "workspace:*",
     "@npcs/vitest-config": "workspace:^",
-    "@types/node": "^20.14.10",
+    "@types/node": "*",
     "eslint": "^8.57.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.18.1",
diff --git a/tools/get-changed-packages/src/example.test.ts b/tools/get-changed-packages/src/example.test.ts
new file mode 100644
index 0000000..e0b2fdb
--- /dev/null
+++ b/tools/get-changed-packages/src/example.test.ts
@@ -0,0 +1,5 @@
+describe.skip("example", () => {
+  test.skip("example", () => {
+    expect(1).toBe(1);
+  });
+});
diff --git a/turbo.json b/turbo.json
index f927f63..f171e7e 100644
--- a/turbo.json
+++ b/turbo.json
@@ -23,7 +23,7 @@
     },
     "test": {
       "inputs": ["src/**/*", "libs/**/*", "app/**/*", "tests/**/*"],
-      "dependsOn": ["lint", "typecheck", "compile"]
+      "dependsOn": ["compile"]
     },
     "build": {
       "inputs": [