Background Pattern 79 - Starfield background with right-side fade and vignette

Pro

This component is designed to render a visually striking background pattern, featuring a sparse starfield with a fade effect and a vignette overlay, suitable for filling a minimum screen height. It includes customizable styling options through className prop integration and incorporates a placeholder for further pattern customization.

Shadcn Background Pattern 79 block

Component data

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

Background Pattern 79 block design & features

The BackgroundPattern79 component is a visually striking shadcn component designed to enhance user interfaces with a dynamic and engaging background. It serves as a container that fills the entire viewport, centering any content placed within it. This component is particularly useful for creating immersive, full-screen backgrounds that draw attention without overwhelming the main content.

In more detail, the BackgroundPattern79 component utilizes a combination of CSS gradients and masks to create a unique starfield effect, complemented by a subtle vignette overlay. The design features a sparse particle field with a radial gradient pattern, creating the illusion of depth and movement. This intricate design is enhanced with the capability of easy integration into various layouts due to its customizable className prop. Moreover, the embedded PatternPlaceholder provides a placeholder for additional content, maintaining the focus on the component's visually appealing background effect. As a shadcn block, it exemplifies a blend of aesthetics and functionality, setting itself apart from other components by providing a unique ambient background experience.