Background Pattern 139 - Striped pattern anchored on the right

Pro

This component, named BackgroundPattern139, renders a full-screen section with a right-side, masked striped background pattern, enhanced by a repeating linear gradient effect. It leverages a PatternTemplate and accepts an optional custom className prop for additional styling flexibility.
Shadcn Background Pattern 139 block

Component data

ID
background-pattern139
Access
pro
Created
Feb 23, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Background Pattern 139 block design & features

The BackgroundPattern139 component serves as a versatile backdrop, providing a visually appealing striped pattern that seamlessly blends into any user interface. It is designed to occupy the entire viewport, ensuring a consistent and immersive experience. As a shadcn component, it integrates smoothly with surrounding elements, allowing for easy customization to match the desired aesthetics through its optional className prop.

Diving deeper, this shadcn ui element utilizes a unique combination of linear gradients and masking techniques to generate its signature background design. The angular stripes are created with a repeating-linear-gradient function, allowing for precise control over the pattern's appearance. This is complemented by a sophisticated masking effect, ensuring only a portion of the stripes are visible on the right side, creating a dynamic visual divide. The use of a customizable shadcn block, such as the PatternTemplate, offers users the flexibility to replace or modify the foreground content as needed, making this component both functional and adaptable.