Steps
A numbered list of stages for walking the reader through a procedure.
Use <Steps> for tasks where order matters. Each <Step> renders as a numbered card with a title and inline content.
Sign in
Open the sign-in page and request a magic link.Create a site
Pick a name and a subdomain.Publish
Select Publish to deploy.<Steps>
<Step title="Sign in">Open the sign-in page and request a magic link.</Step>
<Step title="Create a site">Pick a name and a subdomain.</Step>
<Step title="Publish">Select **Publish** to deploy.</Step>
</Steps>Step props
| Prop | Type | Default |
|---|---|---|
title | string | None |
icon | Icon name | "default" |
Variants
Step with icon
Connect GitHub
Install the Bloques GitHub App and pick a repo.
Open the editor
Edit your pages in the browser.
Publish
Ship the changes to your live site.
<Steps>
<Step title="Connect GitHub" icon="branch">
Install the Bloques GitHub App and pick a repo.
</Step>
<Step title="Open the editor" icon="pencil">
Edit your pages in the browser.
</Step>
<Step title="Publish" icon="rocket">
Ship the changes to your live site.
</Step>
</Steps>