How To

Present step-by-step guides with visuals

npm run add HowTo

Use the HowTo component to display a numbered step-by-step guide or tutorial with visuals, titles, and descriptions. They combine image and text for better comprehension and visual learning.

Preview

Choose a Block

Use the CLI to copy available UI blocks and add it to your project. You can do the same with templates.

Insert into Your Code

The selected block will be copied into your src/components directory (or the one specified by your CLI command), ready to use.

Preview Your Site

Run npm run dev and see your new UI block live in your Astro project.

---
const steps = [
    {
        img: {
            src: '/img/intro.webp',
            alt: 'Selecting a block from the CLI',
            width: 250,
            height: 250
        },
        title: 'Choose a Block',
        description: 'Use the CLI to copy available UI blocks...'
    }
]
---

<HowTo steps={steps} />

The component expects a steps prop that describe each step. Each step can have the following three attributes:

• img: Sets an image for the step. Set img.lazy to true if you need to lazy load the image.
• title: Sets the title of the step under the image.
• description: Sets a description under the title. Supports HTML formatting.

Auto-width

The component will automatically fill up the available space of its container. This means that each step will be as wide as its container, only one step is visible at a time. If you want to disable this behavior and have each step have its width automatically calculated based on its content, you can set the fillContainer prop to false:

Choose a Block

Use the CLI to copy available UI blocks and add it to your project. You can do the same with templates.

Insert into Your Code

The selected block will be copied into your src/components directory (or the one specified by your CLI command), ready to use.

Preview Your Site

Run npm run dev and see your new UI block live in your Astro project.

Choose a Block

Use the CLI to copy available UI blocks and add it to your project. You can do the same with templates.

Insert into Your Code

The selected block will be copied into your src/components directory (or the one specified by your CLI command), ready to use.

Preview Your Site

Run npm run dev and see your new UI block live in your Astro project.

<HowTo
    steps={steps}
    fillContainer={false}
/>

Removing Step Numbers

By default, each step is numbered. You can remove numbers by setting the showStepNumber prop to false:

With step numbers (default)

Choose a Block

Use the CLI to copy available UI blocks and add it to your project. You can do the same with templates.

Insert into Your Code

The selected block will be copied into your src/components directory (or the one specified by your CLI command), ready to use.

Preview Your Site

Run npm run dev and see your new UI block live in your Astro project.

Without step numbers

Choose a Block

Use the CLI to copy available UI blocks and add it to your project. You can do the same with templates.

Insert into Your Code

The selected block will be copied into your src/components directory (or the one specified by your CLI command), ready to use.

Preview Your Site

Run npm run dev and see your new UI block live in your Astro project.

<HowTo
    steps={steps}
    showStepNumber={false}
/>

Non-scrollable

If you want to display steps without a scroll (wrap steps under each other), you can set the scrollable prop to false:

Choose a Block

Use the CLI to copy available UI blocks and add it to your project. You can do the same with templates.

Insert into Your Code

The selected block will be copied into your src/components directory (or the one specified by your CLI command), ready to use.

Preview Your Site

Run npm run dev and see your new UI block live in your Astro project.

Choose a Block

Use the CLI to copy available UI blocks and add it to your project. You can do the same with templates.

Insert into Your Code

The selected block will be copied into your src/components directory (or the one specified by your CLI command), ready to use.

Preview Your Site

Run npm run dev and see your new UI block live in your Astro project.

<HowTo
    steps={steps}
    scrollable={false}
/>

Card Styles

You can also use the compact and secondary props similar to Card components to set the style of each step (secondary on the left, compact on the right):

Choose a Block

Use the CLI to copy available UI blocks and add it to your project. You can do the same with templates.

Insert into Your Code

The selected block will be copied into your src/components directory (or the one specified by your CLI command), ready to use.

Preview Your Site

Run npm run dev and see your new UI block live in your Astro project.

Choose a Block

Use the CLI to copy available UI blocks and add it to your project. You can do the same with templates.

Insert into Your Code

The selected block will be copied into your src/components directory (or the one specified by your CLI command), ready to use.

Preview Your Site

Run npm run dev and see your new UI block live in your Astro project.

<HowTo
    steps={steps}
    secondary={true}
/>

<HowTo
    steps={steps}
    compact={true}
/>

API

type HowToProps = {
    showStepNumber?: boolean
    scrollable?: boolean
    fillContainer?: boolean
    steps: {
        img: {
            src: string
            alt: string
            width: number
            height: number
            lazy?: boolean
        }
        title: string
        description: string
    }[]
    className?: string
} & Pick<CardProps, 'compact' | 'secondary'>