Command Palette

Search for a command to run...

Docs
Grid Frame Hero

Grid Frame Hero

Shadcn hero section — a bento-style hero with a framed grid layout, dual feature cards with illustrations, and a trusted-by logo strip. Fully theme-adaptive.

Installation

Usage

import { GridFrameHero } from "@/components/ruixen/grid-frame-hero";
 
export default function Page() {
  return (
    <GridFrameHero
      title="Modern Solutions for Customer Engagement"
      description="Our comprehensive analytics and experimentation platform empowers your team to make data-driven decisions."
      primaryAction={{ href: "/signup", label: "Start Testing for free" }}
      microcopy="No credit card required!"
    />
  );
}

Props

PropTypeDefaultDescription
titleReactNodeRequiredMain headline content.
descriptionstring-Subtitle paragraph below the headline.
primaryActionAction-Primary CTA — renders as a styled link button.
microcopystring-Small line shown under the CTA (e.g. "No card needed!").
features[GridFrameFeature, GridFrameFeature]Two default cards with illustrationsA tuple of two feature cards rendered side-by-side.
classNamestring-Extra classes appended to the outer <section>.

Types

type Action = { href: string; label: string };
 
interface GridFrameFeature {
  icon?: React.ReactNode;
  title: string;
  highlight: string;
  description: string;
  illustration?: React.ReactNode;
}

Features

  • Framed grid layout — decorative rows and side columns frame the central content area without external assets.
  • Theme adaptive — uses semantic bg-card, bg-border, text-foreground, text-muted-foreground, and bg-primary so it inverts cleanly between light and dark mode.
  • CSS dither pattern — a subtle radial-dot overlay masked with a diagonal gradient adds depth without an image dependency.
  • Responsive — outer rails collapse to a slim bar on mobile and the feature cards stack on small screens.
  • Composable — both blocks (hero, features) are driven by props; override features to replace the default illustrations.
  • Zero runtime deps — only lucide-react for the default feature icons.
Structured Hero SectionPricing Landing Hero