Bento Monochrome

An elegant, minimal bento grid layout with animated Lucide icons, smooth theme transitions, and sophisticated monochrome styling. Features intersection observer for scroll-triggered animations.

Grid Studies

Monochrome Bento

A stark layout built on modular spans, animated outlines, and purposeful whitespace.

System Patterns

Layout

Foundational blocks arranged with deliberate rhythm and precise spacing across the viewport grid.

Signal Balance

Tone

Monochrome surfaces and tight contrast ratios keep focus on intent over ornamentation.

Structured Flow

Flow

Information passes through aligned channels for clarity, speed, and effortless scanning.

Clean Signals

Craft

Each icon is drawn once, animated gently, and rendered strictly in strokes for a disciplined feel.

Quiet Energy

Pulse

Subtle motion hints at responsiveness without ever distracting from the message conveyed.

Install the component using the shadcn CLI:

npx shadcn@latest add @uimix/bento-monochrome

npx shadcn@latest add @uimix/bento-monochrome

This will automatically add the component to your project.

Copy and paste the following code into your project:

Loading source…

Make sure you have the required animations in your tailwind.config.js:

tailwind.config.js

module.exports = {
theme: {
  extend: {}
}
}

tailwind.config.js

module.exports = {theme: {  extend: {}}}

Add the required classes to your global stylesheet:

app/global.css

/* Animations are injected dynamically via JavaScript */

app/global.css

/* Animations are injected dynamically via JavaScript */

Usage

import FeaturesSectionMinimal from '@/registry/default/bento-monochrome'

export default function Page() {
  return <FeaturesSectionMinimal />
}

Dependencies

This component requires lucide-react for icons:

npm install lucide-react

Features

•
Dark/Light Theme - Seamless theme switching with localStorage sync
•
Animated Icons - 5 unique icon animations: float, pulse, tilt, drift, glow
•
Intersection Observer - Scroll-triggered entrance animations
•
Dotted Grid Background - Sophisticated masked grid pattern
•
Aurora Gradients - Subtle radial gradients for depth
•
Responsive Bento Grid - 6-column grid that adapts to screen size

Bento Monochrome