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 pui-react-buttons
Javascript:
var React = require('react');
var DefaultButton = require('pui-react-buttons').DefaultButton;
var MyTestPage = React.createClass({
getInitialState: function() {
return {showMessage: false};
},
showMessage: function() {
this.setState({showMessage: true});
},
render: function() {
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>React is the recommended approach, but some elements are available in HTML/CSS:
-
curl http://styleguide.pivotal.io/components.css> <path-to-your-asset-build-folder>/components.css -
Add the css and javascript files to your html template
<!doctype html> <html> <head> <link rel="stylesheet" href="<path-to-your-asset-build-folder>/components.css"> <script src="<path-to-your-project's-root-folder>/node-modules/jquery/dist/jquery.js"></script> <script src="<path-to-your-project's-root-folder>/node-modules/bootstrap/dist/js/bootstrap.js"></script> </head> <body> <div class="container"> <h1 class="type-brand-1 em-high">Hello world!</h1> </div> </body> </html>
If you are building CSS using Sass, you can get pivotal-ui variables and mixins from the pui-css-variables-and-mixins node module:
-
npm install --save pui-css-variables-and-mixins -
Use in your
.scssfiles@import '<path-to-your-projects-node-modules>/pui-css-variables-and-mixins/pui-variables.scss'; @import '<path-to-your-projects-node-modules>/pui-css-variables-and-mixins/mixins.scss'; .bg-special { background-color: $brand-1; }
Please refer to our contribution guidelines
Copyright 2016 Pivotal Software, Inc. All Rights Reserved.