Components
Loading preview...
A modern card component featuring a diagonal lines pattern. The pattern creates a dynamic visual texture through intersecting diagonal lines, perfect for creating a sense of movement and sophistication in your UI. Features - Diagonal lines pattern with consistent spacing - Clean, minimalist aesthetic - Dark/Light mode support - Smooth gradient overlay - 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-lines-patterimport { LinesPatternCard, LinesPatternCardBody } from "@/components/ui/card-with-lines-patter"
export function LinesPatternCardDemo() {
return (
<LinesPatternCard>
<LinesPatternCardBody>
<h3 className="text-lg font-bold mb-1 text-foreground">
Diagonal Lines Pattern
</h3>
<p className="text-wrap text-sm text-foreground/60">
A modern pattern featuring diagonal lines in a repeating grid.
Creates a sense of movement and depth while maintaining a clean,
minimalist aesthetic.
</p>
</LinesPatternCardBody>
</LinesPatternCard>
)
}