Components Test

This page tests the enhanced MDX components.

Code Blocks

With Title

components/ui/button.tsx

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
 
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  asChild?: boolean
}
 
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

Without Title

npm install next

Tabs

npm install @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

npx create-next-app@latest

Configure your project

Follow the prompts to configure your project.

Mermaid Diagrams

Code Tabs (Advanced)

npm install mermaid

Table

Prop	Type	Description
`children`	`React.ReactNode`	The content to render
`className`	`string`	Additional CSS classes
`variant`	`default	destructive`