# Stepper
Divide and present content in sequenced steps.

<Preview client:visible>
	<Fragment slot="preview">
		<Example client:visible />
	</Fragment>
	<Fragment slot="codeReact">
		<Code code={`Coming soon...`} lang="tsx" />
	</Fragment>
	<Fragment slot="codeSvelte">
		<Code code={ExampleRaw} lang="svelte" />
	</Fragment>
</Preview>

## Using Components

Optionally, you can substitute primitive data for components and props.

<Preview client:visible>
	<Fragment slot="preview">
		<ExampleComponent client:visible />
	</Fragment>
	<Fragment slot="codeReact">
		<Code code={`Coming soon...`} lang="tsx" />
	</Fragment>
	<Fragment slot="codeSvelte">
		<div class="space-y-4">
			<Code code={ExampleComponentRaw} lang="svelte" />
			<Code code={ExampleStepOne} lang="svelte" title="ExampleStepOne.svelte" />
		</div>
	</Fragment>
</Preview>