List — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Base UI.

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download list -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  List,
  ListTitle,
  ListContent,
  ListItem,
  ListItemTitle,
  ListItemAttributes,
} from "@/components/ui/list";
<List className="w-[347px]" naked={false}>
  <ListTitle align="justify" variant="main">
    Interactive list
  </ListTitle>
  <ListContent>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
  </ListContent>
</List>;

Examples

Default

import {
  List,
  ListTitle,
  ListContent,
  ListItem,
  ListItemTitle,
  ListItemAttributes,
} from "@/components/ui/list";
<List className="w-[347px]" naked={false}>
  <ListTitle align="justify" variant="main">
    Interactive list
  </ListTitle>
  <ListContent>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first=""
        second=""
        
        
      ></ListItemAttributes>
    </ListItem>
  </ListContent>
</List>;

With Attributes And Forced Slots

import {
  List,
  ListTitle,
  ListContent,
  ListItem,
  ListItemTitle,
  ListItemAttributes,
} from "@/components/ui/list";
import { Badge } from "@/components/ui/badge";
<List className="w-[347px]">
  <ListTitle align="justify" variant="main">
    With Attributes and forced slots
  </ListTitle>
  <ListContent>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted={false}
    >
      <ListItemTitle
        title="Title"
        
      >
        <Badge variant="info">pending</Badge>
      </ListItemTitle>
      <ListItemAttributes
        first="1st"
        
      >
        <Badge variant="tertiary">12:04</Badge>
      </ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted={false}
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first="1st"
        second="2nd"
        
        
      ></ListItemAttributes>
    </ListItem>
    <ListItem
      icon="CircleDotDashed"
      interactive
      inverted={false}
    >
      <ListItemTitle
        title="Title"
        
        description="Description"
        
      ></ListItemTitle>
      <ListItemAttributes
        first="1st"
        second="2nd"
        
        
      ></ListItemAttributes>
    </ListItem>
  </ListContent>
</List>;

Naked

import {
  List,
  ListTitle,
  ListContent,
  ListItem,
  ListItemTitle,
  ListItemAttributes,
} from "@/components/ui/list";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
<List className="w-[347px]" naked>
  <ListTitle align="justify" variant="main">
    Naked with slot left and right
  </ListTitle>
  <ListContent>
    <ListItem
      
      interactive={false}
      inverted={false}
    >
      <Avatar>
        <AvatarImage
          src="https://uploads.donux.com/api/image/67920ddf5778c60b519f2002"
          alt="avatar"
        />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <div className="flex w-full justify-between">
        <ListItemTitle
          title="Mario Rossi"
          
          description=""
          
        ></ListItemTitle>
        <ListItemAttributes
          first="read"
          firstColor="text-positive-mid"
          second=""
          
        ></ListItemAttributes>
      </div>
    </ListItem>
    <ListItem
      
      interactive={false}
      inverted={false}
    >
      <Avatar>
        <AvatarImage alt="avatar" />
        <AvatarFallback>VP</AvatarFallback>
      </Avatar>
      <div className="flex w-full justify-between">
        <ListItemTitle
          title="Valeria Piras"
          
          description=""
          
        ></ListItemTitle>
        <ListItemAttributes
          className="flex-row items-center"
          first="1st"
          
          second=""
          
        >
          <Badge variant="info">pending</Badge>
        </ListItemAttributes>
      </div>
    </ListItem>
    <ListItem
      
      interactive={false}
      inverted={false}
    >
      <Avatar>
        <AvatarImage
          src="https://uploads.donux.com/api/image/67920ddf5778c60b519f2002"
          alt="avatar"
        />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <div className="flex w-full justify-between">
        <ListItemTitle
          title="John Smith"
          
          description=""
          
        ></ListItemTitle>
        <ListItemAttributes
          first="1st"
          
          second=""
          
        ></ListItemAttributes>
      </div>
    </ListItem>
    <ListItem
      
      interactive={false}
      inverted={false}
    >
      <Avatar>
        <AvatarImage
          src="https://uploads.donux.com/api/image/67920ddf5778c60b519f2002"
          alt="avatar"
        />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <div className="flex w-full justify-between">
        <ListItemTitle
          title="Olen Del"
          
          description=""
          
        ></ListItemTitle>
        <ListItemAttributes
          first="1st"
          
          second=""
          
        ></ListItemAttributes>
      </div>
    </ListItem>
    <ListItem
      
      interactive={false}
      inverted={false}
    >
      <Avatar>
        <AvatarImage
          src="https://uploads.donux.com/api/image/67920ddf5778c60b519f2002"
          alt="avatar"
        />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <div className="flex w-full justify-between">
        <ListItemTitle
          title="Micheal Korguneiam very long name"
          
          description=""
          
        ></ListItemTitle>
        <ListItemAttributes
          first="not sent"
          
          second=""
          
        ></ListItemAttributes>
      </div>
    </ListItem>
  </ListContent>
</List>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

This component adds no props of its own to Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.