Textured Image Background
Textured Image Background é um componente de texto para React e Tailwind CSS, da biblioteca Cult UI, com licença MIT. Copia e cola no teu projeto.
Cult UI
MIT
text
O que é
Textured Image Background é um componente de texto para React e Tailwind CSS, da biblioteca Cult UI, com licença MIT. Copia e cola no teu projeto.
Como usar
Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.
Cinco cópias grátis por mês. Sem cartão.
Não precisa de pacotes além do que o projeto já tem
Licença
Este componente vem de Cult UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Textured Image Background
import type React from "react"
import { cn } from "@/lib/utils"
export type TextureVariant =
| "fabric-of-squares"
| "grid-noise"
| "inflicted"
| "debut-light"
| "groovepaper"
| "none"
interface BackgroundImageTextureProps {
variant?: TextureVariant
opacity?: number
className?: string
children?: React.ReactNode
}
const textureMap: Record<Exclude<TextureVariant, "none">, string> = {
"fabric-of-squares": "/textures/fabric-of-squares.png",
"grid-noise": "/textures/grid-noise.png",
inflicted: "/textures/inflicted.png",
"debut-light": "/textures/debut-light.png",
groovepaper: "/textures/groovepaper.png",
}
export function BackgroundImageTexture({
variant = "fabric-of-squares",
opacity = 0.5,
className,
children,
}: BackgroundImageTextureProps) {
const textureUrl = variant !== "none" ? textureMap[variant] : null
return (
<div className={cn("relative", className)}>
{textureUrl && (
<div
aria-hidden="true"
className="pointer-events-none absolute inset-0"
style={{
backgroundImage: `url(${textureUrl})`,
backgroundRepeat: "repeat",
opacity,
}}
/>
)}
{children && <div className="relative">{children}</div>}
</div>
)
}