Content

List

Structured rows for metadata and compact data.

List

Structured rows for metadata and compact data.

Content

Open projects
12 active projects
Last updated
Today, 9:42 AM
Workspace type
Personal workspace

Install

npx shadcn@latest add http://localhost:3000/r/list.json

Usage

"use client"

import { Clock3Icon, FolderOpenIcon, Layers3Icon } from "lucide-react"
import {
  List,
  ListItem,
  ListItemContent,
  ListItemLabel,
  ListItemMedia,
  ListItemValue,
} from "@/components/ui/list"

export function WorkspaceSummary() {
  return (
    <List className="max-w-md">
      <ListItem>
        <ListItemMedia>
          <FolderOpenIcon />
        </ListItemMedia>
        <ListItemContent>
          <ListItemLabel>Open projects</ListItemLabel>
          <ListItemValue>12 active projects</ListItemValue>
        </ListItemContent>
      </ListItem>
      <ListItem>
        <ListItemMedia>
          <Clock3Icon />
        </ListItemMedia>
        <ListItemContent>
          <ListItemLabel>Last updated</ListItemLabel>
          <ListItemValue>Today, 9:42 AM</ListItemValue>
        </ListItemContent>
      </ListItem>
      <ListItem>
        <ListItemMedia>
          <Layers3Icon />
        </ListItemMedia>
        <ListItemContent>
          <ListItemLabel>Workspace type</ListItemLabel>
          <ListItemValue>Personal workspace</ListItemValue>
        </ListItemContent>
      </ListItem>
    </List>
  )
}

API

ListListItemListItemActionListItemContentListItemLabelListItemMediaListItemValue

function List(props: React.ComponentProps<"ul">)

function ListItem(props: React.ComponentProps<"li">)

function ListItemMedia(props: React.ComponentProps<"div">)

function ListItemContent(props: React.ComponentProps<"div">)

function ListItemLabel(props: React.ComponentProps<"div">)

function ListItemValue(props: React.ComponentProps<"div">)

function ListItemAction(props: React.ComponentProps<"div">)

Source code +

import * as React from "react"
import { cn } from "cn"

function List({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="list"
      className={cn(
        "w-full overflow-hidden rounded-xl border bg-card font-sans text-card-foreground",
        className
      )}
      {...props}
    />
  )
}

function ListItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="list-item"
      className={cn(
        "group/list-item flex min-h-16 items-center gap-3 border-b px-4 py-3 last:border-b-0",
        "transition-colors hover:bg-muted/40",
        className
      )}
      {...props}
    />
  )
}

function ListItemMedia({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="list-item-media"
      className={cn(
        "flex shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-5 [&>svg]:shrink-0",
        className
      )}
      {...props}
    />
  )
}

function ListItemContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="list-item-content"
      className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
      {...props}
    />
  )
}

function ListItemLabel({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="list-item-label"
      className={cn("text-xs text-muted-foreground", className)}
      {...props}
    />
  )
}

function ListItemValue({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="list-item-value"
      className={cn("text-sm leading-snug font-medium", className)}
      {...props}
    />
  )
}

function ListItemAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="list-item-action"
      className={cn("ml-auto flex shrink-0 items-center gap-2", className)}
      {...props}
    />
  )
}

export {
  List,
  ListItem,
  ListItemAction,
  ListItemContent,
  ListItemLabel,
  ListItemMedia,
  ListItemValue,
}

Registry JSON ↗