Grid background

The "bg-grid" utility provides a grid background pattern that can be applied to any element. The default grid background is transparent, you can customize it using "bg-grid-*" ("bg-grid-warm-minimal", "bg-grid-cool-minimal", any colors from "--color-background-*" variables).

Source

Github

const Example = () => {
  return (
    <div className="p-xl rounded-md bg-grid-warm-minimal">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint obcaecati et blanditiis facere
      id. Consectetur, nobis quasi nemo hic ab sit sunt voluptatibus, nam aperiam mollitia deleniti
      tempore magni voluptates?
      <div className="bg-background-neutral-inverse p-md my-md rounded-md">
        <p>
          Aperiam, necessitatibus debitis. Eligendi enim aspernatur inventore, vel magnam repellat
          ratione numquam nesciunt quisquam cupiditate facere atque voluptas aliquam voluptates modi
          porro!
        </p>
      </div>
    </div>
  )
}

export default Example

Examples

Text