Components
Loading preview...
A striking card component featuring a pattern of intersecting diagonal lines that form X shapes. This pattern creates a bold, geometric texture that's perfect for high-impact UI elements and featured content sections. Features - Bold X-pattern created by intersecting diagonal lines - Thicker stroke width (6.5px) for enhanced visibility - Larger pattern size (95px grid) - 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-cross-patterimport { CrossPatternCard, CrossPatternCardBody } from "@/components/ui/card-with-cross-patter"
export function CrossPatternCardDemo() {
return (
<CrossPatternCard>
<CrossPatternCardBody>
<h3 className="text-lg font-bold mb-1 text-foreground">
Intersecting Lines Pattern
</h3>
<p className="text-wrap text-sm text-foreground/60">
A bold pattern featuring intersecting diagonal lines creating X shapes.
The thicker stroke width and larger pattern size create a striking visual
effect that adds depth and sophistication.
</p>
</CrossPatternCardBody>
</CrossPatternCard>
)
}