Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @auth0/styleguide-react-components with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-bootstrap/package.json"); // react-bootstrap is a peer dependency. var styleguideReactComponents = require("@auth0/styleguide-react-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@auth0/styleguide-react-components v1.0.4

Library of Auth0 React components.

Auth0 Styleguide - React Components

Library of Auth0 React components. All the react-bootstrap components are re-exported inside this lib.

You can find the API, see examples, and play with live editing of every component on the React Components section of our styleguide.

Installation 📦

If you are using npm you can do (react and react-bootstrap are peer dependencies):

npm i --save react@15 react-bootstrap@0.30 @auth0/styleguide-react-components

And load the CSS from our CDN:

<!-- Core and Components CSS bundles are peer dependencies of react-components -->
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />

<link rel="stylesheet" href="" />

The CSS bundles are also included on the packages installed via npm, but we encourage you to use it via our CDN so we all benefit from sharing the same url of the package to improve load time.


Here is a quick example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@auth0/styleguide-react-components';

const App = () => (

  <App />,

Development 🛠

Add a new component

Node.js v6.9.1 and npm v3.10.8 or newer is required.

You can develop new components using React StoryBook.

The index.js and examples.js files will be used to generate the React Styleguide page of the component, which will contain all the documentation for it (title, description, examples and table with properties information).

To create a new component run npm start and add your component inside the /src folder with the following files:


Main component file, it should export the component.

We use react-docgen to extract information from this file to generate the documentation of our components. You should use the following structure:

import React from 'react';
import PropTypes from 'prop-types';

 * Example component title: Example component description.
const ExampleComponent = ({ prop1, prop2 }) => (
    <div>Example component</div>

ExampleComponent.propTypes = {
   * prop1 description
  prop1: PropTypes.array.isRequired,
   * prop2 description
  prop2: PropTypes.number.isRequired

export default ExampleComponent;

This file will generate the following page in the React Styleguide website:

Example component page

The comment on top of the component definition will match with the page title and description, while the comments on top of the propTypes definitions will match with the definitions of the properties table.


Export an array of objects representing the different examples of the component to showcase them in the Auth0 React Styleguide.

Each object of the array can have the following properties:

componentReact elementReact element
codestringCode of the component (should match the code of the component property)
centerbooleanCenter the component in the middle of the playground
titlestringExample title
showTitlebooleanShow the example title
urlstringUrl for the component page

Example file:

import React from 'react';
import ExampleComponent from './';

const examples = [
    component: (
      <ExampleComponent />
    code: `<ExampleComponent />`,
    title: 'Example title',
    center: true,
    showTitle: true,
    url: 'default'

export default examples;


Test your component using mocha, chai and enzyme.


Add stories for your React component. You can check React StoryBook - Writing Stories for more information.

Components style

Follow this conventions when you are developing components:

  • Your components should be stateless functional components (they shouldn't contain state or lifecycle methods so we can use them with state management libraries like Redux).
  • Add propTypes for all properties and add the proper comments so that information is shown in the Auth0 React Styleguide.
  • Prefix your component css classes with its name so it doesn't conflict with others existing classes.

Releasing a new version

Run the command bin/version <patch|minor|major|version-no> inside the root of this package. This will commit a new version for you.


bin/version patch


All the logos and branding are copyright Auth0 and may not be used or reproduced without explicit permission from Auth0 Inc.

The icons are licensed from Budi Harto Tanrim. All other third-party components are subject to their own licenses.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free