import * as React from "react"; import { tv } from "tailwind-variants"; const listVariants = tv({ slots: { root: "list bg-base-100 rounded-box shadow-md", row: "list-row", colGrow: "list-col-grow", colWrap: "list-col-wrap", label: "p-4 pb-2 text-xs opacity-60 tracking-wide", }, }); export type ListProps = Omit, "color">; const List = React.forwardRef( ({ className, ...props }, ref) => { const { root } = listVariants(); return

, "color">; const ListRow = React.forwardRef( ({ className, ...props }, ref) => { const { row } = listVariants(); return

; } ); ListRow.displayName = "ListRow"; export type ListColGrowProps = Omit, "color">; const ListColGrow = React.forwardRef( ({ className, ...props }, ref) => { const { colGrow } = listVariants(); return

; } ); ListColGrow.displayName = "ListColGrow"; export type ListColWrapProps = Omit, "color">; const ListColWrap = React.forwardRef( ({ className, ...props }, ref) => { const { colWrap } = listVariants(); return

; } ); ListColWrap.displayName = "ListColWrap"; export type ListLabelProps = Omit, "color">; const ListLabel = React.forwardRef( ({ className, ...props }, ref) => { const { label } = listVariants(); return

; } ); ListLabel.displayName = "ListLabel"; const ListComponent = Object.assign(List, { Row: ListRow, ColGrow: ListColGrow, ColWrap: ListColWrap, Label: ListLabel, }); export { ListComponent as List };

List

Installation

Default

With avatar

With labels

List

Installation

Default

With avatar

With labels