Spartan UI for Angular Developers

I stumbled upon Spartan/ui in Josh Morony's newsletter (Josh remains my main go-to resource person for everything Angular) recently and have decided to give it a spin to see what it has got to offer to Angular developers.

According to the author of Spartan UI - Robin Goetz- Spartan UI is Shadcn like collection of un-styled and accessible ( a11y ) Angular UI primitives (The building blocks of your UI).

The two major parts of the building blocks of Spartan/ui are the Brain and the Helm:

1. The spartan/ui/brain offers a versatile collection of un-styled UI building blocks that can be easily tailored to match your project's distinct visual and functional preferences.
2. The spartan/ui/helm provides pre-designed styles built on TailwindCSS and CSS variables. Just like with shadcn, the styles can be copied to projects with full control code, appearance, and overall experience.

Setting up

spartan/ui comes equipped with Nx plugin and integrates easily into Nx workspace. A single command can add any of its 30 spartan/ui primitives to projects.

Let's get our hands dirty and see how spartan/ui looks like.

1. Begin by creating a new Angular project inside Nx workspace by running the command below:

npx create-nx-workspace@latest

Using spartan/ui in your project

Once you have a new Nx workspace set up, you can install the spartan/ui package using the following command:

npm install --save spartan/ui

This will install the spartan/ui package and its dependencies into your project.

Importing spartan/ui components

Once the spartan/ui package is installed, you can start importing the components you need into your Angular components. For example, to import the Button component, you can use the following code:

import { Button } from 'spartan/ui';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  // ...
}

Using spartan/ui components in your templates

With the Button component imported, you can now use it in your Angular templates. For example, the following code snippet shows how to use the Button component to create a simple button:

<button spartanButton>Click me</button>

This code will create a button with the text "Click me".

Spartan/ui is a promising new Angular UI library that offers a collection of un-styled and accessible UI components. The library is easy to use and integrates well with Nx workspaces. With its focus on customization and accessibility, Spartan/ui is a great option for developers who want to create unique and user-friendly Angular applications.

I hope this article has given you a good introduction to Spartan/ui. For more information, please refer to the references below.

References & Additional Resources

1. Official Spartan/UI Documentation

2. Getting Started with Spartan/UI - Shadcn-like UI Components for Angular 

GlenH - Mar 8, 2024gghayoge at gmail.com