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
- Field
- Form Field
- Hover Card
- Icon
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Kbd
Used to display textual user input from keyboard.
⌘⇧⌥⌃Ctrl+B
import { Component } from '@angular/core';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';
@Component({
selector: 'spartan-kbd-preview',
imports: [HlmKbdImports],
template: `
<div class="flex flex-col items-center gap-4">
<kbd hlmKbdGroup>
<kbd hlmKbd>⌘</kbd>
<kbd hlmKbd>⇧</kbd>
<kbd hlmKbd>⌥</kbd>
<kbd hlmKbd>⌃</kbd>
</kbd>
<kbd hlmKbdGroup>
<kbd hlmKbd>Ctrl</kbd>
<span>+</span>
<kbd hlmKbd>B</kbd>
</kbd>
</div>
`,
})
export class KbdPreview {}Installation
npx nx g @spartan-ng/cli:ui kbd
ng g @spartan-ng/cli:ui kbd
Usage
import { HlmKbdImports } from '@spartan-ng/helm/kbd';<kbd hlmKbd>⌘</kbd>Examples
Group
Use the HlmKbdGroup component to group keyboard keys together.
Use Ctrl + BCtrl + K to open the command palette
import { Component } from '@angular/core';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';
@Component({
selector: 'spartan-kbd-group-preview',
imports: [HlmKbdImports],
template: `
<div class="flex flex-col items-center gap-4">
<p class="text-muted-foreground text-sm">
Use
<kbd hlmKbdGroup>
<kbd hlmKbd>Ctrl + B</kbd>
<kbd hlmKbd>Ctrl + K</kbd>
</kbd>
to open the command palette
</p>
</div>
`,
})
export class KbdGroupPreview {}Button
Use the HlmKbd component inside a HlmBtn to display a keyboard key inside a button.
import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';
@Component({
selector: 'spartan-kbd-button-preview',
imports: [HlmKbdImports, HlmButtonImports],
template: `
<div class="flex flex-wrap items-center gap-4">
<button hlmBtn variant="outline" size="sm" class="pr-2">
Accept
<kbd hlmKbd>⏎</kbd>
</button>
<button hlmBtn variant="outline" size="sm" class="pr-2">
Cancel
<kbd hlmKbd>Esc</kbd>
</button>
</div>
`,
})
export class KbdButtonPreview {}Helm API
HlmKbdGroup
Selector: kbd[hlmKbdGroup]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmKbd
Selector: kbd[hlmKbd]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |