← All blocks

First-run empty state with next steps

empty-state · illustration-next-steps · empty-state-onboarding

npx shadcn@latest add @plus-ui/empty-state-onboarding

Default content

{
  "eyebrow": "quillon-web · no deployments yet",
  "title": "Connect a repository to ship your first deploy",
  "description": "Rivetlane builds every push. Pick the repo for quillon-web and we detect the framework, install, build and hand you a URL — usually in under a minute.",
  "illustration": {
    "stages": [
      {
        "icon": "branch",
        "label": "Repository",
        "detail": "github · not linked",
        "state": "current"
      },
      {
        "icon": "boxes",
        "label": "Build",
        "detail": "detect · install · build",
        "state": "pending"
      },
      {
        "icon": "globe",
        "label": "Preview URL",
        "detail": "*.rivetlane.app",
        "state": "pending"
      }
    ]
  },
  "actions": [
    {
      "label": "Import repository",
      "href": "#",
      "variant": "primary"
    },
    {
      "label": "Deploy from CLI",
      "href": "#",
      "variant": "secondary"
    }
  ],
  "note": "Read access to one repository is enough. You can widen it later.",
  "steps": {
    "title": "After your first deploy",
    "items": [
      {
        "icon": "globe",
        "title": "Add a custom domain",
        "description": "Point quillon.dev at Rivetlane. Certificates issue and renew on their own.",
        "link": {
          "label": "Add domain",
          "href": "#"
        },
        "meta": "3 min"
      },
      {
        "icon": "key",
        "title": "Set environment variables",
        "description": "Scope secrets to production, preview or both. Changes apply on the next build.",
        "link": {
          "label": "Open environment",
          "href": "#"
        },
        "meta": "2 min"
      },
      {
        "icon": "users",
        "title": "Invite your team",
        "description": "Reviewers get preview links on every pull request and can approve promotions.",
        "link": {
          "label": "Invite members",
          "href": "#"
        },
        "meta": "1 min"
      }
    ]
  },
  "help": {
    "text": "Moving from another host?",
    "link": {
      "label": "Read the migration guide",
      "href": "#"
    }
  }
}