---
metaTitle: {ComponentName} component | AwesCode UI
meta:
  - name: description
    content: The <{ComponentName} /> component is used to render {ComponentDescription} - UI Vue component for AwesCode UI.
title: {ComponentName}
---

# {ComponentName}

**Category:** {Category} | **Import:** {ImportMethod}

{ComponentDescription}

## Overview

{Detailed description of what the component does and when to use it.}

## Usage

### Basic Example

\`\`\`markup
<{ComponentName} {basicProps} />
\`\`\`

### Advanced Examples

{Additional usage examples with different props and configurations}

## API

### Props

Below is a collection of Vue **props** for the `{ComponentName}` component.

| Name | Description | Type | Required | Default | Validator |
|------|-------------|------|----------|---------|-----------|
| {propName} | {propDescription} | `{propType}` | `{required}` | {defaultValue} | {validator} |

### Slots

Below is a collection of Vue **slots** for the `{ComponentName}` component.

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| {slotName} | {slotDescription} | {slotProps} | {defaultContent} |

### Events

Below is a collection of Vue **events** emitted by the `{ComponentName}` component.

| Name | Payload | Description |
|------|---------|-------------|
| {eventName} | `{payloadType}` | {eventDescription} |

### Config Options

{If component has config in _config.js, document default values here}

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

\`\`\`javascript
export default {
  {ComponentName}: {
    {configKey}: {configValue}
  }
}
\`\`\`

## Related Components

- {RelatedComponent1} - {Why it's related}
- {RelatedComponent2} - {Why it's related}

## Notes

- **Import Method:** {Global/Dynamic} - {Explanation of why}
- {Additional notes about usage, dependencies, or special considerations}