Pattern

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

Pattern renders a decorative Hero Patterns background that fills its nearest positioned ancestor. All 87 patterns are exported by name; only the ones you import end up in your bundle. Sizes vary a lot: simple patterns like plus are under 1 kB gzipped, while detailed ones like topography are around 40 kB.

import { Pattern, circuitBoard } from '@vinui/react';

<section className="relative">
  <Pattern pattern={circuitBoard} color="var(--vin-color-primary)" opacity={0.15} />…
</section>;

color accepts any CSS color, including --vin-* tokens and currentColor (the default).

More to come

Detailed examples, keyboard interaction and the full component API are on their way.