Corner Card

A minimal open frame with long, thin corner brackets.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/corner-card.json

Usage

import { CornerCard } from "@/components/hangry-ui/components/corner-card";

<CornerCard className="max-w-lg">
  Your content goes here.
</CornerCard>

Props

• children: Custom React content, including interactive components.
• className: Additional classes on the outer container.
• Native div attributes, including style and aria-*, are forwarded to the wrapper.

Setup notes

Colors follow the shared background, foreground, border, and primary tokens. Decorative elements are hidden from assistive technology and do not intercept pointer events. Content sets the card height; the wrapper shrinks to fit narrow containers.

This static component is memoized and server-compatible, with no animation dependency. The installation includes the existing components it reuses.