@versini/ui-main

A semantic and accessible React main component built with TypeScript and TailwindCSS.

The Main component provides a semantic main element for page content with customizable margins, padding, and styling options. Perfect for creating accessible page layouts and content areas.

Table of Contents

• Features
• Installation
• Usage

Features

• ♿ Semantic HTML: Uses proper <main> element for accessibility
• 🎨 Customizable: Control margins, padding, and styling
• 🌲 Tree-shakeable: Lightweight and optimized for bundle size
• 🔧 TypeScript: Fully typed with comprehensive prop definitions
• 📱 Responsive: Works seamlessly across all device sizes

Installation

npm install @versini/ui-main

Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.

Usage

Basic Main

import { Main } from "@versini/ui-main";

function App() {
  return (
    <Main>
      <h1>Page Content</h1>
      <p>This is the main content area of the page.</p>
    </Main>
  );
}

Main with Custom Styling

import { Main } from "@versini/ui-main";

function App() {
  return (
    <Main className="max-w-4xl mx-auto bg-white shadow-lg rounded-lg">
      <article className="prose lg:prose-xl">
        <h1>Article Title</h1>
        <p>Article content goes here...</p>
      </article>
    </Main>
  );
}

Main without Default Spacing

import { Main } from "@versini/ui-main";

function App() {
  return (
    <Main noMargin noPadding className="min-h-screen bg-gray-100">
      <div className="container mx-auto py-8">
        Custom layout with full control over spacing
      </div>
    </Main>
  );
}

API

Main Props

| Prop | Type | Default | Description | | --------- | ----------------- | ------- | -------------------------------------------------- | | children | React.ReactNode | - | The children to render | | noMargin | boolean | false | Whether to render without margin | | noPadding | boolean | false | Whether to render without padding | | raw | boolean | false | Whether to render with no styles | | className | string | - | CSS class(es) to add to the main component wrapper |

Also supports all standard HTML main element attributes

Examples

Page Layout with Header and Footer

import { Header } from "@versini/ui-header";
import { Main } from "@versini/ui-main";
import { Footer } from "@versini/ui-footer";

function PageLayout() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header sticky>
        <nav>Navigation content</nav>
      </Header>

      <Main className="flex-1">
        <div className="max-w-7xl mx-auto px-4 py-8">
          <h1>Page Title</h1>
          <p>Main page content...</p>
        </div>
      </Main>

      <Footer row1="© 2024 Company" />
    </div>
  );
}

Article Layout

import { Main } from "@versini/ui-main";

function ArticleLayout() {
  return (
    <Main className="max-w-4xl mx-auto">
      <article className="prose lg:prose-xl">
        <header>
          <h1>Understanding React Components</h1>
          <time dateTime="2024-01-15">January 15, 2024</time>
        </header>

        <section>
          <p>Introduction to the article...</p>
        </section>

        <section>
          <h2>Core Concepts</h2>
          <p>Main content...</p>
        </section>
      </article>
    </Main>
  );
}

Dashboard Layout

import { Main } from "@versini/ui-main";

function DashboardLayout() {
  return (
    <Main noMargin noPadding className="min-h-screen bg-gray-50">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 p-6">
        <aside className="lg:col-span-1">
          <div className="bg-white rounded-lg shadow p-4">Sidebar content</div>
        </aside>

        <section className="lg:col-span-3">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg shadow p-6">
              Dashboard card 1
            </div>
            <div className="bg-white rounded-lg shadow p-6">
              Dashboard card 2
            </div>
          </div>
        </section>
      </div>
    </Main>
  );
}

Full-width Content

import { Main } from "@versini/ui-main";

function FullWidthContent() {
  return (
    <Main noMargin noPadding className="w-full">
      <section className="bg-blue-600 text-white py-20">
        <div className="container mx-auto text-center">
          <h1 className="text-4xl font-bold">Hero Section</h1>
          <p className="text-xl mt-4">Full-width hero content</p>
        </div>
      </section>

      <section className="py-16">
        <div className="container mx-auto">
          <h2 className="text-3xl font-bold text-center mb-8">Features</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">Feature 1</div>
            <div className="text-center">Feature 2</div>
            <div className="text-center">Feature 3</div>
          </div>
        </div>
      </section>
    </Main>
  );
}

Raw Main (Unstyled)

import { Main } from "@versini/ui-main";

function RawMain() {
  return (
    <Main raw className="my-custom-main-styles">
      <div className="completely-custom-layout">
        Custom main with no default styles
      </div>
    </Main>
  );
}