← All blocks

Feature list beside a product screen

feature-split · list-beside-screen · feature-split-screen

npx shadcn@latest add @plus-ui/feature-split-screen

Default content

{
  "eyebrow": "Preview deployments",
  "title": "Every pull request gets its own production-grade URL",
  "description": "Rivetlane builds each branch on the same infrastructure as production, so reviewers click a link instead of pulling code.",
  "items": [
    {
      "icon": "branch",
      "title": "One URL per branch",
      "text": "Pushes update the same preview link, posted as a comment on the pull request."
    },
    {
      "icon": "lock",
      "title": "Private by default",
      "text": "Previews sit behind your team's SSO; share a time-limited link with clients when you need to."
    },
    {
      "icon": "rollback",
      "title": "Promote or roll back in one click",
      "text": "Any preview can become production, and the last ten releases stay one click away."
    }
  ],
  "action": {
    "label": "Read the preview docs",
    "href": "#",
    "variant": "secondary"
  },
  "screen": {
    "product": "Rivetlane",
    "nav": [
      "Projects",
      "Deployments",
      "Domains",
      "Logs",
      "Settings"
    ],
    "activeNav": 1,
    "title": "storefront · Deployments",
    "kpis": [
      {
        "label": "Median build",
        "value": "48s",
        "delta": "−12s this week"
      },
      {
        "label": "Previews live",
        "value": "23",
        "delta": "+5 today"
      }
    ],
    "chart": {
      "title": "Deploys per day",
      "points": [
        22,
        30,
        26,
        41,
        38,
        12,
        9,
        35,
        44,
        40,
        52,
        47,
        18,
        15
      ]
    },
    "rows": [
      {
        "name": "feat/checkout-v2",
        "detail": "Preview · ready 2 min ago",
        "value": "54s",
        "status": "positive"
      },
      {
        "name": "fix/cart-rounding",
        "detail": "Preview · ready 18 min ago",
        "value": "41s",
        "status": "positive"
      },
      {
        "name": "main",
        "detail": "Production · deployed 1 h ago",
        "value": "47s",
        "status": "neutral"
      }
    ]
  },
  "mediaSide": "right"
}