Components
Loading preview...
A sophisticated dark card component featuring an organic noise texture created with SVG filters. The pattern provides a premium, tactile feel with a subtle white noise effect that's perfect for dark interfaces. Features - Complex noise pattern using SVG filters - Optimized for dark mode only - Turbulence and specular lighting effects - 500px x 500px pattern size - Semi-transparent dark overlay - Built with shadcn/ui theme system - Framer Motion entrance animation
npx shadcn@latest add https://21st.dev/r/Ali-Hussein-dev/card-with-noise-patterimport { NoisePatternCard, NoisePatternCardBody } from "@/components/ui/card-with-noise-patter"
export function NoisePatternCardDemo() {
return (
<NoisePatternCard>
<NoisePatternCardBody>
<h3 className="text-lg font-bold mb-1 dark:text-foreground text-background">
Noise Texture Pattern
</h3>
<p className="text-wrap text-sm dark:text-foreground/60 text-background/60">
A sophisticated noise pattern created using SVG filters.
The organic texture adds depth and visual interest while
maintaining a modern, premium feel.
</p>
</NoisePatternCardBody>
</NoisePatternCard>
)
}