第 2 课：shadcn/ui

┌─────────────────────────────────────────────────────────────────┐
│  🎯 核心观点：shadcn/ui 不是组件库，是代码分发平台               │
├─────────────────────────────────────────────────────────────────┤
│  📚 你将学到：                                                   │
│    • 理解 Open Code 哲学：为什么"开放代码"优于"安装依赖"       │
│    • 掌握 CLI 工具、Skills 和 MCP Server 的使用方法              │
│    • 深入 Registry 系统和新组件（Field、Item、Input Group 等）   │
│    • 了解 shadcn/ui 生态工具（magic-ui、TweakCN、v0.dev）        │
│    • 学会横向对比各类组件库，做出正确的技术选型                  │
│    • 实战：初始化项目、添加组件、用 AI 定制组件                  │
│    • 掌握创建自定义 Registry 和 AI 集成的方法                    │
└─────────────────────────────────────────────────────────────────┘

import { Modal } from 'antd';

// AI 的尝试：通过 CSS 覆盖
<Modal open={isOpen} onCancel={handleClose} title="设置" className="custom-modal">
  <p>内容区域</p>
</Modal>

/* AI 不得不写一堆覆盖样式 */
.custom-modal .ant-modal-close {
  left: 12px;
  right: auto;
}
.custom-modal .ant-modal-mask {
  background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
}

// 直接修改 components/ui/dialog.tsx
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-gradient-to-br from-black/60 to-black/30",  // ✅ 直接改
      "data-[state=open]:animate-in data-[state=closed]:animate-out",
      className
    )}
    {...props}
  />
))

const DialogClose = React.forwardRef(({ className, ...props }, ref) => (
  <DialogPrimitive.Close
    ref={ref}
    className={cn(
      "absolute left-4 top-4 rounded-sm opacity-70",  // ✅ 直接改位置
      className
    )}
    {...props}
  >
    <X className="h-4 w-4" />
  </DialogPrimitive.Close>
))

// node_modules/antd/es/button/button.js
function Button({ loading, children, ...props }) {
  return (
    <button {...props}>
      {loading && <LoadingIcon />}  {/* 内部组件，你改不了 */}
      {children}
    </button>
  )
}

components/
  ui/
    button.tsx  ← 完整的源码，在你的项目里，你可以随意修改

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

// 使用 CVA 定义样式变体
const buttonVariants = cva(
  // 基础样式
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline: "border border-input bg-background shadow-sm hover:bg-accent",
        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: { variant: "default", size: "default" },
  }
)

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)

export { Button, buttonVariants }

npx shadcn@latest init

✔ Which style would you like to use? › New York
✔ Which color would you like to use as base color? › Zinc
✔ Do you want to use CSS variables for colors? › yes
✔ Where is your global CSS file? › app/globals.css
✔ Configure the import alias for components: › @/components

components/
  ui/              ← 组件目录（空的）
lib/
  utils.ts         ← cn 工具函数
components.json    ← 配置文件

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

{
  "name": "button",
  "type": "components:ui",
  "files": [
    {
      "name": "button.tsx",
      "content": "import * as React from \"react\"..."
    }
  ],
  "dependencies": ["@radix-ui/react-slot", "class-variance-authority"],
  "registryDependencies": []
}

import { cva, type VariantProps } from "class-variance-authority"

// 1️⃣ 创建变体配置
const buttonVariants = cva(
  // 🟢 基础样式：所有变体都会应用这些样式
  [
    "inline-flex items-center justify-center",     // 布局
    "gap-2 whitespace-nowrap",                     // 间距
    "rounded-md text-sm font-medium",              // 外观
    "transition-colors",                            // 过渡
    "focus-visible:outline-none focus-visible:ring-1", // 焦点
    "disabled:pointer-events-none disabled:opacity-50", // 禁用
  ],
  {
    // 🟡 变体定义
    variants: {
      // 样式变体
      variant: {
        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      // 尺寸变体
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    // 🟣 默认值
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

// 2️⃣ 类型推导
type ButtonVariants = VariantProps<typeof buttonVariants>
// 结果：{ variant?: "default" | "destructive" | ... ; size?: "default" | "sm" | ... }

// 3️⃣ 使用
buttonVariants({ variant: "destructive", size: "lg" })
// 输出："inline-flex items-center ... bg-destructive ... h-10 rounded-md px-8"

// lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// ✅ 处理条件类名
cn("px-4", isActive && "bg-blue-500", disabled && "opacity-50")
// 结果："px-4 bg-blue-500"(假设 isActive=true, disabled=false)

// ✅ 解决冲突：后者覆盖前者
cn("px-4 py-2", "px-6")
// 结果："py-2 px-6"(不是 "px-4 py-2 px-6")

// ✅ 处理对象形式
cn({
  "bg-red-500": hasError,
  "bg-green-500": isSuccess,
})

// ✅ 处理数组
cn(["flex", "items-center"], className)

import { Slot } from "@radix-ui/react-slot"

// Button 组件内部
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ asChild = false, ...props }, ref) => {
    // 根据 asChild 决定渲染什么
    const Comp = asChild ? Slot : "button"
    return <Comp ref={ref} {...props} />
  }
)

// Slot 的简化实现
function Slot({ children, ...props }) {
  if (React.isValidElement(children)) {
    return React.cloneElement(children, {
      ...props,           // 父组件的 props（如 className、onClick）
      ...children.props,  // 子组件的 props
    })
  }
  return null
}

// 场景 1：Button 作为链接
import Link from "next/link"

<Button asChild>
  <Link href="/dashboard">进入控制台</Link>
</Button>

// 场景 2：Dialog.Trigger 自定义触发器
<Dialog.Trigger asChild>
  <Button variant="destructive">删除</Button>
</Dialog.Trigger>

// 场景 3：DropdownMenu.Item 作为链接
<DropdownMenu.Item asChild>
  <a href="/settings">设置</a>
</DropdownMenu.Item>

// components/ui/dialog.tsx
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"

// 🟢 直接导出 Radix 原语
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close

// 🟡 包装遮罩层，添加样式和动画
const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      // 基础样式
      "fixed inset-0 z-50 bg-black/80",
      // 打开动画
      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
      // 关闭动画
      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
      className
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

// 🟣 包装内容区域，包含 Overlay 和关闭按钮
const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    {/* 自动渲染遮罩层 */}
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        // 定位和尺寸
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg",
        "translate-x-[-50%] translate-y-[-50%]",
        // 外观
        "gap-4 border bg-background p-6 shadow-lg sm:rounded-lg",
        // 动画
        "duration-200",
        "data-[state=open]:animate-in data-[state=closed]:animate-out",
        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
        className
      )}
      {...props}
    >
      {children}
      {/* 内置关闭按钮 */}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

// 🟠 便利组件：Header 和 Footer
const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
DialogFooter.displayName = "DialogFooter"

// 🟤 包装 Title 和 Description
const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* 🌞 亮色模式 */
    --background: 0 0% 100%;           /* 白色背景 */
    --foreground: 222.2 84% 4.9%;      /* 深色文字 */
    
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    
    --primary: 222.2 47.4% 11.2%;      /* 主色 */
    --primary-foreground: 210 40% 98%;
    
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    
    --destructive: 0 84.2% 60.2%;      /* 危险色 */
    --destructive-foreground: 210 40% 98%;
    
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    
    --radius: 0.5rem;                   /* 圆角 */
  }

  .dark {
    /* 🌙 暗色模式 */
    --background: 222.2 84% 4.9%;       /* 深色背景 */
    --foreground: 210 40% 98%;          /* 浅色文字 */
    
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    
    /* ... 其他变量 ... */
  }
}

// 使用 CSS 变量
className="bg-primary text-primary-foreground"
// 等价于
className="bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"

import { useTheme } from "next-themes"

function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  
  return (
    <Button
      variant="outline"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    >
      {theme === "dark" ? "🌞" : "🌙"}
    </Button>
  )
}

第 1 层：基础层
  shadcn/ui
  负责：可控、可改、可复制的基础组件

第 2 层：发现与分发层
  21st.dev / Registry / 自定义 Registry
  负责：找组件、复用组件、分发组件

第 3 层：视觉增强层
  magic-ui / aceternity-ui
  负责：动效、视觉冲击、营销感

第 4 层：AI 加速层
  TweakCN / v0.dev
  负责：主题探索、代码生成

Create a command menu.

Create a command menu similar to modern shadcn-style patterns:
search input on top, grouped actions, keyboard shortcut hints,
hover and active states, compact spacing, dark-mode friendly.

npx shadcn@latest add "https://magicui.design/r/marquee"

// Marquee 示例
import Marquee from "@/components/magicui/marquee"

export function MarqueeDemo() {
  return (
    <Marquee pauseOnHover className="[--duration:20s]">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Marquee>
  )
}

// 3D Card 示例
import { CardContainer, CardBody, CardItem } from "@/components/ui/3d-card"

export function ThreeDCardDemo() {
  return (
    <CardContainer className="inter-var">
      <CardBody>
        <CardItem translateZ="50">
          <h3>3D Card</h3>
        </CardItem>
        <CardItem translateZ="100">
          <img src="/image.jpg" />
        </CardItem>
      </CardBody>
    </CardContainer>
  )
}

组件源码 + Radix 原语 + Tailwind utility + CSS Variables 主题

输入: "Create a dark theme with purple as primary color, 
      pink as accent color, and a subtle gradient background"

:root {
  --background: 224 71% 4%;
  --foreground: 213 31% 91%;
  --primary: 263 70% 50%;
  --primary-foreground: 210 40% 98%;
  --accent: 330 81% 60%;
  --accent-foreground: 222 47% 11%;
}

Create a dark B2B dashboard theme with indigo primary,
subtle violet accent, low-saturation background,
clear card hierarchy, and accessible contrast.

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71% 4%;
    --card: 0 0% 100%;
    --card-foreground: 224 71% 4%;
    --primary: 262 83% 58%;
    --primary-foreground: 210 40% 98%;
    --accent: 270 95% 75%;
    --accent-foreground: 224 71% 4%;
    --border: 220 13% 91%;
    --ring: 262 83% 58%;
    --radius: 0.75rem;
  }
}

<Button>保存设置</Button>
<Card>
  <CardHeader>
    <CardTitle>团队空间</CardTitle>
  </CardHeader>
</Card>

品牌/设计感觉
   ↓
TweakCN 快速探索主题变量
   ↓
沉淀为 Design Token / CSS Variables
   ↓
v0.dev / Cursor / 本地开发继续生成和修改组件

输入: "Create a user profile card with avatar, name, email, and edit button"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"

export function UserProfileCard() {
  return (
    <Card className="w-full max-w-md">
      <CardContent className="flex items-center gap-4 p-6">
        <Avatar className="h-16 w-16">
          <AvatarImage src="/avatar.jpg" />
          <AvatarFallback>JD</AvatarFallback>
        </Avatar>
        <div className="flex-1">
          <h3 className="font-semibold text-lg">John Doe</h3>
          <p className="text-sm text-muted-foreground">john@example.com</p>
        </div>
        <Button variant="outline" size="sm">Edit</Button>
      </CardContent>
    </Card>
  )
}

npx create-next-app@latest my-app
cd my-app

✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like to use App Router? Yes

npx shadcn@latest init

npx shadcn@latest add button card dialog

my-app/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   └── ui/
│       ├── button.tsx    ← 源码在这里
│       ├── card.tsx      ← 源码在这里
│       └── dialog.tsx    ← 源码在这里
├── lib/
│   └── utils.ts
└── components.json

// app/page.tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center p-24">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>欢迎使用 shadcn/ui</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">
            这是一个基于 Copy-Paste 哲学的组件库。
          </p>
          <Button className="w-full">开始使用</Button>
        </CardContent>
      </Card>
    </main>
  )
}

const buttonVariants = cva(
  "inline-flex items-center justify-center ...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground ...",
        // ✅ AI 添加这一行
        gradient: "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg hover:shadow-xl hover:from-purple-600 hover:to-pink-600",
      },
      // ...
    },
  }
)

<Button variant="gradient">渐变按钮</Button>

components/
  ui/              ← shadcn/ui 原始组件
  variants/        ← 自定义变体
    gradient-button.tsx
    glass-card.tsx

// https://your-registry.com/r/custom-button.json
{
  "name": "custom-button",
  "type": "components:ui",
  "files": [
    {
      "name": "custom-button.tsx",
      "content": "import * as React from \"react\"\n\nexport function CustomButton({ children, gradient = false, ...props }) {\n  return (\n    <button\n      className={cn(\n        'px-4 py-2 rounded-lg font-medium',\n        gradient && 'bg-gradient-to-r from-purple-500 to-pink-500 text-white'\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n}"
    }
  ],
  "dependencies": [],
  "registryDependencies": ["button"]
}

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "my-team": {
      "url": "https://your-registry.com/r"
    }
  }
}

# 从自定义 Registry 添加组件
npx shadcn@latest add my-team/custom-button

# 或者直接使用 URL
npx shadcn@latest add "https://your-registry.com/r/custom-button"

# 1. 初始化（不会影响现有代码）
npx shadcn@latest init

# 2. 逐步添加组件（按需）
npx shadcn@latest add button dialog

# 3. 在新功能中使用
import { Button } from "@/components/ui/button"

# 方法 1：直接覆盖（丢失自定义修改）
npx shadcn@latest add button --overwrite

# 方法 2：先对比再决定（推荐）
git stash                                    # 保存当前修改
npx shadcn@latest add button --overwrite     # 拉取最新版本
git diff components/ui/button.tsx           # 对比差异
git stash pop                                # 恢复修改
# 手动合并差异

// 移动端底部抽屉示例
import { Drawer } from "vaul"

<Drawer.Root>
  <Drawer.Trigger asChild>
    <Button>打开菜单</Button>
  </Drawer.Trigger>
  <Drawer.Content>
    {/* 移动端友好的内容 */}
  </Drawer.Content>
</Drawer.Root>

pnpm dlx skills add shadcn/ui

// .mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

# 你可以直接对 AI 说：
"Show me all available components in the shadcn registry"
"Add the button, dialog and card components to my project"
"Find me a login form from the shadcn registry"
"Build a landing page using components from the acme registry"

import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"

<Field>
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" placeholder="Max Leiter" />
  <FieldDescription>Choose a unique username.</FieldDescription>
  <FieldError>Username is already taken.</FieldError>
</Field>

import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"

<InputGroup>
  <InputGroupAddon>https://</InputGroupAddon>
  <InputGroupInput placeholder="your-domain" />
  <InputGroupAddon>.com</InputGroupAddon>
</InputGroup>

import { Item, ItemContent, ItemTitle, ItemDescription, ItemMedia } from "@/components/ui/item"

<Item>
  <ItemMedia variant="icon">
    <HomeIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Dashboard</ItemTitle>
    <ItemDescription>Overview of your account.</ItemDescription>
  </ItemContent>
</Item>