Item

npx shadcn@latest add https://ui.saasflare.io/r/item.json

pnpm add @saasflare/ui

"use client"import {    Avatar,    AvatarFallback,    AvatarImage,    Button,    Item,    ItemActions,    ItemContent,    ItemDescription,    ItemMedia,    ItemTitle,} from "@saasflare/ui"/** A list item with avatar media, content, and a trailing action. */export function Demo() {    return (        <Item className="w-full max-w-md" variant="outline">            <ItemMedia>                <Avatar>                    <AvatarImage src="https://i.pravatar.cc/96?img=24" alt="Elena Vasquez" />                    <AvatarFallback>EV</AvatarFallback>                </Avatar>            </ItemMedia>            <ItemContent>                <ItemTitle>Elena Vasquez</ItemTitle>                <ItemDescription>elena@saasflare.io · Admin</ItemDescription>            </ItemContent>            <ItemActions>                <Button variant="ghost" size="sm">                    Manage                </Button>            </ItemActions>        </Item>    )}

"use client"import {    Badge,    Item,    ItemContent,    ItemDescription,    ItemGroup,    ItemSeparator,    ItemTitle,} from "@saasflare/ui"const INTEGRATIONS = [    { name: "Stripe", description: "Billing and subscriptions", status: "Connected" },    { name: "Slack", description: "Team notifications", status: "Connected" },    { name: "GitHub", description: "Deploy on push", status: "Not connected" },]/** A grouped list with separators — ideal for settings or integration lists. */export function Demo() {    return (        <ItemGroup className="w-full max-w-md rounded-lg border">            {INTEGRATIONS.map((integration, index) => (                <div key={integration.name}>                    {index > 0 && <ItemSeparator />}                    <Item>                        <ItemContent>                            <ItemTitle>{integration.name}</ItemTitle>                            <ItemDescription>{integration.description}</ItemDescription>                        </ItemContent>                        <Badge                            variant="soft"                            intent={integration.status === "Connected" ? "success" : "neutral"}                        >                            {integration.status}                        </Badge>                    </Item>                </div>            ))}        </ItemGroup>    )}