Create Stunning Mosaic Layouts
A powerful and flexible React component library for building beautiful, responsive mosaic grid layouts with customizable animations and interactions.
Quick Installation
Get started with Meta Mosaic in seconds
npm install meta-mosaicyarn add meta-mosaicPowerful Features
Everything you need to build stunning mosaic layouts with ease
Fully Customizable
Easily customize colors, spacing, animations, and more to match your design system.
Lightning Fast
Optimized for performance with zero unnecessary re-renders and smooth animations.
Responsive Design
Built-in responsive breakpoints that work beautifully on all device sizes.
TypeScript Support
Written in TypeScript with full type definitions for excellent developer experience.
Interactive Elements
Built-in support for click handlers, hover effects, and custom interactions.
Beautiful Animations
Smooth, performant animations powered by modern CSS and optimized transitions.
Code Examples
Learn by example with these simple code snippets
Basic Usage
import { MetaMosaic } from 'meta-mosaic';
function App() {
return (
<MetaMosaic
gridSize={3}
items={myItems}
onItemClick={(item) => console.log(item)}
/>
);
}Custom Styling
import { MetaMosaic } from 'meta-mosaic';
function App() {
return (
<MetaMosaic
gridSize={4}
items={myItems}
itemClassName="rounded-xl shadow-lg"
gap={16}
animationDuration={300}
/>
);
}With TypeScript
import { MetaMosaic, MosaicItem } from 'meta-mosaic';
interface MyItem extends MosaicItem {
title: string;
imageUrl: string;
}
function App() {
const items: MyItem[] = [...];
return (
<MetaMosaic<MyItem>
gridSize={3}
items={items}
renderItem={(item) => (
<Image
src={item.imageUrl}
alt={item.title}
width={300}
height={200}
className="rounded-lg"
/>
)}
/>
);
}Frequently Asked Questions
Find answers to common questions about Meta Mosaic
Ready to Build Something Amazing?
Join developers worldwide who are creating beautiful mosaic layouts with Meta Mosaic. Get started in minutes.