Components
npx shadcn@latest add https://21st.dev/r/meghtrix/background-componentsLoading 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-[#f8fafc] relative">
{/* Circuit Board Background */}
<div
className="absolute inset-0 z-0"
style={{
background: "#f8fafc",
backgroundImage: `
linear-gradient(90deg, #e2e8f0 1px, transparent 1px),
linear-gradient(180deg, #e2e8f0 1px, transparent 1px),
linear-gradient(90deg, #cbd5e1 1px, transparent 1px),
linear-gradient(180deg, #cbd5e1 1px, transparent 1px)
`,
backgroundSize: "50px 50px, 50px 50px, 10px 10px, 10px 10px",
}}
/>
{/* 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...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...