jsp-dsv0.1

Stack and Clusterjsp

Columns and wrapping rows with token gaps.

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

Examples

Written in jsp-ds token utilities.

Stack

gap="component-sm" between every child.

Stack: a column with a token gap. No margins on the children.
ResearchService designUIDesign systemsAccessibility
Cluster: a row that wraps, for buttons, badges and tags.

Guidance

When to use

  • Stack for a column with a gap between children; Cluster for a row that wraps – buttons, badges, tags.

Rules

  • The gap is a token: component-* inside a component, layout-* between blocks.
  • Children never add their own margins – the gap does the spacing.
  • Use as for meaning: ul for a list of tags, nav for a group of links.

Install

Terminal
npx shadcn add @jsp/stack
Import
import { Stack, Cluster } from "@/components/stack"