From Magic UI
Dot Pattern
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
MITCommunity tier
Demo from Magic UI, shown with the Fabrials theme.
Installation
Add it by name, once the app knows the Fabrials registry.
npx shadcn@latest add @fabrials/magicui-dot-patternOr by address:
https://ui.fabrials.com/r/magicui-dot-pattern.jsonshadcn copies the source into your app and installs what it needs.
- dot-pattern.tsxnew
- motion MIT
Origin and license
ui.fabrials.com republishes this component unchanged, with Magic UI's license at the top of every file. The copy was taken on 2026-09-27 and passed the license gate.
magicuidesign/magicuiMagic UI 23K 1.2K- Library
- Magic UI
- License
- MIT, Copyright (c) Magic UI
- Upstream entry
- https://magicui.design/r/dot-pattern.json
- Source at
- magicuidesign/magicui@d7207e5
- Snapshot
sha256 ff4f9d159cc8e681…
Design notes
Where this component departs from the Fabrials design principles. It still works; decide whether it fits your product.
- Literal coloursUses literal colours instead of theme tokens, so it will not follow the Fabrials palette or dark mode on its own.
text-neutral-400 - Continuous motionRuns a continuous animation. DESIGN.md reserves continuous motion for loading indicators.
repeat: Infinity - Reduced motionAnimates without checking reduced motion; people who ask the system for less motion still get it.
repeat: Infinity