# UI Components: {{titleCase FEATURE_NAME}}

| Field | Value |
|-------|-------|
| **Feature** | {{FEATURE_NAME}} |
| **Created** | {{DATE}} |
| **Stack** | {{STACK}} |

---

{{#if (eq STACK "nextjs-neon")}}
## Component Library: shadcn/ui

### C001: Button

```tsx
import { Button } from '@/components/ui/button';

<Button onClick={handleSave} disabled={!isValid}>
  Save
</Button>
```

### C002: Data Table

```tsx
import { DataTable } from '@/components/ui/data-table';

<DataTable columns={columns} data={items} />
```

{{/if}}

---

## Form Validation

| Field | Rule | Error Message |
|-------|------|---------------|
| **Name** | Required, max 100 | "Name is required" |
| **Email** | Valid email | "Invalid email" |

---

## Accessibility
- [ ] All inputs have labels
- [ ] Error messages announced
- [ ] Keyboard navigation works

---

*Generated with MORPH Framework*