npm package

Install gridmint

Use gridmint patterns in any React or Next.js project.
Zero dependencies. Fully typed. Works with CSS, SCSS, Tailwind, and more.

Installation

npmnpm install gridmint

pnpmpnpm add gridmint

yarnyarn add gridmint

bunbun add gridmint

Quick start

React componenttsx

import { GridmintPattern } from 'gridmint';

export default function Hero() {
  return (
    <GridmintPattern
      state={{
        pattern:   'dots',
        bgColor:   '#0a0a0a',
        patColor:  '#c8ff00',
        size:      20,
        opacity:   30,
        thickness: 2,
        rotation:  0,
      }}
      style={{ height: '100vh' }}
    >
      <h1>Hello World</h1>
    </GridmintPattern>
  );
}

Hooktsx

import { useGridmintPattern } from 'gridmint';

export default function Section() {
  const { style } = useGridmintPattern({
    pattern:   'grid',
    bgColor:   '#0a0a0a',
    patColor:  '#ffffff',
    size:      24,
    opacity:   20,
    thickness: 1,
    rotation:  0,
  });

  return <div style={{ ...style, minHeight: '400px' }} />;
}

CSS stringts

import { getCSS } from 'gridmint';

const css = getCSS({
  pattern:   'hatch',
  bgColor:   '#111111',
  patColor:  '#ffffff',
  size:      16,
  opacity:   20,
  thickness: 1,
  rotation:  0,
});

// Inject into a stylesheet or use with CSS-in-JS
console.log(css);
// background-color: #111111;
// background-image: repeating-linear-gradient(...);
// background-size: 16px 16px;

Vanilla CSScss

/* Use the generator at gridmint.ink/generate
   Copy any format — CSS, SCSS, Tailwind, React, Next.js, TSX */

.hero {
  background-color: #0a0a0a;
  background-image: radial-gradient(
    circle,
    rgba(200,255,0,0.3) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}

API reference

React component. Renders any element with a pattern background applied as inline styles.

state PatternState — pattern config

as string — HTML tag (default: div)

className string — CSS class

style CSSProperties — override styles

children ReactNode — content inside

useGridmintPattern(state)

Hook. Returns CSS strings and a React style object for a given pattern state.

css string — full CSS string

bgCSS string — background-color only

imgCSS string — background-image only

style CSSProperties — React style object

getCSS(state)

Returns the full CSS string for a pattern state. Use with any CSS-in-JS solution or inject into a stylesheet.

PATTERNS

Array of all 12 pattern definitions. Each has id, name, draw(), and css().

PatternState

interface PatternState {
  pattern:   string;  // 'noise' | 'dots' | 'grid' | 'rect' | 'diagonal' |
                      // 'hatch' | 'carbon' | 'halftone' | 'plus' | 'hex' |
                      // 'waves' | 'circuit'
  bgColor:   string;  // hex color e.g. '#0a0a0a'
  patColor:  string;  // hex color e.g. '#ffffff'
  size:      number;  // tile size in px (4–240)
  opacity:   number;  // 1–100
  thickness: number;  // stroke thickness 1–8
  rotation:  number;  // 0–180 degrees
}

open generator →★ star on github