TechnicalCollage

Examples #

'use client';

import { TechnicalCollage } from '@coreux/ui';

export default function Blueprint() {
  return (
    <div role="group" aria-label="Editorial note with a decorative blueprint" style={{ display: 'flex', alignItems: 'center', gap: 16, width: 480, height: 220, paddingRight: 24, background: '#F4F1E9', color: '#0B1221' }}>
      <div style={{ flexShrink: 0, padding: 24, width: 240, height: 180 }}>
        <TechnicalCollage variant="blueprint" className="h-full w-full" />
      </div>
      <div>
        <h3 className="font-display" style={{ margin: 0, fontSize: 28, lineHeight: 1.2, fontWeight: 700 }}>Ideas in progress.</h3>
        <p style={{ margin: '12px 0 0', fontSize: 14, lineHeight: 1.5 }}>A technical accent beside an editorial note.</p>
      </div>
    </div>
  );
}

Usage & restraint #

Use this small filler graphic to give an editorial composition a visual pause. Place it beside a short note or in unused card space. Its blueprint and layered blocks are ambient decoration, not a diagram of real architecture or data.

• Blueprint retains the navy grid, outlined rectangle, and crosshair/plus marks.
• Collage retains the three offset slate, pale-steel, and navy blocks on ivory.

Both seed motifs retain their 240 × 180 px wrapper with 24 px padding. With the documented stylesheet's border-box sizing, this gives the motif a 192 × 132 px drawing area. The complete 480 × 220 px examples add a separate headline and caption beside that wrapper. All content, sizing, and spacing are included in the copied source.

The blueprint already contains registration marks, so it rarely needs another CrosshairMark nearby. Choose HalftoneCircle for open grain around a headline or HandDrawnUnderline for one phrase instead of adding competing decoration.

Appearance & constraints #

Supply a definite height. The root is a relative, overflow-hidden div and all internal shapes are absolutely positioned, so they do not create an intrinsic height. className="h-full w-full" works in the examples because the padded parent has explicit dimensions. An unsized parent with h-full can leave the graphic collapsed.

Blueprint uses the navy surface, a 24-unit repeating grid with pale-steel strokes at 25% opacity, a cornflower rectangle, a 16 px crosshair, and a 12 px plus. The collage uses ivory with overlapping slate at 80% opacity, pale steel, and navy at 90% opacity. These colors and internal positions are authored in the component, not exposed as independent props.

There are only two public props: variant and className. There is no tone, field mode, color, width, height, style, children, or custom-content API. Use className to establish the outer dimensions and layout. A surface class alone does not recolor the internal shapes into a coherent theme; blueprint and collage are distinct compositions, not automatic light/dark modes.

Percentage-positioned blocks adapt to the root box, while the blueprint's grid spacing and registration-mark sizes remain fixed. Extreme aspect ratios can crowd or crop the artwork; the component clips overflow. It does not validate dimensions or variant strings at runtime. Use the declared variants and inspect your chosen box size. No animation runs automatically.

Props #

The default blueprint variant comes from the installed implementation. A className is technically optional, but visible rendering still needs a height supplied by the layout.

Accessibility & layout #

The root div has role="presentation" and aria-hidden="true", hiding its entire graphic subtree from assistive technology. Keep meaningful text and controls in adjacent elements outside that subtree, as the examples do. The component has no keyboard focus, accessible data description, interactive behavior, or event-handler passthrough.

Never use the rectangles as the only explanation of a process or dataset. Provide that information in readable text or a genuinely informative diagram. The low-contrast grid is decorative; the nearby headline and caption still need readable contrast and clear space. Avoid placing small body copy over the busy graphic.

The 480 × 220 px copied composition is fixed for comparison. Fit to canvas scales everything, including the adjacent text, while Actual size preserves geometry within a horizontally scrollable preview. For a real narrow layout, stack the note and graphic or hide the graphic, preserving the text and a definite drawing-area height whenever the motif remains visible.

Consumer setup #

Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.

Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.

The quick start walks through a copied StatBlock in a minimal app.

Source & revision #

This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.

Revision and upgrade notes · Contribution and coverage guide