← All blocks

Setup checklist with progress

onboarding · checklist-progress · onboarding-checklist-progress

npx shadcn@latest add @plus-ui/onboarding-checklist-progress

Default content

{
  "eyebrow": "pellora · setup",
  "title": "Get Pellora shipping on Rivetlane",
  "description": "Four steps from repository to alerts. Most teams finish in under ten minutes; you can leave and pick up where you stopped.",
  "progress": {
    "summary": "{done} of {total} done",
    "label": "Setup progress"
  },
  "steps": [
    {
      "id": "repo",
      "icon": "branch",
      "title": "Connect a repository",
      "summary": "Every push builds a preview. Merges to main go to production.",
      "time": "2 min",
      "done": true,
      "doneNote": "pellora/storefront · main · first deploy in 54s",
      "body": "Install the Rivetlane GitHub app on the repositories you want to deploy. We detect the framework and build command.",
      "checklist": [
        "Read access to code and metadata",
        "Write access to checks and deployments"
      ],
      "action": {
        "label": "Manage repositories",
        "href": "#repos"
      }
    },
    {
      "id": "domain",
      "icon": "globe",
      "title": "Add a custom domain",
      "summary": "Point shop.pellora.io at Rivetlane. Certificates issue on their own.",
      "time": "3 min",
      "done": true,
      "doneNote": "shop.pellora.io · certificate valid until Jan 7, 2027",
      "body": "Add a CNAME record at your DNS provider. Verification usually takes under a minute; TLS certificates renew automatically.",
      "command": "shop  CNAME  edge.rivetlane.net",
      "action": {
        "label": "Open domains",
        "href": "#domains"
      }
    },
    {
      "id": "team",
      "icon": "users",
      "title": "Invite your team",
      "summary": "Reviewers get preview links on every pull request.",
      "time": "1 min",
      "done": false,
      "body": "Invite developers to deploy previews and admins to manage domains and secrets. Production deploys require two-factor.",
      "checklist": [
        "Developers deploy to preview and staging",
        "Admins approve promotions to production"
      ],
      "action": {
        "label": "Invite members",
        "href": "#members"
      }
    },
    {
      "id": "alerts",
      "icon": "bell",
      "title": "Set up deploy alerts",
      "summary": "Hear about failed builds and rollbacks where your team already talks.",
      "time": "2 min",
      "done": false,
      "body": "Send failures, rollbacks and incident updates to a chat channel or a webhook. Quiet hours hold non-critical alerts overnight.",
      "command": "rivet alerts add --on deploy.failed --to chat:#deploys",
      "action": {
        "label": "Configure alerts",
        "href": "#alerts"
      }
    }
  ],
  "labels": {
    "markDone": "Mark as done",
    "undo": "Mark as not done",
    "done": "Done",
    "copy": "Copy"
  },
  "completed": {
    "title": "Pellora is fully set up",
    "description": "Repository, domain, team and alerts are in place. Next pushes to main ship to shop.pellora.io.",
    "action": {
      "label": "Go to deployments",
      "href": "#deployments"
    }
  },
  "help": {
    "title": "Stuck on a step?",
    "description": "A deploy engineer can pair with you on DNS, monorepos or migrating from another host. Replies within a business day.",
    "person": {
      "name": "Selin Aydın",
      "role": "Solutions engineer, Rivetlane",
      "avatar": {
        "src": "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&crop=faces&w=96&h=96&q=80",
        "alt": "Selin Aydın"
      }
    },
    "action": {
      "label": "Book a 20-min call",
      "href": "#call"
    },
    "links": [
      {
        "label": "Migration guide",
        "href": "#docs-migrate",
        "icon": "rocket"
      },
      {
        "label": "DNS troubleshooting",
        "href": "#docs-dns",
        "icon": "globe"
      },
      {
        "label": "CLI reference",
        "href": "#docs-cli",
        "icon": "terminal"
      }
    ]
  }
}