Get started with Sitefinity Component Framework
What is Sitefinity Component Framework
The Sitefinity Component Framework is a UI component library containing reusable Angular elements, such as components, directives, services and helpers. They are built following the Sitefinity design principles, and serve as building blocks for creating user interface for Angular applications. The library also contains Sitefinity specific styles in CSS and SCSS format.
Read more about Sitefinity Component Framework and customizing Sitefinity backend in:
This guide explains how to set up your Angular project to begin using Sitefinity Component Framework. It includes information on prerequisites, installing Sitefinity Component Framework, and optionally displaying a sample component in your application to verify your setup.
For existing applications, follow the steps below to begin using Sitefinity Component Framework in your project.
The framework is distributed through npm.
To install it add the required version to your package.json file manually or run the following command:
npm i @progress/sitefinity-component-framework --save
Import the modules of the components you would like to use. For example, if you want to use the SfButtonComponent, add the SfButtonModule to the imports of your Angular module.
Optionally, to make sure everything works as expected, you can place a sf-button in your app.component.html and see if it is rendered properly:
<sf-button look="large">Click me</sf-button>
Using the CSS Styles
Reference the styles from node_modules/sitefinity-component-framework/styles.