Skip to main content

Steps Component Test

Use this page to style and test the <Steps> component.

Example 1 — Simple text steps​

Install the CLI

Run the following command in your terminal to install the Arrow CLI globally.

Create a personal access token

Go to Settings → API Tokens and click Generate token. Copy it somewhere safe — you won't see it again.

Authenticate

Log in using your new token. You're ready to go.

Example 2 — Steps with code blocks​

Install dependencies
npm install -g @arrow/cli
Initialize your project
arrow init my-project
cd my-project
Start the dev server
arrow dev

The server will be available at http://localhost:3000.

Example 3 — Steps with mixed content​

Fork the repository

Go to the Arrow GitHub org and fork the repo you want to contribute to.

Clone and branch
git clone https://github.com/YOUR_USERNAME/website.git
cd website
git checkout -b my-feature
Make your changes

Edit files, add docs, fix bugs. Follow the style guides in the Guides section.

tip

Run npm start to preview your changes locally before submitting.

Open a pull request

Push your branch and open a PR against staging. Fill in the PR template and request a review.

Example 4 — Long step with a list inside​

Configure your environment

Make sure you have the following installed:

  • Node.js 18+
  • Git
  • A code editor (VS Code recommended)

Then copy .env.example to .env and fill in your values.

Run the build
npm run build

This will output a production build to the build/ directory.

Example 5 — Steps with images​

Open the Arrow dashboard

Navigate to your Arrow workspace and click New Project in the top right corner.

Arrow community hero

Select a template

Choose from one of the available project templates. For most use cases, start with Standard.

Arrow hero image

Name your project and confirm

Give your project a name, set the visibility, and click Create. You'll be taken to the project dashboard.

Example 6 — Steps with all admonition types​

Back up your data

Export a copy of your current configuration before making any changes.

danger

Skipping this step may result in unrecoverable data loss. Do not proceed without a backup.

Apply the migration

Run the migration script against your environment.

arrow migrate --env production
warning

This operation will cause a brief downtime of approximately 2 minutes.

Verify the output

Check that all services are healthy after the migration completes.

note

It may take up to 60 seconds for all services to report a healthy status.

Enable the new features

Once verified, flip the feature flag to enable the new functionality for your users.

tip

Roll out to a small percentage of users first to catch any edge cases before a full release.

Example 7 — Steps with images and admonitions mixed​

Download the desktop app

Get the latest version of the Arrow desktop app from the releases page.

note

Minimum system requirements: macOS 12+, Windows 10, or Ubuntu 20.04.

Run the installer

Open the downloaded file and follow the on-screen instructions.

Arrow software engineering

tip

On macOS you may need to allow the app in System Settings → Privacy & Security.

Sign in with your account

Launch the app and sign in. If you don't have an account yet, click Create account on the login screen.

Connect to your workspace

Enter your workspace URL and click Connect. Your projects will sync automatically.

warning

If you're behind a corporate firewall, ask your IT team to allowlist *.arrowair.com.