Main Component

The Main component in Craft Design System is designed to wrap the primary content of your page. It provides consistent styling for typography and ensures proper semantic structure for your content.

Import

import { Main } from "@/components/craft";

Usage

Wrap your main content with the Main component:

<Main>
  <h1>Welcome to My Website</h1>
  <p>This is the main content of my page.</p>
  {/* More content */}
</Main>

Props

The Main component accepts the following props:

  • children: React.ReactNode (required)
  • className: string (optional)
  • id: string (optional)

Features

Semantic Structure

Uses the <main> tag for proper document outline and accessibility.

Typography Styles

Applies consistent typography styles using Tailwind's typography plugin.

Responsive Design

Adjusts typography for different screen sizes.

Dark Mode Support

Includes styles that adapt to light and dark color schemes.

Customization

You can customize the Main component by passing additional classes through the className prop:

<Main className="bg-gray-100 min-h-screen">
  {/* Your main content */}
</Main>

Default Styles

The Main component applies the following default styles:

  • Prose styles for consistent typography
  • Neutral color scheme with dark mode support
  • Adjusted styles for headings, paragraphs, lists, and other elements
  • Full width of its container

Example

Here's an example of how to use the Main component with other Craft components:

import { Layout, Main, Section, Container } from "@/components/craft";

export default function HomePage() {
  return (
    <Layout>
      <Main>
        <Section>
          <Container>
            <h1 className="text-3xl font-bold mb-4">Welcome to Our Website</h1>
            <p className="mb-4">We provide top-notch services for all your needs.</p>
            <h2 className="text-2xl font-semibold mb-2">Our Services</h2>
            <ul className="list-disc list-inside">
              <li>Service 1</li>
              <li>Service 2</li>
              <li>Service 3</li>
            </ul>
          </Container>
        </Section>
      </Main>
    </Layout>
  );
}

This setup ensures that your main content is properly structured and styled consistently.

Typography Styles

The Main component applies the following typography styles:

  • Font family: sans-serif (customizable through Tailwind config)
  • Responsive font sizes for different screen widths
  • Proper spacing for headings, paragraphs, and lists
  • Styled links with hover effects
  • Customized appearance for blockquotes and code blocks

Best Practices

  1. Use the Main component to wrap the primary content of your page.
  2. Combine with other Craft components like Section and Container for a complete layout structure.
  3. Take advantage of the built-in typography styles for consistent text formatting.
  4. Use the className prop for minor style adjustments, but avoid overriding core styles unless necessary.
  5. Consider the semantic structure of your content when nesting components within Main.

The Main component in Craft Design System helps you create well-structured, visually appealing, and accessible content areas that form the core of your web pages.