Venus Component Library

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

How to Use the Venus Component Library

The easiest way to start with the library is to create a new extension with React and Contentstack Extensions SDK.

You can refer to our Experience Extension documentation to understand how to create a sample extension. This extension will be devoid of any configuration details and you do not need to install or configure any external tools as they are preconfigured and hidden.

Let’s check out a sample code that will help you integrate the React components with extensions.

Integrating Venus Components With Extension

Venus components can be used in creating a React app or any React app build that uses webpack or any other bundler.

Follow the instructions given below to integrate the components with existing UI extensions built using React.

Prerequisites

The Contentstack Venus Component Library best works with React version >=16.8.0

Installation

Run the following command to install the Venus component library elements:

npm i  @contentstack/ui-extensions-sdk @contentstack/venus-components

Usage

Next, use the following code snippet to integrate the components into your application:

import React from 'react';
import ReactDOM from 'react-dom';
import ContentstackUIExtension from "@contentstack/ui-extensions-sdk";
import { Button, Heading } from '@contentstack/venus-components';
import '@contentstack/venus-components/build/main.css';

class App extends React.Component {
  render() {
    return (
      <Heading tagName="h2" text="Extension building using Venus component" />
      <Button
        buttonType="primary"
        onClick={() => {
          console.log('You clicked on Venus button');
        }}
      >
        Click on me
      </Button>
    );
  }
}

ContentstackUIExtension.init().then((extension) => {
  
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

})

Important Links

Support and Feedback

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