Grid

PreviousNext
Docs
aceternityui

Preview

Loading preview…
components/ui/grid.tsx
import React from "react";

const GridBackgroundPreview = () => {
  return (
    <div className="h-[50rem] w-full bg-black bg-grid-white/[0.1] relative flex items-center justify-center">
      {/* Radial gradient for the container to give a faded look */}
      <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
      <p className="text-4xl sm:text-7xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8">
        Backgrounds
      </p>
    </div>
  );
};

export default GridBackgroundPreview;

Installation

npx shadcn@latest add @aceternity/grid

Usage

import { Grid } from "@/components/ui/grid"
<Grid />