title: Custom Components page: components

Custom Components

Build reusable components with default props, custom tags, and slots. Components are stored in the /components folder and used with the <what-*> prefix.

🚀

Coming Soon

More component features are on the way! Stay tuned for enhanced component capabilities including scoped styles, component lifecycle hooks, and more.

Components with Default Props

Component files can define default props using a <what> block at the top. These defaults are used when props aren't passed.

With defaults:

With custom values:

<!-- In components/user-card.html -->
<what>
props = "name, role"
defaults.name = "Guest"
defaults.role = "Visitor"
</what>
<div>Hello #name#, you are a #role#</div>

<!-- Usage with defaults -->
<what-user-card/>

<!-- Override props -->
<what-user-card name="Alice" role="Admin"/>

Groups List Component

A component that displays a list of groups passed as an array prop.

Groups passed as array:

<!-- In components/user-groups-card.html -->
<what>
props = "groups"
</what>
<div class="card">
  <div class="card-body">
    <h3>Groups</h3>
    <ul>
      <loop data="#groups#" as="group">
        <li>#group.name#</li>
      </loop>
    </ul>
  </div>
</div>

<!-- Usage: pass groups as JSON array -->
<what-user-groups-card
  groups='[{"id":1,"name":"Admins"},{"id":2,"name":"Editors"}]'/>