# v3.0.0-alpha.32
**Category**: react
**URL**: https://www.heroui.com/docs/react/releases/v3-0-0-alpha-32
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/releases/v3-0-0-alpha-32.mdx
> Card component redesign, CloseButton, MCP Server for AI assistants
***
October 1, 2025
This release adds AI development tools, updates the [Card component](/docs/components/card) API, and improves the developer experience.
## Installation
Update to the latest version:
```bash
npm i @heroui/styles@alpha @heroui/react@alpha
```
```bash
pnpm add @heroui/styles@alpha @heroui/react@alpha
```
```bash
yarn add @heroui/styles@alpha @heroui/react@alpha
```
```bash
bun add @heroui/styles@alpha @heroui/react@alpha
```
## What's New
### MCP Server
HeroUI now includes an [MCP server](/docs/ui-for-agents/mcp-server) that lets AI assistants like Cursor, Claude Code, and VS Code Copilot access HeroUI v3 documentation and component information directly.
**Quick Setup:**
### Cursor
Or manually add to **Cursor Settings** → **Tools** → **MCP Servers**:
```json
{
"mcpServers": {
"heroui-react": {
"command": "npx",
"args": ["-y", "@heroui/react-mcp@latest"]
}
}
}
```
### Claude Code
Run this command in your terminal:
```bash
claude mcp add heroui-react -- npx -y @heroui/react-mcp@latest
```
[Learn more](/docs/ui-for-agents/mcp-server)
### Card Component API Redesign
The [Card component](/docs/components/card) has been updated with a new variant system that makes it more flexible.
**Breaking Changes:**
- Replaced `surface` prop with new `variant` system
- Removed `Card.Image`, `Card.Details`, and `Card.CloseButton` (use composition instead)
- New variants: `flat`, `outlined`, `elevated`, `filled`
**Before:**
```tsx
Old Card
```
**After:**
```tsx
New Card
```
**New Features:**
- Horizontal layout support
- Avatar integration
- Background image support
- Improved accessibility with semantic HTML
[View Card documentation](/docs/components/card)
### CloseButton Component
Added a [CloseButton component](/docs/components/close-button) for closing dialogs, modals, and other dismissible elements.
```tsx
import {CloseButton} from "@heroui/react";
// Basic usage
console.log("Closed")} />
// With custom icon
```
## Documentation Improvements
### UI for Agents
- **[MCP Server documentation](/docs/ui-for-agents/mcp-server)** for development with AI assistants
- **[llms.txt](/docs/ui-for-agents/llms-txt)** file for LLM-friendly documentation
- Setup guides for popular AI coding tools
### Component Documentation
- **[Card](/docs/components/card)**: Rewrote documentation with anatomy, variants, and more examples
- **[Switch](/docs/components/switch)**: Added anatomy diagrams and better examples
- **[CloseButton](/docs/components/close-button)**: New documentation with usage examples
## Migration Guide
### Card Component Migration
1. **Update variant prop:**
- `surface="1"` → `variant="flat"`
- `surface="2"` → `variant="outlined"`
- `surface="3"` → `variant="elevated"`
- `surface="4"` → `variant="filled"`
- Custom surfaces → Use new variant system
2. **Update component structure:**
- Replace `Card.Image` with `![]()
` in `Card.Header`
- Replace `Card.Details` with `Card.Body`
- Move `Card.CloseButton` to use new `CloseButton` component
3. **Update imports:**
```tsx
// Add CloseButton if needed
import {Card, CloseButton} from "@heroui/react";
```
## Links
- [GitHub PR #5747](https://github.com/heroui-inc/heroui/pull/5747)
- [MCP Server Documentation](/docs/ui-for-agents/mcp-server)
- [Card Component Guide](/docs/components/card)
- [CloseButton Component](/docs/components/close-button)
## Contributors
Thanks to everyone who contributed to this release!