diff --git a/README.md b/README.md
index 35fd15f3..d25eb7cb 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,26 @@ Beautifully designed _Nuxt Content_ template with _shadcn-vue_. **Customizable.
 
 - [Documentation / Demo](https://shadcn-docs-nuxt.vercel.app/)
 
+## Quick Start
+
+1. Create a project with the starter template
+
+  ```bash
+  npx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+  ```
+
+2. Install dependencies
+
+  ```bash
+  npm install
+  ```
+
+3. Start dev server
+
+  ```bash
+  npm run dev
+  ```
+
 ## Contributing
 
 1. Clone this repository
diff --git a/app.config.ts b/app.config.ts
index c27cf266..249dbfac 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -16,12 +16,12 @@ export default defineAppConfig({
         links: [{
           title: 'Getting Started',
           to: '/getting-started',
-          description: 'For the beautiful component design & docs design',
+          description: 'Start building your document with shadcn-docs-nuxt',
           target: undefined,
         }, {
           title: 'API',
           to: '/api',
-          description: 'For the vue port of shadcn-ui & some docs component source',
+          description: 'Discover the configurations and exposed APIs.',
           target: undefined,
         }],
       }, {
@@ -134,9 +134,13 @@ export default defineAppConfig({
   },
 });
 
+type DeepPartial<T> = T extends object ? {
+  [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    shadcnDocs?: {
+    shadcnDocs: DeepPartial<{
       site: {
         name: string;
       };
@@ -150,13 +154,13 @@ declare module '@nuxt/schema' {
         darkModeToggle: true;
         nav: ({
           title: string;
-          to?: string;
-          target?: string;
-          links?: ({
+          to: string;
+          target: string;
+          links: ({
             title: string;
             to: string;
-            target?: string;
-            description?: string;
+            target: string;
+            description: string;
           })[];
         })[];
         links: ({
@@ -179,10 +183,10 @@ declare module '@nuxt/schema' {
       footer: {
         credits: string;
         links: ({
-          icon?: string;
-          title?: string;
+          icon: string;
+          title: string;
           to: string;
-          target?: string;
+          target: string;
         })[];
       };
       toc: {
@@ -193,6 +197,6 @@ declare module '@nuxt/schema' {
         enable: boolean;
         inAside: boolean;
       };
-    };
+    }>;
   }
 }
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
index 82557e85..a87db159 100644
--- a/components/content/ProseCode.vue
+++ b/components/content/ProseCode.vue
@@ -9,8 +9,8 @@
     </div>
     <UiScrollArea>
       <div
-        class="p-3 bg-muted/30 text-sm relative overflow-x-auto"
-        :class="[`highlight-${language}`, !filename && 'pr-10']"
+        class="py-3 bg-muted/30 text-sm relative overflow-x-auto"
+        :class="[`highlight-${language}`, !filename && 'inline-copy']"
       >
         <span v-if="!filename" class="absolute right-4">
           <CodeCopy :code="code" />
@@ -61,4 +61,17 @@ const icon = iconMap.get(props.filename?.toLowerCase()) || iconMap.get(props.lan
 .fade-leave-to {
   opacity: 0;
 }
+
+.shiki .line.highlight {
+  background-color: hsl(var(--muted) / 0.8);
+}
+
+.shiki .line {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.inline-copy .line {
+  padding-right: 2.7rem;
+}
 </style>
diff --git a/components/layout/Header/NavMobileItem.vue b/components/layout/Header/NavMobileItem.vue
index 9b83fc0e..65fbe712 100644
--- a/components/layout/Header/NavMobileItem.vue
+++ b/components/layout/Header/NavMobileItem.vue
@@ -38,10 +38,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AppConfigInput } from 'nuxt/schema';
-
 const props = defineProps<{
-  item: Exclude<AppConfigInput['shadcnDocs'], undefined>['header']['nav'][0];
+  item: any;
   index: number;
 }>();
 
diff --git a/content/1.getting-started/1.Introduction.md b/content/1.getting-started/1.Introduction.md
index 15cfafde..4f790823 100644
--- a/content/1.getting-started/1.Introduction.md
+++ b/content/1.getting-started/1.Introduction.md
@@ -4,9 +4,19 @@ description: shadcn-docs-nuxt is a Nuxt documentation template built with Nuxt C
 icon: 'lucide:info'
 ---
 
+## Motivations
+
+**shadcn-docs-nuxt** is created as an free alternative documentation solution to [Docus](https://docus.dev/) and [Nuxt UI Pro Docs](https://docs-template.nuxt.dev/).
+
+As docus is [discontinued](https://github.com/nuxt-themes/docus/issues/1016), I wanted a new docs solution. Vitepress is nice but I love nuxt content's easy customizability. The Nuxt team did an incredible job building the Nuxt UI Pro Docs template, but $249 is a lot for independent developers. So I made this in about a week.
+
 ## Features
 
-- Fully open source.
+- Free and [open source](https://github.com/ZTL-UwU/shadcn-docs-nuxt).
+- Fully [customizable](http://localhost:3000/api/configuration).
+- Rich [components](http://localhost:3000/getting-started/writing/components) to work with.
+- Mobile support.
+- 🚧 Component compatibility with `Docus`, `Nuxt UI Pro Docs`, `undocs`.
 
 ## Credits
 
@@ -15,3 +25,7 @@ icon: 'lucide:info'
 - [shadcn-vue](https://www.shadcn-vue.com/): For the vue port of shadcn-ui & some docs component source.
 - [Docus](https://docus.dev/): For inspiration & some docs component source.
 - [Nuxt UI Pro Docs](https://docs-template.nuxt.dev/): For inspiration.
+
+## License
+
+[MIT](https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/LICENSE)
diff --git a/content/1.getting-started/2.installation.md b/content/1.getting-started/2.installation.md
index 7a6f73ac..04c24fff 100644
--- a/content/1.getting-started/2.installation.md
+++ b/content/1.getting-started/2.installation.md
@@ -4,4 +4,354 @@ description: How to install shadcn-docs-nuxt in your app.
 icon: 'lucide:play'
 ---
 
-TODO
+## Using the starter template
+
+### Get Starter Template
+
+::code-group
+  ```bash [npm]
+  npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+  ```
+  ```bash [pnpm]
+  pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+  ```
+  ```bash [bun]
+  bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+  ```
+::
+
+::alert
+Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
+::
+
+### Install Dependencies
+
+::code-group
+  ```bash [npm]
+  npm install
+  ```
+  ```bash [pnpm]
+  pnpm install
+  ```
+  ```bash [bun]
+  bun install
+  ```
+  ```bash [yarn]
+  yarn install
+  ```
+::
+
+### Development Server
+
+::code-group
+  ```bash [npm]
+  npm run dev -- -o
+  ```
+  ```bash [pnpm]
+  pnpm dev -o
+  ```
+  ```bash [bun]
+  bun run dev -o
+  ```
+  ```bash [yarn]
+  yarn dev --open
+  ```
+::
+
+::alert{type="success" icon="lucide:circle-check"}
+Well done! A browser window should automatically open for http://localhost:3000.
+::
+
+## Add to an existing project
+
+### Install `shadcn-docs-nuxt`
+
+::code-group
+  ```bash [npm]
+  npm install shadcn-docs-nuxt
+  ```
+  ```bash [pnpm]
+  pnpm add shadcn-docs-nuxt
+  ```
+  ```bash [bun]
+  bun add shadcn-docs-nuxt
+  ```
+  ```bash [yarn]
+  yarn add shadcn-docs-nuxt
+  ```
+::
+
+### Add tailwind config
+
+Create `tailwind.config.ts` in the root folder.
+
+```ts [tailwind.config.ts]
+import type { Config } from 'tailwindcss';
+import animate from 'tailwindcss-animate';
+
+export default {
+  darkMode: 'selector',
+  safelist: ['dark'],
+  prefix: '',
+  content: [],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        xl: 'calc(var(--radius) + 4px)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
+      },
+    },
+  },
+
+  plugins: [animate],
+} satisfies Config;
+```
+
+Create `tailwind.css` in `assets/css`.
+
+```css [assets/css/tailwind.css]
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+### Create config
+
+Create `app.config.ts` in the root folder and override the config using the [Function Merger](https://github.com/unjs/defu#function-merger).
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  shadcnDocs: () => ({
+    site: {
+      name: 'shadcn-docs-nuxt'
+    },
+    header: {
+      title: 'shadcn-docs-starter',
+      showTitle: true,
+      darkModeToggle: true,
+      logo: {
+        light: '/logo.svg',
+        dark: '/logo-dark.svg',
+      },
+      nav: [],
+      links: [{
+        icon: 'lucide:github',
+        to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
+        target: '_blank',
+      }],
+    },
+    aside: {
+      useLevel: true,
+      collapse: false,
+    },
+    main: {
+      breadCrumb: true,
+      showTitle: true,
+      codeIcon: defaultCodeIcon,
+    },
+    footer: {
+      credits: 'Copyright © 2024',
+      links: [{
+        icon: 'lucide:github',
+        to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
+        target: '_blank',
+      }],
+    },
+    toc: {
+      enable: true,
+      title: 'On This Page',
+    },
+    search: {
+      enable: true,
+      inAside: false,
+    }
+  })
+});
+
+const defaultCodeIcon = {
+  'package.json': 'vscode-icons:file-type-node',
+  'tsconfig.json': 'vscode-icons:file-type-tsconfig',
+  '.npmrc': 'vscode-icons:file-type-npm',
+  '.editorconfig': 'vscode-icons:file-type-editorconfig',
+  '.eslintrc': 'vscode-icons:file-type-eslint',
+  '.eslintrc.cjs': 'vscode-icons:file-type-eslint',
+  '.eslintignore': 'vscode-icons:file-type-eslint',
+  'eslint.config.js': 'vscode-icons:file-type-eslint',
+  'eslint.config.mjs': 'vscode-icons:file-type-eslint',
+  'eslint.config.cjs': 'vscode-icons:file-type-eslint',
+  '.gitignore': 'vscode-icons:file-type-git',
+  'yarn.lock': 'vscode-icons:file-type-yarn',
+  '.env': 'vscode-icons:file-type-dotenv',
+  '.env.example': 'vscode-icons:file-type-dotenv',
+  '.vscode/settings.json': 'vscode-icons:file-type-vscode',
+  'nuxt': 'vscode-icons:file-type-nuxt',
+  '.nuxtrc': 'vscode-icons:file-type-nuxt',
+  '.nuxtignore': 'vscode-icons:file-type-nuxt',
+  'nuxt.config.js': 'vscode-icons:file-type-nuxt',
+  'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
+  'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
+  'tailwind.config.js': 'vscode-icons:file-type-tailwind',
+  'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
+  'vue': 'vscode-icons:file-type-vue',
+  'ts': 'vscode-icons:file-type-typescript',
+  'tsx': 'vscode-icons:file-type-typescript',
+  'mjs': 'vscode-icons:file-type-js',
+  'cjs': 'vscode-icons:file-type-js',
+  'js': 'vscode-icons:file-type-js',
+  'jsx': 'vscode-icons:file-type-js',
+  'md': 'vscode-icons:file-type-markdown',
+  'py': 'vscode-icons:file-type-python',
+  'npm': 'vscode-icons:file-type-npm',
+  'pnpm': 'vscode-icons:file-type-pnpm',
+  'npx': 'vscode-icons:file-type-npm',
+  'yarn': 'vscode-icons:file-type-yarn',
+  'bun': 'vscode-icons:file-type-bun',
+  'yml': 'vscode-icons:file-type-yaml',
+  'json': 'vscode-icons:file-type-json',
+  'terminal': 'lucide:terminal',
+};
+```
diff --git a/content/2.api/2.themes.md b/content/2.api/2.themes.md
new file mode 100644
index 00000000..9ce52fa7
--- /dev/null
+++ b/content/2.api/2.themes.md
@@ -0,0 +1,39 @@
+---
+title: Themes
+icon: 'lucide:palette'
+description: Add colors. Make it yours.
+---
+
+Pick a theme from the [shadcn-vue website](https://www.shadcn-vue.com/themes.html).
+
+Copy the code and put them into `assets/css/tailwind.css` by replacing the `@layer base` part.
+
+```css[assets/css/tailwind.css]{5-13}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    <xxx>
+  }
+
+  .dark {
+    <xxx>
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+::alert{type="success" icon="lucide:circle-check"}
+That's it, enjoy your theme!
+::
diff --git a/content/2.api/2.composables.md b/content/2.api/3.composables.md
similarity index 100%
rename from content/2.api/2.composables.md
rename to content/2.api/3.composables.md