craftbits*

Retro Decor

A small, decorative inline-SVG ornament for retro-themed layouts. Three variants — a horizontal divider, a 90 degree corner bracket, and a four-pointed sparkle — share a single viewBox so they swap cleanly. Designed for the decor slot of RetroBlog / RetroHeader, but works anywhere an inline SVG is allowed.

Customize
Ornament
divider
48px
1.5
fg-muted

Installation

npx shadcn@latest add https://craftbits.dev/r/retro-decor.json

Usage

import { RetroDecor } from "@craft-bits/core";
 
<RetroDecor variant="divider" size={64} />

To theme via the surrounding text color (the default currentColor fill / stroke), wrap in any text-cb-* utility.

Understanding the component

  1. Three variants, one viewBox. Every variant renders inside a 48-unit square viewBox so a single size prop scales them uniformly. divider is a horizontal bar with a centered diamond; corner is an L-bracket; sparkle is a filled four-point star.
  2. Decorative, never announced. The root SVG carries aria-hidden="true", focusable={false}, and pointer-events: none so the ornament never enters the accessibility tree or steals focus.
  3. Color flows from the parent. accentColor defaults to currentColor, inheriting the wrapping text color — no theme prop drilling. Pass any CSS color to override.
  4. Static — no motion. RetroDecor is fully static. Motion, if needed, belongs to the parent.
  5. Generalized from terminal-dreams. The source primitive was two project-specific full-screen DOM overlays (scanline grid plus cursor glow) tied to a CSS module. Those don't generalize — they belong to a page shell, not a reusable widget. This version replaces them with composable inline-SVG ornaments.

Variants

  • Divider — <RetroDecor variant="divider" />
  • Corner bracket — <RetroDecor variant="corner" />
  • Sparkle — <RetroDecor variant="sparkle" />
  • Explicit accent — <RetroDecor variant="divider" accentColor="#4A7BF7" />

Props

PropTypeDefaultDescription
variant'divider' | 'corner' | 'sparkle''divider'Which ornament shape to render.
sizenumber48Width and height in px (viewBox scales uniformly).
accentColorstring'currentColor'CSS color for the ornament's stroke / fill.
strokeWidthnumber1.5Stroke width in viewBox units (stroked variants only).
classNamestring—Extra classes merged onto the root SVG.

Accessibility

  • The root SVG carries aria-hidden="true" and focusable={false} — RetroDecor is purely decorative and screen readers skip it.
  • pointer-events: none and user-select: none are applied so the ornament never blocks clicks or text selection on layered content.
  • No motion is rendered — there is nothing to gate behind prefers-reduced-motion.
  • Color tinting flows from currentColor by default, so the ornament inherits whatever contrast the wrapping text already meets.

Credits

  • Extracted from: terminal-dreams (src/components/retro/RetroDecor.tsx).