diff --git a/component-docs/src/pages/get-started/installation/vite.mdx b/component-docs/src/pages/get-started/installation/vite.mdx
index d7a8e5b0b..1c43c9a48 100644
--- a/component-docs/src/pages/get-started/installation/vite.mdx
+++ b/component-docs/src/pages/get-started/installation/vite.mdx
@@ -2,6 +2,7 @@ import { Steps, Tabs } from 'nextra/components'
import SeedDesignConfiguration from "@/src/templates/seed-design-configuration.mdx"
import Installation from "@/src/templates/get-started-installation.mdx"
+import TsconfigConfiguration from "@/src/templates/tsconfig-configuration.mdx"
# 설치
@@ -21,7 +22,7 @@ Seed Design의 컬러 토큰은 `
` 태그의 `data-seed`, `data-seed-sca
- ```html copy
+ ```html copy filename="index.html" {2-4,7}
` 태그의 `data-seed`, `data-seed-sca
```
- ```html copy
+ ```html copy filename="index.html" {2-4,7}
` 태그의 `data-seed`, `data-seed-sca
```
- ```html copy
+ ```html copy filename="index.html" {2-4,7}
+
diff --git a/component-docs/src/templates/tsconfig-configuration.mdx b/component-docs/src/templates/tsconfig-configuration.mdx
new file mode 100644
index 000000000..246accc00
--- /dev/null
+++ b/component-docs/src/templates/tsconfig-configuration.mdx
@@ -0,0 +1,12 @@
+```json filename="tsconfig.json" copy {4-8}
+{
+ "compilerOptions": {
+ // your options
+ "paths": {
+ "seed-design/ui/*": [
+ "./seed-design/ui/*"
+ ]
+ }
+ }
+}
+```