Section

Vertical rhythm wrapper with optional surface variants

A section with muted surface and medium spacing.

import { Container } from '@/components/container';
import { Section } from '@/components/section';

export default function SectionPreview() {
  return (
    <Section spacing="md" surface="muted">
      <Container size="md">
        <div className="text-center text-foreground-secondary text-sm">
          A section with muted surface and medium spacing.
        </div>
      </Container>
    </Section>
  );
}

Dependencies

Slot

Source Code

import type { VariantProps } from 'cva';

import { Slot } from '@/components/slot';
import { cn, cva } from '@/lib/utils/classnames';

const sectionStyle = cva({
  base: 'relative w-full',
  variants: {
    spacing: {
      none: '',
      sm: 'py-8 md:py-12',
      md: 'py-12 md:py-20',
      lg: 'py-20 md:py-32',
      xl: 'py-28 md:py-40',
    },
    surface: {
      none: '',
      muted: 'bg-background-secondary',
      inverted: 'bg-foreground text-background',
      bordered: 'border-border border-y',
    },
  },
  defaultVariants: {
    spacing: 'md',
    surface: 'none',
  },
});

interface SectionProps
  extends React.ComponentPropsWithRef<'section'>,
    VariantProps<typeof sectionStyle> {
  asChild?: boolean;
}

const Section = ({
  ref,
  className,
  spacing,
  surface,
  asChild,
  ...rest
}: SectionProps) => {
  const Comp = asChild ? Slot : 'section';
  return (
    <Comp
      ref={ref}
      className={cn(sectionStyle({ spacing, surface }), className)}
      {...rest}
    />
  );
};

export type { SectionProps };
export { Section, sectionStyle };

Server component. No 'use client' — section layout primitive; no hooks or own handlers.

Section is the vertical-rhythm wrapper for landing pages and dashboards. It applies consistent top/bottom padding and an optional surface tint.

Anatomy


          <Section spacing="lg" surface="muted">
  <Container>{...}</Container>
</Section>

API Reference

Extends the section element.

Prop	Default	Type
`spacing`	`"md"`	`"none""sm""md""lg""xl"`
`surface`	`"none"`	`"none""muted""inverted""bordered"`
`asChild`	-	`boolean`

Examples

Default

A section with muted surface and medium spacing.

import { Container } from '@/components/container';
import { Section } from '@/components/section';

export default function SectionPreview() {
  return (
    <Section spacing="md" surface="muted">
      <Container size="md">
        <div className="text-center text-foreground-secondary text-sm">
          A section with muted surface and medium spacing.
        </div>
      </Container>
    </Section>
  );
}

Scrubber

Segmented Control