Frame Card

A bordered container with inset guide lines and four corner dots. This is the same component that wraps the documentation previews.

Installation

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

Usage

import { FrameCard } from "@/components/hangry-ui/components/frame-card";

<FrameCard className="max-w-xl">
  <div className="p-6">
    Your content goes here.
  </div>
</FrameCard>

Props

• children: Any React content, including interactive components.
• className: Additional classes on the outer frame. Use it to set width, background, or spacing.
• Native div attributes, including style and aria-*, are forwarded to the frame.

Setup notes

The outer frame and inset lines follow the border token. Corner dots use foreground with a background-colored outline. Decorative elements are hidden from assistive technology and do not intercept clicks. The container has responsive inset spacing, a transparent background, and no fixed content height.

This static component is memoized and server-compatible, with no animation dependency. Add your own content padding inside the frame to keep text clear of the guide lines.