> For the complete documentation index, see [llms.txt](https://docs.mechcloud.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mechcloud.io/dashboard-builder/page-designer/single-component-prompts/demo-components.md).

# Demo Components

### Adding **Demo Components on a page**

Sites created under the **Default (Managed)** team have access to components from the [mechcloud-demo-microapp1](https://github.com/mechcloud/mechcloud-demo-microapp1) repository by default. Here are some examples on how to add these demo components on a page -

```
Add 'demo hero' component
```

```
Add 'demo pricing' component
```

**demo** is actually an alias for **rkt** and so you can very well replace **demo** word with **rkt** in the above prompts.

For other generic components, use: "Add a `<component_name>` component."

#### **Applying CSS Classes and Styles**

Enhance your components by specifying styles or classes directly -

```
Add a div with a yellow background and 1px solid border
```

```
Insert a div with class1 and class2 classes
```

#### **Updating Component Properties and Styles**

To modify component properties -

* Select the desired component.
* Use the properties editor in the rightmost column to adjust attributes, styles, or classes.