Components
npx shadcn@latest add https://21st.dev/r/meghtrix/grid-backgroundLoading preview...
// This is file of your component
// You can use any dependencies from npm; we import them automatically in package.json
import { cn } from "@/lib/utils";
import { useState } from "react";
export const Component = () => {
const [count, setCount] = useState(0);
return (
<div className="min-h-screen w-full bg-[#101014] relative text-white">
{/* Complex Multiplier Pattern (Enhanced) */}
<div
className="absolute inset-0 z-0 pointer-events-none"
style={{
backgroundImage: `
repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 40px),
repeating-linear-gradient(45deg, rgba(0,255,128,0.09) 0, rgba(0,255,128,0.09) 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(-45deg, rgba(255,0,128,0.10) 0, rgba(255,0,128,0.10) 1px, transparent 1px, transparent 30px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 80px),
radial-gradient(circle at 60% 40%, rgba(0,255,128,0.05) 0, transparent 60%)
`,
backgroundSize: "80px 80px, 40px 40px, 60px 60px, 80px 80px, 100% 100%",
backgroundPosition: "0 0, 0 0, 0 0, 40px 40px, center"
}}
/>
{/* Your Content/Components */}
</div>
);
};
export default Component;Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...