Library navigation
Layout
Media
Data Display
Feedback & Overlays
Visual Effects
Navigation
Controls
Cards
Illustrations
A little guidance

Space for the next idea.

Fine lines. Quiet corners. Your content at the center.

Guide Card

A minimal card framed by extended inset lines and small cross marks. Gaps around each intersection keep the guides separate from the corner markers.

Installation

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

Usage

tsx
import { GuideCard } from "@/components/hangry-ui/components/guide-card";


<GuideCard className="max-w-xl">
  Your content goes here.
</GuideCard>

Props

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

Setup notes

The guide lines sit 32px inside the card on small screens and 48px on larger screens. Each intersection has a 24px gap and a small cross marker. Shared border and muted foreground tokens adapt the design to light and dark themes.

Decorative elements are hidden from assistive technology and do not intercept clicks. The background is transparent, and content determines the height. This static, memoized component is server-compatible and has no animation dependency.