diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
index 1f2b3a6..1717166 100644
--- a/packages/react/src/App.tsx
+++ b/packages/react/src/App.tsx
@@ -18,6 +18,9 @@ import DocsIntroduction, {
 import DocsInstallation, {
   tableOfContents as docsInstallationToc,
 } from "./docs/installation.mdx";
+import DocsConfiguration, {
+  tableOfContents as docsConfigurationToc,
+} from "./docs/configuration.mdx";
 
 import { HeadingContext } from "./HeadingContext";
 import React, {
@@ -87,24 +90,18 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
 }
 
 const overrideComponents = {
-  pre: forwardRef<HTMLDivElement, { children: React.ReactElement }>(
-    (props, ref) => {
-      const {
-        props: { children, className },
-      } = React.cloneElement(React.Children.only(props.children));
+  pre: (props: any) => {
+    const {
+      props: { children, className },
+    } = React.cloneElement(React.Children.only(props.children));
 
-      const language =
-        (typeof className !== "string" || !className.includes("language-")
-          ? "typescript"
-          : /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
+    const language =
+      (!className || !className.includes("language-")
+        ? "typescript"
+        : /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
 
-      return (
-        <Code ref={ref} language={language}>
-          {children as string}
-        </Code>
-      );
-    },
-  ),
+    return <Code language={language}>{children as string}</Code>;
+  },
   code: forwardRef<HTMLElement, any>((props: any, ref) => (
     <code
       ref={ref}
@@ -170,7 +167,7 @@ const router = createBrowserRouter(
           path="introduction"
           element={
             <DynamicLayout toc={docsIntroductionToc}>
-              <DocsIntroduction />
+              <DocsIntroduction components={overrideComponents} />
             </DynamicLayout>
           }
         />
@@ -178,7 +175,15 @@ const router = createBrowserRouter(
           path="installation"
           element={
             <DynamicLayout toc={docsInstallationToc}>
-              <DocsInstallation />
+              <DocsInstallation components={overrideComponents} />
+            </DynamicLayout>
+          }
+        />
+        <Route
+          path="configuration"
+          element={
+            <DynamicLayout toc={docsConfigurationToc}>
+              <DocsConfiguration components={overrideComponents} />
             </DynamicLayout>
           }
         />
diff --git a/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts
index e14737d..798de14 100644
--- a/packages/react/src/RouteObject.ts
+++ b/packages/react/src/RouteObject.ts
@@ -1,49 +1,59 @@
-const docsModules = import.meta.glob('./docs/components/*.mdx');
+const docsModules = import.meta.glob("./docs/components/*.mdx");
 
 const mainNav = [
   {
     path: "/docs",
     name: "Docs",
-    eq: (pathname: string) => pathname.startsWith("/docs") && !pathname.startsWith("/docs/components")
+    eq: (pathname: string) =>
+      pathname.startsWith("/docs") && !pathname.startsWith("/docs/components"),
   },
   {
     path: "/docs/components",
     name: "Components",
-    eq: (pathname: string) => pathname.startsWith("/docs/components")
+    eq: (pathname: string) => pathname.startsWith("/docs/components"),
   },
   {
     path: "https://github.com/p-sw/ui",
     name: "Github",
-    eq: () => false
-  }
+    eq: () => false,
+  },
 ];
 
-const sideNav: Record<string, ({ path: string; name: string; eq: (path: string) => boolean })[]> = {
-  "Documents": [
+const sideNav: Record<
+  string,
+  { path: string; name: string; eq: (path: string) => boolean }[]
+> = {
+  Documents: [
     {
       path: "/docs/introduction",
       name: "Introduction",
-      eq: (pathname: string) => pathname === "/docs/introduction"
+      eq: (pathname: string) => pathname === "/docs/introduction",
     },
     {
       path: "/docs/installation",
       name: "Installation",
-      eq: (pathname: string) => pathname === "/docs/installation"
-    }
+      eq: (pathname: string) => pathname === "/docs/installation",
+    },
+    {
+      path: "/docs/configuration",
+      name: "Configuration",
+      eq: (pathname: string) => pathname === "/docs/configuration",
+    },
   ],
-  "Components": []
+  Components: [],
 };
 
 Object.keys(docsModules).forEach((path) => {
-  const name = (path.split('/').pop() ?? '').replace('.mdx', '');
+  const name = (path.split("/").pop() ?? "").replace(".mdx", "");
   sideNav["Components"].push({
-    path: path.replace('./docs', '/docs').replace('.mdx', ''),
+    path: path.replace("./docs", "/docs").replace(".mdx", ""),
     name: name.charAt(0).toUpperCase() + name.slice(1),
-    eq: (pathname: string) => pathname === path.replace('./docs', '/docs').replace('.mdx', '')
+    eq: (pathname: string) =>
+      pathname === path.replace("./docs", "/docs").replace(".mdx", ""),
   });
 });
 
 export default {
   mainNav,
-  sideNav
+  sideNav,
 };
diff --git a/packages/react/src/docs/configuration.mdx b/packages/react/src/docs/configuration.mdx
new file mode 100644
index 0000000..3b76791
--- /dev/null
+++ b/packages/react/src/docs/configuration.mdx
@@ -0,0 +1,64 @@
+# Configuration
+
+## Library File
+
+Library file is a shared utility container every component uses.
+You can put it anywhere as long as you properly update import path.
+
+PSW/UI manages its import path using tsconfig path.
+
+If you want to follow our rule, you can add a path to your `tsconfig.json`.
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@pswui-lib": ["./pswui/lib.tsx"]
+    }
+  }
+}
+```
+
+## CLI
+
+You can use configuration file to change things of CLI.
+
+Default config file name is `pswui.config.js`.
+
+Here is our config structure:
+```typescript
+export interface Config {
+  /**
+   * Path that cli will create a file.
+   */
+  paths?: {
+    components?: 'src/pswui/components' | string
+    lib?: 'src/pswui/lib.tsx' | string
+  }
+  /**
+   * Absolute path that will used for import in component
+   */
+  import?: {
+    lib?: '@pswui-lib' | string
+  }
+}
+```
+
+You can import `Config` type or `buildConfig` function to use typescript intellisense.
+
+```ts
+import { Config } from "@psw-ui/cli"
+
+const config: Config = {
+  /* ... */
+}
+
+export default config;
+```
+
+```ts
+import { buildConfig } from "@psw-ui/cli"
+
+export default buildConfig({
+  /* ... */
+})
+```
\ No newline at end of file