Overview

Background patterns provide subtle texture and visual interest to surfaces. All patterns are implemented using pure CSS gradients and are theme-aware, automatically adapting to light and dark modes.

Patterns use the --pattern-ink-1 through --pattern-ink-4 design tokens, which are defined in the brand token files and automatically adjust based on the current theme.

Dot

Line

Grid

Ring

Wave

Texture

Shape

Usage

Background patterns can be applied to any HTML element using CSS classes. They work with any container, section, div, or component background.

Using CSS Classes Directly

Apply pattern classes directly to any HTML element:

<div className="dot-node">
  Content with pattern background
</div>

<!-- Or in plain HTML -->
<section class="grid-nested">
  <h2>Section Title</h2>
  <p>Content with nested grid pattern</p>
</section>

Using in React Components

Import and use the getPatternClassName utility function:

import { getPatternClassName } from 'beacon-ui/utils/patternPaths';

function MyComponent() {
  return (
    <div className={getPatternClassName('tex-woven')}>
      <h2>My Component</h2>
      <p>Content with woven texture pattern</p>
    </div>
  );
}

// Conditional pattern application
function ConditionalPattern({ showPattern }: { showPattern: boolean }) {
  const patternClass = showPattern ? getPatternClassName('dot-node') : '';
  return (
    <section className={`container ${patternClass}`}>
      Content
    </section>
  );
}

Common Use Cases

• Section backgrounds: Apply patterns to page sections, hero areas, or content containers
• Card components: Use the Card component's showBgPattern prop, or apply classes directly to custom card elements
• Container divs: Add visual interest to any container, wrapper, or layout element
• Overlay backgrounds: Combine patterns with overlays for depth and texture
• Preview areas: Use patterns in design previews, showcases, or demo sections

Pattern Categories

Patterns are organized into categories based on their visual style:

• Dot: Subtle, halftone, polka, stars, node, striped - perfect for minimal, modern designs
• Line: Vertical, horizontal, stacked, hashrate, diagonal - great for structured layouts
• Grid: Soft, offset, graph, nested, datacenter, plus, minimal-plus - ideal for technical or data-focused interfaces
• Ring: Concentric, outline, quarter, orbital, radar, noise - adds organic, flowing textures
• Wave: Scallop, stripe - creates movement and rhythm
• Texture: Woven, herringbone, brick, paper - provides tactile, material-like surfaces
• Shape: Checker, triangle, zigzag, bracket - offers geometric, structured patterns