Bracket Card

A dashed inner border with four crisp corner brackets.

Installation

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

Usage

import { BracketCard } from "@/components/hangry-ui/components/bracket-card";

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

Props

• variant: "brackets" (default) or "corners". Corner Card provides the latter style as a standalone component.

• 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.