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.
Getting Started
Stack
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Empty
- Form Field
- Hover Card
- Icon
- Input
- Input Group
- Input OTP
- Kbd
- Label
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Aspect Ratio
Displays content within a desired ratio.

import { Component } from '@angular/core';
import { HlmAspectRatioImports } from '@spartan-ng/helm/aspect-ratio';
@Component({
selector: 'spartan-aspect-ratio-preview',
imports: [HlmAspectRatioImports],
template: `
<div class="max-w-xl overflow-hidden rounded-xl drop-shadow">
<div [hlmAspectRatio]="16 / 9">
<img alt="Mountain views" src="/assets/mountains.jpg" />
</div>
</div>
`,
})
export class AspectRatioPreview {}
Installation
npx nx g @spartan-ng/cli:ui aspectratio
ng g @spartan-ng/cli:ui aspectratio
Usage
import { HlmAspectRatioImports } from '@spartan-ng/helm/aspect-ratio';
<div class="max-w-xl overflow-hidden rounded-xl drop-shadow">
<div [hlmAspectRatio]="ratio">
<img alt="Mountain views" src="/mountains.jpg" />
</div>
</div>
Helm API
HlmAspectRatio
Selector: [hlmAspectRatio]
Inputs
Prop | Type | Default | Description |
---|---|---|---|
hlmAspectRatio | number | 1 | Aspect ratio of the element, defined as width / height. |
class | ClassValue | - | - |