Shadcn List Panel Components

Basic vertical stack of Item rows with titles only.

List rows stacked flush inside one bordered panel with divide lines between entries.

Stacked outline rows that share edges inside one rounded group.

Dense list using Item size sm for tighter row spacing.

List grouped inside a single rounded border container.

Each row includes a leading Lucide icon in ItemMedia.

Stacked list rows with leading icons inside one bordered panel.

Ordered list with a rank column prefix on every row.

Two-line rows with ItemTitle and ItemDescription on every entry.

Rows with a secondary meta line such as timestamps or file sizes.

Member list with Avatar initials in ItemMedia on each row.

Rows with a trailing Badge for plan or status labels.

Rows with a colored dot indicator for online or sync state.

Each row includes an icon button in ItemActions.

Navigable settings-style rows rendered as anchor links.

Single-select list with one highlighted row at a time.

Checkbox on each row plus a select-all control in the header.

List container showing Empty when no rows are available.

Skeleton placeholder rows while list data is loading.

Long list inside ScrollArea with a fixed max height.

Grouped list with section labels above each ItemGroup.

Scrollable list with sticky section labels while scrolling.

Search input filters visible rows in the list.

Toolbar appears when rows are selected for bulk delete or archive.

Checkbox list with strikethrough styling for completed tasks.

Task list with an input and button to append new rows.

Task rows with priority Badge labels on each entry.

Task list with due date meta and overdue row styling.

Expandable parent tasks revealing nested subtask rows.

Move rows up or down with arrow buttons per entry.

Sortable list with grip handles using dnd-kit.

Sortable rows with a grip handle on the leading edge of each item.

Entire item rows act as the drag surface with a small activation distance.

Floating drag preview using dnd-kit DragOverlay while the list reflows.

Sortable rows inside a single stacked bordered panel with divide lines.

Sortable rows with leading icons and a trailing grip handle.

Sortable list where pinned rows stay fixed and cannot be dragged.

Timeline-style rows with avatar, action text, and timestamp.

List rows using the muted Item variant for subdued entries.

Rows with ItemFooter for secondary metadata or actions.

Rows with ItemHeader above the main content block.

Compact navigation rows with a trailing chevron indicator.

Filterable panel with a dedicated empty state when nothing matches.

Placeholder skeleton rows shaped like list items while loading.

Scrollable list with a footer button to load additional rows.

Dense list panel using the xs Item size variant.

Panel with a sticky back navigation header above the list.

Settings rows with a trailing Switch control per entry.

Single-select list built from radio controls in each row.

Mixed list with some rows disabled and non-interactive.

Rows with thumbnail images in ItemMedia for media-style lists.

File-style rows with type icon, name, and size metadata.

Rows with a progress bar showing sync or upload status.

Overflow menu on each row for secondary actions.

Rows with a trailing destructive button for remove or delete.

Secondary row actions that appear on hover.

Right-click context menu on each list row.

Avatar rows with title and secondary description text.

Avatar rows with an online presence indicator.

Overflow menu on each row inside a unified stacked panel.

Delete control on each row in a stacked panel.

Hover-revealed row actions in a stacked panel.

Right-click actions on rows in a stacked panel.

Thumbnail rows in a unified stacked media panel.

File icon rows with sizes in a stacked panel.

Progress bars per row in a stacked job panel.