Angular app with spartan-ui components

For migrating to an Angular app, I wanted to use a UI component library. The old frontend is the Vite app from the Battleships project. There are already two articles about this project on this blog.

In my professional work, I often dealt with Angular Material. For the new project, I wanted to try a new library. Personally, I really like the shadcn components. These components are simple, and the library is quite extensive overall. Unfortunately, the library is designed for React apps, and Angular support is not available. Too bad - but an Angular alternative is in development 👩‍💻

The spartan-ui library offers components for Angular in the style of shadcn. The project is still in alpha status, and the website explicitly warns about breaking changes. In a production software, I would definitely avoid using a library in alpha status. However, for my learning experiment, it is more than sufficient.

Setup of spartan-ui in my Angular project

The installation of spartan-ui requires several steps, but it is well documented. The styling is based on TailwindCSS, so it must be installed as a prerequisite. By the way, I used the Angular CLI for all installation steps. That worked best for me.

After the initial setup, the desired spartan components can be downloaded. For each component, the necessary files are saved in a libs directory in the project. I initially chose the Button component and the Typography package. The latter offers styles for various text elements. The libs directory looks like this.

Using Styles and Components on a Page

After the setup, I can now work with the downloaded components and styles in my HTML template. As mentioned earlier, spartan-ui is built on TailwindCSS. Therefore, styling is done using directives directly in the HTML code. In the following code example, I use an h1 header and a button, each styled with the corresponding directive hlmH1 and hlmBtn.

<div class="flex justify-center">
  <div class="flex flex-col gap-5 m-20">
    <h1 hlmH1>Welcome to Battleships</h1>
    <button hlmBtn id="start">Start the game</button>
  </div>
</div>

When we run the app, we see the spartan-ui components styled like shadcn 😄

Conclusion

I am curious if the spartan-ui project will ever leave alpha status. It is probably difficult to incorporate all the new features from the original shadcn project into spartan-ui. It would be more practical if shadcn could directly support Angular. However, according to the discussion in this GitHub Issue, that doesn't seem likely.

For my learning experiment, I will continue with spartan-ui for now. Let's see if it works well until the end 😁