MechCloud
  • What is MechCloud?
  • MechCloud Website
  • Launch Portal
  • Links
    • Discord
    • Youtube
    • Blog
    • LinkedIn
    • Twitter
  • Comparison With WordPress
  • Tutorials / Blog Posts
  • Administration
    • Multitenancy
      • Tenant
      • Team
    • Subscriptions
      • Basic
      • Pro
  • Cloud Computing
    • Cloud Accounts
      • Add An Account
        • AWS
        • GCP
        • Azure
      • Configure Regions / Zones
      • Discover Assets
      • Real-time Visualization
        • AWS
          • Tags
          • CloudTrail
        • GCP
  • AI Agents
    • AWS Agent
      • EC2
      • Lightsail
      • Multi-operation Prompts
    • Systems Agent
      • Cloudflare
      • MongoDB Atlas API
  • Website Builder
    • Routing
    • Micro app based architecture
    • Site
    • Site Node
    • Custom Components
      • Frame
      • Layout
      • External Page
      • Component
    • Special Tags
      • <mc-navigation-link>
      • <mc-render-node>
    • Page Designer
      • Single Component Prompts
        • Native HTML tags
        • MechCloud UI Components
        • Demo Components
        • Third Party Components
      • Multi Components Prompts
Powered by GitBook
On this page

Was this helpful?

  1. Website Builder
  2. Page Designer
  3. Single Component Prompts

Demo Components

PreviousMechCloud UI ComponentsNextThird Party Components

Last updated 2 months ago

Was this helpful?

Adding Demo Components on a page

Sites created under the Default (Managed) team have access to components from the 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.

mechcloud-demo-microapp1