TkxMasonry

import { TkxMasonry } from 'tekivex-ui';

Live demo

Basic

3-column masonry with mixed heights

Quick win — 80px

Tiny — 60px

Mid — 120px

Long task — 140px

Big block — 160px

Compact — 80px

Medium — 100px

Short — 90px

Accessibility

• Keyboard navigation supported on all interactive elements
• :focus-visible outline at 2px (theme-token primary)
• ARIA roles and properties applied per WAI-ARIA 1.2
• Respects prefers-reduced-motion
• Minimum 44×44 touch target where applicable

Source

src/components/TkxMasonry.tsx

For the full interactive sandbox, open the playground.