Docs
Sonic Bento Card

Sonic Bento Card

A Bento Card Component that requires our Bento Grid Component to work. This card is designed to showcase audio analysis features.

Installation

npx shadcn@latest add https://www.uicart.io/registry/sonic-bento.json

Usage

import SonicBento from "@/components/block/bento-grid-components/sonic-bento.tsx";

<BentoCard
  eyebrow="Audio Analysis"
  title="Get perfect clarity"
  description="Our AI-powered audio analysis will help you understand your customers better than they understand themselves."
  graphic={<SonicBento bottomGradientClassName="from-white" audioWaveCount={50} wrapperClassName="bg-green-500" />}
  fade={["bottom"]}
  className="max-lg:rounded-t-4xl lg:col-span-3 lg:rounded-tl-4xl"
/>