{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "grid-frame-hero", "type": "registry:ui", "title": "Grid Frame Hero", "description": "A bento-style hero with a framed grid layout and dual feature cards with illustrations.", "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/ruixenui/grid-frame-hero.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\nimport { ArrowUp, Blocks, Palette, Paperclip } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ── types ───────────────────────────────────────────────────── */\n\ntype Action = { href: string; label: string };\n\nexport interface GridFrameFeature {\n icon?: React.ReactNode;\n title: string;\n highlight: string;\n description: string;\n illustration?: React.ReactNode;\n}\n\nexport interface GridFrameHeroProps {\n title: React.ReactNode;\n description?: string;\n primaryAction?: Action;\n microcopy?: string;\n features?: [GridFrameFeature, GridFrameFeature];\n className?: string;\n}\n\n/* ── helpers ─────────────────────────────────────────────────── */\n\nfunction OuterRail() {\n return (\n
\n
\n
\n );\n}\n\n/* ── default illustrations ───────────────────────────────────── */\n\nfunction ChatMessage({\n avatar,\n alt,\n reversed = false,\n children,\n}: {\n avatar: string;\n alt: string;\n reversed?: boolean;\n children: React.ReactNode;\n}) {\n return (\n \n {/* eslint-disable-next-line @next/next/no-img-element */}\n \n
\n {children}\n
\n
\n );\n}\n\nfunction ChatComposer() {\n return (\n
\n
\n
\n \n Message your agent...\n \n
\n
\n
\n \n \n \n \n Agents\n \n
\n \n \n \n
\n
\n
\n );\n}\n\nfunction AgentWorkflowIllustration() {\n return (\n \n
\n
\n \n Workflow completed. 847 tasks processed.\n \n \n Deploy to production\n \n \n Deployed. All systems operational.\n \n
\n
\n\n \n \n );\n}\n\nfunction ClipboardDataIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction FileDotsIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n );\n}\n\nfunction FeatherIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction PointerUpIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n \n );\n}\n\nfunction FilterSearchIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction SalesforceLogo() {\n return (\n \n \n \n );\n}\n\nfunction HubspotLogo() {\n return (\n \n \n \n );\n}\n\nfunction SheetsLogo() {\n return (\n \n \n \n \n \n );\n}\n\nconst filterCategories: ReadonlyArray<{\n label: string;\n active?: boolean;\n classes: string;\n icon: React.ReactNode;\n}> = [\n {\n label: \"Buttons\",\n active: true,\n classes:\n \"bg-blue-100 border-blue-200 dark:bg-blue-100/10 dark:border-blue-200/10\",\n icon: ,\n },\n {\n label: \"Cards\",\n classes:\n \"bg-green-100 border-green-200 dark:bg-green-100/10 dark:border-green-200/10\",\n icon: ,\n },\n {\n label: \"Inputs\",\n classes:\n \"bg-indigo-100 border-indigo-200 dark:bg-indigo-100/10 dark:border-indigo-200/10\",\n icon: ,\n },\n {\n label: \"Hero Sections\",\n classes:\n \"bg-neutral-100 border-neutral-200 dark:bg-neutral-100/10 dark:border-neutral-200/10\",\n icon: ,\n },\n {\n label: \"Navbars\",\n classes:\n \"bg-purple-100 border-purple-200 dark:bg-purple-100/10 dark:border-purple-200/10\",\n icon: ,\n },\n];\n\nfunction CategoryPanelIllustration() {\n return (\n
\n
\n {filterCategories.map((cat) => (\n \n {cat.active && (\n
\n )}\n {cat.icon}\n {cat.label}\n
\n ))}\n
\n\n \n \n
\n
\n \n
\n

\n Buttons\n

\n
\n
\n

\n Primary Variant\n

\n

\n Install any component with a single shadcn CLI command — themed by\n your tokens, no configuration required.\n

\n
\n \n \n Salesforce\n \n \n \n Hubspot\n \n \n \n Sheets\n \n
\n
\n
\n \n \n );\n}\n\nconst defaultFeatures: [GridFrameFeature, GridFrameFeature] = [\n {\n icon: ,\n title: \"Component Registry\",\n highlight: \"200+ components ready for production.\",\n description:\n \"Add any block to your project with a single shadcn CLI command.\",\n illustration: ,\n },\n {\n icon: ,\n title: \"Themeable by Design\",\n highlight: \"Adapt instantly to your brand.\",\n description:\n \"Semantic tokens drive every component, so light and dark just work.\",\n illustration: ,\n },\n];\n\n/* ── building blocks ─────────────────────────────────────────── */\n\nfunction HeroBlock({\n title,\n description,\n primaryAction,\n microcopy,\n}: Pick<\n GridFrameHeroProps,\n \"title\" | \"description\" | \"primaryAction\" | \"microcopy\"\n>) {\n return (\n
\n \n
\n
\n
\n

\n {title}\n

\n {description && (\n

\n {description}\n

\n )}\n {primaryAction && (\n
\n \n {primaryAction.label}\n \n
\n )}\n {microcopy && (\n \n {microcopy}\n \n )}\n
\n
\n
\n \n
\n );\n}\n\nfunction FeaturesBlock({\n features,\n}: {\n features: [GridFrameFeature, GridFrameFeature];\n}) {\n return (\n
\n \n
\n

Features

\n
\n
\n
\n
\n {features.map((feature, idx) => (\n \n ))}\n
\n
\n
\n
\n
\n \n
\n );\n}\n\nfunction FeatureCard({ feature }: { feature: GridFrameFeature }) {\n return (\n
\n
\n

\n {feature.icon}\n {feature.title}\n

\n

\n {feature.highlight}{\" \"}\n {feature.description}\n

\n
\n
\n {feature.illustration}\n
\n
\n );\n}\n\n/* ── component ───────────────────────────────────────────────── */\n\nexport function GridFrameHero({\n title,\n description,\n primaryAction,\n microcopy,\n features = defaultFeatures,\n className,\n}: GridFrameHeroProps) {\n return (\n
\n \n {features && }\n
\n );\n}\n\nexport default GridFrameHero;\n", "type": "registry:ui", "target": "components/ruixen/grid-frame-hero.tsx" } ] }