Interactive Playground

React-WIP-UI

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

$ npm install react-wip-ui

Server Components

Server

A diagonal corner ribbon for any positioned container.

Position

Variant

Theme

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
theme	'light' \| 'dark'	"light"	Color theme for the ribbon
colors	{ bg?: string, text?: string }	-	Custom background and text colors
disabled	boolean	false	When true, renders nothing

Server

Inline label that attaches to any child element.

TextDisabled

Theme

Placement

WIP

Analytics DashboardWIP

Side nav link

WIP

Prop	Type	Default	Description
text	string	"WIP"	Label shown in the pill
theme	'light' \| 'dark'	"light"	Color theme for the badge
colors	{ bg?: string, text?: string }	-	Custom background and text colors
placement	'before' \| 'after'	"after"	Position of the badge relative to children
disabled	boolean	false	When true, hides the badge
children	ReactNode	-	Element to badge

Server

Frosted glass overlay that blurs child content.

MessageTheme

Disabled

EmailPlan

Save Changes

Prop	Type	Default	Description
message	string	"Coming Soon"	Text in the overlay pill
theme	'light' \| 'dark'	"light"	Color theme for the overlay
colors	{ bg?: string, text?: string }	-	Custom background and text colors
disabled	boolean	false	When true, removes the overlay
children	ReactNode	-	Content underneath the overlay

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