# Components Test This page tests the enhanced MDX components. ## Code Blocks ### With Title ```tsx title="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" export interface ButtonProps extends React.ButtonHTMLAttributes { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" ``` ### Without Title ```bash npm install next ``` ## Tabs npm pnpm yarn ```bash npm install @radix-ui/react-tabs ``` ```bash pnpm add @radix-ui/react-tabs ``` ```bash yarn add @radix-ui/react-tabs ``` ## Callouts This is an **info** callout with some bold text. This is a **warning** callout. Proceed with caution. This is an **error** callout. Something went wrong. This is a **success** callout. Operation completed. ## Steps ### Run the following command ```bash npx create-next-app@latest ``` ### Configure your project Follow the prompts to configure your project. ## Mermaid Diagrams B; A-->C; B-->D; C-->D;`} /> ## Code Tabs (Advanced) npm pnpm yarn ```bash npm install mermaid ``` ```bash pnpm add mermaid ``` ```bash yarn add mermaid ``` ## Table | Prop | Type | Description | | :--- | :--- | :--- | | `children` | `React.ReactNode` | The content to render | | `className` | `string` | Additional CSS classes | | `variant` | `default | destructive` | The button variant |

MDX Support

Components

Syntax Highlighting