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

Installation

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

Usage

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;

Documentation

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.