127 Components
Plus Grid Border
CardsVercel-inspired blueprint grid architecture with precision hairline section borders and interactive corner plus markers that illuminate on pointer proximity.
[+]
Blueprint Plus Gridcyan
Vercel-style architectural frame with proximity corner crosses
01 // COMPUTE0.4ms TTFB
Edge Runtime Execution
Zero-cold-start V8 isolates executing sub-millisecond payloads at 310 global edge nodes.
STAGE: ACTIVEInspect Spec →
02 // PIPELINE98.2% Cache Hit
Remote Cache Artifacts
Multi-tenant build hashes cached across continuous CI runners with bit-level reproducibility.
STAGE: ACTIVEInspect Spec →
03 // SECURITY40Tbps Capacity
Layer 7 Anomaly Shield
Automated eBPF packet mitigation absorbing volumetric SYN floods and synthetic bot scrapers.
STAGE: ACTIVEInspect Spec →
04 // ORCHESTRATION1-Click Rollback
Atomic Deployment Slugs
Zero-downtime DNS pointer swaps allowing instantaneous rollback to any previous immutable release.
STAGE: ACTIVEInspect Spec →
BLUEPRINT MESH: 4 QUADRANTS CONNECTED
CURSOR POS: OFF GRIDINTERSECTIONS: 9 NODES
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/plus-grid-border.json"
Props
TypeScript props supported by <PlusGridBorder />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | GridCardItem[] | — | Array of content cards to frame inside the plus grid system. |
| glowColor | string | "cyan" | Accent illumination color for the crosshairs and proximity borders. |
| interactiveProximity | boolean | true | Whether mouse pointer distance dynamically illuminates junction crosses. |
| className | string | — | Optional custom classes applied to the root grid container. |
Key Features
- Precision architectural hairline borders with corner '+' crosshairs at all junction nodes.
- Dynamic pointer proximity lighting that illuminates nearby crosses and borders based on mouse coordinates.
- Multiple layout presets including 2x2 quadrant and 3-column feature bento showcase.
- Interactive configuration toolbar for adjusting cross scale, border glow tone, and hover intensity.
Keyboard & Accessibility
- Decorative '+' markers are hidden from assistive technology via aria-hidden.
- Cards remain fully keyboard navigable with standard focus-visible rings.
- Respects prefers-reduced-motion by keeping illumination static without jitter.