Contentstack Venus Component Library

The Venus React component library provides a comprehensive collection of Contentstack’s UI components which can be used to quickly build UI Extensions and Contentstack-based applications.

In this section, we have covered the general information about the user interface (UI) component library that we use at Contentstack. The Venus component library is what we refer to when designing or adding UI components.

How to use the Library

To start working with a component you need to perform the following:

• Install the library package

• Import style

• Import required component

Install the library package

To install the new interface components package in your app, run the following:

npm i @contentstack/venus-components --save
Copy

Import style

Finally, import the CSS style as follows:

import '@contentstack/venus-components/build/main.css'
Copy

Import required component

To import a component, run the following:

import { component } from '@contentstack/venus-components'
Copy

For example, to import the Button component, run the following:

import { Button } from '@contentstack/venus-components'
Copy

Design Token

Design tokens are the value variables required to easily build/maintain the UI. They are used in place of hard-coded values to ensure development flexibility and maintain UI consistencies across the design system.

These variables include values of CSS properties such as spacing, color, and typography.

We can consume these values by including them in our project in one of the below mentioned ways:

• JavaScript

import { TokenName } from '@contentstack/venus-components/build/variables.js'
Copy

• CSS

@import '@contentstack/venus-components/build/variables.css';
Copy

• SCSS

@import '@contentstack/venus-components/build/variables.scss';
Copy

Support and Feedback

You can also help us improve by providing your valuable feedback and suggestions. Please contact our Support team for more information.