Isometric Blocks
Isometric city blocks with 3D hover elevation effect.
Main Features of Isometric Blocks
How to Use Isometric Blocks in Next.js
Installation Guide for Isometric Blocks
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
gridSize | number | 9 | Number of blocks in the grid (n x n) |
containerSize | string | w-[500px] h-[500px] | Size of the container |
backgroundColor | string | bg-[#0a0a0a] | Background color of the component |
rotateX | number | 60 | X-axis rotation in degrees |
rotateZ | number | -45 | Z-axis rotation in degrees |
gap | string | gap-4 | Gap between blocks |
hoverZ | number | 80 | Z-axis translation on hover |
defaultColor | string | #262626 | Default color of blocks |
hoverColor | string | #6366f1 | Color of blocks on hover |
topColor | string | #404040 | Color of the top face |
topHoverColor | string | #818cf8 | Color of the top face on hover |
sideColor | string | #171717 | Color of the side faces |
sideHoverColor | string | #4f46e5 | Color of the side faces on hover |
blockSize | string | w-32 h-32 | Size of each block |
springStiffness | number | 300 | Spring animation stiffness |
springDamping | number | 20 | Spring animation damping |
className | string | Additional CSS classes |
Related Components
When to Use
This customizable UI component is great for technical blogs, data visualization, or architectural firm websites. Best suited for mobile app interfaces built with React (web) or Next.js sites that want to showcase a grid-based interface with an isometric 3D perspective.
Best Practices
Optimize for performance by being mindful of the `gridSize`; a 3x3 or 4x4 grid is usually sufficient for a strong visual impact. Follow React best practices by ensuring the `rotateX` and `rotateZ` angles are set to standard isometric values (around 60 and -45) for the most natural look. Maintain scalable component architecture by using the `blockSize` prop for responsive layouts.
Why This Component Matters in Modern UI Development
Isometric design is a hallmark of premium modern frontend development. This animated UI component allows developers to build complex voxel-like grids that respond to user interaction, adding a layer of depth to your real-world application architecture.
Frequently Asked Questions
QWhat is the best grid size for performance?
A 3x3 grid (9 blocks total) is the default and provides an excellent balance of visual detail and performance across all devices.
QCan I change the colors for individual blocks?
The current implementation uses global hover and top face colors, but it can be extended to support per-block color mapping.
QIs this component accessible?
Yes, you can add ARIA labels to the individual block containers to ensure accessibility compliance for screen readers.