shadcn.io is not affiliated with official shadcn/ui
Centered Crosshatch Background Hero Block for React
A compact centered hero for a magazine on a crosshatch weave that fills the page column between the rails, with a pill, a headline, a Shine Button and an outline button.
Installation
Overview
A compact centered hero on an editorial crosshatch background. A fine diagonal weave, like an engraving's shading, fills the page column between the two rails and fades out toward the bottom; a radial mask keeps it clear behind the headline and lets it show toward the edges, where it meets the top rule and the solid side lines. On top sit an announcement pill for the latest issue, a headline, a sentence, a Shine Button as the one primary action and an outline button. The weave is our Grid Pattern turned 45 degrees, with Guides, Announcement, Status, Shine Button and Button, Lucide icons, Tailwind CSS and a CSS entrance. The fictional product is Margin, a quarterly magazine. For editorial publications, print-inspired brands, magazines and any product that wants a hand-drawn texture instead of a dot grid or a gradient.
FAQ
How do I change the crosshatch's density, weight and angle?
The weave is a GridPattern inside the background layer. Its cellSize is the gap between lines, in pixels: smaller is denser. Its lineColor sets how strong the lines are, here 14% of the theme's --foreground, mixed with color-mix() so it follows light and dark mode. The rotate-45 class turns the square grid into a diagonal weave: change it to rotate-30 or rotate-12 for a different angle, or remove it for a plain grid.
How does the pattern stay clear behind the text?
Two masks on the background layers. A radial one, radial-gradient(ellipse 55% 70% at 50% 50%, transparent 20%, black 100%), hides the weave around the headline and lets it in toward the edges; a linear one fades the whole weave out toward the bottom, so it doesn't end in a hard edge. Move the center or change the stops to grow or shrink the clear area. The masks work on any surface, so the weave fades into the page in both themes.
Why is the pattern layer so much larger than the column?
A grid turned 45 degrees no longer covers the box it was drawn in: its corners would show empty triangles. The pattern is laid out at three times the column's width and height (-inset-full) before it turns, so it reaches every corner, even on a tall, narrow phone layout. The layer clips the rest, and the lines are one SVG pattern, so the extra size costs nothing.
Is the crosshatch accessible?
The weave is decoration: it's hidden from screen readers and lets clicks through. Under the copy it's masked away, so the headline, sentence and buttons keep their contrast in both themes. The headline is the block's one h1, the pill and both calls to action are links named by their text, and the status dot and the pill's arrow are hidden from assistive technology.
Where do the buttons link to?
The pill, Start reading and Browse the archive are links to #: point them at your latest issue, your reader and your archive.
On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.
When should I use a crosshatch instead of a dot grid or a gradient?
Use the crosshatch for an editorial or print-inspired feel: ink illustration, newspapers, engraving. A dot grid reads as technical and developer-focused, and a gradient as modern SaaS. The crosshatch suits magazines, publishers and content-first products, where the typography carries the page and the background only adds texture.
Related
- Pro
Centered Diagonal Line Grid Hero
BackdropsA large centered hero over a diagonal line grid that fades toward its edges, with an announcement link, a Shine Button and three checked features as ruled rows between the rails.
- Pro
Centered CTA Dotted Background Hero
BackdropsA showcase centered hero on a dot grid framed by hairlines: the dots light up near the pointer, with a release pill, a display headline, a Shine Button and an outline button.
- Pro
Centered Noise Texture Hero
BackdropsA compact centered hero on a fine paper texture inside a hairline frame, with an announcement pill, a two-line headline, three features and the Shine Button.
- Pro
Centered Radial Gradient Stats Hero
BackdropsA compact centered hero under a soft monochrome glow, with the side rails fading in from the top, an announcement link, a Shine Button, an avatar row and a band of three figures.
- Pro
Centered Minimal Hero
Type and motionA compact centered type-only hero: a two-line headline with a muted second line, one sentence, a Shine Button and a second action, on faded rails.
- Pro
Centered Gradient Mesh Hero
BackdropsA centered showcase hero over a quiet monochrome mesh that drifts slowly behind the section, with a Shine Button, an outline button and a framed window of a moodboard canvas that runs on below the fold.