Main Heading (H1)

Og Image

• to do
• done

Hello

emphasis

strong

delete

This is a paragraph under the main heading. It should have proper spacing and typography. This paragraph tests the basic text rendering and line height.

Secondary Heading (H2)

Here's another paragraph to test spacing between headings and content. This tests the mt-10 spacing and first:mt-0 modifier.

Tertiary Heading (H3)

Testing the third level heading with some content below it.

Fourth Level Heading (H4)

Fourth level heading content goes here.

Fifth Level Heading (H5)

Fifth level heading with content.

Sixth Level Heading (H6)

The smallest heading level.

Text Formatting

This paragraph contains bold text, italic text, and inline code. Here's a link to Google to test link styling and hover effects.

Here's another paragraph to test the [&:not(:first-child)]:mt-6 spacing rule.

npm run shadcn add button

Lists

Unordered List

• First item in unordered list
• Second item with some longer content to test wrapping
• Third item

  • Nested item one
  • Nested item two
• Fourth item

Ordered List

1. First numbered item
2. Second numbered item with longer content to see how it wraps
3. Third numbered item

   1. Nested numbered item
   2. Another nested item
4. Fourth numbered item

Blockquotes

This is a blockquote to test the styling with border-left and italic text. It should have proper spacing and visual distinction from regular paragraphs.

Another blockquote to test spacing between multiple blockquotes.

Code Blocks

Here's some JavaScript code:

1function testFunction() {
2  const message = "Hello, world!";
3  console.log(message);
4
5  // Testing syntax highlighting
6  const users = [
7    { name: "John", age: 30 },
8    { name: "Jane", age: 25 },
9  ];
10
11  return users.map((user) => ({
12    ...user,
13    greeting: `Hello, ${user.name}!`,
14  }));
15}

Here's some TypeScript:

1interface User {
2  id: number;
3  name: string;
4  email: string;
5}
6
7const createUser = (userData: Omit<User, "id">): User => {
8  return {
9    id: Math.random(),
10    ...userData,
11  };
12};

And some CSS:

1.component {
2  display: flex;
3  flex-direction: column;
4  gap: 1rem;
5  padding: 2rem;
6  border-radius: 0.5rem;
7  background-color: var(--background);
8}
9
10.component:hover {
11  transform: translateY(-2px);
12  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
13}

Tables

Images

Horizontal Rules

Content above the horizontal rule.

Content below the horizontal rule.

Callouts

Mixed Content Test

Here's a more complex example mixing different components:

Project Structure

project/
├── components/
│   ├── ui/
│   │   ├── button.tsx
│   │   └── input.tsx
│   └── mdx/
│       ├── components.tsx
│       ├── code-block.tsx
│       └── callout.tsx
├── lib/
│   └── utils.ts
└── app/
    ├── layout.tsx
    └── page.tsx

The project structure above shows how to organize your Next.js application with MDX components.

Note: Make sure to configure your next.config.js properly for MDX support.

Here are the key steps:

1. Install the required dependencies
2. Configure your MDX setup
3. Create your components
4. Test everything works as expected

For more information, visit the Next.js documentation.

Final Test Section

This is the final section to test that all spacing, typography, and component interactions work correctly together. The components should maintain consistent spacing and visual hierarchy throughout the document.

Inline Elements Test

Testing inline code, bold text, italic text, and links all in one paragraph to ensure they work well together.

term : definition

I need to highlight these ==very important words==.

End of test document - All components should render correctly with proper styling and spacing.