# Component Specification: {Component Name}

## Overview
**Purpose:** {Brief description of component purpose}
**Type:** {Atomic/Molecular/Organism/Template/Page}
**Status:** {Draft/In Review/Approved/Implemented}

## Visual Design
{Screenshots/mockups of component in different states}

## Technical Specification

### Props Interface
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| {prop name} | {type} | {Yes/No} | {default value} | {description} |

### Component States
- Default
- Hover
- Active
- Disabled
- Loading
- Error
- {Other states as needed}

### Accessibility Requirements
- Keyboard navigation
- Screen reader support
- ARIA attributes
- Focus management
- Color contrast

### Responsive Behavior
| Breakpoint | Behavior |
|------------|----------|
| Mobile | {description} |
| Tablet | {description} |
| Desktop | {description} |

## Implementation Code

### Component Structure
```tsx
// Component structure code
```

### Styling
```tsx
// Styling code
```

### Logic
```tsx
// Logic code
```

## Usage Examples

### Basic Usage
```tsx
// Basic usage example
```

### With Variants
```tsx
// Variant examples
```

### With Different States
```tsx
// State examples
```

## Testing Checklist
- [ ] Visual regression tests
- [ ] Accessibility audit
- [ ] Cross-browser compatibility
- [ ] Responsive behavior
- [ ] State transitions
- [ ] Edge cases

## Integration Notes
- Dependencies required
- Import/export patterns
- Integration with other components
- Known limitations

## Design System Alignment
- How this component aligns with design tokens
- Relationship to other components
- Variations from design system (if any)