Interactive shadcn/ui Components in MDX

This post demonstrates how to use interactive shadcn/ui components that require client-side rendering in your MDX content. These components need to be rendered on the client side because they maintain state and handle user interactions.

Command

The Command component provides a command palette interface:

Accordion Component

The Accordion component is a great example of an interactive component that needs client-side rendering:

Dialog Components

Alert Dialog

The Alert Dialog component is used for destructive actions that require confirmation:

Dialog

The Dialog component is used for modal interactions:

Hover Card

Hover cards provide additional information on hover:

Form Components

Checkbox

Select

Switch

Popover

Sheet

Tabs

Toggle

Additional Client-Side Components

Carousel

The Carousel component provides a sliding interface for content:

Resizable

The Resizable component allows for resizable panels:

Progress

The Progress component shows a loading indicator:

Code Snippet

The CodeSnippet component provides syntax highlighting:

1function Welcome() {
2return <h1>Hello, world!</h1>;
3}

Chart

The Chart component provides data visualization:

Image

The Image component provides optimized image loading:

Collapsible

The Collapsible component provides expandable/collapsible content:

Toast

The Toast component provides notifications:

Tooltip

The Tooltip component provides additional information on hover:

Navigation Menu

The NavigationMenu component provides a dropdown navigation interface:

Pagination

The Pagination component provides navigation between pages:

Radio Group

The RadioGroup component provides a set of radio buttons:

Slider

The Slider component provides a range input:

Toggle Group

The ToggleGroup component provides a set of toggle buttons:

Aspect Ratio

The AspectRatio component maintains a consistent width/height ratio:

When to Use Client-Side Rendering

Use client-side rendering for MDX content when:

1. You need interactive components that maintain state
2. Components require user input or event handling
3. You're using components that need to access browser APIs
4. Components need to respond to user interactions in real-time

For static content or components that don't require interactivity, stick with server-side rendering for better performance.