Border Pattern
A lightweight div that applies a diagonal stripe CSS class for decorative left or bottom border accents.
BorderPattern renders a zero-content div that carries one of two CSS class names (border-pattern--stripe-diagonal__left or border-pattern--stripe-diagonal__bottom). Pair it with your design-system stripe styles to create subtle diagonal accent lines on card edges or section dividers.
Installation
npx shadcn@latest add @adv/border-patternUsage
import { BorderPattern } from '@/components/ui/BorderPattern';
// Left-edge accent
<BorderPattern position="left" />
// Bottom-edge accent
<BorderPattern position="bottom" />Example
position="left"
position="bottom"
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | "left" | "bottom" | — | Required. Determines which stripe-diagonal CSS class is applied. |
className | string | "" | Additional CSS classes appended to the element. |
Content Card
A full-width card wrapper that applies the design-system card surface (`bg-card text-card-foreground`) around arbitrary children.
Paper Shader
A full-viewport Three.js WebGL overlay that renders an animated paper texture with warm window-light and subtle fibers using a custom GLSL fragment shader.