boxgrid

ui-layouts/boxgrid

FreeComponent

ui-layouts publishes no description for this item.

Install it

npx shadcn@latest add https://www.ui-layouts.com/r/boxgrid.json

Source

./registry/components/grid/box-grid.tsxwww.ui-layouts.com/r/boxgrid.json

1import preview from '@/assets/preview/Preview';
2import Image from 'next/image';
3import React, { useState } from 'react';
4 
5interface ProjectsTypes {
6  id: string;
7  img: string;
8  title: string;
9  des: string;
10}
11 
12export default function BoxGrid() {
13  return (
14    <>
15      <div className='grid grid-rows-10  grid-cols-12 grid-flow-col gap-2  pt-10'>
16        <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'>
17          <Image src={preview.dragitems} className=' object-cover' alt='' />
18        </div>
19        <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'>
20          <Image src={preview.galleryNew} className=' object-cover' alt='' />
21        </div>
22        <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'>
23          <Image src={preview.carousel} className=' object-cover' alt='' />
24        </div>
25        <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'>
26          <Image src={preview.clippath} className=' object-cover' alt='' />
27        </div>
28        <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'>
29          <Image src={preview.sparkles} className=' object-cover' alt='' />
30        </div>
31        <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'>
32          <Image src={preview.carousel} className=' object-cover' alt='' />
33        </div>
34        <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'>
35          <Image src={preview.faqs} className=' object-cover' alt='' />
36        </div>
37        <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'>
38          <Image src={preview.grid} className=' object-cover' alt='' />
39        </div>
40        <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'>
41// … truncated

What it pulls in

npm packages

motion

Files it writes

./registry/components/grid/box-grid.tsx

More from ui-layouts

All 1 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
3d-marquee3d-marquee	ui-layouts	Components	Free	no deps · 2 files
accordionaccordion	ui-layouts	Components	Free	no deps
align-slideralign-slider	ui-layouts	Components	Free	6 deps · 2 files
animal-imagemaskinganimal-imagemasking	ui-layouts	Components	Free	1 dep
animated-beamanimated-beam	ui-layouts	Components	Free	no deps
animated-beam-bidirectionalanimated-beam-bidirectional	ui-layouts	Components	Free	no deps
animated-beam-defaultanimated-beam-default	ui-layouts	Components	Free	no deps
animated-beam-multiple-inputanimated-beam-multiple-input	ui-layouts	Components	Free	no deps