Section

Page section with the system's horizontal container and vertical rhythm.

A section with container padding and vertical rhythm.

<Section spacing="lg">…</Section>

Install

npx shadcn@latest add @dami/section

Or without the namespace: npx shadcn@latest add https://ui.dami.uy/r/section.json

Source

import * as React from "react"
import { cn } from "@/registry/dami/lib/utils"

type SectionProps = React.ComponentProps<"section"> & {
  /** Vertical rhythm preset. */
  spacing?: "sm" | "md" | "lg"
}

/**
 * Page section with the system's horizontal container and vertical rhythm.
 */
function Section({ spacing = "md", className, ...props }: SectionProps) {
  return (
    <section
      data-slot="section"
      className={cn(
        "container-page",
        spacing === "sm" && "py-10 sm:py-14",
        spacing === "md" && "py-16 sm:py-24",
        spacing === "lg" && "py-24 sm:py-32",
        className
      )}
      {...props}
    />
  )
}

export { Section }