Layout

Section

Compound component: `Section` and `Section.Header`.

Server safeSource

Import

import { Section } from '@the_viveksingh/vivek-ui'

A page section

Section owns the vertical rhythm and the inner Container, so a landing page becomes a list of sections instead of a pile of wrapper divs.

A page section

Section owns the vertical rhythm and the inner Container, so a page becomes a list of sections rather than a pile of wrappers.

<Section padding="lg" background="muted">
  <Stack gap={3} align="start">
    <Text size="lg" weight="semibold">A page section</Text>
    <Text tone="muted">Section owns the vertical rhythm and the inner Container.</Text>
    <Button size="sm">Call to action</Button>
  </Stack>
</Section>

Section.Header

The eyebrow, title and description trio every marketing section repeats. headingLevel keeps the document outline correct wherever the section sits.

Pricing

Simple, predictable billing

No seat minimums and no annual lock-in.

<Section padding="lg" background="muted">
  <Section.Header
    eyebrow="Pricing"
    title="Simple, predictable billing"
    description="No seat minimums and no annual lock-in."
    align="center"
  />
</Section>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Section
PropTypeDefaultDescription
asElementType—Landmark element. Defaults to `section`. Use `footer`/`header`/`aside` where correct.
padding'none' | 'sm' | 'md' | 'lg' | 'xl'—Vertical rhythm. Defaults to `lg`.
background'default' | 'muted' | 'primary'—Surface. `primary` re-points `--vk-color-bg`/`-fg`/`-muted`/`-border` for the whole subtree, so nested primitives stay legible without a single extra prop.
align'start' | 'center' | 'end'——
sizeContainerProps['size']—Max width of the inner Container. Defaults to `lg`.
bleedboolean—Drop the inner Container and let children run edge-to-edge.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Section carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.