A modern React application built with LaunchDarkly feature flags, Tailwind CSS, and shadcn/ui components - fully compatible with v0.dev.
- Custom Feature Experiments: Generate realistic A/B test data for LaunchDarkly feature flags
- Multiple Metrics: Configure multiple metrics with individual true/false values per metric
- Probability Control: Set custom probability percentages for metric tracking (true/false variations)
- Flexible Configuration: Support for both custom metric values and randomized defaults
- Real-time Progress: Live progress tracking with current run count and experiment status
- LaunchDarkly Integration: Input your client-side ID directly in the UI
- Dynamic Metrics: Add/remove metric rows with individual value configuration
- Experiment Types: Support for Bayesian and Frequentist experiment simulations
- Persistent Settings: All configurations saved to localStorage for convenience
- User Context Tracking: Display current and updated LaunchDarkly user context
- Staging Environment Only: Designed for internal use in staging environments
- Feature Experimentation Focus: Currently supports feature experiments (not funnel experiments)
- Context Visualization: Real-time display of LaunchDarkly user context changes
- Flag Management: View all active LaunchDarkly flags in your environment
- ⚛️ React 18 with modern hooks and TypeScript
- 🚩 LaunchDarkly SDK for feature flags and experiment data generation
- 🎨 Tailwind CSS for responsive styling
- 🧩 shadcn/ui components (v0.dev compatible)
- 📱 Fully responsive design with semantic HTML
- ♿ Accessibility-focused with proper ARIA support
- Node.js (version 14 or higher)
- npm or yarn
- Install dependencies:
npm install- Set up LaunchDarkly:
- Copy
env.exampleto.env - Replace the placeholder with your LaunchDarkly client-side ID
- Copy
- Start the development server:
npm startThe app will open in your browser at http://localhost:3000.
To use LaunchDarkly feature flags:
- Sign up for a LaunchDarkly account at launchdarkly.com
- Get your client-side ID from your LaunchDarkly dashboard
- Create a
.envfile and add your client-side ID:REACT_APP_LD_CLIENT_ID=your-actual-client-side-id
npm start- Runs the app in development modenpm build- Builds the app for productionnpm test- Launches the test runnernpm run eject- Ejects from Create React App (one-way operation)
This project is fully configured for shadcn/ui and v0.dev:
- ✅ All required dependencies installed
- ✅ Tailwind CSS configured with shadcn/ui theme
- ✅ TypeScript support enabled
- ✅ Component aliases configured (
@/components,@/lib) - ✅ Essential components included (Button, Card, Badge)
- ✅ CSS variables and design tokens ready
- Go to v0.dev
- Generate your component
- Copy the generated code
- Paste directly into your project - it will work out of the box!
To add more shadcn/ui components, you can either:
- Use v0.dev to generate them
- Manually copy from the shadcn/ui documentation
exp-generator/
├── public/
│ ├── index.html
│ └── manifest.json
├── src/
│ ├── components/ui/ # shadcn/ui components
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ └── badge.tsx
│ ├── lib/
│ │ └── utils.ts # Utility functions
│ ├── App.tsx # Main app component with LaunchDarkly
│ ├── index.tsx # React entry point
│ ├── index.css # Tailwind CSS + shadcn/ui styles
│ └── reportWebVitals.ts
├── components.json # shadcn/ui configuration
├── tsconfig.json # TypeScript configuration
├── package.json
├── tailwind.config.js # Tailwind + shadcn/ui configuration
└── postcss.config.js # PostCSS configuration
- Modify
src/App.tsxto add your own components and features - Update
tailwind.config.jsto customize your design system - Add feature flags in your LaunchDarkly dashboard and use them in your React components
- Use v0.dev to generate new components and add them to your project