ListiOS

Settings-style rows with separators and press feedback.

$ npx lumioui add list

import { List } from "@/components/ui/list/list";

Props21

List
inset?	boolean	Inset-grouped style: rounded card sections with horizontal margin.
glass?	boolean	Liquid-glass section material (pairs naturally with inset).
className?	string
ListSection
title?	string	Optional header text rendered above the group, iOS-settings style.
titleClassName?	string	Extra classes for the header text.
className?	string
ListItem
title	string	Primary label.
subtitle?	string	Secondary label under the title.
leading?	React.ReactNode	Slot rendered before the text block (icon, avatar, etc.).
trailing?	React.ReactNode	Slot rendered after the text block, before the chevron.
showChevron?	boolean	Show a disclosure chevron on the trailing edge.
haptic?	"light" \| "medium" \| "heavy" \| "selection" \| false	Haptic on press. Default "selection"; false to disable.
className?	string
titleClassName?	string
subtitleClassName?	string
density?	"default" \| "compact"	Vertical rhythm: "default" for standard rows, "compact" for dense rails (media pickers, followers) where more rows must fit the fold.
titleNumberOfLines?	number	Title line clamp. Default 1 — event/news rows that must not lose their tail should pass 2.
subtitleNumberOfLines?	number	Subtitle line clamp. Default 2.
children?	React.ReactNode
ListSeparator
inset?	boolean \| "none" \| "icon" \| "text" \| number	Left inset preset: - `"none"`/false (default): full-bleed. - `"icon"`/true: starts under the leading slot edge (16px — the row's px-4). Legacy `inset` maps here for pixel parity. - `"text"`: aligns under the title text, past a standard 24px leading icon (16px padding + 24px icon + 12px gap = 52px). - number: exact px inset — match your leading slot's width.
className?	string

List — Contactscontacts.tsx

list/variants/contacts.tsx open

Settings-style rows with separators and press feedback.

import { ListContacts } from "@/components/ui/list/variants/contacts";

export function Example() {
  return (
    <ListContacts />
  );
}

import * as React from "react";
import { View } from "react-native";
import { List } from "../list";
import { Avatar } from "../../avatar/avatar";
import { Text } from "../../text/text";

/** ListContacts — presence-aware contact rows with chevrons. */
export function ListContacts() {
  const [active, setActive] = React.useState("amara");
  return (
    <View className="w-full gap-3">
        <List glass inset className="w-full">
          <List.Section title="Contacts">
            <List.Item
              title="Amara Chen"
              subtitle="Online • usually replies in minutes"
              leading={<Avatar size="sm" source={{ uri: "https://i.pravatar.cc/150?img=47" }} fallback="AC" status="online" alt="Amara Chen" />}
              showChevron
              onPress={() => setActive("amara")}
              accessibilityState={{ selected: active === "amara" }}
            />
            <List.Separator inset={60} />
            <List.Item
              title="Diego Ruiz"
              subtitle="Busy • Ruiz Studio invoice pending"
              leading={<Avatar size="sm" source={{ uri: "https://i.pravatar.cc/150?img=12" }} fallback="DR" status="busy" alt="Diego Ruiz" />}
              showChevron
              onPress={() => setActive("diego")}
              accessibilityState={{ selected: active === "diego" }}
            />
            <List.Separator inset={60} />
            <List.Item
              title="Priya Nair"
              subtitle="Away • Lisbon album shared with you"
              leading={<Avatar size="sm" source={{ uri: "https://i.pravatar.cc/150?img=32" }} fallback="PN" status="away" alt="Priya Nair" />}
              showChevron
              onPress={() => setActive("priya")}
              accessibilityState={{ selected: active === "priya" }}
            />
          </List.Section>
        </List>
        <Text variant="muted" className="px-1 text-white drop-shadow">Selected: {active}</Text>
      </View>
  );
}

List — Glassglass.tsx

list/variants/glass.tsx open

Settings-style rows with separators and press feedback.

import { ListGlass } from "@/components/ui/list/variants/glass";

export function Example() {
  return (
    <ListGlass />
  );
}

import * as React from "react";
import { View, Text } from "react-native";
import { List } from "../list";
import { Ambient } from "../../glass/ambient";

/** ListGlass — an inset glass section floating over a coastline photo. */
export function ListGlass() {
  return (
    <View className="relative h-[420px] w-full overflow-hidden rounded-3xl">
      <Ambient seed="list" />
      <View className="absolute inset-x-0 top-10">
        <List glass inset>
          <List.Section title="Playback">
            <List.Item title="Crossfade" trailing={<Text className="text-xs text-white/70">4s</Text>} />
            <List.Separator />
            <List.Item title="Lossless" trailing={<Text className="text-xs text-white/70">On</Text>} />
            <List.Separator />
            <List.Item title="Offline" showChevron />
          </List.Section>
        </List>
      </View>
      <View className="absolute bottom-5 left-5">
        <Text className="text-[10px] font-semibold uppercase tracking-widest text-white/90">
          GLASS SECTIONS
        </Text>
      </View>
    </View>
  );
}

List — Ordersorders.tsx

list/variants/orders.tsx open

Settings-style rows with separators and press feedback.

import { ListOrders } from "@/components/ui/list/variants/orders";

export function Example() {
  return (
    <ListOrders />
  );
}

import * as React from "react";
import { View } from "react-native";
import { List } from "../list";
import { Avatar } from "../../avatar/avatar";
import { Text } from "../../text/text";

/** ListOrders — inset order history with thumbnails and prices. */
export function ListOrders() {
  const [active, setActive] = React.useState("order-1042");
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="text-white drop-shadow">Recent orders — selected: {active}</Text>
        <List glass inset className="w-full">
          <List.Section title="Recent orders">
            <List.Item
              title="#1042 — Tonkotsu ×2"
              subtitle="Sakura Ramen • $29.00 • 2m ago"
              leading={<Avatar size="sm" fallback="SR" alt="Sakura Ramen" />}
              trailing={<Text variant="small">$29.00</Text>}
              showChevron
              onPress={() => setActive("order-1042")}
              accessibilityState={{ selected: active === "order-1042" }}
            />
            <List.Separator inset={60} />
            <List.Item
              title="#1039 — Spicy Miso + Gyoza"
              subtitle="Sakura Ramen • $20.50 • Sep 12"
              leading={<Avatar size="sm" fallback="SR" alt="Sakura Ramen" />}
              trailing={<Text variant="small">$20.50</Text>}
              showChevron
              onPress={() => setActive("order-1039")}
              accessibilityState={{ selected: active === "order-1039" }}
            />
          </List.Section>
        </List>
      </View>
  );
}