https://github.com/rortan134/base-ui-masonry
A responsive, highly optimized, justified masonry layout component with support for variable column widths and virtualization built for being used alongside BaseUI in React projects.
https://github.com/rortan134/base-ui-masonry
accessibility base-ui design-system react react-components ui
Last synced: 25 days ago
JSON representation
A responsive, highly optimized, justified masonry layout component with support for variable column widths and virtualization built for being used alongside BaseUI in React projects.
- Host: GitHub
- URL: https://github.com/rortan134/base-ui-masonry
- Owner: rortan134
- License: mit
- Created: 2026-05-03T23:17:10.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2026-05-08T15:35:38.000Z (about 2 months ago)
- Last Synced: 2026-05-08T16:44:14.200Z (about 2 months ago)
- Topics: accessibility, base-ui, design-system, react, react-components, ui
- Language: TypeScript
- Homepage:
- Size: 25.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# base-ui-masonry
A responsive, highly optimized, justified masonry layout component with support for variable column widths and virtualization built for being used alongside [BaseUI](https://base-ui.com/) in React projects.
Very recommended to use with `babel-plugin-react-compiler`.
## Why
CSS `column`-based masonry layouts reorder items vertically, breaking logical tab order and keyboard navigation. True masonry requires absolute positioning with explicit top/left coordinates, but computing those layouts efficiently becomes difficult as the number of items grows.
Scroll performance and layout stability introduce further challenges. As items resize or new ones are measured, the layout must update incrementally without causing visible jumps or expensive recalculations. Responsive column counts, variable-width items, and justified row packing each add another layer of complexity.
base-ui-masonry provides a low-level, virtualized masonry and justified-layout engine that preserves DOM order, uses interval-tree spatial indexing for O(log n) scroll queries, integrates with BaseUI's resize observation and animation frame primitives, and follows BaseUI's component practices for smooth, accessible, performant layouts.
## 1. Installation
### Install dependencies
```bash
npm install justified-layout @base-ui/react @base-ui/utils
```
```bash
pnpm add justified-layout @base-ui/react @base-ui/utils
```
```bash
bun add justified-layout @base-ui/react @base-ui/utils
```
```bash
yarn add justified-layout @base-ui/react @base-ui/utils
```
### Copy and paste the following code into your project
[masonry.tsx](./src/masonry.tsx)
and [justified-layout.d.ts](./justified-layout.d.ts) if you run into type issues.
## 2. Anatomy
Import the parts, and compose them together.
```tsx
import {
Masonry,
MasonryItem,
} from "@/components/ui/masonry";
return (
)
```
Inspired by [DiceUI](https://www.diceui.com/docs/components/base/masonry) and heavily modified.
## License
MIT