CornerBracket

A decorative component that adds industrial-style corner brackets to parent containers, creating the signature technical/cyberpunk aesthetic of the Synthwave Dark design system.

Import

import { CornerBracket } from '@mks2508/mks-ui/react';

Basic Usage

<div className="relative p-8 border border-white/10 rounded-lg bg-card">
<CornerBracket />
<p className="text-center">Content with corner brackets</p>
</div>

The CornerBracket renders decorative corner accents in all four corners of its nearest relative positioned parent.

Variants

Usage with DataCard

The DataCard component automatically renders CornerBracket internally. You typically don't need to add it manually when using DataCard.

Slot Overrides

<CornerBracket
  slots={{ root: 'opacity-60' }}
/>

Design Notes

• Always place inside a container with position: relative
• Best used on dark backgrounds where the subtle lines are visible
• The brackets are purely decorative and do not affect layout
• Used internally by DataCard and other showcase components

API Reference