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.

Get Murat Karagözgil’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

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