Interactive Playground

React-WIP-UI

Production-ready components for marking features as work in progress.

$ npm install react-wip-ui

Server Components

Ribbon

Server

A diagonal corner ribbon for any positioned container.

Position

Variant

Disabled

Card content

WIP

Prop	Type	Default	Description
position	"top-left" \| "top-right"	"top-right"	Which corner the ribbon appears in
text	string	"WIP"	Label text on the ribbon
variant	"solid" \| "outline"	"solid"	Filled or outlined ribbon style
disabled	boolean	false	When true, renders nothing

Badge

Server

Inline label that attaches to any child element.

TextDisabled

WIP

Analytics DashboardWIP

Side nav link

WIP

Prop	Type	Default	Description
text	string	"WIP"	Label shown in the pill
disabled	boolean	false	When true, hides the badge
children	ReactNode	-	Element to badge

Overlay

Server

Frosted glass overlay that blurs child content.

MessageDisabled

EmailPlan

Save Changes

Prop	Type	Default	Description
message	string	"Coming Soon"	Text in the overlay pill
disabled	boolean	false	When true, removes the overlay
children	ReactNode	-	Content underneath the overlay

Block

Server

Disables pointer events and text selection on children.

Allow interaction (disabled=true)

Subscription

Skip

Pointer events are blocked. Try clicking the form.

Prop	Type	Default	Description
disabled	boolean	false	When true, removes the block
children	ReactNode	-	Content to be blocked

Client Components

Banner

Client

Announcement bar with sticky or relative positioning.

Position

Dismissible

Message

Page content below the banner sits here...

Prop	Type	Default	Description
message	string	-	Text content of the banner
dismissible	boolean	false	Adds a close button
position	"sticky" \| "relative"	"relative"	Sticky pins to viewport top

Modal

Client

Accessible dialog with backdrop blur and slide-up animation.

Title

Description

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Called on close
title	string	-	Modal heading
description	string	-	Supporting body text

WIP Wrapper

Client

Composable wrapper with conditional WIP treatment.

WIP activeWIP active

New Dashboard

WIP

Prop	Type	Default	Description
when	boolean	true	Activates WIP styling when true
children	ReactNode	-	Feature being marked as WIP

WIPProvider

Client

Global context to disable all WIP components at once. It is used with useWIP() hook inside WIP children.

Theme

globalDisabled (prod mode)

useWIP() output

theme: light

globalDisabled: false

Premium feature content lives here

WIP

Prop	Type	Default	Description
theme	"light" \| "dark"	"light"	Sets CSS custom props for all WIP children
globalDisabled	boolean	false	When true, strips WIP from all children
defaultVariant	"overlay" \| "block" \| "ribbon" \| "badge"	-	Default WIP variant for <WIP /> wrappers