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