Component Examples
This page demonstrates all available UI components that can be used in MDX files.
Accordion
Alert
Alerts are used to display important messages. Unlike cards, alerts are informational callouts.
Default Alert
This is a default alert component. Use it to display important information to users. Alerts should be concise and actionable.
Destructive Alert
This is a destructive alert. Use it for error messages and critical warnings that require immediate attention.
Success Alert
Operation completed successfully! Your changes have been saved.
Warning Alert
This action cannot be undone. Please review your settings before proceeding.
Badge
Button
Button Sizes
Card
This card demonstrates how to use the Card component in MDX files. You can add any content here including text, images, and other components.
Last updated: December 2025
Multiple Cards
Build, share, and run container applications.
Automate deployment, scaling, and management of containerized applications.
Checkbox
Input
Kbd
Press Ctrl + C to copy.
Use Ctrl + V to paste.
Run command with Ctrl + Shift + Enter.
Label
Separator
Section 1
Section 2
Section 3
Spinner
Switch
Table
| Name | Status | Port | Image |
|---|---|---|---|
| nginx-web | Running | 80 | nginx:latest |
| mysql-db | Running | 3306 | mysql:8.0 |
| redis-cache | Stopped | 6379 | redis:alpine |
Tabs
Docker is a platform for developing, shipping, and running applications in containers.
Textarea
Tooltip
Tips
- All components support className for custom styling
- Components use Tailwind CSS for styling
- Most form components work well with labels for accessibility
- Use variants to change the appearance of components
- Combine components to create complex UIs