Skip to content
Present your application colors with style.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Build Status Code Coverage Code Style

Present your application colors with style.

TL;DR; Demo


yarn add colors-show

// or

npm install colors-show


First, you have to import the component

  import ColorsShow from 'colors-show';

Lets say, you have some color guides in your application:

export const green = {
  Green: '#00a757',
  Dark_Green: '#00904b',
  Light_Green: '#05d073',
  Dimmed_Green: '#7fd3ab',

export const blue = {
  Blue: '#378cbe',
  Dark_Blue: '#367fa9',
  Light_Blue: '#4cade6',
  Dimmed_Blue: '#9bc5de',

Simplest example:

<ColorsShow colors={green} />

You're all set! Now let's see how can you customize this component:


colors - object / required - Map of colors where key is a name and value is a color in CSS one of css formats.

width - number / 100 - width of the box.

height - number / 100 - height of the box.

space - number / 20 - space between boxes.

lines - bool / false - if you want lines insted of boxes.

stacked - bool / false stacked boxed with hover effect.

name - string / "" - group name.

showNames - bool / false - you can turn it off to show only color codes.

containerClassName - string / "" - additional class for container.

wrapperClassName - string / "" - additional class for wrapper.

boxClassName - string / "" - additional class for box.

colorInfoClassName - string / "" - additional class for color info.

component - React.Component / null - custom Box component.

Custom components

You can use your own component to presnt colors. You can extend Box component from colors-show or use your own.

const Circle = styled(Box)`
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

In both cases component will get few props:

  • width
  • height
  • space
  • stacked
  • className
  • style = { backgroundColor: COLOR }


As you can see there is option to provide additional CSS classes for all elements. Lets look at component structure:

  <Container>                 // containerClassName
    <Name />                  // wrapperClassName
      <Box>                   // boxClassName
        <ColorInfo>           // colorInfoClassName
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.