Dot Pattern
Motif d'arriere-plan pointille decoratif construit a partir des couleurs de token. Installez Dot Pattern depuis le registre VLLNT UI avec la CLI shadcn.
Motif d'arriere-plan pointille decoratif construit a partir des couleurs de token. Fait partie de la famille utility dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Dot Pattern a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/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
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.