Setting up VMware Clarity project using core components

I am trying to setup my new project using VMware Clarity and Angular. I see the new documentation that suggest to use @cds/* libraries instead of angular libraries. This seems interesting and I liked it as in future its possible to replace Angular with any other framework.

Now to setup my project, I first created a new angular project using angular version 12+ and then followed instructions here to add Clarity to it:

https://clarity.design/get-started/developing/#installation

1. npm install @cds/core @cds/city --save
2. Added below lines to my styles.scss file:

// Sass file syntax
@import 'modern-normalize/modern-normalize.css'; // css reset
@import '@cds/core/global.min'; // clarity global styles
@import '@cds/core/styles/module.shims.min'; // non-evergreen browser shims
@import '@cds/city/css/bundles/default.min'; // load base font

3. Now I am trying to create the Top Navigation bar of my site with some Navigation Iteam and username. But that doesn't seems to be working. It seems I am missing some other component (@clr/ui?).

    <div class="main-container">
  <header class="header">
    <div class="branding">
      <a class="nav-link">
        <span class="title"> Site Name </span>
      </a>
      <div class="header-nav">
        <a class="active nav-link nav-text">Home</a>
      </div>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <p>
        <cds-tag status="danger"> Some Text </cds-tag>
      </p>
    </div>
  </div>
</div>

Can anyone please help me to understand is why this is not working. Do I need to add @clr related components as well. If yes then it makes whole things again very confusing (why to add @clr and @cds both). However, can anyone please point me to a correct Step by Step guide for a new project with Clarity Core Components. This link is doesn't seems to help much: https://clarity.design/get-started/developing/

what you've done so far is add the Clarity Core components only, so you can only use what is documented under the Core Components on the website. We are still building some components, notably the Header you need here, so you can also add Clarity Angular ng add @clr/angular to be able to use the Angular components (and that includes the @clr/ui stylings as well). Otherwise you appear to be on the right path with using Core components anytime you can.