Components · Tabs · Use

Tabs

Choose a configuration and copy the result.

Color settings

State

Markup

<script lang="ts">
	import { Tabs } from '@ark-ui/svelte';
</script>

<Tabs.Root defaultValue="colors" class="tabs-root">
	<Tabs.List class="tabs-list">
		<Tabs.Trigger value="colors" class="tabs-trigger">
			Colors
		</Tabs.Trigger>
		<Tabs.Trigger value="type" class="tabs-trigger">
			Type
		</Tabs.Trigger>
		<Tabs.Indicator class="tabs-indicator" />
	</Tabs.List>
	<Tabs.Content value="colors" class="tabs-content">Color settings</Tabs.Content>
	<Tabs.Content value="type" class="tabs-content">Type settings</Tabs.Content>
</Tabs.Root>