Catalog of React based components with versioning and realtime props editing support
Clone or download
Latest commit a6223c2 Oct 28, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add CircleCI Jul 21, 2017
.github Using docker image opuscapita/minsk-core-ci tag grails-2.4.4-jdk-8u13… Sep 7, 2018
docs Update Dec 19, 2017
external_modules/jcatalog-bootstrap Update Apr 6, 2017
showroom-template Update @opuscapita/react-showroom-template version Feb 27, 2018
src #21 Rename 'sidebar' -> 'components' Feb 8, 2018
www Update template dependencies Feb 27, 2018
.babelrc Server side moved to separated repository. Migrated names 'jcatalog' … Nov 25, 2016
.editorconfig Moved .eslintignore .eslintrc .gitattributes .editorconfig files to p… Oct 21, 2016
.eslintignore Moved .eslintignore .eslintrc .gitattributes .editorconfig files to p… Oct 21, 2016
.eslintrc Fixed eslint config import Dec 14, 2016
.gitattributes Moved .eslintignore .eslintrc .gitattributes .editorconfig files to p… Oct 21, 2016
.gitignore Moved to yarn. Dec 7, 2016
CHANGES.txt Updated CHANGES.txt Feb 8, 2018
LICENSE Added 'LICENSE' file Dec 14, 2016 Update Oct 28, 2018
clientConfig.js Server side moved to separated repository. Migrated names 'jcatalog' … Nov 25, 2016
package.json Updating to a version to 1.3.0-beta.8 Feb 8, 2018
serverConfig.js Server side moved to separated repository. Migrated names 'jcatalog' … Nov 25, 2016
webpack.development.config.js Added babel plugin 'transform-runtime' Dec 23, 2016 Server side moved to separated repository. Migrated names 'jcatalog' … Nov 25, 2016
webpack.production.config.js Fix "getDefaultProps" warning appearing after update to react@16.x.x Nov 29, 2017

OpusCapita Showroom

CircleCI Status badge-npm-version badge-license NPM Downloads


Awesome react based components catalog which provides you with markdown documentation and live examples. 💥

If you're interested in project development, please star it and send us your pull-requests!


Live demos

Start a new project in 2 minutes!


We have preconfigured a project template with webpack, babel, tests, etc. (full overview)

Install template generator globally

npm install -g @opuscapita/react-showroom-template

Create an empty directory

mkdir my-react-project && cd my-react-project

Init a project and ask several questions

showroom init

Install deps

npm install

Done 🌟 Let's run it!

npm start

Open in browser: http://localhost:3000

You can easily add a new component.

showroom add and specify component name

Component will be added to src/client/components directory

Component is a directory that includes:

  • <component_name>
  • <component_name>.react.js file with skeleton of component
  • <component_name>.less file with styles
  • index.js file with component export

Add showroom to existing project

See documentation here

Need help with integration to your open-source project? Create an issue or contact us 😇

See also

Motivation to develop

The fundamental ideas of ReactJS is modularity and code reuse. You shouldn't rewrite same things every time.

What ReactJS creators say about it:

How do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :)

O.K., ReactJS creators 👍 We are sure you are clever. We understand your ideas. But if we want to have a large libraries of components we must have a easy way to organize and browse this library.

  • Facebook has thousands of components.

  • In contrast - now we have no common UI composable pieces which allows developers to construct complex business logic components fast with modern user interface for a better user experience. Happy customer => happy seller

  • Twitter Bootstrap/React Bootstrap don't solve the problem. It has a good looking typography and a simple for use grid system. It has only a little number of basic components like buttons and inputs.

    For example if you have a vertical split-screen, default bootstrap grid system based on html media-queries became useless. Media-queries reacts on main viewport size changes, but with split-screen we have two virtual viewports. Simple react component tracking size of specified DOMNode can solve the problem. If we can't find at we can write it themselves and reuse in future.

  • There are lots of good-written third-party components. But they can't cover all use-cases. The problem of most of them:

    Written by different people with a different methodology of development and styles organization (style conflicts are not a rarity)

    We can't change them when met a limitations of API

Allen Carr The easy way to start organizing libraries:

  • Spent several hours/days creating a component? Spend 30 more minutes to put your component in a library and write simple documentation with a code example.
  • Next time you or your teammate won't have to rewrite it again.
  • Or you can spend several hours/days 🕙 to /dev/null again.
  • The choice is yours.
  • Take care about other developers and others take care about you 🎩


Alexey Sergeev
Kirill Volkovich

Contributing is welcome. We need YOU! 🤘

Contributing guide

How to start

npm start npm script of @opuscapita/react-showroom-client can confuse if you want to contribute to showroom. Use this npm goal only to start showroom in server variant.

More preferred way is: run npm link, then npm run link-mode;

Install showroom-template separately.

Before running showroom-template's npm start run npm link @opuscapita/react-showroom-client. After that you can change showroom's source-code and see result.

If you need more info about contribution - please create an issue.


OpusCapita Showroom is licensed under the Apache License, Version 2.0. See LICENSE for the full license text.