{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/develop/getting-started-react/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Getting started","navTitle":null,"slug":"develop/getting-started-react/","hidePage":false,"collapsibleGroup":null,"group":null,"seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"The Constellation design system is comprised of components that are designed to fit any application's needs."},"body":[{"id":"bfac9c76-83c1-5889-93ea-a3b66d72534c","strapi_component":"layout.section","subSections":[],"title":"Installation","childStrapiComponentLayoutSectionBodyTextnode":{"body":"You may install the Constellation design system library via [npm](https://www.npmjs.com/package/@pega/cosmos-react-core/v/3.0.11). 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."}},{"id":"5d7243e7-c5e4-5256-bd56-aa6571bbfb67","strapi_component":"content.code-block","language":"bash","childStrapiComponentContentCodeBlockCodeTextnode":{"code":"$ npm install @pega/cosmos-react-core@4.0.1"}},{"id":"8243906c-1e1b-5f2b-8c39-bc004a33bc6b","strapi_component":"layout.section","subSections":[],"title":"Usage","childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"447a905e-2111-52a9-9adc-b813848c4a3f","strapi_component":"content.code-block","language":"javascript","childStrapiComponentContentCodeBlockCodeTextnode":{"code":"import React from 'react';\nimport { Button } from '@pega/cosmos-react-core';\n\nconst ButtonExample = () => {\n return ;\n};\n\nexport default ButtonExample;"}},{"id":"f192594f-4abc-59cf-8108-910585230ba6","strapi_component":"layout.section","subSections":[{"id":"7f79c1c1-6a3d-55d1-a637-29b9422c0ced","title":"Constellation demos on design.pega.com","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}}],"title":"Documentation","childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"59d3b029-f80d-57ca-aa66-b8c33d49cc9e","strapi_component":"demo.code-editor-tour","enable":true},{"id":"ed299da5-5f5f-5186-8380-515d0112e5b9","strapi_component":"layout.sub-section","title":"Developer documentation on Pega Community","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"To learn how to configure applications using the Constellation design system, refer to developer documentation on [Pega Community](https://community.pega.com/capabilities/user-experience).\n\n- [Developer documentation for the Constellation design system](https://docs.pega.com/bundle/platform/page/platform/user-experience/constellation-architecture.html)\n- [Developer documentation for embedded UIs](https://docs.pega.com/bundle/platform/page/platform/user-experience/web-embedding-constellation.html)"}}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"Getting started","navTitle":null,"slug":"develop/getting-started-react/","hidePage":false,"collapsibleGroup":null,"group":null,"seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"The Constellation design system is comprised of components that are designed to fit any application's needs."},"body":[{"id":"bfac9c76-83c1-5889-93ea-a3b66d72534c","strapi_component":"layout.section","subSections":[],"title":"Installation","childStrapiComponentLayoutSectionBodyTextnode":{"body":"You may install the Constellation design system library via [npm](https://www.npmjs.com/package/@pega/cosmos-react-core/v/3.0.11). 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."}},{"id":"5d7243e7-c5e4-5256-bd56-aa6571bbfb67","strapi_component":"content.code-block","language":"bash","childStrapiComponentContentCodeBlockCodeTextnode":{"code":"$ npm install @pega/cosmos-react-core@4.0.1"}},{"id":"8243906c-1e1b-5f2b-8c39-bc004a33bc6b","strapi_component":"layout.section","subSections":[],"title":"Usage","childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"447a905e-2111-52a9-9adc-b813848c4a3f","strapi_component":"content.code-block","language":"javascript","childStrapiComponentContentCodeBlockCodeTextnode":{"code":"import React from 'react';\nimport { Button } from '@pega/cosmos-react-core';\n\nconst ButtonExample = () => {\n return ;\n};\n\nexport default ButtonExample;"}},{"id":"f192594f-4abc-59cf-8108-910585230ba6","strapi_component":"layout.section","subSections":[{"id":"7f79c1c1-6a3d-55d1-a637-29b9422c0ced","title":"Constellation demos on design.pega.com","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}}],"title":"Documentation","childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"59d3b029-f80d-57ca-aa66-b8c33d49cc9e","strapi_component":"demo.code-editor-tour","enable":true},{"id":"ed299da5-5f5f-5186-8380-515d0112e5b9","strapi_component":"layout.sub-section","title":"Developer documentation on Pega Community","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"To learn how to configure applications using the Constellation design system, refer to developer documentation on [Pega Community](https://community.pega.com/capabilities/user-experience).\n\n- [Developer documentation for the Constellation design system](https://docs.pega.com/bundle/platform/page/platform/user-experience/constellation-architecture.html)\n- [Developer documentation for embedded UIs](https://docs.pega.com/bundle/platform/page/platform/user-experience/web-embedding-constellation.html)"}}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}