Design system · Component review 17

Document steps

The Guide’s installation sequence already has an effective visual rhythm. The candidate brings that numbered rail into the site-owned shared steps while retaining authored headings, responsive columns and code reading order.

Adopted shared style: DocumentSteps now has the refined numbered rail. The published Guide still uses its original StepSection structure.

Sequence treatments

All three variants use the same first two installation actions and have a narrow document-column width.

01

Original Guide

Continuous numbered rail

Create a project

Start from a Vite project when you do not have an app yet.

npm create vite@latest my-app
cd my-app

Add Master CSS

Run the installer from the project root.

npm create @master/css@rc -- --yes

The original installation Guide uses a light vertical rule, compact numbers and paired instructions and code. This remains in the published Guide.

02

Current

Shared horizontal dividers

Create a project

Start from a Vite project when you do not have an app yet.

npm create vite@latest my-app
cd my-app

Add Master CSS

Run the installer from the project root.

npm create @master/css@rc -- --yes

The shared DocumentSteps component uses full-width dividers and a two-digit number. Its content order already stacks correctly when narrow.

03

Adopted

Refined continuous rail

Create a project

Start from a Vite project when you do not have an app yet.

npm create vite@latest my-app
cd my-app

Add Master CSS

Run the installer from the project root.

npm create @master/css@rc -- --yes

The adopted shared style keeps the original Guide’s sequential line while using clearer headings, breathing room and a quieter number.

Actual Guide use

The installation page’s three-step sequence stays in its original structure.

Open /guide/installation

Create a project

Start from a Vite project when you do not have an app yet.

npm create vite@latest my-app
cd my-app

Add Master CSS

Run the installer from the project root.

npm create @master/css@rc -- --yes

Run and style

Start the dev server, then use Master CSS classes in your markup.

dev

The excerpt keeps the Guide’s action order and paired code. The live page also contains the complete explanation and next steps.