Getting Started

Installation Tailwind White Style Bento Modern Bento Grid Soft Bento Grid

Bento Grids

Modern bento grid layouts for showcasing content, features, and portfolios with creative visual arrangements.

Installation

Quick guide to setup the component

1. Copy and paste this into the terminal to install the required dependencies.

Terminal

Copied!

npm i clsx tailwind-merge react-icons

npm i clsx tailwind-merge react-icons

2. Create /lib folder, then create the file utils.ts. Copy and paste this inside of it.

lib/utils.ts

Copied!

1import { ClassValue, clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3 
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}

1import { ClassValue, clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3 
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}

Tailwind White Style Bento

A dark, elegant bento grid inspired by Preline UI.

Note, Task, Whiteboard & more.

Manage your business end-to-end in our set of free native apps.

Built for speed.

Switch between apps in one stroke of a key.

Switch between views

Table view, Kanban View, Tile View. We got you covered.

Auto-enrichment.

Maintain clean data and auto-enrich your document using our AI engine.

AI-native apps

Invoke your AI employees within documents to help you do work.

Modern Bento Grid

Modern bento grid with a touch of softness

500+ Components

From grid layouts to navbars, buttons, forms, tables and many more.

Get started

Over

150

Templates

Kick-start your project effortlessly with our wide range of examples and layouts using modern frameworks.

Design System

Complete design system with Figma components and assets.

Explore more

Framework Support

Seamlessly integrated with all your favorite development tools and frameworks.

Learn more

Starter Templates

Ready-to-use templates to build your projects at lightning speed with modern best practices.

View all

Developer Tools

Powerful CLI tools and plugins to enhance your development workflow.

See how it works

Soft Bento Grid

Soft bento grid with elegant financial dashboard style

CASHFLOW

Real-time balance tracking.

Know exactly when to invest and when to hold back.

Outstanding balance

$5,650,490

$12M outstanding$2.8M available$0.88k

Jun, 2

Purchase

Now

Processing

Jun, 14

PaidOn time

FUNDING

Capital decisions based on performance metrics.

Not outdated credit reports.

Emma's Shop

EU-West 1

Synced

Last run: 06/16/25 2:40PM

100% Operational

30 days agoToday

INTEGRATIONS

Integrated with all the tools you already love.

₿

≈

SIMPLICITY

Less is more.

Clean design meets powerful functionality.

PERFORMANCES

55%

Accelerate your business.

Smart capital meets performance.

More Components Coming Soon

We're constantly adding new components to help you build faster.

More coming soon! 🚀

Have a specific component in mind? I'd love to build it for you.

Request a component →

Component Development

Need custom React components for your project? Get in touch

I've built hundreds of components, and helped developers and teams create beautiful, reusable UI components.

Custom React components withTypeScript support
Beautiful styling withTailwind CSS
Fully tested and documented components ready to use

Perfect for development teams, agencies, or anyone needing custom UI components.

Ready to enhance your component library?

Reach out to me →

DP's Templates

Access an ever-growing collection of premium, meticulously crafted templates and component packs for modern web and mobile development. Built by Emanuele Di Pietro.