List / Row

A structured suite designed to mimic the signature, premium segmented tables of Apple system settings. Features automated hairline borders, padded headers, detailed footers, and active click highlights.

Preview

Network Connectivity

Airplane Mode

Wi-Fi

grgurevic-fast

Bluetooth

Sounds & Alerts

Silent Mode

Normal ringer alerts and system sound cues are currently active.

Svelte Composition Code

<script lang="ts">
	import * as List from "$lib/components/ui/list";
	import { Switch } from "$lib/components/ui/switch";
	import { Plane, Wifi } from "lucide-svelte";
</script>

<List.Section header="Network Settings" footer="Wi-Fi is turned off in Airplane Mode.">
	<List.Root>
		<List.Row class="flex justify-between items-center">
			<div class="flex items-center gap-3">
				<Plane class="bg-orange-500 p-1 rounded-md size-7 text-white" />
				<span>Airplane Mode</span>
			</div>
			<Switch bind:checked={airplaneMode} />
		</List.Row>

		<List.Row class="flex justify-between items-center" href="/wifi-details">
			<div class="flex items-center gap-3">
				<Wifi class="bg-blue-500 p-1 rounded-md size-7 text-white" />
				<span>Wi-Fi</span>
			</div>
			<span class="text-muted-foreground flex items-center gap-1">
				{wifiState} <ChevronRight class="size-4" />
			</span>
		</List.Row>
	</List.Root>
</List.Section>

API & Sub-components Reference

List.Section

Groups associated root elements together under structured system-wide segments.

• header: string - Optional text label positioned above the group.
• footer: string - Optional explanatory text positioned directly below.

List.Root

The direct wrapper surrounding rows. Smooths and locks border radiuses at corner bounds automatically.

List.Row

A flexbox row segment providing automatic separators and hover highlight events.

• href: string - Target URL page link (transforms root into an `a` anchor).
• onclick: function - Click handler callback (transforms root into a `button`).