Contentstack Venus Component Library

1. Overview

Venus Components is Contentstack's official React component library, providing a comprehensive collection of reusable UI components. It serves as the design system foundation for Contentstack's UI-React application and can be used to build UI Extensions and Contentstack-based applications.

Key Features:

• 100+ production-ready React components
• TypeScript support with full type definitions
• Design token system for consistent theming
• SCSS-based styling with customizable variables
• Comprehensive Storybook documentation
• Accessibility-focused (WCAG AA standards)
• Redux integration for stateful components
• Rich Text Editor components (Slate-based)
• Form components with Formik integration

2. Tech Stack

| Layer | Technology | | ------------------------ | ---------------------------------------------------------------------------------- | | Language | TypeScript 5.3.3 | | Framework | React 18.3.1 | | Component Library | This is the Venus Components library itself | | State Management | Redux 4.0.5 + React Redux 7.2.1 | | Router | React Router DOM 5.2.0 | | Testing | Jest 27.5.1 + React Testing Library 10.4.9 | | Code Quality | ESLint 8.47.0 + Prettier 2.0.4 | | Component Docs | Storybook 6.5.14 | | Design Tokens | Style Dictionary 2.10.1 | | Styling | SCSS/PostCSS + Design Tokens | | Forms | Formik 2.4.6 | | Rich Text Editor | Slate 0.77.2 | | HTTP Client | Axios 1.8.4 | | Date Handling | date-fns 2.15.0 + Moment.js 2.29.1 |

3. Getting Started

Prerequisites

• Node.js: v18.0.0+ or v24.x
• npm: v8.19.3+
• Git: Latest version
• React: v16.8.6+ || v17 || v18 || v19 (peer dependency)

4. Using the Library in Your Project

Installation for Consumers

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

Import and Use

import '@contentstack/venus-components/build/main.css'
import { Button, Table, Modal } from '@contentstack/venus-components'

<Button buttonType="primary" onClick={() => console.log('Clicked!')}>Click Me</Button>

Design Tokens

Consumers:

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

5. Troubleshooting

Common Issues

Peer dependency conflicts: Use npm install --legacy-peer-deps or npm install --ignore-scripts --no-engine

Node.js compatibility: Use v18 or v25. Switch with nvm install 22 && nvm use 22

OpenSSL error: Already fixed via NODE_OPTIONS='--openssl-legacy-provider' in package.json

Module errors: Run npm run clean-install