@cimpress/react-components

MCP MEX React Components

About

React components to support the MCP UX style guide. Hopefully they make your life easier.

Want to see what's happened lately? Check the changelog for the latest updates.

Development

• Clone this repo
• Run npm install
• This project is powered by Webpack (version 2!) with webpack-dev-server and hot module replacement.
• Run npm start and navigate to localhost:8080 in your browser.

Roadmap

Components lined up and coming soon...

Available today:

• Header ✓
• Notifications popover ✓
• Footer ✓
• Logo ✓
• Colors ✓
• Snackbar ✓
• Text Field ✓
• Checkbox ✓
• Radio Group ✓
• Modal ✓
• Tooltip ✓
• Spinner ✓
• Stepper ✓
• Alert ✓
• User profile popover ✓
• Accordion ✓
• Drawer ✓

Future components and improvements:

• Switches
• Jest snapshot testing
• Modal animations
• ???

Using

You can install this package from NPM under the name @cimpress/react-components, like so:

npm install @cimpress/react-components

Make sure you've included the stylesheet links in your index.html:

<link rel="stylesheet" href="https://static.ux.cimpress.io/mcp-ux-css/latest/css/mcp-ux-css.min.css" charset="utf-8" type="text/css"/>
<link rel="stylesheet" href="//cloud.typography.com/7971714/6011752/css/fonts.css" type="text/css" />
<script src="https://use.fontawesome.com/a1df440eb7.js"></script>

To reduce bundle size, import only the component you want, for example:

import Header from '@cimpress/react-components/lib/Header';

A sample page with documentation for all components is available here.