Section

A semantic section wrapper with responsive vertical padding variants.

Content goes here...

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/section.json

Usage

Use Section to wrap page content with consistent horizontal padding and responsive vertical spacing. Set padding to control the top and bottom rhythm.

import Section from "@/components/section/section";

export function Example() {
  return (
    <Section className="border-foreground bg-background text-foreground flex items-center justify-center rounded-2xl border border-dashed dark:bg-transparent dark:text-white">
      Content goes here...
    </Section>
  );
}