3

A decorative diamond shape for grid intersections.

Installation

bunx --bun shadcn@latest add https://ui.brodin.dev/r/diamond.json

Usage

import { Diamond } from "@/components/ui/diamond"

The Diamond component is designed to be placed at grid intersections as a decorative element. Position it absolutely within a relatively positioned container with grid borders.

Examples

Basic Grid Intersection

<div className="border-grid relative h-32 w-full border">
  <Diamond top left />
  <Diamond top right />
  <Diamond bottom left />
  <Diamond bottom right />
</div>

Header Navigation

<header className="border-grid relative flex h-16 items-center border">
  <Diamond left bottom />
  <Diamond right bottom />
  {/* header content */}
</header>