Underdog.io's component library.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @underdogio/pup in KB



Underdog.io's component library.

Example usage

// Import non-component base styles for stuff like typography.
// This should be done once in your project.
import '@underdogio/pup/styles/pup.scss'

import React, { Component } from 'react'

import Alert from '@underdogio/pup/components/alert'

class Application extends Component {
  render() {
    return (
      <Alert type="success" onClose={() => console.log('closed')}>
        Nice work!


Because components include CSS and other non Javascript imports, you will also need webpack. We recommend using @underdogio/webpack-config so you won't have to create a new webpack config from scratch.

yarn add @underdogio/pup @underdogio/webpack-config


Pup is built off of Storybook. You can start Storybook by running:

yarn develop

You will then be able to access the Storybook frontend at http://localhost:9001.

Adding a new component

Every component should have its own directory under the components/ directory (e.g. /components/button/) with the following files:


Source code for the component. Be sure to include prop types.


Styles for the component. This file should be imported by index.jsx.


Storybook stories and documentation.


Mocha tests.

Creating a new release

  1. Bump the npm package version number with yarn version.

    yarn version --new-version <new-version-number>
  2. Push the new tag and package.json update to GitHub.

    git push origin master --tags
  3. Publish to npm.

    npm publish


You can deploy a new version of the component library frontend to GitHub pages by running:

yarn deploy

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.