Dot Pattern
Decorative dotted background pattern built from token colors. Install Dot Pattern from the VLLNT UI registry with the shadcn CLI.
Decorative dotted background pattern built from token colors. Part of the utility family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Dot Pattern to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/dot-pattern.jsonSource
import * as React from "react";
import { cn } from "../../lib/utils";
/** Props for {@link DotPattern}. */
export type DotPatternProps = React.ComponentPropsWithoutRef<"div"> & {
/** Dot radius in pixels. Defaults to `1`. */
dotRadius?: number;
/** Fade the pattern toward the edges with a radial mask. Defaults to `true`. */
fade?: boolean;
/** Grid spacing between dots in pixels. Defaults to `16`. */
spacing?: number;
};
const fadeMask = "radial-gradient(ellipse at center, black, transparent 75%)";
/**
* Static dotted background painted with a repeating radial gradient.
*
* @example
* ```tsx
* <DotPattern spacing={24} />
* ```
*/
export const DotPattern = ({
className,
dotRadius = 1,
fade = true,
ref,
spacing = 16,
style,
...props
}: DotPatternProps & { ref?: React.Ref<HTMLDivElement> }) => {
return (
<div
aria-hidden="true"
className={cn(
"pointer-events-none absolute inset-0 text-muted-foreground/40",
className,
)}
ref={ref}
style={{
backgroundImage: `radial-gradient(currentColor ${dotRadius}px, transparent ${dotRadius}px)`,
backgroundSize: `${spacing}px ${spacing}px`,
maskImage: fade ? fadeMask : undefined,
WebkitMaskImage: fade ? fadeMask : undefined,
...style,
}}
{...props}
/>
);
};
DotPattern.displayName = "DotPattern";
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.