Dot Pattern

Installation

pnpm dlx kliping@latest add dot-pattern

Usage

Mengisi wadahnya (absolute inset-0). Warna titik mengikuti fill — timpa dengan kelas fill-*. glow membuat titik berdenyut bergantian.

<script setup lang="ts">
import { DotPattern } from '@/components/ui/dot-pattern'
</script>

<template>
  <div class="relative h-72 overflow-hidden">
    <DotPattern glow class="mask-[radial-gradient(300px_circle_at_center,white,transparent)]" />
  </div>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
Files	components/ui/dot-pattern/dot-pattern.vue components/ui/dot-pattern/index.ts

API Reference

Prop	Type	Default	Description
width?	number	16	The horizontal spacing between dots.
height?	number	16	The vertical spacing between dots.
cx?	number	1	The horizontal offset of each dot within its cell.
cy?	number	1	The vertical offset of each dot within its cell.
cr?	number	1	The radius of each dot.
glow?	boolean	false	Makes the dots pulse.

Data attribute	Value
[data-slot]	"dot-pattern"

CSS Variables

Variabel khusus komponen ini — bisa ditimpa lewat style atau CSS Anda:

Variable	Value
--dot-delay	dihitung saat runtime
--dot-duration	dihitung saat runtime

Credits

Berasal dari Magic UI (MIT, Copyright (c) Magic UI). Rantai lengkapnya di Credits.