kagadmodyaa

Bento 01

New
Features 09Bento 02

A four-cell staggered bento built from type alone: a huge inverted percentage, two short figures and an outlined zero, with no mini screens.

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/bento-01.json

Needs a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.

Usage

This block is a section, not a page. Import it where you want it, alongside your other sections.

import { Bento01 } from '@/components/bento-01/bento-01'

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

Files

What the command adds to your project, and where.

  • components/bento-01/bento-01.tsx

    The section. Import it into any page and render it; it fills the width of its parent.

The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.

Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.

More in Bento

See all 3 Bento blocks