Introducing Contentstack’s Venus React Component Library

As a flexible SaaS application, Contentstack allows developers to extend its UI and plug-in custom functionality through Experience Extensions. That, however, shouldn’t lead to developers spending excessive amounts of time and effort in developing components while trying to maintain the brand and accessibility guidelines.

To that end, we are glad to introduce our Venus component library, so developers don’t have to reinvent the wheel. They can leverage our universal components — which we used to develop our newly introduced, React-based user interface — to create extensions and experiences that are truly native to Contentstack’s look and feel.

What Is a Component Library, and Why Did We Create One?

A component library, in general, is a library of styles and components used while developing an app, website, or any other digital property. It includes all components available throughout the app, such as buttons, input fields, alerts, and a lot more. Such a repository serves as a single source of truth for the organization and users extending your app.

At Contentstack, we started building this library when we began designing our new interface. Since Contentstack is a vast product with several modules for developers and content managers, rebuilding it from the ground up involved rethinking every single component.  We knew from the beginning that when different teams (using different tools) collaborate to create different parts of a single app, it becomes easy to get lost in the process — and lose out on crucial factors such as consistency and reusability. And that could soon spiral into a mess.

How We Created the Venus React Component Library

To streamline the process of creating the component library, we started with a design system based on the popular Atomic Design principle. We started defining the atoms, molecules, and organisms, which made designing templates and pages easier. (The design system will be publicly available soon.) And based on the design system, we built the components. We defined the style, specs, and details of every component before rebuilding the app.

For easier usability, we chose React Storybook to build our component library with. Storybook provides an excellent playground to showcase the components and makes it easier for developers to understand, build, and visually test reusable, isolated components to develop entire UIs with minimal effort.

Advantages of Using the Venus Component Library

Here are some advantages to using the Venus component library:

• Easy accessibility
• Consistency
• Speed
• Compatibility
• Minimal third-party dependencies

Where to Find Our Venus Component Library

This is just the beginning of our journey in creating the perfect component library. With this release, we are making the most critical components publicly available. More components are on the way.

For general information about the library and to begin using the components, please visit our Venus Component Library.