Pivotal UI is a collection of React components that are styled for the Pivotal brand. Visit the live styleguide here.
We've created two starter projects to help transitioning to Pivotal UI and React.
- If you want to quickly try out some Pivotal UI components, try pivotal-cf/pui-starter-project
- If you want to skip directly to building a full React application, try pivotal-cf/react-starter
We assume your project has the following:
- node/npm
- A module loader such as Webpack or Browserify - Pivotal UI modules follow the CommonJS pattern
- A JSX transpiler such as Babel - Pivotal UI components are written in JSX
- React - Pivotal UI components are React components
cd /path/to/your/web/assetsnpm initnpm install --save pivotal-ui
Javascript:
import React from 'react';
import {DefaultButton} from 'pivotal-ui/react/buttons';
class MyTestPage extends React.Component {
getInitialState() {
return {showMessage: false};
}
showMessage() {
this.setState({showMessage: true});
}
render() {
return (
<div className="container">
<DefaultButton Message</DefaultButton>
{ this.state.showMessage ? <h1>Hello world!</h1> : null }
</div>
);
}
}
ReactDOM.render(<MyTestPage />, document.getElementById('root'));
HTML:
<html>
<body>
<div id="root"></div>
<script src="<path-to-your-project's-compiled-javascript-file>"></script>
</body>
</html>See MAINTAINERS.md.
Please refer to our contribution guidelines
Copyright 2017 Pivotal Software, Inc. All Rights Reserved.