no-show

Type-safe feature toggles for React

Ship features faster with flags that persist to localStorage, support runtime config injection, and include a ready-made toggle menu. Built for shadcn/ui projects.

View on GitHub

Goal

Feature toggles let you ship code to production without exposing it to users. Wrap any component in a toggle, and it stays hidden until you're ready to flip the switch. This component gives you a type-safe way to define toggles, persist their state to localStorage, and manage them at runtime through a built-in floating menu—all without leaving your shadcn/ui setup.

Quick Start

1. Install the component

npx shadcn@latest add https://no-show.vercel.app/r/feature-toggle.json

2. Wrap your app and use toggles

import { createFeatureToggles } from "@/components/ui/feature-toggle";

const TOGGLES = {
  newFeature: {
    description: "Enable the new feature",
    isEnabled: false,
  },
} as const;

export const FeatureToggles =
  createFeatureToggles(TOGGLES);

function App() {
  return (
    <FeatureToggles.Provider>
      <FeatureToggles.Toggle id="newFeature">
        <NewFeatureComponent />
      </FeatureToggles.Toggle>
      <FeatureToggles.Menu />
    </FeatureToggles.Provider>
  );
}

Examples

Inline Toggle

Perfect for prototyping: define a toggle directly in JSX without any upfront configuration.

Static Config

Recommended for production: centralize all toggles in one config with descriptions and defaults for better maintainability.

New Header

This is the new header design.

Runtime Config

Ideal for A/B tests or user-specific flags: fetch config from your server and inject it at runtime. Provider config always takes precedence.

Premium Features

Unlocked via injected config!

Analytics Dashboard

View your analytics here.

API Reference

createFeatureToggles

Factory function that creates typed Provider and Toggle components.

function createFeatureToggles<T extends Record<string, ToggleConfig>>(
  staticDefaults: T
): {
  FeatureToggleProvider: React.FC<ProviderProps>;
  FeatureToggle: React.FC<ToggleProps>;
}

Parameters

Prop	Type	Default	Description
`staticDefaults`	`Record<string, ToggleConfig>`	`-`	Object mapping toggle IDs to their default configuration (description and isEnabled).

FeatureToggleProvider

Context provider that manages feature toggle state and persistence.

Prop	Type	Default	Description
`defaults`	`Partial<Record<keyof T, Partial<ToggleConfig>>>`	`-`	Runtime overrides for static defaults. Merged with static config (provider values take precedence).
`storageKey`	`string`	`"feature-toggles"`	localStorage key for persisting toggle states across sessions.
`children`	`React.ReactNode`	`-`	Child components that can access toggle state.

FeatureToggle

Conditionally renders children based on toggle state.

Prop	Type	Default	Description
`id`	`string`	`-`	Unique identifier for the toggle. Provides autocomplete for keys defined in staticDefaults.
`description`	`string`	`-`	Optional description shown in the menu. Overrides the default description.
`hide`	`boolean`	`false`	Inverts the toggle logic. When true, children render when toggle is OFF.
`children`	`React.ReactNode`	`-`	Content to conditionally render.

FeatureToggleMenu

Floating UI panel for managing feature toggles at runtime.

This component has no props. Place it anywhere inside a FeatureToggleProvider to enable a floating toggle menu in the bottom-right corner.

Features

Auto-discovers all registered toggles
Search/filter when more than 3 toggles
Reset individual toggles to defaults
Persists expanded state in sessionStorage

ToggleConfig

Type definition for toggle configuration.

type ToggleConfig = {
  description: string;  // Human-readable description
  isEnabled: boolean;   // Default enabled state
};