{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero",
  "title": "Hero",
  "description": "one promise, one primary action · `media` for a product shot, omit for centred",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/hero.tsx",
      "content": "import { cn } from 'cn';\nimport type * as React from 'react';\n\ntype Props = {\n  /** Short line above the title: a category, a launch, \"New\". */\n  eyebrow?: React.ReactNode;\n  title: string;\n  description?: string;\n  /** One primary Button and at most one secondary. */\n  actions?: React.ReactNode;\n  /** A product shot or illustration (compose real components rather than an image). Omit for a centred text hero. */\n  media?: React.ReactNode;\n  className?: string;\n};\n\n/** The top of a marketing page: one promise, one primary action. */\nexport function Hero({ eyebrow, title, description, actions, media, className }: Props) {\n  return (\n    <section\n      className={cn(\n        'grid items-center gap-10 py-16 md:py-24',\n        media ? 'lg:grid-cols-2' : 'mx-auto max-w-3xl text-center',\n        className\n      )}>\n      <div className={cn('flex flex-col gap-5', !media && 'items-center')}>\n        {eyebrow ? <p className=\"text-primary text-sm font-semibold\">{eyebrow}</p> : null}\n        <h1 className=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">{title}</h1>\n        {description ? <p className=\"text-muted-foreground max-w-xl text-lg leading-8\">{description}</p> : null}\n        {actions ? <div className=\"flex flex-wrap gap-3\">{actions}</div> : null}\n      </div>\n      {media ? <div className=\"min-w-0\">{media}</div> : null}\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/hero.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Hero"
    ],
    "api": "<Hero eyebrow? title description? actions? media? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "marketing"
  ],
  "type": "registry:component"
}