Feature Matrix & Capabilities Grid
Core Architecture & Feature Matrix
3-column feature capability grid with icon badges, bold headings, and hover border highlight transitions.
>npx @shavin/ui add block-feature-grid-matrix
Core Architecture
Everything You Need for Enterprise UI
Built from the ground up for speed, accessibility, and AI pair programming.
Two-Tier Token System
Strict separation between raw foundation scales (--n-*) and semantic role tokens (--bg-surface, --accent, --hairline).
Spatial Multi-Frame Canvas
Simultaneously design across Desktop (1440px), Tablet (768px), and Mobile (375px) viewports with zero layout shift.
Zero-Hallucination MCP
Integrated Model Context Protocol server lets AI agents read guidelines, validate tokens, and generate clean TSX.
When to Use & Guidelines
- Highlight product benefits, design system tokens, or key technical capabilities.
- Uses translucent icon badges with theme accent colors.
- Smooth border hover transitions encourage user exploration.