Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

Carousel

A carousel with motion and swipe built using Embla.

import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
	HlmCarousel,
	HlmCarouselContent,
	HlmCarouselItem,
	HlmCarouselNext,
	HlmCarouselPrevious,
} from '@spartan-ng/helm/carousel';

@Component({
	selector: 'spartan-carousel-preview',
	imports: [
		HlmCarousel,
		HlmCarouselContent,
		HlmCarouselItem,
		HlmCarouselNext,
		HlmCarouselPrevious,
		HlmCard,
		HlmCardContent,
	],
	template: `
		<div class="flex w-full items-center justify-center p-4">
			<hlm-carousel class="w-full max-w-xs">
				<hlm-carousel-content>
					@for (item of items; track item) {
						<hlm-carousel-item>
							<div class="p-1">
								<section hlmCard>
									<p hlmCardContent class="flex aspect-square items-center justify-center p-6">
										<span class="text-4xl font-semibold">{{ item }}</span>
									</p>
								</section>
							</div>
						</hlm-carousel-item>
					}
				</hlm-carousel-content>
				<button hlm-carousel-previous></button>
				<button hlm-carousel-next></button>
			</hlm-carousel>
		</div>
	`,
})
export class CarouselPreview {
	public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

About

Carousel is built on top of Embla Carousel library and the embla-carousel-angular wrapper .

Installation

npx nx g @spartan-ng/cli:ui carousel

Usage

import {
	HlmCarousel
	HlmCarouselContent
	HlmCarouselItem
	HlmCarouselNext
	HlmCarouselPrevious
} from '@spartan-ng/helm/carousel';

<hlm-carousel>
  <hlm-carousel-content>
    <hlm-carousel-item>
      Item Content
    </hlm-carousel-item>
  </hlm-carousel-content>
  <button hlm-carousel-previous></button>
  <button hlm-carousel-next></button>
</hlm-carousel>

Examples

Sizes

The size of the items can be set by using the basis utility class on the hlm-carousel-item .

import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
	HlmCarousel,
	HlmCarouselContent,
	HlmCarouselItem,
	HlmCarouselNext,
	HlmCarouselPrevious,
} from '@spartan-ng/helm/carousel';

@Component({
	selector: 'spartan-carousel-sizes',
	imports: [
		HlmCarousel,
		HlmCarouselContent,
		HlmCarouselItem,
		HlmCarouselNext,
		HlmCarouselPrevious,
		HlmCard,
		HlmCardContent,
	],
	template: `
		<div class="flex w-full items-center justify-center p-4">
			<hlm-carousel class="w-full max-w-sm">
				<hlm-carousel-content>
					@for (item of items; track item) {
						<hlm-carousel-item class="md:basis-1/2 lg:basis-1/3">
							<div class="p-1">
								<section hlmCard>
									<p hlmCardContent class="flex aspect-square items-center justify-center p-6">
										<span class="text-3xl font-semibold">{{ item }}</span>
									</p>
								</section>
							</div>
						</hlm-carousel-item>
					}
				</hlm-carousel-content>
				<button hlm-carousel-previous></button>
				<button hlm-carousel-next></button>
			</hlm-carousel>
		</div>
	`,
})
export class CarouselSizes {
	public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

Spacing

The spacing between the items can be set by using a pl-[VALUE] utility on the hlm-carousel-item and a negative -ml-[VALUE] on the hlm-carousel-content .

import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
	HlmCarousel,
	HlmCarouselContent,
	HlmCarouselItem,
	HlmCarouselNext,
	HlmCarouselPrevious,
} from '@spartan-ng/helm/carousel';

@Component({
	selector: 'spartan-carousel-spacing',
	imports: [
		HlmCarousel,
		HlmCarouselContent,
		HlmCarouselItem,
		HlmCarouselNext,
		HlmCarouselPrevious,
		HlmCard,
		HlmCardContent,
	],
	template: `
		<div class="flex w-full items-center justify-center p-4">
			<hlm-carousel class="w-full max-w-sm">
				<hlm-carousel-content class="-ml-1">
					@for (item of items; track item) {
						<hlm-carousel-item class="pl-1 md:basis-1/2 lg:basis-1/3">
							<div class="p-1">
								<section hlmCard>
									<p hlmCardContent class="flex aspect-square items-center justify-center p-6">
										<span class="text-2xl font-semibold">{{ item }}</span>
									</p>
								</section>
							</div>
						</hlm-carousel-item>
					}
				</hlm-carousel-content>
				<button hlm-carousel-previous></button>
				<button hlm-carousel-next></button>
			</hlm-carousel>
		</div>
	`,
})
export class CarouselSpacing {
	public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

Orientation

The orientation prop can be used to set the orientation of the carousel.

import { Component } from '@angular/core';
import { HlmCardImports } from '@spartan-ng/helm/card';
import { HlmCarouselImports } from '@spartan-ng/helm/carousel';

@Component({
	selector: 'spartan-carousel-orientation',
	imports: [HlmCarouselImports, HlmCardImports],
	host: {
		class: 'w-full',
	},
	template: `
		<div class="flex w-full items-center justify-center p-4">
			<hlm-carousel class="w-full max-w-xs" orientation="vertical">
				<hlm-carousel-content class="-mt-1 h-[200px]">
					@for (item of items; track item) {
						<hlm-carousel-item class="pt-1 md:basis-1/2">
							<div class="p-1">
								<section hlmCard>
									<p hlmCardContent class="flex items-center justify-center p-6">
										<span class="text-3xl font-semibold">{{ item }}</span>
									</p>
								</section>
							</div>
						</hlm-carousel-item>
					}
				</hlm-carousel-content>
				<button hlm-carousel-previous></button>
				<button hlm-carousel-next></button>
			</hlm-carousel>
		</div>
	`,
})
export class CarouselOrientation {
	public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

Slide Count

Use hlm-carousel-slide-display to display the current and total slides.

import { Component } from '@angular/core';
import { HlmCard, HlmCardContent } from '@spartan-ng/helm/card';
import {
	HlmCarousel,
	HlmCarouselContent,
	HlmCarouselItem,
	HlmCarouselNext,
	HlmCarouselPrevious,
	HlmCarouselSlideDisplay,
} from '@spartan-ng/helm/carousel';

@Component({
	selector: 'spartan-carousel-slide-count',
	imports: [
		HlmCarousel,
		HlmCarouselContent,
		HlmCarouselItem,
		HlmCarouselNext,
		HlmCarouselPrevious,
		HlmCard,
		HlmCardContent,
		HlmCarouselSlideDisplay,
	],
	template: `
		<div class="flex w-full items-center justify-center p-4">
			<hlm-carousel class="w-full max-w-xs">
				<hlm-carousel-content>
					@for (item of items; track item) {
						<hlm-carousel-item>
							<div class="p-1">
								<section hlmCard>
									<p hlmCardContent class="flex aspect-square items-center justify-center p-6">
										<span class="text-4xl font-semibold">{{ item }}</span>
									</p>
								</section>
							</div>
						</hlm-carousel-item>
					}
				</hlm-carousel-content>
				<button hlm-carousel-previous></button>
				<button hlm-carousel-next></button>
				<hlm-carousel-slide-display class="mt-1 flex justify-end" />
			</hlm-carousel>
		</div>
	`,
})
export class CarouselSlideCount {
	public items = Array.from({ length: 5 }, (_, i) => i + 1);
}

Plugins

You can use the plugins plugins prop to add plugins to the carousel.

import { Component } from '@angular/core';
import { HlmCardImports } from '@spartan-ng/helm/card';
import { HlmCarouselImports } from '@spartan-ng/helm/carousel';
import Autoplay from 'embla-carousel-autoplay';

@Component({
	selector: 'spartan-carousel-plugins',
	imports: [HlmCarouselImports, HlmCardImports],
	template: `
		<div class="flex w-full items-center justify-center p-4">
			<hlm-carousel class="w-full max-w-xs" [plugins]="plugins">
				<hlm-carousel-content>
					@for (item of items; track item) {
						<hlm-carousel-item>
							<div class="p-1">
								<section hlmCard>
									<p hlmCardContent class="flex aspect-square items-center justify-center p-6">
										<span class="text-4xl font-semibold">{{ item }}</span>
									</p>
								</section>
							</div>
						</hlm-carousel-item>
					}
				</hlm-carousel-content>
				<button hlm-carousel-previous></button>
				<button hlm-carousel-next></button>
			</hlm-carousel>
		</div>
	`,
})
export class CarouselPlugins {
	public items = Array.from({ length: 5 }, (_, i) => i + 1);
	public plugins = [Autoplay({ delay: 3000 })];
}

See the Embla Carousel docs for more information on using plugins.

Helm API

HlmCarouselContent

Selector: hlm-carousel-content

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmCarouselItem

Selector: hlm-carousel-item

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmCarouselNext

Selector: button[hlm-carousel-next], button[hlmCarouselNext]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmCarouselPrevious

Selector: button[hlm-carousel-previous], button[hlmCarouselPrevious]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmCarouselSlideDisplay

Selector: hlm-carousel-slide-display

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
slideClass	ClassValue	text-muted-foreground text-sm	-
label	string	Slide	Screen reader only text for the slide display

HlmCarousel

Selector: hlm-carousel

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
orientation	'horizontal' \| 'vertical'	horizontal	-
options	Omit<EmblaOptionsType, 'axis'>	-	-
plugins	EmblaPluginType[]	[]	-

Checkbox

Card