Todos os componentes

Background Blocks One

Background Blocks One é 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 é

Background Blocks One é 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.

Não precisa de pacotes além do que o projeto já tem

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.

Background Blocks One

./registry/components/bg-blocks/blocksone.tsx
'use client';
import Blocks from '@/components/ui/blocks';
import React, { useRef } from 'react';

function BlockOne() {
  const containerRef = useRef<HTMLDivElement>(null);
  return (
    <div
      className='h-[550px] overflow-hidden dark:bg-black bg-white before:absolute before:w-full before:h-full before:bg-linear-to-t  dark:before:from-[#070707] before:from-[#dbdbdb] before:z-1  w-full  relative'
      ref={containerRef}
    >
      <Blocks
        activeDivsClass='dark:bg-[#131212]  bg-[#9ba1a131]  '
        divClass='dark:border-[#131212] border-[#9ba1a131] '
        classname='w-full'
        containerRef={containerRef}
        activeDivs={{
          0: new Set([2, 4, 6]),
          1: new Set([0, 8]),
          2: new Set([1, 3, 5]),
          4: new Set([0, 5, 8]),
          5: new Set([2, 4]),
          7: new Set([2, 6, 9]),
          8: new Set([0, 4]),
          9: new Set([5]),
          10: new Set([3, 6]),
          11: new Set([1, 5]),
          12: new Set([7]),
          13: new Set([2, 4]),
          14: new Set([5]),
          15: new Set([1, 6]),
        }}
      />
    </div>
  );
}

export default BlockOne;

Componentes parecidos