Texture Pattern
A zero-prop SVG component that renders a subtle repeating vertical-line texture as an absolutely-positioned background layer.
TexturePattern outputs an inline SVG that stretches to absolute inset-0 w-full h-full with z-0. It defines a repeating 3×3 tile of short vertical strokes coloured by the --color-cobalt-600 CSS variable at 15% opacity. Place it inside any relative container to add an unobtrusive fabric-like texture behind foreground content.
Installation
npx shadcn@latest add @adv/texture-patternUsage
import { TexturePattern } from '@/components/texture-pattern';
<div className="relative h-48 bg-white rounded-lg overflow-hidden">
<TexturePattern />
<div className="relative z-10 p-4">Foreground content</div>
</div>Example
Foreground text
Props
TexturePattern accepts no props. The stripe colour is driven by the --color-cobalt-600 CSS custom property defined in your design-system globals; adjust that variable to retheme the texture globally.