Optimizely has two sets of React components, more generalized OUI components built for a wide range of content, and application-specific components which tend to be more complex and less generalized for reuse.

Using OUI React Components

  1. git clone && cd oui && yarn install
  2. yarn storybook - Compile CSS/JS and view React components

Once OUI is added to your project, simply import the components you need:

import React from 'react';
import Button from 'optimizely-oui';
<Button style="outline">
  Edit Experiment

React Storybook

React Storybook with Knobs Add-on.

Storybook is a UI development environment for components. With it, you can:

  • Visualize different states of your component library
  • Build and test components in isolation without worrying about app-specific dependencies and development environments
  • Self-document (sorta...) component props, organize and group related components and include general, helpful information and documentation around the overall design system
  • Use community-built addons for common features and plugin-like functionality