Ship features faster
Mark features as Work In Progress.
Ship with confidence.
A composable React component library for annotating in-development features. SSR-safe, accessible, and designed for Next.js App Router.
8 components, server and client
<Ribbon />Corner diagonal ribbon
<Badge />Inline WIP label
<Overlay />Frosted glass blur
<Block />Disable interaction
<Banner />Dismissible top bar
<Modal />Accessible dialog
<WIP />Smart wrapper
<Provider />Global config context
Up in 30 seconds
No theme setup, no providers required. Import one stylesheet and start marking features.
1
Install the package
npm install react-wip-ui2
Import the stylesheet once in your root layout
import 'react-wip-ui/styles.css';3
Wrap any component
import { Ribbon } from 'react-wip-ui';page.tsx
// Mark a feature as WIP in seconds
import { Ribbon } from 'react-wip-ui';
<div style={{ position: 'relative' }}>
<Ribbon text="WIP" position="top-right" />
<NewDashboard />
</div>
Everything you need, nothing you don't
SSR-Safe
Core components render on the server with no hydration mismatch or flicker.
Accessible
Escape handling, dialog semantics, focus trapping, and ARIA labels are included.
Composable
Use individual components or wrap a feature with <WIP when={flag}>.
Zero Config
Import one stylesheet and wrap your component. No provider is required to start.
Open source | MIT License
Ready to ship with confidence?
Install react-wip-ui and start marking features in seconds.