diff --git a/README.md b/README.md
index 208808d..76f14a5 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,23 @@
-# Vue Web Component Library
+# Vue Web Component Library (WIP)
 
 A Vue-based accessible design system with headless web components. This library provides accessible, customizable components that can be imported individually to optimize bundle size.
 
+> This library is WIP (Work-In-Progress)
+
+## Is This Library Right For You?
+
+This library is framework agnostic at the component level, but requires Vue.js as a dependency to function. Consider this library if:
+
+- Your application doesn't have a framework yet and you're looking for a solid foundation to build on
+- Your application is already built with Vue.js and you need consistent, accessible components
+- You want to use the same components across multiple projects with different technologies
+
+Note that if your main application uses React, Angular, or another non-Vue framework, you might want to consider a framework-specific component library instead for better integration:
+
+- For **React** applications: [shadcn/ui](https://ui.shadcn.com/) offers beautifully designed components that you can copy and paste into your apps
+- For **Angular** applications: [Angular Material](https://material.angular.io/) provides a comprehensive suite of UI components following Material Design principles
+
+
 ## Features
 
 - 🧩 **Web Components**: Use anywhere, framework-agnostic
diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs
index c393ff8..47ce6bb 100644
--- a/apps/documentation/.vitepress/config.mjs
+++ b/apps/documentation/.vitepress/config.mjs
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress'
+import { resolve } from 'path'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -36,6 +37,16 @@ export default defineConfig({
   vite: {
     optimizeDeps: {
       include: ['marked']
-    }
+    },
+    // resolve: {
+    //   alias: {
+    //     '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components')
+    //   }
+    // },
+    // build: {
+    //   commonjsOptions: {
+    //     strictRequires: true
+    //   }
+    // }
   }
 })
diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js
index 1d35d0f..91c52f8 100644
--- a/apps/documentation/.vitepress/theme/index.js
+++ b/apps/documentation/.vitepress/theme/index.js
@@ -2,7 +2,9 @@
 import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import MarkdownImporter from '../../components/MarkdownImporter.vue'
+import ComponentExample from '../../components/ComponentExample.vue'
 import './style.css'
+import '@devbyray/vue-wc-components'
 
 /** @type {import('vitepress').Theme} */
 export default {
@@ -15,5 +17,7 @@ export default {
   enhanceApp({ app, router, siteData }) {
     // ...
     app.component('MarkdownImporter', MarkdownImporter)
+    app.component('ComponentExample', ComponentExample)
+
   }
 }
diff --git a/apps/documentation/.vitepress/theme/style.css b/apps/documentation/.vitepress/theme/style.css
index 1a61cb1..a608733 100644
--- a/apps/documentation/.vitepress/theme/style.css
+++ b/apps/documentation/.vitepress/theme/style.css
@@ -42,7 +42,7 @@
  * - `danger`: Used to show error, or dangerous message to the users. Used
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
-
+ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');
 :root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue
new file mode 100644
index 0000000..dd443f7
--- /dev/null
+++ b/apps/documentation/components/ComponentExample.vue
@@ -0,0 +1,453 @@
+<script setup>
+import { ref, watch, nextTick, onBeforeUnmount, onMounted } from 'vue'
+
+// Define props with default values to simplify usage in markdown
+const props = defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    code: {
+        type: String,
+        default: ''
+    },
+    style: {
+        type: String,
+        default: ''
+    },
+    editable: {
+        type: Boolean,
+        default: true
+    },
+    autoRender: {
+        type: Boolean,
+        default: false
+    }
+})
+
+// Define emits for code and style changes
+const emit = defineEmits(['update:code', 'update:style'])
+
+// Create reactive references to track code and style changes
+const currentCode = ref(props.code)
+const currentStyle = ref(typeof props.style === 'string' ? props.style : '')
+const displayCode = ref(props.code)
+const displayStyle = ref(typeof props.style === 'string' ? props.style : '')
+const previewContainer = ref(null)
+const styleElement = ref(null)
+const componentId = ref(`example-${Math.random().toString(36).substring(2, 9)}`)
+
+// Track the active tab (code or style)
+const activeTab = ref('code')
+
+// Watch for changes in the code prop and update the references
+watch(() => props.code, (newCode) => {
+    currentCode.value = newCode
+    displayCode.value = newCode
+    if (previewContainer.value) {
+        renderComponent()
+    }
+})
+
+// Watch for changes in the style prop
+watch(() => props.style, (newStyle) => {
+    // Handle case where style might not be a string
+    const styleStr = typeof newStyle === 'string' ? newStyle : ''
+    currentStyle.value = styleStr
+    displayStyle.value = styleStr
+    // Make sure to apply styles when they change
+    nextTick(() => {
+        applyStyles()
+    })
+})
+
+// Handle code changes from the textarea
+const updateCode = (event) => {
+    currentCode.value = event.target.value
+    // Emit the updated code to the parent component
+    emit('update:code', currentCode.value)
+    
+    // If autoRender is true, update the display code immediately
+    if (props.autoRender) {
+        renderCode()
+    }
+}
+
+// Handle style changes from the textarea
+const updateStyle = (event) => {
+    currentStyle.value = event.target.value
+    // Emit the updated style to the parent component
+    emit('update:style', currentStyle.value)
+    
+    // If autoRender is true, update the styles immediately
+    if (props.autoRender) {
+        applyStyles()
+    }
+}
+
+// Function to toggle between tabs
+const setActiveTab = (tab) => {
+    activeTab.value = tab
+}
+
+// Function to manually trigger rendering
+const renderCode = async () => {
+    displayCode.value = currentCode.value
+    displayStyle.value = currentStyle.value
+    await nextTick()
+    renderComponent()
+    applyStyles()
+}
+
+// Add a helper function that creates a component-specific stylesheet
+const createComponentStyles = () => {
+    // Use our stored component ID for consistent style targeting
+    const styleId = `ce-styles-${componentId.value}`
+    
+    // Check if an existing style element exists with this ID
+    const existingStyle = document.getElementById(styleId)
+    if (existingStyle) {
+        return existingStyle
+    }
+    
+    // Create a new style element for our component
+    const styleEl = document.createElement('style')
+    styleEl.id = styleId
+    
+    // Add to document head for global CSS variable access
+    document.head.appendChild(styleEl)
+    
+    console.log('Created new style element:', styleId)
+    return styleEl
+}
+
+// Function to apply styles to the preview
+const applyStyles = () => {
+    // Don't proceed if there's no container
+    if (!previewContainer.value) return
+    
+    try {
+        // Make sure we have styles to apply, default to empty string
+        const styleContent = displayStyle.value || ''
+        
+        // Get or create our style element
+        if (!styleElement.value) {
+            styleElement.value = createComponentStyles()
+        }
+        
+        // Add our component ID to the preview container for targeting
+        previewContainer.value.setAttribute('data-example-id', componentId.value)
+        
+        // Process CSS to handle :root selectors
+        let cssText = styleContent.trim()
+        
+        // Make sure we properly scope the CSS 
+        if (cssText.includes(':root')) {
+            // For CSS variables, duplicate them to both :root and our scoped component
+            // This ensures they're accessible to Shadow DOM components
+            cssText = cssText.replace(/:root\s*{/g, (match) => {
+                return `:root, [data-example-id="${componentId.value}"] {`
+            })
+        }
+        
+        // Update the style element with our processed CSS
+        styleElement.value.textContent = cssText
+        
+        // Log the applied styles for debugging
+        console.log('Applied styles for', componentId.value, ':', cssText)
+        
+        // Force a style recalculation to ensure changes are applied
+        setTimeout(() => {
+            if (previewContainer.value) {
+                // Force DOM reflow
+                void previewContainer.value.offsetHeight
+                
+                // Specifically target web components for style refresh
+                const components = previewContainer.value.querySelectorAll('*')
+                components.forEach(comp => {
+                    if (comp.tagName && comp.tagName.includes('-')) {
+                        void comp.offsetHeight
+                    }
+                })
+            }
+        }, 50)
+    } catch (err) {
+        console.error('Error applying styles:', err)
+    }
+}
+
+// Function to convert string to actual component
+const renderComponent = async () => {
+    if (!previewContainer.value) return
+
+    try {
+        // Clear the container
+        previewContainer.value.innerHTML = ''
+        
+        // Create a wrapper for our component
+        const wrapper = document.createElement('div')
+        wrapper.setAttribute('data-v-component', 'true')
+        wrapper.classList.add('component-instance')
+        previewContainer.value.appendChild(wrapper)
+        
+        // Wait for web components to be defined
+        try {
+            // This helps ensure components are ready before rendering
+            await Promise.race([
+                customElements.whenDefined('vwc-button'),
+                new Promise(resolve => setTimeout(resolve, 1000))
+            ])
+            await Promise.race([
+                customElements.whenDefined('vwc-input'),
+                new Promise(resolve => setTimeout(resolve, 1000)) 
+            ])
+            await Promise.race([
+                customElements.whenDefined('vwc-icon'),
+                new Promise(resolve => setTimeout(resolve, 1000))
+            ])
+        } catch (err) {
+            console.warn('Component registration timeout, continuing anyway')
+        }
+        
+        // Insert the HTML code
+        wrapper.innerHTML = displayCode.value
+        
+        // Apply styles after ensuring component is rendered
+        setTimeout(() => {
+            applyStyles()
+        }, 50)
+    } catch (err) {
+        console.error('Error rendering component:', err)
+        previewContainer.value.innerHTML = `<div style="color: red; padding: 10px;">Error: ${err.message}</div>`
+    }
+}
+
+// Clean up style element when component is unmounted
+onBeforeUnmount(() => {
+    if (styleElement.value && styleElement.value.parentNode) {
+        styleElement.value.parentNode.removeChild(styleElement.value)
+    }
+})
+
+// Make sure styles are applied after the component is mounted
+onMounted(() => {
+    // We need a short delay to ensure the component is fully rendered
+    setTimeout(() => {
+        if (displayStyle.value) {
+            applyStyles()
+            console.log('Applied initial styles on mount')
+        }
+    }, 100)
+})
+
+// Initial render when preview container is available
+watch(previewContainer, (el) => {
+    if (el) {
+        renderComponent()
+    }
+}, { immediate: true })
+</script>
+<template>
+    <div class="component-example">
+        <h2 v-if="title">{{ title }}</h2>
+        <div class="example-preview">
+            <!-- Container for dynamically rendered component -->
+            <div ref="previewContainer"></div>
+            
+            <!-- Render button moved above the fold -->
+            <button 
+                v-if="editable && !autoRender" 
+                @click="renderCode" 
+                class="render-button render-button-preview"
+                type="button"
+            >
+                Render Changes
+            </button>
+        </div>
+        
+        <!-- Tab navigation for code and style -->
+        <div v-if="editable" class="example-tabs">
+            <button 
+                class="tab-button" 
+                :class="{ 'active': activeTab === 'code' }"
+                @click="setActiveTab('code')"
+            >
+                HTML
+            </button>
+            <button 
+                class="tab-button" 
+                :class="{ 'active': activeTab === 'style' }"
+                @click="setActiveTab('style')"
+            >
+                CSS
+            </button>
+        </div>
+        
+        <div class="example-code">
+            <!-- Code editor tab -->
+            <div v-if="editable && activeTab === 'code'" class="code-editor">
+                <textarea 
+                    :value="currentCode" 
+                    @input="updateCode" 
+                    class="code-textarea"
+                    spellcheck="false"
+                    rows="5"
+                    placeholder="Enter HTML code here"
+                ></textarea>
+            </div>
+            
+            <!-- Style editor tab -->
+            <div v-if="editable && activeTab === 'style'" class="code-editor">
+                <textarea 
+                    :value="currentStyle" 
+                    @input="updateStyle" 
+                    class="code-textarea"
+                    spellcheck="false"
+                    rows="5"
+                    placeholder="Enter CSS code here e.g. :root { --vwc-button-primary-bg: red; }"
+                ></textarea>
+            </div>
+            
+            <!-- Read-only code display -->
+            <pre v-if="!editable"><code>{{ currentCode }}</code></pre>
+        </div>
+    </div>
+    <hr />
+</template>
+<style scoped>
+.component-example {
+    margin: 20px 0;
+}
+
+.example-tabs {
+    display: flex;
+    border-start-end-radius: 5px;
+    border-start-start-radius: 5px;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    border-bottom: none;
+}
+
+.tab-button {
+    flex: 1;
+    padding: 0.5rem 1rem;
+    background-color: #3d3d3d;
+    color: #e6e6e6;
+    border: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: background-color 0.2s;
+}
+
+.tab-button:hover {
+    background-color: #4a4a4a;
+}
+
+.tab-button.active {
+    background-color: #5f5f5f;
+    font-weight: bold;
+}
+
+.example-code {
+    padding: 10px;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    margin-bottom: 20px;
+    background-color: #5f5f5f;
+    border: 1px solid #ccc;
+    border-top: none;
+}
+
+.example-tabs + .example-code {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.example-code pre {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.render-button-preview {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    margin-top: 0;
+    background-color: rgba(137, 255, 18, 0.9);
+    backdrop-filter: blur(4px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.example-preview {
+    position: relative;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    aspect-ratio: 16/9;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.example-preview > * {
+    margin: 0;
+}
+.example-preview > :not(:last-child) {
+    margin-bottom: 10px;
+}
+.example-preview > :last-child {
+    margin-bottom: 0;
+}
+.example-preview > :first-child {
+    margin-top: 0;
+}
+.example-preview > :last-child {
+    margin-bottom: 0;
+}
+
+.code-editor {
+    position: relative;
+    width: 100%;
+}
+
+.code-textarea {
+    width: 100%;
+    min-height: 100px;
+    font-family: monospace;
+    padding: 10px;
+    background-color: #2d2d2d;
+    color: #e6e6e6;
+    border: none;
+    resize: vertical;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.code-textarea:focus {
+    outline: 1px solid #4a8bfc;
+}
+
+.render-button {
+    margin-top: 10px;
+    padding: 8px 16px;
+    background-color: rgba(137, 255, 18, 0.9);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+}
+
+.render-button:hover {
+    background-color: rgba(102, 203, 1, 0.9);
+}
+
+.render-button:active {
+    background-color: rgba(137, 255, 18, 0.9);
+    transform: scale(0.98);
+}
+</style>
\ No newline at end of file
diff --git a/apps/documentation/components/MarkdownImporter.vue b/apps/documentation/components/MarkdownImporter.vue
index 84ab663..aaad8d6 100644
--- a/apps/documentation/components/MarkdownImporter.vue
+++ b/apps/documentation/components/MarkdownImporter.vue
@@ -57,53 +57,74 @@ const fetchMarkdown = async (path) => {
   }
 }
 
-// Function to apply syntax highlighting after the content is rendered
+// Function to safely apply syntax highlighting
 const applySyntaxHighlighting = () => {
   // Select all code blocks
   const codeBlocks = document.querySelectorAll('.markdown-content pre code')
   
   // Apply highlighting to each code block
   codeBlocks?.forEach((block) => {
-    // Make sure block has a className property
-    if (!block || typeof block.className !== 'string') {
+    // Make sure block exists and has content
+    if (!block || !block.textContent) {
       return
     }
     
-    // Check if a language class is present
-    const classList = block.className.split(' ')
-    const langClass = classList.find(cls => typeof cls === 'string' && cls.startsWith('language-'))
-    
-    if (langClass) {
-      // Extract the language name
-      const lang = typeof langClass === 'string' ? langClass.replace('language-', '') : ''
+    try {
+      // Check if a language class is present
+      const classList = block.className ? block.className.split(' ') : []
+      const langClass = classList.find(cls => typeof cls === 'string' && cls.startsWith('language-'))
       
-      // Apply highlighting if the language is supported
-      if (lang && hljs.getLanguage(lang)) {
-        hljs.highlightElement(block)
+      if (langClass) {
+        // Extract the language name
+        const lang = langClass.replace('language-', '')
+        
+        // Apply highlighting if the language is supported
+        if (lang && hljs.getLanguage(lang)) {
+          hljs.highlightElement(block)
+        } else {
+          // Only apply auto-detection if we have content
+          if (block.textContent.trim()) {
+            hljs.highlightElement(block)
+          }
+        }
       } else {
-        // Try auto-detection for unknown languages
-        hljs.highlightAuto(block)
+        // Only apply auto-detection if we have content
+        if (block.textContent.trim()) {
+          hljs.highlightElement(block)
+        }
       }
-    } else {
-      // No language specified, use auto-detection
-      hljs.highlightAuto(block)
+    } catch (error) {
+      // Log the error but don't break the rendering
+      console.warn('Error highlighting code block:', error)
+      
+      // Apply basic styling if highlighting fails
+      block.classList.add('plain-code')
     }
   })
 }
 
 onMounted(async () => {
-  // Get the base URL
-  const baseUrl = import.meta.env.BASE_URL || '/'
-  // Create a path that's relative to the public directory
-  const fullPath = `${baseUrl}${props.path}`
-  
-  // Fetch and process the markdown
-  const markdownContent = await fetchMarkdown(fullPath)
-  htmlContent.value = marked.parse(markdownContent)
-  
-  // Use nextTick to ensure the content is in the DOM before highlighting
-  await nextTick()
-  applySyntaxHighlighting()
+  try {
+    // Get the base URL
+    const baseUrl = import.meta.env.BASE_URL || '/'
+    // Create a path that's relative to the public directory
+    const fullPath = `${baseUrl}${props.path}`
+    
+    // Fetch and process the markdown
+    const markdownContent = await fetchMarkdown(fullPath)
+    
+    // Only parse if we have content
+    if (markdownContent && typeof markdownContent === 'string') {
+      htmlContent.value = marked.parse(markdownContent)
+      
+      // Use nextTick to ensure the content is in the DOM before highlighting
+      await nextTick()
+      applySyntaxHighlighting()
+    }
+  } catch (error) {
+    console.error('Error rendering markdown:', error)
+    htmlContent.value = '<div class="error-message">Error loading content</div>'
+  }
 })
 </script>
 
@@ -175,4 +196,19 @@ onMounted(async () => {
     color: #ddd;
   }
 }
+
+/* Style for error messages */
+.error-message {
+  color: #e74c3c;
+  padding: 1rem;
+  border: 1px solid #e74c3c;
+  border-radius: 4px;
+  background-color: rgba(231, 76, 60, 0.1);
+  margin: 1rem 0;
+}
+
+/* Style for plain code when highlighting fails */
+.plain-code {
+  color: #e6e6e6;
+}
 </style>
\ No newline at end of file
diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md
index 6832e04..d305d4c 100644
--- a/apps/documentation/docs/components/button.md
+++ b/apps/documentation/docs/components/button.md
@@ -1 +1,8 @@
+<ComponentExample 
+  title="Interactive Button Example" 
+  code="<vwc-button variant='primary'>Primary Button</vwc-button>"
+  :editable="true">
+    <vwc-button variant="primary">Primary Button</vwc-button>
+</ComponentExample>
+
 <MarkdownImporter path="packages/components/button/README.md" />
\ No newline at end of file
diff --git a/apps/documentation/docs/components/icon.md b/apps/documentation/docs/components/icon.md
index 52a7a79..9a3e420 100644
--- a/apps/documentation/docs/components/icon.md
+++ b/apps/documentation/docs/components/icon.md
@@ -1 +1,8 @@
+<ComponentExample 
+  title="Try out!" 
+  code="<vwc-icon name='star' size='lg' color='#FFD700'></vwc-icon>"
+  :editable="true">
+    <vwc-icon name="star" size="lg" color="#FFD700"></vwc-icon>
+</ComponentExample>
+
 <MarkdownImporter path="packages/components/icon/README.md" />
\ No newline at end of file
diff --git a/apps/documentation/docs/components/index.md b/apps/documentation/docs/components/index.md
index d796870..28aef24 100644
--- a/apps/documentation/docs/components/index.md
+++ b/apps/documentation/docs/components/index.md
@@ -1 +1,38 @@
+# Components
+
+<ComponentExample 
+  title="Button Component" 
+  code="<vwc-button variant='primary'>Primary Button</vwc-button>"
+  style=":root {
+  --vwc-button-primary-bg: #e91e63;
+  --vwc-button-primary-text: white;
+  --vwc-button-radius: 2rem;
+}"
+  :editable="true">
+    <vwc-button variant="primary">Primary Button</vwc-button>
+</ComponentExample>
+
+<ComponentExample 
+  title="Input Component" 
+  code="<vwc-input label='Username' placeholder='Enter username'></vwc-input>"
+  style=":root {
+  --vwc-input-border: 2px solid #9c27b0;
+  --vwc-input-radius: 1rem;
+  --vwc-input-focus-border-color: #673ab7;
+  --vwc-input-label-color: #9c27b0;
+}"
+  :editable="true">
+    <vwc-input label="Username" placeholder="Enter username"></vwc-input>
+</ComponentExample>
+
+<ComponentExample 
+  title="Icon Component" 
+  code="<vwc-icon name='star' size='lg' color='#FFD700'></vwc-icon>"
+  style=":root {
+  --vwc-icon-lg-size: 3rem;
+}"
+  :editable="true">
+    <vwc-icon name="star" size="lg" color="#FFD700"></vwc-icon>
+</ComponentExample>
+
 <MarkdownImporter path="README.md" />
\ No newline at end of file
diff --git a/apps/documentation/docs/components/input.md b/apps/documentation/docs/components/input.md
index 3c9cfee..710f803 100644
--- a/apps/documentation/docs/components/input.md
+++ b/apps/documentation/docs/components/input.md
@@ -1 +1,8 @@
+<ComponentExample 
+  title="Try out!" 
+  code="<vwc-input label='Username' placeholder='Enter username'></vwc-input>"
+  :editable="true">
+    <vwc-input label="Username" placeholder="Enter username"></vwc-input>
+</ComponentExample>
+
 <MarkdownImporter path="packages/components/input/README.md" />
\ No newline at end of file
diff --git a/apps/documentation/index.md b/apps/documentation/index.md
index aca4404..2e1982c 100644
--- a/apps/documentation/index.md
+++ b/apps/documentation/index.md
@@ -13,11 +13,32 @@ hero:
 features:
   - title: Button component
     link: /docs/components/button
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details: A versatile button component with support for different styles, sizes, and states to enhance user interactions.
+
   - title: Input component
     link: /docs/components/input
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details: A customizable input field component designed for accessibility and seamless data entry.
+
   - title: Icon component
     link: /docs/components/icon
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details: A library of scalable and accessible icons to complement your design system.
 ---
+
+<!-- Add a ComponentExample demonstration at the bottom of the homepage -->
+<div class="component-demo">
+  <h2>Try our Button component</h2>
+  <ComponentExample
+    title="Button Demo"
+    code="<vwc-button variant='primary'>Click Me</vwc-button>"
+    :editable="true">
+    <vwc-button variant="primary">Click Me</vwc-button>
+  </ComponentExample>
+</div>
+
+<style>
+.component-demo {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 1rem;
+}
+</style>
diff --git a/apps/documentation/package.json b/apps/documentation/package.json
index 2e22c7b..77cb8c6 100644
--- a/apps/documentation/package.json
+++ b/apps/documentation/package.json
@@ -4,8 +4,9 @@
   "description": "A Vue-based accessible design system with headless web components",
   "private": false,
   "scripts": {
+    "build:deps": "pnpm --filter @devbyray/vue-wc-components run build",
     "dev": "npm run copy-readme && vitepress dev",
-    "build": "npm run copy-readme && vitepress build",
+    "build": "npm run build:deps && npm run copy-readme && vitepress build",
     "preview": "vitepress preview",
     "copy-readme": "node scripts/copy-readme.js"
   },
@@ -14,6 +15,7 @@
     "vitepress": "^1.6.3"
   },
   "dependencies": {
+    "@devbyray/vue-wc-components": "workspace:^",
     "highlight.js": "^11.11.1"
   }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index a0f60b2..baf75f9 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
     "lint": "pnpm -r lint",
     "test": "pnpm -r test",
     "docs:dev": "pnpm --filter @devbyray/vue-wc-documentation dev",
-    "docs:build": "pnpm --filter @devbyray/vue-wc-documentation build"
+    "docs:build": "pnpm --filter @devbyray/vue-wc-documentation build",
+    "vercel-build": "pnpm build:deps && pnpm docs:build",
+    "build:deps": "pnpm --filter @devbyray/vue-wc-core build && pnpm --filter ./packages/components/button build && pnpm --filter ./packages/components/input build && pnpm --filter ./packages/components/icon build && pnpm --filter @devbyray/vue-wc-components build"
   },
   "keywords": [
     "vue",
diff --git a/packages/components/button/README.md b/packages/components/button/README.md
index 74a324e..48b5977 100644
--- a/packages/components/button/README.md
+++ b/packages/components/button/README.md
@@ -20,7 +20,7 @@ import '@devbyray/vue-wc-button';
 </script>
 
 <!-- Basic usage -->
-<vwc-button>Click me</vwc-button>
+<vwc-button @click="() => console.log('Click')">Click me</vwc-button>
 
 <!-- With variants -->
 <vwc-button variant="primary">Primary Button</vwc-button>
diff --git a/packages/components/package.json b/packages/components/package.json
index cb89d30..3102395 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -2,9 +2,17 @@
   "name": "@devbyray/vue-wc-components",
   "version": "0.0.12",
   "description": "All accessible Vue web components in one package",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
     "dist"
   ],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0131e18..17984c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,9 @@ importers:
 
   apps/documentation:
     dependencies:
+      '@devbyray/vue-wc-components':
+        specifier: workspace:^
+        version: link:../../packages/components
       highlight.js:
         specifier: ^11.11.1
         version: 11.11.1
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..b5d649f
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,13 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@vercel/node",
+      "config": {
+        "buildCommand": "pnpm run vercel-build"
+      }
+    }
+  ],
+  "installCommand": "pnpm install"
+}
\ No newline at end of file