sigilUI

Border Stack

Layer borders to give a panel a structural outline.

@sigil-ui/componentsReact

Preview

Shared border rhythm Interactive

Import

import { BorderStack } from "@sigil-ui/components";

Usage

<BorderStack className="w-full">
    {[
      ["Tokens", "519 configurable fields"],
      ["Presets", "46 complete identities"],
      ["Components", "350+ constrained surfaces"],
    ].map(([label, value]) => (
      <div key={label} className="flex items-center justify-between bg-[var(--s-surface)] p-[var(--s-space-4)] text-sm"><span className="text-[var(--s-text)]">{label}</span><span className="font-mono text-[var(--s-text-muted)]">{value}</span></div>
    ))}
  </BorderStack>

Props

PropTypeDefaultDescription
borders"between" | "all" | "none"betweenWhich borders to show.
as"div" | "main" | "article" | "section"divElement type.

Token integration

CSS VariablePurpose
--s-borderBorder

MonoLabel

Render a compact label in the preset's monospace font.

AccentCTA

Highlight a next step with a compact message and action.

On this page

PreviewImportUsagePropsToken integration