Components
Loading preview...
A sophisticated card component featuring a grid pattern with ellipsis dots at intersections. The pattern combines rectangular grid sections with prominent dots, creating a modern and structured visual texture that's perfect for feature sections, pricing cards, or any content requiring a premium feel. Features - Grid-based pattern with ellipsis dots at intersections - Semi-transparent grid sections for added depth - Distinct patterns for dark/light modes - Smooth gradient overlay for content legibility - Responsive design - Built with shadcn/ui theme system - Framer Motion entrance animation
npx shadcn@latest add https://21st.dev/r/Ali-Hussein-dev/card-with-grid-ellipsis-pattern'use client'
import { GridPatternCard, GridPatternCardBody } from "@/components/ui/card-with-grid-ellipsis-pattern"
export function GridPatternCardDemo() {
return (
<GridPatternCard>
<GridPatternCardBody>
<h3 className="text-lg font-bold mb-1 text-foreground">
Grid Pattern with Ellipsis
</h3>
<p className="text-wrap text-sm text-foreground/60">
A sophisticated pattern combining grid layout with ellipsis dots.
Perfect for creating depth and visual interest while maintaining
readability and modern aesthetics.
</p>
</GridPatternCardBody>
</GridPatternCard>
)
}