# Section

A semantic section wrapper with responsive vertical padding variants.

## Installation

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

[Registry JSON](https://reactdocs.canceydejean.dev/r/section.json)

## Preview

```tsx
import { DemoSection } from "./stories/demo-section";

export function Preview() {
  return <DemoSection />;
}
```


## Source

### section.tsx

```tsx
import { cn } from "cn";

import type { SectionProps } from "./section.types";
import { sectionVariants } from "./section.variants";

export default function Section({
  padding,
  className,
  ...props
}: SectionProps) {
  return (
    <section
      data-slot="section"
      data-size={padding}
      className={cn(sectionVariants({ padding }), className)}
      {...props}
    />
  );
}
```


### section.types.ts

```ts
import type { VariantProps } from "class-variance-authority";

import type { sectionVariants } from "./section.variants";

export type SectionProps = React.ComponentProps<"section"> & VariantProps<typeof sectionVariants>;
```


### section.variants.ts

```ts
import { cva } from "class-variance-authority";

import { cn } from "cn"

const sectionBase = cn("mx-auto w-full px-6");

const sectionConfig = {
  variants: {
    padding: {
      sm: "py-12 md:py-16",
      md: "py-20 md:py-24",
      lg: "py-24 md:py-32",
    },
  },
  compoundVariants: [],
  defaultVariants: {
    padding: "md",
  },
} as const;

export const sectionCva = cva(sectionBase, {
  ...sectionConfig,
  compoundVariants: [...sectionConfig.compoundVariants],
});

// Export the size variants
export const SECTION_PADDINGS = Object.keys(
  sectionConfig.variants.padding,
) as (keyof typeof sectionConfig.variants.padding)[];

export const sectionVariants = sectionCva;
```



## Usage

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

```tsx
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>
  );
}
```