Component Library Documentation

Create documentation for this UI component:

**Component Name:** {{COMPONENT_NAME}}
**Library/Framework:** {{FRAMEWORK}} (React, Vue, Angular, etc.)
**Design System:** {{DESIGN_SYSTEM}} (if applicable)

**Component Code:**
```{{LANGUAGE}}
{{COMPONENT_CODE}}
```

Generate comprehensive component documentation:

# {{COMPONENT_NAME}}

{{BRIEF_DESCRIPTION}}

## Overview
- Purpose
- When to use
- When not to use

## Installation

```bash
import { {{COMPONENT_NAME}} } from '@library/components';
```

## Basic Usage

```jsx
<{{COMPONENT_NAME}} prop="value">
  Content
</{{COMPONENT_NAME}}>
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| prop1 | string | - | Yes | Description |
| prop2 | boolean | false | No | Description |
| onChange | (value) => void | - | No | Callback |

## Variants

### Variant 1: [Name]
```jsx
<{{COMPONENT_NAME}} variant="primary" />
```

### Variant 2: [Name]
```jsx
<{{COMPONENT_NAME}} variant="secondary" />
```

## Sizes
Available size options

## States
- Default
- Hover
- Active
- Disabled
- Loading

## Examples

### Example 1: [Use Case]
```jsx
// Complete example
```

### Example 2: [Use Case]
```jsx
// Complete example
```

## Accessibility
- ARIA attributes
- Keyboard navigation
- Screen reader support

## Styling
- CSS custom properties
- Theme integration
- Customization options

## Best Practices
Do's and don'ts

## Related Components
- Component 1
- Component 2