SpartanNG From Zero&Getting Started

From spartan.ng website

What is Spartan UI library?

spartan/ui is built on the spartan/ui/brain library that provides accessible, but unstyled primitives that build the foundation of an inclusive user interface.

On top we put spartan/ui/helm a library that gives our primitives a beautifully designed shading look.

Let’s get started

First of all, we need a workspace to integrate the spartan-ui library.

npx create-nx-workspace@latest

Q&A — Below

Now we can start installing the spartan dependencies

npm i -D @spartan-ng/nx

Setup tailwind

npx nx g @nx/angular:setup-tailwind

npm i @spartan-ng/ui-core

Add tailwind presets from the spartan ui library to your project via this setting. Open your tailwind.config.js

presets: [require('@spartan-ng/ui-core/hlm-tailwind-preset')]

npx nx g @spartan-ng/nx:ui-theme

That’s all, let's get tested.

Install button library from the spartan library

ng g @spartan-ng/cli:ui button

Then update the app.component.ts

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  standalone: true,
  imports: [RouterModule, HlmButtonDirective],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'traders-spy-sparta';
}

and app.component.html file

<div class="h-screen flex items-center justify-center">
  <button hlmBtn>Hello from {{ title }}</button>
</div>

finished!

Thanks for the video,

https://www.youtube.com/watch?v=lfmR6U-P8t4&ab_channel=RobinGoetz