Alignment

---

• Choose a recipe
• Make a list of the ingredients
• Take the ingredients
• Prepare the dish following the recipe's instructions
• Enjoy the dish!

• Choose a recipe
• Make a list of the ingredients
• Take the ingredients
• Prepare the dish following the recipe's instructions
• Enjoy the dish!

Code

<script setup>
import { useTimelineDemo } from './timeline-demo';

const { isDark, timelineItems } = useTimelineDemo()
</script>

<template>
	<Timeline
		:items="timelineItems"
		:mode="isDark ? 'dark' : 'light'"
	/>
	<Timeline
		:items="timelineItems"
		align="right"
		:mode="isDark ? 'dark' : 'light'"
	/>
</template>

INFO

The alignment is left by default.