Todos os componentes

Boxgrid

Boxgrid é um componente para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT other

O que é

Boxgrid é um componente para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Precisa de

npm i motion

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Boxgrid

./registry/components/grid/box-grid.tsx
import preview from '@/assets/preview/Preview';
import Image from 'next/image';
import React, { useState } from 'react';

interface ProjectsTypes {
  id: string;
  img: string;
  title: string;
  des: string;
}

export default function BoxGrid() {
  return (
    <>
      <div className='grid grid-rows-10  grid-cols-12 grid-flow-col gap-2  pt-10'>
        <div className='row-start-1 col-span-2 row-end-6  dark:bg-neutral-800 bg-neutral-100 grid place-content-center h-full lg:rounded-xl rounded-md'>
          <Image src={preview.dragitems} className=' object-cover' alt='' />
        </div>
        <div className='row-start-6 row-end-11  col-span-2 dark:bg-neutral-800 bg-neutral-100 grid place-content-center h-full lg:rounded-xl rounded-md'>
          <Image src={preview.galleryNew} className=' object-cover' alt='' />
        </div>
        <div className='row-start-3 row-end-9  col-span-2 dark:bg-neutral-800 bg-neutral-100 grid place-content-center h-full lg:rounded-xl rounded-md'>
          <Image src={preview.carousel} className=' object-cover' alt='' />
        </div>
        <div className='row-start-1 col-span-2 row-end-6  dark:bg-neutral-800 bg-neutral-100 grid place-content-center h-full lg:rounded-xl rounded-md'>
          <Image src={preview.clippath} className=' object-cover' alt='' />
        </div>
        <div className='row-start-6 row-end-11  col-span-2 dark:bg-neutral-800 bg-neutral-100 grid place-content-center h-full lg:rounded-xl rounded-md'>
          <Image src={preview.sparkles} className=' object-cover' alt='' />
        </div>
        <div className='row-start-3 row-end-9  col-span-2 dark:bg-neutral-800 bg-neutral-100 grid place-content-center h-full lg:rounded-xl rounded-md'>
          <Image src={preview.carousel} className=' object-cover' alt='' />
        </div>
        <div className='row-start-1 col-span-2 row-end-6 dark:bg-neutral-800 bg-neutral-100 grid place-content-center h-full lg:rounded-xl rounded-md'>
          <Image src={preview.faqs} className=' object-cover' alt='' />
        </div>
        <div className='row-start-6 row-end-11  col-span-2 dark:bg-neutral-800 bg-neutral-100 grid place-content-center  h-full lg:rounded-xl rounded-md'>
          <Image src={preview.grid} className=' object-cover' alt='' />
        </div>
        <div className='row-start-3 row-end-9  col-span-2 dark:bg-neutral-800 bg-neutral-100 grid place-content-center h-full lg:rounded-xl rounded-md'>
          <Image src={preview.image_masking} className=' object-cover' alt='' />
        </div>
      </div>
    </>
  );
}

Componentes parecidos