> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mantle.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Reusable UI primitives

Build consistent interfaces with our component library powered by [Spartan UI](https://spartan.ng) — headless Angular
primitives that are fully accessible and customizable.

## Component Library

<CardGroup cols={3}>
  <Card title="Inputs" icon="keyboard">
    Text inputs, textareas, and form controls with validation states.
  </Card>

  <Card title="Select" icon="list">
    Dropdown selection with search and multi-select support.
  </Card>

  <Card title="Dialog" icon="window-maximize">
    Modal dialogs for confirmations, forms, and overlays.
  </Card>

  <Card title="Cards" icon="square">
    Container components for grouping related content.
  </Card>

  <Card title="Tables" icon="table">
    Data tables with sorting, pagination, and filtering.
  </Card>

  <Card title="Navigation" icon="compass">
    Tabs, breadcrumbs, and navigation menus.
  </Card>
</CardGroup>

## Installation

Add components using the Spartan CLI:

```bash theme={null}
# Add a component
npx @spartan-ng/cli@latest add ui-button
```

## Usage

Import and use components in your Angular templates:

```typescript theme={null}
import { HlmButtonDirective } from '@spartan-ng/helm/button';

@Component({
  imports: [HlmButtonDirective],
  template: `<button hlmBtn>Click me</button>`,
})
export class MyComponent {}
```

## Resources

<CardGroup cols={2}>
  <Card title="Spartan UI Docs" icon="book" href="https://spartan.ng">
    Full component documentation, examples, and API reference.
  </Card>

  <Card title="Component Storybook" icon="layer-group" href="https://spartan.ng/documentation/introduction">
    Interactive component playground and visual testing.
  </Card>
</CardGroup>