Background Pattern

Get Ritla UI

A decorative layer behind a section: a dot or line grid, rings, hatching, a glow, a mesh or the Ritla pattern.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add background-pattern
Also works with shadcn: npx shadcn@latest add @ritla/background-pattern
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

background-pattern.tsx

import { BackgroundPattern } from "@/components/ui/background-pattern";<section className="relative overflow-hidden">  <BackgroundPattern variant="dot-grid" tone="brand" />  <h2 className="relative">…</h2></section>

Examples

Every style

Eight styles in the Brand and Neutral tones.

EnglishMirroredArabic

Get the code

LTR →

API reference

BackgroundPattern

Prop	Type	Default	Description
`variant`	`"dot-grid" \| "line-grid" \| "rings" \| "ritla-pattern" \| "glow" \| "mesh" \| "grid-fade" \| "hatch"`	`"dot-grid"`	Figma's Style.
`tone`	`"brand" \| "neutral"`	`"brand"`	Figma's Tone.
`className`	`string`	None	To size or place it.

Accessibility

ARIA

The pattern is hidden from screen readers and takes no clicks.
Keep text on the surface colour above it; the pattern is not counted in contrast.

Arabic and RTL notes

Does not mirror

Patterns have no direction, so they stay as drawn in Arabic.

Numerals: A pattern has no numbers.
Arabic typography: A pattern has no text; text above it follows the language's font.