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.

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.

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 in your React app 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')

  );


})

• Contentstack Venus Component Library
• Work with Contentstack UI Extensions

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