Inset grouped list rows with leading icons, values, switches and chevrons.
npx shadcn@latest add @lokalhost/listsThe source is copied to components/ui/list.tsx — it’s yours to edit.
import { ListGroup, ListItem } from "@/components/ui/list";
<ListGroup header="General">
<ListItem title="Notifications" icon="notifications" iconColor="#ef4444" value="On" onPress={() => {}} />
<ListItem title="Language" icon="globe-outline" iconColor="#3b82f6" value="English" onPress={() => {}} />
<ListItem
title="Dark mode"
icon="moon"
iconColor="#6366f1"
trailing={<Switch value={dark} onValueChange={setDark} />}
/>
</ListGroup>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | Primary row text. |
subtitle | string | undefined | Secondary text under the title. |
icon | keyof typeof Ionicons.glyphMap | undefined | Leading icon inside a tinted square. |
iconColor | string | colors.fgMuted | Background of the icon square. |
leading | React.ReactNode | undefined | Custom leading element, e.g. an Avatar. |
value | string | undefined | Muted trailing value, e.g. “English”. |
trailing | React.ReactNode | undefined | Custom trailing element such as a Switch. |
chevron | boolean | true when onPress is set | Shows a disclosure chevron. |
destructive | boolean | false | Renders the title in the danger colour. |
onPress | () => void | undefined | Row press handler. |