diff --git a/docs/app/components/content/ComponentTheme.vue b/docs/app/components/content/ComponentTheme.vue
index 461e009d2d..24d4890c0e 100644
--- a/docs/app/components/content/ComponentTheme.vue
+++ b/docs/app/components/content/ComponentTheme.vue
@@ -15,7 +15,8 @@ const props = defineProps<{
 const route = useRoute()
 const { framework } = useSharedData()
 
-const name = camelCase(props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? '')
+const name = props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? ''
+const camelName = camelCase(name)
 
 const strippedCompoundVariants = ref(false)
 
@@ -23,7 +24,7 @@ const computedTheme = computed(() => props.pro ? props.prose ? themePro.prose :
 
 const strippedTheme = computed(() => {
   const strippedTheme = {
-    ...(computedTheme.value as any)[name]
+    ...(computedTheme.value as any)[camelName]
   }
 
   if (strippedTheme?.compoundVariants) {
@@ -63,8 +64,8 @@ const component = computed(() => {
   const baseKey = props.pro ? 'uiPro' : 'ui'
 
   const content = props.prose
-    ? { prose: { [name]: strippedTheme.value } }
-    : { [name]: strippedTheme.value }
+    ? { prose: { [camelName]: strippedTheme.value } }
+    : { [camelName]: strippedTheme.value }
 
   if (props.extra?.length) {
     props.extra.forEach((extra) => {
@@ -78,7 +79,14 @@ const component = computed(() => {
   }
 })
 
-const { data: ast } = await useAsyncData(`component-theme-${name}-${hash({ props })}`, async () => {
+const themeLink = computed(() => {
+  const repo = props.pro ? 'ui-pro' : 'ui'
+  const slug = name.startsWith('content') ? `content/${name}` : name
+
+  return `https://github.com/nuxt/${repo}/blob/v3/src/theme/${slug}.ts`
+})
+
+const { data: ast } = await useAsyncData(`component-theme-${camelName}-${hash({ props })}`, async () => {
   const md = `
 ::code-collapse{class="nuxt-only"}
 
@@ -110,7 +118,7 @@ export default defineConfig({
 
 ${strippedCompoundVariants.value
   ? `
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/v3/src/theme/${name}.ts"}
+::callout{icon="i-simple-icons-github" to="${themeLink.value}" title="Compound variants"}
 Some colors in \`compoundVariants\` are omitted for readability. Check out the source code on GitHub.
 ::`
   : ''}