From 196c1daeed31498ff0eef3022c05ba89a7ef85d0 Mon Sep 17 00:00:00 2001
From: Alexis Guzman <codingcodax@gmail.com>
Date: Fri, 16 Aug 2024 18:24:21 -0600
Subject: [PATCH] feat(content): add steps to installation sections

---
 apps/www/content/docs/ui/accordion.mdx       |  77 +++++--
 apps/www/content/docs/ui/alert-dialog.mdx    |  47 +++--
 apps/www/content/docs/ui/alert.mdx           |  59 ++++--
 apps/www/content/docs/ui/aspect-ratio.mdx    |  47 +++--
 apps/www/content/docs/ui/avatar.mdx          |  66 ++++--
 apps/www/content/docs/ui/badge.mdx           |  47 ++++-
 apps/www/content/docs/ui/breadcrumb.mdx      |  34 ++-
 apps/www/content/docs/ui/button.mdx          |  77 ++++++-
 apps/www/content/docs/ui/card.mdx            |  34 ++-
 apps/www/content/docs/ui/carousel.mdx        |  47 +++--
 apps/www/content/docs/ui/checkbox.mdx        |  66 ++++--
 apps/www/content/docs/ui/collapsible.mdx     |  47 +++--
 apps/www/content/docs/ui/command.mdx         |  52 +++--
 apps/www/content/docs/ui/context-menu.mdx    |  47 +++--
 apps/www/content/docs/ui/dialog.mdx          |  47 +++--
 apps/www/content/docs/ui/drawer.mdx          |  47 +++--
 apps/www/content/docs/ui/dropdown-menu.mdx   |  47 +++--
 apps/www/content/docs/ui/form.mdx            |  13 +-
 apps/www/content/docs/ui/hover-card.mdx      |  47 +++--
 apps/www/content/docs/ui/input-otp.mdx       |  78 ++++---
 apps/www/content/docs/ui/input.mdx           |  34 ++-
 apps/www/content/docs/ui/installation.mdx    | 206 +++++++++----------
 apps/www/content/docs/ui/label.mdx           |  47 +++--
 apps/www/content/docs/ui/menubar.mdx         |  47 +++--
 apps/www/content/docs/ui/navigation-menu.mdx |  47 +++--
 apps/www/content/docs/ui/pagination.mdx      |  34 ++-
 apps/www/content/docs/ui/popover.mdx         |  47 +++--
 apps/www/content/docs/ui/progress.mdx        |  47 +++--
 apps/www/content/docs/ui/radio-group.mdx     |  47 +++--
 apps/www/content/docs/ui/resizable.mdx       |  47 +++--
 apps/www/content/docs/ui/scroll-area.mdx     |  47 +++--
 apps/www/content/docs/ui/select.mdx          |  47 +++--
 apps/www/content/docs/ui/separator.mdx       |  47 +++--
 apps/www/content/docs/ui/sheet.mdx           |  47 +++--
 apps/www/content/docs/ui/skeleton.mdx        |  34 ++-
 apps/www/content/docs/ui/slider.mdx          |  47 +++--
 apps/www/content/docs/ui/sonner.mdx          |  82 +++++---
 apps/www/content/docs/ui/switch.mdx          |  60 ++++--
 apps/www/content/docs/ui/table.mdx           |  34 ++-
 apps/www/content/docs/ui/tabs.mdx            |  47 +++--
 apps/www/content/docs/ui/textarea.mdx        |  34 ++-
 apps/www/content/docs/ui/toast.mdx           |  95 ++++++---
 apps/www/content/docs/ui/toggle-group.mdx    |  66 ++++--
 apps/www/content/docs/ui/toggle.mdx          |  66 ++++--
 apps/www/content/docs/ui/tooltip.mdx         |  47 +++--
 45 files changed, 1785 insertions(+), 644 deletions(-)

diff --git a/apps/www/content/docs/ui/accordion.mdx b/apps/www/content/docs/ui/accordion.mdx
index fcc4ac9c..4f498c7e 100644
--- a/apps/www/content/docs/ui/accordion.mdx
+++ b/apps/www/content/docs/ui/accordion.mdx
@@ -17,22 +17,75 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
+  <Step>
+    ### Install the primitive
 
-```package-install
-@radix-ui/react-accordion
-```
+    Install the `@radix-ui/react-accordion` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-accordion
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/accordion.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+
+  <Step>
+    ### Copy-paste the component
+
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/accordion.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+  <Step>
+    ### Add keyframes animation
+    
+    Add the `accordion-down` and `accordion-up` keyframes animation to your Tailwind CSS config.
+
+    ```ts title="tailwind.config.ts"
+    import type { Config } from 'tailwindcss';
+
+    const config: Config = {
+      // ...,
+      keyframes: {
+        // [!code highlight:9]
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        // [!code highlight:3]
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      }
+    };
+    ```
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/alert-dialog.mdx b/apps/www/content/docs/ui/alert-dialog.mdx
index 9b5e2c10..a9b2d8a3 100644
--- a/apps/www/content/docs/ui/alert-dialog.mdx
+++ b/apps/www/content/docs/ui/alert-dialog.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-alert-dialog
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-alert-dialog` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-alert-dialog
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/alert-dialog.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/alert-dialog.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/alert.mdx b/apps/www/content/docs/ui/alert.mdx
index bb75f019..cb596e2d 100644
--- a/apps/www/content/docs/ui/alert.mdx
+++ b/apps/www/content/docs/ui/alert.mdx
@@ -14,18 +14,34 @@ description: Displays a callout for user attention.
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[500px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+    
+    <div className='not-prose [&_figure]:max-h-[500px] [&_figure]:overflow-y-auto'>
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/alert.tsx",
-  "codeblock": true
-}
-```
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/alert.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
 
-</div>
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -43,9 +59,24 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 </Alert>
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    intent: {
+      default: 'default',
+      description: 'The visual style of the alert',
+      type: 'enum',
+      typeDescription: "'default' | 'info' | 'success' | 'warning' | 'error'",
+    },
+  }}
+/>
+
 ## Examples
 
-### Default
+### Intents
+
+#### Default
 
 <ComponentPreview name='alert'>
 ```json doc-gen:file
@@ -56,7 +87,7 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 ```
 </ComponentPreview>
 
-### Info
+#### Info
 
 <ComponentPreview name='alert-info'>
 ```json doc-gen:file
@@ -67,7 +98,7 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 ```
 </ComponentPreview>
 
-### Success
+#### Success
 
 <ComponentPreview name='alert-success'>
 ```json doc-gen:file
@@ -78,7 +109,7 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 ```
 </ComponentPreview>
 
-### Warning
+#### Warning
 
 <ComponentPreview name='alert-warning'>
 ```json doc-gen:file
@@ -89,7 +120,7 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 ```
 </ComponentPreview>
 
-### Error
+#### Error
 
 <ComponentPreview name='alert-error'>
 ```json doc-gen:file
diff --git a/apps/www/content/docs/ui/aspect-ratio.mdx b/apps/www/content/docs/ui/aspect-ratio.mdx
index 2ab02796..af00e36f 100644
--- a/apps/www/content/docs/ui/aspect-ratio.mdx
+++ b/apps/www/content/docs/ui/aspect-ratio.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-aspect-ratio
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-aspect-ratio` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-aspect-ratio
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/aspect-ratio.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-</div>
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/aspect-ratio.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/avatar.mdx b/apps/www/content/docs/ui/avatar.mdx
index 74ef956e..b2360173 100644
--- a/apps/www/content/docs/ui/avatar.mdx
+++ b/apps/www/content/docs/ui/avatar.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-avatar
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-avatar` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-avatar
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/avatar.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/avatar.tsx",
+      "codeblock": true
+    }
+    ```
 
-</div>
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -47,6 +70,25 @@ import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
 </Avatar>
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    shape: {
+      default: 'round',
+      description: 'The shape of the avatar',
+      type: 'enum',
+      typeDescription: "'round' | 'square'",
+    },
+    size: {
+      default: 'medium',
+      description: 'The size of the avatar',
+      type: 'enum',
+      typeDescription: "'small' | 'medium' | 'large'",
+    },
+  }}
+/>
+
 ## Examples
 
 ### Shapes
diff --git a/apps/www/content/docs/ui/badge.mdx b/apps/www/content/docs/ui/badge.mdx
index ed14aebd..fc790778 100644
--- a/apps/www/content/docs/ui/badge.mdx
+++ b/apps/www/content/docs/ui/badge.mdx
@@ -14,18 +14,34 @@ description: Displays a badge or a component that looks like a badge.
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/badge.tsx",
-  "codeblock": true
-}
-```
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/badge.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
 
-</div>
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -37,6 +53,19 @@ import { Badge } from '~/components/ui/badge';
 <Badge intent='info'>Badge</Badge>
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    intent: {
+      default: 'default',
+      description: 'The visual style of the badge',
+      type: 'enum',
+      typeDescription: "'default' | 'info' | 'success' | 'warning' | 'error'",
+    },
+  }}
+/>
+
 ## Examples
 
 ### Intents
diff --git a/apps/www/content/docs/ui/breadcrumb.mdx b/apps/www/content/docs/ui/breadcrumb.mdx
index ac854ce9..3c2b3b64 100644
--- a/apps/www/content/docs/ui/breadcrumb.mdx
+++ b/apps/www/content/docs/ui/breadcrumb.mdx
@@ -14,18 +14,34 @@ description: Displays the path to the current resource using a hierarchy of link
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/breadcrumb.tsx",
-  "codeblock": true
-}
-```
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/breadcrumb.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/button.mdx b/apps/www/content/docs/ui/button.mdx
index 273efcd1..5b690c36 100644
--- a/apps/www/content/docs/ui/button.mdx
+++ b/apps/www/content/docs/ui/button.mdx
@@ -14,29 +14,86 @@ description: Displays a button or a component that looks like a button.
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-slot` package.
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/button.tsx",
-  "codeblock": true
-}
-```
+    ```package-install
+    @radix-ui/react-slot
+    ```
+
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
 
-</div>
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/button.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
 ```ts
-import { Button } from '@/components/ui/button';
+import { Button } from '~/components/ui/button';
 ```
 
 ```tsx
 <Button variant='outline'>Button</Button>
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    variant: {
+      default: 'solid',
+      description: 'The visual style of the button',
+      type: 'enum',
+      typeDescription: "'solid' | 'soft' | 'outline' | 'ghost'",
+    },
+    intent: {
+      default: 'default',
+      description: 'The intent of the button',
+      type: 'enum',
+      typeDescription: "'default' | 'error'",
+    },
+    size: {
+      default: 'medium',
+      description: 'The size of the button',
+      type: 'enum',
+      typeDescription: "'small' | 'medium' | 'large'",
+    },
+    icon: {
+      default: 'false',
+      description: 'If true, adjusts the button size for icon-only usage',
+      type: 'boolean',
+    },
+  }}
+/>
+
 ## Link
 
 You can use the `buttonStyles` helper to create a link that looks like a button.
diff --git a/apps/www/content/docs/ui/card.mdx b/apps/www/content/docs/ui/card.mdx
index 5f7a73fc..bd1f7349 100644
--- a/apps/www/content/docs/ui/card.mdx
+++ b/apps/www/content/docs/ui/card.mdx
@@ -14,18 +14,34 @@ description: Displays a card with header, content, and footer.
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/card.tsx",
-  "codeblock": true
-}
-```
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/card.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/carousel.mdx b/apps/www/content/docs/ui/carousel.mdx
index 08bcc8d2..d06f01d7 100644
--- a/apps/www/content/docs/ui/carousel.mdx
+++ b/apps/www/content/docs/ui/carousel.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
+
+  <Step>
+    ### Install the primitive
+    
+    Install the `embla-carousel-react` package.
+
+    ```package-install
+    embla-carousel-react
+    ```
+
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/carousel.tsx",
+      "codeblock": true
+    }
+    ```
 
-```package-install
-embla-carousel-react
-```
+    </div>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  </Step>
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/carousel.tsx",
-  "codeblock": true
-}
-```
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/checkbox.mdx b/apps/www/content/docs/ui/checkbox.mdx
index 84a99881..4c3e70ae 100644
--- a/apps/www/content/docs/ui/checkbox.mdx
+++ b/apps/www/content/docs/ui/checkbox.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-checkbox
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-checkbox` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-checkbox
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/checkbox.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
 
-</div>
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/checkbox.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -44,6 +67,25 @@ import { Checkbox } from '~/components/ui/checkbox';
 <Checkbox />
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    shape: {
+      default: 'square',
+      description: 'The shape of the checkbox',
+      type: 'enum',
+      typeDescription: "'square' | 'round'",
+    },
+    size: {
+      default: 'small',
+      description: 'The size of the checkbox',
+      type: 'enum',
+      typeDescription: "'small' | 'medium'",
+    },
+  }}
+/>
+
 ### Examples
 
 #### With caption
diff --git a/apps/www/content/docs/ui/collapsible.mdx b/apps/www/content/docs/ui/collapsible.mdx
index 7ee90e09..f3af79dc 100644
--- a/apps/www/content/docs/ui/collapsible.mdx
+++ b/apps/www/content/docs/ui/collapsible.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-collapsible
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-collapsible` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-collapsible
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/collapsible.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/collapsible.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/command.mdx b/apps/www/content/docs/ui/command.mdx
index 85ff84ef..0e693e1d 100644
--- a/apps/www/content/docs/ui/command.mdx
+++ b/apps/www/content/docs/ui/command.mdx
@@ -20,22 +20,45 @@ The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-cmdk
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `cmdk` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    cmdk
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/command.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/command.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
@@ -90,7 +113,7 @@ To show the command menu in a dialog, use the `<CommandDialog />` component.
 
 ```tsx
 export const CommandMenu = () => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false); // [!code highlight]
 
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
@@ -105,9 +128,8 @@ export const CommandMenu = () => {
   }, []);
 
   return (
+    // [!code highlight:2]
     <CommandDialog open={open} onOpenChange={setOpen}>
-      {' '}
-      // [!code highlight]
       <CommandInput placeholder='Type a command or search...' />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
diff --git a/apps/www/content/docs/ui/context-menu.mdx b/apps/www/content/docs/ui/context-menu.mdx
index e79fcea5..afa39344 100644
--- a/apps/www/content/docs/ui/context-menu.mdx
+++ b/apps/www/content/docs/ui/context-menu.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-context-menu
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-context-menu` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-context-menu
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/context-menu.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/context-menu.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/dialog.mdx b/apps/www/content/docs/ui/dialog.mdx
index b1cb187c..3e0fcb06 100644
--- a/apps/www/content/docs/ui/dialog.mdx
+++ b/apps/www/content/docs/ui/dialog.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-dialog
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-dialog` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-dialog
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/dialog.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/dialog.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/drawer.mdx b/apps/www/content/docs/ui/drawer.mdx
index dfbcd5ef..b71f5ec7 100644
--- a/apps/www/content/docs/ui/drawer.mdx
+++ b/apps/www/content/docs/ui/drawer.mdx
@@ -16,22 +16,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-vaul
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `vaul` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    vaul
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/drawer.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/drawer.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/dropdown-menu.mdx b/apps/www/content/docs/ui/dropdown-menu.mdx
index 0d878b6c..09cd050a 100644
--- a/apps/www/content/docs/ui/dropdown-menu.mdx
+++ b/apps/www/content/docs/ui/dropdown-menu.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-dropdown-menu
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-dropdown-menu` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-dropdown-menu
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/dropdown-menu.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/dropdown-menu.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/form.mdx b/apps/www/content/docs/ui/form.mdx
index 2f8b162f..aafbe294 100644
--- a/apps/www/content/docs/ui/form.mdx
+++ b/apps/www/content/docs/ui/form.mdx
@@ -77,7 +77,9 @@ const form = useForm()
 
 <Steps>
   <Step>
-    ### Install the following dependencies:
+    ### Install the dependencies
+    
+    Install the `@radix-ui/react-label`, `@radix-ui/react-slot`, `react-hook-form`, `@hookform/resolvers`, and `zod` packages.
 
     ```package-install
     @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform/resolvers zod
@@ -86,7 +88,9 @@ const form = useForm()
   </Step>
 
   <Step>
-    ### Copy-paste the following code in a `.tsx` file:
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
     <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
 
@@ -102,7 +106,10 @@ const form = useForm()
   </Step>
 
   <Step>
-    ### Update the import paths to match your project setup.
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
   </Step>
 </Steps>
 
diff --git a/apps/www/content/docs/ui/hover-card.mdx b/apps/www/content/docs/ui/hover-card.mdx
index 9133e3c9..8f4fd9fc 100644
--- a/apps/www/content/docs/ui/hover-card.mdx
+++ b/apps/www/content/docs/ui/hover-card.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-hover-card
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-hover-card` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-hover-card
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/hover-card.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/hover-card.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/input-otp.mdx b/apps/www/content/docs/ui/input-otp.mdx
index ed4c8acd..b8ef713a 100644
--- a/apps/www/content/docs/ui/input-otp.mdx
+++ b/apps/www/content/docs/ui/input-otp.mdx
@@ -20,22 +20,45 @@ Input OTP is built on top of [`input-otp`](https://github.com/guilhermerodz/inpu
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-input-otp
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `input-otp` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    input-otp
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/input-otp.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
 
-</div>
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/input-otp.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -49,19 +72,24 @@ import {
 ```
 
 ```tsx
-<InputOTP maxLength={6}>
-  <InputOTPGroup>
-    <InputOTPSlot index={0} />
-    <InputOTPSlot index={1} />
-    <InputOTPSlot index={2} />
-  </InputOTPGroup>
-  <InputOTPSeparator />
-  <InputOTPGroup>
-    <InputOTPSlot index={3} />
-    <InputOTPSlot index={4} />
-    <InputOTPSlot index={5} />
-  </InputOTPGroup>
-</InputOTP>
+<InputOTP
+  maxLength={6}
+  render={({ slots }) => (
+    <>
+      <InputOTPGroup>
+        {slots.slice(0, 3).map((slot, index) => (
+          <InputOTPSlot key={index} {...slot} />
+        ))}
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        {slots.slice(3).map((slot, index) => (
+          <InputOTPSlot key={index + 3} {...slot} />
+        ))}
+      </InputOTPGroup>
+    </>
+  )}
+/>
 ```
 
 ## Examples
diff --git a/apps/www/content/docs/ui/input.mdx b/apps/www/content/docs/ui/input.mdx
index 05d1a836..c8a35187 100644
--- a/apps/www/content/docs/ui/input.mdx
+++ b/apps/www/content/docs/ui/input.mdx
@@ -14,18 +14,34 @@ description: Displays a form input field or a component that looks like an input
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/input.tsx",
-  "codeblock": true
-}
-```
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/input.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/installation.mdx b/apps/www/content/docs/ui/installation.mdx
index d0080b70..bc8ced11 100644
--- a/apps/www/content/docs/ui/installation.mdx
+++ b/apps/www/content/docs/ui/installation.mdx
@@ -69,10 +69,10 @@ description: How to set up Kõsori UI in your Next.js project.
     Set `darkMode` strategy to `class` in your Tailwind CSS config file.
     
     ```ts title="tailwind.config.ts"
-    import type { Config } from "tailwindcss";
+    import type { Config } from 'tailwindcss';
 
     const config: Config = {
-      darkMode: "class",  // [!code highlight]
+      darkMode: 'class',  // [!code highlight]
       // ...
     };
     ```
@@ -86,12 +86,12 @@ description: How to set up Kõsori UI in your Next.js project.
     
     <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
     ```ts title="tailwind.config.ts"
-    import type { Config } from "tailwindcss";
+    import type { Config } from 'tailwindcss';
 
     const config: Config = {
-      darkMode: "class",
+      darkMode: 'class',
       content: [
-        "...",
+        '...',
       ],
       theme: {
         // ...
@@ -99,95 +99,95 @@ description: How to set up Kõsori UI in your Next.js project.
           // ...
           // [!code highlight:15]
           colors: {
-            "primary-base": "hsl(var(--primary-1))",
-            "primary-bg-subtle": "hsl(var(--primary-2))",
-            "primary-bg": "hsl(var(--primary-3))",
-            "primary-bg-hover": "hsl(var(--primary-4))",
-            "primary-bg-active": "hsl(var(--primary-5))",
-            "primary-line": "hsl(var(--primary-6))",
-            "primary-border": "hsl(var(--primary-7))",
-            "primary-border-hover": "hsl(var(--primary-8))",
-            "primary-focus-ring": "hsl(var(--primary-8))",
-            "primary-solid": "hsl(var(--primary-9))",
-            "primary-solid-hover": "hsl(var(--primary-10))",
-            "primary-text": "hsl(var(--primary-11))",
-            "primary-text-contrast": "hsl(var(--primary-12))",
+            'primary-base': 'hsl(var(--primary-1))',
+            'primary-bg-subtle': 'hsl(var(--primary-2))',
+            'primary-bg': 'hsl(var(--primary-3))',
+            'primary-bg-hover': 'hsl(var(--primary-4))',
+            'primary-bg-active': 'hsl(var(--primary-5))',
+            'primary-line': 'hsl(var(--primary-6))',
+            'primary-border': 'hsl(var(--primary-7))',
+            'primary-border-hover': 'hsl(var(--primary-8))',
+            'primary-focus-ring': 'hsl(var(--primary-8))',
+            'primary-solid': 'hsl(var(--primary-9))',
+            'primary-solid-hover': 'hsl(var(--primary-10))',
+            'primary-text': 'hsl(var(--primary-11))',
+            'primary-text-contrast': 'hsl(var(--primary-12))',
 
             // [!code highlight:14]
-            "success-base": "hsl(var(--success-1))",
-            "success-bg-subtle": "hsl(var(--success-2))",
-            "success-bg": "hsl(var(--success-3))",
-            "success-bg-hover": "hsl(var(--success-4))",
-            "success-bg-active": "hsl(var(--success-5))",
-            "success-line": "hsl(var(--success-6))",
-            "success-border": "hsl(var(--success-7))",
-            "success-border-hover": "hsl(var(--success-8))",
-            "success-focus-ring": "hsl(var(--success-8))",
-            "success-solid": "hsl(var(--success-9))",
-            "success-solid-hover": "hsl(var(--success-10))",
-            "success-text": "hsl(var(--success-11))",
-            "success-text-contrast": "hsl(var(--success-12))",
+            'success-base': 'hsl(var(--success-1))',
+            'success-bg-subtle': 'hsl(var(--success-2))',
+            'success-bg': 'hsl(var(--success-3))',
+            'success-bg-hover': 'hsl(var(--success-4))',
+            'success-bg-active': 'hsl(var(--success-5))',
+            'success-line': 'hsl(var(--success-6))',
+            'success-border': 'hsl(var(--success-7))',
+            'success-border-hover': 'hsl(var(--success-8))',
+            'success-focus-ring': 'hsl(var(--success-8))',
+            'success-solid': 'hsl(var(--success-9))',
+            'success-solid-hover': 'hsl(var(--success-10))',
+            'success-text': 'hsl(var(--success-11))',
+            'success-text-contrast': 'hsl(var(--success-12))',
 
             // [!code highlight:14]
-            "warning-base": "hsl(var(--warning-1))",
-            "warning-bg-subtle": "hsl(var(--warning-2))",
-            "warning-bg": "hsl(var(--warning-3))",
-            "warning-bg-hover": "hsl(var(--warning-4))",
-            "warning-bg-active": "hsl(var(--warning-5))",
-            "warning-line": "hsl(var(--warning-6))",
-            "warning-border": "hsl(var(--warning-7))",
-            "warning-border-hover": "hsl(var(--warning-8))",
-            "warning-focus-ring": "hsl(var(--warning-8))",
-            "warning-solid": "hsl(var(--warning-9))",
-            "warning-solid-hover": "hsl(var(--warning-10))",
-            "warning-text": "hsl(var(--warning-11))",
-            "warning-text-contrast": "hsl(var(--warning-12))",
+            'warning-base': 'hsl(var(--warning-1))',
+            'warning-bg-subtle': 'hsl(var(--warning-2))',
+            'warning-bg': 'hsl(var(--warning-3))',
+            'warning-bg-hover': 'hsl(var(--warning-4))',
+            'warning-bg-active': 'hsl(var(--warning-5))',
+            'warning-line': 'hsl(var(--warning-6))',
+            'warning-border': 'hsl(var(--warning-7))',
+            'warning-border-hover': 'hsl(var(--warning-8))',
+            'warning-focus-ring': 'hsl(var(--warning-8))',
+            'warning-solid': 'hsl(var(--warning-9))',
+            'warning-solid-hover': 'hsl(var(--warning-10))',
+            'warning-text': 'hsl(var(--warning-11))',
+            'warning-text-contrast': 'hsl(var(--warning-12))',
 
             // [!code highlight:14]
-            "error-base": "hsl(var(--danger-1))",
-            "error-bg-subtle": "hsl(var(--danger-2))",
-            "error-bg": "hsl(var(--danger-3))",
-            "error-bg-hover": "hsl(var(--danger-4))",
-            "error-bg-active": "hsl(var(--danger-5))",
-            "error-line": "hsl(var(--danger-6))",
-            "error-border": "hsl(var(--danger-7))",
-            "error-border-hover": "hsl(var(--danger-8))",
-            "error-focus-ring": "hsl(var(--danger-8))",
-            "error-solid": "hsl(var(--danger-9))",
-            "error-solid-hover": "hsl(var(--danger-10))",
-            "error-text": "hsl(var(--danger-11))",
-            "error-text-contrast": "hsl(var(--danger-12))",
+            'error-base': 'hsl(var(--danger-1))',
+            'error-bg-subtle': 'hsl(var(--danger-2))',
+            'error-bg': 'hsl(var(--danger-3))',
+            'error-bg-hover': 'hsl(var(--danger-4))',
+            'error-bg-active': 'hsl(var(--danger-5))',
+            'error-line': 'hsl(var(--danger-6))',
+            'error-border': 'hsl(var(--danger-7))',
+            'error-border-hover': 'hsl(var(--danger-8))',
+            'error-focus-ring': 'hsl(var(--danger-8))',
+            'error-solid': 'hsl(var(--danger-9))',
+            'error-solid-hover': 'hsl(var(--danger-10))',
+            'error-text': 'hsl(var(--danger-11))',
+            'error-text-contrast': 'hsl(var(--danger-12))',
 
             // [!code highlight:14]
-            "info-base": "hsl(var(--info-1))",
-            "info-bg-subtle": "hsl(var(--info-2))",
-            "info-bg": "hsl(var(--info-3))",
-            "info-bg-hover": "hsl(var(--info-4))",
-            "info-bg-active": "hsl(var(--info-5))",
-            "info-line": "hsl(var(--info-6))",
-            "info-border": "hsl(var(--info-7))",
-            "info-border-hover": "hsl(var(--info-8))",
-            "info-focus-ring": "hsl(var(--info-8))",
-            "info-solid": "hsl(var(--info-9))",
-            "info-solid-hover": "hsl(var(--info-10))",
-            "info-text": "hsl(var(--info-11))",
-            "info-text-contrast": "hsl(var(--info-12))",
+            'info-base': 'hsl(var(--info-1))',
+            'info-bg-subtle': 'hsl(var(--info-2))',
+            'info-bg': 'hsl(var(--info-3))',
+            'info-bg-hover': 'hsl(var(--info-4))',
+            'info-bg-active': 'hsl(var(--info-5))',
+            'info-line': 'hsl(var(--info-6))',
+            'info-border': 'hsl(var(--info-7))',
+            'info-border-hover': 'hsl(var(--info-8))',
+            'info-focus-ring': 'hsl(var(--info-8))',
+            'info-solid': 'hsl(var(--info-9))',
+            'info-solid-hover': 'hsl(var(--info-10))',
+            'info-text': 'hsl(var(--info-11))',
+            'info-text-contrast': 'hsl(var(--info-12))',
 
             // [!code highlight:15]
-            "grey-base": "hsl(var(--grey-1))",
-            "grey-bg-subtle": "hsl(var(--grey-2))",
-            "grey-bg": "hsl(var(--grey-3))",
-            "grey-bg-hover": "hsl(var(--grey-4))",
-            "grey-bg-active": "hsl(var(--grey-5))",
-            "grey-line": "hsl(var(--grey-6))",
-            "grey-border": "hsl(var(--grey-7))",
-            "grey-border-hover": "hsl(var(--grey-8))",
-            "grey-focus-ring": "hsl(var(--grey-8))",
-            "grey-solid": "hsl(var(--grey-9))",
-            "grey-placeholder-text": "hsl(var(--grey-9))",
-            "grey-solid-hover": "hsl(var(--grey-10))",
-            "grey-text": "hsl(var(--grey-11))",
-            "grey-text-contrast": "hsl(var(--grey-12))",
+            'grey-base': 'hsl(var(--grey-1))',
+            'grey-bg-subtle': 'hsl(var(--grey-2))',
+            'grey-bg': 'hsl(var(--grey-3))',
+            'grey-bg-hover': 'hsl(var(--grey-4))',
+            'grey-bg-active': 'hsl(var(--grey-5))',
+            'grey-line': 'hsl(var(--grey-6))',
+            'grey-border': 'hsl(var(--grey-7))',
+            'grey-border-hover': 'hsl(var(--grey-8))',
+            'grey-focus-ring': 'hsl(var(--grey-8))',
+            'grey-solid': 'hsl(var(--grey-9))',
+            'grey-placeholder-text': 'hsl(var(--grey-9))',
+            'grey-solid-hover': 'hsl(var(--grey-10))',
+            'grey-text': 'hsl(var(--grey-11))',
+            'grey-text-contrast': 'hsl(var(--grey-12))',
           },
         },
       },
@@ -207,9 +207,9 @@ description: How to set up Kõsori UI in your Next.js project.
 
     ```ts title="tailwind.config.ts"
     const config: Config = {
-      darkMode: "class",
+      darkMode: 'class',
       content: [
-        "...",
+        '...',
       ],
       theme: {
         // ...
@@ -217,23 +217,23 @@ description: How to set up Kõsori UI in your Next.js project.
           // ...
           // [!code highlight:20]
           keyframes: {
-            "accordion-down": {
-              from: { height: "0" },
-              to: { height: "var(--radix-accordion-content-height)" },
+            'accordion-down': {
+              from: { height: '0' },
+              to: { height: 'var(--radix-accordion-content-height)' },
             },
-            "accordion-up": {
-              from: { height: "var(--radix-accordion-content-height)" },
-              to: { height: "0" },
+            'accordion-up': {
+              from: { height: 'var(--radix-accordion-content-height)' },
+              to: { height: '0' },
             },
-            "caret-blink": {
-              "0%,70%,100%": { opacity: "1" },
-              "20%,50%": { opacity: "0" },
+            'caret-blink': {
+              '0%,70%,100%': { opacity: '1' },
+              '20%,50%': { opacity: '0' },
             },
           },
           animation: {
-            "accordion-down": "accordion-down 0.2s ease-out",
-            "accordion-up": "accordion-up 0.2s ease-out",
-            "caret-blink": "caret-blink 1.25s ease-out infinite",
+            'accordion-down': 'accordion-down 0.2s ease-out',
+            'accordion-up': 'accordion-up 0.2s ease-out',
+            'caret-blink': 'caret-blink 1.25s ease-out infinite',
           },
         },
       },
@@ -248,8 +248,8 @@ description: How to set up Kõsori UI in your Next.js project.
     Add the `tailwindcss-animate` plugin to your Tailwind CSS config.
 
     ```ts title="tailwind.config.ts"
-    import type { Config } from "tailwindcss";
-    import animate from "tailwindcss-animate"; // [!code highlight]
+    import type { Config } from 'tailwindcss';
+    import animate from 'tailwindcss-animate'; // [!code highlight]
 
     const config: Config = {
       // ...,
@@ -478,9 +478,9 @@ description: How to set up Kõsori UI in your Next.js project.
     Create the `cn()` utility function.
 
     ```ts title="app/utils/cn.ts"
-    import type { ClassValue } from "clsx";
-    import { clsx } from "clsx";
-    import { twMerge } from "tailwind-merge";
+    import type { ClassValue } from 'clsx';
+    import { clsx } from 'clsx';
+    import { twMerge } from 'tailwind-merge';
 
     export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
     ```
diff --git a/apps/www/content/docs/ui/label.mdx b/apps/www/content/docs/ui/label.mdx
index 01629af0..d6f80bd9 100644
--- a/apps/www/content/docs/ui/label.mdx
+++ b/apps/www/content/docs/ui/label.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-label
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-label` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-label
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/label.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/label.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/menubar.mdx b/apps/www/content/docs/ui/menubar.mdx
index a7213164..b28df98e 100644
--- a/apps/www/content/docs/ui/menubar.mdx
+++ b/apps/www/content/docs/ui/menubar.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-menubar
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-menubar` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-menubar
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/menubar.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/menubar.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/navigation-menu.mdx b/apps/www/content/docs/ui/navigation-menu.mdx
index e9720c50..2a6b72f8 100644
--- a/apps/www/content/docs/ui/navigation-menu.mdx
+++ b/apps/www/content/docs/ui/navigation-menu.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-navigation-menu
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-navigation-menu` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-navigation-menu
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/navigation-menu.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/navigation-menu.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/pagination.mdx b/apps/www/content/docs/ui/pagination.mdx
index 5d62829c..936fddaa 100644
--- a/apps/www/content/docs/ui/pagination.mdx
+++ b/apps/www/content/docs/ui/pagination.mdx
@@ -14,18 +14,34 @@ description: Pagination with page navigation, next and previous links.
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/pagination.tsx",
-  "codeblock": true
-}
-```
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/pagination.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/popover.mdx b/apps/www/content/docs/ui/popover.mdx
index 7253b5de..c2e3831e 100644
--- a/apps/www/content/docs/ui/popover.mdx
+++ b/apps/www/content/docs/ui/popover.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-popover
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-popover` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-popover
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/popover.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/popover.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/progress.mdx b/apps/www/content/docs/ui/progress.mdx
index 4d182db0..3ec21ede 100644
--- a/apps/www/content/docs/ui/progress.mdx
+++ b/apps/www/content/docs/ui/progress.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-progress
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-progress` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-progress
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/progress.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/progress.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/radio-group.mdx b/apps/www/content/docs/ui/radio-group.mdx
index 79756c89..13ff6f8d 100644
--- a/apps/www/content/docs/ui/radio-group.mdx
+++ b/apps/www/content/docs/ui/radio-group.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-radio-group
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-radio-group` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-radio-group
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/radio-group.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/radio-group.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/resizable.mdx b/apps/www/content/docs/ui/resizable.mdx
index af6eee2f..accc4e23 100644
--- a/apps/www/content/docs/ui/resizable.mdx
+++ b/apps/www/content/docs/ui/resizable.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-react-resizable-panels
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `react-resizable-panels` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    react-resizable-panels
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/resizable.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/resizable.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/scroll-area.mdx b/apps/www/content/docs/ui/scroll-area.mdx
index c4a1e03a..586232b4 100644
--- a/apps/www/content/docs/ui/scroll-area.mdx
+++ b/apps/www/content/docs/ui/scroll-area.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-scroll-area
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-scroll-area` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-scroll-area
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/scroll-area.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/scroll-area.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/select.mdx b/apps/www/content/docs/ui/select.mdx
index 61f71db4..956b781d 100644
--- a/apps/www/content/docs/ui/select.mdx
+++ b/apps/www/content/docs/ui/select.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-select
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-select` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-select
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/select.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/select.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/separator.mdx b/apps/www/content/docs/ui/separator.mdx
index fa18eeec..08cbbd44 100644
--- a/apps/www/content/docs/ui/separator.mdx
+++ b/apps/www/content/docs/ui/separator.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-separator
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-separator` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-separator
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/separator.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/separator.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/sheet.mdx b/apps/www/content/docs/ui/sheet.mdx
index 05a51b4c..e69693de 100644
--- a/apps/www/content/docs/ui/sheet.mdx
+++ b/apps/www/content/docs/ui/sheet.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-dialog
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-dialog` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-dialog
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/sheet.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/sheet.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/skeleton.mdx b/apps/www/content/docs/ui/skeleton.mdx
index fc25e80a..2af241e9 100644
--- a/apps/www/content/docs/ui/skeleton.mdx
+++ b/apps/www/content/docs/ui/skeleton.mdx
@@ -14,18 +14,34 @@ description: Use to show a placeholder while content is loading.
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/skeleton.tsx",
-  "codeblock": true
-}
-```
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/skeleton.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/slider.mdx b/apps/www/content/docs/ui/slider.mdx
index 8c8a3c26..38d7c9f0 100644
--- a/apps/www/content/docs/ui/slider.mdx
+++ b/apps/www/content/docs/ui/slider.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-slider
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-slider` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-slider
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/slider.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/slider.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/sonner.mdx b/apps/www/content/docs/ui/sonner.mdx
index bc5b9658..d010684a 100644
--- a/apps/www/content/docs/ui/sonner.mdx
+++ b/apps/www/content/docs/ui/sonner.mdx
@@ -20,40 +20,68 @@ Sonner is built and maintained by [@emilkowalski\_](https://x.com/emilkowalski_)
 
 ## Installation
 
-Install the following dependencies and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-sonner next-themes
-```
+  <Step>
+    ### Install the dependencies
+    
+    Install the `sonner` and `next-themes` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    sonner next-themes
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/sonner.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-</div>
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
 
-Add the `<Toaster />` component.
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/sonner.tsx",
+      "codeblock": true
+    }
+    ```
 
-```tsx title="app/layout.tsx"
-import { Toaster } from '~/components/ui/sonner'; // [!code highlight]
+    </div>
 
-export default const RootLayout = ({ children }) => {
-  return (
-    <html lang='en'>
-      <head />
-      <body>
-        <main>{children}</main>
-        <Toaster /> // [!code highlight]
-      </body>
-    </html>
-  );
-}
-```
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+  <Step>
+    ### Add Toaster component
+
+    Add the `<Toaster />` component to the root of your app.
+
+    ```tsx title="app/layout.tsx"
+    import { Toaster } from '~/components/ui/sonner'; // [!code highlight]
+
+    export default const RootLayout = ({ children }) => {
+      return (
+        <html lang='en'>
+          <head />
+          <body>
+            <main>{children}</main>
+            <Toaster /> // [!code highlight]
+          </body>
+        </html>
+      );
+    }
+    ```
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/switch.mdx b/apps/www/content/docs/ui/switch.mdx
index 63bd73d2..5807f4a7 100644
--- a/apps/www/content/docs/ui/switch.mdx
+++ b/apps/www/content/docs/ui/switch.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-switch
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-switch` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-switch
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/switch.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/switch.tsx",
+      "codeblock": true
+    }
+    ```
 
-</div>
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -44,6 +67,19 @@ import { Switch } from '~/components/ui/switch';
 <Switch />
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    size: {
+      default: 'medium',
+      description: 'The size of the switch',
+      type: 'enum',
+      typeDescription: "'small' | 'medium' | 'large'",
+    },
+  }}
+/>
+
 ## Examples
 
 ### Sizes
diff --git a/apps/www/content/docs/ui/table.mdx b/apps/www/content/docs/ui/table.mdx
index cddcae0b..f83689a5 100644
--- a/apps/www/content/docs/ui/table.mdx
+++ b/apps/www/content/docs/ui/table.mdx
@@ -14,18 +14,34 @@ description: A responsive table component.
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/table.tsx",
-  "codeblock": true
-}
-```
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/table.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/tabs.mdx b/apps/www/content/docs/ui/tabs.mdx
index e13a55b8..e91c8360 100644
--- a/apps/www/content/docs/ui/tabs.mdx
+++ b/apps/www/content/docs/ui/tabs.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-tabs
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-tabs` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-tabs
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/tabs.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/tabs.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/textarea.mdx b/apps/www/content/docs/ui/textarea.mdx
index 7bc6d79c..d2d72b3e 100644
--- a/apps/www/content/docs/ui/textarea.mdx
+++ b/apps/www/content/docs/ui/textarea.mdx
@@ -14,18 +14,34 @@ description: Displays a form textarea or a component that looks like a textarea.
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/textarea.tsx",
-  "codeblock": true
-}
-```
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/textarea.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 
diff --git a/apps/www/content/docs/ui/toast.mdx b/apps/www/content/docs/ui/toast.mdx
index 2ed36443..01ba0204 100644
--- a/apps/www/content/docs/ui/toast.mdx
+++ b/apps/www/content/docs/ui/toast.mdx
@@ -17,40 +17,68 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-toast
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-toast` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-toast
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/toast.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-</div>
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
 
-Add the `<Toaster />` component.
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/toast.tsx",
+      "codeblock": true
+    }
+    ```
 
-```tsx title="app/layout.tsx"
-import { Toaster } from '~/components/ui/toast'; // [!code highlight]
+    </div>
 
-export default const RootLayout = ({ children }) => {
-  return (
-    <html lang='en'>
-      <head />
-      <body>
-        <main>{children}</main>
-        <Toaster /> // [!code highlight]
-      </body>
-    </html>
-  );
-}
-```
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+  <Step>
+    ### Add Toaster component
+
+    Add the `<Toaster />` component to the root of your app.
+
+    ```tsx title="app/layout.tsx"
+    import { Toaster } from '~/components/ui/toast'; // [!code highlight]
+
+    export default const RootLayout = ({ children }) => {
+      return (
+        <html lang='en'>
+          <head />
+          <body>
+            <main>{children}</main>
+            <Toaster /> // [!code highlight]
+          </body>
+        </html>
+      );
+    }
+    ```
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -83,6 +111,19 @@ export const ToastDemo = () => {
   in `toast.tsx`.
 </Callout>
 
+## Reference
+
+<TypeTable
+  type={{
+    intent: {
+      default: 'default',
+      description: 'The visual style of the toast',
+      type: 'enum',
+      typeDescription: "'default' | 'info' | 'success' | 'warning' | 'error'",
+    },
+  }}
+/>
+
 ## Examples
 
 ### Intents
diff --git a/apps/www/content/docs/ui/toggle-group.mdx b/apps/www/content/docs/ui/toggle-group.mdx
index d3151e96..880fff5a 100644
--- a/apps/www/content/docs/ui/toggle-group.mdx
+++ b/apps/www/content/docs/ui/toggle-group.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-toggle-group
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-toggle-group` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-toggle-group
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/toggle-group.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
 
-</div>
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/toggle-group.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -48,6 +71,25 @@ import { ToggleGroup, ToggleGroupItem } from '~/components/ui/toggle-group';
 </ToggleGroup>
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    size: {
+      default: 'medium',
+      description: 'The size of the toggle',
+      type: 'enum',
+      typeDescription: "'small' | 'medium' | 'large'",
+    },
+    variant: {
+      default: 'ghost',
+      description: 'The variant style of the toggle',
+      type: 'enum',
+      typeDescription: "'ghost' | 'outline'",
+    },
+  }}
+/>
+
 ## Examples
 
 ### Variants
diff --git a/apps/www/content/docs/ui/toggle.mdx b/apps/www/content/docs/ui/toggle.mdx
index 6359199f..dd7e2ea0 100644
--- a/apps/www/content/docs/ui/toggle.mdx
+++ b/apps/www/content/docs/ui/toggle.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-toggle
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-toggle` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-toggle
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/toggle.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
 
-</div>
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/toggle.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -44,6 +67,25 @@ import { Toggle } from '~/components/ui/toggle';
 <Toggle>Toggle</Toggle>
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    size: {
+      default: 'medium',
+      description: 'The size of the toggle',
+      type: 'enum',
+      typeDescription: "'small' | 'medium' | 'large'",
+    },
+    variant: {
+      default: 'ghost',
+      description: 'The variant style of the toggle',
+      type: 'enum',
+      typeDescription: "'ghost' | 'outline'",
+    },
+  }}
+/>
+
 ## Examples
 
 ### Variants
diff --git a/apps/www/content/docs/ui/tooltip.mdx b/apps/www/content/docs/ui/tooltip.mdx
index 61f29904..b8c93022 100644
--- a/apps/www/content/docs/ui/tooltip.mdx
+++ b/apps/www/content/docs/ui/tooltip.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-tooltip
-```
+  <Step>
+    ### Install the primitive
+    
+    Install the `@radix-ui/react-tooltip` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-tooltip
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/tooltip.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/tooltip.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage