# mcpcn

> A collection of beautifully designed, accessible, and customizable MCP App UI components. Built with Base UI. Works with shadcn/ui. Use this index to discover the available documentation pages, markdown mirrors, and registry resources before browsing.

## Docs

- Get Started
  - [Introduction](https://www.mcpcn.dev/docs.md): Copy-paste React components for MCP Apps, built with Base UI and the shadcn CLI.
  - [Installation](https://www.mcpcn.dev/docs/installation.md): Install and compose mcpcn blocks in a React application.
  - [MCP](https://www.mcpcn.dev/docs/mcp.md): Use the shadcn MCP server to discover and install mcpcn components.
  - [Apps SDK UI](https://www.mcpcn.dev/docs/apps-sdk-ui.md): Render mcpcn blocks with OpenAI-aligned tokens and interaction geometry.
  - [Registry](https://www.mcpcn.dev/docs/registry.md): Use the mcpcn registry with the shadcn CLI.
- Blocks
  - [Blocks](https://www.mcpcn.dev/docs/blocks.md): Browse the blocks available in this registry.
  - Form
    - [Form](https://www.mcpcn.dev/docs/blocks/form.md): mcpcn blocks for form interfaces.
    - [Contact Form](https://www.mcpcn.dev/docs/blocks/form/contact-form.md): A complete contact form with name fields, phone with country selector, email, message textarea, and file attachment.
    - [Date & Time Picker](https://www.mcpcn.dev/docs/blocks/form/date-time-picker.md): A Calendly-style date and time picker with calendar, available time slots, and timezone display.
    - [Issue Report Form](https://www.mcpcn.dev/docs/blocks/form/issue-report-form.md): A compact issue reporting form for team members with categories, impact/urgency levels, and file attachments.
  - Payment
    - [Payment](https://www.mcpcn.dev/docs/blocks/payment.md): mcpcn blocks for payment interfaces.
    - [Order Confirm](https://www.mcpcn.dev/docs/blocks/payment/order-confirm.md): Order confirmation with product image, delivery info, and confirm action.
    - [Payment Confirmed](https://www.mcpcn.dev/docs/blocks/payment/payment-confirmed.md): Payment confirmation card with product image, price, delivery info, and tracking button. Supports default and compressed variants.
    - [Amount Input](https://www.mcpcn.dev/docs/blocks/payment/amount-input.md): Amount input with increment/decrement buttons and preset values.
  - List
    - [List](https://www.mcpcn.dev/docs/blocks/list.md): mcpcn blocks for list interfaces.
    - [Product List](https://www.mcpcn.dev/docs/blocks/list/product-list.md): Product list with list, grid, carousel, and picker variants.
    - [Table](https://www.mcpcn.dev/docs/blocks/list/table.md): Data table with optional single or multi-select modes for chat interfaces.
  - Selection
    - [Selection](https://www.mcpcn.dev/docs/blocks/selection.md): mcpcn blocks for selection interfaces.
    - [Option List](https://www.mcpcn.dev/docs/blocks/selection/option-list.md): Tag-style option selector with single or multiple selection modes.
    - [Tag Select](https://www.mcpcn.dev/docs/blocks/selection/tag-select.md): Colored tag selector with single or multiple selection and color variants.
    - [Quick Reply](https://www.mcpcn.dev/docs/blocks/selection/quick-reply.md): Quick reply buttons for common chat responses.
  - Status
    - [Status](https://www.mcpcn.dev/docs/blocks/status.md): mcpcn blocks for status interfaces.
    - [Progress Steps](https://www.mcpcn.dev/docs/blocks/status/progress-steps.md): Progress indicator with horizontal or vertical layout and step statuses.
    - [Status Badge](https://www.mcpcn.dev/docs/blocks/status/status-badge.md): Status badge with multiple states (success, pending, processing, error, shipped, delivered).
  - Miscellaneous
    - [Miscellaneous](https://www.mcpcn.dev/docs/blocks/miscellaneous.md): mcpcn blocks for miscellaneous interfaces.
    - [Stat Card](https://www.mcpcn.dev/docs/blocks/miscellaneous/stat-card.md): Scrollable stat cards with values, trends, and change indicators.
    - [Hero](https://www.mcpcn.dev/docs/blocks/miscellaneous/hero.md): Landing hero section with optional logos, title, subtitle, CTA buttons, and tech logos footer. Supports image or text logos with separator.
  - Blogging
    - [Blogging](https://www.mcpcn.dev/docs/blocks/blogging.md): mcpcn blocks for blogging interfaces.
    - [Post Card](https://www.mcpcn.dev/docs/blocks/blogging/post-card.md): Post card with image, title, excerpt, author info and read more button. Supports default, compact, horizontal, and covered variants. Includes post-detail for fullscreen view.
    - [Post List](https://www.mcpcn.dev/docs/blocks/blogging/post-list.md): Post list with list, grid, carousel, and fullwidth variants. Fullwidth mode shows paginated posts.
    - [Post Detail](https://www.mcpcn.dev/docs/blocks/blogging/post-detail.md): Full post view with cover image, author info, content, tags and related posts section.
  - Messaging
    - [Messaging](https://www.mcpcn.dev/docs/blocks/messaging.md): mcpcn blocks for messaging interfaces.
    - [Message Bubble](https://www.mcpcn.dev/docs/blocks/messaging/message-bubble.md): Chat message bubbles with text, image, voice, and reaction variants.
    - [Chat Conversation](https://www.mcpcn.dev/docs/blocks/messaging/chat-conversation.md): Full chat conversation component with multiple message types.
  - Social
    - [Social](https://www.mcpcn.dev/docs/blocks/social.md): mcpcn blocks for social interfaces.
    - [X Post](https://www.mcpcn.dev/docs/blocks/social/x-post.md): X (Twitter) post card with engagement metrics.
    - [Instagram Post](https://www.mcpcn.dev/docs/blocks/social/instagram-post.md): Instagram post card with image and engagement.
    - [LinkedIn Post](https://www.mcpcn.dev/docs/blocks/social/linkedin-post.md): LinkedIn post card with professional styling.
    - [YouTube Post](https://www.mcpcn.dev/docs/blocks/social/youtube-post.md): YouTube video card with playable embed.
  - Map
    - [Map](https://www.mcpcn.dev/docs/blocks/map.md): mcpcn blocks for map interfaces.
    - [Map Carousel](https://www.mcpcn.dev/docs/blocks/map/map-carousel.md): Interactive map with location markers and a draggable carousel of cards.
  - Events
    - [Events](https://www.mcpcn.dev/docs/blocks/events.md): mcpcn blocks for events interfaces.
    - [Event Card](https://www.mcpcn.dev/docs/blocks/events/event-card.md): Display event information with multiple layouts. Supports events with images, signals, vibe tags, and display-formatted date/time. Entire card is clickable.
    - [Event List](https://www.mcpcn.dev/docs/blocks/events/event-list.md): Display events in grid, list, or carousel layouts. Fullscreen mode shows interactive split-screen map with Leaflet and animated filter panel.
    - [Event Detail](https://www.mcpcn.dev/docs/blocks/events/event-detail.md): Full event detail view with organizer info, interactive map, policies, and ticket purchase. Fullwidth mode only.
    - [Ticket Tier Select](https://www.mcpcn.dev/docs/blocks/events/ticket-tier-select.md): Ticket tier selection with quantity controls and order summary. Shows price breakdown with fees.
    - [Event Confirmation](https://www.mcpcn.dev/docs/blocks/events/event-confirmation.md): Order confirmation with event details, ticket delivery info, organizer follow, and social sharing.

## Machine-readable Resources

- [Full documentation](https://www.mcpcn.dev/llms-full.txt)
- [Homepage markdown](https://www.mcpcn.dev/llms.md/content.md)
- [OpenAPI description](https://www.mcpcn.dev/openapi.json)
- [API catalog](https://www.mcpcn.dev/.well-known/api-catalog)
- [Agent skill](https://www.mcpcn.dev/.well-known/agent-skills/site-skill.md)
- [shadcn MCP server documentation](https://ui.shadcn.com/docs/mcp)