Getting started

The Constellation design system is comprised of components that are designed to fit any application's needs.

Installation

You may install the Constellation design system library via npm. The component library uses a proprietary license that is based on the Apache 2.0 license. It is intended to provide a similar set of rights, with the exception that any and all Constellation components shall be used only with Pegasystems software.

$ npm install @pega/cosmos-react-core@4.0.1

Usage

import React from 'react';
import { Button } from '@pega/cosmos-react-core';


const ButtonExample = () => {
  return <Button variant='primary'>Hello Cosmos</Button>;
};


export default ButtonExample;

Documentation

Constellation demos on design.pega.com

In the develop section of the site, you can find component demos, usage instructions, and properties table for each Constellation design system component. Live demos show capabilities and styling, as well as allow you to view the full source code, manipulate editable code, and view real-time effects, including theming.

Example

Media

Full Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Developer documentation on Pega Community

To learn how to configure applications using the Constellation design system, refer to developer documentation on Pega Community.