Section

Definition and Usage

The section component basically and wrapper for a group of related elements. A simple example is a header or navbar. Wrap the elements in Section.RootElement and an inner wrapper Section.Container which applies a max width to its content and centers them horizontally.

section-demo.tsx

import Section from "@_ndk/ui/components/_ui/section";

export default function Navbar() {
  return (
    <Section.RootElement className="">
      <Section.Container container="8xl" className="">
        <div className="">
          <h2> A simple section </h2>
        </div>
      </Section.Container>
    </Section.RootElement>
  );
}

Installation

Copy and paste the following code into your project:

components/ndk/_ui/section.tsx

import React from "react";

type SectionElement = "section" | "div" | "footer" | "header" | "main" | "nav";

type ContainerSize = "5xl" | "6xl" | "7xl" | "8xl" | "none";

type RootElementProps<T extends SectionElement = "section"> =
  React.ComponentPropsWithoutRef<T> & {
    as?: T;
  };

type ContainerProps = React.ComponentPropsWithoutRef<"div"> & {
  container?: ContainerSize;
};

const RootElement = <T extends SectionElement = "section">({
  as,
  className = "bg-background",
  children,
  ...props
}: RootElementProps<T>) => {
  const Element = (as || "section") as React.ElementType;

  return (
    <Element className={className} {...props}>
      {children}
    </Element>
  );
};

const Container: React.FC<ContainerProps> = ({
  container = "7xl",
  className = "",
  children,
  ...props
}) => {
  const containerDataType = `container-${container}`;

  return (
    <div datatype={containerDataType} className={className} {...props}>
      {children}
    </div>
  );
};

const Section = {
  RootElement,
  Container,
};

export default Section;

Update the import paths to match your project setup.

Also Add the following snippets to your globals css file if you are installing manually.

globals.css

.container,
[datatype="container"] {
  @apply mx-auto max-w-4xl;
}

.container-5xl,
[datatype="container-5xl"] {
  @apply mx-auto max-w-5xl;
}

.container-6xl,
[datatype="container-6xl"] {
  @apply mx-auto max-w-6xl;
}

.container-7xl,
[datatype="container-7xl"] {
  @apply mx-auto max-w-7xl;
}

.container-8xl,
[datatype="container-8xl"] {
  @apply mx-auto max-w-5xl;
}

Props

Background.RootElement

Prop

Type

Background.Container