Getting started with React

The Cosmos Design System is comprised of multiple packages:

  • Core: Components that are designed to fit any application's needs
  • Work: Components that facilitate more complex or prescribed application behaviors
  • Social: Components that facilitate social interactions and communication
  • Rich text editor: Dedicated package for the rich text editor and rich text viewer components

Installing Cosmos into your application is quick and easy with the use of npm. You can import all of the provided Cosmos packages or just the individual packages needed for your application.

$ npm install @pega/cosmos-react-core
$ npm install @pega/cosmos-react-work
$ npm install @pega/cosmos-react-social
$ npm install @pega/cosmos-react-rte

To get started, import the necessary packages you need and render them into any React app.

import React from 'react';
import { Button } from '@pega/cosmos-react-core';
const ButtonExample = () => {
return <Button variant='primary'>Hello Cosmos</Button>;
};
export default ButtonExample;

Cosmos demos on design.pega.com

In this section of the site, you can find component demos, usage instructions, and properties table for each Cosmos React 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.

Live Demo

Developer documentation on Pega Community

To learn how to configure Cosmos React applications, refer to developer documentation on Pega Community.