Particles

• Location: sabo/src/components/ui/particles.tsx

​

When to use

• Lightweight decorative particles behind hero or section headers.
• Keep density/contrast low; avoid interfering with text legibility.

​

Usage

import { Particles } from "@/components/ui/particles";

export function Example() {
  return (
    <div className="relative rounded-xl border p-8 overflow-hidden">
      <Particles className="absolute inset-0" quantity={80} color="#111827" />
      <div className="relative z-10">Content over particles</div>
    </div>
  );
}

​

Key props

​

Styling tip

• Mount as an absolutely positioned layer; keep pointer-events: none.
• Test light/dark themes to ensure contrast is appropriate.