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.
- Developer documentation for Cosmos React
- COMING SOON: Developer documentation for extending Cosmos components
- COMING SOON: Developer documentation for embedded UIs