Retículas de puntos y líneas en el color del texto: textura que nunca compite con el contenido.
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
Instalación
Agrégalo con el CLI de shadcn o copia el código a mano.
$ pnpm dlx shadcn@latest add @ssntl/backgroundsReglas
Lo que este componente espera de ti, tal como se instala en styles/ssntl/backgrounds.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).
## Reglas de Backgrounds
- **Gradientes granulados.** Nueve campos de color (`bg-grain-midnight`, dusk, eclipse, forest, iris, shore, lagoon, sunrise, orchid) bajo un mismo grano. El color es una imagen de 3 KB sin grano propio; el grano es la textura de ruido del sistema, igual a cualquier tamaño.
- Cada uno define texto legible para su tono; pon `data-theme="dark"` en los cuatro oscuros para que los componentes dentro lo sigan. Pon el texto donde el campo está tranquilo, o sobre vidrio.
- **Para ambientar.** Un hero, una portada, un lanzamiento. Nunca detrás de texto largo, formularios o datos.
- **Fondos tranquilos.** Los patrones se dibujan en el color del texto (puntos al 10%, líneas al 4%) y se desvanecen hacia los bordes, así se adaptan a claro y oscuro y la superficie termina suave.
- La textura se siente, no se lee: si el patrón se nota mientras lees, es demasiado fuerte. Las líneas quedan bajo 6%; los puntos pueden ser un poco más oscuros porque cubren menos.
- Usa un patrón detrás de un titular o un estado vacío, nunca detrás de texto de lectura o datos.