Skip to content
Fuji UI
Component

List

Divided row list with optional start/end slots.

Basic

  • Row one
  • Row two
  • Row three

With leading icon and metadata

  • Design assets
    12 files
  • Contracts
    3 files

With avatar

  • AC
    Gean Lyka
    Active
  • KS
    Kenji Sato
    Invited

Compact vs. comfortable

  • Compact row
  • Compact row
  • Comfortable row
  • Comfortable row

Without dividers

  • Row one
  • Row two

Clickable, selected, and disabled

Only interactive rows get cursor-pointer and a hover state.

  • Archived (disabled)

Infinite loading

Fetches the next page when the end of the list scrolls into view, instead of a pager or a 'load more' button. Scroll the list to the bottom.

  • Pr
    Priya Nair opened a PR1h ago
  • Ke
    Kenji Sato left a review2h ago
  • Ma
    Marco Rossi merged a branch3h ago
  • Ad
    Ada Iwu closed an issue4h ago
  • Pr
    Priya Nair opened a PR5h ago
  • Ke
    Kenji Sato left a review6h ago
  • Ma
    Marco Rossi merged a branch7h ago
  • Ad
    Ada Iwu closed an issue8h ago
  • Uses an IntersectionObserver on a sentinel, not a scroll handler, so a long list stays smooth
  • Re-entry is guarded: the observer can fire several times before the new page renders

API reference

Also accepts everything from React.HTMLAttributes<HTMLUListElement>.

List.Item props

endSlotNone
React.ReactNode

Content on the trailing edge - a badge, a chevron, a control.

onClickNone
React.MouseEventHandler<HTMLButtonElement | HTMLLIElement>

Renders the row as a real `<button>` so it's keyboard- and screen-reader-operable.

startSlotNone
React.ReactNode

Content on the leading edge - an avatar, an icon, a checkbox.

Also accepts everything from Omit<React.HTMLAttributes<HTMLElement>, "onClick">.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent