0xUrvish

Bento Card

Cards 1.1K

About

An interactive bento card with animated tabs and workspace preview.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bento Card to your project and fits it to your theme.

Code

How Bento Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import BentoCard from "@/components/ui/bento-card";

export default function Demo() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
      <BentoCard />
    </div>
  );
}

Dependencies

More by 0xUrvish

View all
  • Feature Carousel

    Feature Carousel

    2.7K
  • Vertical Tabs

    Vertical Tabs

    1.5K
  • Bucket

    Bucket

    899
  • Stacked List x

    Stacked List x

    898
  • Fluid Expanding Grid

    Fluid Expanding Grid

    795
  • Magnified Bento

    Magnified Bento

    759
  • Pricing Card

    Pricing Card

    725
  • Expandable Gallery

    Expandable Gallery

    625

More in Cards

View all
  • Course Design Cards

    Course Design Cards

    1.1K
  • Statistics Card 2

    Statistics Card 2

    270
  • Statistics Card 7

    Statistics Card 7

    297
  • Card

    Card

    56
  • Stats cards with links

    Stats cards with links

    86
  • Interactive Tech Stack Bento Grid with Hover Effects

    Interactive Tech Stack Bento Grid with Hover Effects

    132
  • The Item one

    The Item one

    3
  • Card Studio

    Card Studio

    36