Spartan

https://spartan.ng/documentation
Admin
Spartan is an accessible UI component library for Angular with a two-layer architecture combining...
Tokens:16,282
Snippets:151
Trust Score:6.5
Update:2 months ago
Show doc for...
Tokens:
Raw
### Inspect Project Setup

Source: https://spartan.ng/documentation/cli

Print a summary of the current Spartan configuration and installed components.

```bash
ng g @spartan-ng/cli:info --json
```

```bash
npx nx g @spartan-ng/cli:info --json
```

--------------------------------

### Install Core Dependencies

Source: https://spartan.ng/documentation/installation

Manually install the brain primitives and Angular CDK.

```bash
pnpm add @spartan-ng/brain
```

```bash
pnpm add @angular/cdk
```

--------------------------------

### Install Spartan CLI

Source: https://spartan.ng/documentation/cli

Install the Spartan CLI as a development dependency in your project.

```bash
pnpm add -D @spartan-ng/cli
```

--------------------------------

### Configure MCP Server with Global Install

Source: https://spartan.ng/documentation/mcp

Use this configuration if you have installed the package globally via npm.

```json
{
	"mcpServers": {
		"spartan-ui": {
			"command": "spartan-mcp"
		}
	}
}
```

--------------------------------

### Install Typography via CLI

Source: https://spartan.ng/documentation/typography

Commands to install the typography component using either Angular CLI or Nx.

```bash
ng g @spartan-ng/cli:ui typography
```

```bash
nx g @spartan-ng/cli:ui typography
```

--------------------------------

### Install Spartan Skill

Source: https://spartan.ng/documentation/skills

Adds the Spartan skill to the project's agent skills directory or globally.

```bash
npx skills add spartan-ng/spartan
```

--------------------------------

### Define Primary CSS Variables

Source: https://spartan.ng/documentation/theming

Basic setup for primary color variables in the root stylesheet.

```css
:root {
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
}
```

--------------------------------

### Configure UI Theme

Source: https://spartan.ng/documentation/cli

Initialize the theme and Tailwind settings for your project.

```bash
ng g @spartan-ng/cli:ui-theme
```

```bash
npx nx g @spartan-ng/cli:ui-theme
```

--------------------------------

### Initialize spartan CLI

Source: https://spartan.ng/documentation/styles

Run this command to initialize the spartan CLI and select a visual style.

```bash
ng g @spartan-ng/cli:init
```

--------------------------------

### Add UI Components

Source: https://spartan.ng/documentation/cli

Add Spartan UI components to your project using the CLI.

```bash
ng g @spartan-ng/cli:ui
```

```bash
npx nx g @spartan-ng/cli:ui
```

--------------------------------

### Import spartan/ui Preset

Source: https://spartan.ng/documentation/installation

Include the spartan preset in your CSS file.

```css
@import "@spartan-ng/brain/hlm-tailwind-preset.css";
```

--------------------------------

### Run Project Context Generator

Source: https://spartan.ng/documentation/skills

Executes the read-only info generator to output project configuration and component status as JSON.

```bash
npx nx g @spartan-ng/cli:info --json
```

--------------------------------

### Configure Full Theme Variables

Source: https://spartan.ng/documentation/theming

Comprehensive list of available CSS variables for light and dark mode configurations.

```css
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.985 0 0);
  --sidebar-primary-foreground: oklch(0.205 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}
```

--------------------------------

### Configure MCP Server with npx

Source: https://spartan.ng/documentation/mcp

Add this configuration to your MCP client to run the server on demand using npx.

```json
{
	"mcpServers": {
		"spartan-ui": {
			"command": "npx",
			"args": ["-y", "@spartan-ng/mcp"]
		}
	}
}
```

--------------------------------

### Automated Helm Component Migration

Source: https://spartan.ng/documentation/update-guide

Use the CLI to replace existing helm components with the latest versions. Note that this will overwrite any local customizations.

```bash
ng g @spartan-ng/cli:migrate-helm-libraries
```

```bash
nx g @spartan-ng/cli:migrate-helm-libraries
```

--------------------------------

### Regenerate components

Source: https://spartan.ng/documentation/styles

Use this command to regenerate components after changing the style configuration.

```bash
ng g @spartan-ng/cli:ui button
```

--------------------------------

### Configure Base Color Palettes

Source: https://spartan.ng/documentation/theming

CSS variable definitions for Neutral and Stone base themes, including light and dark mode overrides.

```css
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.985 0 0);
  --sidebar-primary-foreground: oklch(0.205 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}
```

```css
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.25);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.147 0.004 49.25);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.147 0.004 49.25);
  --primary: oklch(0.216 0.006 56.043);
  --primary-foreground: oklch(0.985 0.001 106.423);
  --secondary: oklch(0.97 0.001 106.424);
  --secondary-foreground: oklch(0.216 0.006 56.043);
  --muted: oklch(0.97 0.001 106.424);
  --muted-foreground: oklch(0.553 0.013 58.071);
  --accent: oklch(0.97 0.001 106.424);
  --accent-foreground: oklch(0.216 0.006 56.043);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.923 0.003 48.717);
  --input: oklch(0.923 0.003 48.717);
  --ring: oklch(0.709 0.01 56.259);
  --sidebar: oklch(0.985 0.001 106.423);
  --sidebar-foreground: oklch(0.147 0.004 49.25);
  --sidebar-primary: oklch(0.216 0.006 56.043);
  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
  --sidebar-accent: oklch(0.97 0.001 106.424);
  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
  --sidebar-border: oklch(0.923 0.003 48.717);
  --sidebar-ring: oklch(0.709 0.01 56.259);
}

.dark {
  --background: oklch(0.147 0.004 49.25);
  --foreground: oklch(0.985 0.001 106.423);
  --card: oklch(0.216 0.006 56.043);
  --card-foreground: oklch(0.985 0.001 106.423);
  --popover: oklch(0.216 0.006 56.043);
  --popover-foreground: oklch(0.985 0.001 106.423);
  --primary: oklch(0.923 0.003 48.717);
  --primary-foreground: oklch(0.216 0.006 56.043);
  --secondary: oklch(0.268 0.007 34.298);
  --secondary-foreground: oklch(0.985 0.001 106.423);
  --muted: oklch(0.268 0.007 34.298);
  --muted-foreground: oklch(0.709 0.01 56.259);
  --accent: oklch(0.268 0.007 34.298);
  --accent-foreground: oklch(0.985 0.001 106.423);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.553 0.013 58.071);
  --sidebar: oklch(0.216 0.006 56.043);
  --sidebar-foreground: oklch(0.985 0.001 106.423);
  --sidebar-primary: oklch(0.985 0.001 106.423);
  --sidebar-primary-foreground: oklch(0.216 0.006 56.043);
  --sidebar-accent: oklch(0.268 0.007 34.298);
  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.553 0.013 58.071);
}
```

--------------------------------

### NX Workspace components.json Configuration

Source: https://spartan.ng/documentation/components-json

Configuration structure for NX workspaces, including buildable and generateAs options.

```json
{
	"componentsPath": "libs/ui",
	"importAlias": "@spartan-ng/helm",
	"buildable": true,
	"generateAs": "library" | "entrypoint",
	"style": "nova" | "vega" | "lyra" | "maia" | "mira" | "luma",
}
```

--------------------------------

### Angular CLI Project components.json Configuration

Source: https://spartan.ng/documentation/components-json

Configuration structure for standard Angular CLI projects.

```json
{
	"componentsPath": "libs/ui",
	"importAlias": "@spartan-ng/helm",
	"style": "nova" | "vega" | "lyra" | "maia" | "mira" | "luma",
}
```

--------------------------------

### Apply Themed Content

Source: https://spartan.ng/documentation/theming

Demonstrates applying background and text color classes to a container to utilize the defined CSS variables.

```html
<div class="bg-background text-foreground">Themed content</div>
```

--------------------------------

### Playing Shimmer Once

Source: https://spartan.ng/documentation/shimmer

Use shimmer-once to trigger a single sweep animation instead of a continuous loop.

```html
<p class="shimmer shimmer-duration-1100 shimmer-once text-muted-foreground text-sm">
  Generating response…
</p>
```

--------------------------------

### Apply Lead Typography

Source: https://spartan.ng/documentation/typography

Use hlmLead to style a lead paragraph element.

```typescript
import { Component } from '@angular/core';
import { hlmLead } from '@spartan-ng/helm/typography';

@Component({
  selector: 'spartan-lead',
  template: `
    <p class="${hlmLead}">A modal dialog that interrupts the user with important content and expects a response.</p>
  `,
})
export default class LeadComponent {}
```

--------------------------------

### Implement RTL scroll fade

Source: https://spartan.ng/documentation/scroll-fade

The scroll-fade-x utility automatically adapts to the reading direction, ensuring the correct edge fades in RTL layouts.

```html
<div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border" dir="rtl">
  <div class="scroll-fade-x no-scrollbar overflow-x-auto">
    <div class="flex w-max gap-1.5 p-1.5">
      @for (tag of tags; track tag) {
        <div class="bg-muted shrink-0 rounded-lg px-3 py-2.5 text-sm">{{ tag }}</div>
      }
    </div>
  </div>
</div>
```

--------------------------------

### Configure fade size

Source: https://spartan.ng/documentation/scroll-fade

Apply a fixed fade depth using spacing scale utilities like scroll-fade-24.

```html
<div class="scroll-fade scroll-fade-24 no-scrollbar h-48 overflow-y-auto">
  <!-- fixed fade depth on the spacing scale -->
</div>
```

--------------------------------

### Configure Tailwind CSS IntelliSense for VSCode

Source: https://spartan.ng/documentation/installation

Add this configuration to your VSCode settings.json to enable autocompletion for hlm, cva, and classes functions.

```json
{
  "tailwindCSS.classFunctions": ["hlm", "cva", "classes"]
}
```

--------------------------------

### RTL Support

Source: https://spartan.ng/documentation/shimmer

The shimmer effect automatically adapts to reading direction, with manual control available via shimmer-reverse.

```html
<p class="shimmer" dir="ltr">Generating response…</p>
<p class="shimmer" dir="rtl">جارٍ إنشاء الرد…</p>
```

--------------------------------

### Define Gray Theme CSS Variables

Source: https://spartan.ng/documentation/theming

Configures the Gray theme using CSS variables for light and dark modes.

```css
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.028 261.692);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.13 0.028 261.692);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.13 0.028 261.692);
  --primary: oklch(0.21 0.034 264.665);
  --primary-foreground: oklch(0.985 0.002 247.839);
  --secondary: oklch(0.967 0.003 264.542);
  --secondary-foreground: oklch(0.21 0.034 264.665);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.551 0.027 264.364);
  --accent: oklch(0.967 0.003 264.542);
  --accent-foreground: oklch(0.21 0.034 264.665);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.928 0.006 264.531);
  --input: oklch(0.928 0.006 264.531);
  --ring: oklch(0.707 0.022 261.325);
  --sidebar: oklch(0.985 0.002 247.839);
  --sidebar-foreground: oklch(0.13 0.028 261.692);
  --sidebar-primary: oklch(0.21 0.034 264.665);
  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
  --sidebar-accent: oklch(0.967 0.003 264.542);
  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
  --sidebar-border: oklch(0.928 0.006 264.531);
  --sidebar-ring: oklch(0.707 0.022 261.325);
}

.dark {
  --background: oklch(0.13 0.028 261.692);
  --foreground: oklch(0.985 0.002 247.839);
  --card: oklch(0.21 0.034 264.665);
  --card-foreground: oklch(0.985 0.002 247.839);
  --popover: oklch(0.21 0.034 264.665);
  --popover-foreground: oklch(0.985 0.002 247.839);
  --primary: oklch(0.928 0.006 264.531);
  --primary-foreground: oklch(0.21 0.034 264.665);
  --secondary: oklch(0.278 0.033 256.848);
  --secondary-foreground: oklch(0.985 0.002 247.839);
  --muted: oklch(0.278 0.033 256.848);
  --muted-foreground: oklch(0.707 0.022 261.325);
  --accent: oklch(0.278 0.033 256.848);
  --accent-foreground: oklch(0.985 0.002 247.839);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --sidebar: oklch(0.21 0.034 264.665);
  --sidebar-foreground: oklch(0.985 0.002 247.839);
  --sidebar-primary: oklch(0.985 0.002 247.839);
  --sidebar-primary-foreground: oklch(0.21 0.034 264.665);
  --sidebar-accent: oklch(0.278 0.033 256.848);
  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}
```

--------------------------------

### Basic Shimmer Usage

Source: https://spartan.ng/documentation/shimmer

Apply the shimmer class to a text element to initiate the sweeping highlight loop.

```html
<p class="text-muted-foreground shimmer text-sm">Generating response…</p>
```

--------------------------------

### Configure Prettier for Tailwind Class Sorting

Source: https://spartan.ng/documentation/installation

Add this configuration to your .prettierrc file to enable automatic sorting of Tailwind classes for specified functions.

```json
{
  "tailwindFunctions": ["hlm", "cva", "classes"]
}
```

--------------------------------

### Shimmer with Marker Component

Source: https://spartan.ng/documentation/shimmer

Integrate the shimmer effect within a marker component to indicate live status.

```html
<div hlmMarker role="status">
  <span hlmMarkerIcon>
    <hlm-spinner />
  </span>
  <span hlmMarkerContent class="shimmer">Thinking...</span>
</div>
<div hlmMarker variant="separator" role="status">
  <span hlmMarkerContent class="shimmer">Reading 4 files</span>
</div>
```

--------------------------------

### Define Theme CSS Variables

Source: https://spartan.ng/documentation/installation

Manually define light and dark mode CSS variables in your styles file.

```css
:root {
  color-scheme: light;
  --font-sans: 'Geist Sans', sans-serif;
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  color-scheme: dark;
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.985 0 0);
  --sidebar-primary-foreground: oklch(0.205 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}
```

--------------------------------

### Apply Custom Color Classes

Source: https://spartan.ng/documentation/theming

Use the registered custom color variables as Tailwind utility classes in HTML.

```html
<div class="bg-warning text-warning-foreground">Warning message</div>
```

--------------------------------

### Apply Colors with Tailwind Classes

Source: https://spartan.ng/documentation/theming

Usage of semantic color variables within HTML markup using Tailwind utility classes.

```html
<button class="bg-primary text-primary-foreground">Click me</button>
```

--------------------------------

### Apply Small Typography

Source: https://spartan.ng/documentation/typography

Use hlmSmall to style a small text element.

```typescript
import { Component } from '@angular/core';
import { hlmSmall } from '@spartan-ng/helm/typography';

@Component({
  selector: 'spartan-small',
  template: `
    <p class="${hlmSmall}">Email address</p>
  `,
})
export default class SmallComponent {}
```

--------------------------------

### Setting Shimmer Duration

Source: https://spartan.ng/documentation/shimmer

Adjust the sweep speed by providing a duration in milliseconds via shimmer-duration-*.

```html
<p class="shimmer shimmer-duration-1000">Generating response…</p>
```

--------------------------------

### Configure style in components.json

Source: https://spartan.ng/documentation/styles

Update the style field in components.json to change the visual theme of generated components.

```json
{
  "style": "nova",
  ...
}
```

--------------------------------

### Configure CSS Layers

Source: https://spartan.ng/documentation/installation

Define Tailwind CSS layers in your global styles file.

```css
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
```

--------------------------------

### Setting Shimmer Angle

Source: https://spartan.ng/documentation/shimmer

Modify the tilt of the highlight band in degrees using shimmer-angle-*.

```html
<p class="shimmer shimmer-angle-45">Generating response…</p>
```

--------------------------------

### Disabling Shimmer

Source: https://spartan.ng/documentation/shimmer

Apply shimmer-none to disable the effect, useful for responsive overrides.

```html
<p class="shimmer md:shimmer-none">Generating response…</p>
```

--------------------------------

### Update Brain and CLI Packages

Source: https://spartan.ng/documentation/update-guide

Use the package manager to update the core brain and CLI dependencies to the latest versions.

```bash
pnpm add @spartan-ng/brain@latest @spartan-ng/cli@latest
```

--------------------------------

### Run Health Check via CLI

Source: https://spartan.ng/documentation/health-checks

Execute the health check command using either Angular CLI or Nx to scan the codebase for issues.

```bash
ng g @spartan-ng/cli:healthcheck
```

```bash
nx g @spartan-ng/cli:healthcheck
```

--------------------------------

### Define Zinc Theme CSS Variables

Source: https://spartan.ng/documentation/theming

Configures the Zinc theme using CSS variables for light and dark modes.

```css
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.985 0 0);
  --sidebar-primary-foreground: oklch(0.21 0.006 285.885);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
}
```

--------------------------------

### Adjusting Shimmer Spread

Source: https://spartan.ng/documentation/shimmer

Control the width of the highlight band using the spacing scale with shimmer-spread-*.

```html
<p class="shimmer shimmer-spread-24">Generating response…</p>
```

--------------------------------

### Apply Paragraph Typography

Source: https://spartan.ng/documentation/typography

Use hlmP to style a paragraph element.

```typescript
import { Component } from '@angular/core';
import { hlmP } from '@spartan-ng/helm/typography';

@Component({
  selector: 'spartan-p',
  template: `
    <p class="${hlmP}">
      The king, seeing how much happier his subjects were,
      realized the error of his ways and repealed the joke tax.
    </p>
  `,
})
export default class PComponent {}
```

--------------------------------

### Customizing Shimmer Color

Source: https://spartan.ng/documentation/shimmer

Use shimmer-color-* to define a specific highlight color using theme colors or arbitrary values.

```html
<p class="shimmer shimmer-color-blue-500/60">Generating response…</p>
<p class="shimmer shimmer-color-[#378ADD]">Generating response…</p>
```

--------------------------------

### Register Custom Semantic Colors

Source: https://spartan.ng/documentation/theming

Define CSS variables for custom colors and register them within the @theme block to make them available as Tailwind utilities.

```css
:root {
  --warning: oklch(0.84 0.16 84);
  --warning-foreground: oklch(0.28 0.07 46);
}

.dark {
  --warning: oklch(0.41 0.11 46);
  --warning-foreground: oklch(0.99 0.02 95);
}

@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}
```

--------------------------------

### Apply Blockquote Typography

Source: https://spartan.ng/documentation/typography

Use hlmBlockquote to style a blockquote element.

```typescript
import { Component } from '@angular/core';
import { hlmBlockquote } from '@spartan-ng/helm/typography';

@Component({
  selector: 'spartan-blockquote',
  template: `
    <blockquote class="${hlmBlockquote}">
      "After all," he said, "everyone enjoys a good joke,
      so it's only fair that they should pay for the privilege."
    </blockquote>
  `,
})
export default class BlockquoteComponent {}
```

--------------------------------

### Apply List Typography

Source: https://spartan.ng/documentation/typography

Use hlmUl to style an unordered list element.

```typescript
import { Component } from '@angular/core';
import { hlmUl } from '@spartan-ng/helm/typography';

@Component({
  selector: 'spartan-list',
  template: `
    <ul class="${hlmUl}">
      <li>1st level of puns: 5 gold coins</li>
      <li>2nd level of jokes: 10 gold coins</li>
      <li>3rd level of one-liners : 20 gold coins</li>
    </ul>
  `,
})
export default class ListComponent {}
```

--------------------------------

### Apply Inline Code Typography

Source: https://spartan.ng/documentation/typography

Use hlmCode to style an inline code element.

```typescript
import { Component } from '@angular/core';
import { hlmCode } from '@spartan-ng/helm/typography';

@Component({
  selector: 'spartan-code',
  template: `
    <code class="${hlmCode}">@radix-ui/react-alert-dialog</code>
  `,
})
export default class CodeComponent {}
```
Tokens:
Raw