Components
Loading preview...
A minimal card component featuring a clean grid pattern of squares. The pattern creates a structured, geometric texture that's perfect for content organization and visual hierarchy. Features - Clean square grid pattern - 50px x 50px grid spacing - 3.5px stroke width - Dark/Light mode support - Smooth gradient overlay - Built with shadcn/ui theme system - Framer Motion entrance animation
npx shadcn@latest add https://21st.dev/r/Ali-Hussein-dev/card-with-grid-patternimport { GridPatternCard, GridPatternCardBody } from "@/components/ui/card-with-grid-pattern"
export function GridPatternCardDemo() {
return (
<GridPatternCard>
<GridPatternCardBody>
<h3 className="text-lg font-bold mb-1 text-foreground">
Square Grid Pattern
</h3>
<p className="text-wrap text-sm text-foreground/60">
A clean and structured pattern featuring a grid of squares.
The minimal design creates a subtle texture that adds depth
without overwhelming the content.
</p>
</GridPatternCardBody>
</GridPatternCard>
)
}