Arrow

<!-- source -->
<Arrow></Arrow>

Directions

<!-- source -->
<Arrow direction="start"></Arrow>
<Arrow direction="end"></Arrow>
<Arrow direction="left"></Arrow>
<Arrow direction="right"></Arrow>

Angles

<!-- source -->
<Arrow angle="-90"></Arrow>
<Arrow angle="-45"></Arrow>
<Arrow angle="0"></Arrow>
<Arrow angle="45"></Arrow>
<Arrow angle="90"></Arrow>

Color

It takes on the text color of the containing element.

<!-- source -->
<div class="text-blue-500">
	<Arrow angle="-90"></Arrow>
	<Arrow angle="-45"></Arrow>
	<Arrow angle="0"></Arrow>
	<Arrow angle="45"></Arrow>
	<Arrow angle="90"></Arrow>
</div>

Size

Size can be set externally.

<!-- source -->
<Arrow class="h-3 w-6"></Arrow>

Chevron

<!-- source -->
<Arrow type="chevron"></Arrow>

Directions

<!-- source -->
<Arrow type="chevron" direction="start"></Arrow>
<Arrow type="chevron" direction="end"></Arrow>
<Arrow type="chevron" direction="left"></Arrow>
<Arrow type="chevron" direction="right"></Arrow>

Angles

<!-- source -->
<Arrow type="chevron" angle="-90"></Arrow>
<Arrow type="chevron" angle="-45"></Arrow>
<Arrow type="chevron" angle="0"></Arrow>
<Arrow type="chevron" angle="45"></Arrow>
<Arrow type="chevron" angle="90"></Arrow>

Color

It takes on the text color of the containing element.

<!-- source -->
<div class="text-blue-500">
	<Arrow type="chevron" angle="-90"></Arrow>
	<Arrow type="chevron" angle="-45"></Arrow>
	<Arrow type="chevron" angle="0"></Arrow>
	<Arrow type="chevron" angle="45"></Arrow>
	<Arrow type="chevron" angle="90"></Arrow>
</div>

Size

Size can be set externally.

<!-- source -->
<Arrow type="chevron" class="size-2"></Arrow>