Before After Diagram
Show the difference between two versions side by side.
Preview
Import
import { BeforeAfterDiagram } from "@sigil-ui/components";Usage
<BeforeAfterDiagram
before={<p className="text-sm">Manual deploys, 2-hour rollbacks</p>}
after={<p className="text-sm">CI/CD pipeline, 30-second rollbacks</p>}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
beforeTitle | string | — | Before Title configuration. |
afterTitle | string | — | After Title configuration. |
before (required) | ReactNode | — | Before configuration. |
after (required) | ReactNode | — | After configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-card | Radius card |
--s-error | Error |
--s-error-muted | Error muted |
--s-surface | Surface |
--s-success | Success |
--s-success-muted | Success muted |