jsp-dsv0.1

Sectionjsp

A band of the page: background, padding and colour mode.

Layout and type
Install
npx shadcn add @jsp/section
Import from
@/components/section
Guidance
draft · v0.1.0

Examples

Written in jsp-ds token utilities.

background="page"

background="subtle"

background="muted"

Secondary text rebinds to text.subtle-on-muted here (ISS-14).

A page is a list of Sections. Each owns its background, padding and colour mode.

Ready when you are

No inverse button variants – the band sets data-mode for you.

background="inverse" makes a dark band and flips every component inside it.

Guidance

When to use

  • For every band of a page. A page is a list of Sections.

Rules

  • A Section owns its background, vertical padding, inner width and colour mode. Content inside never adds its own outer spacing.
  • background: page, subtle, muted or inverse. Alternate page and subtle to separate bands; use inverse for one strong band.
  • background="inverse" sets data-mode="dark" – every component inside flips. Don't build inverse variants.
  • padding uses the layout spacing tokens, which step up at the breakpoints.
  • Give it a name: labelledBy its heading, or aria-label.

Install

Terminal
npx shadcn add @jsp/section
Import
import { Section } from "@/components/section"