Optimizely's Component Library.
npm install optimizely-ouiA custom CSS framework and React component library that powers the Optimizely user interface.
- Component Guide
- Storybook
- Archived SASS documentation (requires VPN access)
- styles.css (latest compiled stylesheet for Axiom)
``bash`
npm install optimizely-oui
`bash`
yarn add optimizely-oui
Typescript types are generated for src/components from their JS files to aid consumption of this repo in Typescript.optimizely-oui
The declaration file (types/templates/module-declaration.d.ts) exports all named component exports.types/index.d.ts
To build the exported declaration file (), the autogenerated individual component module declarationsyarn generate-types
are merged with the main declaration file (see ).
PropTypes can still be used for non-Typescript (.js) components as well as when more complex validation is needed.babel-plugin-typescript-to-proptypes
The ()[https://www.npmjs.com/package/babel-plugin-typescript-to-proptypes] plugin is used to ensure that all components (typed or not) are exported with PropTypes.
Read how to contribute to Axiom for instructions on making pull requests.
Check out the Release a New Version section for instructions on releasing a new version of Axiom.
To use an Axiom component inside your React app:
`jsx``
import React from 'react';
import { Button } from 'optimizely-oui';
...
return ( );
Thanks to Chromatic, Axiom runs visual regression tests on every pull request and merge. These tests are snapshots of each Storybook story within the repository. For implementation details, see the Chromatic section of the contributing guidelines.
To use Axiom Sass variables and mixins in your project read how to use Axiom sass.