Pattern Backgrounds
Simple animated pattern backgrounds to make your sections stand out.
Examples
Grid background without animation
Small grid background with animation
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
animate | boolean | false | Set true if you want to animate the background. |
duration | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right | top | Direction of the animation movement. |
Utility Classes
- Dot Pattern:
dark:bg-dot-white/[0.2] bg-dot-black/[0.2] - Grid Pattern:
dark:bg-grid-white/[0.2] bg-grid-black/[0.2] - Small Grid Pattern:
dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2]
Component Code
You can copy and paste the following code to create these components: