Capability Grid
Explain a set of capabilities in a structured diagram grid.
Preview
Import
import { CapabilityGrid } from "@sigil-ui/components";Usage
<CapabilityGrid
categories={[
{ label: "Runtimes", items: [{ name: "Node" }, { name: "Python" }, { name: "Rust" }] },
{ label: "System", items: [{ name: "Root", color: "var(--s-success)" }, { name: "GPU", color: "var(--s-success)" }] },
]}
callout={{ label: "Unavailable", items: ["Nested virtualization"], variant: "warning" }}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
categories (required) | CapabilityCategory[] | — | Categories configuration. |
callout | CapabilityCallout | — | Callout configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-error | Error |
--s-warning | Warning |
--s-info | Info |
--s-duration-normal | Duration normal |
--s-ease-out | Ease out |
--s-text-muted | Text muted |
--s-border | Border |
--s-surface | Surface |
--s-duration-fast | Duration fast |
--s-surface-elevated | Surface elevated |
--s-primary | Primary |
--s-text | Text |