{"id":24873766,"url":"https://github.com/uduma-sonia/svelte-wizard","last_synced_at":"2026-02-06T10:02:19.961Z","repository":{"id":262309324,"uuid":"886852556","full_name":"uduma-sonia/svelte-wizard","owner":"uduma-sonia","description":"A flexible and customizable stepper component for Svelte, perfect for building multi-step forms with progress indicators.","archived":false,"fork":false,"pushed_at":"2025-06-06T07:45:32.000Z","size":380,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-27T20:12:07.523Z","etag":null,"topics":["stepper","svelte","svelte-library","svelte-stepper","wizard"],"latest_commit_sha":null,"homepage":"https://svelte-wizard.netlify.app/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uduma-sonia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-11T18:11:01.000Z","updated_at":"2025-10-30T11:00:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"dd40dce5-5a16-46ef-b056-090319887123","html_url":"https://github.com/uduma-sonia/svelte-wizard","commit_stats":null,"previous_names":["uduma-sonia/svelte-wizard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/uduma-sonia/svelte-wizard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Fsvelte-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Fsvelte-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Fsvelte-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Fsvelte-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uduma-sonia","download_url":"https://codeload.github.com/uduma-sonia/svelte-wizard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Fsvelte-wizard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29157469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T07:18:23.844Z","status":"ssl_error","status_checked_at":"2026-02-06T07:13:32.659Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["stepper","svelte","svelte-library","svelte-stepper","wizard"],"created_at":"2025-02-01T06:17:25.705Z","updated_at":"2026-02-06T10:02:19.936Z","avatar_url":"https://github.com/uduma-sonia.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Wizard\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003eA flexible, customizable stepper component for Svelte — perfect for building multi-step forms with progress indicators.\u003c/h3\u003e\n  \u003cp\u003eStyle each step, control navigation, and manage form state your way.\u003c/p\u003e\n\n  \u003cp\u003e\n    \u003ca href=\"https://npm.im/svelte-wizard\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/svelte-wizard.svg?color=brightgreen\u0026style=flat-square\" alt=\"npm version\"\u003e\u003c/a\u003e\n    \u003ca href=\"http://makeapullrequest.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/PR(s)-welcome-brightgreen.svg?style=flat-square\" alt=\"Pull requests welcome\"\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003e ⚠️ Minimum supported Svelte version: **v5**\n\n---\n\n![Svelte Wizard in action](https://res.cloudinary.com/dbqgv8zl7/image/upload/v1731450316/record_jrxr2b.gif)\n\n### 📺 [Live Demo](https://svelte-wizard.netlify.app) | 🧪 [Playground](https://svelte.dev/playground/740a81ce5023497eba5c4ebd7f8ec6ad?version=5.1.16)\n\n---\n\n## ⚡ Features\n\n- Custom styling for steps, titles, and progress\n- Step navigation and state tracking\n- Built-in progress bar\n- Animated transitions\n- Event dispatching\n- Centralized form state\n\n# Installation\n\n```\n$ npm i svelte-wizard\n```\n\n\u003cbr/\u003e\n\n# 🧩 Basic Usage\n\n```\n\u003cscript\u003e\n  import { WizardComponent } from 'svelte-wizard';\n  import StepOne from './StepOne.svelte';\n  import StepTwo from './StepTwo.svelte';\n  import StepThree from './StepThree.svelte';\n\n  let stepsList = [\n    { step: StepOne, title: 'Step One' },\n    { step: StepTwo, title: 'Step Two' },\n    { step: StepThree, title: 'Step Three' }\n  ];\n\u003c/script\u003e\n\n\u003cWizardComponent {stepsList} /\u003e\n```\n\n\u003cbr/\u003e\n\n# ⚙️ With Options\n\n```\n\u003cscript\u003e\n  import { WizardComponent } from 'svelte-wizard';\n\n  let stepsList = [...];\n\n  let options = $state({\n    showTitles: true,\n    showCheckIcon: false\n  });\n\u003c/script\u003e\n\n\u003cWizardComponent {stepsList} {options} /\u003e\n\n```\n\n\u003cbr/\u003e\n\n# 🎨 With Custom Class Names\n\n```\n\u003cscript\u003e\n  import { WizardComponent } from 'svelte-wizard';\n\n  let stepsList = [...];\n\n  let customClassnames = $state({\n    activeTitleClass: 'activeTitleClass'\n  });\n\u003c/script\u003e\n\n\u003cWizardComponent {stepsList} {customClassnames} /\u003e\n\n```\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n# 🧪 Props Reference\n\n### Bindable\n\n| Props           | Type     | Description                        |\n| --------------- | -------- | ---------------------------------- |\n| currentIndex    | `number` | Index of the current step          |\n| wizardFormState | `object` | Shared form state across all steps |\n\n\u003cbr/\u003e\n\n### `stepsList`\n\n| Prop  | Type              | Description                  |\n| ----- | ----------------- | ---------------------------- |\n| step  | `SvelteComponent` | The step component to render |\n| title | `string`          | Title of the step            |\n| icon  | `SvelteComponent` | Optional icon for the step   |\n\n\u003cbr/\u003e\n\n### `options`\n\n| Prop                | Type    | Default | Description                                                                   |\n| ------------------- | ------- | ------- | ----------------------------------------------------------------------------- |\n| showTitles          | boolean | `true`  | Show titles for each step                                                     |\n| showOneTitle        | boolean | `false` | Show only the active step title (requires `showTitles` and `showProgressBar`) |\n| showCheckIcon       | boolean | `false` | Show check icon on completed steps                                            |\n| showStepCount       | boolean | `true`  | Show step numbers                                                             |\n| clickableNavigation | boolean | `false` | Allow users to click step indicators to navigate                              |\n| shouldAnimate       | boolean | `true`  | Animate transitions between steps                                             |\n| showProgressBar     | boolean | `true`  | Display progress bar                                                          |\n| defaultStep         | number  | `0`     | Index of the initial step                                                     |\n\n\u003cbr/\u003e\n\n### `customClassnames`\n\n| Prop                    | Type   | Description                                    |\n| ----------------------- | ------ | ---------------------------------------------- |\n| activeTitleClass        | string | CSS class for active/completed step titles     |\n| inactiveTitleClass      | string | CSS class for inactive step titles             |\n| activeBarItemClass      | string | CSS class for active progress items (dot/line) |\n| inactiveBarItemClass    | string | CSS class for inactive progress items          |\n| activeStepNumberClass   | string | CSS class for active/current step number       |\n| inactiveStepNumberClass | string | CSS class for inactive step numbers            |\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n# 📣 Events\n\nSvelte wizard provides custom events to the parent and child components giving control over navigation and form state management.\n\n### Examples\n\n\u003cb\u003eParent Component\u003c/b\u003e\n\n```\n\u003c!-- FormContainer.svelte --\u003e\n\n\u003cWizardComponent onStepChange={(e) =\u003e console.log(e)} /\u003e\n```\n\n\u003cbr/\u003e\n\n\u003cb\u003eChild Component\u003c/b\u003e\n\n```\n\u003c!-- StepOne.svelte --\u003e\n\n\u003cscript\u003e\n\tlet { handleBack, handleSkipTo, handleNext, handleSkipToEnd,handleReset } = $props();\n\u003c/script\u003e\n\n\u003cbutton on:click={handleNext}\u003e Next\u003c/button\u003e\n\u003cbutton on:click={handleSkipToEnd}\u003e Skip\u003c/button\u003e\n\n```\n\n| Event/Prop            | Triggered by | Description                                     |\n| --------------------- | ------------ | ----------------------------------------------- |\n| `onStepChange`        | Parent       | Fires when current step changes                 |\n| `handleNext`          | Child        | Goes to the next step                           |\n| `handleBack`          | Child        | Goes to the previous step                       |\n| `handleSkipTo(index)` | Child        | Skips to a specific step                        |\n| `handleSkipToEnd`     | Child        | Skips to the final step                         |\n| `handleSkipToStart`   | Child        | Skips to the first step                         |\n| `handleReset`         | Child        | Resets form state and returns to the first step |\n| `handleStateUpdate`   | Child        | Updates shared `wizardFormState`                |\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n# 🧠 State Management\n\nSvelte Wizard provides a centralized wizardFormState shared across all steps. You can update it using handleStateUpdate\n\n\u003cbr/\u003e\n\n### Accessing `wizardFormState`\n\n```\n\u003cscript\u003e\n\tlet { wizardFormState } = $props();\n\tlet firstName = $state(wizardFormState?.firstName);\n\u003c/script\u003e\n\n```\n\n### Using `handleStateUpdate`\n\n```\n\u003cscript\u003e\n  let { handleStateUpdate, wizardFormState } = $props();\n\n  const submit = () =\u003e {\n    handleStateUpdate('firstName', 'Jane'); // Set a single key\n    handleStateUpdate({ lastName: 'Doe' }); // Merge object\n    handleStateUpdate({ firstName: 'Jane', lastName: 'Doe' }, { replaceAll: true }); // Replace state\n  };\n\u003c/script\u003e\n```\n\n### `handleStateUpdate` Argument Types\n\n| Argument        | Type                            | Description                           |\n| --------------- | ------------------------------- | ------------------------------------- |\n| key + value     | string, any                     | Updates a specific field in the state |\n| object          | object                          | Merges into `wizardFormState`         |\n| object + config | object, { replaceAll: boolean } | Optionally replaces the entire state  |\n\n## defaultFormState\n\nSvelte wizard also accepts the `defaultFormState` props used to define default data for `wizardFormState`\n\n```\n\u003cWizardComponent defaultFormState={{ firstName: '' }} /\u003e\n```\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n# 🎨 Using Custom CSS Classes\n\nTo scope styles locally, use :global:\n\n```\n:global(.activeTitleClass) { /* styles */ }\n:global(.inactiveTitleClass) { /* styles */ }\n:global(.activeBarItemClass) { /* styles */ }\n:global(.inactiveBarItemClass) { /* styles */ }\n:global(.activeStepNumberClass) { /* styles */ }\n:global(.inactiveStepNumberClass) { /* styles */ }\n```\n\n## 🤝 Contributing\n\nPull requests are welcome! If you'd like to add features or fix bugs, feel free to fork and submit a PR.\n\n\u003cbr /\u003e\n\n## ⚖️ Licence\n\nMIT (c) [Sonia Uduma](https://sohnya.dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuduma-sonia%2Fsvelte-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuduma-sonia%2Fsvelte-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuduma-sonia%2Fsvelte-wizard/lists"}