Foundations

Components

A structured suite designed to mimic the signature, premium segmented tables of Apple system settings.

bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/list.json

A clean settings panel example grouping networking and sound controls.

Network Connectivity

Airplane Mode

Sounds & Alerts

Silent Mode

Normal ringer alerts and system sound cues are currently active.

Background

The best practices when using list views.

Keep row labels brief and put descriptive notes in list section footers.
Choose icons with distinct colors to represent each option for easy recognition.
Use a Switch in the trailing slot for toggleable settings rows instead of custom checkboxes.
Use chevron indicators to denote rows that navigate to sub-views via a Navigation Stack.

List sub-components and customization parameters.

Component / Prop	Type / Role	Default	Description
List.Section	Group section	-	Groups associated root elements together under structured system-wide segments.
List.Root	List container	-	The direct wrapper surrounding rows. Smooths and locks border radiuses at corner bounds automatically.
List.Row	Flexbox row item	-	A flexbox row segment providing automatic separators and hover highlight events.
header	string	undefined	Optional text label positioned above the section group.
footer	string	undefined	Optional explanatory text positioned directly below the section group.
href	string	undefined	Target URL page link (transforms root into an `a` anchor).

Give feedback