• Documentation
  • /
  • Remix Firebase
  • /
  • Stepper

Stepper

The Stepper component is a combination of components using the Headless UI Tabs component.

Useful for multi-step flows, such as onboardings and set-ups.

NB: the background color will automatically update based on your Tailwind configuration. In this website's case, it is #efee00.

Details

function StepperDemo() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const next = () => setSelectedIndex((index) => index + 1);
  const prev = () => setSelectedIndex((index) => index - 1);

  const steps = [
    {
      label: `Details`,
    },
    {
      label: `Preferences`,
    },
    {
      label: `Complete`,
    },
  ];

  return (
    <Tab.Group selectedIndex={selectedIndex}>
      <Tab.List className={'Stepper mb-6'}>
        {steps.map((step, index) => {
          return (
            <StepperItem
              disabled={false}
              key={index}
              className={index < selectedIndex ? `CompletedStep` : ``}
              step={index + 1}
              onSelect={() => setSelectedIndex(index)}
            >
              {step.label}
            </StepperItem>
          );
        })}
      </Tab.List>

      <Tab.Panels>
        <Tab.Panel>
          <div className={'flex w-full flex-col space-y-6'}>
            <div>
              <Heading type={3}>Details</Heading>
            </div>

            <div className={'flex w-full flex-col space-y-4'}>
              <TextField>
                <TextField.Label>First Name</TextField.Label>
                <TextField.Input placeholder={'First Name'} />
              </TextField>

              <TextField>
                <TextField.Label>Last Name</TextField.Label>
                <TextField.Input placeholder={'Last Name'} />
              </TextField>
            </div>

            <div>
              <Button onClick={next}>Next</Button>
            </div>
          </div>
        </Tab.Panel>

        <Tab.Panel>
          <div className={'flex w-full flex-col space-y-6'}>
            <div>
              <Heading type={3}>Preferences</Heading>
            </div>

            <div className={'flex w-full flex-col space-y-4'}>
              <Label className={'flex items-center space-x-4'}>
                <input type={'checkbox'} className={'Toggle'} />
                <span>Receive Emails</span>
              </Label>

              <Label className={'flex items-center space-x-4'}>
                <input type={'checkbox'} className={'Toggle'} />
                <span>Receive Notifications</span>
              </Label>
            </div>

            <div className={'flex space-x-2'}>
              <Button onClick={next}>Next</Button>
              <Button color={'transparent'} onClick={prev}>
                Back
              </Button>
            </div>
          </div>
        </Tab.Panel>

        <Tab.Panel>
          <div className={'flex w-full flex-col space-y-6'}>
            <div>
              <Heading type={3}>Complete</Heading>
            </div>

            <div>You&apos;re all set!</div>

            <div className={'flex space-x-2'}>
              <Button>Proceed to your Dashboard</Button>
              <Button color={'transparent'} onClick={prev}>
                Back
              </Button>
            </div>
          </div>
        </Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  );
}

Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor