How To
Present step-by-step guides with visuals
npm run add HowToUse 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.
Choose a Block
Insert into Your Code src/components directory (or the one specified by your CLI command), ready to use.
Preview Your Site 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. Setimg.lazytotrueif 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
Insert into Your Code src/components directory (or the one specified by your CLI command), ready to use.
Preview Your Site npm run dev and see your new UI block live in your Astro project.
Choose a Block
Insert into Your Code src/components directory (or the one specified by your CLI command), ready to use.
Preview Your Site 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:
Choose a Block
Insert into Your Code src/components directory (or the one specified by your CLI command), ready to use.
Preview Your Site npm run dev and see your new UI block live in your Astro project.
Choose a Block
Insert into Your Code src/components directory (or the one specified by your CLI command), ready to use.
Preview Your Site 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
Insert into Your Code src/components directory (or the one specified by your CLI command), ready to use.
Preview Your Site npm run dev and see your new UI block live in your Astro project.
Choose a Block
Insert into Your Code src/components directory (or the one specified by your CLI command), ready to use.
Preview Your Site 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
Insert into Your Code src/components directory (or the one specified by your CLI command), ready to use.
Preview Your Site npm run dev and see your new UI block live in your Astro project.
Choose a Block
Insert into Your Code src/components directory (or the one specified by your CLI command), ready to use.
Preview Your Site 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'>| Prop | Default | Purpose |
|---|---|---|
showStepNumber | true | Shows step numbers for each card. |
scrollable | true | Displays the steps next to each other with a scroll. |
fillContainer | true | Makes one step take up the full width of its container. |
steps.img.src | - | Sets the path for the image. |
steps.img.alt | - | Sets an alternate text for the image. |
steps.img.width | - | Sets the width of the image. |
steps.img.height | - | Sets the height of the image. |
steps.img.lazy | false | Set to true to enable lazy loading for the image. |
steps.title | - | Sets the title of the step. |
steps.description | - | Sets the description of the step. Supports HTML. |
className | - | Pass additional CSS classes for the component. |