romhml · romhml · Sep 28, 2025 · Sep 26, 2025 · Sep 28, 2025
diff --git 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
@@ -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/AuthFormExample.vue 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,16 @@
+<template>
+  <UChangelogVersions class="min-w-5xl">
+    <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    light: 'https://picsum.photos/id/240/320/320',
+    dark: 'https://picsum.photos/id/241/320/320',
+    width: 120,
+    height: 120
+  }
+})
+</script>
+
+<template>
+  <UColorModeImage />
+</template>
diff --git a/packages/examples/src/examples/ui/ColorModeSelectExample.vue 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
@@ -0,0 +1,3 @@
+<template>
+  <UColorModeSwitch />
+</template>