---
title: X Card (Twitter)
description: Embed X/Twitter posts with rich styling and theme integration. Perfect for showcasing tweets in documentation, blogs, and social content
component: true
---

<ComponentPreview name="x-card-demo" height="700px" />

## Installation

<Installation name="x-card" dependencies={["react-tweet"]} />

## Usage

```tsx
"use client"

import { XCard } from "@/components/ui/x-card"

export default function Example() {
  return (
    <XCard
      id="1825208781827080599"
      size="default"
      caption="Optional caption describing the tweet content"
    />
  )
}
```

## Examples

### Basic Tweet

<ComponentPreview name="x-card-basic-demo" />

### Different Sizes

```tsx
"use client"

// Small size (using short form)
<XCard
  id="1825208781827080599"
  size="sm"
  caption="Small tweet embed"
/>

// Default size
<XCard
  id="1825208781827080599"
  size="default"
  caption="Default tweet embed"
/>

// Large size (using short form)
<XCard
  id="1825208781827080599"
  size="lg"
  caption="Large tweet embed"
/>
```

### With Caption

```tsx
"use client"

<XCard
  id="1825208781827080599"
  caption="A tweet showcasing modern web development practices"
/>
```

### Custom Styling

```tsx
"use client"

<XCard
  id="1825208781827080599"
  size="sm"
  className="mx-auto border-2 border-primary rounded-lg p-4"
/>
```

## API Reference

### XCard Props

| Prop        | Type                                              | Default     | Description                                                                                                      |
| ----------- | ------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- |
| `id`        | `string`                                          | -           | **Required.** The tweet ID from the X/Twitter URL. Extract from tweet URLs like `https://x.com/user/status/[ID]` |
| `size`      | `"sm" \| "small" \| "default" \| "lg" \| "large"` | `"default"` | Controls the display size of the tweet embed. Supports both short (`sm`, `lg`) and long form aliases             |
| `caption`   | `ReactNode`                                       | -           | Optional caption content displayed below the tweet. Accepts any React element or string                          |
| `className` | `string`                                          | -           | Additional CSS classes applied to the container wrapper for custom styling                                       |

### Size Variants

- **Small (`"small"` or `"sm"`)**: 90% scale with `max-w-sm` container width
- **Default (`"default"`)**: Standard size with `max-w-xl` container width
- **Large (`"large"` or `"lg"`)**: 110% scale with `max-w-2xl` container width

## Features

- **Theme Integration**: Automatically adapts to your site's light/dark theme
- **Rich Embeds**: Full support for X/Twitter's rich embed features
- **Loading States**: Built-in skeleton loading and error states
- **Responsive**: Adapts to different screen sizes and containers
- **Accessible**: Proper semantic markup and screen reader support
- **Performance**: Optimized loading with Suspense boundaries

## Getting Tweet IDs

To get a tweet ID:

1. Go to the tweet on X/Twitter
2. Copy the URL (e.g., `https://x.com/user/status/1825208781827080599`)
3. The ID is the number at the end: `1825208781827080599`

## Dependencies

This component requires the `react-tweet` package:

```bash
pnpm add react-tweet
```

## Styling

The component includes comprehensive CSS custom properties for theme integration:

- Inherits font family and colors from your design system
- Adapts border and background colors to match your theme
- Supports both light and dark modes automatically
- Customizable link styling that matches your site's link treatment