react-wip-ui

Lightweight, server-friendly React components for marking features as Work In Progress.

• ✅ Zero dependencies — no CSS file, no external packages
• ✅ Server-component safe — works in Next.js App Router RSC out of the box
• ✅ Inline styles — no stylesheet to import, nothing to configure
• ✅ Tiny bundle — ~3.5 kB minified ESM

Installation

npm install react-wip-ui

Peer dependencies: react ^18 or ^19.

Usage

Import and use — no setup, no CSS import, no provider needed.

import { Badge, Ribbon, Overlay, Block } from 'react-wip-ui';

Components

<Badge>

Attaches a small WIP label next to any content.

<Badge>
  <button>Pro Feature</button>
</Badge>

// With options
<Badge text="BETA" theme="dark" placement="before">
  <NavItem />
</Badge>

// Custom colours
<Badge colors={{ bg: '#1e1b4b', text: '#a5b4fc' }}>
  <NavItem />
</Badge>

| Prop | Type | Default | Description | |---|---|---|---| | text | string | 'WIP' | Label text | | placement | 'before' \| 'after' | 'after' | Badge before or after children | | theme | 'light' \| 'dark' | 'light' | Colour scheme | | colors | { bg?, text? } | — | Custom colour overrides | | disabled | boolean | false | Renders children without badge |

<Ribbon>

A diagonal corner ribbon for containers. The parent must have position: relative.

<div style={{ position: 'relative' }}>
  <Ribbon />
  <Card />
</div>

// Options
<Ribbon position="top-left" text="ALPHA" variant="outline" theme="dark" />

| Prop | Type | Default | Description | |---|---|---|---| | position | 'top-left' \| 'top-right' | 'top-right' | Corner placement | | text | string | 'WIP' | Label text | | variant | 'solid' \| 'outline' | 'solid' | Fill style | | theme | 'light' \| 'dark' | 'light' | Colour scheme | | colors | { bg?, text? } | — | Custom colour overrides | | disabled | boolean | false | Renders nothing |

<Overlay>

Covers children with a blurred scrim and a message pill.

<Overlay>
  <BillingSection />
</Overlay>

// Options
<Overlay message="Coming Soon" theme="dark" />

// Custom colours for the message pill
<Overlay colors={{ bg: '#0f172a', text: '#94a3b8' }}>
  <AnalyticsDashboard />
</Overlay>

| Prop | Type | Default | Description | |---|---|---|---| | message | string | 'Under Construction' | Text in the message pill | | theme | 'light' \| 'dark' | 'light' | Colour scheme for scrim + pill | | colors | { bg?, text? } | — | Override pill bg and text colour | | disabled | boolean | false | Renders children as-is |

<Block>

Disables pointer events and text selection on children — use to make a section non-interactive.

<Block>
  <SubscriptionForm />
</Block>

| Prop | Type | Default | Description | |---|---|---|---| | disabled | boolean | false | Renders children as-is |

Types

import type { WIPTheme, WIPColors } from 'react-wip-ui';

type WIPTheme  = 'light' | 'dark';
type WIPColors = { bg?: string; text?: string };

License

MIT