From 8e49507395b62616a62a161468fff8060f744cfd Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Fri, 26 Sep 2025 19:49:07 +0200
Subject: [PATCH 1/2] feat(examples): add NuxtUI PRO components

---
 .../src/examples/ui/AuthFormExample.vue       | 29 +++++++
 .../src/examples/ui/BannerExample.vue         | 11 +++
 .../src/examples/ui/BlogPostExample.vue       | 25 ++++++
 .../src/examples/ui/BlogPostsExample.vue      | 30 +++++++
 .../examples/ui/ChangelogVersionExample.vue   | 14 ++++
 .../examples/ui/ChangelogVersionsExample.vue  | 16 ++++
 .../src/examples/ui/ChatMessageExample.vue    | 17 ++++
 .../src/examples/ui/ChatMessagesExample.vue   | 30 +++++++
 .../src/examples/ui/ChatPaletteExample.vue    | 43 ++++++++++
 .../src/examples/ui/ChatPromptExample.vue     | 14 ++++
 .../examples/ui/ChatPromptSubmitExample.vue   | 14 ++++
 .../examples/ui/ColorModeAvatarExample.vue    | 12 +++
 .../examples/ui/ColorModeButtonExample.vue    |  3 +
 .../src/examples/ui/ColorModeImageExample.vue | 17 ++++
 .../examples/ui/ColorModeSelectExample.vue    | 17 ++++
 .../examples/ui/ColorModeSwitchExample.vue    |  3 +
 .../examples/src/examples/ui/ErrorExample.vue | 15 ++++
 .../src/examples/ui/FileUploadExample.vue     | 11 +++
 .../src/examples/ui/LocaleSelectExample.vue   | 23 ++++++
 .../src/examples/ui/MarqueeExample.vue        | 28 +++++++
 .../src/examples/ui/PricingPlanExample.vue    | 24 ++++++
 .../src/examples/ui/PricingTableExample.vue   | 80 +++++++++++++++++++
 .../examples/src/examples/ui/UserExample.vue  | 15 ++++
 playgrounds/nuxt/app/app.config.ts            |  4 +
 24 files changed, 495 insertions(+)
 create mode 100644 packages/examples/src/examples/ui/AuthFormExample.vue
 create mode 100644 packages/examples/src/examples/ui/BannerExample.vue
 create mode 100644 packages/examples/src/examples/ui/BlogPostExample.vue
 create mode 100644 packages/examples/src/examples/ui/BlogPostsExample.vue
 create mode 100644 packages/examples/src/examples/ui/ChangelogVersionExample.vue
 create mode 100644 packages/examples/src/examples/ui/ChangelogVersionsExample.vue
 create mode 100644 packages/examples/src/examples/ui/ChatMessageExample.vue
 create mode 100644 packages/examples/src/examples/ui/ChatMessagesExample.vue
 create mode 100644 packages/examples/src/examples/ui/ChatPaletteExample.vue
 create mode 100644 packages/examples/src/examples/ui/ChatPromptExample.vue
 create mode 100644 packages/examples/src/examples/ui/ChatPromptSubmitExample.vue
 create mode 100644 packages/examples/src/examples/ui/ColorModeAvatarExample.vue
 create mode 100644 packages/examples/src/examples/ui/ColorModeButtonExample.vue
 create mode 100644 packages/examples/src/examples/ui/ColorModeImageExample.vue
 create mode 100644 packages/examples/src/examples/ui/ColorModeSelectExample.vue
 create mode 100644 packages/examples/src/examples/ui/ColorModeSwitchExample.vue
 create mode 100644 packages/examples/src/examples/ui/ErrorExample.vue
 create mode 100644 packages/examples/src/examples/ui/FileUploadExample.vue
 create mode 100644 packages/examples/src/examples/ui/LocaleSelectExample.vue
 create mode 100644 packages/examples/src/examples/ui/MarqueeExample.vue
 create mode 100644 packages/examples/src/examples/ui/PricingPlanExample.vue
 create mode 100644 packages/examples/src/examples/ui/PricingTableExample.vue
 create mode 100644 packages/examples/src/examples/ui/UserExample.vue

diff --git a/packages/examples/src/examples/ui/AuthFormExample.vue b/packages/examples/src/examples/ui/AuthFormExample.vue
new file mode 100644
index 00000000..d951b58b
--- /dev/null
+++ b/packages/examples/src/examples/ui/AuthFormExample.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    title: 'Login',
+    description: 'Enter your credentials to access your account.',
+    icon: 'i-lucide-user',
+    fields: [
+      {
+        name: 'email',
+        type: 'text',
+        label: 'Email',
+        placeholder: 'Enter your email',
+        required: true
+      },
+      {
+        name: 'password',
+        type: 'password',
+        label: 'Password',
+        placeholder: 'Enter your password',
+        required: true
+      }
+    ]
+  }
+})
+</script>
+
+<template>
+  <UAuthForm class="max-w-md" />
+</template>
diff --git a/packages/examples/src/examples/ui/BannerExample.vue b/packages/examples/src/examples/ui/BannerExample.vue
new file mode 100644
index 00000000..082fad26
--- /dev/null
+++ b/packages/examples/src/examples/ui/BannerExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    title: 'This is a banner with an important message.'
+  }
+})
+</script>
+
+<template>
+  <UBanner />
+</template>
diff --git a/packages/examples/src/examples/ui/BlogPostExample.vue b/packages/examples/src/examples/ui/BlogPostExample.vue
new file mode 100644
index 00000000..4f125aab
--- /dev/null
+++ b/packages/examples/src/examples/ui/BlogPostExample.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    title: 'Introducing Nuxt Icon v1',
+    description: 'Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects.',
+    date: '2024-11-25',
+    image: 'https://nuxt.com/assets/blog/nuxt-icon/cover.png',
+    authors: [
+      {
+        name: 'Anthony Fu',
+        description: 'antfu7',
+        avatar: {
+          src: 'https://github.com/antfu.png'
+        },
+        to: 'https://github.com/antfu',
+        target: '_blank'
+      }
+    ]
+  }
+})
+</script>
+
+<template>
+  <UBlogPost />
+</template>
diff --git a/packages/examples/src/examples/ui/BlogPostsExample.vue b/packages/examples/src/examples/ui/BlogPostsExample.vue
new file mode 100644
index 00000000..b6c33a79
--- /dev/null
+++ b/packages/examples/src/examples/ui/BlogPostsExample.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    posts: [
+      {
+        title: 'Nuxt Icon v1',
+        description: 'Discover Nuxt Icon v1!',
+        image: 'https://nuxt.com/assets/blog/nuxt-icon/cover.png',
+        date: '2024-11-25'
+      },
+      {
+        title: 'Nuxt 3.14',
+        description: 'Nuxt 3.14 is out!',
+        image: 'https://nuxt.com/assets/blog/v3.14.png',
+        date: '2024-11-04'
+      },
+      {
+        title: 'Nuxt 3.13',
+        description: 'Nuxt 3.13 is out!',
+        image: 'https://nuxt.com/assets/blog/v3.13.png',
+        date: '2024-08-22'
+      }
+    ]
+  }
+})
+</script>
+
+<template>
+  <UBlogPosts />
+</template>
diff --git a/packages/examples/src/examples/ui/ChangelogVersionExample.vue b/packages/examples/src/examples/ui/ChangelogVersionExample.vue
new file mode 100644
index 00000000..468c6979
--- /dev/null
+++ b/packages/examples/src/examples/ui/ChangelogVersionExample.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    title: 'Introducing Nuxt UI v3',
+    description: 'Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS v4 support, and full Vue compatibility.',
+    date: '2025-03-12',
+    badge: 'Release'
+  }
+})
+</script>
+
+<template>
+  <UChangelogVersion />
+</template>
diff --git a/packages/examples/src/examples/ui/ChangelogVersionsExample.vue b/packages/examples/src/examples/ui/ChangelogVersionsExample.vue
new file mode 100644
index 00000000..ce1a3d2a
--- /dev/null
+++ b/packages/examples/src/examples/ui/ChangelogVersionsExample.vue
@@ -0,0 +1,16 @@
+<template>
+  <UChangelogVersions>
+    <UChangelogVersion
+      title="Version 1.2.0"
+      description="Added new features and bug fixes."
+      date="2024-03-15"
+      badge="Release"
+    />
+    <UChangelogVersion
+      title="Version 1.1.0"
+      description="Performance improvements and optimizations."
+      date="2024-02-20"
+      badge="Update"
+    />
+  </UChangelogVersions>
+</template>
diff --git a/packages/examples/src/examples/ui/ChatMessageExample.vue b/packages/examples/src/examples/ui/ChatMessageExample.vue
new file mode 100644
index 00000000..4383295e
--- /dev/null
+++ b/packages/examples/src/examples/ui/ChatMessageExample.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    parts: [{
+      type: 'text',
+      text: 'Hello! How can I help you today?' }],
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4',
+      alt: 'Assistant'
+    }
+  }
+})
+</script>
+
+<template>
+  <UChatMessage />
+</template>
diff --git a/packages/examples/src/examples/ui/ChatMessagesExample.vue b/packages/examples/src/examples/ui/ChatMessagesExample.vue
new file mode 100644
index 00000000..96d6917e
--- /dev/null
+++ b/packages/examples/src/examples/ui/ChatMessagesExample.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    messages: [
+      {
+        id: '1',
+        content: 'Hello! How can I help you today?',
+        role: 'assistant',
+        timestamp: new Date(Date.now() - 5000).toISOString()
+      },
+      {
+        id: '2',
+        content: 'I need help with my project setup.',
+        role: 'user',
+        timestamp: new Date(Date.now() - 3000).toISOString()
+      },
+      {
+        id: '3',
+        content: 'I\'d be happy to help! What kind of project are you working on?',
+        role: 'assistant',
+        timestamp: new Date().toISOString()
+      }
+    ]
+  }
+})
+</script>
+
+<template>
+  <UChatMessages class="max-h-96 overflow-y-auto" />
+</template>
diff --git a/packages/examples/src/examples/ui/ChatPaletteExample.vue b/packages/examples/src/examples/ui/ChatPaletteExample.vue
new file mode 100644
index 00000000..7d02c7c8
--- /dev/null
+++ b/packages/examples/src/examples/ui/ChatPaletteExample.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    commands: [
+      { id: 'search', label: 'Search', icon: 'i-heroicons-magnifying-glass' },
+      { id: 'help', label: 'Help', icon: 'i-heroicons-question-mark-circle' },
+      { id: 'settings', label: 'Settings', icon: 'i-heroicons-cog-6-tooth' },
+      { id: 'clear', label: 'Clear Chat', icon: 'i-heroicons-trash' }
+    ]
+  }
+})
+</script>
+
+<template>
+  <UChatPalette>
+    <UChatMessages
+      :messages="[
+        {
+          id: '1',
+          content: 'Hello! How can I help you today?',
+          role: 'assistant',
+          timestamp: new Date(Date.now() - 5000).toISOString()
+        },
+        {
+          id: '2',
+          content: 'I need help with my project setup.',
+          role: 'user',
+          timestamp: new Date(Date.now() - 3000).toISOString()
+        },
+        {
+          id: '3',
+          content: 'I\'d be happy to help! What kind of project are you working on?',
+          role: 'assistant',
+          timestamp: new Date().toISOString()
+        }
+      ]"
+    />
+
+    <template #prompt>
+      <UChatPrompt />
+    </template>
+  </UChatPalette>
+</template>
diff --git a/packages/examples/src/examples/ui/ChatPromptExample.vue b/packages/examples/src/examples/ui/ChatPromptExample.vue
new file mode 100644
index 00000000..bc2e1b45
--- /dev/null
+++ b/packages/examples/src/examples/ui/ChatPromptExample.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    modelValue: '',
+    placeholder: 'Type your message...',
+    size: 'md',
+    icon: 'i-heroicons-paper-airplane'
+  }
+})
+</script>
+
+<template>
+  <UChatPrompt class="w-full" />
+</template>
diff --git a/packages/examples/src/examples/ui/ChatPromptSubmitExample.vue b/packages/examples/src/examples/ui/ChatPromptSubmitExample.vue
new file mode 100644
index 00000000..4312ea59
--- /dev/null
+++ b/packages/examples/src/examples/ui/ChatPromptSubmitExample.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    icon: 'i-heroicons-paper-airplane',
+    size: 'sm',
+    variant: 'solid',
+    color: 'primary'
+  }
+})
+</script>
+
+<template>
+  <UChatPromptSubmit class="rounded-full" />
+</template>
diff --git a/packages/examples/src/examples/ui/ColorModeAvatarExample.vue b/packages/examples/src/examples/ui/ColorModeAvatarExample.vue
new file mode 100644
index 00000000..16518f81
--- /dev/null
+++ b/packages/examples/src/examples/ui/ColorModeAvatarExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    light: 'https://avatar.vercel.sh/light',
+    dark: 'https://avatar.vercel.sh/dark'
+  }
+})
+</script>
+
+<template>
+  <UColorModeAvatar />
+</template>
diff --git a/packages/examples/src/examples/ui/ColorModeButtonExample.vue b/packages/examples/src/examples/ui/ColorModeButtonExample.vue
new file mode 100644
index 00000000..9e3fff51
--- /dev/null
+++ b/packages/examples/src/examples/ui/ColorModeButtonExample.vue
@@ -0,0 +1,3 @@
+<template>
+  <UColorModeButton class="rounded-lg" />
+</template>
diff --git a/packages/examples/src/examples/ui/ColorModeImageExample.vue b/packages/examples/src/examples/ui/ColorModeImageExample.vue
new file mode 100644
index 00000000..d04356b4
--- /dev/null
+++ b/packages/examples/src/examples/ui/ColorModeImageExample.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    src: {
+      light: '/logo-light.svg',
+      dark: '/logo-dark.svg'
+    },
+    alt: 'Company Logo',
+    width: 120,
+    height: 40
+  }
+})
+</script>
+
+<template>
+  <UColorModeImage />
+</template>
diff --git a/packages/examples/src/examples/ui/ColorModeSelectExample.vue b/packages/examples/src/examples/ui/ColorModeSelectExample.vue
new file mode 100644
index 00000000..00883e5c
--- /dev/null
+++ b/packages/examples/src/examples/ui/ColorModeSelectExample.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    modelValue: 'light',
+    options: [
+      { value: 'light', label: 'Light' },
+      { value: 'dark', label: 'Dark' },
+      { value: 'system', label: 'System' }
+    ],
+    size: 'md'
+  }
+})
+</script>
+
+<template>
+  <UColorModeSelect class="w-32" />
+</template>
diff --git a/packages/examples/src/examples/ui/ColorModeSwitchExample.vue b/packages/examples/src/examples/ui/ColorModeSwitchExample.vue
new file mode 100644
index 00000000..28a38871
--- /dev/null
+++ b/packages/examples/src/examples/ui/ColorModeSwitchExample.vue
@@ -0,0 +1,3 @@
+<template>
+  <UColorModeSwitch />
+</template>
diff --git a/packages/examples/src/examples/ui/ErrorExample.vue b/packages/examples/src/examples/ui/ErrorExample.vue
new file mode 100644
index 00000000..f9709aff
--- /dev/null
+++ b/packages/examples/src/examples/ui/ErrorExample.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    error: {
+      statusCode: 404,
+      statusMessage: 'Page not found',
+      message: 'The page you are looking for does not exist.'
+    }
+  }
+})
+</script>
+
+<template>
+  <UError />
+</template>
diff --git a/packages/examples/src/examples/ui/FileUploadExample.vue b/packages/examples/src/examples/ui/FileUploadExample.vue
new file mode 100644
index 00000000..d9bb9495
--- /dev/null
+++ b/packages/examples/src/examples/ui/FileUploadExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    label: 'Upload File'
+  }
+})
+</script>
+
+<template>
+  <UFileUpload class="w-96 min-h-48" />
+</template>
diff --git a/packages/examples/src/examples/ui/LocaleSelectExample.vue b/packages/examples/src/examples/ui/LocaleSelectExample.vue
new file mode 100644
index 00000000..8177f42e
--- /dev/null
+++ b/packages/examples/src/examples/ui/LocaleSelectExample.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+extendCompodiumMeta({
+  defaultProps: {
+    locales: [
+      { name: 'English', code: 'en', dir: 'ltr' },
+      { name: 'Español', code: 'es', dir: 'ltr' },
+      { name: 'Français', code: 'fr', dir: 'ltr' },
+      { name: 'Deutsch', code: 'de', dir: 'ltr' }
+    ]
+  }
+})
+
+const modelValue = ref('en')
+</script>
+
+<template>
+  <ULocaleSelect
+    v-model="modelValue"
+    class="w-40"
+  />
+</template>
diff --git a/packages/examples/src/examples/ui/MarqueeExample.vue b/packages/examples/src/examples/ui/MarqueeExample.vue
new file mode 100644
index 00000000..f2b905fa
--- /dev/null
+++ b/packages/examples/src/examples/ui/MarqueeExample.vue
@@ -0,0 +1,28 @@
+<template>
+  <UMarquee>
+    <UIcon
+      name="i-simple-icons-github"
+      class="size-10 shrink-0"
+    />
+    <UIcon
+      name="i-simple-icons-discord"
+      class="size-10 shrink-0"
+    />
+    <UIcon
+      name="i-simple-icons-x"
+      class="size-10 shrink-0"
+    />
+    <UIcon
+      name="i-simple-icons-instagram"
+      class="size-10 shrink-0"
+    />
+    <UIcon
+      name="i-simple-icons-linkedin"
+      class="size-10 shrink-0"
+    />
+    <UIcon
+      name="i-simple-icons-facebook"
+      class="size-10 shrink-0"
+    />
+  </UMarquee>
+</template>
diff --git a/packages/examples/src/examples/ui/PricingPlanExample.vue b/packages/examples/src/examples/ui/PricingPlanExample.vue
new file mode 100644
index 00000000..f352937b
--- /dev/null
+++ b/packages/examples/src/examples/ui/PricingPlanExample.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    title: 'Pro Plan',
+    description: 'Perfect for growing teams',
+    price: '$29',
+    cycle: '/month',
+    highlight: true,
+    features: [
+      'Up to 10 team members',
+      'Advanced analytics',
+      'Priority support',
+      'Custom integrations'
+    ],
+    button: {
+      label: 'Get Started'
+    }
+  }
+})
+</script>
+
+<template>
+  <UPricingPlan />
+</template>
diff --git a/packages/examples/src/examples/ui/PricingTableExample.vue b/packages/examples/src/examples/ui/PricingTableExample.vue
new file mode 100644
index 00000000..d767a087
--- /dev/null
+++ b/packages/examples/src/examples/ui/PricingTableExample.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tiers = ref([
+  {
+    id: 'solo',
+    title: 'Solo',
+    price: '$249',
+    description: 'For indie hackers.',
+    billingCycle: '/month',
+    button: {
+      label: 'Buy now',
+      variant: 'subtle'
+    }
+  },
+  {
+    id: 'team',
+    title: 'Team',
+    price: '$499',
+    description: 'For growing teams.',
+    billingCycle: '/month',
+    button: {
+      label: 'Buy now'
+    }
+  },
+  {
+    id: 'enterprise',
+    title: 'Enterprise',
+    price: 'Custom',
+    description: 'For large organizations.',
+    button: {
+      label: 'Contact sales',
+      color: 'neutral'
+    }
+  }
+])
+const sections = ref([
+  {
+    title: 'Features',
+    features: [
+      {
+        title: 'Number of developers',
+        tiers: {
+          solo: '1',
+          team: '5',
+          enterprise: 'Unlimited'
+        }
+      },
+      {
+        title: 'Projects',
+        tiers: {
+          solo: true,
+          team: true,
+          enterprise: true
+        }
+      }
+    ]
+  },
+  {
+    title: 'Security',
+    features: [
+      {
+        title: 'SSO',
+        tiers: {
+          solo: false,
+          team: true,
+          enterprise: true
+        }
+      }
+    ]
+  }
+])
+</script>
+
+<template>
+  <UPricingTable
+    :tiers="tiers"
+    :sections="sections"
+  />
+</template>
diff --git a/packages/examples/src/examples/ui/UserExample.vue b/packages/examples/src/examples/ui/UserExample.vue
new file mode 100644
index 00000000..07bf7541
--- /dev/null
+++ b/packages/examples/src/examples/ui/UserExample.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    name: 'John Doe',
+    description: 'Software Engineer',
+    avatar: {
+      src: 'https://i.pravatar.cc/150?u=john-doe'
+    }
+  }
+})
+</script>
+
+<template>
+  <UUser />
+</template>
diff --git a/playgrounds/nuxt/app/app.config.ts b/playgrounds/nuxt/app/app.config.ts
index aec89678..0c95fd3b 100644
--- a/playgrounds/nuxt/app/app.config.ts
+++ b/playgrounds/nuxt/app/app.config.ts
@@ -3,6 +3,10 @@ export default defineAppConfig({
     colors: {
       primary: 'green',
       neutral: 'zinc'
+    },
+    icons: {
+      light: 'i-heroicons-sun',
+      dark: 'i-heroicons-moon'
     }
   }
 })

From ee55ed8227f286e886cfae3c365816460c70a61e Mon Sep 17 00:00:00 2001
From: Romain Hamel <romain@rohm.dev>
Date: Sun, 28 Sep 2025 13:49:36 +0200
Subject: [PATCH 2/2] feat(examples): improve `@nuxt/ui` pro components
 examples

---
 packages/core/src/runtime/preview.vue         |  2 +-
 packages/examples/src/assets/ui/index.css     | 36 +++++++
 .../examples/ui/ChangelogVersionsExample.vue  |  2 +-
 .../src/examples/ui/ColorModeImageExample.vue |  9 +-
 .../src/examples/ui/LocaleSelectExample.vue   |  9 +-
 .../src/examples/ui/PricingTableExample.vue   | 93 ++++++-------------
 .../examples/src/examples/ui/UserExample.vue  |  4 +-
 playgrounds/nuxt/app/app.config.ts            |  4 -
 8 files changed, 72 insertions(+), 87 deletions(-)

diff --git a/packages/core/src/runtime/preview.vue b/packages/core/src/runtime/preview.vue
index fc6de94c..36630aa0 100644
--- a/packages/core/src/runtime/preview.vue
+++ b/packages/core/src/runtime/preview.vue
@@ -24,6 +24,6 @@ body {
   align-items: center;
   min-height: 100vh;
   min-width: fit-content;
-  padding: 24px;
+  padding: 64px;
 }
 </style>
diff --git a/packages/examples/src/assets/ui/index.css b/packages/examples/src/assets/ui/index.css
index 3ffd23ae..e29f7b7c 100644
--- a/packages/examples/src/assets/ui/index.css
+++ b/packages/examples/src/assets/ui/index.css
@@ -3,6 +3,8 @@
 :root, :host {
   --spacing: 0.25rem;
   --container-xs: 20rem;
+  --container-md: 28rem;
+  --container-5xl: 64rem;
   --radius-lg: 0.5rem;
   --aspect-video: 16 / 9;
 }
@@ -18,6 +20,10 @@
 .aspect-video {
   aspect-ratio: var(--aspect-video);
 }
+.size-10 {
+  width: calc(var(--spacing) * 10);
+  height: calc(var(--spacing) * 10);
+}
 .size-96 {
   width: calc(var(--spacing) * 96);
   height: calc(var(--spacing) * 96);
@@ -35,9 +41,21 @@
 .h-72 {
   height: calc(var(--spacing) * 72);
 }
+.max-h-96 {
+  max-height: calc(var(--spacing) * 96);
+}
+.min-h-48 {
+  min-height: calc(var(--spacing) * 48);
+}
 .min-h-60 {
   min-height: calc(var(--spacing) * 60);
 }
+.w-32 {
+  width: calc(var(--spacing) * 32);
+}
+.w-40 {
+  width: calc(var(--spacing) * 40);
+}
 .w-48 {
   width: calc(var(--spacing) * 48);
 }
@@ -50,9 +68,18 @@
 .w-96 {
   width: calc(var(--spacing) * 96);
 }
+.w-full {
+  width: 100%;
+}
 .w-xs {
   width: var(--container-xs);
 }
+.max-w-md {
+  max-width: var(--container-md);
+}
+.min-w-5xl {
+  min-width: var(--container-5xl);
+}
 .min-w-56 {
   min-width: calc(var(--spacing) * 56);
 }
@@ -62,6 +89,9 @@
 .flex-1 {
   flex: 1;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .items-center {
   align-items: center;
 }
@@ -81,6 +111,12 @@
     margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
   }
 }
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.rounded-full {
+  border-radius: calc(infinity * 1px);
+}
 .rounded-lg {
   border-radius: var(--radius-lg);
 }
diff --git a/packages/examples/src/examples/ui/ChangelogVersionsExample.vue b/packages/examples/src/examples/ui/ChangelogVersionsExample.vue
index ce1a3d2a..01b7c3d2 100644
--- a/packages/examples/src/examples/ui/ChangelogVersionsExample.vue
+++ b/packages/examples/src/examples/ui/ChangelogVersionsExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <UChangelogVersions>
+  <UChangelogVersions class="min-w-5xl">
     <UChangelogVersion
       title="Version 1.2.0"
       description="Added new features and bug fixes."
diff --git a/packages/examples/src/examples/ui/ColorModeImageExample.vue b/packages/examples/src/examples/ui/ColorModeImageExample.vue
index d04356b4..f9fc0bdc 100644
--- a/packages/examples/src/examples/ui/ColorModeImageExample.vue
+++ b/packages/examples/src/examples/ui/ColorModeImageExample.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
 extendCompodiumMeta({
   defaultProps: {
-    src: {
-      light: '/logo-light.svg',
-      dark: '/logo-dark.svg'
-    },
-    alt: 'Company Logo',
+    light: 'https://picsum.photos/id/240/320/320',
+    dark: 'https://picsum.photos/id/241/320/320',
     width: 120,
-    height: 40
+    height: 120
   }
 })
 </script>
diff --git a/packages/examples/src/examples/ui/LocaleSelectExample.vue b/packages/examples/src/examples/ui/LocaleSelectExample.vue
index 8177f42e..29255d8f 100644
--- a/packages/examples/src/examples/ui/LocaleSelectExample.vue
+++ b/packages/examples/src/examples/ui/LocaleSelectExample.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
 extendCompodiumMeta({
   defaultProps: {
     locales: [
@@ -11,13 +9,8 @@ extendCompodiumMeta({
     ]
   }
 })
-
-const modelValue = ref('en')
 </script>
 
 <template>
-  <ULocaleSelect
-    v-model="modelValue"
-    class="w-40"
-  />
+  <ULocaleSelect class="w-40" />
 </template>
diff --git a/packages/examples/src/examples/ui/PricingTableExample.vue b/packages/examples/src/examples/ui/PricingTableExample.vue
index d767a087..61e5a5e9 100644
--- a/packages/examples/src/examples/ui/PricingTableExample.vue
+++ b/packages/examples/src/examples/ui/PricingTableExample.vue
@@ -1,80 +1,43 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-const tiers = ref([
-  {
-    id: 'solo',
-    title: 'Solo',
-    price: '$249',
-    description: 'For indie hackers.',
-    billingCycle: '/month',
-    button: {
-      label: 'Buy now',
-      variant: 'subtle'
-    }
-  },
-  {
-    id: 'team',
-    title: 'Team',
-    price: '$499',
-    description: 'For growing teams.',
-    billingCycle: '/month',
-    button: {
-      label: 'Buy now'
-    }
-  },
-  {
-    id: 'enterprise',
-    title: 'Enterprise',
-    price: 'Custom',
-    description: 'For large organizations.',
-    button: {
-      label: 'Contact sales',
-      color: 'neutral'
-    }
-  }
-])
-const sections = ref([
-  {
-    title: 'Features',
-    features: [
+extendCompodiumMeta({
+  defaultProps: {
+    tiers: [
       {
-        title: 'Number of developers',
-        tiers: {
-          solo: '1',
-          team: '5',
-          enterprise: 'Unlimited'
+        id: 'solo',
+        title: 'Solo',
+        price: '$249',
+        description: 'For indie hackers.',
+        billingCycle: '/month',
+        button: {
+          label: 'Buy now',
+          variant: 'subtle'
         }
       },
       {
-        title: 'Projects',
-        tiers: {
-          solo: true,
-          team: true,
-          enterprise: true
+        id: 'team',
+        title: 'Team',
+        price: '$499',
+        description: 'For growing teams.',
+        billingCycle: '/month',
+        button: {
+          label: 'Buy now'
         }
-      }
-    ]
-  },
-  {
-    title: 'Security',
-    features: [
+      },
       {
-        title: 'SSO',
-        tiers: {
-          solo: false,
-          team: true,
-          enterprise: true
+        id: 'enterprise',
+        title: 'Enterprise',
+        price: 'Custom',
+        description: 'For large organizations.',
+        button: {
+          label: 'Contact sales',
+          color: 'neutral'
         }
       }
     ]
   }
-])
+})
 </script>
 
 <template>
-  <UPricingTable
-    :tiers="tiers"
-    :sections="sections"
-  />
+  <UPricingTable />
 </template>
diff --git a/packages/examples/src/examples/ui/UserExample.vue b/packages/examples/src/examples/ui/UserExample.vue
index 07bf7541..bbc50ef0 100644
--- a/packages/examples/src/examples/ui/UserExample.vue
+++ b/packages/examples/src/examples/ui/UserExample.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 extendCompodiumMeta({
   defaultProps: {
-    name: 'John Doe',
+    name: 'Benjamin Canac',
     description: 'Software Engineer',
     avatar: {
-      src: 'https://i.pravatar.cc/150?u=john-doe'
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
     }
   }
 })
diff --git a/playgrounds/nuxt/app/app.config.ts b/playgrounds/nuxt/app/app.config.ts
index 0c95fd3b..aec89678 100644
--- a/playgrounds/nuxt/app/app.config.ts
+++ b/playgrounds/nuxt/app/app.config.ts
@@ -3,10 +3,6 @@ export default defineAppConfig({
     colors: {
       primary: 'green',
       neutral: 'zinc'
-    },
-    icons: {
-      light: 'i-heroicons-sun',
-      dark: 'i-heroicons-moon'
     }
   }
 })