Bento 04

A four-card services bento on marching dashed blueprint frames. Hover blooms each card's icon from blue to the D2 holographic gradient, scrambles the Clean Code snippet from grey to syntax colour, brightens the Web Design screen wash and sp.

Library

D2Studio UI

Framework

React

Type

component

License

MIT

Dependencies

@gsap/react, gsap

Install

npx shadcn@latest add https://d2studio.dev/r/bento-04.json

Files

• registry/default/components/bento-04.tsx
• registry/default/components/bento-04/accelerate-card.tsx
• registry/default/components/bento-04/bento-04.css
• registry/default/components/bento-04/card-hover.ts
• registry/default/components/bento-04/clean-code-card.tsx
• registry/default/components/bento-04/dotted-frame.tsx
• registry/default/components/bento-04/future-forward-card.tsx
• registry/default/components/bento-04/icon-holo.tsx

Source

https://github.com/rajaaltus/d2studio-ui

Categories

• Bento Grid Components
• React Bento Grid Components
• Tailwind CSS Bento Grid Components
• Grid Components
• React Grid Components
• Tailwind CSS Grid Components
• Layout Components
• React Layout Components
• Tailwind CSS Layout Components
• Section Components
• React Section Components
• Tailwind CSS Section Components

More from D2Studio UI

• AI Block
• Bento 01
• Bento 02
• Bento 03
• Bento 05
• Block 01
• Diagram Grid
• Notification Bento
• Accordion
• AI Content Creator Card
• AI Content Creator Card v2
• Siri Prompt Input