VVVER · React components

Monochrome components for editorial products

VVVER provides source-shipped React components, layout primitives, semantic color tokens, and documented motion behavior.

Review adoption See the blocks

Woman seated on the steps of a pale green garden shed

Component family names

Actions
Inputs
Navigation
Layout
Data display
Cards
Overlays
Feedback
Typography
Media & motion

Package rules

Package contract

Six implementation rules taken from the repository's contribution and design contracts.

Tokens as source

The ink, paper, type, spacing, and motion variables apply across every component.

Tagged releases

Each Git tag is a release boundary. Pin a tag, review the source diff, and update the lockfile.

Three rule weights

Rules, not boxes. Structural, fine, and interactive edges use the 1px, 0.5px, and 1.5px system weights.

Fluid type and spacing

Viewport-relative tokens scale type and spacing between the phone and desktop limits.

Shared primitives

Editorial sections and application layouts share the same token layer and source-shipped components.

Accessibility requirements

The contribution contract treats contrast, focus, semantics, touch targets, and reduced motion as visual requirements.

Art direction

Source media keeps its crop

Media owns its crop, color, and alternative text; layout owns sequence and spacing. The catalog does not apply a universal monochrome filter or replace the image with a generic panel.

Review art direction

Compose

Editorial and application compositions

The layout examples use the same package for editorial pages and application shells. The dashboard route demonstrates the data, navigation, and feedback families in one composition.

Review the product surface

Soft diagonal band of light crossing a dark field

Touch floor: 44px; Interactive targets
Text ink floor: 60%; Small readable copy
Input ceiling: 400ms; Direct feedback
Structural rule: 1px; Hairline boundaries

Repository guidance

Repository rules in quote layouts

These excerpts exercise the attributed-quote layout. They are repository guidance, not client endorsements.

Use production marks only when they carry real dates, sources, frames, or credits.

Material and art directionRepository design guidance

Reduced motion presents the complete final state without interpolation.

Motion characterRepository motion guidance

Inspect visual changes in the browser at desktop and mobile widths before release.

Maintainer handoverRepository source of truth / paraphrased

Comparison specimen

Three ways to use the repository

This comparison shows repository workflows, not prices or service tiers.

Inspect

01/ workflow

Learn the visual and technical contract before changing source.

IncludedRead HANDOVER.md
IncludedRead the design identity
IncludedBrowse the live catalog

Review features

AdoptTypical path

02/ workflow

Consume a reviewed release without inventing a package channel.

IncludedPin a Git tag
IncludedCompile the source package
IncludedImport the token stylesheets

Review the adoption path

Extend

03/ workflow

Add a public primitive through the repository's documented loop.

IncludedFollow the component idiom
IncludedUpdate the public index and demo
IncludedRun TypeScript and the docs build

Review the composition

Questions

Before you commit

Is it really monochrome — no accent color at all?

Interface structure is carried by ink, paper, weight, border, and scale. Optional companion tints may support a small status mark, while supplied photography may retain its own color.

Can I use it with an existing Tailwind setup?

Yes. VVVER source-ships React components and a token layer for a Tailwind v4 host. The host compiles the source and owns the palette and font variables.

How do upgrades work?

Consumers pin a Git tag. Review the source diff, update the tag and lockfile, then run the consuming application’s own checks before adopting it.

Does it support server components?

The presentational blocks render on the server. Interactive primitives — tables, accordions, the app shell — declare their own client boundary, so you only pay for interactivity where you use it.

Get started

Read, pin, and verify

Review the component catalog, pin a release tag, and validate the consuming application.

Review components Review adoption