Dot and line grids in the current text color: texture that never competes with the content.
bg-dots
Open your store today
bg-grid
Nothing here yet
bg-grain-midnight
Software at the speed of AI.
- midnight
- dusk
- eclipse
- forest
- iris
- shore
- lagoon
- sunrise
- orchid
Installation
Add it with the shadcn CLI, or copy the source by hand.
$ pnpm dlx shadcn@latest add @ssntl/backgroundsRules
What this component expects from you, as it ships in styles/ssntl/backgrounds.md next to the code. The full file adds when to use it, keyboard, the UI foundations it applies and every shared rule.
## Rules for Backgrounds
- **Grain gradients.** Nine color fields (`bg-grain-midnight`, dusk, eclipse, forest, iris, shore, lagoon, sunrise, orchid) under one shared film grain. The color is a 3 KB image with no grain of its own; the grain is the system's noise tile, the same at any size.
- Each sets readable text for its tone; set `data-theme="dark"` on the dark four so components inside follow. Put text where the field is calm, or on glass.
- **For atmosphere.** A hero, a cover, a launch. Never behind long text, forms or data.
- **Quiet backgrounds.** Patterns draw in the current text color (dots 10%, lines 4%) and fade out toward the edges, so they adapt to light and dark and the surface ends softly.
- **Texture is felt, not read.** If the pattern can be noticed while reading, it is too strong. Lines stay under 6%; dots can go a little darker because they cover less.
- Use a pattern behind a headline or an empty state, never behind body text or data.