Novel Preposterous Mockery


    0.0.46 • Public • Published

    Canopy Styleguide

    The Canopy Styleguide is a css and javascript library. It exposes global css classes and custom elements.


    Canopy uses storybook, an open source UI component explorer to articulate its design system.

    A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

    The primary components of the design system are

    1. Styleguide: the defining of graphic styles (colors, fonts, etc.)
    2. Pattern Library: functional components and their usage


    See Canopy's live storybook

    Creating a new story is easy and can be done in any directory. Simply create a file with the extension *.stories.js

    If I am looking to create a story that will illustrate a new button, I might add a new file for it like so:

    ├── button
    │   ├── button.component.js
    │   ├── button.stories.js

    In storybook's new Component Story Format (CSF), stories are defined as ES modules. A default export marks the title and named exports introduce the story functions.

    import React from 'react'
    import {CprButton} from 'canopy-styleguide'
    export default {
      title: 'Button',
      // including component will automagically fill docs around props
      component: CprButton,
    export const withEmojis = () => <CprButton>😀 😎 👍 💯</CprButton>
    export const withText = () => <CprButton>click me</CprBut>

    This will give us

    storybook button example

    Addons we use

    storysource: show stories source in the addon panel

    knobs: edit props dynamically using the Storybook UI

    See CprEmptyState for an example

    See CSF docs and stories in this project for more

    A useful recent (Jan 2020) blog post about storybook config

    GOAT (deprecating)

    G.O.A.T website




    npm i @canopytax/styleguide

    DownloadsWeekly Downloads






    Unpacked Size

    2.09 MB

    Total Files


    Last publish


    • parkm
    • greenjeffreym
    • mmemory
    • ron.douglas
    • miracastillo
    • geoctrl
    • tannerrigby
    • rchilds