← All blocks

Quickstart with numbered steps

quickstart · numbered-rail · quickstart-steps

npx shadcn@latest add @plus-ui/quickstart-steps

Default content

{
  "eyebrow": "Quickstart",
  "title": "Deploy your first app",
  "description": "Install the CLI, link a repository and ship it to production. You will end with a live URL, a preview for every branch and a `rivetlane.toml` you can commit.",
  "duration": {
    "label": "Time",
    "value": "5 minutes"
  },
  "prerequisites": {
    "title": "Before you start",
    "items": [
      "Node.js 20 or later",
      "A Git repository with a web app (Next.js, Astro, Remix or a static site)",
      "A Rivetlane account on any plan, including Hobby"
    ]
  },
  "labels": {
    "steps": "Steps",
    "output": "Expected output",
    "copy": "Copy",
    "copied": "Copied"
  },
  "steps": [
    {
      "title": "Install the CLI",
      "text": "Install `rivet` globally and check the version. Every command in these docs assumes CLI 5.0 or later.",
      "command": {
        "language": "shell",
        "label": "Terminal",
        "code": "$ npm install -g @rivetlane/cli\n$ rivet --version"
      },
      "output": "rivet/5.0.2 darwin-arm64 node-v20.17.0"
    },
    {
      "title": "Log in",
      "text": "Opens your browser to approve the device. The token is stored in your system keychain, never in the project.",
      "command": {
        "language": "shell",
        "label": "Terminal",
        "code": "$ rivet login"
      },
      "output": "→ Opening https://rivetlane.dev/device?code=QXRV-7241\n✓ Logged in as [email protected] (Quillon)"
    },
    {
      "title": "Link your project",
      "text": "Run `rivet init` in the repository root. It detects the framework, creates the project and writes `rivetlane.toml`.",
      "command": {
        "language": "shell",
        "label": "~/code/storefront",
        "code": "$ rivet init"
      },
      "output": "✓ Detected Next.js 15 (pnpm)\n✓ Created project storefront in Quillon\n✓ Wrote rivetlane.toml",
      "callout": {
        "tone": "tip",
        "text": "Commit `rivetlane.toml`. Every teammate and every CI run then builds with the same settings."
      }
    },
    {
      "title": "Deploy to production",
      "text": "Builds the current commit and promotes it to your production URL once the build passes.",
      "command": {
        "language": "shell",
        "label": "~/code/storefront",
        "code": "$ rivet deploy --prod"
      },
      "output": "→ Building storefront@a41c9e2 (main)\n✓ Build completed in 38s\n✓ Deployed to production\n  https://storefront.rivetlane.app"
    }
  ],
  "done": {
    "title": "You're live",
    "text": "storefront is serving from 18 regions. Push a branch to get a preview URL, or keep going with one of these.",
    "links": [
      {
        "title": "Environment variables",
        "description": "Add secrets per scope with `rivet env set`.",
        "href": "#",
        "icon": "key"
      },
      {
        "title": "Preview environments",
        "description": "A URL for every pull request, posted as a comment.",
        "href": "#",
        "icon": "layers"
      },
      {
        "title": "Custom domains",
        "description": "Serve production from your own domain with automatic TLS.",
        "href": "#",
        "icon": "globe"
      }
    ]
  }
}