Steps

API Docs

Steps allow you to create a series of steps that users can follow to complete a task. This is useful for onboarding, form completion, and many more.

Basic Steps

Steps are automatically numbered and connected with lines. You can utilize colors to indicate progress through the steps.

Preview

Write Code
Release Code
Profit
Rule the World

Code

= daisy_steps do |steps|
  - steps.with_step(title: "Write Code", css: "step-primary")
  - steps.with_step(title: "Release Code", css: "step-primary")
  - steps.with_step(title: "Profit", css: "step-secondary")
  - steps.with_step(title: "Rule the World")

Vertical Steps

You can also display steps vertically.

Preview

Write Code
Release Code
Profit
Rule the World

Code

= daisy_steps(css: "steps-vertical") do |steps|
  - steps.with_step(title: "Write Code", css: "step-primary")
  - steps.with_step(title: "Release Code", css: "step-primary")
  - steps.with_step(title: "Profit", css: "step-secondary")
  - steps.with_step(title: "Rule the World")

Custom Content

You can customize the content of each step to include any (short) content you want by using the number option.

Note

You can also supply this via the data-content attribute in the html.

= daisy_steps do |steps|
  - steps.with_step(html: { data: { content: "❤️" } })

And you can alter the colors by supplying CSS for the after pseudo-element. Note that you may need to use the !important modifier to override the default styles.

Preview

Code

= daisy_steps do |steps|
  - steps.with_step(number: "AB")
  - steps.with_step(number: "CD")
  - steps.with_step(number: "EF")
  - steps.with_step(number: "★")
  - steps.with_step(number: "✓")
  - steps.with_step(number: "✕", css: "after:!bg-black after:!text-green-500")

Made with by Profoundry .